/* CartYatra 2026 – design tokens */
:root{
  --ink:#0B1221; --ink-2:#1A2338; --navy:#0E1630; --navy-2:#162042;
  --text:#0B1221; --muted:#566079; --muted-2:#8A93A8; --line:#E4E7F0; --bg:#F6F7FB; --white:#FFFFFF;
  --indigo:#5B4BFF; --indigo-2:#7C6DFF; --violet:#A855F7; --coral:#FF5C3A; --coral-soft:#FFE8E2;
  --mint:#10B981; --mint-soft:#DDF7EC; --amber:#F59E0B; --amber-soft:#FEF3C7; --indigo-soft:#ECEAFF;
  --grad:linear-gradient(100deg,#5B4BFF 0%,#A855F7 50%,#FF5C3A 100%);
  --grad-soft:linear-gradient(135deg,#ECEAFF 0%,#F6EDFF 50%,#FFECE6 100%);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(11,18,33,.06),0 2px 8px rgba(11,18,33,.06);
  --sh-2:0 12px 32px -12px rgba(11,18,33,.18),0 4px 12px rgba(11,18,33,.06);
  --sh-3:0 40px 80px -24px rgba(20,16,90,.45);
  --head:'Montserrat',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:var(--indigo);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--indigo-2);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px;margin:0 auto;padding:0 24px}
.ic{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:18px;height:18px}

/* Type */
h1,h2,h3,h4{font-family:var(--head);color:inherit;margin:0 0 16px;letter-spacing:-.02em}
.h-hero{font-weight:800;font-size:clamp(40px,6.2vw,76px);line-height:1.02;letter-spacing:-.035em}
.h-xl{font-weight:800;font-size:clamp(32px,4.4vw,54px);line-height:1.08;letter-spacing:-.03em}
.h-lg{font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.15}
.h-md{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.h-sm{font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.005em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--muted);max-width:640px}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--indigo-soft);padding:8px 14px;border-radius:999px;margin:0 0 20px}
.dark .eyebrow{background:rgba(124,109,255,.16);color:#C9C2FF}
p{margin:0 0 16px}

/* Nav */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);background:rgba(11,18,33,.72);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .container{height:68px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 21px var(--head);letter-spacing:-.02em;margin-right:auto}
.logo svg{width:34px;height:34px}
.nav-links{display:flex;gap:4px}
.nav-links a{color:#C8CEDD;text-decoration:none;font:500 15px var(--body);padding:8px 14px;border-radius:999px}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.menu{display:none;position:relative}
.menu summary{list-style:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.08)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:54px;background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px;min-width:220px;box-shadow:var(--sh-3);display:flex;flex-direction:column}
.menu nav a{color:#E6E9F2;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:500}
.menu nav a:hover{background:rgba(255,255,255,.08)}
@media (max-width:980px){.nav-links{display:none}.menu{display:block}.nav .btn{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font:600 15px var(--body);text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-lg{height:56px;padding:0 30px;font-size:16px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(91,75,255,.7)}
.btn-primary:hover{color:#fff;box-shadow:0 14px 36px -10px rgba(91,75,255,.85)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff;background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line);background:#fff}
.btn-ghost-dark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost-dark:hover{color:#fff;background:rgba(255,255,255,.12)}
.btn-white{background:#fff;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 24px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none}

/* Sections */
section{padding:96px 0;position:relative}
.dark{background:var(--ink);color:#E6E9F2}
.dark .lead,.dark .muted{color:#A6AFC4}
.dark a:not(.btn){color:#C9C2FF}
.white{background:#fff}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.sec-head{max-width:760px;margin:0 0 48px}
.sec-head.center{margin:0 auto 56px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}

/* Hero */
.hero{background:var(--ink);color:#fff;padding:72px 0 120px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;background:radial-gradient(40% 50% at 15% 20%,rgba(91,75,255,.45),transparent 70%),radial-gradient(35% 45% at 85% 30%,rgba(168,85,247,.35),transparent 70%),radial-gradient(40% 40% at 70% 90%,rgba(255,92,58,.28),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-copy{max-width:880px;margin:0 auto;text-align:center}
.hero .lead{color:#B9C1D6;margin:0 auto 28px}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;list-style:none;padding:0;margin:0 0 56px;color:#B9C1D6;font-size:15px}
.hero-chips li{display:flex;align-items:center;gap:8px}
.hero-chips .ic{color:#34D399;width:18px;height:18px}
.hero-stage{position:relative;max-width:1080px;margin:0 auto}
.float{position:absolute;z-index:3;animation:bob 6s ease-in-out infinite}
.float.f2{animation-delay:-2s}.float.f3{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* App window mockup */
.window{background:#fff;border-radius:20px;box-shadow:var(--sh-3);overflow:hidden;border:1px solid rgba(255,255,255,.4);color:var(--text)}
.window-bar{height:40px;background:#F1F3F8;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}
.window-bar i{width:11px;height:11px;border-radius:50%;background:#D7DBE5;display:block}
.window-bar span{margin-left:12px;font-size:12px;color:var(--muted-2);background:#fff;border-radius:6px;padding:3px 12px}
.app{display:grid;grid-template-columns:200px 1fr;min-height:440px}
.app-side{background:#FAFBFD;border-right:1px solid var(--line);padding:18px 12px;font-size:13px}
.app-side .s-logo{display:flex;align-items:center;gap:8px;font:800 14px var(--head);margin:0 8px 18px}
.app-side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:500}
.app-side a.on{background:var(--indigo-soft);color:var(--indigo)}
.app-main{padding:22px;display:flex;flex-direction:column;gap:16px;font-size:13px}
.app-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.app-title b{font:700 18px var(--head)}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--body);padding:5px 10px;border-radius:999px;background:var(--indigo-soft);color:var(--indigo);white-space:nowrap}
.pill.red{background:var(--coral-soft);color:#C2361B}.pill.green{background:var(--mint-soft);color:#047857}.pill.amber{background:var(--amber-soft);color:#92400E}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi small{display:block;color:var(--muted);font-size:11px;font-weight:500}
.kpi strong{font:800 22px var(--head);letter-spacing:-.02em}
.kpi em{font-style:normal;font-size:11px;font-weight:600;color:#047857}
.panel{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600}
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;height:130px}
.funnel div{border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#7C6DFF,#5B4BFF);position:relative;transform-origin:bottom;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}
.funnel div:nth-child(2){animation-delay:.1s}.funnel div:nth-child(3){animation-delay:.2s;background:linear-gradient(180deg,#FF8A6E,#FF5C3A)}.funnel div:nth-child(4){animation-delay:.3s}.funnel div:nth-child(5){animation-delay:.4s;background:linear-gradient(180deg,#34D399,#10B981)}
@keyframes grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.funnel-l{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.funnel-l b{display:block;color:var(--text);font-size:13px}
.split-2{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.fix{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.fix:last-child{border:0}
.fix i{font-style:normal;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--coral-soft);color:#C2361B;flex:none}
@media (max-width:820px){.app{grid-template-columns:1fr}.app-side{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.split-2{grid-template-columns:1fr}.float{display:none}}

/* Floating cards */
.fcard{background:#fff;border-radius:16px;box-shadow:var(--sh-2);padding:14px 16px;font-size:13px;color:var(--text);min-width:220px;border:1px solid var(--line)}
.fcard b{font-family:var(--head)}
.ring{width:54px;height:54px}

/* Logos/strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.strip span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;color:var(--ink-2);box-shadow:var(--sh-1)}
.strip .ic{color:var(--indigo)}

/* Stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.stat{padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.stat strong{display:block;font:800 clamp(34px,4vw,46px)/1 var(--head);letter-spacing:-.03em;margin-bottom:8px}
.stat span{color:var(--muted);font-size:15px}

/* Journey animation */
.journey{background:var(--navy);border-radius:var(--r-xl);padding:40px 32px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-3)}
.journey svg{width:100%;height:auto}
.j-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:16px;font-size:14px;color:#B9C1D6}
.j-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:12px;overflow:hidden;position:relative;transition:box-shadow .2s,transform .2s}
.tile:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.tile p{color:var(--muted);font-size:15px;margin:0}
.tile .viz{margin-top:auto;padding-top:12px}
.t-2{grid-column:span 2}.t-3{grid-column:span 3}.t-4{grid-column:span 4}
.tile.feature{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile.feature p{color:#A6AFC4}
.tile-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--indigo-soft);color:var(--indigo)}
.tile-ic.c{background:var(--coral-soft);color:#C2361B}.tile-ic.g{background:var(--mint-soft);color:#047857}.tile-ic.a{background:var(--amber-soft);color:#92400E}
.tile.feature .tile-ic{background:rgba(124,109,255,.2);color:#C9C2FF}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}.t-2,.t-3,.t-4{grid-column:span 2}}
@media (min-width:640px) and (max-width:1000px){.t-2{grid-column:span 1}}

/* mini visuals */
.mbars{display:flex;align-items:end;gap:8px;height:90px}
.mbars span{flex:1;border-radius:8px 8px 3px 3px;background:#DCD8FF}
.mbars span.hot{background:var(--coral)}
.mlist{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:500;background:#fff}
.steps{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.steps span{flex:1;text-align:center;padding:10px 4px;border-radius:10px;background:var(--indigo-soft);color:var(--indigo)}
.steps span.x{background:var(--coral);color:#fff}
.steps span.o{background:#F1F3F8;color:var(--muted-2)}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chips2 span{font-size:13px;padding:7px 12px;border-radius:999px;background:#F1F3F8;font-weight:500}
.chips2 span.x{background:var(--coral-soft);color:#C2361B;text-decoration:line-through}
.toast{display:flex;gap:12px;align-items:center;background:var(--amber-soft);border-radius:14px;padding:12px 14px;font-size:13px;font-weight:500;color:#78350F}

/* Phone */
.phone{width:290px;max-width:100%;margin:0 auto;border-radius:44px;background:#0B1221;padding:12px;box-shadow:var(--sh-3)}
.phone-in{background:#fff;border-radius:34px;overflow:hidden;padding:46px 18px 22px;position:relative;color:var(--text);font-size:13px}
.phone-in::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:#0B1221}
.tl{list-style:none;margin:12px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:13px;top:8px;bottom:30px;border-left:2px dashed #CFD4E2}
.tl li{display:flex;gap:12px;align-items:center;padding:7px 0;position:relative}
.tl li i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--indigo-soft);color:var(--indigo);flex:none;font-style:normal}
.tl li.x i{background:var(--coral);color:#fff}
.tl li.x{font-weight:700;color:#C2361B}

/* Compare */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px}
.cmp{border-radius:var(--r-lg);padding:32px}
.cmp.them{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.cmp.us{background:linear-gradient(160deg,rgba(91,75,255,.35),rgba(168,85,247,.22) 50%,rgba(255,92,58,.18));border:1px solid rgba(201,194,255,.35)}
.cmp ul{list-style:none;padding:0;margin:16px 0 0}
.cmp li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#D5DAE7}
.cmp li:last-child{border:0}
.cmp .ic{margin-top:2px}
.cmp.them .ic{color:#8A93A8}.cmp.us .ic{color:#34D399}
.price-big{font:800 44px/1 var(--head);letter-spacing:-.03em;color:#fff;margin:8px 0}

/* Video */
.video-frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:#0B1221;border:1px solid rgba(255,255,255,.12)}
.video-frame video{width:100%;height:auto;aspect-ratio:16/9;background:#0B1221}

/* Cards / pricing */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.plan{display:flex;flex-direction:column;gap:6px}
.plan.pop{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--sh-3);position:relative}
.plan.pop::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan .price{font:800 44px/1 var(--head);letter-spacing:-.03em;margin:6px 0 10px}
.plan .price small{font:500 15px var(--body);color:var(--muted)}
.plan.pop .price small,.plan.pop .muted{color:#A6AFC4}
.plan ul{list-style:none;padding:0;margin:8px 0 18px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:center}
.plan li .ic{color:var(--mint)}
.plan .btn{margin-top:auto}

/* Check list */
.checks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ic{color:var(--mint);margin-top:2px}

/* Steps (how) */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;counter-reset:s}
.how .card{position:relative;padding-top:64px}
.how .num{position:absolute;top:24px;left:28px;font:800 14px var(--head);color:#fff;background:var(--grad);width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.how-viz{margin-top:16px;border-radius:14px;background:var(--bg);padding:16px;border:1px solid var(--line)}

/* Answer box, FAQ, tables */
.answer{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:0 0 28px;box-shadow:var(--sh-1)}
.answer .badge-ic{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none}
.answer strong{display:block;font:700 16px var(--head);margin-bottom:4px}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font:600 17px var(--head);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--body);color:var(--indigo);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;margin:0;color:var(--muted)}
.table-wrap,.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:0 0 16px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;background:#FAFBFD}
tr:last-child td,tr:last-child th{border-bottom:0}

/* Page hero (inner pages) */
.page-hero{background:var(--ink);color:#fff;padding:72px 0 80px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 70% at 10% 0%,rgba(91,75,255,.4),transparent 70%),radial-gradient(40% 70% at 95% 20%,rgba(255,92,58,.25),transparent 70%);pointer-events:none}
.page-hero .container,.page-hero .narrow{position:relative}
.page-hero .lead{color:#B9C1D6}
.chipnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chipnav a{color:#E6E9F2;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.chipnav a:hover{background:rgba(255,255,255,.14)}

/* Feature rows (features page) */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.frow:last-child{border:0}
.frow:nth-child(even) .fviz{order:-1}
@media (max-width:960px){.frow:nth-child(even) .fviz{order:0}}
.fviz{background:var(--grad-soft);border-radius:var(--r-xl);padding:32px;min-height:280px;display:flex;align-items:center;justify-content:center}
.fviz>div{width:100%;max-width:440px}

/* Prose */
.prose{padding:64px 0 96px}
.prose h2{font:700 clamp(24px,2.6vw,30px)/1.25 var(--head);margin:48px 0 14px}
.prose h3{font:700 19px var(--head);margin:30px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:0 0 32px}
.toc ol{margin:8px 0 0}
.meta{font-size:14px;color:var(--muted);margin-bottom:24px}
.callout{display:flex;gap:16px;align-items:center;background:var(--grad-soft);border-radius:var(--r);padding:22px 24px;margin:28px 0}
.post-cover{border-radius:var(--r-xl);overflow:hidden;margin:0 0 28px;box-shadow:var(--sh-2)}
.post{scroll-margin-top:90px;padding-top:40px;margin-top:40px;border-top:1px solid var(--line)}
.post:first-of-type{border:0;margin-top:0}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);color:inherit}
.blog-card div{padding:22px 24px}

/* CTA */
.cta{background:var(--ink);border-radius:var(--r-xl);padding:72px 32px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 20% 0%,rgba(91,75,255,.5),transparent 70%),radial-gradient(50% 80% at 90% 100%,rgba(255,92,58,.35),transparent 70%)}
.cta>*{position:relative}
.cta .lead{color:#B9C1D6;margin:0 auto 28px}

/* Footer */
footer{background:var(--ink);color:#A6AFC4;padding:72px 0 0;margin-top:96px}
footer .cols{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;padding-bottom:48px}
@media (max-width:900px){footer .cols{grid-template-columns:repeat(2,1fr)}footer .cols>div:first-child{grid-column:span 2}}
footer a{display:block;color:#A6AFC4;text-decoration:none;padding:5px 0;font-size:15px}
footer a:hover{color:#fff}
footer h4{color:#fff;font:700 14px var(--head);letter-spacing:.02em;margin:0 0 12px}
footer .legal{border-top:1px solid rgba(255,255,255,.08);padding:24px 0 40px;font-size:13px}
@media (max-width:640px){section{padding:64px 0}.hero{padding:48px 0 72px}.cta{padding:48px 20px}.journey{padding:24px 16px}}

/* ===== Motion (Framer-style) ===== */
.js .reveal{opacity:0;transform:translateY(28px) scale(.98);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),filter .9s ease var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js [data-words] .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(10px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s;transition-delay:calc(var(--i) * 70ms + 100ms)}
.js [data-words].in .w{opacity:1;transform:none;filter:none}
[data-tilt]{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.nav.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.glow-dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* ===== Scroll story ===== */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.story-steps{display:flex;flex-direction:column;gap:24px;padding:10vh 0}
.story-step{padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;transition:background .4s,border-color .4s,opacity .4s,transform .4s;opacity:.45;min-height:34vh;display:flex;flex-direction:column;justify-content:center}
.story-step.active{opacity:1;background:rgba(124,109,255,.12);border-color:rgba(201,194,255,.35);transform:translateX(6px)}
.story-step .n{font:800 13px var(--head);letter-spacing:.1em;color:#C9C2FF;margin-bottom:10px}
.story-step h3{color:#fff}
.story-sticky{position:sticky;top:96px}
.screen{background:#fff;border-radius:28px;box-shadow:var(--sh-3);min-height:500px;position:relative;overflow:hidden;color:var(--text)}
.screen .window-bar{border-radius:0}
.scene{position:absolute;inset:40px 0 0 0;padding:28px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.screen[data-scene="1"] .scene[data-n="1"],.screen[data-scene="2"] .scene[data-n="2"],.screen[data-scene="3"] .scene[data-n="3"],.screen[data-scene="4"] .scene[data-n="4"]{opacity:1;transform:none;pointer-events:auto}
.scene .seq>*{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * 220ms + 250ms)}
.screen[data-scene="1"] [data-n="1"] .seq>*,.screen[data-scene="2"] [data-n="2"] .seq>*,.screen[data-scene="3"] [data-n="3"] .seq>*,.screen[data-scene="4"] [data-n="4"] .seq>*{opacity:1;transform:none}
.scene .bars div{transform-origin:bottom;transform:scaleY(.02);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * 120ms + 300ms)}
.screen[data-scene="4"] .bars div{transform:scaleY(1)}
.install-card{border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.switch{width:52px;height:30px;border-radius:999px;background:#E4E7F0;position:relative;transition:background .4s .9s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .4s .9s}
.screen[data-scene="1"] .switch{background:var(--mint)}
.screen[data-scene="1"] .switch::after{transform:translateX(22px)}
@media (max-width:960px){.story{grid-template-columns:1fr}.story-sticky{position:sticky;top:76px;z-index:2}.screen{min-height:430px}.story-steps{padding:0}.story-step{min-height:auto}}
@media (prefers-reduced-motion:reduce){.js .reveal,.js [data-words] .w,.scene .seq>*{opacity:1!important;transform:none!important;filter:none!important}.marquee-track{animation:none}}