/* Altrix.one marketing site. Night theme, violet → mint → sun.
   Vanilla CSS. Motion uses transform/opacity; offscreen loops pause (.scope:not(.on)).
   Everything is visible without JS (.js gates hidden start states). */

/* ---------- tokens ---------- */
:root{
  --night:#0A0720; --night-2:#100B2B; --night-3:#171038; --ink:#16122E;
  --violet:#5B2EFF; --v2:#7C5CFF; --vl:#B4A2FF; --mint:#00B89C; --mint2:#2FE0C2; --wm-mint:#4FE3C7;
  --sun:#FFB020; --sun2:#FFD27A; --wm-sun:#FFC14D; --coral:#FF5A5F; --sky:#2E8BFF; --pink:#E14FD0; --wa:#25D366;
  --white:#fff; --soft:#DCD8F4; --mute:#A9A3CF; --dim:#7F79A8;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  --glass-solid:#130E31;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --f-head:Sora, Inter, "Segoe UI", system-ui, sans-serif;
  --f-body:Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-emo:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.65,0,.35,1);
  --hdr:68px;
  --g-brand:linear-gradient(110deg,#B4A2FF 0%,#7C5CFF 30%,#2FE0C2 62%,#FFD27A 100%);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
*{ margin:0; padding:0 }
html{ background:var(--night); -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 64px) }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }
body{ background:var(--night); color:var(--soft); font:400 16px/1.65 var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; overflow-x:clip }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select{ font:inherit; color:inherit }
ul,ol{ list-style:none }
h1,h2,h3,h4{ font-family:var(--f-head); color:var(--white); line-height:1.1; letter-spacing:-.025em; font-weight:800 }
b,strong{ color:var(--white); font-weight:700 }
::selection{ background:rgba(124,92,255,.55); color:#fff }
:focus-visible{ outline:2px solid var(--mint2); outline-offset:3px; border-radius:8px }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:fixed; left:12px; top:-60px; z-index:200; background:#fff; color:var(--ink); padding:10px 16px; border-radius:10px; font-weight:700 }
.skip:focus{ top:12px }
.emo{ font-family:var(--f-emo); font-style:normal; line-height:1; display:inline-block }
.wrap{ width:min(1240px,100% - 32px); margin-inline:auto; position:relative }
main{ display:block }
.center{ text-align:center }

/* ---------- type ---------- */
.h-hero{ font-size:clamp(40px,5.6vw,80px); line-height:1.0; letter-spacing:-.045em }
h1{ font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:-.04em }
h2{ font-size:clamp(31px,4.6vw,58px); line-height:1.04; letter-spacing:-.035em }
h3{ font-size:20px; letter-spacing:-.015em; line-height:1.2 }
.lead{ font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--soft); max-width:60ch }
.grad,.hl,.hl-d{ background:var(--g-brand); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-bottom:.06em }
.grad{ animation:gradShift 7s ease-in-out infinite alternate }
@keyframes gradShift{ from{ background-position:0% 50% } to{ background-position:100% 50% } }
.kicker{ display:inline-flex; align-items:center; gap:10px; font:700 12.5px/1 var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:var(--sun) }
.kicker .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(255,176,32,.16), 0 0 18px rgba(255,176,32,.7) }
.top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px }
.center .top,.top.center{ justify-content:center }
.lvl{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 7px; border-radius:99px; background:rgba(255,255,255,.06); border:1px solid var(--line-2); font:800 10.5px/1 var(--f-head); letter-spacing:.14em; color:var(--sun) }
.lvl .trk{ width:46px; height:6px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden }
.lvl .trk i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FFD25A,#FF8A00); transform-origin:left }
.muted{ color:var(--mute) }
.note{ font-size:13.5px; color:var(--mute) }
.sample{ font-size:12px; color:var(--dim); margin-top:14px }

/* badges */
.soon,.beta,.tag-ent{ display:inline-flex; align-items:center; gap:4px; font:800 9.5px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; padding:5px 8px; border-radius:99px; white-space:nowrap; vertical-align:middle; margin-left:8px }
.soon{ color:#063F36; background:linear-gradient(90deg,#7FF0DA,#2FE0C2) }
.beta{ color:#4A2C00; background:linear-gradient(90deg,#FFE3A6,#FFC14D) }
.tag-ent{ color:#fff; background:linear-gradient(90deg,#5B2EFF,#8E2DE2) }

/* ---------- buttons ---------- */
.btns{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.btns.center{ justify-content:center }
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:99px; font:700 15.5px/1 var(--f-head); letter-spacing:-.005em; white-space:nowrap; cursor:pointer; border:0; isolation:isolate; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s; will-change:transform }
.btn .emo{ font-size:17px }
.btn-sm{ height:42px; padding:0 18px; font-size:14px }
.btn-pri{ color:#fff; background:linear-gradient(120deg,#5B2EFF 0%,#7C5CFF 55%,#5B2EFF 100%); box-shadow:0 10px 30px -8px rgba(91,46,255,.75), inset 0 1px 0 rgba(255,255,255,.28) }
.btn-pri::before,.btn-sun::before,.btn-wa::before{ content:""; position:absolute; inset:0 auto 0 0; width:60%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-130%) skewX(-18deg); transition:transform .8s var(--ease) }
.btn:hover::before{ transform:translateX(230%) skewX(-18deg) }
.btn-pri:hover{ box-shadow:0 16px 40px -8px rgba(124,92,255,.9), inset 0 1px 0 rgba(255,255,255,.3) }
.btn-ghost{ color:#fff; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--line-2) }
.btn-ghost:hover{ background:rgba(255,255,255,.12) }
.btn-sun{ color:#1B1046; background:linear-gradient(120deg,#FFD25A,#FFB020 55%,#FF9A1F); box-shadow:0 10px 30px -10px rgba(255,176,32,.8), inset 0 1px 0 rgba(255,255,255,.5) }
.btn-wa{ color:#062A16; background:linear-gradient(120deg,#5CF08F,#25D366 60%,#1DB954); box-shadow:0 10px 28px -10px rgba(37,211,102,.8), inset 0 1px 0 rgba(255,255,255,.45) }
.btn-light{ color:var(--ink); background:#fff }
.btn .arr{ transition:transform .35s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }
.wa-ic{ width:20px; height:20px; flex:none }
.link{ display:inline-flex; align-items:center; gap:6px; font:700 14.5px var(--f-head); color:var(--wm-mint) }
.link:hover{ color:#fff }

/* ---------- header ---------- */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hdr); transition:transform .45s var(--ease) }
.hdr::before{ content:""; position:absolute; inset:0; background:rgba(10,7,32,.55); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid transparent; opacity:0; transition:opacity .4s, border-color .4s }
.hdr.solid::before,html:not(.js) .hdr::before{ opacity:1; border-bottom-color:var(--line) }
.hdr-in{ position:relative; height:100%; display:flex; align-items:center; gap:24px }
.wm{ display:inline-flex; flex-direction:column; gap:4px; line-height:1; flex:none }
.wm-t{ font:800 23px/1 var(--f-head); letter-spacing:-.02em; color:#fff; white-space:nowrap }
.wm-t b{ color:var(--wm-mint); font-weight:800 }
.wm-tag{ font:700 8.5px/1 var(--f-head); letter-spacing:.46em; color:var(--wm-sun); white-space:nowrap; padding-left:1px }
.nav{ display:none; gap:4px; margin-left:auto }
.nav a{ position:relative; padding:9px 13px; border-radius:99px; font:600 14.5px/1 var(--f-body); color:var(--soft); transition:color .25s, background-color .25s }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06) }
.nav a[aria-current="page"]{ color:#fff }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px; background:var(--g-brand) }
.hdr-cta{ display:flex; align-items:center; gap:10px; margin-left:auto }
.hdr-cta .hide-sm{ display:none }
.progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none }
.progress i{ display:block; height:100%; background:var(--g-brand); transform-origin:0 50%; transform:scaleX(var(--sp,0)) }

/* mobile menu (details: works without JS) */
.mnav{ position:static }
.mnav summary{ list-style:none; position:relative; z-index:3; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer }
.mnav summary::-webkit-details-marker{ display:none }
.burger{ position:relative; width:20px; height:12px }
.burger i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:#fff; transition:transform .45s var(--ease), top .45s var(--ease) }
.burger i:first-child{ top:0 } .burger i:last-child{ top:10px }
.mnav[open] .burger i:first-child{ top:5px; transform:rotate(45deg) }
.mnav[open] .burger i:last-child{ top:5px; transform:rotate(-45deg) }
.mnav-panel{ position:fixed; inset:0; z-index:2; padding:calc(var(--hdr) + 20px) 22px 28px; display:flex; flex-direction:column; background:radial-gradient(120% 70% at 100% 0%,rgba(91,46,255,.45),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(0,184,156,.32),transparent 60%),var(--night); overflow-y:auto; overscroll-behavior:contain }
.mnav[open] .mnav-panel{ animation:menuIn .5s var(--ease) both }
@keyframes menuIn{ from{ opacity:0 } to{ opacity:1 } }
.mnav-panel nav{ display:flex; flex-direction:column; margin-top:6px }
.mnav-panel nav a{ display:flex; align-items:baseline; gap:14px; padding:12px 2px; font:800 clamp(30px,8.5vw,42px)/1.1 var(--f-head); letter-spacing:-.03em; color:#fff; border-bottom:1px solid var(--line) }
.mnav-panel nav a small{ font:700 12px var(--f-body); letter-spacing:.12em; color:var(--sun); min-width:24px }
.mnav-panel nav a[aria-current="page"]{ color:var(--wm-mint) }
.mnav[open] .mnav-panel nav a,.mnav[open] .mnav-foot{ animation:menuLink .7s var(--ease) both }
.mnav[open] .mnav-panel nav a:nth-child(2){ animation-delay:.04s } .mnav[open] .mnav-panel nav a:nth-child(3){ animation-delay:.08s }
.mnav[open] .mnav-panel nav a:nth-child(4){ animation-delay:.12s } .mnav[open] .mnav-panel nav a:nth-child(5){ animation-delay:.16s }
.mnav[open] .mnav-panel nav a:nth-child(6){ animation-delay:.2s } .mnav[open] .mnav-panel nav a:nth-child(7){ animation-delay:.24s }
.mnav[open] .mnav-foot{ animation-delay:.28s }
@keyframes menuLink{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1; transform:none } }
.mnav-foot{ margin-top:auto; padding-top:26px; display:grid; gap:12px }
.mnav-foot .btn{ width:100% }
.mnav-foot .note{ text-align:center }
html.menu-open{ overflow:hidden }

/* sticky mobile CTA bar */
.mbar{ position:fixed; z-index:55; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; gap:10px; padding:8px; border-radius:22px; background:rgba(16,11,43,.82); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); box-shadow:0 18px 40px -12px rgba(0,0,0,.7), inset 0 0 0 1px var(--line-2); transition:transform .5s var(--ease), opacity .4s }
.mbar .btn{ height:50px }
.mbar .btn-pri{ flex:1; padding:0 14px }
.mbar .btn-wa{ width:50px; padding:0; flex:none }
.mbar .btn-wa .wa-ic{ width:24px; height:24px }
/* floating WhatsApp button (desktop; phones use .mbar) */
.wa-fab{ display:none; position:fixed; z-index:56; right:24px; bottom:24px; align-items:center; gap:10px; height:56px; padding:0 20px 0 16px; border-radius:999px; font-weight:700; color:#062A16; background:linear-gradient(120deg,#5CF08F,#25D366 60%,#1DB954); box-shadow:0 14px 34px -10px rgba(37,211,102,.85), inset 0 1px 0 rgba(255,255,255,.45); text-decoration:none; transition:transform .35s var(--ease), box-shadow .35s }
.wa-fab .wa-ic{ width:26px; height:26px }
.wa-fab:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(37,211,102,.95) }
.wa-fab:focus-visible{ outline:3px solid #fff; outline-offset:3px }
html.menu-open .wa-fab{ display:none }
.js .mbar{ animation:barIn .8s var(--ease) .6s both }
@keyframes barIn{ from{ transform:translateY(140%) } to{ transform:none } }
html.menu-open .mbar,.mbar.away{ transform:translateY(140%); opacity:0; pointer-events:none }

/* ---------- backgrounds ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.aurora i{ position:absolute; border-radius:50%; will-change:transform }
.aurora .a1{ width:min(900px,140vw); aspect-ratio:1; right:-22%; top:-38%; background:radial-gradient(circle at 40% 40%,rgba(124,92,255,.85),rgba(91,46,255,.25) 40%,transparent 68%); animation:drift1 22s ease-in-out infinite alternate }
.aurora .a2{ width:min(760px,130vw); aspect-ratio:1; left:-26%; bottom:-40%; background:radial-gradient(circle,rgba(0,184,156,.6),rgba(0,184,156,.16) 42%,transparent 68%); animation:drift2 26s ease-in-out infinite alternate }
.aurora .a3{ width:min(520px,100vw); aspect-ratio:1; right:12%; bottom:-30%; background:radial-gradient(circle,rgba(255,176,32,.42),rgba(255,176,32,.1) 45%,transparent 68%); animation:drift3 18s ease-in-out infinite alternate }
.aurora .a4{ width:min(560px,100vw); aspect-ratio:1; left:18%; top:-34%; background:radial-gradient(circle,rgba(225,79,208,.28),transparent 66%); animation:drift2 30s ease-in-out infinite alternate-reverse }
@keyframes drift1{ 0%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(-8%,10%,0) scale(1.12) } 100%{ transform:translate3d(-14%,4%,0) scale(.94) } }
@keyframes drift2{ 0%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(12%,-8%,0) scale(1.1) } 100%{ transform:translate3d(6%,-14%,0) scale(.95) } }
@keyframes drift3{ 0%{ transform:translate3d(0,0,0) scale(.9) } 100%{ transform:translate3d(-20%,-16%,0) scale(1.15) } }
.gridlines{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 75%) }
.noise{ position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 85% 20%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 10% 70%,rgba(255,255,255,.35),transparent); }

/* ---------- reveal ---------- */
.js .rv{ opacity:0; transform:translate3d(0,26px,0) }
.js .rv.rv-l{ transform:translate3d(-30px,0,0) } .js .rv.rv-r{ transform:translate3d(30px,0,0) } .js .rv.rv-s{ transform:scale(.94) }
.js .rv.in{ opacity:1; transform:none; transition:opacity var(--m-epic) var(--e-out) var(--d,0s), transform calc(var(--m-epic) + var(--m-instant)) var(--e-out) var(--d,0s) }
/* loops only run while their section is on screen */
.js .scope:not(.on) *,.js .scope:not(.on)::before,.js .scope:not(.on)::after{ animation-play-state:paused!important }

/* ---------- sections ---------- */
.sec{ position:relative; padding:clamp(64px,8vw,112px) 0; overflow-x:clip }
.sec-tight{ padding-top:clamp(40px,5vw,64px) }
.sec + .sec::before{ content:""; position:absolute; top:0; left:50%; width:min(900px,90%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(124,92,255,.5),rgba(47,224,194,.45),transparent) }
.sec.alt{ background:radial-gradient(70% 50% at 50% 0%,rgba(91,46,255,.12),transparent 70%),var(--night-2) }
.sec-hd{ max-width:820px; margin-bottom:clamp(36px,5vw,60px) }
.sec-hd.center{ margin-inline:auto; text-align:center }
.sec-hd.center .lead{ margin-inline:auto }
.sec-hd h2{ margin-bottom:16px }
.mt{ margin-top:28px } .mt-l{ margin-top:clamp(40px,5vw,64px) } .mt-s{ margin-top:14px }

/* glass card */
.card{ position:relative; border-radius:var(--r-lg); padding:26px; background:var(--glass); border:1px solid var(--line); overflow:hidden; transition:transform .5s var(--ease), border-color .4s }
.card h3{ margin:16px 0 8px }
.card p{ color:var(--mute); font-size:15px }
.card:hover{ border-color:var(--line-2) }
.tile{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:26px; background:linear-gradient(145deg,var(--a,#4B22F0),var(--b,#8B6CFF)); box-shadow:0 12px 26px -10px var(--a,#4B22F0), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12); flex:none }
.tile.lg{ width:72px; height:72px; border-radius:22px; font-size:36px }
.tile.xl{ width:110px; height:110px; border-radius:32px; font-size:56px }
/* spotlight (pointer-follow glow, transform only) */
.spot{ position:absolute; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(124,92,255,.28),rgba(47,224,194,.08) 40%,transparent 65%); opacity:0; transform:translate3d(var(--mx,50%),var(--my,50%),0); transition:opacity .4s; z-index:0 }
.sp:hover .spot{ opacity:1 }
.sp > *:not(.spot){ position:relative; z-index:1 }

/* palette per module / accent */
.m1,.mm{ --a:#00A88E; --b:#1FD1A9 } .m2,.mv{ --a:#4B22F0; --b:#8B6CFF } .m3,.mp{ --a:#8E2DE2; --b:#E14FD0 }
.m4,.ms{ --a:#FF8A00; --b:#FFC13B } .m5,.mk{ --a:#1F6FFF; --b:#4FB3FF } .m6,.mc{ --a:#F0424F; --b:#FF8A65 }
.m7{ --a:#0EA5A0; --b:#5B8CFF } .m8{ --a:#5B2EFF; --b:#00B89C } .m9{ --a:#3B2BB5; --b:#7C5CFF }
.mig{ --a:#DD2A7B; --b:#F58529 } .mcc{ --a:#FF8A00; --b:#F0424F } .mw{ --a:#25D366; --b:#0EA5A0 }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:99px; font:600 13.5px/1.2 var(--f-body); color:var(--soft); background:rgba(255,255,255,.06); border:1px solid var(--line-2); white-space:nowrap }
.chip .emo{ font-size:14px }
.chip-sun{ color:#1B1046; background:linear-gradient(90deg,#FFD25A,#FFB020); border-color:transparent; font-weight:700 }

/* ---------- HERO (home) ---------- */
.hero{ position:relative; padding:calc(var(--hdr) + 18px) 0 40px; overflow:clip; isolation:isolate; min-height:min(100svh,940px) }
.hero .aurora,.hero .gridlines{ z-index:-1 }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(transparent,var(--night)); z-index:-1; pointer-events:none }
.hero-in{ display:grid; gap:40px; align-items:center }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:99px; background:rgba(255,255,255,.06); border:1px solid var(--line-2); font:600 13px/1.3 var(--f-body); color:var(--soft); margin-bottom:24px; max-width:100%; transition:background-color .3s }
.eyebrow:hover{ background:rgba(255,255,255,.1) }
.eyebrow b{ display:inline-flex; padding:5px 9px; border-radius:99px; font:800 11px/1 var(--f-head); letter-spacing:.06em; color:#1B1046; background:linear-gradient(90deg,#FFD25A,#FFB020); white-space:nowrap }
.eyebrow .arr{ color:var(--wm-mint) }
.pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--mint2); flex:none }
.pulse::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--mint2); animation:ping 2s var(--ease) infinite }
@keyframes ping{ from{ transform:scale(.4); opacity:1 } to{ transform:scale(1.8); opacity:0 } }
.h-hero{ margin-bottom:24px }
.wd{ display:inline-block; vertical-align:top }
.wd > span{ display:inline-block; animation:wordUp 1.1s var(--ease) both }
@keyframes wordUp{ from{ opacity:0; transform:translate3d(0,.5em,0) rotate(2deg) } to{ opacity:1; transform:none } }
.d1>span{ animation-delay:.05s }.d2>span{ animation-delay:.12s }.d3>span{ animation-delay:.19s }.d4>span{ animation-delay:.26s }.d5>span{ animation-delay:.33s }.d6>span{ animation-delay:.4s }.d7>span{ animation-delay:.47s }.d8>span{ animation-delay:.54s }.d9>span{ animation-delay:.61s }.d10>span{ animation-delay:.68s }
.fade-up{ animation:fadeUp 1s var(--ease) both }
.fu1{ animation-delay:.45s } .fu2{ animation-delay:.6s } .fu3{ animation-delay:.75s } .fu4{ animation-delay:.9s }
@keyframes fadeUp{ from{ opacity:0; transform:translate3d(0,22px,0) } to{ opacity:1; transform:none } }
.hero .lead{ margin-bottom:30px }
.hero-facts{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:28px; font:600 13.5px var(--f-body); color:var(--mute) }
.hero-facts li{ display:inline-flex; align-items:center; gap:7px }
.hero-facts li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--mint2); box-shadow:0 0 10px var(--mint2) }

/* stage / mockups */
.stage{ position:relative; height:540px; perspective:1400px; animation:fadeUp 1.2s var(--ease) .3s both }
.stage-in{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .9s var(--ease) }
.layer{ position:absolute; transform:translate3d(calc(var(--px,0) * var(--z,0) * 1px),calc(var(--py,0) * var(--z,0) * 1px),0); transition:transform .9s var(--ease) }
.flt{ animation:float 7s ease-in-out infinite }
.flt.f2{ animation-duration:8.5s; animation-delay:-2s } .flt.f3{ animation-duration:6s; animation-delay:-4s } .flt.f4{ animation-duration:9s; animation-delay:-1s }
@keyframes float{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-10px,0) } }
.ring{ position:absolute; left:50%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; background:conic-gradient(from 0deg,rgba(124,92,255,0),rgba(124,92,255,.55),rgba(47,224,194,.5),rgba(255,176,32,.35),rgba(124,92,255,0)); -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 71%,#000 72%,transparent 73%); mask:radial-gradient(closest-side,transparent 70%,#000 71%,#000 72%,transparent 73%); animation:spin 24s linear infinite; opacity:.8 }
.halo{ position:absolute; left:50%; top:52%; width:440px; height:440px; margin:-220px 0 0 -220px; border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,.45),rgba(47,224,194,.12) 45%,transparent 70%) }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* desktop window */
.l-win{ display:none; left:0; top:36px; width:560px }
.win{ border-radius:20px; background:linear-gradient(180deg,rgba(30,22,72,.92),rgba(17,12,46,.94)); border:1px solid var(--line-2); box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden }
.win-bar{ display:flex; align-items:center; gap:12px; height:40px; padding:0 14px; border-bottom:1px solid var(--line); font:600 12px var(--f-body); color:var(--mute) }
.win-bar .dots{ display:flex; gap:6px } .win-bar .dots i{ width:10px; height:10px; border-radius:50%; background:#FF5F57 } .win-bar .dots i:nth-child(2){ background:#FEBC2E } .win-bar .dots i:nth-child(3){ background:#28C840 }
.win-bar .win-t{ flex:1; text-align:center }
.live{ display:inline-flex; align-items:center; gap:6px; font:700 10.5px var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--mint2) }
.live i{ width:7px; height:7px; border-radius:50%; background:var(--mint2); animation:blink 1.6s ease-in-out infinite }
@keyframes blink{ 50%{ opacity:.25 } }
.win-body{ display:grid; grid-template-columns:52px 196px 1fr; height:350px }
.win-side{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0; border-right:1px solid var(--line); background:rgba(0,0,0,.15) }
.win-side span{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:16px }
.win-side span.on{ background:linear-gradient(145deg,#4B22F0,#8B6CFF); box-shadow:0 6px 16px -6px #5B2EFF }
.win-list{ border-right:1px solid var(--line); padding:8px; overflow:hidden }
.win-list .lh{ font:700 10px var(--f-body); letter-spacing:.14em; color:var(--dim); padding:4px 6px 8px }
.rc{ display:grid; grid-template-columns:30px 1fr; gap:4px 8px; align-items:center; height:58px; padding:8px; border-radius:12px; transition:transform .7s var(--ease), opacity .6s, background-color .4s }
.rc.on{ background:rgba(124,92,255,.16); box-shadow:inset 0 0 0 1px rgba(124,92,255,.35) }
.av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:800 12px var(--f-head); color:#fff; grid-row:span 2; background:linear-gradient(135deg,var(--a,#5B2EFF),var(--b,#8B6CFF)) }
.rc b{ font:700 12.5px/1.1 var(--f-head); display:flex; justify-content:space-between; gap:6px }
.rc b em{ font:600 9.5px var(--f-body); font-style:normal; color:var(--dim) }
.rc small{ font-size:11px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block }
.win-thread{ display:flex; flex-direction:column; min-width:0; background:radial-gradient(80% 60% at 70% 20%,rgba(47,224,194,.06),transparent),rgba(0,0,0,.08) }
.th-hd{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line) }
.th-hd .av{ grid-row:auto }
.th-hd b{ display:block; font:700 13px/1.2 var(--f-head) }
.th-hd small{ display:block; font-size:10.5px; color:var(--mint2) }
.th-msgs{ flex:1; padding:12px; display:flex; flex-direction:column; gap:9px; overflow:hidden }
.bub{ max-width:86%; padding:8px 11px 6px; border-radius:14px; font-size:12px; line-height:1.4; color:#fff; transition:opacity .5s var(--ease), transform .6s var(--ease) }
.bub time{ display:block; text-align:right; font-size:9px; color:rgba(255,255,255,.55); margin-top:2px }
.bub.in{ align-self:flex-start; background:rgba(255,255,255,.1); border-top-left-radius:4px }
.bub.out{ align-self:flex-end; background:linear-gradient(135deg,#0E7C66,#0BA383); border-top-right-radius:4px }
.ai-box{ align-self:flex-end; max-width:92%; padding:9px 11px; border-radius:14px; background:linear-gradient(135deg,rgba(91,46,255,.28),rgba(225,79,208,.16)); border:1px solid rgba(180,162,255,.4); transition:opacity .5s var(--ease), transform .6s var(--ease) }
.ai-tag{ display:block; font:700 9.5px var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--vl); margin-bottom:4px }
.ai-text{ font-size:12px; line-height:1.45; color:#fff; min-height:1.45em }
.caret{ display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-2px; background:var(--mint2); animation:blink .8s steps(2) infinite }
.th-in{ margin:0 12px 12px; height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 12px; border-radius:99px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-size:11px; color:var(--dim) }
.th-in i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; color:#062A16; background:var(--wa) }

/* phone */
.l-phone{ left:50%; top:10px; width:236px; margin-left:-118px; height:480px }
.phone{ height:100%; border-radius:40px; padding:9px; background:linear-gradient(160deg,#2A2160,#0E0A26 60%); box-shadow:0 50px 90px -30px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.6) }
.ph-scr{ position:relative; height:100%; border-radius:32px; overflow:hidden; background:radial-gradient(120% 60% at 50% 0%,rgba(91,46,255,.35),transparent 60%),#0D0926; padding:34px 12px 12px; display:flex; flex-direction:column; gap:10px }
.ph-notch{ position:absolute; left:50%; top:16px; width:74px; height:20px; margin-left:-37px; border-radius:99px; background:#000; z-index:3 }
.ph-hd{ display:flex; align-items:center; justify-content:space-between }
.ph-hd b{ font:800 15px var(--f-head) }
.ph-hd small{ font:700 9px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim) }
.kb{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; height:132px }
.kb-col{ border-radius:12px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.12); padding:6px; font:700 9px var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); text-align:center }
.kb-col:nth-child(3){ color:var(--mint2) }
.kb-card{ position:absolute; left:0; top:24px; width:calc((100% - 12px) / 3); padding:7px 6px; border-radius:10px; background:linear-gradient(160deg,#fff,#EEEAFF); color:var(--ink); box-shadow:0 10px 20px -8px rgba(0,0,0,.6); transition:transform 1s var(--ease) }
.kb-card b{ display:block; font:800 10px/1.15 var(--f-head); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kb-card small{ display:block; font-size:8.5px; color:#4A4568; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kb-st{ display:inline-block; margin-top:5px; font:800 7.5px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; padding:3px 5px; border-radius:99px; color:#fff; background:#5B2EFF; transition:background-color .5s }
.kb-card.c1{ transform:translateX(calc(100% + 6px)) } .kb-card.c1 .kb-st{ background:#FF8A00 }
.kb-card.c2{ transform:translateX(calc(200% + 12px)) } .kb-card.c2 .kb-st{ background:#00A88E }
.kb-ghost{ position:absolute; left:0; top:84px; width:calc((100% - 12px) / 3); height:38px; border-radius:10px; background:rgba(255,255,255,.08) }
.kb-ghost.g2{ left:calc((100% - 12px) / 3 + 6px); top:24px; height:50px }
.earn{ border-radius:16px; padding:11px; background:linear-gradient(150deg,#1B1046,#3B1FB0 70%,#5B2EFF); border:1px solid rgba(255,255,255,.14) }
.earn small{ display:block; font:700 8.5px var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--vl) }
.earn .amt{ display:block; font:800 22px/1.2 var(--f-head); color:#fff; margin:3px 0 7px; font-variant-numeric:tabular-nums }
.bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden }
.bar i{ display:block; height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,#FFD25A,#FF8A00); transform-origin:left; transform:scaleX(.72); transition:transform 1.2s var(--ease) }
.earn-row{ display:flex; justify-content:space-between; font-size:9px; color:var(--soft); margin-top:6px }
.ph-chat{ border-radius:14px; padding:9px; background:rgba(255,255,255,.05); border:1px solid var(--line); display:grid; gap:6px }
.ph-chat .bub{ max-width:100%; font-size:10.5px }
.ph-tabs{ margin-top:auto; display:flex; justify-content:space-around; padding:8px 4px 2px; border-top:1px solid var(--line); font-size:16px }
.ph-tabs span:first-child{ filter:drop-shadow(0 0 8px rgba(124,92,255,.9)) }

/* floating cards */
.fc{ z-index:4 }
.fc > .flt{ border-radius:18px; padding:11px 13px; background:rgba(24,17,62,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line-2); box-shadow:0 24px 50px -20px rgba(0,0,0,.8); font-size:12px; color:var(--soft); transition:opacity .6s var(--ease), transform .7s var(--ease) }
.fc b{ font:700 12.5px/1.2 var(--f-head); color:#fff }
.fc small{ display:block; font-size:10.5px; color:var(--mute) }
.fc-hd{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.fc-hd .ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; background:linear-gradient(135deg,var(--a),var(--b)) }
.fc-ig{ right:-4px; bottom:0; width:186px }
.ig-cm{ padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.07); font-size:11px }
.ig-cm em{ font-style:normal; color:#fff; font-weight:700 }
.ig-arr{ display:block; text-align:center; font-size:11px; color:var(--mint2); margin:3px 0; transition:opacity .5s }
.ig-dm{ padding:7px 9px; border-radius:10px; background:linear-gradient(135deg,#DD2A7B,#8134AF); color:#fff; font-size:11px; transition:opacity .5s var(--ease), transform .6s var(--ease) }
.fc-won{ right:-4px; top:150px; width:172px }
.fc-won .flt{ display:flex; gap:10px; align-items:center }
.medal{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:17px; flex:none; background:linear-gradient(135deg,#FFD25A,#FF8A00); box-shadow:0 0 18px rgba(255,176,32,.6) }
.fc-wa{ left:-4px; top:26px; width:172px }
.fc-ai{ left:-4px; top:292px; width:180px }
.fc-ai .ai-text{ font-size:11.5px; color:#fff }
.fc-wa .bub{ max-width:100%; font-size:11.5px }
.mock-note{ position:absolute; left:0; right:0; bottom:-30px; text-align:center; font-size:11px; color:var(--dim) }

/* JS-driven hero states (static final state without JS / reduced motion) */
.anim .rc.new{ opacity:0; transform:translate3d(0,-14px,0) }
.anim .win-list .rc:not(.new){ transform:translate3d(0,-58px,0) }
.anim.s-msg .rc.new,.anim.s-msg .win-list .rc:not(.new){ opacity:1; transform:none }
.anim .b1,.anim .fc-wa .flt{ opacity:0; transform:translate3d(0,10px,0) scale(.95) }
.anim.s-msg .b1,.anim.s-msg .fc-wa .flt{ opacity:1; transform:none }
.anim .ai-box,.anim .fc-ai .flt{ opacity:0; transform:translate3d(0,10px,0) scale(.96) }
.anim.s-ai .ai-box,.anim.s-ai .fc-ai .flt{ opacity:1; transform:none }
.anim .b2{ opacity:0; transform:translate3d(0,10px,0) scale(.95) }
.anim.s-sent .b2{ opacity:1; transform:none }
.anim .ig-dm,.anim .ig-arr,.anim .fc-ig .flt{ opacity:0; transform:translate3d(0,8px,0) scale(.97) }
.anim.s-ig .ig-dm,.anim.s-ig .ig-arr,.anim.s-ig .fc-ig .flt{ opacity:1; transform:none }
.anim.s-ig .ig-arr{ transition-delay:.7s } .anim.s-ig .ig-dm{ transition-delay:1.1s }
.anim .fc-won .flt{ opacity:0; transform:translate3d(0,14px,0) scale(.9) }
.anim.s-won .fc-won .flt{ opacity:1; transform:none }
.anim .bar i{ transform:scaleX(.6) } .anim.s-won .bar i{ transform:scaleX(.72) }
.anim.s-won .medal{ animation:pop .7s var(--ease) }
@keyframes pop{ 0%{ transform:scale(.5) } 60%{ transform:scale(1.18) } 100%{ transform:scale(1) } }

/* ---------- facts + marquee ---------- */
.facts{ position:relative; padding:12px 0 clamp(8px,2vw,24px) }
.facts-in{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.fact{ border-radius:var(--r-lg); padding:22px 20px; background:var(--glass); border:1px solid var(--line) }
.fact .n{ display:block; font:800 clamp(40px,5.4vw,64px)/1 var(--f-head); letter-spacing:-.04em; background:var(--g-brand); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums }
.fact > span:not(.n){ display:block; margin-top:8px; font-size:14px; color:var(--mute) }
.marquee{ position:relative; margin-top:clamp(40px,6vw,72px); display:grid; gap:12px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent) }
.mq-row{ display:flex; width:max-content; gap:12px; animation:mq 46s linear infinite }
.mq-row.rev{ animation-direction:reverse; animation-duration:54s }
.marquee:hover .mq-row{ animation-play-state:paused }
.mq-row a{ display:inline-flex; align-items:center; gap:12px; padding:12px 22px 12px 12px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--line); font:700 16px var(--f-head); color:#fff; white-space:nowrap; transition:background-color .3s, border-color .3s }
.mq-row a:hover{ background:rgba(124,92,255,.18); border-color:rgba(124,92,255,.5) }
.mq-row .ic{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:19px; background:linear-gradient(145deg,var(--ac,#5B2EFF),rgba(255,255,255,.1)) }
@keyframes mq{ to{ transform:translate3d(calc(-50% - 6px),0,0) } }
.mq-cap{ text-align:center; margin-top:18px; font-size:13px; color:var(--dim) }

/* ---------- problem → answer ---------- */
.probs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.prob{ position:relative; border-radius:var(--r); padding:18px 16px; background:rgba(255,255,255,.035); border:1px solid var(--line) }
.prob .emo{ font-size:24px }
.prob h3{ font-size:15.5px; margin:12px 0 6px }
.prob p{ font-size:13.5px; color:var(--mute); line-height:1.5 }
.prob .x{ position:absolute; right:12px; top:12px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:800 11px var(--f-body); color:#FF8A8D; background:rgba(255,90,95,.14) }
.prob h3 s{ text-decoration:none; background:linear-gradient(#FF5A5F,#FF5A5F) 0 58%/0 2px no-repeat; transition:background-size .8s var(--ease) .3s }
.prob.in h3 s,html:not(.js) .prob h3 s{ background-size:100% 2px }
.answer{ position:relative; margin-top:18px; border-radius:var(--r-xl); padding:clamp(26px,4vw,48px); overflow:hidden; isolation:isolate; background:linear-gradient(135deg,#2A1A7A 0%,#5B2EFF 50%,#00B89C 100%); box-shadow:0 40px 80px -30px rgba(91,46,255,.7) }
.answer::before{ content:""; position:absolute; inset:-50%; z-index:-1; background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.18),transparent 30%); animation:spin 12s linear infinite }
.answer .wm-t{ font-size:clamp(30px,5vw,48px) }
.answer h3{ font-size:clamp(22px,3vw,32px); margin:14px 0 10px }
.answer p{ color:#EDE9FF; max-width:62ch }

/* ---------- module walkthrough (sticky) ---------- */
.walk-in{ display:grid; gap:20px }
.walk-vis{ display:none }
.ws{ position:relative; border-radius:var(--r-lg); padding:22px; background:var(--glass); border:1px solid var(--line) }
.ws-hd{ display:flex; align-items:center; gap:14px; margin-bottom:12px }
.ws .no{ font:800 12px var(--f-head); letter-spacing:.14em; color:var(--dim) }
.ws h3{ font-size:22px }
.ws p{ color:var(--mute); font-size:15px }
.ws ul{ display:grid; gap:7px; margin:14px 0 16px }
.ws li{ display:flex; gap:10px; font-size:14.5px; color:var(--soft) }
.ws li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:800 10px var(--f-body); color:#fff; background:linear-gradient(135deg,var(--a),var(--b)); margin-top:2px }
.wp{ position:absolute; inset:0; padding:34px; display:flex; flex-direction:column; opacity:0; transform:translate3d(0,16px,0) scale(.985); transition:opacity .25s ease, transform .5s var(--ease); pointer-events:none }
.wp.on{ opacity:1; transform:none; transition:opacity .55s var(--ease) .18s, transform .8s var(--ease) .18s }
.wp::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 60% at 20% 10%,var(--a),transparent 70%),radial-gradient(60% 60% at 100% 100%,var(--b),transparent 70%); opacity:.4 }
.wp .tile{ margin-bottom:20px }
.wp h3{ font-size:34px; letter-spacing:-.03em }
.wp > p{ color:var(--soft); margin:8px 0 22px; font-size:16px }
.wp ul{ display:grid; gap:8px }
.wp li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(10,7,32,.45); border:1px solid var(--line); font-size:14px; color:#fff }
.wp li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:800 10px var(--f-body); background:#fff; color:var(--a) }
.wp.on li{ animation:fadeUp .7s var(--ease) both }
.wp.on li:nth-child(2){ animation-delay:.07s } .wp.on li:nth-child(3){ animation-delay:.14s } .wp.on li:nth-child(4){ animation-delay:.21s } .wp.on li:nth-child(5){ animation-delay:.28s }
.wp .cnt{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; padding-top:18px }
.wp .cnt b{ font:800 46px/1 var(--f-head); letter-spacing:-.04em }
.wp .cnt small{ display:block; font:700 10px var(--f-body); letter-spacing:.16em; color:var(--soft) }
.pw{ display:flex; gap:4px; align-items:center }
.pw i{ width:18px; height:7px; border-radius:3px; background:linear-gradient(90deg,var(--a),var(--b)) }
.pw i.off{ background:rgba(255,255,255,.14) }
.pw span{ font:800 9.5px var(--f-body); letter-spacing:.14em; color:var(--soft); margin-left:6px }

/* ---------- bento ---------- */
.bento{ display:grid; gap:12px; grid-template-columns:1fr }
.bt{ position:relative; border-radius:var(--r-lg); padding:24px; background:var(--glass); border:1px solid var(--line); overflow:hidden; min-height:220px; display:flex; flex-direction:column; transition:border-color .4s, transform .6s var(--ease) }
.bt:hover{ border-color:rgba(180,162,255,.35) }
.bt::after{ content:""; position:absolute; right:-90px; top:-110px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,var(--a,#5B2EFF),transparent 66%); opacity:.2; pointer-events:none; z-index:0 }
.v-chat{ padding:14px; border-radius:16px; background:radial-gradient(circle at 20% 20%,rgba(37,211,102,.12),transparent 60%),rgba(14,94,79,.18); border:1px solid rgba(37,211,102,.18) }
.bt h3{ font-size:21px; margin:14px 0 6px }
.bt p{ font-size:14.5px; color:var(--mute) }
.bt .tile{ width:44px; height:44px; font-size:22px; border-radius:14px }
.bt-vis{ margin-top:auto; padding-top:20px }
.bt-k{ font:700 11px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--vl); display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.bt-k .soon,.bt-k .beta,.bt-k .tag-ent{ margin-left:4px }
/* bento visuals */
.v-chat{ display:grid; gap:8px }
.v-chat .bub{ font-size:12.5px; max-width:80% }
.js .scope.on .v-chat .bub{ animation:bubIn 6s var(--ease) infinite both }
.js .scope.on .v-chat .bub:nth-child(2){ animation-delay:.6s } .js .scope.on .v-chat .bub:nth-child(3){ animation-delay:1.2s } .js .scope.on .v-chat .bub:nth-child(4){ animation-delay:1.8s }
@keyframes bubIn{ 0%{ opacity:0; transform:translate3d(0,12px,0) scale(.94) } 10%,85%{ opacity:1; transform:none } 100%{ opacity:0; transform:translate3d(0,-6px,0) } }
.v-typing{ display:flex; gap:5px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.07); width:max-content }
.v-typing i{ width:7px; height:7px; border-radius:50%; background:var(--vl); animation:dot 1.2s ease-in-out infinite }
.v-typing i:nth-child(2){ animation-delay:.15s } .v-typing i:nth-child(3){ animation-delay:.3s }
@keyframes dot{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }
.v-ai{ display:grid; gap:8px }
.v-ai .q{ padding:9px 12px; border-radius:14px 14px 14px 4px; background:linear-gradient(135deg,rgba(142,45,226,.4),rgba(225,79,208,.22)); border:1px solid rgba(225,79,208,.35); font-size:12.5px; color:#fff; max-width:88% }
.v-bars{ display:flex; align-items:flex-end; gap:6px; height:110px }
.v-bars i{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--b),var(--a)); transform-origin:bottom; height:100% }
.v-bars i:nth-child(1){ transform:scaleY(.35) } .v-bars i:nth-child(2){ transform:scaleY(.5) } .v-bars i:nth-child(3){ transform:scaleY(.42) } .v-bars i:nth-child(4){ transform:scaleY(.66) } .v-bars i:nth-child(5){ transform:scaleY(.58) } .v-bars i:nth-child(6){ transform:scaleY(.8) } .v-bars i:nth-child(7){ transform:scaleY(.95) }
.js .v-bars i{ transition:transform 1.2s var(--ease) }
.js .bt:not(.in) .v-bars i{ transform:scaleY(.06) }
.v-bars i:nth-child(2){ transition-delay:.06s } .v-bars i:nth-child(3){ transition-delay:.12s } .v-bars i:nth-child(4){ transition-delay:.18s } .v-bars i:nth-child(5){ transition-delay:.24s } .v-bars i:nth-child(6){ transition-delay:.3s } .v-bars i:nth-child(7){ transition-delay:.36s }
.v-wave{ display:flex; align-items:center; gap:4px; height:60px }
.v-wave i{ flex:1; height:100%; border-radius:3px; background:linear-gradient(180deg,var(--b),var(--a)); transform:scaleY(.3); animation:wave 1.3s ease-in-out infinite }
.v-wave i:nth-child(3n){ animation-delay:-.4s } .v-wave i:nth-child(3n+1){ animation-delay:-.8s } .v-wave i:nth-child(4n){ animation-duration:1.7s } .v-wave i:nth-child(5n){ animation-duration:.95s }
@keyframes wave{ 0%,100%{ transform:scaleY(.2) } 50%{ transform:scaleY(1) } }
.v-radar{ position:relative; width:120px; height:120px; margin:0 auto }
.v-radar i{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--b); opacity:0; animation:radar 3s var(--ease) infinite }
.v-radar i:nth-child(2){ animation-delay:1s } .v-radar i:nth-child(3){ animation-delay:2s }
.v-radar b{ position:absolute; inset:36px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:0 0 30px var(--a) }
@keyframes radar{ from{ transform:scale(.3); opacity:.9 } to{ transform:scale(1.1); opacity:0 } }
.v-quote{ border-radius:14px; padding:12px 14px; background:#fff; color:var(--ink); box-shadow:0 20px 40px -20px rgba(0,0,0,.8) }
.v-quote .r{ display:flex; justify-content:space-between; font-size:12px; color:#4A4568; padding:3px 0 }
.v-quote .r b{ color:var(--ink) }
.v-quote .bar{ background:#EEEAFF; margin-top:8px } .v-quote .bar i{ transform:scaleX(.4) }
.js .bt.in .v-quote .bar i{ animation:fillBar 3.5s var(--ease) infinite }
@keyframes fillBar{ 0%{ transform:scaleX(.05) } 60%,100%{ transform:scaleX(.4) } }
.v-dm{ display:grid; gap:6px }
.v-dm .ig-cm,.v-dm .ig-dm{ font-size:12.5px; opacity:1; transform:none }
.v-apps{ display:flex; gap:10px; align-items:flex-end }
.v-apps .mini{ width:62px; height:116px; border-radius:16px; padding:5px; background:linear-gradient(160deg,#2A2160,#0E0A26); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) }
.v-apps .mini i{ display:block; height:100%; border-radius:12px; background:linear-gradient(170deg,var(--a),var(--b)) }
.v-apps .mini.off{ opacity:.45 }
.v-apps .mini.off i{ background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 6px,transparent 6px 12px) }
.v-apps small{ font-size:11px; color:var(--mute) }
.v-cc{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.v-cc span{ padding:9px 6px; border-radius:10px; text-align:center; font:700 11px/1.25 var(--f-body); color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line) }
.js .scope.on .v-cc span{ animation:ccPulse 3s ease-in-out infinite }
.v-cc span:nth-child(2){ animation-delay:.5s!important } .v-cc span:nth-child(3){ animation-delay:1s!important } .v-cc span:nth-child(4){ animation-delay:1.5s!important } .v-cc span:nth-child(5){ animation-delay:2s!important } .v-cc span:nth-child(6){ animation-delay:2.5s!important }
@keyframes ccPulse{ 0%,70%,100%{ opacity:.55 } 20%{ opacity:1 } }
.v-lang{ display:flex; gap:8px; flex-wrap:wrap }
.v-lang span{ padding:9px 14px; border-radius:12px; font:800 18px var(--f-head); color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line) }

/* ---------- team (gamified) ---------- */
.team{ display:grid; gap:16px }
.lb{ border-radius:var(--r-lg); padding:22px; background:var(--glass); border:1px solid var(--line) }
.lb h3{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:18px }
.lb h3 small{ margin-left:auto; font:800 9.5px var(--f-body); letter-spacing:.14em; color:var(--dim) }
.lbr{ position:relative; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; overflow:hidden }
.lbr + .lbr{ margin-top:6px }
.lbr .fillbg{ position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(124,92,255,.22),rgba(124,92,255,0)); transform-origin:left; transition:transform 1.4s var(--ease) var(--d,0s) }
.js .lbr:not(.in) .fillbg{ transform:scaleX(0) }
.lbr > *:not(.fillbg){ position:relative }
.lbr.g{ box-shadow:inset 0 0 0 1px rgba(255,176,32,.45) } .lbr.g .fillbg{ background:linear-gradient(90deg,rgba(255,176,32,.3),rgba(255,176,32,0)) }
.lbr .rk{ font-size:22px; text-align:center } .lbr .rk.num{ font:800 15px var(--f-head); color:var(--mute) }
.lbr .nm{ font:700 15px var(--f-head); color:#fff } .lbr .nm small{ display:block; font:500 12px var(--f-body); color:var(--mute) }
.lbr .sc{ font:800 16px var(--f-head); color:var(--sun2) }
.bdg{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.bdg > div{ border-radius:var(--r); padding:16px; background:var(--glass); border:1px solid var(--line); text-align:center }
.bdg .md2{ width:52px; height:52px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:0 0 24px -4px var(--a) }
.bdg b{ display:block; font:700 14px var(--f-head) } .bdg span{ font-size:12.5px; color:var(--mute) }
.js .scope.on .bdg .md2{ animation:bob 4s ease-in-out infinite }
.bdg > div:nth-child(2) .md2{ animation-delay:-.7s } .bdg > div:nth-child(3) .md2{ animation-delay:-1.4s } .bdg > div:nth-child(4) .md2{ animation-delay:-2.1s } .bdg > div:nth-child(5) .md2{ animation-delay:-2.8s } .bdg > div:nth-child(6) .md2{ animation-delay:-3.5s }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-6px) rotate(-6deg) } }
.md-sun{ --a:#FF8A00; --b:#FFD25A } .md-coral{ --a:#F0424F; --b:#FF8A65 } .md-violet{ --a:#4B22F0; --b:#8B6CFF } .md-mint{ --a:#00A88E; --b:#1FD1A9 } .md-sky{ --a:#1F6FFF; --b:#4FB3FF } .md-pink{ --a:#8E2DE2; --b:#E14FD0 }
.earnc{ margin-top:12px; border-radius:var(--r-lg); padding:22px; background:linear-gradient(150deg,#1B1046 0%,#3B1FB0 60%,#5B2EFF 100%); border:1px solid rgba(255,255,255,.14); position:relative; overflow:hidden }
.earnc small{ font:700 11px var(--f-body); letter-spacing:.14em; color:var(--vl) }
.earnc .big{ font:800 clamp(24px,3vw,32px)/1.15 var(--f-head); color:#fff; margin:6px 0 4px }
.earnc .sub{ color:var(--soft); font-size:14px; margin-bottom:12px }
.earnc .moon{ position:absolute; right:18px; top:16px; font-size:34px }
.earnc .bar{ height:9px } .earnc .bar i{ transform:scaleX(.72) }
.js .earnc:not(.in) .bar i{ transform:scaleX(0) }
.earnc .row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--soft); margin-top:8px; gap:10px; flex-wrap:wrap }
.streak{ margin-top:16px; display:flex; gap:14px; align-items:center; border-radius:var(--r); padding:16px 18px; background:rgba(255,90,95,.08); border:1px solid rgba(255,90,95,.25); font-size:14.5px }
.streak .emo{ font-size:28px }

/* ---------- layers (base + yours) ---------- */
.layers{ display:grid; gap:14px }
.layer-c{ position:relative; border-radius:var(--r-lg); padding:26px; background:var(--glass); border:1px solid var(--line); overflow:hidden }
.layer-c .lv{ font:800 11px var(--f-body); letter-spacing:.18em; color:var(--sun) }
.layer-c .tile{ margin:14px 0 4px }
.layer-c h3{ font-size:22px; margin:10px 0 8px }
.layer-c p{ color:var(--mute); font-size:15px }
.layer-c .chip{ margin-top:16px }
.layer-c.l3{ background:linear-gradient(150deg,rgba(91,46,255,.4),rgba(0,184,156,.25)); border-color:rgba(180,162,255,.35) }
.mini-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.mini-chips span{ padding:5px 10px; border-radius:99px; font:600 12px var(--f-body); color:var(--soft); background:rgba(255,255,255,.06); border:1px solid var(--line) }
.steps{ display:grid; gap:10px; counter-reset:s }
.step{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:4px 14px; align-items:start; padding:16px; border-radius:var(--r); background:rgba(255,255,255,.035); border:1px solid var(--line) }
.step .pin{ grid-row:span 2; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font:800 17px var(--f-head); color:#fff; background:linear-gradient(135deg,#5B2EFF,#00B89C); box-shadow:0 8px 20px -8px #5B2EFF }
.step b{ font:700 16px var(--f-head) } .step span:last-child{ font-size:14px; color:var(--mute) }

/* ---------- compare table ---------- */
.tbl-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:rgba(255,255,255,.025); -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; min-width:640px; font-size:14.5px }
th,td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--line) }
th:first-child,td:first-child{ text-align:left; color:var(--soft); position:sticky; left:0; background:#0E0A27; z-index:1 }
thead th{ font:700 13px var(--f-head); color:#fff; background:rgba(255,255,255,.03) }
thead th:first-child{ background:#110C2E }
tbody tr:last-child td{ border-bottom:0 }
tbody tr{ transition:background-color .25s } tbody tr:hover{ background:rgba(255,255,255,.03) }
.us{ background:linear-gradient(180deg,rgba(91,46,255,.22),rgba(0,184,156,.12)); }
thead .us{ color:#fff; background:linear-gradient(135deg,#5B2EFF,#00B89C) }
.yes{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; font:800 12px var(--f-body); color:#062A20; background:var(--mint2) }
.part{ color:var(--sun); font-size:17px } .no{ color:var(--dim) }
.swipe{ display:block; font-size:12.5px; color:var(--dim); margin-bottom:10px }
@media (min-width:760px){ .swipe{ display:none } }
.keys{ margin-top:12px; font-size:12.5px; color:var(--dim) }
tr.grp td{ font:800 11px var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); background:rgba(255,176,32,.06); text-align:left }
td.span{ color:var(--soft) }

/* ---------- trust grid ---------- */
.g2,.g3,.g4{ display:grid; gap:14px; grid-template-columns:1fr }
.trust .card h3{ font-size:18px }

/* ---------- pricing ---------- */
.plans{ display:grid; gap:16px; align-items:stretch }
.plan{ position:relative; isolation:isolate; display:flex; flex-direction:column; border-radius:var(--r-xl); padding:28px 24px 24px; background:var(--glass); border:1px solid var(--line); overflow:hidden }
.plan .nm{ display:flex; align-items:center; gap:10px; font:800 22px var(--f-head); color:#fff }
.plan .medal{ width:40px; height:40px; font-size:20px }
.plan .medal.md-bronze{ background:linear-gradient(135deg,#C77B3B,#F2B27A); box-shadow:none } .plan .medal.md-silver{ background:linear-gradient(135deg,#9AA3C7,#E6E9F7); box-shadow:none } .plan .medal.md-gold{ background:linear-gradient(135deg,#FF8A00,#FFD25A) }
.plan .pr{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:18px; font:800 clamp(44px,5vw,56px)/1 var(--f-head); letter-spacing:-.04em; color:#fff }
.plan .pr small{ font:600 13.5px var(--f-body); letter-spacing:0; color:var(--mute) }
.plan .from{ display:block; margin-top:10px; font-size:13.5px; color:var(--mute) }
.plan .who{ display:block; margin-top:10px; font:600 14px var(--f-body); color:var(--soft) }
.plan ul{ display:grid; gap:9px; margin:22px 0 24px; padding-top:20px; border-top:1px solid var(--line) }
.plan li{ display:flex; gap:10px; font-size:14.5px; color:var(--soft); align-items:flex-start }
.plan li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:800 10px var(--f-body); color:#062A20; background:var(--mint2); margin-top:2px }
.plan .btn{ margin-top:auto; width:100% }
.plan .tag{ position:absolute; right:18px; top:18px; padding:6px 10px; border-radius:99px; font:800 10px/1 var(--f-body); letter-spacing:.12em; color:#1B1046; background:linear-gradient(90deg,#FFD25A,#FFB020) }
.plan.pop{ background:var(--glass-solid); border-color:transparent; box-shadow:0 40px 90px -40px rgba(91,46,255,.9) }
.plan.pop::before{ content:""; position:absolute; z-index:-2; left:50%; top:50%; width:200%; aspect-ratio:1; margin:-100% 0 0 -100%; background:conic-gradient(from 0deg,#5B2EFF,#2FE0C2,#FFB020,#E14FD0,#5B2EFF); animation:spin 6s linear infinite }
.plan.pop::after{ content:""; position:absolute; z-index:-1; inset:1.5px; border-radius:calc(var(--r-xl) - 1.5px); background:radial-gradient(90% 50% at 50% 0%,rgba(91,46,255,.35),transparent 70%),var(--glass-solid) }
.plan .pr-row{ display:none }
.ia-note{ display:block; margin-top:6px; font-size:12.5px; color:var(--vl) }
/* region switch (CSS radios) */
.seg{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--line); width:max-content; max-width:100%; margin-bottom:28px }
.seg label{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:14px; font:700 14px var(--f-head); color:var(--mute); cursor:pointer; transition:background-color .3s, color .3s }
.seg label:hover{ color:#fff }
.seg .cur{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:800 12px var(--f-body); background:rgba(255,255,255,.1); color:#fff }
#r-in:checked ~ .seg label[for="r-in"],#r-gaa:checked ~ .seg label[for="r-gaa"],#r-eu:checked ~ .seg label[for="r-eu"]{ color:#fff; background:linear-gradient(135deg,#5B2EFF,#7C5CFF); box-shadow:0 8px 20px -10px #5B2EFF }
#r-in:focus-visible ~ .seg label[for="r-in"],#r-gaa:focus-visible ~ .seg label[for="r-gaa"],#r-eu:focus-visible ~ .seg label[for="r-eu"]{ outline:2px solid var(--mint2); outline-offset:2px }
.rv-gaa,.rv-eu{ display:none }
#r-gaa:checked ~ .pz .rv-in,#r-eu:checked ~ .pz .rv-in{ display:none }
#r-gaa:checked ~ .pz .rv-gaa{ display:block } #r-eu:checked ~ .pz .rv-eu{ display:block }
#r-gaa:checked ~ .pz span.rv-gaa,#r-eu:checked ~ .pz span.rv-eu{ display:inline }
/* product switch: Full CRM / WhatsApp API only */
.seg-prod label{ padding:12px 18px; font-size:15px }
.seg-prod small{ font:600 12px var(--f-body); opacity:.7 }
#p-crm:checked ~ .seg-prod label[for="p-crm"],#p-wa:checked ~ .seg-prod label[for="p-wa"]{ color:#fff; background:linear-gradient(135deg,#5B2EFF,#7C5CFF); box-shadow:0 8px 20px -10px #5B2EFF }
#p-wa:checked ~ .seg-prod label[for="p-wa"]{ color:#062A16; background:linear-gradient(120deg,#5CF08F,#25D366 60%,#1DB954) }
#p-crm:focus-visible ~ .seg-prod label[for="p-crm"],#p-wa:focus-visible ~ .seg-prod label[for="p-wa"]{ outline:2px solid var(--mint2); outline-offset:2px }
.prod-wa{ display:none }
#p-wa:checked ~ .pz .prod-wa{ display:block } #p-wa:checked ~ .pz .prod-crm{ display:none }
/* calculator */
.calc{ margin-top:24px; border-radius:var(--r-xl); padding:clamp(22px,3vw,34px); background:linear-gradient(150deg,rgba(91,46,255,.22),rgba(0,184,156,.1)),var(--glass-solid); border:1px solid rgba(180,162,255,.25); display:grid; gap:24px }
html:not(.js) .calc{ display:none }
.calc h3{ font-size:22px }
.calc .lbl{ display:flex; justify-content:space-between; align-items:baseline; font:700 13px var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:18px 0 10px }
.calc .lbl output{ font:800 18px var(--f-head); letter-spacing:0; color:#fff; text-transform:none }
.pick{ display:flex; gap:6px; padding:5px; border-radius:16px; background:rgba(0,0,0,.25); border:1px solid var(--line); width:max-content }
.pick button{ padding:10px 18px; border:0; border-radius:12px; background:transparent; font:700 14px var(--f-head); color:var(--mute); cursor:pointer; transition:background-color .3s, color .3s }
.pick button[aria-pressed="true"]{ color:#fff; background:linear-gradient(135deg,#5B2EFF,#7C5CFF) }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px; background:linear-gradient(90deg,#5B2EFF,#2FE0C2) 0/var(--fill,10%) 100% no-repeat,rgba(255,255,255,.12); outline-offset:6px }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:5px solid #5B2EFF; box-shadow:0 0 0 6px rgba(91,46,255,.25); cursor:grab }
.range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:5px solid #5B2EFF; cursor:grab }
.stepper{ display:flex; align-items:center; gap:8px; margin-top:14px }
.stepper button{ width:42px; height:42px; border-radius:12px; border:0; background:rgba(255,255,255,.08); font:800 20px var(--f-head); color:#fff; cursor:pointer }
.stepper input{ width:84px; height:42px; border-radius:12px; border:1px solid var(--line-2); background:rgba(0,0,0,.25); text-align:center; font:800 17px var(--f-head) }
.stepper span{ font-size:13.5px; color:var(--mute) }
.calc-out{ border-radius:var(--r-lg); padding:24px; background:rgba(10,7,32,.55); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center }
.calc-out small{ font:700 12px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--vl) }
.calc-total{ display:block; margin:8px 0 2px; font:800 clamp(44px,6vw,64px)/1 var(--f-head); letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums }
.calc-tax{ font:600 15px var(--f-body); color:var(--soft) }
.calc-line{ display:block; margin-top:12px; font-size:14px; color:var(--mute) }
.calc-hint{ display:none; margin-top:14px; padding:12px 14px; border-radius:14px; font-size:13.5px; background:rgba(255,176,32,.1); border:1px solid rgba(255,176,32,.35); color:#FFE3B0 }
.calc-hint.on{ display:block }
.calc-hint a{ color:#fff; font-weight:700; text-decoration:underline }
.extras{ display:grid; gap:12px; margin-top:24px }
.extra{ display:flex; gap:14px; align-items:flex-start; border-radius:var(--r); padding:18px; background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:14px; color:var(--mute) }
.extra b{ display:block; font:700 15.5px var(--f-head); margin-bottom:2px }
.extra a{ color:var(--wm-mint); font-weight:700 }
.extra .tile{ width:42px; height:42px; font-size:20px; border-radius:13px }
.notice{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:22px; border-radius:var(--r-lg); padding:18px 20px; background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(255,176,32,.04)); border:1px solid rgba(255,176,32,.35); color:#FFE9C2; font-size:14.5px }
.notice > span:not(.emo){ flex:1 1 260px }
.notice .emo{ font-size:24px }
.notice.ig{ background:linear-gradient(90deg,rgba(221,42,123,.18),rgba(129,52,175,.08)); border-color:rgba(221,42,123,.4); color:#FFD9EA }
.notice.plain{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--soft) }

/* faq */
.faq{ max-width:860px; margin:0 auto; display:grid; gap:10px }
.faq details{ border-radius:var(--r); background:rgba(255,255,255,.035); border:1px solid var(--line); transition:background-color .3s, border-color .3s }
.faq details[open]{ background:rgba(124,92,255,.08); border-color:rgba(124,92,255,.35) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; font:700 16px/1.35 var(--f-head); color:#fff }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:500 20px/1 var(--f-body); background:rgba(255,255,255,.08); transition:transform .4s var(--ease) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 20px 18px; color:var(--mute); font-size:15px }

/* ---------- CTA band ---------- */
.cta{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); padding:clamp(40px,7vw,88px) clamp(22px,5vw,64px); text-align:center; background:#0F0A2E; border:1px solid var(--line-2) }
.cta .aurora{ z-index:-1 }
.cta .gridlines{ z-index:-1 }
.cta .wm-t{ font-size:clamp(20px,2.4vw,26px) }
.cta .wm{ align-items:center; margin-bottom:22px }
.cta h2{ max-width:760px; margin:0 auto 16px }
.cta p{ max-width:600px; margin:0 auto 30px; color:var(--soft); font-size:clamp(16px,1.6vw,18.5px) }
.cta .note{ margin:22px auto 0; font-size:13.5px; color:var(--mute) }

/* ---------- page hero (inner pages) ---------- */
.phero{ position:relative; isolation:isolate; overflow:clip; padding:calc(var(--hdr) + clamp(44px,7vw,96px)) 0 clamp(56px,7vw,96px) }
.phero .aurora,.phero .gridlines{ z-index:-1 }
.phero .aurora .a1{ opacity:.8 } .phero .aurora .a3{ opacity:.7 }
.phero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; background:linear-gradient(transparent,var(--night)); z-index:-1 }
.phero h1{ max-width:900px; margin-bottom:22px }
.phero .lead{ margin-bottom:28px }
.phero .chips{ margin-bottom:26px }
.phero.center h1,.phero.center .lead{ margin-inline:auto }
.crumb{ font-size:13.5px; color:var(--mute); margin-bottom:22px }
.crumb a{ color:var(--wm-mint) } .crumb a:hover{ color:#fff }
.orb{ position:relative; width:96px; height:96px; border-radius:30px; display:grid; place-items:center; font-size:48px; margin-bottom:24px; background:linear-gradient(145deg,var(--ac,#5B2EFF),rgba(255,255,255,.12)); box-shadow:0 20px 50px -14px var(--ac,#5B2EFF), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.2) }
.orb::after{ content:""; position:absolute; inset:-14px; border-radius:40px; border:1px solid var(--ac,#5B2EFF); opacity:.5; animation:ping 2.8s var(--ease) infinite }
.meta-line{ font-size:13.5px; color:var(--mute) }
.nf{ font:800 clamp(110px,22vw,220px)/.9 var(--f-head); letter-spacing:-.06em; background:var(--g-brand); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradShift 6s ease-in-out infinite alternate; margin-bottom:10px }

/* flow (industry pipeline) */
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:28px }
.flow span{ position:relative; padding:8px 14px; border-radius:99px; font:700 13px var(--f-head); color:#fff; background:rgba(255,255,255,.07); border:1px solid var(--line-2); overflow:hidden }
.flow i{ font-style:normal; color:var(--dim) }
.flow span::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(47,224,194,.45),transparent); transform:translateX(-110%); animation:flowSweep 6s var(--ease) infinite }
.flow span:nth-of-type(2)::after{ animation-delay:.5s } .flow span:nth-of-type(3)::after{ animation-delay:1s } .flow span:nth-of-type(4)::after{ animation-delay:1.5s } .flow span:nth-of-type(5)::after{ animation-delay:2s } .flow span:nth-of-type(6)::after{ animation-delay:2.5s } .flow span:nth-of-type(7)::after{ animation-delay:3s } .flow span:nth-of-type(8)::after{ animation-delay:3.5s }
@keyframes flowSweep{ 0%{ transform:translateX(-110%) } 20%,100%{ transform:translateX(110%) } }

/* industries grid */
.inds{ display:grid; gap:12px; grid-template-columns:1fr }
.ind{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:22px; background:var(--glass); border:1px solid var(--line); overflow:hidden; transition:border-color .4s, transform .6s var(--ease) }
.ind:hover{ border-color:rgba(180,162,255,.4); transform:translateY(-4px) }
.ind .ic{ width:54px; height:54px; border-radius:17px; display:grid; place-items:center; font-size:27px; background:linear-gradient(145deg,var(--ac,#5B2EFF),rgba(255,255,255,.1)); box-shadow:0 12px 26px -12px var(--ac,#5B2EFF), inset 0 1px 0 rgba(255,255,255,.35) }
.ind h3{ font-size:19px; margin:16px 0 6px }
.ind p{ font-size:14px; color:var(--mute); flex:1 }
.ind .go{ margin-top:14px; font:700 13.5px var(--f-head); color:var(--wm-mint); display:inline-flex; gap:6px; align-items:center }
.ind .go .arr{ transition:transform .35s var(--ease) } .ind:hover .go .arr{ transform:translateX(4px) }
.ind.home{ border-color:rgba(255,176,32,.35) }
.ind .flag{ position:absolute; right:14px; top:14px; font:800 9.5px var(--f-body); letter-spacing:.12em; text-transform:uppercase; padding:5px 8px; border-radius:99px; color:#1B1046; background:linear-gradient(90deg,#FFD25A,#FFB020); z-index:2 }

/* pack equation */
.eq{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 }
.eq span{ padding:9px 14px; border-radius:12px; font:700 13.5px var(--f-head); color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line-2) }
.eq em{ font:800 18px var(--f-head); font-style:normal; color:var(--sun) }
.eq .res{ background:linear-gradient(135deg,#5B2EFF,#00B89C); border-color:transparent }
.packbox{ border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); background:var(--glass); border:1px solid var(--line) }
.packbox p{ color:var(--mute) }
.proof{ border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); background:linear-gradient(150deg,rgba(255,176,32,.16),rgba(255,176,32,.03)); border:1px solid rgba(255,176,32,.3) }
.proof .pq{ font:700 clamp(18px,2vw,22px)/1.4 var(--f-head); color:#fff; margin:14px 0 }
.proof .note{ color:#FFE3B0 }
.pack{ display:grid; gap:14px }

/* stage grid (industry pipeline) */
.stage-grid{ display:grid; gap:10px; grid-template-columns:1fr; counter-reset:none }
.stg{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:2px 14px; padding:16px; border-radius:var(--r); background:rgba(255,255,255,.035); border:1px solid var(--line) }
.stg .pin{ grid-row:span 2; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font:800 15px var(--f-head); color:#fff; background:linear-gradient(135deg,#5B2EFF,#00B89C) }
.stg b{ font:700 15.5px var(--f-head) } .stg span:last-child{ font-size:13px; color:var(--mute) }
.stg.lost .pin{ background:rgba(255,90,95,.2); color:#FF8A8D }
.stg.won{ box-shadow:inset 0 0 0 1px rgba(47,224,194,.4); background:rgba(47,224,194,.06) }

/* AI chat + automations */
.qlist{ display:grid; gap:8px; margin-top:14px; counter-reset:q }
.qlist li{ align-self:start; max-width:94%; padding:10px 14px; border-radius:16px 16px 16px 4px; background:linear-gradient(135deg,rgba(142,45,226,.32),rgba(225,79,208,.16)); border:1px solid rgba(225,79,208,.3); font-size:14px; color:#fff }
.autos{ display:grid; gap:10px; margin-top:14px }
.autos li{ padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:14px; color:var(--soft); line-height:1.55 }
.autos b{ display:inline-block; min-width:44px; font:800 10.5px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--sun) }
.autos .chip{ margin-top:6px; padding:4px 9px; font-size:11.5px }
/* templates (WhatsApp look) */
.tpl{ background:linear-gradient(180deg,rgba(14,124,102,.14),rgba(255,255,255,.02)) }
.tpl-hd{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px }
.tpl-hd b{ font:700 15px var(--f-head) }
.bubble{ position:relative; padding:12px 14px 10px; border-radius:4px 16px 16px 16px; background:#0E5E4F; color:#EFFFFA; font-size:14px; line-height:1.55; white-space:pre-line }
.tok{ display:inline-block; padding:0 6px; border-radius:6px; background:rgba(255,255,255,.18); font:700 12px var(--f-body) }

/* ---------- features page ---------- */
.jump{ position:sticky; top:calc(var(--hdr) + 8px); z-index:20; display:flex; gap:8px; overflow-x:auto; padding:8px; margin-bottom:34px; border-radius:20px; background:rgba(16,11,43,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line); scrollbar-width:none }
.jump::-webkit-scrollbar{ display:none }
.jump a{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:13px; font:700 13px var(--f-head); color:var(--mute); white-space:nowrap; transition:background-color .3s, color .3s }
.jump a:hover,.jump a.on{ color:#fff; background:rgba(124,92,255,.22) }
.mdl{ position:relative; border-radius:var(--r-xl); padding:clamp(22px,3vw,36px); background:var(--glass); border:1px solid var(--line); overflow:hidden; scroll-margin-top:calc(var(--hdr) + 90px) }
.mdl + .mdl{ margin-top:16px }
.mdl::before{ content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,var(--a),transparent 66%); opacity:.22; pointer-events:none }
.mdl-hd{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:22px }
.mdl-hd h2{ font-size:clamp(24px,3vw,34px) }
.mdl-hd p{ color:var(--mute); font-size:15px; margin-top:4px }
.mdl-hd .n{ margin-left:auto; padding:7px 12px; border-radius:99px; font:800 11px var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.07); border:1px solid var(--line-2) }
.feats{ position:relative; display:grid; gap:8px; grid-template-columns:1fr }
.feats li{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:rgba(10,7,32,.4); border:1px solid var(--line); font-size:14.5px; color:#fff; transition:border-color .3s, transform .4s var(--ease) }
.feats li:hover{ border-color:rgba(255,255,255,.2); transform:translateX(3px) }
.feats li::before{ content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:800 11px var(--f-body); color:#fff; background:linear-gradient(135deg,var(--a,#5B2EFF),var(--b,#00B89C)); margin-top:1px }
.ach{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:6px 16px 6px 6px; border-radius:99px; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.4); font:700 13.5px var(--f-body); color:var(--sun2) }
.ach .md{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:15px; background:linear-gradient(135deg,#FFD25A,#FF8A00) }
.road{ display:grid; gap:10px; grid-template-columns:1fr }
.rm{ display:flex; gap:14px; align-items:center; padding:16px; border-radius:var(--r); background:rgba(255,255,255,.035); border:1px solid var(--line) }
.rm h3{ font-size:16px } .rm p{ font-size:13.5px; color:var(--mute) }
.rm .tile{ width:44px; height:44px; font-size:21px; border-radius:13px }
.rm .soon{ margin-left:auto }

/* demo / contact */
.contact{ display:grid; gap:14px }
.cc{ border-radius:var(--r-xl); padding:28px; background:var(--glass); border:1px solid var(--line); display:flex; flex-direction:column; position:relative; overflow:hidden }
.cc h2{ font-size:26px; margin:18px 0 8px }
.cc p{ color:var(--mute); margin-bottom:22px; flex:1 }
.cc .btn{ align-self:flex-start; max-width:100% }
.cc.wa{ background:linear-gradient(160deg,rgba(37,211,102,.16),rgba(255,255,255,.02)); border-color:rgba(37,211,102,.35) }
.quests{ max-width:760px; margin:0 auto; display:grid; gap:10px }
.q{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid var(--line); color:#fff; font-size:15px }
.q .box{ flex:none; width:24px; height:24px; border-radius:8px; border:2px solid var(--v2); position:relative }
.q .box::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font:800 13px var(--f-body); color:var(--mint2); opacity:0; transform:scale(.4); transition:opacity .4s, transform .5s var(--ease) var(--d,0s) }
.q.in .box::after,html:not(.js) .q .box::after{ opacity:1; transform:none }
.q .pts{ margin-left:auto; padding:5px 10px; border-radius:99px; font:800 11.5px var(--f-body); color:#1B1046; background:linear-gradient(90deg,#FFD25A,#FFB020); white-space:nowrap }
.q > span:nth-child(2){ flex:1 }

/* partners / about / custom */
.big-num{ font:800 clamp(64px,10vw,120px)/1 var(--f-head); letter-spacing:-.05em; background:var(--g-brand); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; margin:14px 0 }
.stats{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
.stat{ border-radius:var(--r-lg); padding:22px 18px; background:var(--glass); border:1px solid var(--line) }
.stat .n{ font:800 clamp(28px,4vw,46px)/1.05 var(--f-head); letter-spacing:-.035em; background:var(--g-brand); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums }
.stat .t{ margin-top:8px; font-size:13.5px; color:var(--mute) }
.price-card{ display:grid; gap:16px; border-radius:var(--r-xl); padding:clamp(22px,3vw,36px); background:linear-gradient(150deg,rgba(91,46,255,.25),rgba(0,184,156,.12)); border:1px solid rgba(180,162,255,.3) }
.price-card .pcq{ font:800 clamp(26px,3.4vw,38px)/1.1 var(--f-head); color:#fff; letter-spacing:-.03em }
.price-card .opt{ border-radius:var(--r); padding:18px; background:rgba(10,7,32,.45); border:1px solid var(--line) }
.price-card .opt p{ color:var(--mute); font-size:14.5px; margin-top:4px }
.story p + p{ margin-top:16px }

/* ---------- legal ---------- */
.legal-wrap{ display:grid; gap:24px }
.toc{ display:flex; flex-direction:column; gap:2px; border-radius:var(--r-lg); padding:18px; background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:14px; align-self:start }
.toc b{ font:800 11px var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); margin-bottom:8px }
.toc a{ padding:6px 10px; border-radius:10px; color:var(--mute); transition:background-color .25s, color .25s }
.toc a:hover,.toc a.on{ color:#fff; background:rgba(124,92,255,.18) }
.legal{ min-width:0; border-radius:var(--r-xl); padding:clamp(22px,4vw,48px); background:#F8F7FD; color:#3A3557; font-size:16.5px; line-height:1.75; box-shadow:0 40px 80px -40px rgba(0,0,0,.7) }
.legal h2{ font-size:clamp(22px,2.6vw,28px); color:var(--ink); letter-spacing:-.02em; margin:44px 0 14px; padding-top:6px; scroll-margin-top:calc(var(--hdr) + 24px) }
.legal h2:first-child{ margin-top:0 }
.legal h3{ font-size:18px; color:var(--ink); margin:26px 0 8px }
.legal p,.legal ul,.legal ol{ margin:0 0 14px }
.legal ul{ list-style:disc; padding-left:22px } .legal ol{ list-style:decimal; padding-left:22px }
.legal li{ margin:6px 0 }
.legal li::marker{ color:#5B2EFF }
.legal strong,.legal b{ color:var(--ink) }
.legal a{ color:#4B22F0; font-weight:600; text-decoration:underline; text-underline-offset:3px }
.legal .box{ margin:16px 0; padding:16px 18px; border-radius:14px; background:#EFEBFF; border-left:4px solid #5B2EFF }
.legal .box p:last-child{ margin-bottom:0 }

/* ---------- footer ---------- */
.ftr{ position:relative; overflow:clip; padding:clamp(60px,8vw,100px) 0 calc(110px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:radial-gradient(60% 50% at 50% 100%,rgba(91,46,255,.22),transparent 70%),var(--night) }
.ftr-grid{ display:grid; gap:30px; grid-template-columns:repeat(2,1fr) }
.ftr-brand{ grid-column:1 / -1 }
.ftr-brand p{ margin:16px 0; max-width:380px; color:var(--mute); font-size:14.5px }
.ftr h4{ font:800 11px var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); margin-bottom:14px }
.ftr ul{ display:grid; gap:9px }
.ftr li a{ font-size:14.5px; color:var(--mute); transition:color .25s; overflow-wrap:anywhere }
.ftr li a:hover{ color:#fff }
.ftr-big{ margin-top:clamp(40px,6vw,70px); font:800 clamp(64px,17vw,250px)/.85 var(--f-head); letter-spacing:-.06em; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; white-space:nowrap }
.ftr-bot{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; margin-top:18px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--dim) }
.ftr .chip{ font-size:12.5px }

/* ---------- misc additions ---------- */
.z1{ --z:8 } .z2{ --z:18 } .z3{ --z:30 } .z4{ --z:42 }
.mq-set{ display:flex; gap:12px; flex:none }
.hero-copy{ min-width:0 }
.ind .tile{ width:50px; height:50px; font-size:24px }
.mdl .notice{ margin-top:20px }
.cc .tile{ width:56px; height:56px; font-size:26px }
.card .tile + h3{ margin-top:18px }
.bt-k{ min-height:20px }
.fc .soon{ margin-left:6px; padding:3px 6px; font-size:8px }
.calc .note{ color:var(--mute) }
.prob > .emo{ font-size:24px }
.answer .wm{ margin-bottom:6px }

.ph-scr > *{ flex:none }
.ph-scr > .ph-tabs{ margin-top:auto }
.fc b{ font-size:12px; white-space:nowrap }
@media (max-width:999px){
  .stage{ height:560px }
  .l-phone{ height:500px }
  .fc-ig{ width:198px }
  .anim.s-ai .fc-wa .flt{ opacity:0; transform:translate3d(0,-10px,0) scale(.95) }
}
@media (min-width:1000px){ .ph-chat{ display:none } }
.answer{ display:grid; gap:28px; align-items:center }
.ans-tiles{ display:grid; grid-template-columns:repeat(5,48px); gap:10px; justify-content:start }
.ans-tiles .tile{ width:48px; height:48px; font-size:23px; border-radius:15px; box-shadow:0 14px 30px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.2) }
.js .scope.on .ans-tiles .tile{ animation:bob 5s ease-in-out infinite }
.ans-tiles .tile:nth-child(2n){ animation-delay:-1.2s!important } .ans-tiles .tile:nth-child(3n){ animation-delay:-2.4s!important } .ans-tiles .tile:nth-child(4n){ animation-delay:-3.3s!important }
@media (max-width:559px){
  .hero{ padding-top:calc(var(--hdr) + 8px) }
  .eyebrow{ margin-bottom:18px }
  .inds{ gap:10px }
  .ind{ display:grid; grid-template-columns:50px 1fr; gap:2px 14px; padding:16px; align-items:start }
  .ind .ic,.ind .tile{ grid-row:span 3; width:50px; height:50px; font-size:24px }
  .ind h3{ margin:2px 0 4px; font-size:17px }
  .ind p{ font-size:13.5px }
  .ind .go{ margin-top:8px; font-size:13px }
  .ind .flag{ position:static; justify-self:start; grid-column:2; margin-bottom:6px }
  .ind.home{ grid-template-rows:auto }
  .bt{ min-height:0 }
  .walk-steps .ws{ padding:20px }
  .v-apps .mini{ width:54px; height:96px }
  .card,.ws,.bt,.plan{ border-radius:22px }
}

/* ---------- breakpoints ---------- */
@media (min-width:560px){
  .hdr-cta .hide-sm{ display:inline-flex }
  .probs{ grid-template-columns:repeat(3,1fr) }
  .bdg{ grid-template-columns:repeat(3,1fr) }
  .stats{ grid-template-columns:repeat(3,1fr) }
  .road,.g2{ grid-template-columns:repeat(2,1fr) }
  .inds{ grid-template-columns:repeat(2,1fr) }
  .stage-grid{ grid-template-columns:repeat(2,1fr) }
  .feats{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:559px){
  .hdr-cta > .btn-pri{ display:none }
}
@media (min-width:760px){
  .facts-in{ grid-template-columns:repeat(4,1fr) }
  .g3,.trust{ grid-template-columns:repeat(3,1fr) }
  .g4{ grid-template-columns:repeat(2,1fr) }
  .plans{ grid-template-columns:repeat(3,1fr) }
  .extras{ grid-template-columns:repeat(3,1fr) }
  .contact{ grid-template-columns:repeat(3,1fr) }
  .layers{ grid-template-columns:repeat(3,1fr) }
  .steps{ grid-template-columns:repeat(5,1fr) }
  .step{ grid-template-columns:1fr; gap:10px }
  .step .pin{ grid-row:auto }
  .bento{ grid-template-columns:repeat(6,1fr); grid-auto-flow:dense }
  .bt{ grid-column:span 3 }
  .bt.s2{ grid-column:span 2 } .bt.s4{ grid-column:span 4 } .bt.tall{ grid-row:span 2 }
  .team{ grid-template-columns:1.1fr 1fr; align-items:start }
  .answer{ grid-template-columns:1.5fr 1fr }
  .ans-tiles{ grid-template-columns:repeat(3,72px); gap:16px; justify-content:center }
  .ans-tiles .tile{ width:72px; height:72px; font-size:34px; border-radius:22px }
  .calc{ grid-template-columns:1.2fr 1fr; align-items:stretch }
  .pack{ grid-template-columns:1.4fr 1fr }
  .price-card{ grid-template-columns:1.3fr 1fr; align-items:center }
  .ftr-grid{ grid-template-columns:1.6fr repeat(3,1fr) }
  .ftr-brand{ grid-column:auto }
  .mbar{ display:none }
  .wa-fab{ display:inline-flex }
  .ftr{ padding-bottom:40px }
}
@media (min-width:1000px){
  .nav{ display:flex }
  .mnav{ display:none }
  .hdr-cta{ margin-left:0 }
  .hero{ padding-top:calc(var(--hdr) + 56px); display:flex; align-items:center }
  .hero > .wrap{ width:min(1240px,100% - 64px) }
  .hero-in{ grid-template-columns:1fr 1.02fr; gap:40px }
  .stage{ height:620px }
  .l-win{ display:block; top:40px; left:auto; right:-20px; width:min(600px,100%) }
  .l-phone{ left:-14px; top:250px; margin-left:0; height:400px; width:206px }
  .fc-ig{ right:-10px; bottom:40px; width:222px }
  .fc-won{ right:24px; top:-14px; width:190px }
  .fc-wa,.fc-ai{ display:none }
  .ring{ left:55% }
  .inds{ grid-template-columns:repeat(4,1fr) }
  .g4{ grid-template-columns:repeat(4,1fr) }
  .stage-grid{ grid-template-columns:repeat(4,1fr) }
  .road{ grid-template-columns:repeat(3,1fr) }
  .stats{ grid-template-columns:repeat(6,1fr) }
  .stats .stat{ grid-column:span 2 }
  .walk-in{ grid-template-columns:1fr 1fr; gap:56px; align-items:start }
  .walk-vis{ display:block; position:sticky; top:calc(var(--hdr) + 40px); height:min(560px,calc(100vh - var(--hdr) - 80px)); border-radius:var(--r-xl); background:var(--glass-solid); border:1px solid var(--line-2); overflow:hidden; isolation:isolate; box-shadow:0 50px 100px -50px rgba(91,46,255,.6) }
  .walk-dots{ position:absolute; right:22px; top:50%; transform:translateY(-50%); display:grid; gap:8px; z-index:3 }
  .walk-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:transform .4s var(--ease), background-color .4s }
  .walk-dots i.on{ background:#fff; transform:scale(1.6) }
  .walk-steps{ padding:40px 0 180px }
  .ws{ min-height:clamp(320px,46vh,430px); display:flex; flex-direction:column; justify-content:center; background:transparent; border-color:transparent; padding:22px 0 }
  .ws .tile{ display:none }
  .js .ws.rv.in{ opacity:.28 }
  .js .ws.rv.in.on{ opacity:1 }
  .ws h3{ font-size:clamp(26px,2.6vw,36px) }
  .ws p{ font-size:17px }
  .legal-wrap{ grid-template-columns:240px 1fr; gap:40px }
  .toc{ position:sticky; top:calc(var(--hdr) + 24px); max-height:calc(100vh - var(--hdr) - 48px); overflow:auto }
}
@media (min-width:1200px){
  .stage{ height:620px }
  .l-win{ width:620px; right:-40px }
  .win-body{ grid-template-columns:54px 210px 1fr; height:380px }
}
@media (hover:none){ .spot{ display:none } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .js .rv{ opacity:1!important; transform:none!important }
  .js .ws{ opacity:1 }
  .mq-row,.mq-set{ flex-wrap:wrap; width:auto; justify-content:center; flex:1 1 auto }
  .mq-set[aria-hidden="true"],.mq-row.rev{ display:none }
  .marquee{ -webkit-mask-image:none; mask-image:none }
  .stage-in,.layer{ transform:none!important }
}
.notice > .soon,.notice > .beta{ flex:none }

/* ---------- legal tables (refunds, sub-processors, DPA) ---------- */
.legal .tbl{ overflow-x:auto; margin:0 0 16px; -webkit-overflow-scrolling:touch }
.legal table{ border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.5 }
.legal th,.legal td{ border:1px solid #DCD6F5; padding:8px 10px; text-align:left; vertical-align:top }
.legal th{ background:#EFEBFF; color:var(--ink); font-weight:700 }

/* industry pack accents */
.ac-travel_tours{--ac:#0288D1}.ac-real_estate{--ac:#4B22F0}.ac-education{--ac:#1E6FE0}.ac-healthcare_clinics{--ac:#00897B}.ac-auto_dealers{--ac:#FB8C00}.ac-solar_epc{--ac:#FFB300}.ac-interior_design{--ac:#8E24AA}.ac-insurance_loans{--ac:#2E8B3E}.ac-weddings_events{--ac:#6B016E}.ac-jewellery_retail{--ac:#B8860B}
/* width utilities (level / XP bars) */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}
/* M1 shared language. Existing v2 choreography stays unchanged. */
:root {
  --m-instant: 90ms; --m-fast: 160ms; --m-base: 240ms; --m-slow: 420ms; --m-epic: 900ms;
  --e-out: cubic-bezier(.16,1,.3,1); --e-in: cubic-bezier(.7,0,.84,0);
  --e-inout: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.16,1,.3,1);
  --stagger: 60ms; --dist-sm: 12px; --dist-md: 24px; --dist-lg: 48px;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --e-spring: linear(0, .22 10%, .65 25%, .94 40%, 1.06 55%, 1.03 70%, .995 85%, 1); }
}
@media (max-width: 767px) { :root { --stagger: 40ms; } }
/* A pending state is added only after an observer has been installed. */
.js.motion-ready [data-reveal].motion-pending {
  opacity: 0;
  transition: opacity var(--m-slow) var(--e-out), transform var(--m-slow) var(--e-out),
    filter var(--m-slow) var(--e-out), clip-path var(--m-slow) var(--e-out);
  transition-delay: var(--motion-delay, 0ms);
}
.js.motion-ready [data-reveal="up"].motion-pending { transform: translateY(var(--dist-md)); }
.js.motion-ready [data-reveal="scale"].motion-pending { transform: scale(.96); }
.js.motion-ready [data-reveal="blur"].motion-pending { filter: blur(4px); }
.js.motion-ready [data-reveal="mask"].motion-pending { clip-path: inset(0 0 100%); }
.js.motion-ready [data-reveal].motion-revealed {
  opacity: 1; transform: none; filter: none; clip-path: none;
  transition: opacity var(--m-slow) var(--e-out), transform var(--m-slow) var(--e-out),
    filter var(--m-slow) var(--e-out), clip-path var(--m-slow) var(--e-out);
  transition-delay: var(--motion-delay, 0ms);
}
html[data-motion-hidden] *, html[data-motion-hidden] *::before, html[data-motion-hidden] *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .js.motion-ready [data-reveal] {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
    transition: opacity 150ms var(--e-out) !important; transition-delay: 0ms !important;
  }
}
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* Native progress and passive JS fallback share --p. Individual scrub modules
   supply their own keyframes and can inspect Motion.scroll.native. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes motion-progress { from { --p: 0; } to { --p: 1; } }
.js.motion-ready [data-parallax] {
  translate: 0 calc((var(--p, .5) - .5) * var(--parallax, 0) * 100vh);
}
@supports (animation-timeline: view()) {
  .js.motion-ready [data-parallax].motion-native {
    animation: motion-progress linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
html[data-motion-static] [data-parallax] { translate: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-parallax], [data-scrub] { animation: none !important; translate: none !important; }
}
@media (scripting: none) { [data-parallax] { translate: none !important; } }