:root{
  --ink:#111827;
  --muted:#667085;
  --line:#e7eaf0;
  --surface:#ffffff;
  --bg:#f6f8fc;
  --brand:#5b5ce2;
  --brand-dark:#4546c8;
  --brand-soft:#eef0ff;
  --success:#16834b;
  --success-soft:#e8f7ef;
  --danger:#c93636;
  --danger-soft:#fdecec;
  --warning:#a76b00;
  --warning-soft:#fff5dc;
  --shadow:0 12px 35px rgba(17,24,39,.07);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
}
a{color:inherit}
nav{
  min-height:72px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(18px,5vw,70px);position:sticky;top:0;z-index:20;
}
.brand-wrap{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#7c5cff);
  color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 7px 18px rgba(91,92,226,.25);
}
.brand{font-weight:900;font-size:20px;letter-spacing:2.5px;color:var(--ink);text-decoration:none}
.nav-links{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  padding:9px 12px;text-decoration:none;color:#596273;border-radius:10px;font-size:14px;font-weight:650;
}
.nav-links a:hover{background:#f1f3f8;color:var(--ink)}
.nav-links .nav-cta{background:var(--ink);color:#fff}
.nav-links .nav-cta:hover{background:#273044;color:#fff}
.user-chip{background:var(--brand-soft)!important;color:var(--brand-dark)!important}
main{max-width:1220px;margin:auto;padding:38px 22px 70px;min-height:calc(100vh - 130px)}
footer{text-align:center;padding:28px;color:#8a93a3;border-top:1px solid var(--line);background:#fff;font-size:13px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.2}
h1{font-size:clamp(30px,4vw,46px);margin:0 0 10px}
h2{font-size:25px;margin:32px 0 14px}
h3{font-size:18px}
.page-intro{margin-bottom:28px}
.page-intro p{color:var(--muted);max-width:720px;margin:8px 0}
.hero{
  position:relative;overflow:hidden;padding:clamp(38px,6vw,78px);border-radius:30px;
  background:
    radial-gradient(circle at 90% 10%,rgba(124,92,255,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(91,92,226,.13),transparent 30%),
    linear-gradient(135deg,#fff,#f0f2ff);
  border:1px solid #e3e6f5;box-shadow:var(--shadow);margin-bottom:25px;
}
.hero .eyebrow{font-size:12px;font-weight:850;letter-spacing:1.7px;color:var(--brand-dark)}
.hero h1{font-size:clamp(42px,7vw,72px);max-width:780px;margin:13px 0 14px}
.hero p{font-size:18px;max-width:720px;color:#5c6678;margin-bottom:25px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;margin-top:24px;padding:8px 12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;color:#596273;font-size:13px;font-weight:650;
}
.btn,button{
  border:0;border-radius:11px;padding:11px 16px;background:var(--ink);color:#fff;text-decoration:none;
  font-weight:750;cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover,button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(17,24,39,.12)}
.btn.primary{background:var(--brand)}
.btn.primary:hover{background:var(--brand-dark)}
.btn.light,button.light{background:#eef1f6!important;color:var(--ink)!important}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.danger,button.danger{background:var(--danger)!important;color:#fff!important}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card,.grid article,.stat,.form,.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:21px;box-shadow:0 5px 18px rgba(17,24,39,.035);
}
.card:hover,.grid article:hover{box-shadow:var(--shadow);transform:translateY(-2px);transition:.18s ease}
.card-icon{
  width:43px;height:43px;border-radius:13px;background:var(--brand-soft);display:grid;place-items:center;
  color:var(--brand-dark);font-weight:900;margin-bottom:13px;
}
.card p,.grid article p{color:var(--muted);margin:6px 0}
.stat{position:relative;overflow:hidden}
.stat .stat-label{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.stat strong{display:block;font-size:34px;margin-top:5px;letter-spacing:-1px}
.stat .stat-accent{position:absolute;right:-18px;bottom:-25px;width:80px;height:80px;border-radius:50%;background:var(--brand-soft)}
.section-head,.head,.cbthead{display:flex;justify-content:space-between;align-items:center;gap:15px}
.section-head{margin-top:34px}
.section-head h2{margin:0}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.5px}
.badge.success{background:var(--success-soft);color:var(--success)}
.badge.draft{background:#f0f2f6;color:#667085}
.badge.warning{background:var(--warning-soft);color:var(--warning)}
.form{max-width:680px;margin:15px auto}
.form.wide{max-width:940px}
.form form{display:grid;gap:15px}
.form label{font-weight:750;font-size:14px}
.form input,.form select,.form textarea{
  display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid #d8dde7;border-radius:11px;
  background:#fff;color:var(--ink);font:inherit;outline:none;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#8586ee;box-shadow:0 0 0 4px var(--brand-soft)}
.form textarea{min-height:125px;resize:vertical}
.form small{color:var(--muted);font-weight:500}
.flash{padding:12px 15px;margin-bottom:14px;border-radius:12px;border:1px solid transparent;font-weight:650}
.success{background:var(--success-soft);border-color:#ccebd9;color:#146b3e}
.error{background:var(--danger-soft);border-color:#f2c9c9;color:#a12b2b}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 18px rgba(17,24,39,.035)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:650px}
th,td{padding:13px 15px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#737d8d;background:#fafbfc}
tr:last-child td{border-bottom:0}
.inline{display:inline}
.pick{display:block;padding:14px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fbfcfe}
.pick:hover{border-color:#b9bbf4;background:#f8f8ff}
.pick input{margin-right:8px}
.exam-card .meta{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.meta-pill{background:#f3f5f8;border-radius:999px;padding:6px 9px;font-size:12px;color:#626c7b;font-weight:700}
.empty{padding:36px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #d9dee8;border-radius:16px}
.score-wrap{text-align:center;padding:30px;background:linear-gradient(135deg,#fff,#f2f3ff);border:1px solid #e2e4f5;border-radius:24px}
.score{font-size:clamp(54px,8vw,82px);font-weight:950;letter-spacing:-4px;margin:8px 0;color:var(--brand-dark)}
.score small{font-size:25px;color:#8a93a3;letter-spacing:-1px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.metric{padding:18px;background:#fff;border:1px solid var(--line);border-radius:15px;text-align:center}
.metric span{font-size:12px;color:var(--muted);font-weight:750}
.metric strong{display:block;font-size:27px;margin-top:4px}
.analytics-chart{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
#chart{max-height:350px}
.cbt-shell{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.cbthead{margin-bottom:16px}
.timer{font-size:24px;font-weight:950;background:var(--ink);color:#fff;padding:9px 14px;border-radius:12px;min-width:105px;text-align:center}
.cbt{display:grid;grid-template-columns:205px 1fr;gap:18px}
.cbt aside{background:#f8f9fc;padding:16px;border-radius:16px;border:1px solid var(--line);height:max-content;position:sticky;top:95px}
.pal{width:41px;height:41px;padding:0;margin:3px;background:#e9edf4;color:var(--ink);border-radius:10px}
.pal.current{box-shadow:0 0 0 3px var(--brand);background:#fff}
.pal.answered{background:#dff3e7;color:#176a3e}
.pal.review{outline:3px solid #c9b8ff}
.qc{background:#fff;padding:26px;border-radius:16px;border:1px solid var(--line)}
.qc h2{margin:11px 0 20px;font-size:22px}
.qc>small{color:var(--muted);font-weight:700}
.option{display:block;padding:15px;border:1px solid #dfe4ec;border-radius:12px;margin:10px 0;cursor:pointer;transition:.15s}
.option:hover{background:#f8f8ff;border-color:#bfc1f3}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.submit{width:100%;margin-top:15px;background:var(--success)!important}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
.feature-list{display:grid;gap:12px}
.feature-row{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px}
.feature-row b{display:block}.feature-row span{color:var(--muted);font-size:14px}
.profile-card{display:flex;align-items:center;gap:18px}
.avatar{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,var(--brand),#7c5cff);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900}
@media(max-width:980px){
  .grid-4,.metric-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .cbt{grid-template-columns:1fr}.cbt aside{position:static}
}
@media(max-width:760px){
  nav{align-items:flex-start;padding:13px 15px;gap:12px;flex-direction:column}
  .nav-links{width:100%;justify-content:flex-start;overflow:auto;flex-wrap:nowrap}
  .nav-links a{white-space:nowrap}
  main{padding:25px 15px 55px}
  .grid,.grid-2,.grid-4,.metric-grid{grid-template-columns:1fr}
  .hero{padding:34px 24px;border-radius:22px}
  .hero h1{font-size:42px}
  .head,.section-head{align-items:flex-start;flex-direction:column}
}




/* ================================
   FEATURE TAB ANIMATION
   ================================ */

.feature-row {
    opacity: 0;
    transform: translateX(-25px);
    animation: featureSlideIn 0.7s ease forwards;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.feature-row:nth-child(1) {
    animation-delay: 0.15s;
}

.feature-row:nth-child(2) {
    animation-delay: 0.30s;
}

.feature-row:nth-child(3) {
    animation-delay: 0.45s;
}

.feature-row:hover {
    transform: translateX(8px);
    box-shadow: 0 10px 28px rgba(30, 35, 90, 0.10);
    border-color: #cfd2ff;
}

.feature-row .feature-icon {
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.feature-row:hover .feature-icon {
    transform: scale(1.12) rotate(-5deg);
}

@keyframes featureSlideIn {
    from {
        opacity: 0;
        transform: translateX(-25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================
   SYNAPSE — PREMIUM MOTION LAYER
   ========================================= */

/* Smooth entrance for the whole page */
main {
    animation: synapsePageIn 0.55s ease-out both;
}

@keyframes synapsePageIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Hero entrance */
.hero {
    animation: heroReveal 0.75s cubic-bezier(.22,1,.36,1) both;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Hero glow movement */
.hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: -100px;
    border-radius: 50%;
    background: rgba(124,92,255,.10);
    filter: blur(10px);
    pointer-events: none;
    animation: heroGlow 6s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    from {
        transform: translate(0,0) scale(1);
    }
    to {
        transform: translate(-35px,30px) scale(1.12);
    }
}


/* Cards enter smoothly */
.card,
.grid article,
.stat,
.panel,
.exam-card,
.profile-card,
.analytics-chart,
.score-wrap,
.cbt-shell {
    animation: cardReveal .55s ease-out both;
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Stagger common grid cards */
.grid > *:nth-child(1),
.grid-2 > *:nth-child(1),
.grid-4 > *:nth-child(1) {
    animation-delay: .05s;
}

.grid > *:nth-child(2),
.grid-2 > *:nth-child(2),
.grid-4 > *:nth-child(2) {
    animation-delay: .12s;
}

.grid > *:nth-child(3),
.grid-4 > *:nth-child(3) {
    animation-delay: .19s;
}

.grid-4 > *:nth-child(4) {
    animation-delay: .26s;
}


/* Premium card hover */
.card,
.grid article,
.stat,
.panel,
.exam-card {
    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease,
        border-color .28s ease;
}

.card:hover,
.grid article:hover,
.stat:hover,
.panel:hover,
.exam-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(17,24,39,.10);
    border-color: #dfe1f7;
}


/* Icon interaction */
.card-icon,
.avatar,
.brand-mark {
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
}

.card:hover .card-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(91,92,226,.15);
}


/* Buttons feel alive */
.btn,
button,
.nav-links a {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;
}

.btn:active,
button:active {
    transform: scale(.97);
}

.btn.primary:hover {
    box-shadow: 0 10px 25px rgba(91,92,226,.25);
}


/* Navigation hover */
.nav-links a {
    position: relative;
}

.nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.nav-links a:not(.nav-cta):hover::after {
    transform: scaleX(1);
}


/* Stat number emphasis */
.stat strong {
    transition: transform .25s ease, color .25s ease;
}

.stat:hover strong {
    transform: translateX(3px);
    color: var(--brand-dark);
}


/* Exam/question interaction */
.pick,
.option {
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.pick:hover,
.option:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(17,24,39,.06);
}


/* Score entrance */
.score {
    animation: scorePop .7s cubic-bezier(.22,1,.36,1) .15s both;
}

@keyframes scorePop {
    from {
        opacity: 0;
        transform: scale(.75);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Timer subtle pulse */
.timer {
    animation: timerPulse 2.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%,100% {
        box-shadow: 0 0 0 rgba(17,24,39,0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(17,24,39,.05);
    }
}


/* Analytics chart entrance */
.analytics-chart {
    animation-delay: .15s;
}


/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}




/* =========================================================
   SYNAPSE — SIGNATURE VISUAL SYSTEM
   ========================================================= */

:root{
    --mouse-x:50%;
    --mouse-y:50%;
}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

body{
    position:relative;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-3;

    background:
        radial-gradient(
            600px circle at var(--mouse-x) var(--mouse-y),
            rgba(91,92,226,.055),
            transparent 55%
        );
}


/* Floating light orbs */

.ambient{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:-2;
    filter:blur(2px);
}

.ambient-one{
    width:360px;
    height:360px;
    top:80px;
    left:-180px;
    background:radial-gradient(
        circle,
        rgba(91,92,226,.12),
        transparent 70%
    );
    animation:
        ambientFloatOne 12s ease-in-out infinite alternate;
}

.ambient-two{
    width:300px;
    height:300px;
    right:-130px;
    top:35%;
    background:radial-gradient(
        circle,
        rgba(124,92,255,.10),
        transparent 70%
    );
    animation:
        ambientFloatTwo 15s ease-in-out infinite alternate;
}

.ambient-three{
    width:250px;
    height:250px;
    left:40%;
    bottom:-150px;
    background:radial-gradient(
        circle,
        rgba(91,92,226,.08),
        transparent 70%
    );
    animation:
        ambientFloatThree 13s ease-in-out infinite alternate;
}

@keyframes ambientFloatOne{

    from{
        transform:translate(0,0) scale(1);
    }

    to{
        transform:translate(80px,100px) scale(1.15);
    }

}

@keyframes ambientFloatTwo{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-90px,70px) scale(1.12);
    }

}

@keyframes ambientFloatThree{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-50px,-80px) scale(1.2);
    }

}


/* =========================================================
   GLASS NAVIGATION
   ========================================================= */

nav{
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);

    box-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 10px 35px rgba(17,24,39,.035);

    transition:
        background .3s ease,
        box-shadow .3s ease;
}

nav:hover{
    background:rgba(255,255,255,.88);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9),
        0 15px 40px rgba(17,24,39,.055);
}


/* =========================================================
   BRAND
   ========================================================= */

.brand-mark{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #5b5ce2 0%,
            #7565f4 45%,
            #9b7cff 100%
        );

    box-shadow:
        0 8px 25px rgba(91,92,226,.28);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

.brand-mark::before{
    content:"";
    position:absolute;
    inset:-40%;

    background:
        linear-gradient(
            120deg,
            transparent 35%,
            rgba(255,255,255,.55),
            transparent 65%
        );

    transform:translateX(-100%) rotate(10deg);

    animation:brandShine 4s ease-in-out infinite;
}

.brand-mark span{
    position:relative;
    z-index:2;
}

.brand-wrap:hover .brand-mark{
    transform:
        translateY(-2px)
        rotate(-4deg)
        scale(1.07);

    box-shadow:
        0 12px 30px rgba(91,92,226,.38);
}

@keyframes brandShine{

    0%,55%{
        transform:translateX(-100%) rotate(10deg);
    }

    75%,100%{
        transform:translateX(100%) rotate(10deg);
    }

}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.nav-links a{
    position:relative;
    overflow:hidden;

    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease;
}

.nav-links a:not(.nav-cta):not(.user-chip)::before{
    content:"";

    position:absolute;
    left:50%;
    bottom:3px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--brand);

    transform:
        translateX(-50%)
        scale(0);

    transition:transform .22s ease;
}

.nav-links a:not(.nav-cta):hover::before{
    transform:
        translateX(-50%)
        scale(1);
}

.nav-links a:hover{
    transform:translateY(-1px);
}


/* =========================================================
   NAV CTA
   ========================================================= */

.nav-links .nav-cta{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #111827,
            #273044
        );

    box-shadow:
        0 5px 15px rgba(17,24,39,.14);
}

.nav-links .nav-cta:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 25px rgba(17,24,39,.20);
}


/* =========================================================
   PAGE REVEAL
   ========================================================= */

main{
    animation:synapseMainIn .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes synapseMainIn{

    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.synapse-reveal{
    opacity:0;
    transform:translateY(22px) scale(.985);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,1,.36,1);
}

.synapse-reveal.synapse-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}


/* =========================================================
   PREMIUM CARDS
   ========================================================= */

.card,
.grid article,
.stat,
.panel,
.exam-card,
.metric,
.analytics-chart{
    position:relative;
    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Moving highlight */

.card::before,
.grid article::before,
.stat::before,
.panel::before,
.exam-card::before,
.metric::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.65),
            transparent 55%
        );

    transform:translateX(-120%);

    transition:transform .7s ease;

    pointer-events:none;
}

.card:hover::before,
.grid article:hover::before,
.stat:hover::before,
.panel:hover::before,
.exam-card:hover::before,
.metric:hover::before{
    transform:translateX(120%);
}


.card:hover,
.grid article:hover,
.stat:hover,
.panel:hover,
.exam-card:hover,
.metric:hover{
    transform:translateY(-6px);

    box-shadow:
        0 22px 50px rgba(17,24,39,.11);

    border-color:#dddff7;
}


/* =========================================================
   CARD ICONS
   ========================================================= */

.card-icon{
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

.card:hover .card-icon{
    transform:
        translateY(-3px)
        rotate(-5deg)
        scale(1.1);

    box-shadow:
        0 10px 25px rgba(91,92,226,.18);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    isolation:isolate;

    animation:
        heroEntrance .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes heroEntrance{

    from{
        opacity:0;
        transform:
            translateY(25px)
            scale(.97);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* Hero animated light */

.hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(124,92,255,.20),
            transparent 68%
        );

    filter:blur(4px);

    animation:
        heroOrb 8s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:-1;
}

@keyframes heroOrb{

    from{
        transform:
            translate(0,0)
            scale(1);
    }

    to{
        transform:
            translate(-70px,80px)
            scale(1.2);
    }

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button{
    position:relative;
    overflow:hidden;

    transition:
        transform .22s cubic-bezier(.22,1,.36,1),
        box-shadow .22s ease,
        background .22s ease;
}

.btn:hover,
button:hover{
    transform:translateY(-3px);
}

.btn:active,
button:active{
    transform:scale(.96);
}


/* =========================================================
   RIPPLE
   ========================================================= */

.synapse-ripple{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:
        translate(-50%,-50%)
        scale(0);

    animation:
        rippleExpand .65s ease-out forwards;

    pointer-events:none;
}

@keyframes rippleExpand{

    to{
        transform:
            translate(-50%,-50%)
            scale(35);

        opacity:0;
    }

}


/* =========================================================
   STAT CARDS
   ========================================================= */

.stat strong{
    transition:
        transform .35s ease,
        color .35s ease;
}

.stat:hover strong{
    transform:
        translateX(4px)
        scale(1.04);

    color:var(--brand-dark);
}

.stat .stat-accent{
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        opacity .5s ease;
}

.stat:hover .stat-accent{
    transform:scale(1.7);
    opacity:.8;
}


/* =========================================================
   SCORE
   ========================================================= */

.score{
    background:
        linear-gradient(
            135deg,
            var(--brand-dark),
            #7c5cff,
            #9b7cff
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    animation:
        scoreEntrance .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes scoreEntrance{

    from{
        opacity:0;
        transform:
            scale(.7)
            translateY(15px);
        filter:blur(6px);
    }

    to{
        opacity:1;
        transform:
            scale(1)
            translateY(0);
        filter:blur(0);
    }

}


/* =========================================================
   CBT
   ========================================================= */

.qc{
    transition:
        box-shadow .3s ease,
        transform .3s ease,
        border-color .3s ease;
}

.qc:hover{
    box-shadow:
        0 18px 40px rgba(17,24,39,.08);
}

.option{
    position:relative;
    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.option:hover{
    transform:
        translateX(6px);

    border-color:#aeb0ef;

    box-shadow:
        0 8px 22px rgba(91,92,226,.08);
}


/* =========================================================
   TIMER
   ========================================================= */

.timer{
    box-shadow:
        0 6px 20px rgba(17,24,39,.12);

    animation:
        timerGlow 2.8s ease-in-out infinite;
}

@keyframes timerGlow{

    0%,100%{
        box-shadow:
            0 6px 20px rgba(17,24,39,.12);
    }

    50%{
        box-shadow:
            0 8px 28px rgba(17,24,39,.22);
    }

}


/* =========================================================
   PALETTE
   ========================================================= */

.pal{
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.pal:hover{
    transform:
        translateY(-3px)
        scale(1.05);
}


/* =========================================================
   FORM FOCUS
   ========================================================= */

.form input,
.form select,
.form textarea{
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.form input:focus,
.form select:focus,
.form textarea:focus{
    transform:translateY(-1px);

    box-shadow:
        0 0 0 4px rgba(91,92,226,.10),
        0 8px 25px rgba(91,92,226,.06);
}


/* =========================================================
   PROFILE AVATAR
   ========================================================= */

.avatar{
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}

.profile-card:hover .avatar{
    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 12px 30px rgba(91,92,226,.22);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    position:relative;
}

footer span{
    font-weight:900;
    letter-spacing:2px;
    color:var(--ink);
}

footer i{
    margin:0 5px;
    color:var(--brand);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

/* =========================================================
   SYNAPSE — SIGNATURE NEURAL NETWORK
   ========================================================= */

#neural-network{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    /*
     * IMPORTANT:
     * Above the page background,
     * below the application.
     */
    z-index:0;

    opacity:1;
}


/* =========================================================
   CONTENT LAYER
   ========================================================= */

nav,
main,
footer{
    position:relative;
    z-index:2;
}


/* =========================================================
   SOFT ATMOSPHERIC VEIL
   ========================================================= */

.neural-vignette{
    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(246,248,252,.18) 0%,
            rgba(246,248,252,.32) 58%,
            rgba(246,248,252,.58) 100%
        );
}


/* =========================================================
   GLASS CONTENT
   ========================================================= */

.card,
.grid article,
.stat,
.panel,
.form,
.exam-card,
.analytics-chart,
.score-wrap,
.cbt-shell{
    background:
        rgba(255,255,255,.91);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(244,245,255,.90)
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* =========================================================
   CBT — KEEP DISTRACTION LOW
   ========================================================= */

.cbt-shell{
    background:
        rgba(255,255,255,.96);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    #neural-network{
        opacity:.68;
    }

    .neural-vignette{
        background:
            rgba(246,248,252,.32);
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    #neural-network{
        display:none;
    }

}