/* Blur visual layer (preview 2026-10-09). Decorative only. Brand: #07080c, mint #6effc8, ice #9ae8ff. */
:root{--vz-ease:cubic-bezier(.16,1,.3,1);--vz-enter:650ms;--vz-fast:220ms;--vz-r:16px;--vz-glass:rgba(17,20,28,.72);--vz-edge:rgba(154,232,255,.18)}
/* Living background: slow mesh gradient plus film noise. Transform and opacity only. */
body{position:relative;isolation:isolate}
.vz-bg{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;overflow:hidden}
.vz-bg i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55;will-change:transform}
.vz-bg i:nth-child(1){left:-5vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(110,255,200,.22),transparent);animation:vz-drift1 28s ease-in-out infinite alternate}
.vz-bg i:nth-child(2){right:-10vmax;top:10vmax;background:radial-gradient(closest-side,rgba(154,232,255,.18),transparent);animation:vz-drift2 34s ease-in-out infinite alternate}
.vz-bg i:nth-child(3){left:20vmax;bottom:-25vmax;background:radial-gradient(closest-side,rgba(110,140,255,.14),transparent);animation:vz-drift3 40s ease-in-out infinite alternate}
.vz-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes vz-drift1{to{transform:translate3d(18vmax,12vmax,0) scale(1.15)}}
@keyframes vz-drift2{to{transform:translate3d(-16vmax,10vmax,0) scale(.9)}}
@keyframes vz-drift3{to{transform:translate3d(10vmax,-14vmax,0) scale(1.1)}}
body{background:#07080c}
.band{background:transparent}
/* Lighter, layered sections */
main>section.band:nth-of-type(even){background:linear-gradient(180deg,rgba(17,22,32,.78),rgba(10,12,18,.55));border-top-color:var(--vz-edge)}
.cta-band{background:radial-gradient(ellipse 80% 120% at 10% 0%,rgba(110,255,200,.10),transparent 60%),radial-gradient(ellipse 70% 120% at 100% 100%,rgba(154,232,255,.10),transparent 60%),#0b0e15}
.nav{backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);background:rgba(7,8,12,.72)}
/* Hero aurora */
.hero,.page-hero{position:relative;isolation:isolate}
.vz-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.vz-aurora::before{content:"";position:absolute;left:-10%;top:-30%;width:120%;height:130%;background:conic-gradient(from 200deg at 60% 40%,rgba(110,255,200,.0),rgba(110,255,200,.16),rgba(154,232,255,.14),rgba(110,255,200,0) 60%);opacity:.9;animation:vz-spin 30s linear infinite;transform-origin:60% 40%}
.vz-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(154,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(154,232,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%)}
@keyframes vz-spin{to{transform:rotate(360deg)}}
.home-hero h1 .hl{background:linear-gradient(90deg,var(--accent),var(--ice),var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vz-sheen 8s ease-in-out infinite}
@keyframes vz-sheen{50%{background-position:100% 0}}
/* Promo frame */
.home-promo{position:relative}
.home-promo .promo{position:relative;z-index:1;border-radius:var(--vz-r);border-color:rgba(110,255,200,.35);box-shadow:0 30px 80px -30px rgba(110,255,200,.35),0 0 0 1px rgba(154,232,255,.08)}
.vz-ring{position:relative;height:0;pointer-events:none;z-index:0}.vz-ring>i{position:absolute;left:50%;top:0;width:min(100%,960px);aspect-ratio:16/9;transform:translateX(-50%);border-radius:calc(var(--vz-r) + 4px)}
.vz-ring>i::before{content:"";position:absolute;inset:-4px;border-radius:inherit;background:conic-gradient(from var(--vz-a,0deg),transparent 0 70%,rgba(110,255,200,.9) 80%,rgba(154,232,255,.9) 88%,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;animation:vz-spin 9s linear infinite;opacity:.8}
@media (max-width:760px){.vz-ring{display:none}}
/* Buttons and micro-interactions */
.btn{border-radius:999px;transition:transform var(--vz-fast) var(--vz-ease),box-shadow var(--vz-fast) var(--vz-ease),background-color var(--vz-fast),border-color var(--vz-fast)}
.btn-primary{background:linear-gradient(135deg,#8fffd6,var(--accent) 55%,#4fe6b0);box-shadow:0 12px 30px -14px rgba(110,255,200,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(110,255,200,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(154,232,255,.06)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
input,select,textarea{border-radius:10px;transition:border-color var(--vz-fast),box-shadow var(--vz-fast)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(110,255,200,.14)}
.fn-opt{border-radius:999px;transition:transform var(--vz-fast) var(--vz-ease),border-color var(--vz-fast),background var(--vz-fast)}
.fn-opt:hover{transform:translateY(-1px)}
.fn-opt[aria-pressed="true"]{animation:vz-pop 320ms var(--vz-ease);box-shadow:0 0 0 3px rgba(110,255,200,.15)}
@keyframes vz-pop{40%{transform:scale(1.06)}}
.faq details{transition:background var(--vz-fast)}
.faq details[open]{background:linear-gradient(90deg,rgba(110,255,200,.05),transparent)}
.faq summary{transition:color var(--vz-fast)}.faq summary:hover{color:var(--accent)}
/* Glass cards and bento */
.price-card,.calc,.call-card,.fn-card,.ah-card{border-radius:var(--vz-r);background:linear-gradient(160deg,rgba(23,28,40,.85),var(--vz-glass));border-color:var(--vz-edge);box-shadow:0 30px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
main .gets{gap:14px;background:transparent;border:0}
.gets>div{position:relative;border:1px solid var(--vz-edge);border-radius:var(--vz-r);background:linear-gradient(160deg,rgba(23,28,40,.9),rgba(12,15,22,.8));overflow:hidden;transition:transform var(--vz-fast) var(--vz-ease),border-color var(--vz-fast)}
.gets>div:hover,.trades a:hover,.ah-grid a:hover{transform:translateY(-4px);border-color:rgba(110,255,200,.5)}
.gets>div::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,255,200,.16),transparent);pointer-events:none}
@media (min-width:1024px){main .gets{grid-template-columns:1.25fr 1fr;grid-auto-rows:minmax(150px,auto)}main .gets>div:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end}}
main .trades{gap:14px}
.trades a,.trades span{border-radius:var(--vz-r);transition:transform var(--vz-fast) var(--vz-ease),border-color var(--vz-fast),background var(--vz-fast)}
@media (min-width:1024px){main .trades{grid-template-columns:repeat(4,minmax(0,1fr))}main .trades a{grid-column:span 2}}
.ah-grid a,.ah-grid span{transition:transform var(--vz-fast) var(--vz-ease),border-color var(--vz-fast)}
.vz-ico{display:block;width:44px;height:44px;margin:0 0 14px;color:var(--accent)}
.vz-ico svg{width:100%;height:100%;display:block;overflow:visible}
/* Explainer: animated after-hours flow on the four steps */
.steps{position:relative;border-top-color:transparent}
.vz-track{position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,rgba(110,255,200,.25),rgba(154,232,255,.25));pointer-events:none;overflow:visible}
.vz-track b{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(110,255,200,.18),0 0 18px rgba(110,255,200,.9);opacity:0}
.vz-armed .steps.vz-play .vz-track b{animation:vz-run 3.2s var(--vz-ease) 300ms 1 forwards}
@keyframes vz-run{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:1;transform:translateX(calc(var(--vz-w,1000px) - 10px))}}
.step{position:relative;transition:background var(--vz-fast)}
.step .vz-ico{width:52px;height:52px;padding:10px;border-radius:14px;background:rgba(110,255,200,.07);border:1px solid rgba(110,255,200,.22);margin-bottom:6px}
.vz-armed .steps.vz-armed-steps .step{opacity:.35;transition:opacity 500ms var(--vz-ease),transform 500ms var(--vz-ease)}
.vz-armed .steps.vz-play .step{opacity:1}
.vz-armed .steps.vz-play .step:nth-child(2){transition-delay:300ms}.vz-armed .steps.vz-play .step:nth-child(3){transition-delay:1100ms}.vz-armed .steps.vz-play .step:nth-child(4){transition-delay:1900ms}.vz-armed .steps.vz-play .step:nth-child(5){transition-delay:2700ms}
.vz-play .vz-ring-ph{animation:vz-shake 600ms ease-in-out 400ms 2}
@keyframes vz-shake{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.vz-wave rect{transform-origin:center;transform-box:fill-box}
.vz-play .vz-wave rect{animation:vz-eq 900ms ease-in-out 1100ms 3 alternate}
.vz-wave rect:nth-child(2){animation-delay:1250ms!important}.vz-wave rect:nth-child(3){animation-delay:1400ms!important}.vz-wave rect:nth-child(4){animation-delay:1550ms!important}
@keyframes vz-eq{50%{transform:scaleY(.35)}}
.vz-check{stroke-dasharray:24;stroke-dashoffset:0}
.vz-armed .steps.vz-armed-steps .vz-check{stroke-dashoffset:24}
.vz-armed .steps.vz-play .vz-check{transition:stroke-dashoffset 600ms var(--vz-ease) 1800ms;stroke-dashoffset:0}
.vz-play .vz-env{animation:vz-float 1.2s var(--vz-ease) 2600ms 1}
@keyframes vz-float{40%{transform:translateY(-4px)}}
@media (max-width:900px){.vz-track{left:auto;right:auto;top:0;bottom:0;width:2px;height:auto;left:-14px}.steps{margin-left:14px}.vz-armed .steps.vz-play .vz-track b{animation-name:vz-runv}@keyframes vz-runv{0%{opacity:0;transform:translateY(0)}8%{opacity:1}100%{opacity:1;transform:translateY(calc(var(--vz-h,800px) - 10px))}}.vz-track b{left:-4px}}
/* Scroll reveals (only armed by JS, never under reduced motion) */
.vz-line{position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(110,255,200,.7),rgba(154,232,255,.7),transparent);transform:scaleX(1);pointer-events:none}
main section{position:relative}
.vz-armed .vz-rv{opacity:0;transform:translateY(26px)}
.vz-armed .vz-rv.vz-in{opacity:1;transform:none;transition:opacity var(--vz-enter) var(--vz-ease),transform var(--vz-enter) var(--vz-ease)}
.vz-armed .vz-sec .vz-line{transform:scaleX(0)}
.vz-armed .vz-sec.vz-sec-in .vz-line{transform:scaleX(1);transition:transform 900ms var(--vz-ease)}
.flowfig svg{filter:drop-shadow(0 20px 40px rgba(110,255,200,.08))}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .vz-armed .vz-rv{opacity:1!important;transform:none!important}
 .vz-track b{display:none}
 .btn-primary:hover,.btn-ghost:hover,.gets>div:hover,.trades a:hover,.ah-grid a:hover,.fn-opt:hover{transform:none}
}

/* ===== Homepage hero motion reel background (2026-10-09, preview) ===== */
.home-hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#07080c;pointer-events:none}
.hero-bg picture,.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hero-bg video{opacity:0;transition:opacity .6s ease-out}
.hero-bg video.is-playing{opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,12,.86) 0%,rgba(7,8,12,.80) 50%,rgba(7,8,12,.74) 100%)}
.home-hero .lede,.home-hero .call-note,.home-hero .promo-cap{color:#c9d0db}
@media (max-width:768px){.hero-scrim{background:rgba(7,8,12,.82)}}
@media (prefers-reduced-motion:reduce){.hero-bg video{display:none}}
@media (min-width:769px){.hero-bg picture,.hero-bg video{filter:blur(6px);transform:scale(1.06)}.hero-scrim{background:linear-gradient(90deg,rgba(7,8,12,.90) 0%,rgba(7,8,12,.86) 50%,rgba(7,8,12,.80) 100%)}}
