/* RZTI extreme visual integration for vertical SaaS pages */
:root{--deep:#03050d;--deep2:#071020;--glass:rgba(8,14,31,.66)}
body{background:radial-gradient(circle at 16% 8%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 24%),radial-gradient(circle at 86% 16%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 22%),linear-gradient(180deg,#03050d 0%,#050816 46%,#070b19 100%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.034) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000,transparent 82%);pointer-events:none;z-index:-3}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2;opacity:.58}
.site-header{z-index:80}.nav{background:rgba(5,8,22,.66);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 18px 70px rgba(0,0,0,.32);border-color:rgba(255,255,255,.12)}
.brand img{height:38px;width:auto;max-width:132px;object-fit:contain}.brand{min-width:110px}
.hero{position:relative;overflow:hidden}.hero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;left:50%;top:4%;background:color-mix(in srgb,var(--accent) 13%,transparent);filter:blur(120px);pointer-events:none;z-index:-1}
.hero h1,.section-head h2,.demo-copy h2,.cta h2{max-width:100%;text-wrap:balance}
.grad{filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 28%,transparent))}
.device,.interactive,.cta,.feature,.plan,.niche-card{transform-style:preserve-3d;will-change:transform}
.device{box-shadow:0 40px 120px rgba(0,0,0,.48),0 0 100px color-mix(in srgb,var(--accent) 12%,transparent)}
.feature,.plan,.interactive,.cta{position:relative;isolation:isolate;overflow:hidden}
.feature::after,.plan::after,.interactive::after,.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 42%);opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:-1}
.feature:hover::after,.plan:hover::after,.interactive:hover::after,.cta:hover::after{opacity:1}
.plan.featured{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 30px 90px rgba(0,0,0,.35),0 0 70px color-mix(in srgb,var(--accent) 10%,transparent)}
.plan.featured::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--spin,0deg),transparent 0 35%,var(--accent),var(--accent2),transparent 68% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:borderSpin 7s linear infinite}
@keyframes borderSpin{to{--spin:360deg}}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn{position:relative;overflow:hidden}.btn::after{content:"";position:absolute;top:-80%;left:-50%;width:32%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(18deg) translateX(-250%);transition:transform .7s ease}.btn:hover::after{transform:rotate(18deg) translateX(700%)}
.saas-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;background:rgba(255,255,255,.025)}.saas-marquee-track{display:flex;gap:38px;width:max-content;animation:saasMarquee 24s linear infinite}.saas-marquee span{font-size:11px;letter-spacing:.24em;color:var(--muted);white-space:nowrap}.saas-marquee b{color:var(--accent)}@keyframes saasMarquee{to{transform:translateX(-50%)}}
@media(max-width:820px){.brand img{height:31px}.fx-canvas{opacity:.34}.plan.featured::before{animation:none}.saas-marquee-track{animation-duration:32s}}
@media(prefers-reduced-motion:reduce){.saas-marquee-track,.plan.featured::before{animation:none!important}.fx-canvas{display:none}}