/* ============================================================
   EduConnect landing — styles (ported from the design prototype)
   ============================================================ */

/* ---- Self-hosted font (no third-party CDN) ---- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/pjs-latinext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/pjs-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   PALETTE
   Light is the design; dark exists because browser force-dark
   cannot be opted out of. Samsung Internet's dark mode and
   Chromium's auto-dark ignore `color-scheme:only light` — given
   no dark palette they invent one by inverting ours, which is
   what produced the washed-out grey page on a Galaxy S25.
   Shipping a real dark theme means those browsers render OUR
   colours instead of guessing at them.

   Every surface / text / border colour below is a token. Add
   new colours here, not inline, or dark mode silently misses
   them.
   ============================================================ */
:root{
  --bg:#FDFCFB;
  --bg-alt:#F4F5F8;
  --surface:#FFFFFF;
  --surface-2:#F7F6F9;
  --field-bg:#FBFAFC;

  --border:#ECEDF1;
  --border-2:#E2DEE9;
  --border-soft:#F1EFF3;
  --border-dashed:#C9D3EF;

  --text:#1B1E24;
  --text-strong:#191227;
  --text-title:#20242C;
  --text-body:#4A4550;
  --text-muted:#5A5F68;
  --text-muted-2:#6B7079;
  --text-faint:#9A96A0;
  --text-faintest:#B4B0B8;

  --brand:#6D28D9;        /* solid fills: buttons, badges */
  --brand-ink:#7C3AED;    /* the brand used as text or icon */
  --brand-tint:#F2ECFB;   /* brand-tinted surface behind an icon */
  --danger:#C0392B;

  --grad-a:#6D28D9;       /* hero headline gradient */
  --grad-b:#6D4BD0;
  --grad-c:#C43A78;

  --nav-bg:rgba(253,252,251,.55);
  --nav-bg-on:rgba(253,252,251,.82);
  --shadow:rgba(40,25,60,.16);
  --shadow-lg:rgba(40,25,60,.28);

  --select-bg:#D8E0F7;
  --scroll-thumb:#D9D6DE;
  --scroll-thumb-hover:#C4C0CB;
  --step-line:#DBD1F3;

  --founding-grad:linear-gradient(120deg,#FFFFFF 0%,#FCF1F6 100%);
  --founding-border:#F0D8E5;
  --finale-bg:#14161C;
  --finale-border:transparent;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1014;
    --bg-alt:#141821;
    --surface:#171B23;
    --surface-2:#1E232D;
    --field-bg:#12151B;

    --border:#272D39;
    --border-2:#343B4A;
    --border-soft:#222732;
    --border-dashed:#3C4457;

    --text:#E8EAEF;
    --text-strong:#F6F7F9;
    --text-title:#EEF0F4;
    --text-body:#C6CAD3;
    --text-muted:#A5ABB7;
    --text-muted-2:#9BA1AD;
    --text-faint:#858B99;
    /* 4.5:1 against --surface, not just against --bg: the faintest tier is used
       on cards too (.brand-label), where the backdrop is lighter. */
    --text-faintest:#838995;

    --brand:#7C3AED;
    --brand-ink:#B79BFB;
    --brand-tint:rgba(124,58,237,.18);
    --danger:#FF8A7A;

    --grad-a:#A78BFA;
    --grad-b:#9F7AEA;
    --grad-c:#F472B6;

    --nav-bg:rgba(14,16,20,.6);
    --nav-bg-on:rgba(14,16,20,.86);
    --shadow:rgba(0,0,0,.5);
    --shadow-lg:rgba(0,0,0,.62);

    --select-bg:#2A3550;
    --scroll-thumb:#2E3441;
    --scroll-thumb-hover:#3B4251;
    --step-line:#3E3363;

    --founding-grad:linear-gradient(120deg,#191D26 0%,#241B2C 100%);
    --founding-border:#3A2A38;
    --finale-bg:#191D26;
    --finale-border:#2C3340;
  }
}

*{box-sizing:border-box;}
html,body{color-scheme:light dark;}
html,body{margin:0;padding:0;background:var(--bg);scroll-behavior:smooth;}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);overflow-x:hidden;}
img{max-width:100%;}
::selection{background:var(--select-bg);color:var(--text);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:content-box;}

.ec-root{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;}

/* ---- Buttons / links ---- */
.btn-primary{color:#fff;background:var(--brand);text-decoration:none;border:none;cursor:pointer;transition:filter .15s,transform .12s,box-shadow .15s;}
.btn-primary:hover{filter:brightness(.93);box-shadow:0 10px 26px -8px rgba(109,40,217,.5);}
.btn-primary:active{transform:translateY(1px);}
/* Sits on the always-dark finale panel — literal white in both themes. */
.btn-light{color:#18151E;background:#fff;text-decoration:none;border:none;cursor:pointer;transition:transform .12s,box-shadow .15s;}
.btn-light:hover{box-shadow:0 12px 30px -10px rgba(0,0,0,.35);transform:translateY(-1px);}
.navlink{color:var(--text-muted);text-decoration:none;transition:color .14s;}
.navlink:hover{color:var(--text);}
.storylink{display:inline-flex;align-items:center;gap:9px;font:800 15px "Plus Jakarta Sans";color:var(--h,var(--brand-ink));text-decoration:none;transition:opacity .15s,letter-spacing .15s;}
.storylink:hover{opacity:.65;letter-spacing:.2px;}
.storylink.mt{margin-top:26px;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.floaty{animation:floaty 6s ease-in-out infinite;}

/* ---- Brand mark ---- */
.ec-brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.ec-brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6D28D9 0%,#5B4BD6 100%);flex:none;box-shadow:0 4px 12px -3px rgba(109,40,217,.45);display:flex;align-items:center;justify-content:center;}
.ec-brand-mark.sm{width:32px;height:32px;border-radius:9px;box-shadow:none;}
.ec-brand-name{font:800 18px "Plus Jakarta Sans";color:var(--text);letter-spacing:-.4px;}

/* ================= NAV ================= */
.ec-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:68px;display:flex;align-items:center;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .2s,border-color .2s;}
.ec-nav.nav-scrolled{background:var(--nav-bg-on);border-bottom:1px solid var(--border);}
.ec-nav-inner{max-width:1180px;margin:0 auto;width:100%;padding:0 28px;display:flex;align-items:center;gap:20px;}
.ec-nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:34px;}
.ec-nav-links .navlink{font:600 14.5px "Plus Jakarta Sans";}
.ec-nav-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.ec-lang{position:relative;}
.langpill{display:flex;align-items:center;justify-content:space-between;gap:8px;width:96px;cursor:pointer;font:700 13px "Plus Jakarta Sans";color:var(--text-title);background:var(--surface-2);border:1px solid var(--border-2);padding:8px 12px;border-radius:11px;}
.langpill-cur{display:flex;align-items:center;gap:7px;}
.langpill-chev{transition:transform .16s;}
.ec-lang.is-open .langpill-chev{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:158px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 42px -14px var(--shadow-lg);padding:5px;}
.lang-menu[hidden]{display:none;}
.lang-row{display:flex;align-items:center;justify-content:space-between;width:100%;font:700 13px "Plus Jakarta Sans";padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--text-muted);transition:background .12s;}
.lang-row:hover{background:var(--surface-2);}
.lang-row.is-active{background:var(--surface-2);color:var(--text-strong);}
.ec-login{font:700 14px "Plus Jakarta Sans";}
.ec-nav-cta{font:700 14px "Plus Jakarta Sans";padding:11px 18px;border-radius:11px;box-shadow:0 6px 18px -6px rgba(109,40,217,.45);flex:none;white-space:nowrap;text-align:center;}

/* ================= HERO ================= */
.hero{position:relative;padding:150px 28px 0;text-align:center;overflow:hidden;}
.hero-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:1100px;height:640px;background:radial-gradient(ellipse at center top,rgba(109,40,217,.10),rgba(99,102,241,.05) 45%,transparent 68%);pointer-events:none;z-index:0;}
.hero-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;}
.hero-eyebrow{font:700 13px/1.3 "Plus Jakarta Sans";letter-spacing:2.2px;text-transform:uppercase;color:var(--brand-ink);margin:0 0 20px;}
.hero-title{font:800 clamp(38px,6.2vw,68px)/1.04 "Plus Jakarta Sans";letter-spacing:-1.6px;color:var(--text-strong);margin:0;text-wrap:balance;}
.hero-title-grad{background:linear-gradient(100deg,var(--grad-a),var(--grad-b) 52%,var(--grad-c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{font:400 clamp(16px,1.7vw,19px)/1.62 "Plus Jakarta Sans";color:var(--text-muted);max-width:640px;margin:26px auto 0;text-wrap:pretty;}
.hero-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px;}
.hero-cta{font:700 16px "Plus Jakarta Sans";padding:16px 30px;border-radius:13px;box-shadow:0 12px 30px -10px rgba(109,40,217,.5);}
.hero-note{font:600 13px "Plus Jakarta Sans";color:var(--text-faint);}
.hero-showcase{position:relative;z-index:1;max-width:1060px;margin:52px auto 0;padding-bottom:40px;}
.hero-phone{position:absolute;right:-1%;bottom:-4%;width:22%;min-width:150px;height:auto;}

/* Mac + phone frames — physical device colours, identical in both themes */
.mac-frame{position:relative;background:#0a0a0c;border-radius:13px;padding:9px 9px 4px;box-shadow:0 0 0 1px #a7aab1,0 40px 80px -38px rgba(40,25,70,.5);}
.mac-screen{border-radius:8px;overflow:hidden;background:#0a0a0c;}
.mac-screen img{display:block;width:100%;height:auto;}
.mac-stand{position:relative;height:15px;margin:-1px -3% 0;background:linear-gradient(180deg,#d4d7dc,#a9acb2 58%,#8a8c92);border-radius:2px 2px 12px 12px;box-shadow:inset 0 2px 2px rgba(255,255,255,.45);}
.mac-stand-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:13%;max-width:130px;height:8px;background:#95979d;border-radius:0 0 9px 9px;}

/* ================= PROOF ================= */
.proof{padding:20px 28px 82px;}
.proof-inner{max-width:1180px;margin:0 auto;text-align:center;}
.proof-heading{font:700 14px "Plus Jakarta Sans";color:var(--text-faint);margin:0 0 26px;letter-spacing:.2px;}
/* Four separate cards, equal columns rather than shrink-wrapped pills, each with
   its icon and label hard left. `minmax(0,1fr)` (not plain `1fr`) so a long label
   wraps inside its column instead of widening it. */
.proof-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px;}
.proof-chip{display:flex;align-items:center;gap:11px;text-align:left;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 14px -8px var(--shadow);}
.proof-chip>span:last-child{font:700 13.5px/1.35 "Plus Jakarta Sans";color:var(--text-title);}
.proof-chip-ic{width:30px;height:30px;border-radius:9px;background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;flex:none;}
/* Four across needs ~286px per column for the longest label to hold one line,
   which the 1180px inner stops delivering below a ~1240px viewport. */
@media (max-width:1240px){.proof-chips{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Phones only: the four merge into a single list. Stacked full-width cards read
   as four floating boxes with dead gaps between them; hairline-separated rows in
   one card read as one trust block.
   The card is content-sized and centred — `max-content` on a single-column grid
   resolves to the widest row (icon + longest label + padding), so the block hugs
   its text instead of stretching edge to edge. `max-width:100%` lets that longest
   label wrap rather than overflow once the viewport is narrower than it. */
@media (max-width:560px){
  .proof-chips{grid-template-columns:1fr;gap:0;width:max-content;max-width:100%;margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 22px -14px var(--shadow);}
  .proof-chip{background:none;border:none;border-radius:0;box-shadow:none;padding:17px 18px;}
  .proof-chip:nth-child(n+2){border-top:1px solid var(--border);}
}

/* ================= SECTIONS ================= */
.sec{padding:96px 28px;background:var(--bg);}
.sec-alt{background:var(--bg-alt);}
.c-vars{--h:var(--brand-ink);--tint:var(--brand-tint);}
.sec-inner{max-width:1180px;margin:0 auto;}
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.eyebrow{font:800 12.5px "Plus Jakarta Sans";letter-spacing:1.8px;text-transform:uppercase;color:var(--h,var(--brand-ink));margin-bottom:14px;}
.sec-title{font:800 clamp(30px,4vw,46px)/1.08 "Plus Jakarta Sans";letter-spacing:-.9px;color:var(--text-strong);margin:0;text-wrap:balance;}
.sec-title.sm{font:800 clamp(28px,3.4vw,42px)/1.1 "Plus Jakarta Sans";letter-spacing:-.8px;}
.sec-intro{font:400 18px/1.6 "Plus Jakarta Sans";color:var(--text-muted);margin:20px auto 0;max-width:600px;text-wrap:pretty;}
.sec-intro.left{max-width:520px;margin:18px 0 30px;}

.showcase-wide{position:relative;max-width:1040px;margin:0 auto 48px;}
.showcase-phone{position:absolute;right:-1%;bottom:-5%;width:20%;min-width:140px;height:auto;}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;transition:box-shadow .2s,transform .2s,border-color .2s;}
.fcard:hover{box-shadow:0 18px 44px -20px var(--shadow-lg);transform:translateY(-3px);border-color:var(--border-2);}
.fcard-ic{width:44px;height:44px;border-radius:13px;background:var(--tint);color:var(--h);display:flex;align-items:center;justify-content:center;}
.fcard-t{font:700 17px "Plus Jakarta Sans";color:var(--text-title);margin:16px 0 7px;}
.fcard-b{font:400 14.5px/1.55 "Plus Jakarta Sans";color:var(--text-muted-2);}
.fcard-cta{display:flex;align-items:center;justify-content:center;border-radius:18px;border:1.5px dashed var(--border-dashed);background:var(--surface);padding:24px;}

/* split (two-column) sections */
.sec-split{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.order1{order:1;}
.order2{order:2;}
.split-media{position:relative;display:flex;justify-content:center;}
.phone-glow{position:absolute;inset:-26px;background:radial-gradient(circle at 55% 45%,rgba(109,40,217,.13),transparent 68%);border-radius:40px;pointer-events:none;}
.phone-glow.left{background:radial-gradient(circle at 40% 40%,rgba(109,40,217,.12),transparent 70%);}
.phone-plain{position:relative;width:300px;max-width:82%;margin:0 auto;}
.phone-plain img{width:100%;height:auto;display:block;}

.flist{display:flex;flex-direction:column;gap:14px;}
.frow{display:flex;gap:15px;}
.frow-ic{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--h);display:flex;align-items:center;justify-content:center;flex:none;}
.frow-t{font:700 16px "Plus Jakarta Sans";color:var(--text-title);margin-bottom:4px;}
.frow-t.sm{font:700 15.5px "Plus Jakarta Sans";}
.frow-b{font:400 14.5px/1.55 "Plus Jakarta Sans";color:var(--text-muted-2);}
.fquad{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fquad-ic{width:40px;height:40px;border-radius:11px;background:var(--tint);color:var(--h);display:flex;align-items:center;justify-content:center;margin-bottom:11px;}

/* branding card */
.brand-media{position:relative;}
.brand-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 40px 90px -44px var(--shadow-lg);}
.brand-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.brand-live{display:flex;align-items:center;gap:8px;font:800 11px "Plus Jakarta Sans";letter-spacing:1.2px;text-transform:uppercase;color:var(--brand-ink);}
.brand-chip{display:flex;align-items:center;gap:7px;font:700 11px "Plus Jakarta Sans";color:var(--brand-ink);background:var(--brand-tint);padding:6px 11px;border-radius:9px;}
.brand-chip img{width:16px;height:16px;object-fit:contain;}
.brand-label{font:800 10px "Plus Jakarta Sans";letter-spacing:1px;text-transform:uppercase;color:var(--text-faintest);margin-bottom:7px;}
.brand-side{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--border);border-radius:13px;margin-bottom:16px;box-shadow:0 4px 14px -10px var(--shadow-lg);}
.brand-side img{width:38px;height:38px;object-fit:contain;flex:none;}
.brand-side-t{font:800 13.5px "Plus Jakarta Sans";color:var(--text-title);}
.brand-side-s{display:flex;align-items:center;gap:5px;font:700 11px "Plus Jakarta Sans";color:var(--brand-ink);}
.brand-side-s .dot{width:6px;height:6px;border-radius:50%;background:#22C55E;}
.brand-topbar{border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-bottom:16px;box-shadow:0 4px 14px -10px var(--shadow-lg);}
.brand-topbar-accent{height:3px;background:linear-gradient(90deg,#7A3FD6,#C43A78);}
.brand-topbar-row{display:flex;align-items:center;gap:10px;padding:10px 12px;}
.brand-burger{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;}
.brand-topbar-row>img{width:26px;height:26px;object-fit:contain;flex:none;}
.brand-topbar-txt{flex:1;min-width:0;}
.brand-topbar-grp{font:600 10px "Plus Jakarta Sans";color:var(--text-faint);}
.brand-topbar-av{width:26px;height:26px;border-radius:50%;background:var(--brand-tint);flex:none;}
.brand-banner{position:relative;border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:0 8px 22px -12px rgba(122,63,214,.5);}
.brand-banner img{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;}
.brand-banner-txt{position:absolute;left:16px;top:50%;transform:translateY(-50%);font:800 16px "Plus Jakarta Sans";color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.28);}
.brand-accent{padding:14px;border:1px solid var(--border);border-radius:13px;}
.brand-accent-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font:700 12.5px "Plus Jakarta Sans";color:var(--text-title);}
.brand-accent-hex{font:600 11px "Plus Jakarta Sans";color:var(--text-faint);}
.brand-swatches{display:flex;gap:11px;align-items:center;}
/* Swatches are literal product colours a customer would pick — never themed. */
.sw{width:30px;height:30px;border-radius:9px;}
.sw-active{background:#7E3EED;box-shadow:0 0 0 2px var(--surface),0 0 0 4px #7E3EED;}
.sw-add{border:1.5px dashed var(--border-dashed);color:var(--text-faint);display:flex;align-items:center;justify-content:center;font:800 15px "Plus Jakarta Sans";}

/* ================= HOW TO START ================= */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:28px;}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 26px;box-shadow:0 18px 44px -30px var(--shadow-lg);}
.step-top{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.step-num{width:44px;height:44px;border-radius:13px;background:var(--brand-tint);color:var(--brand-ink);font:800 19px "Plus Jakarta Sans";display:flex;align-items:center;justify-content:center;}
.step-line{height:2px;flex:1;background:linear-gradient(90deg,var(--step-line),transparent);}
.step-t{font:700 19px "Plus Jakarta Sans";color:var(--text-title);margin-bottom:9px;}
.step-b{font:400 15px/1.6 "Plus Jakarta Sans";color:var(--text-muted-2);}
.founding{position:relative;overflow:hidden;border-radius:22px;border:1.5px solid var(--founding-border);background:var(--founding-grad);padding:34px;display:flex;flex-wrap:wrap;align-items:center;gap:28px;}
.founding-glow{position:absolute;top:-90px;right:-40px;width:280px;height:280px;background:radial-gradient(circle,rgba(109,40,217,.12),transparent 68%);pointer-events:none;}
.founding-body{position:relative;flex:1;min-width:280px;}
.founding-badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font:800 10.5px "Plus Jakarta Sans";letter-spacing:.8px;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:16px;}
.founding-dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;}
.founding-title{font:800 clamp(22px,2.6vw,28px)/1.15 "Plus Jakarta Sans";letter-spacing:-.5px;color:var(--text-strong);margin-bottom:12px;text-wrap:balance;}
.founding-text{font:400 16px/1.62 "Plus Jakarta Sans";color:var(--text-muted);margin:0;max-width:620px;text-wrap:pretty;}
.founding-cta{position:relative;flex:none;font:700 15.5px "Plus Jakarta Sans";padding:15px 26px;border-radius:13px;box-shadow:0 12px 30px -10px rgba(109,40,217,.5);}

/* ================= FINALE =================
   Deliberately dark in both themes — its own text colours are literal. */
.finale-sec{padding:100px 28px;background:var(--bg);}
.finale{max-width:1080px;margin:0 auto;position:relative;border-radius:32px;overflow:hidden;background:var(--finale-bg);border:1px solid var(--finale-border);padding:72px 56px;box-shadow:0 50px 120px -50px var(--shadow-lg);}
.finale-glow1{position:absolute;top:-140px;right:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,40,217,.42),transparent 62%);pointer-events:none;}
.finale-glow2{position:absolute;bottom:-160px;left:-90px;width:480px;height:480px;background:radial-gradient(circle,rgba(99,102,241,.32),transparent 64%);pointer-events:none;}
.finale-body{position:relative;max-width:720px;}
.finale-eyebrow{font:800 12.5px "Plus Jakarta Sans";letter-spacing:1.8px;text-transform:uppercase;color:#A9BCF0;margin-bottom:16px;}
.finale-title{font:800 clamp(30px,4.4vw,50px)/1.06 "Plus Jakarta Sans";letter-spacing:-1px;color:#fff;margin:0;text-wrap:balance;}
.finale-text{font:400 17px/1.65 "Plus Jakarta Sans";color:#B7B1C0;margin:22px 0 30px;max-width:640px;text-wrap:pretty;}
.finale-points{display:flex;flex-wrap:wrap;gap:12px 26px;margin-bottom:38px;}
.finale-point{display:flex;align-items:center;gap:10px;font:700 15px "Plus Jakarta Sans";color:#EDEAF1;}
.finale-check{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#6D28D9,#7B4BD6);display:flex;align-items:center;justify-content:center;flex:none;}
.finale-cta-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.finale-cta{font:800 16px "Plus Jakarta Sans";padding:17px 32px;border-radius:14px;}
.finale-cta-sub{font:500 14px/1.5 "Plus Jakarta Sans";color:#9A93A4;max-width:320px;}

/* ================= FOOTER ================= */
.ec-footer{background:var(--bg);border-top:1px solid var(--border);padding:44px 28px;}
.ec-footer-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.ec-footer-brand{display:flex;align-items:center;gap:11px;}
.ec-footer-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6D28D9 0%,#5B4BD6 100%);display:flex;align-items:center;justify-content:center;flex:none;}
.ec-footer-name{font:800 15px "Plus Jakarta Sans";color:var(--text);}
.ec-footer-tag{font:500 12px "Plus Jakarta Sans";color:var(--text-faint);}
.ec-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:26px;}
.ec-footer-links .navlink{font:600 13.5px "Plus Jakarta Sans";color:var(--text-muted-2);}
.ec-footer-copy{font:500 13px "Plus Jakarta Sans";color:var(--text-faintest);}

/* ================= MODALS ================= */
.ec-overlay{position:fixed;inset:0;z-index:120;background:rgba(20,15,30,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;}
.ec-overlay[hidden]{display:none;}
.ec-modal{position:relative;width:100%;background:var(--surface);border-radius:22px;box-shadow:0 40px 100px -30px rgba(20,10,40,.5);padding:34px 32px;margin:auto;}
.ec-modal-demo{max-width:560px;}
.ec-modal-contact{max-width:540px;}
.ec-modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ec-modal-badge{font:800 12px "Plus Jakarta Sans";letter-spacing:1.4px;text-transform:uppercase;color:var(--brand-ink);margin-bottom:10px;}
.ec-modal-title{font:800 26px/1.1 "Plus Jakarta Sans";letter-spacing:-.6px;color:var(--text-strong);margin:0 0 8px;}
.ec-modal-sub{font:400 15px/1.55 "Plus Jakarta Sans";color:var(--text-muted);margin:0 0 24px;}
.ec-form{display:flex;flex-direction:column;gap:14px;}
.ec-field label{font:700 12.5px "Plus Jakarta Sans";color:var(--text-body);margin-bottom:6px;display:block;}
.ec-field input,.ec-field textarea,.ec-field select{width:100%;padding:12px 14px;border:1px solid var(--border-2);border-radius:11px;font:500 14px "Plus Jakarta Sans";color:var(--text-title);background:var(--field-bg);box-sizing:border-box;outline:none;}
.ec-field input:focus,.ec-field textarea:focus,.ec-field select:focus{border-color:var(--brand-ink);background:var(--surface);}
.ec-field textarea{resize:vertical;}
.ec-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7079' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
/* The chevron is a baked-in data URI, so its stroke needs its own dark variant. */
@media (prefers-color-scheme:dark){
  .ec-field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA1AD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
}
.ec-form-note a{color:var(--brand-ink);text-decoration:none;font-weight:700;}
.ec-form-note a:hover{text-decoration:underline;}
.ec-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ec-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.ec-submit{width:100%;font:800 16px "Plus Jakarta Sans";padding:15px;border-radius:13px;box-shadow:0 12px 30px -10px rgba(109,40,217,.5);}
.ec-submit[disabled]{opacity:.7;cursor:default;}
.ec-form-note{text-align:center;font:600 12.5px "Plus Jakarta Sans";color:var(--text-faint);}
.ec-form-error{text-align:center;font:600 13px "Plus Jakarta Sans";color:var(--danger);}
.ec-form-error[hidden]{display:none;}
.ec-form-success{text-align:center;padding:8px 0 6px;}
.ec-form-success[hidden]{display:none;}
.ec-success-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#6D28D9,#7B4BD6);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 12px 30px -10px rgba(109,40,217,.5);}

/* ================= LEGAL PAGES ================= */
.ec-legal{min-height:100vh;background:var(--bg);color:var(--text-strong);}
.legal-head{position:sticky;top:0;z-index:10;background:var(--nav-bg-on);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.legal-head-inner{max-width:940px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:16px;}
.legal-head .ec-brand-name{font:800 17px "Plus Jakarta Sans";}
.legal-head-sp{flex:1;}
.legal-head .ec-lang{margin-right:2px;}
.legal-back{font:700 13.5px "Plus Jakarta Sans";color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.legal-main{max-width:820px;margin:0 auto;padding:64px 28px 40px;}
.legal-title{font:800 clamp(30px,5vw,44px)/1.08 "Plus Jakarta Sans";letter-spacing:-1px;margin:0;text-wrap:balance;}
.legal-updated{font:600 13.5px "Plus Jakarta Sans";color:var(--text-faint);margin-top:12px;}
.legal-intro{font:400 17px/1.65 "Plus Jakarta Sans";color:var(--text-muted);margin:22px 0 0;text-wrap:pretty;}
.legal-sections{display:flex;flex-direction:column;gap:30px;margin-top:44px;}
.legal-h2{font:800 19px "Plus Jakarta Sans";letter-spacing:-.3px;color:var(--text-strong);margin:0 0 10px;}
.legal-b{font:400 15.5px/1.7 "Plus Jakarta Sans";color:var(--text-body);margin:0;white-space:pre-line;text-wrap:pretty;}
.legal-b + .legal-table-wrap{margin-top:16px;}
.legal-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;}
.legal-table{width:100%;border-collapse:collapse;font:400 14px/1.5 "Plus Jakarta Sans";min-width:520px;}
.legal-table th{text-align:left;font-weight:700;color:var(--text-title);background:var(--surface-2);padding:11px 14px;border-bottom:1px solid var(--border);}
.legal-table td{color:var(--text-body);padding:11px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top;}
.legal-table tr:last-child td{border-bottom:none;}
.legal-more{margin-top:44px;padding-top:32px;border-top:1px solid var(--border);}
.legal-more-label{font:800 12px "Plus Jakarta Sans";letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;}
.legal-more-links{display:flex;flex-wrap:wrap;gap:12px;}
.lm{font:700 13.5px "Plus Jakarta Sans";color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:10px 16px;border-radius:11px;text-decoration:none;}
.lm.on{color:var(--brand-ink);background:var(--brand-tint);border:1px solid var(--border-2);}
.legal-footer{border-top:1px solid var(--border);padding:30px 28px;margin-top:30px;}
.legal-footer-inner{max-width:820px;margin:0 auto;font:500 13px "Plus Jakarta Sans";color:var(--text-faintest);}

/* ================= COOKIE BANNER ================= */
.ec-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 50px -18px var(--shadow-lg);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(150%);opacity:0;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;}
.ec-cookie.is-open{transform:translateY(0);opacity:1;}
.ec-cookie[hidden]{display:none;}
.ec-cookie-txt{flex:1;min-width:220px;margin:0;font:500 13.5px/1.55 "Plus Jakarta Sans";color:var(--text-body);}
.ec-cookie-txt a{color:var(--brand-ink);font-weight:700;text-decoration:none;white-space:nowrap;}
.ec-cookie-txt a:hover{text-decoration:underline;}
.ec-cookie-actions{display:flex;gap:10px;flex:none;}
.ec-cookie-btn{cursor:pointer;font:700 13.5px "Plus Jakarta Sans";padding:10px 18px;border-radius:10px;border:1px solid transparent;transition:filter .15s,background .15s,border-color .15s;}
.ec-cookie-accept{background:var(--brand);color:#fff;box-shadow:0 6px 16px -6px rgba(109,40,217,.45);}
.ec-cookie-accept:hover{filter:brightness(.93);}
.ec-cookie-decline{background:var(--surface);color:var(--text-muted);border-color:var(--border-2);}
.ec-cookie-decline:hover{background:var(--surface-2);}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .ec-nav-links{display:none;}
  .sec-split{grid-template-columns:1fr;gap:40px;}
  .sec-split>*{order:0!important;}
  .sec-split .split-media,.sec-split .brand-media{order:2!important;}
  .fquad{gap:20px 16px;}
  .sec,.finale-sec{padding:72px 24px;}
  .hero{padding:120px 24px 0;}
  .finale{padding:56px 30px;}
}
@media (max-width:560px){
  /* Compact nav so logo + language + login + CTA all fit; keep login reachable. */
  .ec-nav-inner{padding:0 14px;gap:10px;}
  .ec-nav-right{gap:10px;}
  .ec-brand-name{display:none;}
  .langpill{width:auto;padding:8px 10px;gap:5px;}
  .langpill-cur svg{display:none;}
  /* Login is hidden on mobile — visitors use the app; also frees room for the CTA */
  .ec-login{display:none;}
  .ec-nav-cta{padding:10px 14px;}
  .ec-nav-right{gap:10px;}
  .fquad{grid-template-columns:1fr;}
  /* Feature cards & quad: icon docked top-left, title+body flow tightly beside it */
  .fcard{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;}
  .fcard-ic{grid-column:1;grid-row:1 / 3;align-self:start;margin:0;}
  .fcard-t{grid-column:2;grid-row:1;margin:0;}
  .fcard-b{grid-column:2;grid-row:2;margin-top:6px;}
  .fquad > div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start;}
  .fquad-ic{grid-column:1;grid-row:1 / 3;align-self:start;margin:0;}
  .fquad .frow-t{grid-column:2;grid-row:1;margin:0;}
  .fquad .frow-b{grid-column:2;grid-row:2;margin-top:4px;}
  .ec-field-row{grid-template-columns:1fr;}
  .ec-footer-inner{flex-direction:column;align-items:flex-start;gap:18px;}
  .ec-cookie{flex-direction:column;align-items:stretch;gap:12px;left:10px;right:10px;bottom:10px;padding:14px 16px;}
  .ec-cookie-actions{justify-content:flex-end;}
  .founding{padding:26px 22px;}
  .founding-cta{width:100%;text-align:center;}
  .hero-phone{width:26%;}
}