/* Homepage v3 — floating glass nav, video-first, bento + rails */
html{scroll-padding-top:96px}
body{background:#0a0a0a}
/* glass pill nav */
.nav.v3-nav{inset:14px 0 auto;background:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex;justify-content:center;padding:0 16px;pointer-events:none;transform:none!important}
.v3-pill{pointer-events:auto;width:100%;max-width:1180px;height:60px;display:flex;align-items:center;gap:24px;padding:0 10px 0 24px;border-radius:999px;background:rgba(18,18,20,.42);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:max-width .45s var(--ease),height .45s var(--ease),background .45s,box-shadow .45s}
.nav.scrolled .v3-pill{max-width:1040px;height:54px;background:rgba(14,14,16,.78);box-shadow:0 14px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.v3-pill .logo img{height:28px;width:auto}
.v3-links{display:flex;gap:4px;margin:0 auto;font-size:14px}
.v3-links a{padding:8px 14px;border-radius:999px;color:#c9c9cc;transition:color .3s,background .3s}
.v3-links a:hover,.v3-links a.on{color:#fff;background:rgba(255,255,255,.08)}
.v3-act{display:flex;align-items:center;gap:8px}
.v3-pill .wa-hd,.v3-pill .cart-btn{position:relative!important;inset:auto!important;margin:0!important;width:38px;height:38px}
.v3-menu{display:none;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.2);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.v3-menu span{display:block;width:14px;height:1px;background:#fff;transition:transform .3s}
.v3-menu[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
.v3-menu[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.v3-msheet{position:fixed;z-index:99;left:12px;right:12px;top:84px;padding:12px;border-radius:28px;background:rgba(16,16,18,.82);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.6);animation:v3in .3s var(--ease)}
.v3-msheet nav{display:flex;flex-direction:column}
.v3-msheet nav a{padding:14px 16px;font:400 24px/1.1 var(--disp);border-bottom:1px solid rgba(255,255,255,.06)}
.v3-mrow{display:flex;gap:10px;padding:16px 4px 4px}.v3-mrow .btn{flex:1;justify-content:center}
@keyframes v3in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
/* hero */
.v3-hero{height:100svh;min-height:620px;max-height:none;justify-content:center}
.v3-shade{background:radial-gradient(120% 80% at 20% 60%,rgba(0,0,0,.55),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 92%,#0a0a0a)}
.v3-hero-in{position:relative;z-index:2;padding-top:40px}
.v3-eyebrow{color:#e6e6e6!important;display:block;margin-bottom:24px}
.v3-hero h1{font-size:clamp(60px,10vw,168px);line-height:.92;max-width:none;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.v3-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.v3-float{position:absolute;z-index:2;right:clamp(20px,4.4vw,64px);bottom:40px;display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(18,18,20,.5);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.14);transition:border-color .3s}
.v3-float:hover{border-color:rgba(255,91,46,.6)}
.v3-float img{width:56px;height:56px;border-radius:999px;object-fit:cover}
.v3-float>span{display:flex;flex-direction:column;gap:2px}.v3-float .mono{color:#cfcfd2!important}
.v3-float b{font:400 20px var(--disp)}.v3-float s{color:var(--g2);font-size:15px;margin-left:6px}
/* sections */
.v3-sec{padding-top:clamp(96px,11vw,170px)}
.v3-h{display:grid;grid-template-columns:1fr minmax(0,38ch);align-items:end;gap:16px 48px;margin-bottom:clamp(40px,5vw,72px)}
.v3-h .mono{grid-column:1/-1;color:var(--accent,#ff5b2e)!important}
.v3-h h2{font:300 clamp(44px,6.4vw,104px)/.95 var(--disp);letter-spacing:-.045em}
.v3-h p{color:var(--g1);font-size:var(--t1)}
/* themes */
.v3-themes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v3-theme{border-radius:28px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
.v3-tm{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#000}
.v3-tm video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.v3-theme:hover .v3-tm video{transform:scale(1.03)}
.v3-tm .st-pill{position:absolute;left:16px;top:16px}
.v3-tb{display:grid;grid-template-columns:1fr auto;gap:18px 24px;padding:24px 28px 28px;align-items:start}
.v3-tb h3{font:400 var(--h3)/1.1 var(--disp)}.v3-tb p{color:var(--g1);margin-top:6px}
.v3-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.v3-price b{font:300 40px/1 var(--disp);color:#fff}.v3-price s{color:var(--g2)}.v3-price .mono{max-width:22ch}
.v3-acts{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.v3-strip{margin-top:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 18px 18px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#0f0f10}
.v3-lp{flex:1;color:var(--g1)}.v3-lp b{color:#fff;font-weight:500}
#preview .pv{border-top:0}#preview .device{border-radius:20px}
/* bento stats */
.v3-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.v3-stat{grid-column:span 2;min-height:200px;padding:28px;border-radius:28px;background:#111;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.v3-stat.big{grid-column:span 3;min-height:280px}
.v3-stat b{font:300 clamp(48px,5vw,88px)/1 var(--disp);letter-spacing:-.04em}
.v3-stat.big b{font-size:clamp(64px,8vw,140px)}
.v3-stat.acc{background:radial-gradient(120% 120% at 0 0,rgba(255,91,46,.22),#111 60%);border-color:rgba(255,91,46,.3)}
.v3-stat.acc b{color:#ff5b2e}
.v3-stat .mono{max-width:36ch}
/* segmented tabs */
.v3-seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);margin-bottom:40px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.v3-seg::-webkit-scrollbar{display:none}
.v3-seg button{padding:10px 20px;border-radius:999px;font:500 14px var(--sans);color:var(--g1);white-space:nowrap;transition:background .3s,color .3s}
.v3-seg button[aria-selected=true]{background:#fff;color:#000}
.v3-panel{animation:v3fade .5s var(--ease)}
@keyframes v3fade{from{opacity:0;transform:translateY(10px)}}
.v3-panel .wsub{padding-top:0}
.v3-panel .tile .m43,.v3-panel .tile .m45,.v3-panel .pf,.v3-panel .m9{border-radius:18px;overflow:hidden}
/* services */
.v3-svc{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.v3-card{position:relative;min-height:460px;border-radius:28px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.08)}
.v3-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.v3-card:hover img{transform:scale(1.04)}
.v3-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.88) 85%)}
.v3-cs{position:relative;z-index:1;padding:28px;display:flex;flex-direction:column;gap:10px}
.v3-cs p{color:#d6d6d8}.v3-cs .mono{color:#e6e6e6!important}
.v3-also{margin-top:28px;color:var(--g1)}
/* pricing */
.v3-pr{border-radius:28px;background:#0f0f10;border:1px solid rgba(255,255,255,.08);padding:8px 32px 28px;display:block}
.v3-pr .pr-tb{grid-column:auto}
/* case */
.v3-case{position:relative;display:flex;align-items:flex-end;min-height:min(80vh,720px);border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.v3-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.v3-case:hover img{transform:scale(1.03)}
.v3-case:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.9))}
.v3-case-in{position:relative;z-index:1;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:20px;width:100%}
.v3-case h2{font:300 clamp(48px,7vw,120px)/.95 var(--disp);letter-spacing:-.045em}
.v3-case-in>.mono{color:#e6e6e6!important}
.v3-kv{display:flex;gap:48px;flex-wrap:wrap}.v3-kv>span{display:flex;flex-direction:column;gap:6px}
.v3-kv b{font:300 clamp(40px,4.5vw,72px)/1 var(--disp);color:#fff}.v3-kv>span:first-child b{color:#ff5b2e}
.v3-kv .mono{color:#d0d0d0!important}
/* process + tools */
#process .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#process .steps li{padding:28px;border-radius:24px;background:#111;border:1px solid rgba(255,255,255,.08)}
.v3-tools{margin-top:16px;padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,.08)}
.v3-tools>.mono{display:block;margin-bottom:16px;color:#ff5b2e!important}
/* about */
.v3-about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:start}
.v3-about figure img{border-radius:28px;width:100%}
.v3-about .v3-h{grid-template-columns:1fr}
#about .why{margin-top:72px;padding-top:0}
/* faq + contact */
.v3-faq .faq{max-width:900px}
.v3-contact{text-align:center;display:flex;flex-direction:column;align-items:center}
.v3-contact h2{font:300 clamp(52px,8vw,140px)/.95 var(--disp);letter-spacing:-.045em}
.v3-contact .v3-hero-cta{justify-content:center}
.v3-contact .clinks{margin-top:56px;display:flex;gap:40px;flex-wrap:wrap;justify-content:center}
/* reveal */
.v3-sec .fade{transition-duration:.9s}
/* glass bottom tabbar */
@media (max-width:760px){
 .tabbar.v3-tab{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:62px;padding:0 6px;border-radius:999px;background:rgba(16,16,18,.6);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.5)}
 .tabbar.v3-tab .on{color:#fff}
 .wa-fab{bottom:calc(86px + env(safe-area-inset-bottom))}html.has-sticky .wa-fab,body.has-sticky .wa-fab{bottom:calc(150px + env(safe-area-inset-bottom))!important}
 .nav.v3-nav{inset:10px 0 auto;padding:0 12px}
 .v3-pill{height:54px;padding:0 6px 0 18px;gap:8px}.nav.scrolled .v3-pill{height:50px}
 .v3-links,.v3-cta,.v3-pill .wa-hd{display:none!important}
 .v3-act{margin-left:auto}.v3-menu{display:flex}
 .v3-pill .logo img{height:24px}
 .v3-hero{justify-content:flex-end;padding-bottom:140px}
 .v3-shade{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 30%,rgba(0,0,0,.75) 62%,#0a0a0a 98%)}
 .v3-hero h1{font-size:64px}
 .v3-hero-cta .btn{flex:1;justify-content:center;padding:0 12px}
 .v3-float{left:20px;right:20px;bottom:76px;padding:6px 14px 6px 6px}.v3-float img{width:44px;height:44px}
 .v3-h{grid-template-columns:1fr}.v3-h h2{font-size:48px}
 .v3-themes,.v3-svc,.v3-about{grid-template-columns:1fr}
 .v3-theme{border-radius:22px}.v3-tb{grid-template-columns:1fr;padding:20px}.v3-price{align-items:flex-start;text-align:left}
 .v3-strip{border-radius:22px;padding:18px}
 .v3-bento{grid-template-columns:1fr 1fr;gap:10px}.v3-stat,.v3-stat.big{grid-column:span 1;min-height:150px;padding:18px;border-radius:20px}.v3-stat.big{grid-column:1/-1}
 .v3-stat b{font-size:40px}.v3-stat.big b{font-size:64px}
 .v3-seg{margin-left:-4px}.v3-seg button{padding:9px 14px;font-size:13px}
 .v3-card{min-height:340px;border-radius:22px}
 .v3-pr{padding:4px 18px 20px;border-radius:22px}
 .v3-case{min-height:520px;border-radius:24px}.v3-kv{gap:28px}
 #process .steps{grid-template-columns:1fr 1fr;gap:10px}#process .steps li{padding:18px}
 .v3-contact .clinks{flex-direction:column;gap:16px}
 .foot{padding-bottom:110px}
}
@media (max-width:1024px) and (min-width:761px){.v3-links a{padding:8px 9px}.v3-pill .wa-hd{display:none}.v3-svc{grid-template-columns:1fr 1fr}#process .steps{grid-template-columns:1fr 1fr}}
.v3-hero-in{width:100%}
.v3-tb{flex:1;grid-template-rows:auto 1fr}.v3-acts{align-self:end}
@media (max-width:760px){.v3-float{display:none}.v3-hero{padding-bottom:120px}}
.v3-card:after{background:linear-gradient(180deg,rgba(0,0,0,0) 15%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.92) 85%)}
.v3-case img{object-position:center 35%}
.v3-case:after{background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.92))}
@media (max-width:760px){.v3-strip{flex-direction:column;align-items:flex-start;gap:12px}.v3-strip .btn{align-self:stretch;justify-content:center}}