:root{--ink:#0A0C10;--ink-2:#0E1219;--panel:#0C0F15;--panel-2:#11151D; --bone:#EAE6DC;--muted:#8B897F;--dim:#54585C;--amber:#F2B33D;--amber-dim:#8a6a24; --line:rgba(234,230,220,.10);--line-2:rgba(234,230,220,.18); --disp:"AAV Display",system-ui,sans-serif;--mono:"AAV Mono",ui-monospace,Menlo,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif} *{box-sizing:border-box}html{scroll-behavior:auto} body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} .container{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,50px)} a{color:inherit} nav.site{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono); font-size:13px;letter-spacing:.02em;padding:18px 0;border-bottom:1px solid var(--line)} nav.site .brand{display:flex;align-items:center;gap:10px;font-weight:500;font-family:var(--disp)} nav.site .brand .sq{width:13px;height:13px;background:var(--amber);box-shadow:0 0 0 4px rgba(242,179,61,.14)} nav.site .r{display:flex;align-items:center;gap:24px} nav.site .r a{color:var(--muted);text-decoration:none;transition:color .18s} nav.site .r a:hover{color:var(--bone)} nav.site .r .cta{color:var(--amber);border:1px solid var(--line-2);padding:8px 15px} nav.site .r .cta:hover{background:rgba(242,179,61,.08)} @media(max-width:720px){nav.site .r a.hs{display:none}} :focus-visible{outline:2px solid var(--amber);outline-offset:3px} /* anti-FOUC: hide [data-anim] elements only when JS ran AND motion is allowed (see inline script in that adds .js-anim to ). Without JS, or under prefers-reduced-motion, .js-anim is absent and content stays visible. */ .js-anim [data-anim]{opacity:0} /* hero */ .hero-sec{position:relative;overflow:hidden;padding:36px clamp(18px,4vw,50px) 64px;min-height:640px} .hero-sec .scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.35) 3px 4px)} .hero-sec .vig{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 90% at 78% 8%,rgba(242,179,61,.06),transparent 55%)} .hero-inner{position:relative;z-index:2;max-width:1360px} .hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(30px,5vw,72px);align-items:center} @media(max-width:1300px){.hero{grid-template-columns:minmax(0,1fr);gap:42px}} .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:26px;display:flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--amber)} .hero h1{font-family:var(--disp);font-size:clamp(1.4rem,3.1vw,2.6rem);line-height:1.1;letter-spacing:-.04em; font-weight:700;margin:0 0 24px;text-wrap:balance} @media(max-width:380px){.hero h1{font-size:1.25rem}} .hero h1 .ln{display:block} .hero h1 .word{display:inline-block;position:relative} .hero h1 .word.key{color:var(--bone)} .hero h1 .word.key .ul{position:absolute;left:0;right:0;bottom:.06em;height:3px;background:var(--amber); transform:scaleX(0);transform-origin:left;display:block} .decrypt{font-family:inherit} .sub{font-size:clamp(1.04rem,1.6vw,1.24rem);line-height:1.55;color:var(--muted);max-width:36ch;margin:0 0 34px} .sub b{color:var(--bone);font-weight:500} .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:30px} .btn{display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:#160f00; font-weight:500;font-size:1.02rem;padding:15px 26px;text-decoration:none;border:1px solid var(--amber); transition:transform .16s,background .16s} .btn:hover{transform:translateY(-2px);background:#f7c25f} .ghost{font-family:var(--mono);font-size:.92rem;color:var(--bone);text-decoration:none; padding:15px 6px;letter-spacing:.02em;transition:color .18s} .ghost:hover{color:var(--amber)} .ghost .b{color:var(--dim)} .trust{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--dim); display:flex;flex-wrap:wrap;gap:6px 14px} .trust b{color:var(--muted);font-weight:400} .trust i{color:var(--amber-dim);font-style:normal} /* instrument panel */ .rig{border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;max-width:100%;overflow:hidden} .rig-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 15px; border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--dim)} .rig-bar .dots{display:flex;gap:6px} .rig-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block} .rig-bar .dots i.on{background:var(--amber)} .rig-body{padding:20px 18px 8px} .rig-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono); font-size:13.5px;padding:11px 0;border-bottom:1px dashed var(--line)} .rig-row .k{color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:11px;flex-shrink:0} .rig-row .v{color:var(--bone);min-width:0;text-align:right;overflow-wrap:anywhere;padding-left:10px} .rig-row .v.ok{color:var(--amber)} .rig-row .v .g{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber); margin-right:8px;box-shadow:0 0 8px var(--amber)} .spark{padding:16px 18px 20px} .spark-top{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono); font-size:11px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase;margin-bottom:10px} .spark canvas{width:100%;height:46px;display:block} .cursor{display:inline-block;width:8px;height:15px;background:var(--amber);margin-left:2px; vertical-align:-2px;animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .scroll-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2; font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim); display:flex;flex-direction:column;align-items:center;gap:7px} .scroll-hint .rail{width:1px;height:30px;background:linear-gradient(var(--amber),transparent); animation:drop 1.8s ease-in-out infinite} @keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} @media(prefers-reduced-motion:reduce){ .cursor,.scroll-hint .rail{animation:none} .hero h1 .word.key .ul{transform:scaleX(1)} } /* features */ .features-sec{padding:96px 0 104px;border-top:1px solid var(--line)} .sec-title{font-family:var(--disp);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700; letter-spacing:-.02em;line-height:1.05;margin:0 0 40px;color:var(--bone)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .tile{border:1px solid var(--line);background:var(--ink-2);border-radius:12px; padding:28px 24px;transition:border-color .18s} .tile:hover{border-color:var(--line-2)} .tile-icon{color:var(--amber);margin-bottom:18px} .tile-icon svg{display:block;width:28px;height:28px} .tile h3{font-family:var(--disp);font-size:1.08rem;font-weight:500;margin:0 0 10px;color:var(--bone)} .tile p{font-size:.94rem;line-height:1.55;color:var(--muted);margin:0} /* how it works */ .how-sec{position:relative;overflow:hidden;padding:96px 0 104px;border-top:1px solid var(--line)} .how-tunnel{position:absolute;left:calc(50% - 450px);top:-10%;width:900px;height:900px; pointer-events:none;z-index:0; background:repeating-radial-gradient(circle at 50% 50%,rgba(242,179,61,.08) 0 1px,transparent 1px 64px); -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%); mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%)} .how-inner{position:relative;z-index:1} .how-list{display:flex;flex-direction:column;max-width:760px} .how-item{display:flex;gap:24px;padding:28px 0;border-bottom:1px dashed var(--line)} .how-item:last-child{border-bottom:none} .how-n{font-family:var(--mono);font-size:13px;color:var(--amber-dim);letter-spacing:.06em; padding-top:3px;min-width:32px} .how-body h3{font-family:var(--disp);font-size:1.15rem;font-weight:500;margin:0 0 8px;color:var(--bone)} .how-body p{font-size:.96rem;line-height:1.6;color:var(--muted);margin:0;max-width:52ch} @media(max-width:560px){.how-item{gap:16px}} /* 3-step connect */ .steps-sec{position:relative;padding:96px 0 104px;border-top:1px solid var(--line)} .steps-wrap{position:relative;display:flex;gap:28px;max-width:760px} .steps-progress{position:relative;flex:0 0 2px;width:2px;margin:6px 0 0;background:var(--line-2);overflow:hidden} .steps-progress-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--amber);transform-origin:top} .steps-list{display:flex;flex-direction:column;flex:1;min-width:0} .step-item{display:flex;gap:24px;padding:0 0 44px} .step-item:last-child{padding-bottom:0} .step-n{font-family:var(--mono);font-size:13px;color:var(--amber-dim);letter-spacing:.06em;min-width:32px} .step-body h3{font-family:var(--disp);font-size:1.15rem;font-weight:500;margin:0 0 8px;color:var(--bone)} .step-body p{font-size:.96rem;line-height:1.6;color:var(--muted);margin:0;max-width:52ch} @media(max-width:560px){.steps-wrap{gap:16px}} @media(prefers-reduced-motion:reduce){ .steps-progress-fill{transform:none} } /* pricing */ .pricing-sec{padding:96px 0 104px;border-top:1px solid var(--line)} .price-card{max-width:420px;border:1px solid var(--line-2);background:var(--ink-2); border-radius:16px;padding:36px 32px 32px} .price-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px} .price-plan{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .price-badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;font-weight:500; color:#78350f;background:var(--amber);padding:5px 10px;border-radius:999px;white-space:nowrap} .price-amount{display:flex;align-items:baseline;gap:6px;font-family:var(--disp);color:var(--bone);margin-bottom:8px} .price-num{font-size:clamp(2.8rem,5vw,3.6rem);font-weight:700;letter-spacing:-.02em;line-height:1} .price-cur{font-size:1.6rem;font-weight:500;color:var(--muted)} .price-day{font-family:var(--mono);font-size:13px;color:var(--dim);margin-bottom:28px} .price-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:14px} .price-list li{position:relative;padding-left:26px;font-size:.96rem;line-height:1.5;color:var(--muted)} .price-list li::before{content:"";position:absolute;left:0;top:.4em;width:14px;height:14px; border:1.5px solid var(--amber-dim);border-radius:50%} .price-cta{width:100%;justify-content:center} .price-note{font-family:var(--mono);font-size:11.5px;color:var(--dim);text-align:center;margin-top:16px} /* devices */ .devices-sec{padding:96px 0 104px;border-top:1px solid var(--line)} .devices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:24px} .device-card{border:1px solid var(--line);background:var(--ink-2);border-radius:12px; padding:24px 22px;transition:border-color .18s} .device-card:hover{border-color:var(--line-2)} .device-card.is-featured{border-color:var(--amber-dim)} .device-card h3{font-family:var(--disp);font-size:1.04rem;font-weight:500;margin:0 0 10px;color:var(--bone)} .device-card p{font-size:.9rem;line-height:1.5;color:var(--muted);margin:0} .devices-note{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin:0} /* reviews */ .reviews-sec{padding:96px 0 104px;border-top:1px solid var(--line)} .reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .review-card{border:1px dashed var(--line-2);background:var(--ink-2);border-radius:12px; padding:26px 24px;transition:border-color .18s} .review-card:hover{border-color:var(--amber-dim)} .review-avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2); color:var(--dim);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .review-avatar svg{width:18px;height:18px} .review-quote{font-size:.96rem;line-height:1.55;color:var(--muted);margin:0 0 16px;font-style:italic} .review-handle{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.02em} /* faq */ .faq-sec{padding:96px 0 120px;border-top:1px solid var(--line)} .faq-list{display:flex;flex-direction:column;max-width:760px;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px; cursor:pointer;padding:22px 4px;font-family:var(--disp);font-size:1.02rem;font-weight:500; color:var(--bone);-webkit-tap-highlight-color:transparent} .faq-q::-webkit-details-marker{display:none} .faq-q::marker{content:""} .faq-q:hover{color:var(--amber)} .faq-chevron{flex:none;width:18px;height:18px;color:var(--amber-dim);transition:transform .22s ease} .faq-item[open] .faq-chevron{transform:rotate(180deg);color:var(--amber)} .faq-a{padding:0 4px 22px;max-width:64ch} .faq-a p{margin:0;font-size:.96rem;line-height:1.6;color:var(--muted)} @media(prefers-reduced-motion:reduce){.faq-chevron{transition:none}} /* final cta */ .final-cta-sec{padding:104px 0 96px;border-top:1px solid var(--line);text-align:center} .final-cta-inner{display:flex;flex-direction:column;align-items:center} .final-cta-inner .sec-title{margin-bottom:28px} .final-cta-btn{font-size:1.1rem;padding:17px 32px} .final-cta-sub{font-family:var(--mono);font-size:13px;color:var(--dim);margin:20px 0 0} /* footer */ .site-footer{padding:40px 0;border-top:1px solid var(--line)} .footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px} .footer-top .brand{display:flex;align-items:center;gap:10px;font-weight:500;font-family:var(--disp);color:var(--bone)} .footer-top .brand .sq{width:13px;height:13px;background:var(--amber);box-shadow:0 0 0 4px rgba(242,179,61,.14)} .footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;font-family:var(--mono);font-size:13px} .footer-links a{color:var(--muted);text-decoration:none;transition:color .18s} .footer-links a:hover{color:var(--amber)} .footer-disclaimer{font-size:.82rem;line-height:1.6;color:var(--dim);max-width:70ch;margin:0 0 14px} .footer-copy{font-family:var(--mono);font-size:12px;color:var(--dim);margin:0}