:root{
  --ink:#0a1310; --ink-2:#54655d; --ink-3:#8b988f;
  --line:#e8ece9; --line-2:#dbe3de;
  --accent:#12b56a; --accent-ink:#0a8f52; --accent-bright:#37e58a;
  --accent-soft:#e4f7ee;
  --dark:#080d0b; --dark-2:#0e1512; --dark-3:#141d19;
  --dark-line:rgba(255,255,255,.09); --dark-line-2:rgba(255,255,255,.15);
  --dark-ink:#e9efec; --dark-ink-2:#93a29a;
  --shadow:0 1px 2px rgba(10,19,16,.05),0 14px 34px rgba(10,19,16,.07);
  --shadow-lg:0 2px 6px rgba(10,19,16,.06),0 34px 70px rgba(10,19,16,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:var(--ink);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
.jak{font-family:'Plus Jakarta Sans',sans-serif}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(20px,5vw,44px)}
.g{color:var(--accent)}
.gb{color:var(--accent-bright)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
  border-radius:100px;font:600 14.5px/1 'Plus Jakarta Sans',sans-serif;text-decoration:none;
  cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,border-color .2s,box-shadow .2s}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(18,181,106,.3)}
.btn-primary:hover{transform:translateY(-1px);background:var(--accent-ink);box-shadow:0 10px 26px rgba(18,181,106,.4)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-ghost-d{background:rgba(255,255,255,.06);color:#fff;border-color:var(--dark-line-2)}
.btn-ghost-d:hover{background:rgba(255,255,255,.11)}
.btn-white{background:#fff;color:var(--accent-ink);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn-white:hover{transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:15px}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(8,13,11,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--dark-line)}
.nav-in{max-width:1160px;margin:0 auto;padding:13px clamp(20px,5vw,44px);
  display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand .m{width:31px;height:31px;border-radius:9px;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(18,181,106,.4)}
.brand .m svg{width:16px;height:16px;stroke:#fff}
.brand b{font:700 15.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--dark-ink-2);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:#fff}
nav .btn{padding:9px 18px;font-size:13.5px}

/* section shells */
.sec-dark{background:var(--dark);color:var(--dark-ink)}
.sec-light{background:#fff;color:var(--ink)}
.sec-soft{background:#f5f8f6;color:var(--ink)}
section{padding:96px 0}

/* HERO */
.hero{padding:150px 0 96px;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow-d{display:inline-flex;align-items:center;gap:9px;padding:6px 8px 6px 8px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid var(--dark-line);font-size:12.5px;color:var(--dark-ink-2);margin-bottom:26px}
.eyebrow-d .k{background:var(--accent-soft);color:var(--accent-ink);font:700 11px 'Plus Jakarta Sans',sans-serif;
  padding:3px 10px;border-radius:100px;letter-spacing:.03em}
.hero h1{font:800 clamp(34px,5vw,60px)/1.06 'Plus Jakarta Sans',sans-serif;letter-spacing:-.035em;
  color:#fff;margin-bottom:20px;max-width:14ch}
.hero .lede{color:var(--dark-ink-2);font-size:clamp(15.5px,1.5vw,18px);max-width:500px;margin-bottom:32px;font-weight:450}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.mini-stats{display:flex;gap:0;border-top:1px solid var(--dark-line);padding-top:24px}
.mini-stats .s{padding-right:clamp(24px,4vw,46px)}
.mini-stats .s+.s{padding-left:clamp(24px,4vw,46px);border-left:1px solid var(--dark-line)}
.mini-stats .s b{display:block;font:800 clamp(22px,2.4vw,28px)/1.1 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.03em}
.mini-stats .s span{color:var(--dark-ink-2);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}

/* demo panel + floating cards */
.stage{position:relative}
.stage::before{content:"";position:absolute;inset:-10% -6% 10% -6%;z-index:0;
  background:radial-gradient(ellipse at 60% 40%,rgba(18,181,106,.22),transparent 62%)}
.window{position:relative;z-index:1;background:var(--dark-2);border:1px solid var(--dark-line-2);
  border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--dark-line);background:rgba(255,255,255,.02)}
.win-bar .d{display:flex;gap:6px}.win-bar .d i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.win-bar .u{margin-left:6px;font-size:12px;color:var(--dark-ink-2);display:flex;align-items:center;gap:6px}
.win-bar .u svg{width:12px;height:12px;stroke:var(--dark-ink-2)}
.chat{padding:20px 18px;display:flex;flex-direction:column;gap:11px;min-height:262px}
.line{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(8px);animation:up .5s ease forwards}
@keyframes up{to{opacity:1;transform:none}}
.line.l1{animation-delay:.3s}.line.l2{animation-delay:.95s}.line.l3{animation-delay:1.7s}.line.l4{animation-delay:3.1s}
.av{width:29px;height:29px;border-radius:8px;flex:none;display:grid;place-items:center;font:700 9.5px 'Plus Jakarta Sans',sans-serif}
.av.u{background:rgba(255,255,255,.06);border:1px solid var(--dark-line);color:var(--dark-ink-2)}
.av.b{background:var(--accent);color:#fff}
.bub{border-radius:11px;padding:10px 14px;font-size:13.5px;line-height:1.5;max-width:84%}
.bub.u{background:rgba(255,255,255,.05);color:var(--dark-ink)}
.bub.b{background:rgba(18,181,106,.12);border:1px solid rgba(18,181,106,.28);color:var(--dark-ink)}
.bub b{color:#fff;font-weight:700}
.bub .lnk{color:var(--accent-bright);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:600}
.bar{height:6px;width:200px;max-width:100%;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;width:0;background:var(--accent-bright);border-radius:100px;animation:fill 1.5s 1.9s ease-out forwards}
@keyframes fill{to{width:100%}}
.ok{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--accent-bright)}
.ok svg{width:15px;height:15px;stroke:var(--accent-bright)}
.fm{display:block;margin-top:5px;font-size:12px;color:var(--dark-ink-2);font-weight:500}
/* floating task cards */
.tcard{position:absolute;z-index:2;width:210px;background:var(--dark-3);border:1px solid var(--dark-line-2);
  border-radius:14px;padding:13px 14px;box-shadow:0 20px 44px rgba(0,0,0,.5);
  animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tcard.c1{left:-34px;bottom:-26px;animation-delay:-.5s}
.tcard.c2{right:-30px;bottom:34px;animation-delay:-2.4s}
.tcard .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.tcard .th b{font:700 12.5px 'Plus Jakarta Sans',sans-serif;color:#fff}
.tcard .th .dots{color:var(--dark-ink-2);letter-spacing:1px;font-size:12px}
.tcard p{font-size:11.5px;color:var(--dark-ink-2);line-height:1.45;margin-bottom:11px}
.tcard .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;
  font:600 10.5px 'Plus Jakarta Sans',sans-serif}
.badge svg{width:11px;height:11px}
.badge.gr{background:rgba(18,181,106,.16);color:var(--accent-bright)}
.badge.nt{background:rgba(255,255,255,.07);color:var(--dark-ink)}
.tcard .tm{font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.tcard .tm i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
@media(max-width:820px){.tcard{display:none}}

/* logo strip */
.strip{padding:44px 0;border-top:1px solid var(--dark-line)}
.strip p{text-align:center;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dark-ink-2);font-weight:600;margin-bottom:24px}
.strip .row{display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,54px);flex-wrap:wrap}
.strip .p{display:flex;align-items:center;gap:9px;color:var(--dark-ink-2);font:600 14.5px 'Plus Jakarta Sans',sans-serif;
  text-decoration:none;opacity:.72;transition:opacity .2s,color .2s}
.strip .p:hover{opacity:1;color:#fff}
.strip .p svg{width:19px;height:19px;flex:none}

/* section head */
.head{max-width:640px;margin-bottom:56px}
.head.ctr{text-align:center;margin-inline:auto}
.kicker{display:inline-block;font:700 12px 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);padding:6px 14px;border-radius:100px;margin-bottom:18px}
h2{font:800 clamp(27px,3.5vw,42px)/1.13 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;margin-bottom:14px}
.head p{color:var(--ink-2);font-size:16.5px;font-weight:450}

/* STORY */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story .lines{display:flex;flex-direction:column;gap:26px}
.story .ln{font:700 clamp(20px,2.4vw,29px)/1.28 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;
  color:#c9d4ce;transition:color .5s ease}
.story .ln.on{color:var(--ink)}
.story .ln .g{color:var(--accent)}
.story .ln small{display:block;font:450 14.5px/1.5 'Inter',sans-serif;color:var(--ink-3);margin-top:8px}
.story .visual{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);background:linear-gradient(160deg,#eef4f1,#e2ece7);min-height:380px}
.story .vcard{position:absolute;left:22px;right:22px;bottom:22px;background:var(--dark-2);border:1px solid var(--dark-line-2);
  border-radius:16px;padding:18px;color:#fff;box-shadow:0 20px 44px rgba(0,0,0,.34)}
.story .vcard .vh{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.story .vcard .vh .ava{width:40px;height:40px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.story .vcard .vh .ava svg{width:18px;height:18px;stroke:#fff}
.story .vcard .vh b{font:700 15px 'Plus Jakarta Sans',sans-serif;display:block}
.story .vcard .vh span{font-size:12px;color:var(--dark-ink-2)}
.story .vcard .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-ink-2);margin-bottom:9px;font-weight:600}
.story .vcard .chips{display:flex;gap:8px;flex-wrap:wrap}
.story .vcard .chip{background:rgba(255,255,255,.06);border:1px solid var(--dark-line);border-radius:9px;
  padding:8px 12px;font-size:12px;color:var(--dark-ink);flex:1;min-width:100px}
.story .vcard .chip b{display:block;font:700 13px 'Plus Jakarta Sans',sans-serif;color:#fff;margin-top:2px}
.story .badge-top{position:absolute;top:22px;left:22px;background:#fff;border:1px solid var(--line-2);
  border-radius:100px;padding:8px 14px;display:flex;align-items:center;gap:8px;font:600 12.5px 'Plus Jakarta Sans',sans-serif;
  color:var(--ink);box-shadow:var(--shadow)}
.story .badge-top svg{width:14px;height:14px}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:20px}
.card .ic svg{width:21px;height:21px;stroke:var(--accent-ink)}
.card h3{font:700 17px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:14px;line-height:1.6;font-weight:450}
.card a.more{display:inline-flex;align-items:center;gap:5px;margin-top:14px;color:var(--accent-ink);
  font:600 13.5px 'Plus Jakarta Sans',sans-serif;text-decoration:none}
.card a.more svg{width:13px;height:13px;transition:transform .2s}
.card:hover a.more svg{transform:translateX(3px)}

/* platform cards (hub) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;text-decoration:none;
  transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.pcard .pico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;background:var(--accent-soft)}
.pcard .pico svg{width:24px;height:24px}
.pcard h3{font:700 18.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.pcard p{color:var(--ink-2);font-size:14px;line-height:1.58;margin-bottom:16px;font-weight:450}
.pcard .go{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font:600 14px 'Plus Jakarta Sans',sans-serif}
.pcard .go svg{width:14px;height:14px;transition:transform .2s}
.pcard:hover .go svg{transform:translateX(4px)}

/* stats band */
.band{background:var(--dark);border-radius:24px;padding:clamp(40px,5vw,58px) clamp(28px,5vw,54px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;top:-60%;right:-8%;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,181,106,.24),transparent 64%)}
.band .s{position:relative;text-align:center}
.band .s b{display:block;font:800 clamp(28px,4vw,44px)/1 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.03em;margin-bottom:8px}
.band .s b .g{color:var(--accent-bright)}
.band .s span{color:var(--dark-ink-2);font-size:13px;font-weight:500}
@media(max-width:720px){.band{grid-template-columns:1fr 1fr;gap:30px 24px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#f5f8f6;border:1px solid var(--line);border-radius:18px;padding:32px 28px;transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step .n{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;
  font:800 15px 'Plus Jakarta Sans',sans-serif;color:var(--accent-ink);margin-bottom:20px}
.step h3{font:700 18px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:14.5px;font-weight:450}
.step p code{font:600 13px 'Plus Jakarta Sans',sans-serif;color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:6px}

/* faq */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.qa[open]{border-color:var(--line-2)}
.qa summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:700 15.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{width:22px;height:22px;flex:none;position:relative}
.qa summary .pl::before,.qa summary .pl::after{content:"";position:absolute;background:var(--accent);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .25s}
.qa summary .pl::before{width:12px;height:2px}.qa summary .pl::after{width:2px;height:12px}
.qa[open] summary .pl::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{padding:0 22px 20px;color:var(--ink-2);font-size:14.5px;line-height:1.65;font-weight:450}

/* cta */
.cta{background:linear-gradient(160deg,#11a862,#0a8048);border-radius:26px;text-align:center;
  padding:clamp(52px,7vw,80px) clamp(28px,5vw,56px);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-40%;left:-8%;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 62%)}
.cta::after{content:"";position:absolute;bottom:-50%;right:-6%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 62%)}
.cta h2{color:#fff;position:relative;margin-bottom:14px}
.cta p{color:rgba(255,255,255,.86);max-width:480px;margin:0 auto 34px;font-size:16.5px;position:relative;font-weight:450}
.cta .btn{position:relative}
.cta .handle{display:block;margin-top:22px;color:rgba(255,255,255,.82);font:500 13.5px 'Plus Jakarta Sans',sans-serif;position:relative}

/* footer */
footer{background:var(--dark);color:var(--dark-ink-2);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--dark-line)}
.foot-grid .brand{margin-bottom:16px}
.foot-about{font-size:14px;line-height:1.65;max-width:320px}
.foot-col h4{color:#fff;font:700 13px 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;color:var(--dark-ink-2);text-decoration:none;font-size:14px;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--accent-bright)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13px}
.foot-bottom a{color:var(--dark-ink);text-decoration:none;font-weight:500}
.foot-bottom a:hover{color:var(--accent-bright)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* platform page hero (smaller) */
.phero{padding:150px 0 80px;text-align:center;max-width:760px;margin:0 auto}
.phero h1{font:800 clamp(30px,4.5vw,52px)/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.035em;color:#fff;margin-bottom:18px}
.phero .lede{color:var(--dark-ink-2);font-size:clamp(15px,1.5vw,17.5px);margin-bottom:30px;font-weight:450}
.phero .hero-cta{justify-content:center;margin-bottom:0}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:48px;padding-top:126px}
  .story{grid-template-columns:1fr;gap:40px}
  .grid,.pgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media(max-width:600px){
  .grid,.pgrid{grid-template-columns:1fr}
  .mini-stats{flex-wrap:wrap;gap:16px}.mini-stats .s,.mini-stats .s+.s{padding:0;border:none}
  .foot-grid{grid-template-columns:1fr}
}
/* ===== v2 premium upgrades ===== */

/* aurora hero background */
.hero-shell{position:relative;overflow:hidden}
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 16s ease-in-out infinite}
.aurora i:nth-child(1){width:520px;height:520px;left:-8%;top:-18%;background:radial-gradient(circle,rgba(18,181,106,.5),transparent 65%)}
.aurora i:nth-child(2){width:460px;height:460px;right:-6%;top:6%;background:radial-gradient(circle,rgba(42,171,238,.32),transparent 65%);animation-delay:-5s}
.aurora i:nth-child(3){width:420px;height:420px;left:34%;bottom:-30%;background:radial-gradient(circle,rgba(55,229,138,.28),transparent 65%);animation-delay:-10s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,26px) scale(.94)}}
.gridlines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%)}
.hero{position:relative;z-index:1}

/* 3D tilt stage */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out}
.tilt .window{transform:translateZ(24px)}
.tilt .tcard.c1{transform:translateZ(56px)}
.tilt .tcard.c2{transform:translateZ(44px)}
.stage{perspective:1100px}

/* shimmer on primary buttons */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-80%}100%{left:160%}}

/* typing dots in chat */
.dots-typing{display:inline-flex;gap:4px;align-items:center}
.dots-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent-bright);opacity:.4;animation:blink 1.2s infinite}
.dots-typing i:nth-child(2){animation-delay:.2s}.dots-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1.1)}}

/* infinite marquee */
.marquee{padding:38px 0;border-top:1px solid var(--dark-line);overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--dark),transparent)}
.mq-track{display:flex;gap:0;width:max-content;animation:mq 26s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:10px;padding:10px 26px;margin-right:18px;border-radius:100px;
  border:1px solid var(--dark-line);background:rgba(255,255,255,.03);color:var(--dark-ink-2);
  font:600 14px 'Plus Jakarta Sans',sans-serif;white-space:nowrap;text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.mq-item:hover{color:#fff;border-color:var(--accent);background:rgba(18,181,106,.08)}
.mq-item svg{width:17px;height:17px;flex:none}

/* platform card colored glow */
.pcard{--pc:18,181,106}
.pcard::before{content:"";position:absolute;top:-40%;right:-30%;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--pc),.16),transparent 65%);opacity:0;transition:opacity .3s}
.pcard:hover::before{opacity:1}
.pcard:hover{border-color:rgba(var(--pc),.55)}

/* guide tabs */
.gtabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.gtab{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font:600 14px 'Plus Jakarta Sans',sans-serif;
  transition:all .22s}
.gtab svg{width:16px;height:16px}
.gtab:hover{border-color:var(--accent);color:var(--accent-ink)}
.gtab.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.gpanel{display:none;animation:gfade .45s ease}
.gpanel.on{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@keyframes gfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gsteps{display:flex;flex-direction:column;gap:0}
.gstep{display:flex;gap:18px;position:relative;padding-bottom:26px}
.gstep:last-child{padding-bottom:0}
.gstep::before{content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;background:var(--line-2)}
.gstep:last-child::before{display:none}
.gstep .gn{width:40px;height:40px;flex:none;border-radius:12px;background:var(--accent-soft);border:1px solid rgba(18,181,106,.25);
  display:grid;place-items:center;font:800 15px 'Plus Jakarta Sans',sans-serif;color:var(--accent-ink);position:relative;z-index:1}
.gstep h4{font:700 16.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;margin-bottom:4px;padding-top:7px}
.gstep p{color:var(--ink-2);font-size:14px;line-height:1.6;font-weight:450}
.gstep p code{font:600 12.5px 'Plus Jakarta Sans',sans-serif;color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:6px}
.gvisual{background:var(--dark);border-radius:20px;padding:26px;border:1px solid var(--dark-line-2);position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.gvisual::before{content:"";position:absolute;top:-40%;right:-20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(18,181,106,.22),transparent 62%)}
.gmsg{position:relative;border-radius:12px;padding:12px 15px;font-size:13.5px;line-height:1.5;color:var(--dark-ink)}
.gmsg.u{background:rgba(255,255,255,.06);border:1px solid var(--dark-line);margin-left:15%}
.gmsg.b{background:rgba(18,181,106,.12);border:1px solid rgba(18,181,106,.3);margin-right:15%}
.gmsg .who{display:block;font:700 10.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--dark-ink-2);margin-bottom:4px}
.gmsg b{color:#fff}
.gmsg .lnk{color:var(--accent-bright);font-weight:600;word-break:break-all}
.gcta{margin-top:34px;text-align:center}

/* ticker numbers glow */
.band .s b{text-shadow:0 0 34px rgba(55,229,138,.35)}

/* footer social row */
.foot-note{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 14px;border-radius:100px;
  background:rgba(18,181,106,.1);border:1px solid rgba(18,181,106,.25);color:var(--accent-bright);
  font:600 12px 'Plus Jakarta Sans',sans-serif}
.foot-note i{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(55,229,138,.5)}50%{box-shadow:0 0 0 6px rgba(55,229,138,0)}}

@media(max-width:960px){.gpanel.on{grid-template-columns:1fr;gap:34px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .line{opacity:1;transform:none}.bar i{width:100%}.tcard{animation:none}
  .story .ln{color:var(--ink)}
  .mq-track{animation:none}.tilt{transform:none!important}
}

/* ===================== v3 — advanced polish ===================== */

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  box-shadow:0 0 14px rgba(55,229,138,.8);transition:width .08s linear}

/* nav: glass + scrolled state */
nav{transition:background .35s,box-shadow .35s,border-color .35s}
nav.scrolled{background:rgba(8,13,11,.94);box-shadow:0 12px 36px rgba(0,0,0,.4);border-color:rgba(255,255,255,.14)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;border-radius:2px;
  background:var(--accent-bright);transition:width .28s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}

/* mobile hamburger + menu */
.nav-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--dark-line-2);
  background:rgba(255,255,255,.05);cursor:pointer;place-items:center;gap:0;flex-direction:column;padding:0}
.nav-burger span{display:block;width:16px;height:2px;border-radius:2px;background:#fff;margin:2.5px 0;
  transition:transform .3s,opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;top:58px;left:12px;right:12px;z-index:99;background:rgba(10,16,13,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--dark-line-2);border-radius:18px;padding:10px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav a{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;text-decoration:none;
  color:var(--dark-ink);font:600 15px 'Plus Jakarta Sans',sans-serif;transition:background .2s,color .2s}
.mnav a:hover{background:rgba(18,181,106,.12);color:var(--accent-bright)}
.mnav a svg{width:17px;height:17px;flex:none}
@media(max-width:960px){.nav-burger{display:grid}}

/* hero headline: word stagger + animated gradient */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(30px);filter:blur(8px);
  animation:wup .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wup{to{opacity:1;transform:none;filter:none}}
.hero h1 .gb{background:linear-gradient(90deg,#37e58a 0%,#8ff5be 25%,#2fd9a0 50%,#37e58a 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:wup .8s cubic-bezier(.22,1,.36,1) forwards,gradshift 5s linear 1s infinite}
@keyframes gradshift{to{background-position:250% 0}}
.hero .lede,.hero .hero-cta,.hero .mini-stats,.hero .eyebrow-d{opacity:0;animation:fadeup .9s cubic-bezier(.22,1,.36,1) forwards}
.hero .eyebrow-d{animation-delay:.05s}
.hero .lede{animation-delay:.45s}
.hero .hero-cta{animation-delay:.6s}
.hero .mini-stats{animation-delay:.75s}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.stage{opacity:0;animation:stagein 1s .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes stagein{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}

/* smoother reveal system: blur-in + stagger (delay set by JS) */
.rv{opacity:0;transform:translateY(30px);filter:blur(10px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none;filter:none}

/* section heads: accent underline sweep */
.head h2{position:relative;display:inline-block}
.head h2::after{content:"";position:absolute;left:0;bottom:-6px;height:4px;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  transition:width 1s .3s cubic-bezier(.22,1,.36,1)}
.head.rv.in h2::after{width:56px}
.head.ctr h2::after{left:50%;transform:translateX(-50%)}

/* gradient-border hover on cards */
.pcard,.card,.step{position:relative;background-clip:padding-box}
.pcard::after,.card::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,rgba(18,181,106,.65),rgba(55,229,138,.15),rgba(42,171,238,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none}
.pcard:hover::after,.card:hover::after,.step:hover::after{opacity:1}

/* icon micro-bounce */
.pcard:hover .pico,.card:hover .ic{animation:icopop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes icopop{0%{transform:scale(1)}45%{transform:scale(1.14) rotate(-4deg)}100%{transform:scale(1)}}

/* buttons: springy press + magnetic (JS) */
.btn{will-change:transform}
.btn:active{transform:scale(.96)!important}
.btn-primary:hover{box-shadow:0 12px 34px rgba(18,181,106,.5),0 0 0 5px rgba(18,181,106,.14)}

/* reviews marquee */
.reviews{overflow:hidden;position:relative;display:flex;flex-direction:column;gap:18px}
.reviews::before,.reviews::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.reviews::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)}
.reviews::after{right:0;background:linear-gradient(-90deg,var(--dark),transparent)}
.rrow{display:flex;width:max-content;gap:18px;animation:mq 38s linear infinite}
.rrow.rev{animation-direction:reverse;animation-duration:44s}
.reviews:hover .rrow{animation-play-state:paused}
.rcard{width:310px;flex:none;background:var(--dark-3);border:1px solid var(--dark-line-2);border-radius:16px;padding:20px 22px}
.rcard .stars{color:#ffc53d;font-size:13px;letter-spacing:2px;margin-bottom:10px}
.rcard p{font-size:13.5px;line-height:1.6;color:var(--dark-ink);margin-bottom:14px;font-weight:450}
.rcard .rby{display:flex;align-items:center;gap:10px}
.rcard .rby .ra{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:700 12px 'Plus Jakarta Sans',sans-serif;color:#fff}
.rcard .rby b{display:block;font:700 13px 'Plus Jakarta Sans',sans-serif;color:#fff}
.rcard .rby span{font-size:11.5px;color:var(--dark-ink-2)}

/* faq: smooth open + hover */
.qa{transition:border-color .25s,box-shadow .25s,transform .25s}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.qa[open]{box-shadow:var(--shadow);border-color:rgba(18,181,106,.4)}
.qa .ans{animation:ansin .4s cubic-bezier(.22,1,.36,1)}
@keyframes ansin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qa summary{transition:color .2s}
.qa[open] summary{color:var(--accent-ink)}

/* back to top */
.top-btn{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(18,181,106,.45);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s}
.top-btn.show{opacity:1;transform:none;pointer-events:auto}
.top-btn:hover{background:var(--accent-ink)}
.top-btn svg{width:18px;height:18px;stroke:#fff}

/* band: shine sweep */
.band{isolation:isolate}
.band::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.05),transparent);
  transform:skewX(-18deg);animation:bandsheen 5.5s ease-in-out infinite}
@keyframes bandsheen{0%,55%{left:-60%}100%{left:150%}}

/* cta: floating orbs */
.cta .orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:orb 7s ease-in-out infinite}
.cta .orb.o1{width:14px;height:14px;left:12%;top:26%}
.cta .orb.o2{width:9px;height:9px;right:16%;top:36%;animation-delay:-2.4s}
.cta .orb.o3{width:11px;height:11px;left:26%;bottom:22%;animation-delay:-4.2s}
@keyframes orb{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none}
  .hero .lede,.hero .hero-cta,.hero .mini-stats,.hero .eyebrow-d,.stage{opacity:1;animation:none}
  .hero h1 .w{opacity:1;transform:none;filter:none;animation:none}
  .rrow{animation:none}
}

/* ===================== v4 — performance (smoothness fix) ===================== */

/* reveals: no blur filter (GPU heavy) — pure transform+opacity, faster curve */
.rv{filter:none!important;transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.rv.in{transform:none}

/* hero words: no blur */
.hero h1 .w{filter:none;transform:translateY(24px)}
@keyframes wup{to{opacity:1;transform:none}}

/* aurora: drop the 90px blur filter entirely — use soft gradients instead */
.aurora i{filter:none;will-change:transform;animation-duration:22s}
.aurora i:nth-child(1){background:radial-gradient(circle,rgba(18,181,106,.30) 0%,rgba(18,181,106,.12) 40%,transparent 70%)}
.aurora i:nth-child(2){background:radial-gradient(circle,rgba(42,171,238,.20) 0%,rgba(42,171,238,.08) 40%,transparent 70%)}
.aurora i:nth-child(3){background:radial-gradient(circle,rgba(55,229,138,.18) 0%,rgba(55,229,138,.07) 40%,transparent 70%)}

/* nav: lighter backdrop blur */
nav{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.mnav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* progress bar: no transition (rAF drives it) */
.progress{transition:none}

/* tilt: JS lerp drives it — no CSS transition fighting */
.tilt{transition:none}

/* marquees: GPU layer */
.mq-track,.rrow{will-change:transform;transform:translateZ(0)}

/* drop the band sheen sweep (constant repaint over big area) */
.band::after{display:none}

/* lighter shadows on floating cards */
.tcard{box-shadow:0 12px 28px rgba(0,0,0,.35)}
.rcard{box-shadow:none}

/* stage glow: static layer */
.stage::before{will-change:auto;transform:translateZ(0)}

/* head underline: shorter delay */
.head h2::after{transition:width .7s .15s cubic-bezier(.22,1,.36,1)}