/* ============================================================
   OVVOS TV — brand design system  (ovvos.css)
   Amber/orange brand · light + dark themes · WCAG-AA
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=satoshi@400,500,700&display=swap');

/* ---------- THEME TOKENS ---------- */
:root,:root[data-theme="dark"]{
  --bg:#0c0a07; --bg-2:#141009; --surface:#1a1510; --surface-2:#231c14;
  --text:#f6f0e6; --muted:#b0a796; --faint:#867d6f;
  --accent:#f7b733;            /* amber — fills, glows            */
  --accent-2:#ff8a00;          /* orange — gradient partner       */
  --accent-text:#ffc24a;       /* amber text on dark (AA on bg)   */
  --on-accent:#241a05;         /* text on amber buttons           */
  --line:rgba(246,240,230,.10); --line-2:rgba(246,240,230,.18);
  --card-grad:linear-gradient(180deg,var(--surface),var(--bg-2));
  --glow:.16; --grain:.05;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fcf8f0; --bg-2:#f5eee0; --surface:#ffffff; --surface-2:#faf3e6;
  --text:#1c1509; --muted:#5f5747; --faint:#8a8170;
  --accent:#f7b733; --accent-2:#ed7a00;
  --accent-text:#9a5600;       /* deep amber for text/links (AA on cream) */
  --on-accent:#241a05;
  --line:rgba(28,21,9,.12); --line-2:rgba(28,21,9,.20);
  --card-grad:linear-gradient(180deg,#ffffff,#fbf5ea);
  --glow:.10; --grain:.03;
  color-scheme:light;
}

:root{
  --radius:18px; --radius-sm:12px; --maxw:1180px;
  --display:'Clash Display','Satoshi',system-ui,sans-serif;
  --body:'Satoshi',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease)}

/* atmosphere */
/* The two fixed full-viewport layers below are promoted to their own compositor
   layer (translateZ) so they are NOT repainted on every scroll frame. Without this
   the gradient stack and the SVG noise texture repaint continuously while scrolling,
   which was a major cause of scroll jank. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  transform:translateZ(0);will-change:transform;
  background:
    radial-gradient(60% 50% at 80% -8%, rgba(247,183,51,var(--glow)), transparent 60%),
    radial-gradient(46% 42% at 6% 6%, rgba(255,138,0,calc(var(--glow) * .7)), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(247,183,51,calc(var(--glow) * .5)), transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  transform:translateZ(0);will-change:transform;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* accessibility */
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--on-accent);
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:200}
.skip:focus{left:0}
:where(a,button,[tabindex],input,summary):focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:96px 0;position:relative}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.9rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:1.32rem;letter-spacing:-.01em}
h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent-text)}
p{color:var(--muted);font-size:1.04rem}
em{font-style:normal;color:var(--accent-text);font-weight:600}
.muted{color:var(--muted)}
.accent{color:var(--accent-text)}
a{color:var(--accent-text)}

.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  background:rgba(247,183,51,.10);border:1px solid rgba(247,183,51,.30);padding:8px 15px;border-radius:100px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)}

.section-head{max-width:640px;margin-bottom:54px}
.section-head h2{margin-bottom:14px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- header ---------- */
/* NOTE: this used to be `backdrop-filter:blur(18px) saturate(140%)`. A sticky header with a
   backdrop-filter forces the browser to re-blur everything behind it on EVERY scroll frame,
   which was the single biggest cause of the page feeling like it stuck and then jumped.
   A near-opaque background looks almost identical and costs nothing to scroll past. */
.nav{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:23px;width:auto}
:root[data-theme="dark"] .brand img,:root[data-theme="dark"] footer .brand img{filter:invert(1) brightness(1.7)}
.nav nav{display:flex;align-items:center;gap:28px}
.nav nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.96rem;transition:color .2s}
.nav nav a:hover{color:var(--text)}
.nav nav a.btn{color:var(--on-accent)}

/* theme toggle */
.theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .sun{display:none}.theme-toggle .moon{display:block}
:root[data-theme="light"] .theme-toggle .sun{display:block}
:root[data-theme="light"] .theme-toggle .moon{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);
  font-weight:700;font-size:.97rem;padding:13px 24px;border-radius:100px;text-decoration:none;cursor:pointer;border:none;
  background:linear-gradient(180deg,#ffce63,var(--accent));color:var(--on-accent);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 34px -12px rgba(247,160,40,.6);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 22px 44px -12px rgba(247,160,40,.72);filter:saturate(1.08)}
.btn.lg{padding:16px 30px;font-size:1.04rem}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:var(--accent);color:var(--accent-text);box-shadow:none}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.note-tiny{margin-top:20px;font-size:.85rem;color:var(--faint)}

/* ---------- hero ---------- */
.hero{padding:118px 0 104px;overflow:hidden;position:relative;text-align:center}
.hero .wrap{max-width:940px;margin:0 auto;position:relative;z-index:2}
.hero h1{margin:22px 0 22px}
.hero .lead{font-size:1.2rem;max-width:620px;margin:0 auto;color:var(--text);opacity:.88}
.hero .cta-row{justify-content:center}
.hero .note-tiny{margin-top:18px}
.stage{position:relative;height:520px;perspective:1400px}
.wall{position:absolute;inset:-8% -14%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  transform:rotateY(-22deg) rotateX(7deg) rotateZ(3deg);transform-style:preserve-3d;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 40%,#000 38%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 60% 40%,#000 38%,transparent 78%)}
.poster{aspect-ratio:2/3;border-radius:12px;border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.7);animation:float 9s var(--ease) infinite}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 50%)}
.poster:nth-child(3n){animation-delay:-3s}.poster:nth-child(3n+1){animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.stage .glow{position:absolute;inset:0;background:radial-gradient(50% 50% at 62% 42%,rgba(247,160,40,.26),transparent 70%);filter:blur(22px);z-index:-1}
/* real-content device showcase: TV + laptop + phone (replaces placeholder wall) */
.hero-devices{position:absolute;inset:0;transform-style:preserve-3d}
.hero-devices>div{position:absolute;transition:transform .35s ease-out;will-change:transform}

/* TV — behind, upper right */
.hd-tv{width:49%;left:51%;top:4%;z-index:1;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0c0a07;
  box-shadow:0 34px 74px -32px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04),0 0 70px -22px rgba(247,160,40,.16);
  transform:perspective(2000px) rotateY(-13deg) rotateX(4deg);animation:hdFloat 9s var(--ease) infinite}
.hd-tv img{display:block;width:100%;height:100%;object-fit:cover}

/* Laptop — centerpiece (the computer) */
.hd-laptop{width:61%;left:8%;top:33%;z-index:2;animation:hdFloat 8s var(--ease) -1.5s infinite}
.hd-laptop .scr{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px 14px 5px 5px;overflow:hidden;
  border:11px solid #14110b;border-bottom-width:16px;background:#000;
  box-shadow:0 46px 92px -34px rgba(0,0,0,.86),0 0 0 1px rgba(255,255,255,.05),0 0 95px -20px rgba(247,160,40,.22)}
.hd-laptop .scr img{display:block;width:100%;height:100%;object-fit:cover}
.hd-laptop .base{position:relative;display:block;width:120%;height:16px;left:-10%;margin-top:-2px;
  background:linear-gradient(#322c22,#13100a);border-radius:0 0 16px 16px;
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);box-shadow:0 26px 34px -18px rgba(0,0,0,.85)}
.hd-laptop .base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:5px;border-radius:0 0 6px 6px;background:rgba(255,255,255,.10)}

/* Phone — front, lower left */
.hd-phone{width:17%;left:2%;top:41%;z-index:3;aspect-ratio:1080/2340;border-radius:22px;overflow:hidden;
  border:5px solid #16110a;background:#000;
  box-shadow:0 34px 64px -22px rgba(0,0,0,.88),0 0 0 1px rgba(255,255,255,.05);
  transform:perspective(1300px) rotateY(8deg);animation:hdFloat 8s var(--ease) -3s infinite}
.hd-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

@keyframes hdFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(min-width:1024px){ .hero{padding:132px 0 116px} }

/* ---------- disclaimer ---------- */
.disclaimer{border:1px solid var(--line);border-left:3px solid var(--accent);
  background:linear-gradient(90deg,rgba(247,183,51,.07),transparent);border-radius:var(--radius-sm);
  padding:20px 24px;color:var(--text);opacity:.92;font-size:.98rem}
.disclaimer strong{color:var(--text);opacity:1}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:20px}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.card h3{margin-bottom:10px}.card p{font-size:.97rem}
.card .ic{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;font-size:1.5rem;margin-bottom:18px;
  background:radial-gradient(120% 120% at 30% 20%,rgba(247,183,51,.24),rgba(255,138,0,.06));border:1px solid rgba(247,183,51,.26)}
.badge{display:inline-block;font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;vertical-align:middle;margin-left:8px}
.badge.live{background:rgba(40,170,90,.16);color:#3fa564;border:1px solid rgba(40,170,90,.4)}
:root[data-theme="dark"] .badge.live{color:#86e3a0}
.badge.soon{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted);border:1px solid var(--line-2)}

/* ---------- store cards ---------- */
.store-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.store{display:flex;flex-direction:column;gap:16px;background:var(--card-grad);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;transition:border-color .3s,transform .3s var(--ease)}
.store:hover{transform:translateY(-4px);border-color:var(--line-2)}
.store .tag{font-family:var(--display);font-size:1.45rem;font-weight:600;color:var(--text)}
.store .desc{color:var(--muted);font-size:.97rem;flex:1}
.storebtns{display:flex;flex-wrap:wrap;gap:11px}

/* ---------- platforms ---------- */
.platforms{display:flex;flex-wrap:wrap;gap:14px}
.plat{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg-2);border-radius:100px;padding:11px 20px;font-weight:600;color:var(--text)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:60px;width:max-content;animation:scroll 26s linear infinite}
.marquee span{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--faint);white-space:nowrap}
.marquee span .dot{color:var(--accent-text)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;border:1px solid var(--line);border-radius:28px;padding:72px 28px;
  background:radial-gradient(80% 120% at 50% 0%,rgba(247,160,40,.13),transparent 60%),var(--card-grad);overflow:hidden}
.cta-band h2{margin-bottom:14px}.cta-band .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:40px;background:var(--bg-2)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;margin-bottom:42px}
footer .brand img{height:22px;margin-bottom:16px}
footer h4{color:var(--text);font-family:var(--display);font-size:.95rem;letter-spacing:0;text-transform:none;margin-bottom:16px}
footer a{display:block;color:var(--muted);text-decoration:none;font-size:.94rem;margin-bottom:10px;transition:color .2s}
footer a:hover{color:var(--accent-text)}
footer .blurb{color:var(--faint);font-size:.9rem;max-width:280px;line-height:1.6}
.fine{border-top:1px solid var(--line);padding-top:26px;color:var(--faint);font-size:.82rem;line-height:1.7;max-width:780px}

/* ---------- inner pages ---------- */
.page-hero{padding:80px 0 30px}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin:18px 0 16px}
.page-hero .lead{font-size:1.12rem;max-width:620px;color:var(--text);opacity:.86}
.prose{max-width:760px}
.prose h2{font-size:1.7rem;margin:38px 0 14px}.prose h3{margin:26px 0 10px}
.prose p,.prose li{color:var(--text);opacity:.82;margin-bottom:14px;font-size:1rem}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose strong{opacity:1;font-weight:700}
.callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:rgba(247,183,51,.06);border-radius:var(--radius-sm);padding:20px 24px;margin:24px 0;color:var(--text);opacity:.95}
.callout strong{opacity:1}

/* price */
.price-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px}
.price{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.price.feature{border-color:rgba(247,183,51,.5);box-shadow:0 30px 70px -40px rgba(247,160,40,.5)}
.price .amt{font-family:var(--display);font-size:3rem;font-weight:600;color:var(--text)}
.price .amt small{font-size:1rem;color:var(--muted);font-family:var(--body);font-weight:500}
.price ul{list-style:none;margin:22px 0}
.price li{padding:9px 0 9px 28px;position:relative;color:var(--text);opacity:.82;border-bottom:1px solid var(--line)}
.price li::before{content:"✓";position:absolute;left:0;color:var(--accent-text);font-weight:700;opacity:1}

/* ---------- docs ---------- */
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.85em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--accent-text)}
.prose ol{padding-left:20px;margin-bottom:14px}.prose ol li{margin-bottom:8px}
details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 20px;margin:11px 0;background:var(--bg-2)}
details summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--text);list-style:none;font-family:var(--body)}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--accent-text);font-weight:700;margin-right:12px}
details[open] summary::before{content:"–"}
details p{padding-bottom:16px;margin:0;color:var(--text);opacity:.8}
.doc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;border-bottom:1px solid var(--line)}
.doc-tab{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:1rem;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;padding:14px 16px;cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px}
.doc-tab .pe{font-size:1.15rem;line-height:1}
.doc-tab:hover{color:var(--text)}
.doc-tab.active{color:var(--accent-text);border-color:var(--accent)}
.doc-tab.soon{opacity:.5;cursor:default}
.doc-panel{display:none}.doc-panel.active{display:block;animation:fadein .45s var(--ease)}
.doc-panel .lede{font-size:1.08rem;color:var(--text);opacity:.86;margin:8px 0 28px;max-width:680px}
.doc-panel h2{font-family:var(--display);font-weight:600;font-size:1.55rem;margin:38px 0 14px;display:flex;align-items:center;gap:12px}
.doc-panel h2 .n{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(247,183,51,.14);border:1px solid rgba(247,183,51,.34);color:var(--accent-text);font-size:.9rem;display:grid;place-items:center;font-weight:700}
ol.steps{list-style:none;padding-left:0;counter-reset:s;margin:6px 0 18px}
ol.steps>li{counter-increment:s;position:relative;padding:3px 0 3px 44px;margin-bottom:12px;color:var(--text);opacity:.84;line-height:1.65}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:29px;height:29px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--accent-text);font-family:var(--display);font-weight:600;display:grid;place-items:center;font-size:.86rem;opacity:1}
ol.steps>li strong{opacity:1}
.kbd{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:.8em;background:var(--surface-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:2px 8px;color:var(--text)}

/* legal */
.legal{max-width:760px;margin:0 auto;padding:72px 0 84px}
.legal h1{font-size:clamp(2.2rem,4.5vw,3rem);margin-bottom:10px}
.legal h2{font-family:var(--display);font-size:1.38rem;font-weight:600;margin:34px 0 12px;color:var(--text)}
.legal p,.legal li{color:var(--text);opacity:.82;margin-bottom:14px;font-size:1rem;line-height:1.7}
.legal ul{padding-left:22px}.legal .muted{color:var(--faint);font-size:.9rem}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.hero .kicker{animation:rise .8s var(--ease) both}.hero h1{animation:rise .9s .08s var(--ease) both}
.hero .lead{animation:rise .9s .16s var(--ease) both}.hero .cta-row{animation:rise .9s .24s var(--ease) both}
.hero .note-tiny{animation:rise .9s .32s var(--ease) both}.hero .stage{animation:fadein 1.4s .2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:scale(.96) translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================
   Device landing pages · screenshot galleries · waitlist form
   ============================================================ */

/* device chooser cards (home "Built for every screen") */
.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.device-card{display:flex;flex-direction:column;background:var(--card-grad);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.device-card:hover{transform:translateY(-5px);border-color:rgba(247,183,51,.5);box-shadow:0 30px 60px -38px rgba(247,160,40,.5)}
.device-card .thumb{aspect-ratio:16/10;background:#0b0b0e;border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.device-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.device-card .body{padding:22px 24px 26px}
.device-card h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.device-card p{font-size:.95rem;margin-bottom:14px}
.device-card .go{font-weight:700;color:var(--accent-text);font-size:.92rem}
.device-card .ico{font-size:1.15rem}

/* device page hero */
.dev-hero{padding:74px 0 26px}
.dev-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.dev-hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:16px 0 16px}
.dev-hero .lead{font-size:1.12rem;color:var(--text);opacity:.86;max-width:560px}
.dev-hero .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media(max-width:920px){.dev-hero .wrap{grid-template-columns:1fr;gap:24px}}

/* screenshot frames */
.frame{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#0b0b0e;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.frame.tv{aspect-ratio:16/9}
.frame img{display:block;width:100%;height:auto}
.frame.win{border-radius:12px}
.frame.phone{max-width:300px;border-radius:30px;border:8px solid #15110b;background:#000;margin:0 auto;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75)}
.frame.phone img{border-radius:22px}
.dev-hero .shot-tv{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 90px -45px rgba(0,0,0,.75)}
.dev-hero .shot-tv img{display:block;width:100%}

/* gallery grids per device */
.gallery{display:grid;gap:22px}
.gallery.tv{grid-template-columns:repeat(2,1fr)}
.gallery.win{grid-template-columns:repeat(2,1fr)}
.gallery.phone{grid-template-columns:repeat(4,1fr)}
.shot figure{margin:0}
.shot figcaption{margin-top:11px;font-size:.9rem;color:var(--muted);text-align:center}
.shot figcaption b{color:var(--text);font-weight:600}
@media(max-width:920px){.gallery.tv,.gallery.win{grid-template-columns:1fr}.gallery.phone{grid-template-columns:repeat(2,1fr)}.device-grid{grid-template-columns:1fr}}

/* feature walkthrough: alternating screenshot + copy */
.walk{display:grid;gap:64px;margin-top:20px}
.walk-row{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.walk-row:nth-child(even) .walk-media{order:2}
.walk-row .walk-copy h3{font-size:1.5rem;margin-bottom:12px}
.walk-row .walk-copy .step-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);background:rgba(247,183,51,.10);
  border:1px solid rgba(247,183,51,.30);padding:5px 12px;border-radius:100px;margin-bottom:14px}
.walk-row .walk-copy p{font-size:1.02rem;color:var(--text);opacity:.84}
.walk-row .walk-copy ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.walk-row .walk-copy li{position:relative;padding-left:26px;color:var(--text);opacity:.82;font-size:.98rem}
.walk-row .walk-copy li::before{content:"✓";position:absolute;left:0;color:var(--accent-text);font-weight:700}
@media(max-width:920px){.walk-row{grid-template-columns:1fr;gap:22px}.walk-row:nth-child(even) .walk-media{order:0}.walk{gap:48px}}
.walk-row .walk-copy .big{font-size:1.08rem;opacity:.9}
.walk-row .walk-copy .micro{margin-top:16px;font-size:.86rem;opacity:.6}

/* bold "manifesto" band */
.manifesto{border-radius:22px;border:1px solid var(--line-2);padding:46px 40px;text-align:center;
  background:radial-gradient(120% 140% at 50% -20%,rgba(247,160,40,.12),transparent 60%),var(--card)}
.manifesto h2{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:900px;margin:0 auto 14px}
.manifesto p{max-width:760px;margin:0 auto;font-size:1.1rem;color:var(--text);opacity:.86}
.manifesto .hl{color:var(--accent-text)}

/* OVVOS vs ordinary players */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px}
.versus .col{border-radius:18px;border:1px solid var(--line-2);padding:30px 28px;background:var(--card)}
.versus .col h3{font-size:1.15rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.versus .col .sub{font-size:.84rem;opacity:.6;margin-bottom:18px}
.versus .col.us{border-color:rgba(247,160,40,.55);
  box-shadow:0 0 0 1px rgba(247,160,40,.18),0 36px 70px -34px rgba(247,160,40,.30);
  background:linear-gradient(180deg,rgba(247,160,40,.07),transparent 70%),var(--card)}
.versus ul{list-style:none;display:grid;gap:13px}
.versus li{padding-left:30px;position:relative;color:var(--text);opacity:.88;font-size:.99rem;line-height:1.4}
.versus .them li::before{content:"✕";position:absolute;left:0;top:0;color:#c1715f;font-weight:800}
.versus .us li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-text);font-weight:800}
.versus .tag{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px}
.versus .them .tag{background:rgba(255,255,255,.06);color:var(--muted)}
.versus .us .tag{background:rgba(247,160,40,.16);color:var(--accent-text)}
@media(max-width:920px){.versus{grid-template-columns:1fr}}

/* waitlist form */
.waitlist{max-width:560px;margin:0 auto}
.wl-form{display:grid;gap:16px;background:var(--card-grad);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px}
.wl-field{display:grid;gap:7px}
.wl-field label{font-weight:600;font-size:.9rem;color:var(--text)}
.wl-field input,.wl-field select{width:100%;font-family:var(--body);font-size:1rem;color:var(--text);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;transition:border-color .2s}
.wl-field input::placeholder{color:var(--faint)}
.wl-field input:focus,.wl-field select:focus{outline:none;border-color:var(--accent)}
.wl-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wl-form .btn{width:100%;margin-top:6px}
.wl-note{font-size:.82rem;color:var(--faint);text-align:center;margin-top:4px}
.wl-success{display:none;text-align:center;background:var(--card-grad);border:1px solid rgba(40,170,90,.4);
  border-radius:var(--radius);padding:40px 32px}
.wl-success .ok{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(40,170,90,.16);border:1px solid rgba(40,170,90,.45);color:#3fa564;font-size:2rem}
:root[data-theme="dark"] .wl-success .ok{color:#86e3a0}
.wl-success h3{margin-bottom:10px}
@media(max-width:560px){.wl-row{grid-template-columns:1fr}}

/* responsive */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:10px}.stage{display:none}
  .cols-3,.cols-4,.store-grid,.price-wrap{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}.nav nav{gap:14px}.nav nav a:not(.btn):not(.theme-toggle){display:none}
}
@media(max-width:560px){section{padding:64px 0}.wrap{padding:0 20px}footer .cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   WebGL / GSAP FX layer — progressive enhancement.
   Everything here is inert unless js/ovvos-fx.js adds .fx-on to
   <html>; with JS off, reduced-motion, or no WebGL, the static
   site below is untouched.
   ============================================================ */
.hero,.page-hero,.dev-hero{position:relative}
.hero>.wrap,.page-hero>.wrap,.dev-hero>.wrap{position:relative;z-index:2}
/* animated warm-light hero background — redesigned: soft drifting aurora, calm but alive */
.hero{background:radial-gradient(120% 86% at 50% -12%,rgba(247,160,40,.10),transparent 56%),var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* `mix-blend-mode:screen` was removed here: blend modes force the browser to re-composite
   these orbs against everything behind them continuously, which defeats layer isolation and
   made scrolling stutter. The blur is also reduced (74px -> 48px) — blur cost scales with
   radius and these are very large elements. Visually near-identical on the dark background. */
.hero-bg span{position:absolute;border-radius:50%;filter:blur(48px);will-change:transform;
  transform:translateZ(0)}
.hero-bg span:nth-child(1){width:44vw;height:44vw;max-width:600px;max-height:600px;top:-16%;left:5%;opacity:.5;
  background:radial-gradient(circle,rgba(247,165,55,.85),transparent 66%);animation:auroraA 19s ease-in-out infinite}
.hero-bg span:nth-child(2){width:38vw;height:38vw;max-width:520px;max-height:520px;top:4%;right:0;opacity:.42;
  background:radial-gradient(circle,rgba(255,112,42,.80),transparent 66%);animation:auroraB 24s ease-in-out infinite}
.hero-bg span:nth-child(3){width:34vw;height:34vw;max-width:460px;max-height:460px;bottom:-24%;left:40%;opacity:.34;
  background:radial-gradient(circle,rgba(214,84,48,.80),transparent 68%);animation:auroraC 28s ease-in-out infinite}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(110px,70px) scale(1.16)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-120px,48px) scale(1)}}
@keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-78px) scale(1.2)}}
[data-theme="light"] .hero-bg span{opacity:.20}
/* gentle ambience for inner-page heroes too */
.page-hero,.dev-hero{background:radial-gradient(70% 70% at 82% 6%,rgba(247,160,40,.09),transparent 60%),var(--bg)}

/* top scroll-progress bar */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent,#f7a028),#ffd27a);z-index:200;pointer-events:none;
  box-shadow:0 0 14px rgba(247,160,40,.55)}

/* magnetic / tilt helpers driven by JS transforms */
.fx-on .device-card{will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.fx-on .btn.lg{will-change:transform}

/* GSAP fades these in itself; keep them visible if JS bails after adding .fx-on */
.fx-on .reveal{opacity:1}

@media(prefers-reduced-motion:reduce){.fx-progress{display:none}.hero::before,.hero::after{animation:none}}