@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:var(--p1);--bg2:var(--p1b);--graphite:var(--p1b);--g2:var(--p2);--g3:var(--p2);
  --text:#F5F5F7;--muted:var(--muted);--dim:var(--dim);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --glass:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 60%,rgba(255,255,255,.05));
  --ease:cubic-bezier(.22,1,.36,1);--ease2:cubic-bezier(.65,0,.35,1);
  --r:28px;--pad:clamp(20px,5vw,64px);--max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;line-height:1.5}
::selection{background:rgba(255,255,255,.85);color:var(--p0)}
a{color:inherit;text-decoration:none}
.skip{position:fixed;left:16px;top:-60px;z-index:400;background:#FFFFFF;color:var(--p0);padding:10px 16px;border-radius:12px;font-weight:600;transition:top .3s}
.skip:focus{top:16px}
.about-pts{list-style:none;display:grid;gap:14px;margin-top:30px}
.about-pts li{display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:16px}
.about-pts li b{color:var(--text);font-weight:600;display:block;margin-bottom:2px}
.about-pts svg{width:20px;height:20px;flex:none;margin-top:2px;color:#FFFFFF}
.consent a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{position:relative;padding:clamp(90px,14vw,170px) 0}

/* background */
.fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* glass */
.glass{position:relative;background:var(--glass),rgba(var(--g-rgb),.84);
  border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 30px 60px -30px rgba(var(--sh-rgb),.8);isolation:isolate}
.blur{-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);background:var(--glass),rgba(var(--g-rgb),.6)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.07),transparent 60%)}
.glass:hover::before{opacity:1}
.glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.45),transparent 60%);
  -webkit-mask:linear-gradient(var(--p0) 0 0) content-box,linear-gradient(var(--p0) 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.glass:hover::after{opacity:1}
.glass-text{background:linear-gradient(180deg,#FFFFFF 0%,var(--p3l) 38%,var(--dim) 52%,#E5E5EA 78%,#9BABC5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(var(--sh-rgb),.6))}

/* buttons */
.btn{--h:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font-weight:600;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;transition:transform .5s var(--ease),background .3s,box-shadow .4s,color .3s;will-change:transform}
.btn-primary{background:linear-gradient(180deg,#FFFFFF,var(--p3l));color:var(--p1);box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -2px 6px rgba(var(--sh-rgb),.12),0 10px 30px -10px rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -2px 6px rgba(var(--sh-rgb),.12),0 14px 44px -10px rgba(255,255,255,.55)}
.btn-glass{color:var(--text)}
.btn-glass.glass{border-radius:999px}
.btn svg{width:18px;height:18px;flex:none}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-sm{--h:40px;padding:0 18px;font-size:14px}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1160px,calc(100% - 24px));height:62px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 20px;transition:transform .7s var(--ease),background .4s}
.nav .logo{display:flex;align-items:center;height:100%}
.logo-svg{height:24px;width:auto}
.nav-mid{display:flex;align-items:center;gap:6px}
.nav-mid a{font-size:14px;color:var(--muted);padding:8px 14px;border-radius:999px;transition:color .3s,background .3s}
.nav-mid a:hover,.nav-mid a.on{color:var(--text);background:rgba(255,255,255,.07)}
.nav-right{display:flex;align-items:center;gap:8px}
.now{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:0 12px;height:32px;border-radius:999px;border:1px solid var(--line);overflow:hidden;min-width:126px;justify-content:center}
.now i{width:6px;height:6px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 10px #FFFFFF;flex:none}
.now span{display:inline-block;transition:transform .5s var(--ease),opacity .5s}
.now span.out{transform:translateY(-120%);opacity:0}
.burger{display:none;width:44px;height:44px;border-radius:14px;border:0;background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;right:13px;height:1.6px;background:#FFFFFF;border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.menu-open .burger i:first-child{top:21px;transform:rotate(45deg)}.menu-open .burger i:last-child{top:21px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:88px 12px auto;z-index:49;border-radius:24px;padding:12px;background:rgba(var(--g-rgb),.86)!important;display:grid;gap:2px;opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:.5s var(--ease)}
.menu-open .mmenu{opacity:1;transform:none;pointer-events:auto}
.mmenu a{padding:14px 16px;border-radius:14px;font-size:17px;font-weight:500;display:flex;justify-content:space-between}
.mmenu a:hover{background:rgba(255,255,255,.06)}
.mmenu a small{color:var(--dim);font-weight:400}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--dim),#FFFFFF)}

/* side indicator */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px}
.rail a{position:relative;display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .5s var(--ease),background .4s}
.rail a.on{background:#FFFFFF;transform:scale(1.35);box-shadow:0 0 12px rgba(255,255,255,.6)}
.rail a span{position:absolute;right:20px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:12px;color:var(--text);padding:5px 10px;border-radius:999px;background:rgba(var(--g-rgb),.85);border:1px solid var(--line);opacity:0;pointer-events:none;transition:.4s var(--ease)}
.rail a:hover span,.rail a.on.flash span{opacity:1;transform:translate(0,-50%)}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--muted);padding:8px 14px 8px 10px;border-radius:999px}
.eyebrow b{width:8px;height:8px;border-radius:50%;background:#FFFFFF;position:relative}
.eyebrow b::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #FFFFFF;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:22px;height:1px;background:var(--dim)}
h1,h2,h3{font-weight:650;letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(36px,6vw,72px);max-width:14ch}
h3{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.025em;line-height:1.2}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:56ch;margin-top:22px;letter-spacing:-.01em}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.split.in .w>span{transform:none}

/* reveal */
[data-reveal]{}.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:120px;padding-bottom:80px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(54px,9.4vw,132px);letter-spacing:-.05em;line-height:.95;margin-top:26px}
.hero .lead{margin-top:28px;font-size:clamp(17px,1.7vw,21px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;font-size:14px;color:var(--muted)}
.ticks span{display:flex;align-items:center;gap:8px}
.ticks svg{width:16px;height:16px;color:#FFFFFF}
.eye-stage{position:relative;aspect-ratio:1;display:grid;place-items:center}
.eye-ring{position:absolute;inset:6%;border-radius:50%;border:1px solid var(--line)}
.eye-ring.r2{inset:18%;border-style:dashed;border-color:rgba(255,255,255,.06);animation:spin 60s linear infinite}
.eye-ring.r3{inset:-4%;border-color:rgba(255,255,255,.04)}
@keyframes spin{to{transform:rotate(360deg)}}
.eye-orb{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 60%)}
.hero-eye{width:62%;height:auto;overflow:visible;position:relative;transition:transform .9s var(--ease)}
.hero-eye .eye-lid{transform-origin:100px 84px;transition:transform .14s var(--ease2)}
.hero-eye.blink .eye-lid{transform:translateY(30px) scaleY(.35)}
.hero-eye .eye-pupil-wrap{transform-origin:100px 82px;transition:transform .14s var(--ease2)}
.hero-eye.blink .eye-pupil-wrap{transform:scaleY(.1)}
#glint{transform-box:fill-box;transform-origin:center;animation:glintIn 1.1s var(--ease) 1.1s both}
.hero-eye{transform:none!important}
@keyframes glintIn{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
.orbit-chip{position:absolute;font-size:12.5px;padding:8px 13px;border-radius:999px;white-space:nowrap;display:flex;gap:8px;align-items:center;animation:float 7s ease-in-out infinite}
.orbit-chip svg{width:14px;height:14px}
.orbit-chip.c1{top:10%;left:2%}.orbit-chip.c2{top:22%;right:-2%;animation-delay:-2s}.orbit-chip.c3{bottom:14%;left:-4%;animation-delay:-4s}.orbit-chip.c4{bottom:6%;right:6%;animation-delay:-5.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scroll-cue i{width:22px;height:34px;border-radius:12px;border:1px solid var(--line2);position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#FFFFFF;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* stat strip */
.strip{padding:0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r);overflow:hidden}
.strip-grid>div{padding:30px 28px;border-right:1px solid var(--line)}
.strip-grid>div:last-child{border-right:0}
.big{font-size:clamp(34px,4.2vw,52px);font-weight:650;letter-spacing:-.045em;line-height:1}
.strip-grid p{font-size:14px;color:var(--muted);margin-top:8px}

/* problem */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.search{border-radius:var(--r);padding:22px}
.sbar{display:flex;align-items:center;gap:12px;height:54px;border-radius:999px;padding:0 20px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.sbar svg{width:18px;height:18px;color:var(--muted);flex:none}
.sbar .q{font-size:16px;white-space:nowrap;overflow:hidden}
.sbar .caret{width:1.5px;height:20px;background:#FFFFFF;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.results{margin-top:16px;display:grid;gap:10px}
.res{display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--line);opacity:0;transform:translateY(12px);transition:.7s var(--ease)}
.res.show{opacity:1;transform:none}
.res .ph{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--p2),var(--p1b));flex:none;display:grid;place-items:center;font-weight:700;color:var(--muted)}
.res b{font-size:15px;font-weight:600;display:block}
.res small{font-size:12.5px;color:var(--muted)}
.res .tag{margin-left:auto;font-size:11.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);white-space:nowrap}
.res.you{border-style:dashed;background:transparent}
.res.you b{color:var(--dim)}
.res.you .ph{background:transparent;border:1px dashed var(--g3)}
.res.you .tag{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--muted)}
.res.you.show{animation:fadeout 3.2s 1.2s var(--ease) forwards}
@keyframes fadeout{to{opacity:.35;filter:blur(1px)}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(50px,8vw,90px)}
.fact{border-radius:var(--r);padding:30px}
.fact .big{margin-bottom:14px}
.fact p{color:var(--muted);font-size:15px}
.fact cite{display:block;margin-top:16px;font-style:normal;font-size:12px;color:var(--dim)}
.ring{width:84px;height:84px;margin-bottom:20px}
.ring circle{fill:none;stroke-width:6}
.ring .tr{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke:url(#rg);stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 2s var(--ease);transform:rotate(-90deg);transform-origin:50% 50%}

/* calculator */
.calc{border-radius:36px;padding:clamp(24px,4vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);margin-top:60px}
.field-r{margin-bottom:30px}
.field-r label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--muted);margin-bottom:14px;gap:10px}
.field-r label output{color:var(--text);font-weight:600;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#FFFFFF var(--p),rgba(255,255,255,.1) var(--p))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#FFFFFF var(--p),rgba(255,255,255,.1) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-10px;background:linear-gradient(180deg,#FFFFFF,var(--p3l));box-shadow:0 4px 14px rgba(var(--sh-rgb),.5),inset 0 1px 0 #FFFFFF;transition:transform .3s var(--ease)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,var(--p3l));box-shadow:0 4px 14px rgba(var(--sh-rgb),.5)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc-out{display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.loss-big{font-size:clamp(46px,6.4vw,84px);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.loss-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.loss-row>div{padding:18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.loss-row b{font-size:24px;letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums}
.loss-row small{color:var(--muted);font-size:13px}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.15));height:4%;transition:height .9s var(--ease)}
.bars-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:8px}
.note{font-size:12.5px;color:var(--dim)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:60px}
.card{border-radius:var(--r);padding:28px;overflow:hidden;min-height:250px;display:flex;flex-direction:column;transition:transform .7s var(--ease)}
.card h3{margin-top:auto}
.card p{color:var(--muted);font-size:15px;margin-top:10px;max-width:42ch}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}
.vis{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative}
.clock{width:150px;height:150px;position:relative}
.clock svg{width:100%;height:100%}
.clock .fg{stroke:url(#rg);stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 2.4s var(--ease)}
.in .clock .fg{stroke-dashoffset:0}
.clock b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;letter-spacing:-.04em}
.clock b small{display:block;font-size:12px;color:var(--muted);letter-spacing:0;font-weight:500;margin-top:-30px}
.edit{font-size:44px;font-weight:650;letter-spacing:-.04em;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.edit .old{color:var(--dim);text-decoration:line-through;font-size:26px;margin-right:12px;transition:.6s}
.edit .cur{width:2px;height:44px;background:#FFFFFF;animation:blink 1s steps(1) infinite}
.cmp-bars{width:100%;display:grid;gap:14px}
.cmp-bars div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.cmp-bars span{height:30px;border-radius:10px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;font-size:13px;font-weight:600;width:0;transition:width 1.6s var(--ease)}
.cmp-bars .a span{background:rgba(255,255,255,.1);color:var(--muted)}
.cmp-bars .v span{background:linear-gradient(90deg,var(--dim),#FFFFFF);color:var(--p0)}
.in .cmp-bars .a span{width:100%}.in .cmp-bars .v span{width:33.3%}
.chat{width:100%;max-width:300px;display:grid;gap:10px}
.bub{padding:10px 14px;border-radius:18px;font-size:14px;max-width:85%;opacity:0;transform:translateY(10px) scale(.96);transition:.6s var(--ease)}
.bub small{display:block;font-size:11px;color:var(--dim);margin-top:3px}
.bub.l{background:rgba(255,255,255,.07);border-bottom-left-radius:6px}
.bub.r{background:#FFFFFF;color:var(--p0);justify-self:end;border-bottom-right-radius:6px}
.bub.r small{color:var(--dim)}
.in .bub{opacity:1;transform:none}
.in .bub:nth-child(2){transition-delay:.8s}.in .bub:nth-child(3){transition-delay:1.6s}
.phone-mini{width:92px;height:170px;border-radius:22px;border:2px solid var(--g3);padding:6px;overflow:hidden;position:relative;background:var(--p0)}
.phone-mini .scr{border-radius:16px;height:100%;overflow:hidden;background:#061F4B}
.phone-mini .feed{display:grid;gap:6px;padding:8px;animation:feed 7s var(--ease2) infinite alternate}
.phone-mini .feed i{height:30px;border-radius:7px;background:rgba(255,255,255,.08)}
.phone-mini .feed i:first-child{height:54px;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.06))}
@keyframes feed{to{transform:translateY(-110px)}}
.serp{width:100%;max-width:270px;display:grid;gap:8px}
.serp div{height:34px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;padding:0 12px;font-size:12.5px;color:var(--dim);transition:transform 1.2s var(--ease),background .6s,color .6s}
.serp .me{background:#FFFFFF;color:var(--p0);font-weight:600}
.in .serp .me{transform:translateY(-84px)}
.in .serp .o1,.in .serp .o2{transform:translateY(42px)}
.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:auto;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.ic svg{width:22px;height:22px}
.card.small{min-height:210px;grid-column:span 2}
.s6{grid-column:span 6}
.card.small h3{margin-top:28px}

/* compare */
.table{margin-top:60px;border-radius:var(--r);overflow:hidden}
.trow{display:grid;grid-template-columns:1.2fr repeat(4,1fr);border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow>div{padding:20px 22px;font-size:15px;color:var(--muted);display:flex;align-items:center}
.trow>div:first-child{color:var(--text);font-weight:500}
.thead>div{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.trow>div.v{background:rgba(255,255,255,.07);color:var(--text);font-weight:600;position:relative}
.thead>div.v{color:var(--text)}
.thead>div.v::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--dim),#FFFFFF)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll .table{min-width:760px}

/* process */
.process{padding:0}
.proc-track{height:420vh;position:relative}
.proc-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.proc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center;width:100%}
.steps{position:relative;margin-top:40px;display:grid;gap:6px}
.step{padding:18px 0 18px 30px;position:relative;opacity:.28;transition:opacity .6s var(--ease)}
.step::before{content:"";position:absolute;left:0;top:26px;width:9px;height:9px;border-radius:50%;background:var(--g3);transition:.6s var(--ease)}
.step.on{opacity:1}.step.on::before{background:#FFFFFF;box-shadow:0 0 14px #FFFFFF}
.step h3{font-size:clamp(20px,2.2vw,26px)}
.step p{color:var(--muted);font-size:15px;margin-top:6px;max-height:0;overflow:hidden;transition:max-height .8s var(--ease)}
.step.on p{max-height:120px}
.step .n{font-size:12px;color:var(--dim);letter-spacing:.14em;font-weight:600}
.proc-line{position:absolute;left:4px;top:30px;bottom:30px;width:1px;background:var(--line)}
.proc-line i{position:absolute;left:0;top:0;width:1px;height:100%;background:#FFFFFF;transform-origin:top;transform:scaleY(0)}
.proc-vis{position:relative;aspect-ratio:1.1;border-radius:36px;overflow:hidden}
.pv{position:absolute;inset:0;display:grid;place-items:center;padding:8%;opacity:0;transform:scale(.96) translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pv.on{opacity:1;transform:none;filter:none}
.mock{width:100%;max-width:440px;border-radius:22px;background:rgba(var(--g-rgb),.6);border:1px solid var(--line2);overflow:hidden;box-shadow:0 40px 80px -40px var(--p0)}
.mock-top{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line)}
.mock-top i{width:9px;height:9px;border-radius:50%;background:var(--g3)}
.mock-top span{margin-left:10px;font-size:11.5px;color:var(--dim);padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.05);flex:1;max-width:220px}
.mock-body{padding:18px;display:grid;gap:10px}
.ln{height:12px;border-radius:6px;background:rgba(255,255,255,.08)}
.fm-row{display:flex;gap:10px}.fm-row .ln{flex:1;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.typing::after{content:"";display:block;height:100%;width:0;border-radius:inherit;background:rgba(255,255,255,.18);animation:typew 2.6s var(--ease) infinite alternate}
@keyframes typew{to{width:70%}}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-grid i{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03));animation:pop 3s var(--ease) infinite}
.ph-grid i:nth-child(2){animation-delay:.2s}.ph-grid i:nth-child(3){animation-delay:.4s}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
.build .blk{border-radius:12px;background:rgba(255,255,255,.08);transform-origin:left;animation:grow 3.2s var(--ease) infinite}
.build .hero-b{height:90px;background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.04))}
.build .blk:nth-child(2){animation-delay:.25s}.build .blk:nth-child(3){animation-delay:.5s}.build .blk:nth-child(4){animation-delay:.75s}
@keyframes grow{0%{transform:scaleX(0);opacity:0}25%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.cols .blk{height:60px}
.timer48{position:absolute;top:22px;right:22px;font-size:12.5px;padding:7px 12px;border-radius:999px;background:#FFFFFF;color:var(--p0);font-weight:600}
.swap{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.swap .thumb{width:54px;height:54px;border-radius:10px;flex:none;background:linear-gradient(135deg,var(--dim),var(--p1b));animation:thumb 3s var(--ease2) infinite}
@keyframes thumb{0%,45%{background:linear-gradient(135deg,var(--dim),var(--p1b))}55%,100%{background:linear-gradient(135deg,#FFFFFF,var(--dim))}}
.swap .price{margin-left:auto;font-weight:650;font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.done{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);justify-self:start}
.done svg{width:14px;height:14px}
.launch{text-align:center}
.launch .url{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:clamp(15px,1.6vw,18px);font-weight:500}
.launch .url svg{width:16px;height:16px}
.launch .live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:24px}
.launch .live i{width:8px;height:8px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 12px #FFFFFF;animation:breathe 2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.3}}
.launch .bigmark{width:120px;margin:0 auto 34px;color:#FFFFFF;animation:float 6s ease-in-out infinite}

/* work */
.work-card{border-radius:36px;padding:clamp(18px,2.4vw,28px);display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:60px}
.browser{border-radius:22px;overflow:hidden;border:1px solid var(--line2);background:var(--p1b);transform-style:preserve-3d;transition:transform .8s var(--ease)}
.browser .shot{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--p1b),var(--p1b))}
.browser .shot iframe{position:absolute;top:0;left:0;width:1280px;height:2400px;border:0;transform-origin:0 0;transform:scale(var(--s,.4));pointer-events:none;opacity:0;transition:opacity .8s;background:#FFFFFF}
.browser .shot iframe.ok{opacity:1;animation:pan 24s ease-in-out 2s infinite alternate}
.browser:hover .shot iframe.ok{animation-play-state:paused}
@keyframes pan{0%,10%{transform:scale(var(--s,.4)) translateY(0)}90%,100%{transform:scale(var(--s,.4)) translateY(-1000px)}}
.shot-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:13px;letter-spacing:.02em}
.shot-load span{display:flex;gap:10px;align-items:center}.shot-load i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--g3);border-top-color:#FFFFFF;animation:spin 1s linear infinite}
.shot-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.shot-fallback b{font-size:clamp(28px,4vw,48px);letter-spacing:-.04em}
.shot-fallback small{display:block;color:var(--muted);margin-top:8px}
.work-info .tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.work-info .tags span{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.work-info h3{font-size:clamp(28px,3vw,38px)}
.work-next{margin-top:16px;border-radius:var(--r);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.work-next p{color:var(--muted)}

/* types */
.seg{display:inline-flex;padding:5px;border-radius:999px;margin-top:40px;position:relative}
.seg button{position:relative;z-index:1;border:0;background:transparent;height:44px;padding:0 22px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer;transition:color .4s}
.seg button.on{color:var(--p0)}
.seg .knob{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(180deg,#FFFFFF,var(--p3l));transition:transform .6s var(--ease),width .6s var(--ease);box-shadow:inset 0 1px 0 #FFFFFF}
.types-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;margin-top:44px}
.tpanel{display:none}.tpanel.on{display:block;animation:tin .8s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateY(16px)}}
.tpanel ul{list-style:none;display:grid;gap:12px;margin-top:22px}
.tpanel li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:16px}
.tpanel li svg{width:18px;height:18px;flex:none;margin-top:3px;color:#FFFFFF}
.tpanel .for{margin-top:26px;font-size:14px;color:var(--dim)}
.tpanel .for b{color:var(--muted);font-weight:500}
.tmock{border-radius:32px;padding:22px;min-height:400px}
.tm{display:none}.tm.on{display:grid;gap:12px;animation:tin .8s var(--ease)}
.prod{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prod div{border-radius:16px;padding:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.prod div i{display:block;aspect-ratio:1.3;border-radius:11px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.03));margin-bottom:10px}
.prod div b{font-size:13px;display:flex;justify-content:space-between}
.prod div span{display:block;margin-top:8px;font-size:11.5px;text-align:center;padding:7px;border-radius:999px;background:#FFFFFF;color:var(--p0);font-weight:600}
.cartbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);font-size:13.5px}
.cartbar b{font-weight:600}
.pres-hero{height:150px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.03));display:flex;align-items:flex-end;padding:16px;font-weight:650;font-size:22px;letter-spacing:-.03em}
.pres-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pres-row div{border-radius:16px;padding:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pres-row div b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.pres-gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}.pres-gal i{height:70px;border-radius:12px;background:rgba(255,255,255,.08)}

/* marquee */
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--p0) 10%,var(--p0) 90%,transparent);mask:linear-gradient(90deg,transparent,var(--p0) 10%,var(--p0) 90%,transparent);margin-top:70px}
.marq-in{display:flex;gap:12px;width:max-content;animation:marq 40s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq span{font-size:15px;padding:12px 20px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap;transition:.4s}
.marq span:hover{color:var(--p0);background:#FFFFFF}
@keyframes marq{to{transform:translateX(-50%)}}

/* faq */
.faq{margin-top:50px;display:grid;gap:12px;max-width:860px}
.qa{border-radius:22px;overflow:hidden}
.qa button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:17px;font-weight:550;letter-spacing:-.015em}
.qa button i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);flex:none;position:relative;transition:transform .6s var(--ease),background .4s}
.qa button i::before,.qa button i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:#FFFFFF;border-radius:2px;transition:transform .6s var(--ease)}
.qa button i::after{transform:rotate(90deg)}
.qa.open button i{transform:rotate(180deg);background:rgba(255,255,255,.1)}
.qa.open button i::after{transform:rotate(0)}
.qa .ans{height:0;overflow:hidden;transition:height .6s var(--ease)}
.qa .ans p{padding:0 24px 24px;color:var(--muted);font-size:15.5px;max-width:70ch}

/* form */
.brief{margin-top:50px;border-radius:36px;padding:clamp(20px,3.6vw,48px);display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,4vw,56px)}
.brief>*,.grid2>*,.two>*,.calc>*,.proc-grid>*,.types-grid>*,.work-card>*{min-width:0}
.bsteps{display:grid;gap:4px;align-content:start;position:sticky;top:110px}
.bsteps button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;padding:12px 14px;border-radius:14px;cursor:pointer;color:var(--dim);font-size:14.5px;font-weight:500;transition:.4s}
.bsteps button b{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;flex:none;transition:.4s}
.bsteps button.on{color:var(--text);background:rgba(255,255,255,.06)}
.bsteps button.on b{background:#FFFFFF;color:var(--p0);border-color:#FFFFFF}
.bsteps button.done b{background:rgba(255,255,255,.14);color:#FFFFFF}
.bprog{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin:14px 14px 0;overflow:hidden}
.bprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dim),#FFFFFF);transition:width .7s var(--ease)}
.bsave{font-size:12px;color:var(--dim);padding:10px 14px}
.pane{display:none}.pane.on{display:block;animation:tin .7s var(--ease)}
.pane h3{font-size:clamp(24px,2.6vw,30px)}
.pane>p.muted{margin-top:8px;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.full{grid-column:1/-1}
.f label,.f .lbl{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px;font-weight:500}
.f label em{font-style:normal;color:#FFFFFF}
.in-c{width:100%;height:52px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.04);padding:0 16px;font-size:15.5px;outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
textarea.in-c{height:auto;min-height:110px;padding:14px 16px;resize:vertical;line-height:1.5}
select.in-c{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A1A1A6' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select.in-c option{background:var(--p1b)}
.in-c:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.in-c::placeholder{color:#445674}
.f.err .in-c{border-color:#FFFFFF;box-shadow:0 0 0 4px rgba(255,255,255,.12);animation:shake .4s}
.f .errmsg{display:none;font-size:12.5px;margin-top:6px;color:#FFFFFF}
.f.err .errmsg{display:block}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);font-size:14px;color:var(--muted);cursor:pointer;transition:.35s var(--ease);user-select:none}
.chip span::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--dim);transition:.35s var(--ease)}
.chip input[type=checkbox]+span::before{border-radius:4px}
.chip input:checked+span{background:#FFFFFF;color:var(--p0);border-color:#FFFFFF}
.chip input:checked+span::before{background:var(--p0);border-color:var(--p0);box-shadow:inset 0 0 0 3px #FFFFFF}
.chip input:focus-visible+span{outline:2px solid #FFFFFF;outline-offset:2px}
.drop{border:1.5px dashed var(--line2);border-radius:20px;padding:26px;text-align:center;cursor:pointer;transition:.35s var(--ease);position:relative}
.drop:hover,.drop.over{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
.drop svg{width:28px;height:28px;margin:0 auto 10px;color:var(--muted)}
.drop b{font-weight:600;font-size:15px}
.drop small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:12px}
.thumbs div{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--p1b);animation:tin .5s var(--ease)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .pdf{display:grid;place-items:center;font-size:11px;color:var(--muted);padding:6px;text-align:center;word-break:break-all}
.thumbs button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(var(--sh-rgb),.7);color:#FFFFFF;cursor:pointer;font-size:14px;line-height:1}
.hours{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:54px 1fr 1fr auto;gap:8px;align-items:center}
.hrow>span{font-size:14px;color:var(--muted)}
.hrow .in-c{height:44px;padding:0 10px;font-size:14px;min-width:0;width:100%}
.hrow.closed .in-c{opacity:.3;pointer-events:none}
.mini-chip span{height:36px;font-size:13px;padding:0 12px}
.items{display:grid;gap:8px}
.irow{display:grid;grid-template-columns:1.4fr .7fr 1.6fr 40px;gap:8px;animation:tin .5s var(--ease)}
.irow .in-c{height:46px;font-size:14.5px}
.irow button{border:1px solid var(--line2);background:transparent;border-radius:12px;cursor:pointer;color:var(--muted);font-size:18px}
.addbtn{margin-top:10px;border:1px dashed var(--line2);background:transparent;border-radius:14px;height:44px;padding:0 16px;color:var(--muted);cursor:pointer;font-size:14px;transition:.3s}
.addbtn:hover{color:#FFFFFF;border-color:rgba(255,255,255,.5)}
.colors{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.colors label.sw{width:52px;height:52px;border-radius:16px;border:1px solid var(--line2);overflow:hidden;position:relative;cursor:pointer;margin:0}
.colors input[type=color]{position:absolute;inset:-10px;width:80px;height:80px;border:0;cursor:pointer;background:none}
.pnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.review{margin-top:24px;display:grid;gap:10px}
.rv{border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.rv h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between}
.rv h4 a{letter-spacing:0;text-transform:none;color:var(--muted);font-size:13px;cursor:pointer}
.rv dl{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:14px}
.rv dt{color:var(--dim)}.rv dd{color:var(--text);word-break:break-word}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;color:var(--muted);cursor:pointer}
.consent input{width:20px;height:20px;accent-color:#FFFFFF;flex:none;margin-top:1px}
.send-row{display:flex;gap:10px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:28px;width:max-content;transform:translate(-50%,30px);opacity:0;z-index:80;padding:14px 20px;border-radius:18px;font-size:14.5px;display:flex;gap:10px;align-items:center;transition:.6s var(--ease);pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;flex:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.cc{border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:30px;min-height:220px;transition:transform .7s var(--ease)}
.cc .ic{margin:0}
.cc small{color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.cc b{display:block;font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;margin-top:6px;overflow-wrap:anywhere}
.cc b.em{font-size:clamp(16px,1.55vw,20px)}
.cc .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.cc .go svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.cc:hover .go svg{transform:translate(3px,-3px)}
.final{text-align:center;padding-bottom:60px}
.final h2{margin:0 auto;max-width:16ch}
.final .cta-row{justify-content:center}

footer{border-top:1px solid var(--line);padding:50px 0 40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot .logo-svg{height:26px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot nav a:hover{color:#FFFFFF}
.foot p{font-size:13px;color:var(--dim);width:100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px}

/* floating wa */
.fab{position:fixed;right:20px;bottom:20px;z-index:45;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;transition:transform .6s var(--ease),opacity .5s}
.fab.hide{opacity:0;transform:translateY(20px) scale(.8);pointer-events:none}
.fab svg{width:26px;height:26px}
.fab:hover{transform:scale(1.08)}
.ai-open .fab{opacity:0;pointer-events:none}
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:46;height:52px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 18px 0 7px;cursor:pointer;color:var(--text);font-weight:600;font-size:14.5px;transition:transform .5s var(--ease),opacity .4s}
.ai-fab:hover{transform:translateY(-2px)}
.ai-dot{width:38px;height:38px;border-radius:50%;background:#F5F5F7;display:grid;place-items:center;flex:none}
.ai-dot .mark,.ai-av .mark{width:21px;color:var(--p1)}
.ai-open .ai-fab{opacity:0;pointer-events:none}
.ai{position:fixed;right:20px;bottom:20px;z-index:70;width:min(390px,calc(100vw - 24px));height:min(600px,calc(100svh - 110px));border-radius:28px;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 38%,rgba(255,255,255,.08)),rgba(var(--g-rgb),.5);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 40px rgba(255,255,255,.03),0 40px 90px -20px rgba(var(--sh-rgb),.85)}
.ai::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 20% -10%,rgba(255,255,255,.18),transparent 55%)}
.ai>*{position:relative}
.ai-open .ai{opacity:1;transform:none;pointer-events:auto}
.ai-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.ai-av{width:40px;height:40px;border-radius:50%;background:#F5F5F7;display:grid;place-items:center;flex:none}
.ai-head b{font-size:15.5px;display:block;font-weight:600}
.ai-head small{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ai-head small i{width:6px;height:6px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 8px #FFFFFF}
.ai-x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:#FFFFFF;font-size:20px;line-height:1;cursor:pointer}
.ai-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.am{max-width:88%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.5;animation:tin .4s var(--ease)}
.am.b{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);border-bottom-left-radius:6px;align-self:flex-start}
.am.u{background:#FFFFFF;color:var(--p1);border-bottom-right-radius:6px;align-self:flex-end}
.am .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.am .acts a{font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;background:#FFFFFF;color:var(--p0)}
.am .acts a.g{background:rgba(255,255,255,.1);color:#FFFFFF}
.typing-d{display:flex;gap:4px;padding:15px 16px}
.typing-d i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:td 1s infinite}
.typing-d i:nth-child(2){animation-delay:.15s}.typing-d i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ai-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chips button{flex:none;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.3s}
.ai-chips button:hover{color:var(--p0);background:#FFFFFF}
.ai-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ai-in input{flex:1;min-width:0;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(var(--sh-rgb),.28);padding:0 16px;font-size:16px;outline:none}
.ai-in input:focus{border-color:rgba(255,255,255,.45)}
.ai-in button{width:46px;height:46px;border-radius:50%;border:0;background:#FFFFFF;color:var(--p0);display:grid;place-items:center;cursor:pointer;flex:none}
.ai-in button svg{width:18px;height:18px}
.ask-row{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted)}
@media (max-width:640px){.ai-fab{right:14px;bottom:14px;width:54px;height:54px;padding:0;justify-content:center}.ai-fab>span:last-child{display:none}.ai-fab.hide{opacity:0;transform:translateY(20px);pointer-events:none}.ai{right:8px;left:8px;bottom:8px;width:auto;height:min(80svh,640px)}}
.fab .tip{position:absolute;right:72px;white-space:nowrap;font-size:13px;padding:8px 12px;border-radius:12px;background:#FFFFFF;color:var(--p0);font-weight:600;opacity:0;transform:translateX(8px);transition:.4s var(--ease);pointer-events:none}
.fab:hover .tip{opacity:1;transform:none}

/* cursor */
.cur-dot{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;z-index:100;border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(2px) brightness(1.3);backdrop-filter:blur(2px) brightness(1.3);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s,background .3s;opacity:0}
.cur-dot.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.06)}
.cur-dot.show{opacity:1}

/* loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.gone{opacity:0;visibility:hidden}
.loader .mark{width:72px;color:#FFFFFF;animation:lblink 1.1s var(--ease) both}
@keyframes lblink{0%{opacity:0;transform:scale(.8);filter:blur(10px)}60%{opacity:1;transform:scale(1);filter:none}}
.mark{color:#FFFFFF}.mark.sm{width:22px}

/* responsive */
@media (max-width:1100px){.nav-mid{display:none}.burger{display:block}.rail{display:none}}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;text-align:left}
  .eye-stage{max-width:420px;width:80%;margin:0 auto;order:-1}
  .hero{padding-top:110px}
  .two,.calc,.proc-grid,.work-card,.types-grid,.brief{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .s2,.s3,.s4,.s6{grid-column:span 2}
  .card.small{grid-column:span 1}
  .contact-grid{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-grid>div:nth-child(2){border-right:0}
  .strip-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .bsteps{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -4px}
  .bsteps::-webkit-scrollbar{display:none}
  .bsteps .bprog,.bsteps .bsave{display:none}
  .proc-track{height:auto}
  .proc-sticky{position:static;height:auto;padding:clamp(80px,14vw,130px) 0}
  .proc-vis{aspect-ratio:1.3}
  .steps{margin-top:22px}.step{padding:12px 0 12px 26px;opacity:.4}.step::before{top:20px}.step p{max-height:none}
  .proc-grid .lead{font-size:16px}
}
@media (max-width:640px){
  .now{display:none}
  .nav{height:58px;top:10px;border-radius:20px}
  .logo-svg{height:21px}
  .nav-right .btn{display:none}
  .grid2{grid-template-columns:1fr}
  .card.small{grid-column:span 2}
  .bento{grid-template-columns:1fr 1fr}
  .orbit-chip{font-size:11px;padding:6px 10px}
  .orbit-chip.c3{left:-8%}.orbit-chip.c2{right:-8%}
  .loss-row{grid-template-columns:1fr}
  .irow{grid-template-columns:1fr 90px 40px}.irow .desc{grid-column:1/3;order:4}
  .hrow{grid-template-columns:36px 1fr 1fr auto;gap:6px}.hrow .in-c{padding:0 6px;font-size:13px}.hrow .mini-chip span{padding:0 10px}.hrow .mini-chip span::before{display:none}
  .rv dl{grid-template-columns:1fr}.rv dt{margin-top:6px}
  .pnav .btn{flex:1}
  .send-row{width:100%}.send-row .btn{flex:1}
  .btn{--h:50px;padding:0 20px}
  .cta-row .btn{flex:1 1 auto}
  .fab{width:54px;height:54px;right:14px;bottom:14px}
  .proc-vis{aspect-ratio:1.25}
  .pv{padding:6%}
  .mock-body{padding:12px;gap:8px}
  .trow>div{padding:16px}
}
@media (hover:none){.cur-dot{display:none}}
.lite #bg{display:none}
.safe [data-reveal],.lite [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.safe .split .w>*,.lite .split .w>*{transform:none!important;transition:none!important}
.lite .pv{transition:opacity .4s ease}.lite .eye-ring.r2{animation:none}
.fxmode{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.fxmode .seg2{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line2)}
.fxmode button{border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;cursor:pointer;transition:.3s}
.fxmode button[aria-pressed=true]{background:#F5F5F7;color:var(--p1)}
.mmenu .fxmode{padding:14px 16px 6px;justify-content:space-between;width:100%}
.has-cur,.has-cur *{cursor:none}
.has-cur input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),.has-cur textarea,.has-cur select{cursor:text}
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;mix-blend-mode:difference;transition:opacity .3s}
.cur-d{width:6px;height:6px;margin:-3px 0 0 -3px;background:#FFFFFF}
.cur-r{width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid #FFFFFF;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,opacity .3s}
.cur-r.on{width:52px;height:52px;margin:-26px 0 0 -26px;background:#FFFFFF}
.cur-r.down{width:22px;height:22px;margin:-11px 0 0 -11px}
.cur.off{opacity:0}
.tap{position:fixed;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1px solid rgba(255,255,255,.7);pointer-events:none;z-index:299;animation:tap .55s var(--ease) forwards}
@keyframes tap{from{transform:scale(.2);opacity:1}to{transform:scale(1);opacity:0}}
.lite .fx{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:30px 30px}
.lite .eye-ring.r2,.lite .orbit-chip,.lite .marq-in,.lite .ph-grid i,.lite .build .blk,.lite .typing::after,.lite .phone-mini .feed,.lite .launch .bigmark,.lite .browser .shot iframe.ok,.lite .swap .thumb{animation:none!important}
.lite .blur,.lite .ai{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite .blur{background:rgba(var(--g-rgb),.97)}.lite .mmenu{background:#06214F!important}.lite .toast{background:var(--p1b)}.lite .ai{background:linear-gradient(160deg,#082B69,#06204D)}
.lite [data-reveal]{transition-duration:.6s}
@media (prefers-reduced-motion:reduce){[data-reveal]{transform:none}html{scroll-behavior:auto}}


/* =====================  Visara v2 · Galactic night, liquid glass  ===================== */
@font-face{font-family:Archivo;src:url(/fonts/archivo-wdth.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  --navy:var(--p1);--deep:var(--p0);--blue:var(--p3);--pink:var(--acc);--pink2:#E0109F;
  --bg:var(--p1);--bg2:var(--p1b);--text:#F4F8FF;--muted:var(--muted);--dim:var(--dim);
  --line:rgba(var(--p3l-rgb),.11);--line2:rgba(var(--p3l-rgb),.2);
  --glass:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 42%,rgba(120,180,255,.07));
  --disp:Archivo,Inter,system-ui,sans-serif;
}
body{background:var(--deep)}
#bg{background:radial-gradient(120vmax 90vmax at 88% -25%,#0F3580 0%,rgba(15,53,128,0) 55%),radial-gradient(90vmax 80vmax at -20% 45%,#0B2865 0%,rgba(11,40,101,0) 60%),linear-gradient(180deg,var(--p1),var(--p0))}
.fx{display:none}
::selection{background:var(--pink);color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* type: a wide display face for headlines, set big */
h1,h2,h3,.big,.loss-big,.loss-row b,.wordmark,.final h2{font-family:var(--disp)}
h1,h2{font-stretch:112%;font-weight:760;letter-spacing:-.035em}
h2{font-size:clamp(40px,7.2vw,112px);line-height:.95;max-width:15ch}
h3{font-stretch:106%;font-weight:680;letter-spacing:-.02em}
.hero h1{font-size:clamp(48px,9.2vw,148px);line-height:.9;letter-spacing:-.04em}
.lead{font-size:clamp(18px,1.6vw,23px);line-height:1.5}
.big{font-stretch:110%;font-weight:760;letter-spacing:-.03em}
.kicker{display:none!important}
.accent{color:var(--pink)}
.glass-text{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pink)!important;filter:none!important}
@media (max-width:760px){
  h1,h2{font-stretch:100%}
  h2{font-size:clamp(36px,10.6vw,58px);max-width:none}
  .hero h1{font-size:clamp(44px,13.4vw,70px)}
  .lead{font-size:17px}
}

/* liquid glass: frosted, refracting, lit by one moving light source */
.glass{background:var(--glass),rgba(var(--g-rgb),.4)!important;border:1px solid rgba(var(--p3l-rgb),.17)!important;
  -webkit-backdrop-filter:blur(24px) saturate(185%) brightness(1.05);backdrop-filter:blur(24px) saturate(185%) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(130,190,255,.14),0 30px 70px -36px rgba(var(--sh-rgb),.95),0 2px 10px -4px rgba(var(--sh-rgb),.5)!important}
.glass::before{opacity:.95!important;background:radial-gradient(460px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.13),rgba(255,255,255,0) 55%),linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.05) 44%,rgba(255,255,255,0) 58%)!important}
.glass::after{opacity:.8!important;background:radial-gradient(300px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.85),rgba(150,205,255,.28) 38%,rgba(255,255,255,0) 66%)!important}
.glass:hover::after{opacity:1!important}
@media (hover:none){.glass{-webkit-backdrop-filter:blur(18px) saturate(175%);backdrop-filter:blur(18px) saturate(175%)}}
.lite .glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--glass),rgba(var(--g-rgb),.88)!important}
.lq-ok .nav.glass{-webkit-backdrop-filter:url(#lqf) blur(16px) saturate(190%);backdrop-filter:url(#lqf) blur(16px) saturate(190%)}

/* the one loud colour: actions and the numbers that matter */
.btn-primary{background:linear-gradient(180deg,#FF5BE4,#E312C4)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 8px rgba(110,0,70,.28),0 14px 34px -12px rgba(var(--acc-rgb),.75)!important}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 8px rgba(110,0,70,.28),0 20px 48px -12px rgba(var(--acc-rgb),.95)!important}
.btn-primary .arr,.btn-primary svg{color:#fff}
.eyebrow b{background:var(--pink)!important}.eyebrow b::after{border-color:var(--pink)!important}
.bsteps button.on b{background:var(--pink)!important;border-color:var(--pink)!important;color:#fff!important}
input[type=range]{accent-color:var(--pink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* hero: lens with light trails, and the giant wordmark */
.hero{flex-direction:column;align-items:stretch!important;justify-content:center;padding-bottom:0!important;overflow:hidden}
.hero>.wrap{flex:1;display:grid;align-content:center}
.wordmark{margin:clamp(6px,2vh,30px) var(--pad) 0;line-height:.74;overflow:hidden;pointer-events:none;user-select:none;position:relative}
.wordmark span{display:inline-block;font-stretch:125%;font-weight:820;letter-spacing:-.05em;color:#F4F8FF;white-space:nowrap;font-size:22vw;transform:translateY(9%)}
.wordmark::after{content:"";position:absolute;left:-10%;right:-10%;top:30%;height:26%;border-radius:999px;filter:blur(26px);opacity:.55;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(var(--p3-rgb),0),rgba(var(--p3-rgb),.9) 35%,rgba(var(--acc-rgb),.95) 62%,rgba(var(--acc-rgb),0));animation:sweep 14s ease-in-out infinite alternate}
@keyframes sweep{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.eye-stage .trail{position:absolute;left:-34%;right:18%;top:40%;height:17%;border-radius:999px;filter:blur(24px);opacity:.8;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--p3-rgb),0),rgba(var(--p3-rgb),.85) 55%,rgba(var(--acc-rgb),.95) 86%,rgba(var(--acc-rgb),0));animation:trail 9s ease-in-out infinite alternate}
.eye-stage .trail.t2{top:27%;height:7%;left:-55%;right:34%;opacity:.6;animation-duration:12s;background:linear-gradient(90deg,rgba(var(--acc-rgb),0),rgba(var(--acc-rgb),.85) 72%,rgba(var(--acc-rgb),0))}
.eye-stage .trail.t3{top:63%;height:5%;left:-46%;right:28%;opacity:.55;animation-duration:14s;background:linear-gradient(90deg,rgba(var(--p3l-rgb),0),rgba(var(--p3l-rgb),.9) 70%,rgba(var(--p3l-rgb),0))}
@keyframes trail{from{transform:translateX(-5%)}to{transform:translateX(7%)}}
.eye-orb{inset:13%!important;border-radius:50%;border:1px solid rgba(220,235,255,.3);
  background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.36),rgba(255,255,255,0) 32%),radial-gradient(circle at 72% 84%,rgba(var(--acc-rgb),.24),rgba(var(--acc-rgb),0) 46%),radial-gradient(circle at 50% 50%,rgba(var(--p3-rgb),.12),rgba(var(--g-rgb),.3) 72%)!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -22px 46px rgba(var(--p3-rgb),.2),0 44px 90px -30px rgba(0,6,22,.95);
  -webkit-backdrop-filter:blur(7px) saturate(165%);backdrop-filter:blur(7px) saturate(165%)}
.lq-ok .eye-orb{-webkit-backdrop-filter:url(#lqf) blur(5px) saturate(175%);backdrop-filter:url(#lqf) blur(5px) saturate(175%)}
.eye-ring{border-color:rgba(170,205,255,.12)!important}
.lite .eye-stage .trail,.lite .wordmark::after{animation:none}
@media (prefers-reduced-motion:reduce){.eye-stage .trail,.wordmark::after{animation:none}}
@media (max-width:980px){.eye-stage .trail{filter:blur(16px)}}

/* stats */
.strip-grid .big{font-size:clamp(40px,5vw,72px)}

/* calculator */
.loss-top{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;font-size:15px}
.cur-pick{border-radius:999px;display:inline-flex}
.cur-pick select{-webkit-appearance:none;appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F8FF' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center;
  border:0;color:var(--text);font-size:13px;font-weight:600;padding:9px 32px 9px 14px;cursor:pointer;border-radius:999px;max-width:220px}
.cur-pick select option{background:var(--p1b);color:#F4F8FF}
.loss-big{display:flex!important;align-items:baseline;flex-wrap:wrap;column-gap:.16em;font-size:clamp(52px,6.6vw,104px)!important;font-stretch:100%;font-weight:780;color:var(--pink);letter-spacing:-.04em;margin-top:6px}
.loss-big .lu{font-size:.36em;color:var(--text);font-weight:650;letter-spacing:-.01em}
.loss-row b{font-stretch:100%;font-weight:720}
.bars i{background:linear-gradient(180deg,var(--pink),rgba(var(--p3-rgb),.4))!important}

/* phones: nothing scrolls sideways */
@media (max-width:900px){
  .tscroll{overflow:visible!important}
  .tscroll .table{min-width:0!important}
  .table .thead{display:none!important}
  .trow{grid-template-columns:repeat(3,1fr)!important;padding:4px 0 14px}
  .trow>div{padding:8px 14px!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important;font-size:13.5px!important;line-height:1.35;order:2}
  .trow>div:first-child{grid-column:1/-1;order:0;font-family:var(--disp);font-size:20px!important;font-weight:700;padding:18px 16px 6px!important}
  .trow>div.v{grid-column:1/-1;order:1;margin:4px 12px 6px;border-radius:14px;background:rgba(var(--acc-rgb),.13)!important;font-size:16px!important;padding:12px 14px!important}
  .trow>div:not(:first-child)::before{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:3px;font-weight:600}
  .trow>div:nth-child(2)::before{content:'Agency'}.trow>div:nth-child(3)::before{content:'Freelancer'}.trow>div:nth-child(4)::before{content:'DIY builder'}
  .trow>div.v::before{content:'Visara';color:#FF6BE6}
}
.ai-chips{flex-wrap:wrap!important;overflow:visible!important}
@media (max-width:980px){
  .bsteps{grid-auto-flow:row!important;grid-template-columns:repeat(6,1fr)!important;overflow:visible!important;margin:0!important;gap:6px!important}
  .bsteps button{justify-content:center!important;padding:8px 0!important;font-size:0!important;gap:0!important}
  .bsteps button b{font-size:13px!important;width:36px;height:36px}
}

/* menu demo */
.mn{margin-top:clamp(36px,5vw,64px);border-radius:var(--r);padding:clamp(14px,2.2vw,26px)}
.mn-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mn-tab{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 8px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-weight:600;font-size:15px;cursor:pointer;transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease)}
.mn-tab svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mn-tab:hover{color:var(--text);border-color:var(--line2)}
.mn-tab[aria-selected=true]{background:#F4F8FF;color:var(--p1);border-color:#F4F8FF;box-shadow:0 12px 30px -14px rgba(160,200,255,.6)}
.mn-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.mi{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:14px 16px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:border-color .35s,background .35s}
.mi[hidden]{display:none}
.mi:hover{border-color:var(--line2);background:rgba(255,255,255,.05)}
.mi-ic{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;border:1px solid rgba(var(--p3l-rgb),.18);
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%),rgba(var(--p3-rgb),.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 14px 30px -18px rgba(var(--sh-rgb),.9)}
.mi-ic svg{width:44px;height:44px;fill:none;stroke:#F4F8FF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.mi:hover .mi-ic svg{transform:rotate(-6deg) scale(1.06)}
.mi-t b{display:block;font-family:var(--disp);font-stretch:104%;font-size:19px;font-weight:680;letter-spacing:-.015em}
.mi-t small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:3px}
.mi-r{display:flex;align-items:center;gap:12px}
.mi-p{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mi-add{border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);padding:9px 16px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .3s,border-color .3s}
.mi-add:hover{border-color:#F4F8FF}
.mi-add.has{background:var(--pink);border-color:var(--pink);color:#fff}
.mn-cart{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(2,15,39,.5);border:1px solid var(--line)}
.mn-sum{display:flex;gap:14px;align-items:baseline;font-variant-numeric:tabular-nums}
.mn-sum b{font-weight:600;color:var(--muted)}
#mnTotal{font-family:var(--disp);font-size:22px;font-weight:720}
.mn-cart .btn{gap:10px}.mn-cart .btn svg{width:18px;height:18px}
.mn-cta{margin-top:26px}
@media (max-width:900px){.mn-list{grid-template-columns:1fr}}
@media (max-width:560px){
  .mn-tabs{gap:5px}
  .mn-tab{flex-direction:column;gap:5px;font-size:11px;padding:10px 0;border-radius:14px;letter-spacing:-.01em}
  .mn-tab svg{width:24px;height:24px}
  .mi{gap:12px;padding:12px;border-radius:18px}
  .mi-ic{width:56px;height:56px;border-radius:16px}.mi-ic svg{width:34px;height:34px}
  .mi-t b{font-size:16.5px}.mi-t small{font-size:13px}
  .mi-r{flex-direction:column;align-items:flex-end;gap:8px}
  .mi-add{padding:7px 12px;font-size:12.5px}
  .mn-cart{border-radius:22px;padding:12px 12px 12px 16px}
  .mn-sum{flex-direction:column;gap:2px}
  .mn-cart .btn{padding:12px 14px;font-size:14px}
}

/* cursor: a small glass lens, no colour inversion */
.cur{mix-blend-mode:normal!important}
.cur-d{background:#F4F8FF!important;box-shadow:0 0 0 1px rgba(var(--g-rgb),.35)}
.cur-r{border:1.5px solid rgba(244,248,255,.85)!important;box-shadow:0 0 0 1px rgba(var(--g-rgb),.25),inset 0 0 0 1px rgba(var(--g-rgb),.15)}
.cur-r.on{width:40px!important;height:40px!important;margin:-20px 0 0 -20px!important;background:rgba(244,248,255,.1)!important;
  -webkit-backdrop-filter:blur(3px) saturate(160%) brightness(1.15);backdrop-filter:blur(3px) saturate(160%) brightness(1.15)}

/* readability */
.step{opacity:.62!important}.step.on{opacity:1!important}
::placeholder{color:#7F91B4!important;opacity:1}


/* =====================  v3 · neon ambience, liquid glass, living type, pages  ===================== */
#pt{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#bg{opacity:.9}
.rail[hidden]{display:none!important}

/* liquid glass: thin, frosted, bright-edged; the neon motes behind it bloom into soft light */
.glass{background:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.035) 36%,rgba(255,255,255,.015) 64%,rgba(var(--p3l-rgb),.07)),rgba(var(--g-rgb),.22)!important;
  -webkit-backdrop-filter:blur(20px) saturate(230%) brightness(1.1);backdrop-filter:blur(20px) saturate(230%) brightness(1.1);
  border:1px solid rgba(var(--p3l-rgb),.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(var(--acc-rgb),.18),inset -1px 0 0 rgba(var(--p3l-rgb),.24),
    inset 0 26px 40px -34px rgba(255,255,255,.38),inset 0 -34px 54px -44px rgba(var(--p3-rgb),.4),0 40px 80px -42px rgba(var(--sh-rgb),.95),0 3px 14px -6px rgba(var(--sh-rgb),.55)!important}
.glass::before{opacity:1!important;background:
    radial-gradient(520px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.15),rgba(255,255,255,0) 52%),
    linear-gradient(104deg,rgba(255,255,255,0) calc(var(--gx,30%) - 20%),rgba(255,255,255,.075) var(--gx,30%),rgba(255,255,255,0) calc(var(--gx,30%) + 20%)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important;
  background-size:auto,auto,160px 160px!important}
@media (hover:none){.glass{-webkit-backdrop-filter:blur(16px) saturate(210%) brightness(1.08);backdrop-filter:blur(16px) saturate(210%) brightness(1.08)}}

/* living type */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform-origin:50% 85%;transition:transform .38s cubic-bezier(.2,.8,.2,1),color .38s;
  color:color-mix(in srgb,var(--p3l) calc(var(--g,0) * 70%),currentColor)}
.accent .ch{color:color-mix(in srgb,#FF8FDC calc(var(--g,0) * 60%),var(--pink))}
/* one soft neon light behind the heading, under the cursor: no per-letter halos, so no seams */
main h1,main h2{position:relative;isolation:isolate}
main h1.live::before,main h2.live::before{content:"";position:absolute;inset:-.4em -.3em;z-index:-1;pointer-events:none;opacity:var(--ho,0);transition:opacity .5s;
  background:radial-gradient(1.5em 1.1em at calc(var(--hx,50%) + .3em) calc(var(--hy,50%) + .4em),rgba(var(--p3-rgb),.42),rgba(var(--p3-rgb),.14) 45%,rgba(var(--p3-rgb),0) 72%),
    radial-gradient(.9em .7em at calc(var(--hx,50%) + .3em) calc(var(--hy,50%) + .4em),rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),0) 70%);filter:blur(10px)}
.wordmark .ch{transform-origin:50% 100%}

/* each page opens with its own headline */
h1.ph1{font-size:clamp(44px,7.6vw,122px);line-height:.94;max-width:15ch}
@media (max-width:760px){h1.ph1{font-size:clamp(38px,11.2vw,62px);max-width:none}}

/* home: a map of the studio */
.xgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(36px,5vw,64px)}
.xcard{position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(200px,19vw,270px);padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px) clamp(56px,5vw,70px);border-radius:var(--r);overflow:hidden;color:var(--text);transition:transform .5s var(--ease)}
.xcard:hover{transform:translateY(-4px)}
.x-wide{grid-column:span 2}.x-full{grid-column:1/-1;min-height:0}
.xk{font-size:13.5px;font-weight:600;color:var(--muted)}
.xcard b{font-family:var(--disp);font-stretch:108%;font-weight:720;font-size:clamp(24px,2.4vw,38px);line-height:1.05;letter-spacing:-.025em;max-width:17ch}
.x-full b{max-width:30ch}
.xs{color:var(--muted);font-size:15px}
.xa{position:absolute;right:clamp(20px,2vw,30px);bottom:clamp(20px,2vw,28px);width:26px;height:26px;color:var(--text);transition:transform .45s var(--ease)}
.xcard:hover .xa{transform:translateX(6px)}
.x-hot{background:linear-gradient(115deg,rgba(var(--acc-rgb),.42),rgba(var(--acc-rgb),.12) 45%,rgba(var(--p3-rgb),.2)),rgba(var(--g-rgb),.28)!important}
@media (max-width:900px){.xgrid{grid-template-columns:1fr 1fr}.x-wide,.x-full{grid-column:1/-1}}
@media (max-width:560px){.xgrid{grid-template-columns:1fr;gap:10px}.xcard{min-height:150px}.xcard b{font-size:25px}}

/* page to page: content dissolves through the glass while the ambience carries on */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
#bg{view-transition-name:streaks}
#pt{view-transition-name:motes}
::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px);filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* letters that swell are never clipped */
.split.live .w,h1.live .w,h2.live .w{overflow:visible!important}

/* neon glow on the letters, drawn on a copy behind them so a glow never covers its neighbour */
.glow-l{position:absolute;inset:0;z-index:-1;pointer-events:none;color:transparent!important;user-select:none}
.glow-l .ch{color:transparent!important;text-shadow:0 0 calc(var(--g,0) * .16em) rgba(var(--p3l-rgb),calc(var(--g,0) * 1)),0 0 calc(var(--g,0) * .45em) rgba(var(--p3-rgb),calc(var(--g,0) * .85)),0 0 calc(var(--g,0) * 1em) rgba(var(--p3-rgb),calc(var(--g,0) * .55))}
.glow-l .accent .ch{text-shadow:0 0 calc(var(--g,0) * .16em) rgba(255,170,228,calc(var(--g,0) * 1)),0 0 calc(var(--g,0) * .45em) rgba(var(--acc-rgb),calc(var(--g,0) * .85)),0 0 calc(var(--g,0) * 1em) rgba(var(--acc-rgb),calc(var(--g,0) * .5))}
.glow-l .w>span{transform:none!important}

/* storm: GPU clouds behind everything, a strike layer above the page (never blocks clicks) */
.has-clouds #bg{opacity:1;background:var(--p1)}
.tap{display:none!important}

/* nav: plain blur so text scrolling underneath stays unreadable (the refraction layer cancelled the blur) */
.lq-ok .nav.glass{-webkit-backdrop-filter:blur(18px) saturate(190%);backdrop-filter:blur(18px) saturate(190%)}
.nav.glass{background-color:rgba(var(--g-rgb),.34)}
/* giant wordmark: let the glow breathe past the box instead of being cut into a rectangle; keep the sunken bottom crop */
.wordmark{overflow:visible;clip-path:inset(-50vh calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)))}
.wordmark .glow-l .ch{text-shadow:0 0 calc(var(--g,0) * 10px) rgba(var(--p3l-rgb),calc(var(--g,0) * .9)),0 0 calc(var(--g,0) * 34px) rgba(var(--p3-rgb),calc(var(--g,0) * .6)),0 0 calc(var(--g,0) * 80px) rgba(var(--p3-rgb),calc(var(--g,0) * .35))}

/* process: plain rows instead of a pinned slideshow */
.process.plain{padding:clamp(130px,17vh,180px) 0 clamp(50px,9vh,110px)}
.proc-head{max-width:820px;margin-bottom:clamp(44px,8vh,90px)}
.proc-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,7vh,80px)}
.prow{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center}
.prow>*{min-width:0}
.prow:nth-child(even) .ptext{order:2}
.ptext .n{display:block;font-size:13px;color:var(--dim);letter-spacing:.16em;font-weight:600}
.ptext h2{font-size:clamp(30px,3.6vw,48px);line-height:1.04;margin:12px 0 14px}
.ptext p{color:var(--muted);font-size:clamp(16px,1.25vw,18px);max-width:440px;line-height:1.6}
.prow .proc-vis{aspect-ratio:1.5;border-radius:30px}
.prow .pv{opacity:1;transform:none}
@media (max-width:860px){.prow{grid-template-columns:1fr;gap:20px}.prow:nth-child(even) .ptext{order:0}.prow .proc-vis{aspect-ratio:1.25}.ptext h2{font-size:clamp(26px,7vw,34px)}}

/* website-type preview: icon tiles, and the price reads as text (it was picking up the Add button's pill) */
.prod div i{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(var(--p3l-rgb),.16),rgba(255,255,255,.03) 70%)}
.prod div i svg{width:44%;aspect-ratio:1;height:auto;fill:none;stroke:#F4F8FF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.prod div:hover i svg{transform:rotate(-6deg) scale(1.06)}
.prod div b{align-items:baseline;gap:8px}
.prod div b span{display:inline;margin:0;padding:0;background:none;border-radius:0;font-size:13px;color:var(--p3l);font-weight:700;text-align:right;white-space:nowrap}
.pres-gal i{display:grid;place-items:center}
.pres-gal svg{width:30px;height:30px;fill:none;stroke:#F4F8FF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.prow{grid-template-columns:1fr 1fr}
.prow .proc-vis{aspect-ratio:auto}
.prow .pv{position:relative;inset:auto;padding:7% 8%;min-height:300px}
@media (max-width:860px){.prow{grid-template-columns:1fr}.prow .pv{min-height:240px}}

/* website-type preview: genre chips + icon tiles */
.gchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.gchip{border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--muted);font:600 12.5px/1 Inter,system-ui,sans-serif;padding:8px 13px;border-radius:999px;cursor:pointer;transition:color .3s,background .3s,border-color .3s}
.gchip:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.gchip.on{background:#F4F8FF;color:var(--p0);border-color:#F4F8FF}
.gwrap{display:grid;gap:12px}
.gfound{display:grid;gap:12px}
.prod .pi{border-radius:16px;padding:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;flex-direction:column}
.prod .pi i{display:grid;place-items:center;aspect-ratio:1.5;border-radius:11px;margin-bottom:10px;background:radial-gradient(circle at 50% 42%,rgba(var(--p3l-rgb),.16),rgba(255,255,255,.03) 70%)}
.prod .pi i svg{width:40%;aspect-ratio:1;height:auto;fill:none;stroke:#F4F8FF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.prod .pi:hover i svg{transform:rotate(-6deg) scale(1.06)}
.prod .pi b{font-size:13px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex:1}
.prod .pi b span{display:inline;margin:0;padding:0;background:none;border-radius:0;font-size:13px;color:var(--p3l);font-weight:700;white-space:nowrap}
.prod .pa{display:block;width:100%;margin-top:8px;border:0;font:600 11.5px/1 Inter,system-ui,sans-serif;padding:9px;border-radius:999px;background:#FFFFFF;color:var(--p0);cursor:pointer}
.pres-hero{min-height:120px;height:auto}
@media (max-width:520px){.gchip{padding:7px 11px;font-size:12px}.prod .pi b{flex-direction:column;gap:2px}}
/* words stay crisp over a bright sky: a soft dark halo, invisible on plain backgrounds */
main h1,main h2,main h3,main p,main .lead,main li,main .kicker,main .eyebrow{text-shadow:0 1px 2px rgba(var(--sh-rgb),.55),0 0 22px rgba(var(--sh-rgb),.55)}
main .glass p,main .glass li,main .glass h3,main .glass h2{text-shadow:none}


/* ===== page palettes: two quiet colours set the mood, one loud colour is the neon. Every sky stays dark. ===== */
:root{--p0:#010C16;--p1:#021A2B;--p1b:#05304F;--p2:#0593C6;--p3:#7FD6F5;--p3l:#BFEAFA;--acc:#FF4AAE;--acc-core:#FFBAE0;--acc-dim:#622C5D;--p1-rgb:2,26,43;--p2-rgb:5,147,198;--p3-rgb:127,214,245;--p3l-rgb:191,234,250;--acc-rgb:255,74,174;--core-rgb:255,186,224;--g-rgb:5,73,109;--sh-rgb:1,12,22;--bg:#021A2B;--bg2:#05304F;--navy:#021A2B;--deep:#010C16;--graphite:#05304F;--g2:#0593C6;--g3:#0593C6;--blue:#7FD6F5;--pink:#FF4AAE;--pink2:#622C5D;--muted:#DEF4FC;--dim:#7F98A4;--text:#F7F6FB}
html[data-page="home"]{--p0:#010C16;--p1:#021A2B;--p1b:#05304F;--p2:#0593C6;--p3:#7FD6F5;--p3l:#BFEAFA;--acc:#FF4AAE;--acc-core:#FFBAE0;--acc-dim:#622C5D;--p1-rgb:2,26,43;--p2-rgb:5,147,198;--p3-rgb:127,214,245;--p3l-rgb:191,234,250;--acc-rgb:255,74,174;--core-rgb:255,186,224;--g-rgb:5,73,109;--sh-rgb:1,12,22;--bg:#021A2B;--bg2:#05304F;--navy:#021A2B;--deep:#010C16;--graphite:#05304F;--g2:#0593C6;--g3:#0593C6;--blue:#7FD6F5;--pink:#FF4AAE;--pink2:#622C5D;--muted:#DEF4FC;--dim:#7F98A4;--text:#F7F6FB}
html[data-page="start"]{--p0:#010C16;--p1:#021A2B;--p1b:#05304F;--p2:#0593C6;--p3:#7FD6F5;--p3l:#BFEAFA;--acc:#FF4AAE;--acc-core:#FFBAE0;--acc-dim:#622C5D;--p1-rgb:2,26,43;--p2-rgb:5,147,198;--p3-rgb:127,214,245;--p3l-rgb:191,234,250;--acc-rgb:255,74,174;--core-rgb:255,186,224;--g-rgb:5,73,109;--sh-rgb:1,12,22;--bg:#021A2B;--bg2:#05304F;--navy:#021A2B;--deep:#010C16;--graphite:#05304F;--g2:#0593C6;--g3:#0593C6;--blue:#7FD6F5;--pink:#FF4AAE;--pink2:#622C5D;--muted:#DEF4FC;--dim:#7F98A4;--text:#F7F6FB}
html[data-page="why-a-website"]{--p0:#0B0101;--p1:#170303;--p1b:#300906;--p2:#831613;--p3:#E13A26;--p3l:#F09C92;--acc:#FEED65;--acc-core:#FFF8C4;--acc-dim:#6F5C28;--p1-rgb:23,3,3;--p2-rgb:131,22,19;--p3-rgb:225,58,38;--p3l-rgb:240,156,146;--acc-rgb:254,237,101;--core-rgb:255,248,196;--g-rgb:69,12,9;--sh-rgb:11,1,1;--bg:#170303;--bg2:#300906;--navy:#170303;--deep:#0B0101;--graphite:#300906;--g2:#831613;--g3:#831613;--blue:#E13A26;--pink:#FEED65;--pink2:#6F5C28;--muted:#F7CCC7;--dim:#98736F;--text:#F7F6FB}
html[data-page="why-visara"]{--p0:#04030B;--p1:#0A0716;--p1b:#181133;--p2:#3D2E78;--p3:#AD96F1;--p3l:#D6CAF8;--acc:#58F6B1;--acc-core:#C0FCE1;--acc-dim:#286251;--p1-rgb:10,7,22;--p2-rgb:61,46,120;--p3-rgb:173,150,241;--p3l-rgb:214,202,248;--acc-rgb:88,246,177;--core-rgb:192,252,225;--g-rgb:33,24,68;--sh-rgb:4,3,11;--bg:#0A0716;--bg2:#181133;--navy:#0A0716;--deep:#04030B;--graphite:#181133;--g2:#3D2E78;--g3:#3D2E78;--blue:#AD96F1;--pink:#58F6B1;--pink2:#286251;--muted:#EAE4FB;--dim:#8A859B;--text:#F7F6FB}
html[data-page="about"]{--p0:#04030B;--p1:#0A0716;--p1b:#181133;--p2:#3D2E78;--p3:#AD96F1;--p3l:#D6CAF8;--acc:#58F6B1;--acc-core:#C0FCE1;--acc-dim:#286251;--p1-rgb:10,7,22;--p2-rgb:61,46,120;--p3-rgb:173,150,241;--p3l-rgb:214,202,248;--acc-rgb:88,246,177;--core-rgb:192,252,225;--g-rgb:33,24,68;--sh-rgb:4,3,11;--bg:#0A0716;--bg2:#181133;--navy:#0A0716;--deep:#04030B;--graphite:#181133;--g2:#3D2E78;--g3:#3D2E78;--blue:#AD96F1;--pink:#58F6B1;--pink2:#286251;--muted:#EAE4FB;--dim:#8A859B;--text:#F7F6FB}
html[data-page="process"]{--p0:#000A06;--p1:#01150E;--p1b:#012B1D;--p2:#016A44;--p3:#01B36C;--p3l:#80D9B6;--acc:#FEB192;--acc-core:#FFE1D6;--acc-dim:#615040;--p1-rgb:1,21,14;--p2-rgb:1,106,68;--p3-rgb:1,179,108;--p3l-rgb:128,217,182;--acc-rgb:254,177,146;--core-rgb:255,225,214;--g-rgb:1,59,39;--sh-rgb:0,10,6;--bg:#01150E;--bg2:#012B1D;--navy:#01150E;--deep:#000A06;--graphite:#012B1D;--g2:#016A44;--g3:#016A44;--blue:#01B36C;--pink:#FEB192;--pink2:#615040;--muted:#BDEBD9;--dim:#688F80;--text:#F7F6FB}
html[data-page="faq"]{--p0:#000A06;--p1:#01150E;--p1b:#012B1D;--p2:#016A44;--p3:#01B36C;--p3l:#80D9B6;--acc:#FEB192;--acc-core:#FFE1D6;--acc-dim:#615040;--p1-rgb:1,21,14;--p2-rgb:1,106,68;--p3-rgb:1,179,108;--p3l-rgb:128,217,182;--acc-rgb:254,177,146;--core-rgb:255,225,214;--g-rgb:1,59,39;--sh-rgb:0,10,6;--bg:#01150E;--bg2:#012B1D;--navy:#01150E;--deep:#000A06;--graphite:#012B1D;--g2:#016A44;--g3:#016A44;--blue:#01B36C;--pink:#FEB192;--pink2:#615040;--muted:#BDEBD9;--dim:#688F80;--text:#F7F6FB}
html[data-page="work"]{--p0:#0B0003;--p1:#180107;--p1b:#33040F;--p2:#6D0317;--p3:#E52150;--p3l:#F290A8;--acc:#F4EB06;--acc-core:#FBF7A0;--acc-dim:#6C5A07;--p1-rgb:24,1,7;--p2-rgb:109,3,23;--p3-rgb:229,33,80;--p3l-rgb:242,144,168;--acc-rgb:244,235,6;--core-rgb:251,247,160;--g-rgb:66,4,17;--sh-rgb:11,0,3;--bg:#180107;--bg2:#33040F;--navy:#180107;--deep:#0B0003;--graphite:#33040F;--g2:#6D0317;--g3:#6D0317;--blue:#E52150;--pink:#F4EB06;--pink2:#6C5A07;--muted:#F8C5D2;--dim:#996D78;--text:#F7F6FB}

/* neon tube in the page's loud colour: a glass tube traced around each letter, a white-hot core, light spilling onto the wall */
.accent,.loss-big,.glass-text{color:rgba(var(--acc-rgb),.07)!important;-webkit-text-stroke:max(1.6px,.03em) var(--acc-core);paint-order:stroke fill;text-shadow:none!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 4px var(--acc)) drop-shadow(0 0 10px rgba(var(--acc-rgb),.85)) drop-shadow(0 0 22px rgba(var(--acc-rgb),.5))}
.accent .ch{color:inherit}
.btn-primary{background:rgba(var(--acc-rgb),.1)!important;color:var(--acc-core)!important;border:0!important;
  text-shadow:0 0 1px #fff,0 0 7px var(--acc),0 0 16px rgba(var(--acc-rgb),.6)!important;
  box-shadow:inset 0 0 0 2px var(--acc-core),inset 0 0 5px 2px rgba(var(--acc-rgb),.85),inset 0 0 22px rgba(var(--acc-rgb),.4),
    0 0 0 1px rgba(var(--acc-rgb),.55),0 0 9px rgba(var(--acc-rgb),.9),0 0 26px rgba(var(--acc-rgb),.55),0 0 54px rgba(var(--acc-rgb),.28)!important}
.btn-primary:hover{background:rgba(var(--acc-rgb),.18)!important;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 6px 2px rgba(var(--acc-rgb),.95),inset 0 0 28px rgba(var(--acc-rgb),.5),
    0 0 0 1px rgba(var(--acc-rgb),.7),0 0 12px var(--acc),0 0 34px rgba(var(--acc-rgb),.7),0 0 72px rgba(var(--acc-rgb),.36)!important}
.btn-primary svg{filter:drop-shadow(0 0 3px var(--acc))}
.eyebrow b{background:var(--acc-core)!important;box-shadow:0 0 3px var(--acc),0 0 9px var(--acc),0 0 20px rgba(var(--acc-rgb),.6)}
/* the stutter: a tube (or a single letter) drops to dull unlit glass, buzzes, and catches again */
.nfx,.nfx *{transition:none!important}
.accent.nf,.loss-big.nf,.glass-text.nf{filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.15))}
.accent.nf .ch,.accent .ch.nf,.loss-big.nf,.glass-text.nf{-webkit-text-stroke-color:var(--acc-dim);color:rgba(var(--acc-rgb),.04)!important}
.btn-primary.nf{color:var(--acc-dim)!important;text-shadow:none!important;box-shadow:inset 0 0 0 2px var(--acc-dim)!important}
.eyebrow b.nf{background:var(--acc-dim)!important;box-shadow:none}
.x-hot.nf{filter:brightness(.7)}

/* cursor glow: only on the big headings, letters light up in a colour picked fresh each time (no soft blob behind) */
main h1.live::before,main h2.live::before{content:none!important;display:none!important}
.ch{color:color-mix(in srgb,rgb(var(--gc,255,255,255)) calc(var(--g,0) * 45%),currentColor)}
.glow-l .ch{text-shadow:0 0 min(calc(var(--g,0) * .07em),8px) rgba(255,255,255,calc(var(--g,0) * .9)),0 0 min(calc(var(--g,0) * .18em),20px) rgba(var(--gc,255,255,255),calc(var(--g,0) * 1)),0 0 min(calc(var(--g,0) * .34em),38px) rgba(var(--gc,255,255,255),calc(var(--g,0) * .6))!important}

/* cursor: a white dot in a thin ring (mouse and trackpad), swelling over anything clickable. It is the system pointer
   itself, so it moves exactly with the hand */
@media (hover:hover) and (pointer:fine){
  html,html *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='rgba%283%2C8%2C24%2C.38%29' stroke-width='3.2'/%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='white' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='white' stroke='rgba%283%2C8%2C24%2C.45%29' stroke-width='1'/%3E%3C/svg%3E") 20 20,auto}
  a,a *,button,button *,[role=button],label,summary,select,.gchip,.pa,.chip,.drop,.step,[data-ai],input[type=range],input[type=checkbox],input[type=radio]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='17' fill='rgba%28255%2C255%2C255%2C.16%29' stroke='rgba%283%2C8%2C24%2C.38%29' stroke-width='3.2'/%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='white' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='2.4' fill='white' stroke='rgba%283%2C8%2C24%2C.45%29' stroke-width='1'/%3E%3C/svg%3E") 20 20,pointer}
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),textarea{cursor:text}
}

/* neon, built like a real sign. Front layer: the white-hot core of the tube. Back layer: the coloured glass tube, its glow,
   and the light it throws on the wall below. Phones (no back layer) keep the single-layer tube above. */
.gl .accent{color:transparent!important;-webkit-text-stroke:max(1px,.012em) #fff;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px var(--acc-core))!important}
.gl .glow-l .accent{color:rgba(var(--acc-rgb),.05)!important;-webkit-text-stroke:max(3px,.046em) var(--acc)!important;
  filter:blur(.4px) drop-shadow(0 0 2px var(--acc)) drop-shadow(0 0 9px var(--acc)) drop-shadow(0 0 24px rgba(var(--acc-rgb),.72)) drop-shadow(0 .28em 40px rgba(var(--acc-rgb),.36))!important}
.gl .glow-l .accent .ch{text-shadow:none!important}
/* the stutter: whole sign or one letter drops to unlit glass, buzzes, catches */
.nfh.gl .accent,.nfh.gl .glow-l .accent{filter:none!important;-webkit-text-stroke-color:var(--acc-dim)!important}
.accent .ch.nf{-webkit-text-stroke-color:var(--acc-dim)!important}
/* buttons: a tube around the edge with a white core, glowing in and out, lighting the surface below */
.btn-primary{box-shadow:inset 0 0 0 1px var(--acc),inset 0 0 0 2px rgba(255,255,255,.95),inset 0 0 0 3.5px var(--acc),inset 0 0 9px 3px rgba(var(--acc-rgb),.6),inset 0 0 26px rgba(var(--acc-rgb),.3),
  0 0 0 1px rgba(var(--acc-rgb),.55),0 0 8px var(--acc),0 0 22px rgba(var(--acc-rgb),.6),0 0 52px rgba(var(--acc-rgb),.28),0 16px 40px -12px rgba(var(--acc-rgb),.5)!important}
.btn-primary:hover{box-shadow:inset 0 0 0 1px var(--acc),inset 0 0 0 2.2px #fff,inset 0 0 0 4px var(--acc),inset 0 0 10px 4px rgba(var(--acc-rgb),.7),inset 0 0 32px rgba(var(--acc-rgb),.4),
  0 0 0 1px rgba(var(--acc-rgb),.7),0 0 11px var(--acc),0 0 30px rgba(var(--acc-rgb),.75),0 0 70px rgba(var(--acc-rgb),.36),0 18px 46px -12px rgba(var(--acc-rgb),.6)!important}
/* home: the black hole's light is bright, so the hero's small text and the glass button get a little more backing */
html[data-page="home"] .hero .lead,html[data-page="home"] .hero .ticks{text-shadow:0 1px 3px rgba(var(--sh-rgb),.95),0 0 16px rgba(var(--sh-rgb),.9),0 0 34px rgba(var(--sh-rgb),.6)}
html[data-page="home"] .hero .btn:not(.btn-primary){background:rgba(var(--g-rgb),.6)!important}
/* home: the black hole shines at full strength; the words sit on liquid glass instead */
html[data-page="home"] .hero h1{text-shadow:0 2px 3px rgba(var(--sh-rgb),.75),0 0 28px rgba(var(--sh-rgb),.55)}
html[data-page="home"] .hero .lead,html[data-page="home"] .hero .ticks{position:relative;width:fit-content;max-width:100%;padding:14px 20px;border-radius:20px;
  background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(255,255,255,.06)),rgba(var(--g-rgb),.42);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(.78);backdrop-filter:blur(18px) saturate(180%) brightness(.78);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06),0 18px 40px -22px rgba(var(--sh-rgb),.9);text-shadow:none}
html[data-page="home"] .hero .ticks{padding:10px 18px;border-radius:999px;margin-left:0}
html[data-page="home"] .hero .btn:not(.btn-primary){background:rgba(var(--g-rgb),.55)!important;-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.8);backdrop-filter:blur(16px) saturate(170%) brightness(.8)}
html[data-page="home"] .hero .btn-primary{-webkit-backdrop-filter:blur(14px) brightness(.55);backdrop-filter:blur(14px) brightness(.55)}