/* ═══════════════════════════════════════════════════════════════════════════
   SevenMentor University — design tokens & styles
   Layout: full-bleed hero with animated gradient mesh, editorial type
   (Syne display / Manrope body), deep indigo ground sections, amber accent.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f8fafc; --bg-2:#ffffff; --ink:#0b1220; --ink-2:#334155; --muted:#64748b;
  --line:#e2e8f0; --ground:#000000; --ground-2:#00142b; --on-ground:#f8fafc; --on-ground-2:#cbd5e1;
  --accent:#f97316; --accent-2:#ea580c; --accent-ink:#ffffff; --good:#16a34a; --warn:#facc15; --bad:#dc2626;
  --pink:#ec4899; --violet:#a855f7;
  --glow:rgba(249,115,22,.4); --shadow:0 20px 60px -20px rgba(0,20,43,.3);
  --display:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --radius:16px; --radius-s:10px; --gutter:clamp(16px,4vw,48px); --max:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--bg-2:#111a2e;--ink:#f1f5f9;--ink-2:#cbd5e1;--muted:#94a3b8;--line:#1f2b45;--ground:#000000;--ground-2:#00142b;--shadow:0 20px 60px -20px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b1220;--bg-2:#111a2e;--ink:#f1f5f9;--ink-2:#cbd5e1;--muted:#94a3b8;--line:#1f2b45;--ground:#000000;--ground-2:#00142b;--shadow:0 20px 60px -20px rgba(0,0,0,.7);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,112px)}
.section.tight{padding-block:clamp(40px,5vw,72px)}
.eyebrow{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:62ch}
.stack{display:grid;gap:16px}
.center{text-align:center}
.center .lead{margin-inline:auto}
.head{display:grid;gap:14px;margin-bottom:40px;max-width:760px}
.ground{background:var(--ground);color:var(--on-ground)}
.ground .lead,.ground .muted{color:var(--on-ground-2)}
.ground .eyebrow{color:var(--accent)}
.muted{color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{--bx:var(--accent);--by:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;background:var(--bx);color:var(--by);font-weight:800;font-family:var(--display);font-size:.95rem;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px var(--glow)}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost{--bx:transparent;--by:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.ground .btn.ghost{--by:var(--on-ground);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.btn.wa{--bx:#25d366;--by:#fff}
.btn.lg{padding:18px 32px;font-size:1.05rem}
.btn.sm{padding:10px 16px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── Header ──────────────────────────────────────────────────────────── */
.topbar{background:var(--ground);color:var(--on-ground-2);font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;flex-wrap:wrap}
.topbar b{color:var(--accent)}
.topbar a:hover{color:var(--on-ground)}
.hdr .nav>a,.hdr .nav .dd>button,.hdr .burger,.hdr .logo{color:var(--on-ground)}.hdr .logo small{color:var(--on-ground-2)}.hdr .nav>a:hover,.hdr .nav .dd>button:hover{background:rgba(249,115,22,.18);color:#fff}.hdr .btn.ghost{--by:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}.hdr{border-bottom-color:rgba(255,255,255,.08)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb,var(--ground-2) 92%,transparent);color:var(--on-ground);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.4)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.logo .mark{width:38px;height:38px;border-radius:11px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-size:1rem;box-shadow:0 8px 20px -8px var(--glow)}
.logo img.mark{background:#fff;object-fit:contain;padding:3px;flex:none}
.logo small{display:block;font:600 .62rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav>a,.nav .dd>button{padding:10px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--ink-2);background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav .dd>button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.dd{position:relative}
.dd .menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:grid;gap:2px;opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:.22s}
.dd:hover .menu,.dd:focus-within .menu{opacity:1;transform:none;pointer-events:auto}
.dd .menu a{padding:10px 12px;border-radius:9px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.93rem}
.dd .menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dd .menu a span{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.hdr .cta{display:flex;gap:10px;align-items:center;flex:none}
@media (max-width:980px){.hdr .cta{margin-left:auto}.hdr .cta .btn{padding:10px 14px;font-size:.8rem}}
.burger{display:none;flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);margin-left:auto}
.mnav{display:none}
@media (max-width:980px){
  .nav,.hdr .cta .ghost{display:none}
  .burger{display:grid;place-items:center}
  .mnav{display:block;position:fixed;inset:0;z-index:70;background:var(--bg);padding:24px var(--gutter);overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
  .mnav.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:1.1rem}
  .mnav .sub a{font-weight:500;font-size:.98rem;padding-left:16px;color:var(--ink-2)}
  .mnav .close{position:absolute;top:16px;right:16px}
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ground);color:var(--on-ground);overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.75}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 70% 40%,transparent,var(--ground) 100%);opacity:.55}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:clamp(56px,8vw,110px)}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--pink),var(--violet),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.hero .lead{color:var(--on-ground-2);font-size:1.15rem}
.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.8rem;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(6px)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 12px var(--good)}
.partner-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.85rem;font-weight:700}
.partner-pill b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.75rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:8px}
.hero-stats div{display:grid;gap:2px}
.hero-stats strong{font-family:var(--display);font-size:1.7rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:.82rem;color:var(--on-ground-2)}

/* ── Lead card ───────────────────────────────────────────────────────── */
.lead-card{background:var(--bg-2);color:var(--ink);border-radius:var(--radius);padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative;overflow:hidden}
.lead-card::before{content:"";position:absolute;inset:-2px;background:conic-gradient(from var(--ang,0deg),var(--accent),transparent 30%,transparent 70%,var(--accent-2));z-index:-1;animation:spin 8s linear infinite;opacity:.9}
.lead-card::after{content:"";position:absolute;inset:2px;background:var(--bg-2);border-radius:calc(var(--radius) - 2px);z-index:-1}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.lead-card h3{font-size:1.35rem;margin-bottom:4px}
.lead-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);font:inherit;font-size:.98rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.field .err{display:none;color:var(--bad);font-size:.78rem}
.field.invalid input,.field.invalid select{border-color:var(--bad)}
.field.invalid .err{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--muted);line-height:1.45}
.consent input{margin-top:3px;accent-color:var(--accent)}
.form .btn{width:100%}
.form-note{font-size:.78rem;color:var(--muted);text-align:center}
.form-note i{color:var(--good);font-style:normal}
.trust-line{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);margin-top:14px}
.trust-line .stars{color:var(--accent);letter-spacing:1px}
.form.sending .btn{opacity:.7;pointer-events:none}
.success{display:none;text-align:center;padding:24px 8px}
.form.done+.success{display:grid;gap:10px}
.form.done{display:none}
.success .tick{width:64px;height:64px;border-radius:50%;background:var(--good);margin:0 auto;display:grid;place-items:center;color:#fff;font-size:1.8rem;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(0)}}

/* ── Marquee ─────────────────────────────────────────────────────────── */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding-block:16px;mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .item{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink-2);white-space:nowrap}
.marquee .item b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);font-size:.7rem;letter-spacing:.02em}

/* ── Programme cards ─────────────────────────────────────────────────── */
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.c3,.grid.c2,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:14px;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;min-width:0;transform-style:preserve-3d}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.card .lvl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.card h3{font-size:1.4rem}
.card .fee{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.card .fee strong{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.card .fee span{color:var(--muted);font-size:.8rem}
.card .meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.85rem;color:var(--muted)}
.card .meta b{color:var(--ink);font-weight:700}
.card .arrow{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.3s;color:var(--ink)}
.card:hover .arrow{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}
.card.hot::before{content:"Most popular";position:absolute;top:-12px;left:22px;background:var(--accent);color:var(--accent-ink);font:800 .7rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px}

/* ── Why / feature tiles ─────────────────────────────────────────────── */
.tile{display:grid;gap:12px;padding:28px;border-radius:var(--radius);background:var(--ground-2);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;min-width:0}
.tile::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--accent);filter:blur(70px);opacity:.18;right:-40px;top:-40px;transition:.5s}
.tile:hover::after{opacity:.4;transform:scale(1.3)}
.tile .ico{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:1.3rem}
.tile h3{color:#fff}
.tile p{color:var(--on-ground-2);font-size:.95rem}

/* ── Stats band ──────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:28px 24px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:grid;gap:4px;text-align:center}
.stat strong{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.85rem;color:var(--muted)}

/* ── Approvals ───────────────────────────────────────────────────────── */
.approvals{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:980px){.approvals{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.approvals{grid-template-columns:repeat(2,1fr)}}
.approval{display:grid;gap:8px;padding:18px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);text-align:center;transition:.3s}
.approval:hover{border-color:var(--accent);transform:translateY(-3px)}
.approval b{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.approval span{font-size:.75rem;color:var(--muted);line-height:1.35}

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;padding:24px 20px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:grid;gap:10px;position:relative}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:2rem;color:var(--accent);line-height:1}
.step h3{font-size:1.05rem}
.step p{font-size:.9rem;color:var(--muted)}

/* ── Testimonials ────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}
.quote{padding:28px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:grid;gap:14px;position:relative}
.quote::before{content:"“";position:absolute;top:8px;right:22px;font-family:var(--display);font-size:5rem;color:var(--accent);opacity:.35;line-height:1}
.quote p{font-size:1.02rem;color:var(--ink-2)}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .who i{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font:800 .9rem var(--display);color:var(--accent-ink);font-style:normal}
.quote .who b{display:block}
.quote .who span{font-size:.82rem;color:var(--muted)}
.sample-tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);font-weight:800}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:0 22px;transition:.3s}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--accent);transition:.3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:var(--ink-2);max-width:70ch}

/* ── Fee block ───────────────────────────────────────────────────────── */
.feebox{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
@media (max-width:860px){.feebox{grid-template-columns:1fr}}
.feecard{padding:30px;border-radius:var(--radius);background:var(--ground);color:var(--on-ground);display:grid;gap:18px;position:relative;overflow:hidden}
.feecard::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:var(--accent);filter:blur(90px);opacity:.25;right:-60px;bottom:-80px}
.feecard .big{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.feecard .big small{font-size:1rem;color:var(--on-ground-2);font-weight:600;margin-left:8px}
.feerow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.95rem}
.feerow b{color:#fff;font-variant-numeric:tabular-nums}
.feecard .note{font-size:.78rem;color:var(--on-ground-2)}
.emi{padding:30px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:grid;gap:16px;align-content:start}
.emi input[type=range]{width:100%;accent-color:var(--accent)}
.emi .out{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.emi .out strong{font-family:var(--display);font-size:2rem;font-variant-numeric:tabular-nums}
.emi .row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}

/* ── Tables ──────────────────────────────────────────────────────────── */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-weight:700}

/* ── Syllabus accordion ──────────────────────────────────────────────── */
.sem{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:760px){.sem{grid-template-columns:1fr}}
.sem div{padding:22px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.sem h4{font-size:1rem;margin-bottom:10px;color:var(--accent-2)}
.sem ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:.93rem;display:grid;gap:4px}

/* ── Spec chips ──────────────────────────────────────────────────────── */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.specs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.specs{grid-template-columns:1fr}}
.spec{padding:20px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);display:grid;gap:6px;transition:.3s;min-width:0}
.spec:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.spec b{font-family:var(--display);font-size:1.05rem}
.spec span{font-size:.85rem;color:var(--muted)}

/* ── Page hero (inner pages) ─────────────────────────────────────────── */
.phero{background:var(--ground);color:var(--on-ground);position:relative;overflow:hidden}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.phero .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding-block:clamp(48px,6vw,88px)}
.phero h1{color:#fff;font-size:clamp(2rem,4.5vw,3.4rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--on-ground-2);margin-bottom:16px}
.crumbs a:hover{color:#fff}
.phero .facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:8px}
.phero .facts div{display:grid}
.phero .facts b{font-family:var(--display);font-size:1.25rem;color:#fff}
.phero .facts span{font-size:.78rem;color:var(--on-ground-2)}
@media (max-width:900px){.hero .wrap,.phero .wrap{grid-template-columns:1fr}}

/* ── Sticky mobile bar & floating ────────────────────────────────────── */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg-2) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar .btn{padding:12px 8px;font-size:.82rem}
  body{padding-bottom:76px}
}
.float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;gap:10px}
@media (max-width:760px){.float{display:none}}
.float a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:transform .25s}
.float a:hover{transform:scale(1.08)}
.float .wa{background:#25d366;animation:pulse 2.4s infinite}
.float .tel{background:var(--ground-2)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ── Modal (exit intent / brochure) ──────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(6,7,26,.7);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:.3s}
.modal.open{opacity:1;pointer-events:auto}
.modal .box{width:min(520px,100%);background:var(--bg-2);color:var(--ink);border-radius:var(--radius);padding:30px;position:relative;transform:translateY(20px) scale(.97);transition:.35s cubic-bezier(.2,.8,.2,1);display:grid;gap:14px}
.modal.open .box{transform:none}
.modal .x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);cursor:pointer;font-size:1.2rem;color:var(--ink)}
.countdown{display:flex;gap:10px}
.countdown div{display:grid;place-items:center;min-width:58px;padding:8px 6px;border-radius:10px;background:var(--ground);color:#fff;font-family:var(--display)}
.countdown strong{font-size:1.4rem;font-variant-numeric:tabular-nums;line-height:1}
.countdown span{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ground-2)}

/* ── Quiz ────────────────────────────────────────────────────────────── */
.quiz{padding:30px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:grid;gap:18px;max-width:760px}
.quiz .q{display:none;gap:14px}
.quiz .q.on{display:grid}
.quiz .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:560px){.quiz .opts{grid-template-columns:1fr}}
.quiz .opts button{padding:16px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:.2s}
.quiz .opts button:hover{border-color:var(--accent);transform:translateY(-2px)}
.quiz .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.quiz .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s}
.quiz .result{display:none;gap:12px}
.quiz .result.on{display:grid}

/* ── Compare strip ───────────────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.cmp{grid-template-columns:1fr}}
.cmp div{padding:24px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:8px}
.cmp div.us{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.cmp h3{font-size:1.05rem}
.cmp ul{margin:0;padding-left:18px;font-size:.9rem;color:var(--ink-2);display:grid;gap:4px}

/* ── Branch cards ────────────────────────────────────────────────────── */
.branch{padding:22px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);display:grid;gap:8px;min-width:0}
.branch b{font-family:var(--display);font-size:1.05rem}
.branch span{font-size:.88rem;color:var(--muted)}
.branch a.map{font-size:.85rem;color:var(--accent-2);font-weight:700}

/* ── Blog ────────────────────────────────────────────────────────────── */
.post{max-width:72ch}
.post h2{font-size:1.5rem;margin-top:32px;margin-bottom:10px}
.post p{color:var(--ink-2);margin-bottom:14px}
.byline{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.ai-box{padding:20px;border-radius:14px;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);display:grid;gap:10px}
.ai-box .row{display:flex;flex-wrap:wrap;gap:8px}
.ai-box a{font-size:.82rem;padding:8px 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-weight:700}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer{background:var(--ground);color:var(--on-ground-2);padding-block:56px 32px;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:.78rem}

/* ── Reveal animations ───────────────────────────────────────────────── */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}.js .rv.d4{transition-delay:.4s}
.js .split .w{display:inline-block;opacity:0;transform:translateY(60%) rotate(3deg);transition:.7s cubic-bezier(.2,.8,.2,1)}
.js .split.in .w{opacity:1;transform:none}
.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;z-index:90;transition:width .1s linear}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 60%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;mix-blend-mode:screen}
@media (hover:hover){.hero:hover .cursor-glow{opacity:.7}}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ground);color:#fff;padding:12px 18px;border-radius:999px;font-size:.88rem;opacity:0;transition:.3s;z-index:85;pointer-events:none;box-shadow:var(--shadow)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.social-proof{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:.82rem;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);transform:translateY(140%);transition:.5s cubic-bezier(.2,.8,.2,1);max-width:300px}
.social-proof.on{transform:none}
.social-proof i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--accent-ink);flex:none}
@media (max-width:760px){.social-proof{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .rv,.js .split .w{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:980px){.hdr .wrap{gap:12px}.logo{font-size:1rem}.logo small{display:none}}
@media (max-width:560px){.hdr .cta{display:none}.burger{margin-left:auto}}
.nav>a,.nav .dd>button{white-space:nowrap}
@media (max-width:760px){.topbar .wrap>span:last-child{display:none}.topbar{font-size:.76rem}}
/* white boxes inside dark sections keep dark ink */
.ground .quiz,.ground .emi,.ground .step,.ground .card,.ground .spec,.ground .approval,.ground .branch,.ground .stat{color:var(--ink)}
.ground .quiz .muted,.ground .emi .muted,.ground .step p,.ground .card .muted,.ground .spec span{color:var(--muted)}
.ground .quiz h3,.ground .emi h3,.ground .step h3,.ground .emi strong{color:var(--ink)}
.ground .quiz .eyebrow{color:var(--accent-2)}
.phero .lead,.phero .muted{color:var(--on-ground-2)}.phero .eyebrow{color:var(--accent)}
.hero .btn.ghost,.phero .btn.ghost{--by:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}

/* Dropdown: keep the submenu open while the pointer moves from the button into it.
   The .dd::after bridge covers the 8px gap, and the hide is delayed slightly so a
   diagonal move that briefly leaves the menu does not close it. */
.dd .menu{visibility:hidden;pointer-events:auto;transition:opacity .22s .2s,transform .22s .2s,visibility 0s .42s}
.dd:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.dd:hover .menu,.dd:focus-within .menu{visibility:visible;transition:opacity .22s,transform .22s,visibility 0s}
.dd .menu{max-height:calc(100vh - 110px);overflow-y:auto}

/* Header: never squeeze the logo; on mid-width screens drop the subtitle and tighten the nav. */
.hdr .logo{flex:none;white-space:nowrap}
.logo small{white-space:nowrap}
@media (max-width:1280px){.hdr .logo small{display:none}.nav>a,.nav .dd>button{padding:10px 10px;font-size:.9rem}.nav{gap:2px}}