/* ---------- wide layout ---------- */
.wrap{max-width:1600px;padding:0 clamp(16px,4.5vw,88px)}
@media (min-width:1600px){.hero h1{font-size:clamp(40px,5.2vw,96px)}.hero .sub{font-size:19px;max-width:520px}.how h2,.leg h2,.plans h2,.trust h2,.qwall h2,.faqs h2{font-size:clamp(32px,3.8vw,64px)}}
@media (min-width:1400px){.qgrid{grid-template-columns:repeat(4,1fr)}.lgrid{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(4,1fr)}}
/* ---------- full-bleed hero ---------- */
.herofull{position:relative;overflow:hidden;background:
  radial-gradient(1200px 800px at 82% 30%, rgba(124,139,245,.28), rgba(124,139,245,0) 62%),
  radial-gradient(900px 700px at 96% 78%, rgba(192,38,211,.20), rgba(192,38,211,0) 62%),
  radial-gradient(700px 600px at 10% 90%, rgba(168,85,247,.14), rgba(168,85,247,0) 62%),
  linear-gradient(100deg,#FBFAFE 0%,#F8F4FE 45%,#EFE7FC 72%,#DCCFF8 100%)}
.herofull::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(rgba(251,250,254,0),#FBFAFE);pointer-events:none;z-index:1}
.herofull .glowc{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px 520px at var(--mx,70%) var(--my,40%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;transition:background .12s}
.herofull .nav,.herofull .hero{position:relative;z-index:2}
.herofull .hero{min-height:calc(100vh - 92px);padding:30px 0 60px;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px}
.herofull .art{height:min(720px,calc(100vh - 160px));min-height:560px}
.herofull .sphere{right:calc(-1 * clamp(80px,12vw,240px));width:clamp(520px,44vw,760px);height:clamp(520px,44vw,760px);top:auto;bottom:-120px}
.herofull .glow{left:auto;right:6vw;top:14%;width:clamp(460px,38vw,640px);height:clamp(380px,32vw,520px)}
.herofull .slab.a,.herofull .slab.b,.herofull .slab.c,.herofull .arc,.herofull .fcard{will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.herofull .slab.a{left:14%;top:6%;width:min(360px,30%);height:86%}
.herofull .slab.b{left:28%;top:0;width:min(370px,31%);height:94%}
.herofull .slab.c{left:42%;top:9%;width:min(360px,30%);height:86%}
.herofull .arc{left:36%;top:22%}
.herofull .fcard.one{left:30%;top:52%} .herofull .fcard.two{left:66%;top:22%} .herofull .fcard.three{left:68%;top:66%}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
.herofull .fcard{animation:drift 7s ease-in-out infinite} .herofull .fcard.two{animation-duration:9s} .herofull .fcard.three{animation-duration:8s;animation-delay:1.2s}
@media (max-width:1000px){.herofull .hero{min-height:0;grid-template-columns:1fr}.herofull .art{height:520px;min-height:0}.herofull .fcard{animation:none}}
/* ---------- sticky frosted nav + progress ---------- */
.navwrap{position:sticky;top:0;z-index:60;margin-bottom:-92px} .navwrap::before{z-index:-1} .navwrap{isolation:isolate} .herofull .hw{padding-top:92px} .nav{transition:padding .25s}
.nav.stuck{padding:12px 0}
.navwrap.stuck::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(251,250,254,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(233,227,245,.9);z-index:-1}
.nav .links a{position:relative;padding:6px 0} .nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--gradbrand);transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav .links a:hover::after,.nav .links a.on::after{transform:scaleX(1)}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--gradbrand);z-index:70;box-shadow:0 0 12px rgba(139,61,239,.6)}
/* ---------- full-bleed section bands ---------- */
.band{position:relative} .band::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;width:100vw;height:100%;z-index:-1;pointer-events:none}
.band.how-band::before{background:radial-gradient(900px 600px at 10% 40%,rgba(168,85,247,.10),rgba(168,85,247,0) 65%),radial-gradient(900px 600px at 95% 70%,rgba(124,139,245,.14),rgba(124,139,245,0) 65%)}
.band.leg-band::before{background:linear-gradient(180deg,rgba(243,239,252,0),#F6F1FD 30%,#F6F1FD 70%,rgba(243,239,252,0))}
.band.plans-band::before{background:radial-gradient(1000px 700px at 50% 100%,rgba(192,38,211,.10),rgba(192,38,211,0) 65%)}
.cta{border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:72px clamp(16px,6vw,120px)}
.cta::after{right:-60px;top:-160px;width:620px;height:620px}
@media (min-width:1600px){.cta{padding:96px 10vw}}
/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}
/* ---------- tilt ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease} .tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}
.tilt .shine{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px 200px at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .25s;pointer-events:none} .tilt:hover .shine{opacity:1}
.lcard,.card,.qc,.plan,.way,.stepc{position:relative}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.herofull .fcard{animation:none}.tilt:hover{transform:none}.herofull .slab,.herofull .fcard{transition:none}}