/* WebCraft Studio — homepage v3 (review prototype) */
:root{
  --bg:#0b0d0f; --bg2:#111418; --bg3:#161a1f;
  --ink:#eef0ee; --dim:#a2a8a6; --mute:#6c7371;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.2);
  --b1:#6d71f3; --b1l:#9a9dff; --b2:#22b573; --b2l:#4fdc9c;
  --grad:linear-gradient(100deg,#9a9dff 0%,#6d71f3 30%,#22b573 100%);
  --pad:clamp(20px,4vw,56px);
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--b1);color:#fff}
:focus-visible{outline:2px solid var(--b2l);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:2000;background:var(--ink);color:#000;padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:16px}
.wrap{width:min(1320px,100% - 2*var(--pad));margin-inline:auto}
.ul{text-decoration:underline;text-decoration-color:var(--b2);text-underline-offset:4px;color:var(--ink)}
.ul:hover{color:var(--b2l)}
.stars{color:#ffc24a;letter-spacing:.08em}
em{font-family:var(--serif);font-style:italic;font-weight:400}

.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:10px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--b2);box-shadow:0 0 0 0 rgba(34,181,115,.6);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(34,181,115,0)}100%{box-shadow:0 0 0 0 rgba(34,181,115,0)}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:.95rem;line-height:1;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,background .35s}
.btn svg{width:14px;height:14px}
.btn-sm{padding:10px 16px;font-size:.88rem}
.btn-lg{padding:10px 12px 10px 26px;font-size:1.02rem;min-height:56px}
.btn-lg:not(:has(.btn-ic)){padding:10px 26px}
.btn-solid{background:var(--ink);color:#0b0d0f}
.btn-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateY(101%);transition:transform .5s var(--ease);border-radius:inherit}
.btn-solid:hover{color:#fff}
.btn-solid:hover::before{transform:none}
.btn-line{border:1px solid var(--line2);color:var(--ink);background:rgba(255,255,255,.02);backdrop-filter:blur(6px)}
.btn-line:hover{border-color:var(--ink);background:rgba(255,255,255,.08)}
.btn-ic{width:36px;height:36px;border-radius:50%;background:#0b0d0f;color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease),background .3s}
.btn-line .btn-ic{background:var(--ink);color:#0b0d0f}
.btn:not(.btn-lg) .btn-ic{width:26px;height:26px;margin-right:-8px}
.btn:hover .btn-ic{transform:rotate(-45deg)}
.btn-solid:hover .btn-ic{background:#fff;color:#0b0d0f}
.ic-l{width:16px!important;height:16px!important}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:4px;transition:border-color .3s,gap .3s var(--ease)}
.link svg{width:16px;height:16px;color:var(--b2l)}
.link:hover{border-color:var(--b2);gap:14px}

/* ---------- overlays ---------- */
.pre{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;animation:preFail 0s 3.5s forwards}
html:not(.js) .pre{display:none}
.pre-mark{width:min(150px,34vw);overflow:visible}
.pre-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .1s var(--ease) forwards}
.pre-row{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pre-n{color:var(--ink);font-size:1rem}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes preFail{to{opacity:0;visibility:hidden}}
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:300;pointer-events:none}
.progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.cur{position:fixed;left:0;top:0;z-index:900;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.45);border-radius:50%;pointer-events:none;display:none;place-items:center;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s,opacity .3s}
.has-cur .cur{display:grid}
.cur.on{opacity:1}
.cur.is-link{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--b2l);background:rgba(34,181,115,.08)}
.cur.is-label{width:96px;height:96px;margin:-48px 0 0 -48px;border-color:transparent;background:var(--grad)}
.cur span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cur.is-label span{opacity:1}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:14px;z-index:400;transition:top .5s var(--ease)}
.nav.hide{top:-96px}
.nav-in{position:relative;width:min(1320px,100% - 28px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 12px 10px 22px;border-radius:999px}
.nav-in::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s;z-index:-1}
.nav.solid .nav-in::before{background:rgba(13,16,19,.72);border-color:var(--line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.nav-logo img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:.93rem;font-weight:500;color:var(--dim)}
.nav-links>a{position:relative;padding:6px 0;transition:color .25s}
.nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-links-cta{display:none}
.nav-act{display:flex;align-items:center;gap:14px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.93rem}
.nav-phone svg{width:16px;height:16px;color:var(--b2l)}
.burger{display:none;align-items:center;gap:10px;height:44px;padding:0 5px 0 16px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);font-size:.84rem;font-weight:600;letter-spacing:.02em;transition:border-color .3s,background .3s}
.burger:hover{border-color:var(--ink)}
.burger-b{position:relative;width:34px;height:34px;border-radius:50%;background:var(--ink);flex:none;transition:background .4s,transform .5s var(--ease)}
.burger-b i{position:absolute;left:9px;right:9px;height:1.5px;background:#0b0d0f;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger-b i:first-child{top:13px}.burger-b i:last-child{top:20px}
.menu-open .burger-b{background:var(--grad);transform:rotate(90deg)}
.menu-open .burger-b i{background:#fff}
.menu-open .burger-b i:first-child{top:16.5px;transform:rotate(45deg)}
.menu-open .burger-b i:last-child{top:16.5px;transform:rotate(-45deg)}
.nav-links-meta{display:none}
.cta-q{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 16px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--a),#6d71f3,#22b573,#9a9dff,#22b573,#6d71f3) border-box;color:#0b0d0f;font-weight:600;font-size:.92rem;line-height:1;white-space:nowrap;overflow:hidden;isolation:isolate;box-shadow:0 0 26px -6px rgba(109,113,243,.7);animation:spin 4s linear infinite;transition:color .35s,box-shadow .35s}
.cta-q::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);transform:translateY(102%);transition:transform .5s var(--ease)}
.cta-q:hover{color:#fff;box-shadow:0 6px 34px -6px rgba(34,181,115,.75)}
.cta-q:hover::before{transform:none}
.cta-q .pulse{width:7px;height:7px}
.cta-q-ic{width:32px;height:32px;border-radius:50%;background:#0b0d0f;color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .45s var(--ease),background .3s,color .3s}
.cta-q-ic svg{width:14px;height:14px}
.cta-q:hover .cta-q-ic{transform:rotate(-45deg);background:#fff;color:#0b0d0f}
@media (max-width:1120px){
  .burger{display:inline-flex}
  .nav-in::before{transition:opacity .3s,background .4s,border-color .4s}
  .menu-open .nav-in::before{opacity:0}
  .nav-links{position:fixed;inset:0;z-index:-2;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:8px var(--pad) max(24px,env(safe-area-inset-bottom));border-top:96px solid transparent;background-origin:border-box;background:radial-gradient(90% 60% at 100% 0,rgba(109,113,243,.22),transparent 60%),radial-gradient(80% 50% at 0 100%,rgba(34,181,115,.14),transparent 60%),rgba(9,11,13,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow-y:auto;overscroll-behavior:contain;counter-reset:nav;color:var(--ink);clip-path:circle(0 at calc(100% - 48px) 46px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
  .menu-open .nav-links{clip-path:circle(150vmax at calc(100% - 48px) 46px);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
  .nav-links>a{counter-increment:nav;display:flex;align-items:baseline;gap:16px;padding:clamp(10px,1.9vh,16px) 0;border-bottom:1px solid var(--line);font-size:clamp(1.7rem,7.4vw,2.7rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink);transform:translateY(28px);opacity:0;transition:transform .7s var(--ease),opacity .5s,padding-left .4s var(--ease),color .3s}
  .nav-links>a::before{content:counter(nav,decimal-leading-zero);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--b2l);flex:none;width:2.2em}
  .nav-links>a::after{content:"→";position:static;height:auto;background:none;transform:none;margin-left:auto;font-size:.5em;font-weight:400;color:var(--mute);transition:transform .4s var(--ease),color .3s}
  .nav-links>a:hover,.nav-links>a:active{padding-left:10px}
  .nav-links>a:hover::after,.nav-links>a:active::after{transform:translateX(6px);color:var(--b2l)}
  .menu-open .nav-links>a{transform:none;opacity:1}
  .menu-open .nav-links>a:nth-child(1){transition-delay:.12s}.menu-open .nav-links>a:nth-child(2){transition-delay:.16s}.menu-open .nav-links>a:nth-child(3){transition-delay:.2s}.menu-open .nav-links>a:nth-child(4){transition-delay:.24s}.menu-open .nav-links>a:nth-child(5){transition-delay:.28s}.menu-open .nav-links>a:nth-child(6){transition-delay:.32s}.menu-open .nav-links>a:nth-child(7){transition-delay:.36s}
  .nav-links-cta{display:grid;gap:10px;margin-top:auto;padding-top:26px;font-size:1rem;letter-spacing:0;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .7s var(--ease)}
  .menu-open .nav-links-cta{opacity:1;transform:none;transition-delay:.42s}
  .nav-links-cta .btn{justify-content:center;min-height:54px}
  .nav-links-cta .btn-solid{justify-content:space-between}
  .nav-links-meta{display:block;margin-top:8px;font-size:.8rem;font-weight:400;letter-spacing:0;color:var(--dim);text-align:center}
  .menu-open .v2-chat{display:none}
}
@media (max-width:640px){.nav-phone span{display:none}.nav-phone{width:44px;height:44px;justify-content:center;border:1px solid var(--line2);border-radius:50%}.nav-act .cta-q{display:none}.burger-t{display:none}.burger{padding:0 5px}.nav-logo img{height:32px}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(110px,14vh,160px);overflow:hidden;background:radial-gradient(60% 50% at 78% 30%,rgba(109,113,243,.28),transparent 70%),radial-gradient(50% 45% at 60% 80%,rgba(34,181,115,.16),transparent 70%),var(--bg)}
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s}
.hero-gl.on{opacity:1}
.hero-grid-lines{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;opacity:.35;-webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 75%)}
.hero>.wrap{position:relative;z-index:2}
.hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:center;flex:1}
.hero-eyebrow{margin-bottom:26px}
.hero-title{font-size:clamp(2.7rem,5.9vw,6.3rem);line-height:.96;letter-spacing:-.04em;font-weight:600}
.hero-title .ln{display:block;overflow:hidden;padding:.06em .08em .14em 0;margin-bottom:-.14em}
.hero-title .li{display:block;will-change:transform}
.hero-title em,.sec-title em,.wk-cta-t em,.ft-big em{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.08em;letter-spacing:-.02em;font-size:1.06em}
.hero-title em{background-size:220% 100%;animation:sheen 6s linear infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.ghost{color:#0d1013;-webkit-text-fill-color:#0d1013;-webkit-text-stroke:2.5px rgba(238,240,238,.55);paint-order:stroke fill;font-variant-ligatures:none}
.hero-sub{max-width:56ch;margin-top:30px;color:var(--dim);font-size:clamp(1rem,1.25vw,1.14rem)}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-rating{margin-top:22px;font-size:.92rem;color:var(--dim)}
.hero-rating a:hover{color:var(--ink)}

.hero-stage{position:relative;aspect-ratio:1/.92;transform:perspective(1400px) rotateY(-11deg) rotateX(4deg);transform-style:preserve-3d}
.gs .hero-stage{transform:none}
.hf{position:absolute;will-change:transform}
.hf-fl{animation:float 7s ease-in-out infinite alternate}
.hf-b .hf-fl{animation-duration:9s;animation-delay:-3s}
.hf-c .hf-fl{animation-duration:6s;animation-delay:-2s}
.chip .hf-fl{animation-duration:5s}
.chip-2 .hf-fl,.chip-4 .hf-fl{animation-delay:-2.5s}
@keyframes float{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
.frame{position:relative;background:var(--bg3);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4)}
.frame img{width:100%}
.chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1a1e23;border-bottom:1px solid var(--line)}
.chrome i{width:8px;height:8px;border-radius:50%;background:#3a4047}
.chrome i:first-child{background:#ff6b5f}.chrome i:nth-child(2){background:#ffc24a}.chrome i:nth-child(3){background:#2fd27a}
.chrome span{margin-left:10px;font-family:var(--mono);font-size:.66rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 58%);transform:translateX(-120%);animation:shine 7s 2.5s infinite}
@keyframes shine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.phone{border:5px solid #1c2026;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 60px -12px rgba(0,0,0,.8),0 0 0 1px var(--line2)}
.phone img{width:100%}
.hf-a{left:0;top:22%;width:86%}
.hf-b{right:-6%;top:0;width:60%}
.hf-b .frame{filter:saturate(.8) brightness(.72)}
.hf-c{right:1%;bottom:-2%;width:25%}
.chip .hf-in{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(17,20,24,.82);border:1px solid var(--line2);backdrop-filter:blur(10px);font-size:.82rem;font-weight:500;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--b2)}.chip i.v{background:var(--b1l)}
.chip-1{left:-6%;top:15%}.chip-2{right:-3%;top:36%}.chip-3{left:6%;bottom:5%}.chip-4{left:8%;top:-1%}

.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(36px,6vh,72px)}
.hm{padding:22px 20px 26px 0;display:flex;flex-direction:column;gap:6px}
.hm+.hm{padding-left:22px;border-left:1px solid var(--line)}
.hm .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hm .v{color:var(--dim);font-size:.95rem}
.hm b{color:var(--ink);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin-right:6px;font-variant-numeric:tabular-nums}
.scroll-cue{position:absolute;right:calc(var(--pad) - 6px);bottom:150px;z-index:2;writing-mode:vertical-rl;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px}
.scroll-cue span{width:1px;height:54px;background:var(--line2);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--b2l);animation:cue 2s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .hero-stage{width:min(560px,92%);margin:10px auto 0}
  .hero-meta{grid-template-columns:1fr 1fr}
  .hm:nth-child(3){padding-left:0;border-left:0}
  .hm:nth-child(n+3){border-top:1px solid var(--line)}
  .scroll-cue{display:none}
}
@media (max-width:520px){.chip .hf-in{font-size:.72rem;padding:7px 11px}.chip-4{display:none}.hm b{display:block;font-size:1.3rem}}

/* ---------- marquee ---------- */
.mq{position:relative;z-index:3;padding:18px 0;border-block:1px solid var(--line);background:var(--bg);overflow:hidden}
.mq-row{overflow:hidden}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px);font-size:clamp(1.7rem,4.4vw,3.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.25;white-space:nowrap}
.mq-item::after{content:"✦";font-size:.5em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-ghost .mq-item{color:transparent;-webkit-text-stroke:1px rgba(238,240,238,.28);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(84px,11vw,170px) 0}
.sec-tight{padding-top:clamp(40px,5vw,70px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,84px)}
.sec-head .eyebrow{margin-bottom:22px;color:var(--b2l)}
.sec-title{font-size:clamp(2.2rem,5.2vw,4.7rem);line-height:1;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.sec-title-xl{font-size:clamp(2.6rem,6.6vw,6.2rem)}
.sec-desc{color:var(--dim);max-width:52ch}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .18em 0;margin:-.08em -.06em -.18em 0}
.wi{display:inline-block;will-change:transform}
.is-split em{background:none}
.is-split em .wi{background:var(--grad);-webkit-background-clip:text;background-clip:text;padding-right:.1em}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* spotlight dot grid */
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(340px circle at var(--sx,50%) var(--sy,-20%),#000,transparent 70%);mask-image:radial-gradient(340px circle at var(--sx,50%) var(--sy,-20%),#000,transparent 70%)}

/* ---------- cards: tilt + glow ---------- */
.tilt{position:relative;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease);transform-style:preserve-3d}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(109,113,243,.2),transparent 62%);opacity:0;transition:opacity .4s}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--b2l),var(--b1) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s}
.tilt:hover::before,.tilt:hover::after{opacity:1}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.svc{padding:clamp(24px,2.4vw,36px);border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));display:flex;flex-direction:column;gap:16px}
.svc.is-hot{background:linear-gradient(180deg,rgba(109,113,243,.16),rgba(34,181,115,.05))}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(20px,4vw,56px)}
.svc-n{font-family:var(--mono);font-size:.8rem;color:var(--mute)}
.svc-art{width:120px;height:80px;overflow:visible}
.draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s .25s var(--ease)}
.pop{transform-box:fill-box;transform-origin:center;transition:transform .8s .5s var(--ease),opacity .6s .5s}
.v3 .svc:not(.in) .draw{stroke-dashoffset:1}
.v3 .svc:not(.in) .pop{transform:scale(.4);opacity:0}
.svc h3{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.025em;font-weight:600;line-height:1.1}
.svc p{color:var(--dim);font-size:.98rem}
.svc ul{display:grid;gap:8px;margin:6px 0 10px;padding-top:18px;border-top:1px solid var(--line);font-size:.93rem}
.svc li{display:flex;align-items:center;gap:10px}
.svc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.svc .link{margin-top:auto;align-self:flex-start}
@media (max-width:960px){.svc-grid{grid-template-columns:1fr}.svc-top{margin-bottom:16px}}

/* ---------- work ---------- */
.work{position:relative;padding:clamp(60px,8vw,110px) 0;background:linear-gradient(180deg,var(--bg),var(--bg2) 30%,var(--bg2) 70%,var(--bg));overflow:clip}
.work-pin{display:flex;flex-direction:column;gap:clamp(22px,4vh,44px)}
.work-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,5vw,80px);align-items:end}
.work-head .eyebrow{margin-bottom:18px;color:var(--b2l)}
.work-view{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.work-view::-webkit-scrollbar{display:none}
.work-track{display:flex;gap:clamp(18px,2.4vw,40px);width:max-content;padding:26px max(var(--pad),calc((100vw - 1320px)/2)) 10px}
.wk{--cw:min(520px,80vw);width:var(--cw);flex:none;scroll-snap-align:start;scroll-margin-left:max(var(--pad),calc((100vw - 1320px)/2));display:flex;flex-direction:column;gap:18px}
.wk-stage{position:relative;aspect-ratio:16/11.4}
.wk-glow{position:absolute;inset:12% 6% 4%;background:var(--grad);filter:blur(50px);opacity:.14;transition:opacity .5s}
.wk-desk{position:absolute;left:0;top:0;width:90%;transition:transform .6s var(--ease)}
.wk-desk img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.wk-phone{position:absolute;right:0;bottom:0;width:21%;border-width:4px;border-radius:16px;transition:transform .6s var(--ease)}
.wk:hover .wk-glow{opacity:.5}
.wk:hover .wk-desk{transform:translateY(-8px) rotate(-1.2deg)}
.wk:hover .wk-phone{transform:translate(-8px,-14px) rotate(3deg)}
.wk-meta{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding-top:16px;border-top:1px solid var(--line)}
.wk-n{font-family:var(--serif);font-style:italic;font-size:1.9rem;line-height:1;color:var(--mute);transition:color .3s}
.wk:hover .wk-n{color:var(--b2l)}
.wk-c{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.wk-t{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.wk-a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.wk-a svg{width:16px;height:16px}
.wk:hover .wk-a{background:var(--ink);color:#0b0d0f;transform:rotate(45deg)}
.wk-cta{position:relative;justify-content:center;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,40px);border-radius:26px;border:1px dashed var(--line2);overflow:hidden;background:radial-gradient(120% 90% at 100% 0,rgba(109,113,243,.22),transparent 60%),radial-gradient(90% 80% at 0 100%,rgba(34,181,115,.16),transparent 60%)}
.wk-cta-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.5;-webkit-mask-image:radial-gradient(circle at 80% 10%,#000,transparent 70%);mask-image:radial-gradient(circle at 80% 10%,#000,transparent 70%)}
.wk-cta>*:not(.wk-cta-grid){position:relative}
.wk-cta-t{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.wk-cta-s{color:var(--dim);font-size:.96rem}
.wk-cta:hover .btn-solid{color:#fff}.wk-cta:hover .btn-solid::before{transform:none}
.work-foot{display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.work-count b{color:var(--ink);font-weight:500}
.work-bar{flex:1;height:2px;background:var(--line);overflow:hidden}
.work-bar i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.work-arrows{display:flex;gap:10px}
.work-arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s,opacity .3s,transform .4s var(--ease)}
.work-arrows button svg{width:18px;height:18px}
.work-arrows button:first-child svg{transform:rotate(180deg)}
.work-arrows button:hover:not(:disabled){background:var(--ink);color:#0b0d0f;transform:scale(1.06)}
.work-arrows button:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.work-view{cursor:grab}}
.work-view.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.work-view.is-drag .wk{pointer-events:none}
@media (max-width:640px){.work-hint{display:none}.work-arrows button{width:44px;height:44px}}
@media (max-width:860px){.work-head{grid-template-columns:1fr}}

/* ---------- bento ---------- */
.mini-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b2l);font-weight:500;margin-bottom:24px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
.bt{grid-column:span 2;padding:clamp(20px,2vw,28px);border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.bt-wide{grid-column:span 4}
.bt h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.bt p{color:var(--dim);font-size:.94rem}
.bt-vis{height:104px;margin-bottom:22px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden;position:relative}
.v-phone .ph,.v-phone .tb{border:1.5px solid var(--line2);border-radius:8px;padding:8px 6px;display:grid;gap:5px;align-content:start}
.v-phone .ph{width:34px;height:62px}.v-phone .tb{width:86px;height:62px}
.v-phone i{height:5px;border-radius:3px;background:var(--grad);animation:grow 3s var(--ease) infinite alternate;transform-origin:0 50%}
.v-phone i:nth-child(2){animation-delay:.3s;opacity:.6}.v-phone i:nth-child(3){animation-delay:.6s;opacity:.35}
@keyframes grow{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
.v-speed svg{width:28px;height:28px;color:#ffc24a;animation:zap 2.4s infinite}
@keyframes zap{0%,60%,100%{transform:scale(1);filter:none}70%{transform:scale(1.25);filter:drop-shadow(0 0 10px #ffc24a)}}
.v-speed .bar{width:52%;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.v-speed .bar i{display:block;height:100%;border-radius:inherit;background:var(--grad);animation:load 2.4s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-100%)}60%,100%{transform:none}}
.v-edit .ed{font-family:var(--mono);font-size:.84rem;color:var(--ink);display:inline-flex;align-items:center;overflow:hidden;white-space:nowrap;animation:type 5s steps(19) infinite}
.v-edit .ed i{width:2px;height:1.2em;background:var(--b2l);margin-left:3px;animation:blink .8s steps(1) infinite}
@keyframes type{0%{max-width:0}45%,85%{max-width:21ch}100%{max-width:0}}
@keyframes blink{50%{opacity:0}}
.v-lock svg{width:32px;height:32px;color:var(--b2l);position:relative}
.v-lock .ring{position:absolute;width:44px;height:44px;border-radius:50%;border:1px solid var(--b2);animation:ring 2.6s ease-out infinite}
.v-lock .r2{animation-delay:1.3s}
@keyframes ring{from{transform:scale(.8);opacity:.9}to{transform:scale(2.6);opacity:0}}
.v-dom{flex-wrap:wrap;padding:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.05);font-family:var(--mono);font-size:.78rem}
.pill svg{width:14px;height:14px;color:var(--b2l)}
.pill.p2 svg{color:var(--b1l)}
.trust{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(14px,1.6vw,22px);padding:clamp(22px,2.4vw,32px);border-radius:22px;border:1px solid var(--line);background:linear-gradient(100deg,rgba(109,113,243,.14),rgba(34,181,115,.08))}
.trust p{max-width:62ch;font-size:1.06rem}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.bt,.bt-wide{grid-column:span 1}.bt-wide{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bt-wide{grid-column:auto}}

/* ---------- reviews ---------- */
.rev-sum{margin-top:14px;font-size:.95rem}
.rev{display:grid;gap:18px;overflow-x:auto;scrollbar-width:none}
.rev::-webkit-scrollbar{display:none}
.rev.is-loop{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-row{display:flex;width:max-content;padding-left:var(--pad)}
.rev.is-loop .rev-row{padding-left:0;animation:slide 70s linear infinite}
.rev.is-loop .rev-rev{animation-direction:reverse;animation-duration:80s}
.rev.is-loop:hover .rev-row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rev-row li{padding-right:18px;display:flex}
.rc{width:min(440px,82vw);padding:28px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));display:flex;flex-direction:column;gap:18px;transition:border-color .3s,transform .4s var(--ease)}
.rc:hover{border-color:var(--line2);transform:translateY(-4px)}
.rc blockquote{font-size:1.08rem;line-height:1.5;flex:1}
.rc figcaption{display:flex;align-items:center;gap:12px}
.av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff}
.rc strong{display:block;font-weight:600;font-size:.96rem}
.rc small{color:var(--mute);font-size:.8rem}

/* ---------- approach ---------- */
.mani{display:grid;gap:clamp(18px,2.4vw,34px);max-width:1180px}
.mani p{font-size:clamp(1.5rem,3.5vw,3.1rem);line-height:1.14;letter-spacing:-.028em;font-weight:500;color:#c5cac8}
.mani b{color:var(--ink);font-weight:600}
.mani b .mw{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.mw{display:inline-block}
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);margin-top:clamp(56px,8vw,120px)}
.ps{min-height:50vh;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);align-content:center;opacity:.25;transition:opacity .5s}
.ps.is-on{opacity:1}
.ps-n{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,6vw,5.4rem);line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
.ps-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ps h3{font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--b2l)}
.ps p{color:var(--dim);max-width:46ch}
.proc-mock{position:sticky;top:0;height:100vh;align-self:start;display:flex;align-items:center}
.mock{width:100%;border-radius:18px;border:1px solid var(--line2);background:var(--bg3);overflow:hidden;box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 80px -20px rgba(109,113,243,.35)}
.mock-body{position:relative;aspect-ratio:4/3.1;background:radial-gradient(90% 70% at 90% 0,rgba(109,113,243,.14),transparent 60%),#0e1114}
.scene{position:absolute;inset:0;padding:clamp(16px,2vw,28px);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.scene.is-on{opacity:1;visibility:visible}
.scene [style*="--i"]{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s var(--ease)}
.scene.is-on [style*="--i"]{opacity:1;transform:none;transition-delay:calc(var(--i)*.24s + .2s)}
.s1{display:flex;flex-direction:column;justify-content:center;gap:12px}
.bub{align-self:flex-start;max-width:80%;padding:12px 16px;border-radius:18px 18px 18px 5px;background:rgba(255,255,255,.08);font-size:.95rem;line-height:1.4}
.bub.me{align-self:flex-end;border-radius:18px 18px 5px 18px;background:linear-gradient(100deg,var(--b1),#4e52d6);color:#fff}
.typing{display:inline-flex;gap:5px;padding:14px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.s2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.quote{padding:18px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.q-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b2l)}
.q-r{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line2);font-size:.9rem;color:var(--dim)}
.q-r b{color:var(--ink);font-weight:600}
.q-d{border:0;padding-bottom:0}.q-d b{color:var(--b2l)}
.smap{display:flex;flex-direction:column;align-items:center}
.node{padding:7px 12px;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.05);font-family:var(--mono);font-size:.7rem}
.node.root{background:var(--grad);border:0;color:#fff}
.twigs{width:70%;height:30px;margin-top:14px;border:1px solid var(--line2);border-bottom:0;border-radius:8px 8px 0 0;position:relative}
.twigs::before,.twigs::after{content:"";position:absolute;left:50%;width:1px;background:var(--line2)}
.twigs::before{top:-14px;height:14px}.twigs::after{top:0;height:100%}
.twigs i{display:none}
.kids{display:flex;gap:6px;justify-content:space-between;width:100%}
.s3{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:center}
.code{margin:0;font-family:var(--mono);font-size:clamp(.66rem,.95vw,.88rem);line-height:1.8;color:#c9cecc;overflow:hidden}
.cl{display:inline-block;width:100%;vertical-align:top;white-space:pre;clip-path:inset(0 100% 0 0)}
.s3.is-on .cl{clip-path:inset(0);transition:clip-path .45s steps(16);transition-delay:calc(var(--l)*.15s + .35s)}
.c-c{color:var(--mute)}.c-k{color:var(--b1l)}.c-s{color:var(--b2l)}
.wire{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.3)}
.wire i{border-radius:5px;background:rgba(255,255,255,.07);height:22px}
.wire .w-nav{grid-column:1/-1;height:10px}.wire .w-hero{grid-column:1/-1;height:58px}.wire .w-cta{grid-column:1/-1;height:16px}
.s3.is-on .wire i{animation:fill .6s var(--ease) forwards}
.s3.is-on .w-nav{animation-delay:.9s}.s3.is-on .w-hero{animation-delay:1.2s}.s3.is-on .w-a{animation-delay:1.5s}.s3.is-on .w-b{animation-delay:1.65s}.s3.is-on .w-c{animation-delay:1.8s}.s3.is-on .w-cta{animation-delay:2.1s}
@keyframes fill{to{background:linear-gradient(100deg,rgba(109,113,243,.75),rgba(34,181,115,.75))}}
.s4{padding:0}
.s4 img{width:100%;height:100%;object-fit:cover;object-position:top}
.live{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(11,13,15,.85);border:1px solid var(--line2);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.live i{width:7px;height:7px;border-radius:50%;background:var(--b2);animation:pulse 2s infinite}
.toast{position:absolute;right:16px;bottom:84px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(17,20,24,.92);border:1px solid var(--line2);backdrop-filter:blur(10px);font-size:.82rem;color:var(--dim);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.toast.t2{bottom:16px}
.toast svg{width:18px;height:18px;color:var(--b2l);flex:none}
.toast b{display:block;color:var(--ink);font-weight:600}
.signoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,6vw,80px);padding-top:28px;border-top:1px solid var(--line);color:var(--dim)}
.signoff svg{width:44px}
.signoff strong{color:var(--ink)}
.signoff em{margin-left:auto;font-size:1.5rem;color:var(--ink)}
@media (max-width:960px){
  .proc{grid-template-columns:1fr}
  .proc-mock{display:none}
  .ps{min-height:0;opacity:1;padding:28px 0;border-top:1px solid var(--line)}
}

/* ---------- contact ---------- */
.contact{overflow:hidden}
.contact-glow{position:absolute;left:50%;top:-10%;width:min(1100px,120vw);aspect-ratio:1.6;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(109,113,243,.3),rgba(34,181,115,.1) 55%,transparent);filter:blur(30px);pointer-events:none;animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translateX(-46%) scale(1.12)}}
.contact .wrap{position:relative}
.ct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.ct-intro{font-size:1.2rem;line-height:1.45;margin-bottom:28px}
.ct-rows{display:grid;margin-bottom:26px}
.ct-rows li{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.ct-rows li:last-child{border-bottom:1px solid var(--line)}
.ct-rows .ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;flex:none;transition:background .3s,color .3s}
.ct-rows li:hover .ic{background:var(--ink);color:#0b0d0f}
.ct-rows .ic svg{width:18px;height:18px}
.lbl{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ct-rows a{font-size:1.12rem;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-rows a:hover{color:var(--b2l)}
.ct-trust{display:flex;align-items:center;gap:10px;color:var(--dim);margin-bottom:22px}
.ct-form-wrap{position:relative;border-radius:28px;padding:1px;background:conic-gradient(from var(--a),rgba(255,255,255,.1),var(--b1),rgba(255,255,255,.1) 30%,var(--b2) 55%,rgba(255,255,255,.1) 75%);animation:spin 8s linear infinite}
@keyframes spin{to{--a:360deg}}
.ct-form{border-radius:27px;background:#0f1215;padding:clamp(22px,3vw,40px);display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:8px}
.fld label{font-size:.84rem;font-weight:500;color:var(--dim);display:flex;justify-content:space-between}
.fld small{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;padding:14px 16px;transition:border-color .25s,box-shadow .25s,background .25s;resize:vertical}
.fld ::placeholder{color:#5d6462}
.fld input:hover,.fld textarea:hover{border-color:var(--line2)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--b1l);background:rgba(109,113,243,.07);box-shadow:0 0 0 4px rgba(109,113,243,.18)}
.f-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.f-or{color:var(--mute);font-size:.9rem}
.f-call{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.f-call svg{width:16px;height:16px;color:var(--b2l)}
.f-note{display:flex;gap:10px;font-size:.9rem;align-items:flex-start}
.f-note svg{width:16px;height:16px;color:var(--b2l);flex:none;margin-top:4px}
.f-note.dim{color:var(--mute);font-size:.82rem}.f-note.dim svg{color:var(--mute)}
@media (max-width:960px){.ct-grid{grid-template-columns:1fr}.ct-form-wrap{order:-1}}
@media (max-width:1560px){.ft-bot{padding-bottom:84px}}
@media (max-width:560px){.f2{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,36px);align-items:center;text-align:left;padding:clamp(20px,2.6vw,34px) 0}
.fq-n{font-family:var(--mono);font-size:.76rem;color:var(--mute)}
.fq-q{font-size:clamp(1.14rem,2.1vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;transition:transform .5s var(--ease),color .3s}
.fq button:hover .fq-q{transform:translateX(10px)}
.fq-i{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:transform .5s var(--ease),background .3s,color .3s}
.fq-i svg{width:16px;height:16px}
.fq.open .fq-i{transform:rotate(135deg);background:var(--grad);border-color:transparent}
.fq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease)}
.v3 .fq:not(.open) .fq-a{grid-template-rows:0fr}
.fq-a>div{overflow:hidden}
.fq-a p{padding:0 60px clamp(22px,2.6vw,34px) clamp(34px,5vw,64px);color:var(--dim);max-width:86ch}
.fq-a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--b2);text-underline-offset:4px}
.faq-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px}
.faq-foot p{font-size:1.2rem;font-weight:500}
.faq-foot div{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.fq-a p{padding-left:0;padding-right:0}}

/* ---------- areas ---------- */
.areas{border-top:1px solid var(--line)}
.areas a{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.4fr) auto;gap:clamp(14px,2.4vw,36px);align-items:center;padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.areas a::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(109,113,243,.2),rgba(34,181,115,.1));transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease);z-index:-1}
.areas a:hover{padding-left:24px;padding-right:24px}
.areas a:hover::before{transform:none}
.ar-n{font-size:clamp(1.8rem,4.2vw,3.6rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.ar-s{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b2l)}
.ar-t{color:var(--dim);font-size:.95rem}
.areas svg{width:44px;height:44px;padding:13px;border-radius:50%;border:1px solid var(--line2);transition:transform .5s var(--ease),background .3s,color .3s}
.areas a:hover svg{transform:rotate(45deg);background:var(--ink);color:#0b0d0f}
@media (max-width:860px){.areas a{grid-template-columns:1fr auto;gap:8px 16px}.ar-s,.ar-t{grid-column:1}.areas svg{grid-row:1;grid-column:2}}

/* ---------- footer ---------- */
.ft{position:relative;border-top:1px solid var(--line);padding-top:clamp(60px,8vw,120px);background:radial-gradient(70% 60% at 50% 100%,rgba(109,113,243,.2),transparent 70%),var(--bg);overflow:hidden}
.ft-cta{padding-bottom:clamp(48px,7vw,100px);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,5vw,72px)}
.ft-big{display:inline-flex;align-items:center;gap:.25em;flex-wrap:wrap;margin-top:18px;font-size:clamp(2.6rem,9.4vw,8.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95}
.ft-big svg{width:.7em;height:.7em;padding:.14em;border-radius:50%;background:var(--ink);color:#0b0d0f;transition:transform .6s var(--ease),background .3s}
.ft-big:hover svg{transform:rotate(45deg);background:var(--b2l)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr .8fr .8fr;gap:clamp(24px,4vw,60px)}
.ft-info img{height:44px;width:auto;margin-bottom:18px}
.ft-info p{color:var(--dim);font-size:.95rem;max-width:40ch;margin-bottom:16px}
.ft a{transition:color .25s}
.ft-info a:hover,.ft-col a:hover,.ft-bot a:hover{color:var(--b2l)}
.ft-soc{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.ft-col h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:16px}
.ft-col a{display:block;padding:5px 0;color:var(--dim);font-size:.95rem}
.ft-word{font-size:21.5vw;font-weight:700;letter-spacing:-.06em;line-height:.78;text-align:center;white-space:nowrap;margin-top:clamp(30px,5vw,70px);color:transparent;background:linear-gradient(180deg,rgba(125,128,255,.75),rgba(34,181,115,.12) 85%);-webkit-background-clip:text;background-clip:text;user-select:none;overflow:hidden;padding-top:.06em}
.ft-word span{display:inline-block}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 28px;font-size:.84rem;color:var(--mute);position:relative}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}.ft-info{grid-column:1/-1}}

/* ---------- chat widget (chat-widget.js; rules carried over from styles.css) ---------- */
.v2-chat{--v2-bg:#0b0d0f;--v2-bg-elev:#15181c;--v2-ink:#eef0ee;--v2-ink-dim:#a2a8a6;--v2-line:rgba(255,255,255,.1);--v2-line-strong:rgba(255,255,255,.2);--v2-brand-1:#6d71f3;--v2-brand-2:#22b573;--text-color:#eef0ee}
.v2-chat{--v2-chat-z: 998;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: var(--v2-chat-z);
  font-family: Poppins, 'Poppins Fallback', sans-serif;}
.v2-chat.has-sticky-cta{bottom: 78px;}
.v2-chat-launcher{position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  
  background: linear-gradient(120deg, #4f53d9, #14804f);
  box-shadow: 0 16px 40px -12px color-mix(in oklab, var(--v2-brand-1, #6d71f3) 55%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;}
.v2-chat-launcher:hover{transform: translateY(-2px);
  box-shadow: 0 20px 44px -10px color-mix(in oklab, var(--v2-brand-1, #6d71f3) 60%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.28);}
.v2-chat-launcher-icon{display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);}
.v2-chat-launcher-label{font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;}
.v2-chat.is-open{width: min(380px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 80px));
  z-index: 1003;}
.v2-chat.is-open .v2-chat-launcher{display: none;}
.v2-chat-panel{position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: min(380px, calc(100vw - 32px));
  height: 100%;
  max-height: min(640px, calc(100dvh - 80px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--v2-bg-elev, #15181c);
  border: 1px solid var(--v2-line, rgba(255, 255, 255, 0.1));
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45);
  pointer-events: auto;}
.v2-chat-panel[hidden]{display: none !important;}
.v2-chat-quick-btn,
.v2-chat-submit,
.v2-chat-launcher{cursor: pointer !important;
  pointer-events: auto;}
.v2-chat-input{cursor: text !important;
  font-size: 16px;}
html.v2-chat-open #fluid-cursor-container{opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;}
html.v2-chat-open .suburb-sticky-cta{opacity: 0 !important;
  pointer-events: none !important;}
html.v2-chat-open .theme-toggle{opacity: 0 !important;
  pointer-events: none !important;}
body.v2-chat-mobile-open{overflow: hidden;
  touch-action: none;}
.v2-chat-backdrop{display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.42);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;}
.v2-chat-backdrop[hidden]{display: none !important;}
.v2-chat-header{flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v2-line, rgba(255, 255, 255, 0.1));
  background: color-mix(in oklab, var(--v2-bg-elev, #15181c) 92%, var(--v2-brand-1, #6d71f3) 8%);}
.v2-chat-title{display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color, #f3f4f6);}
.v2-chat-subtitle{display: block;
  font-size: 12px;
  opacity: 0.72;
  color: var(--text-color, #f3f4f6);
  margin-top: 2px;}
.v2-chat-close{width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-color, #f3f4f6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer !important;
  pointer-events: auto;
  opacity: 0.75;}
.v2-chat-close:hover{opacity: 1;
  background: color-mix(in oklab, var(--v2-line, rgba(255, 255, 255, 0.1)) 80%, transparent);}
.v2-chat-messages{flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;}
.v2-chat.is-form-step .v2-chat-messages{flex: 1 1 35%;
  min-height: 72px;
  max-height: 42%;}
.v2-chat-msg{display: flex;}
.v2-chat-msg--bot{justify-content: flex-start;}
.v2-chat-msg--user{justify-content: flex-end;}
.v2-chat-bubble{max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-color, #f3f4f6);}
.v2-chat-msg--bot .v2-chat-bubble{background: color-mix(in oklab, var(--v2-bg-elev, #15181c) 70%, var(--v2-brand-1, #6d71f3) 30%);
  border: 1px solid var(--v2-line, rgba(255, 255, 255, 0.1));
  border-bottom-left-radius: 4px;}
.v2-chat-msg--user .v2-chat-bubble{background: linear-gradient(120deg, var(--v2-brand-1, #6d71f3), var(--v2-brand-2, #22b573));
  color: #fff;
  border-bottom-right-radius: 4px;}
.v2-chat-bubble a{color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;}
.v2-chat-input-area{flex: 0 0 auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--v2-line, rgba(255, 255, 255, 0.1));
  overflow-y: auto;
  max-height: min(320px, 52dvh);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;}
.v2-chat-quick-replies{display: flex;
  flex-direction: column;
  gap: 8px;}
.v2-chat-quick-btn{width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--v2-line-strong, rgba(255, 255, 255, 0.2));
  background: transparent;
  color: var(--text-color, #f3f4f6);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;}
.v2-chat-quick-btn:hover{border-color: color-mix(in oklab, var(--v2-brand-1, #6d71f3) 50%, var(--v2-line-strong, rgba(255, 255, 255, 0.2)));
  background: color-mix(in oklab, var(--v2-brand-1, #6d71f3) 12%, transparent);}
.v2-chat-form{display: flex;
  flex-direction: column;
  gap: 10px;}
.v2-chat-field{display: flex;
  flex-direction: column;
  gap: 4px;}
.v2-chat-label{font-size: 12px;
  font-weight: 500;
  color: var(--text-color, #f3f4f6);
  opacity: 0.85;}
.v2-chat-input{width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--v2-line-strong, rgba(255, 255, 255, 0.2));
  background: color-mix(in oklab, var(--v2-bg, #0b0d0f) 85%, transparent);
  color: var(--text-color, #f3f4f6);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;}
.v2-chat-input:focus{outline: none;
  border-color: color-mix(in oklab, var(--v2-brand-1, #6d71f3) 55%, var(--v2-line-strong, rgba(255, 255, 255, 0.2)));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--v2-brand-1, #6d71f3) 20%, transparent);}
.v2-chat-submit{width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(120deg, var(--v2-brand-1, #6d71f3), var(--v2-brand-2, #22b573));
  box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--v2-brand-1, #6d71f3) 55%, transparent);}
.v2-chat-submit:hover{filter: brightness(1.05);}
.v2-chat-submit--secondary{background: transparent;
  color: var(--text-color, #f3f4f6);
  border: 1px solid var(--v2-line-strong, rgba(255, 255, 255, 0.2));
  box-shadow: none;}
@media (max-width: 760px){.v2-chat{left: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));}.v2-chat.has-sticky-cta:not(.is-open){bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px));}.v2-chat.is-open{left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px));
    padding: 0;
    z-index: 1003;}.v2-chat.is-open.is-keyboard-open{height: auto;
    padding-bottom: 0;}.v2-chat.is-open .v2-chat-backdrop:not([hidden]){display: block;}.v2-chat-panel{position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 18px 18px 0 0;}.v2-chat.is-form-step .v2-chat-messages{flex: 1 1 auto;
    min-height: 64px;
    max-height: none;}.v2-chat-input-area{max-height: none;
    flex-shrink: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));}.v2-chat-launcher-label{display: none;}.v2-chat-launcher{width: 56px;
    height: 56px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;}.v2-chat-close{width: 44px;
    height: 44px;}.v2-chat-quick-btn,
  .v2-chat-submit{min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;}.v2-chat-input{min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;}}
@media (prefers-reduced-motion: reduce){.v2-chat-launcher,
  .v2-chat-quick-btn{transition: none;}}

/* ---------- reduced motion ---------- */
@media all{
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html:not(.force-motion) :is(.pre,.cur,.scroll-cue){display:none!important}
  html:not(.force-motion) .cl{clip-path:none}
  html:not(.force-motion) .v-edit .ed{max-width:none;animation:none}
}

/* chat launcher: small glass disc, label slides out on hover (matches the rest of the site) */
.v2-chat-launcher{gap:0;min-width:52px;height:52px;padding:0;border:1px solid var(--v2-line-strong);background:color-mix(in oklab,var(--v2-bg-elev) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--v2-ink);box-shadow:0 14px 34px -14px rgba(0,0,0,.55);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.v2-chat-launcher::after{content:"";position:absolute;right:1px;top:1px;width:9px;height:9px;border-radius:50%;background:#22b573;box-shadow:0 0 0 2px var(--v2-bg)}
.v2-chat-launcher:hover{transform:translateY(-2px);border-color:var(--v2-brand-1);box-shadow:0 18px 40px -14px rgba(109,113,243,.6)}
.v2-chat-launcher-icon{flex:none;width:50px;height:50px;background:none;color:var(--v2-ink)}
.v2-chat-launcher-icon svg{width:20px;height:20px}
.v2-chat-launcher-label{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:13px;font-weight:600;letter-spacing:0;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s,padding .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .v2-chat-launcher:hover .v2-chat-launcher-label,.v2-chat-launcher:focus-visible .v2-chat-launcher-label{max-width:120px;padding-right:18px;opacity:1}
}
@media (max-width:1023px){.v2-chat-launcher{width:52px;height:52px}.v2-chat-launcher-label{display:none}}