:root { color-scheme: dark; --ink:#f4f1ed; --muted:#aaa7aa; --line:rgba(255,255,255,.11); --pink:#ff246f; --violet:#9a30ff; --blue:#295cff; --max:1500px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#05070b; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#05070b; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { color:inherit; font:inherit; }
.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; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; color:#05070b; background:white; border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid #9a7bff; outline-offset:4px; }

.site-header { position:fixed; z-index:20; top:0; left:0; right:0; height:94px; max-width:1672px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 5.3%; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(4,5,8,.94),rgba(4,5,8,.7)); backdrop-filter:blur(18px); transition:height .25s ease,background .25s ease; }
.site-header.is-scrolled { height:76px; background:rgba(4,5,8,.94); }
.brand { display:inline-flex; align-items:center; justify-self:start; gap:15px; font-weight:650; letter-spacing:.24em; }
.brand img { object-fit:contain; }
.site-nav { display:flex; gap:clamp(28px,4vw,68px); color:#c4c1c2; }
.site-nav a { position:relative; padding:12px 0; font-size:16px; }
.site-nav a::after { position:absolute; right:0; bottom:4px; left:0; height:1px; content:""; background:linear-gradient(90deg,var(--pink),var(--blue)); transform:scaleX(0); transition:transform .2s ease; }
.site-nav a:hover::after,.site-nav a:focus-visible::after { transform:scaleX(1); }
.header-cta { justify-self:end; }
.menu-button { display:none; }

.button { display:inline-flex; min-height:58px; align-items:center; justify-content:center; gap:18px; padding:0 32px; border:1px solid transparent; border-radius:999px; font-weight:650; background:linear-gradient(110deg,#ad092f,#d4114e); box-shadow:0 16px 38px rgba(213,17,77,.18); transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 18px 50px rgba(213,17,77,.32); }
.button-small { min-height:49px; padding:0 34px; }
.button-ghost { border-color:#676a75; background:rgba(8,10,15,.4); box-shadow:none; }

.hero { position:relative; min-height:940px; max-width:1672px; margin:0 auto; padding:158px 5.3% 72px; display:grid; grid-template-columns:minmax(500px,42%) minmax(0,58%); align-items:center; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 84% 38%,rgba(101,73,44,.22),transparent 31%),radial-gradient(circle at 8% 88%,rgba(88,24,98,.19),transparent 25%),#030508; }
.hero::before { position:absolute; z-index:-2; inset:0; content:""; background:linear-gradient(110deg,transparent 68%,rgba(201,166,120,.09) 80%,transparent 90%); transform:skewX(-8deg); }
.hero::after { position:absolute; z-index:-1; right:0; bottom:0; left:0; height:24%; content:""; background:linear-gradient(180deg,transparent,#05070b 82%); }
.hero-glow { position:absolute; z-index:-1; right:-10%; top:3%; width:45%; aspect-ratio:1; border-radius:50%; background:rgba(245,215,180,.08); filter:blur(80px); }
.hero-copy { position:relative; z-index:4; padding-top:12px; }
.eyebrow,.section-kicker { margin:0 0 18px; color:#e83d7e; font-size:13px; font-weight:750; letter-spacing:.22em; text-transform:uppercase; }
h1 { margin:0; max-width:660px; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(70px,6.7vw,114px); font-stretch:condensed; font-weight:900; line-height:.88; letter-spacing:-.025em; text-wrap:balance; }
h1 span { color:transparent; background:linear-gradient(96deg,#fc2a70 6%,#c82bef 50%,#2456ff 95%); background-clip:text; -webkit-background-clip:text; }
.hero-intro { max-width:520px; margin:24px 0 0; color:#c2bfc1; font-size:clamp(18px,1.6vw,23px); line-height:1.52; }
.hero-actions { display:flex; gap:16px; margin-top:26px; }
.server-card { width:min(465px,92%); margin-top:30px; padding:20px 24px 18px; border:1px solid rgba(126,151,255,.56); border-radius:20px; background:linear-gradient(135deg,rgba(20,23,33,.94),rgba(9,12,18,.96)); box-shadow:-10px 0 35px rgba(255,35,177,.2),10px 0 35px rgba(42,90,255,.2); }
.server-card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.server-card-head strong { font-size:14px; letter-spacing:.08em; }
.online { color:#72d883; font-size:12px; }
.online i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.server-card dl { display:grid; grid-template-columns:repeat(3,1fr); margin:15px 0 0; }
.server-card dl div { padding:0 13px; border-left:1px solid var(--line); }
.server-card dl div:first-child { padding-left:0; border:0; }
.server-card dt { color:#858895; font-size:11px; text-transform:uppercase; }
.server-card dd { margin:5px 0 0; font-size:14px; }
.device-scene { position:relative; z-index:2; width:115%; margin-left:-7%; transform:translateY(20px); }
.device-scene>img { width:100%; filter:drop-shadow(0 35px 55px rgba(0,0,0,.55)); }
.signal-line { position:absolute; height:2px; border-top:2px dotted #bd46ff; filter:drop-shadow(0 0 5px #9557ff); opacity:.8; }
.signal-line::after { position:absolute; top:-5px; right:-2px; width:8px; height:8px; content:""; border-radius:50%; background:#bca5ff; box-shadow:0 0 12px #6c5cff; }
.signal-one { right:6%; bottom:13%; width:32%; }
.signal-two { left:8%; bottom:25%; width:24%; border-color:#ff3b9c; }
.hero-signoff { position:absolute; z-index:5; right:5%; bottom:46px; margin:0; color:#99959b; font-size:12px; letter-spacing:.33em; }
.hero-signoff span { display:inline-block; width:42px; height:1px; margin:0 17px 4px 0; background:linear-gradient(90deg,var(--pink),var(--blue)); }

.section { max-width:var(--max); margin:0 auto; padding:130px clamp(24px,6vw,90px); }
.section h2 { margin:0; font-size:clamp(44px,5.2vw,82px); line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.manifesto { text-align:center; }
.manifesto>p:last-of-type { max-width:780px; margin:28px auto 0; color:var(--muted); font-size:20px; line-height:1.65; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); margin-top:76px; text-align:left; border-top:1px solid var(--line); }
.principles article { padding:34px 40px 0 0; }
.principles article+article { padding-left:40px; border-left:1px solid var(--line); }
.principles span { color:#d63380; font-family:ui-monospace,monospace; font-size:12px; }
.principles h3,.platform-grid h3 { margin:24px 0 10px; font-size:21px; }
.principles p,.platform-grid p { margin:0; color:var(--muted); line-height:1.6; }

.playback { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,9vw,140px); align-items:center; }
.playback-art { position:relative; min-height:610px; }
.playback-art::before { position:absolute; inset:3% 0 3% -30%; content:""; border-radius:50%; background:radial-gradient(circle,rgba(25,94,255,.24),transparent 65%); filter:blur(25px); }
.poster { position:absolute; overflow:hidden; width:48%; aspect-ratio:2/3; border-radius:10px; background:linear-gradient(160deg,#042f62,#007f91 48%,#01131f 80%); box-shadow:0 40px 80px rgba(0,0,0,.6); }
.poster::after { position:absolute; inset:0; content:""; background:radial-gradient(ellipse at 55% 40%,transparent 0 22%,rgba(5,238,223,.28) 23% 24%,transparent 25%),repeating-radial-gradient(ellipse at 50% 82%,transparent 0 11%,rgba(104,222,255,.1) 12% 13%); }
.poster-back { top:9%; left:3%; transform:rotate(-8deg); opacity:.48; }
.poster-front { z-index:2; top:3%; left:28%; display:flex; flex-direction:column; justify-content:flex-end; padding:11%; }
.poster-front span { position:relative; z-index:2; font-family:Georgia,serif; font-size:clamp(25px,3vw,43px); letter-spacing:.14em; }
.poster-front i { position:relative; z-index:2; margin-top:8px; font-size:8px; font-style:normal; letter-spacing:.28em; }
.play-ring { position:absolute; z-index:4; right:4%; bottom:18%; width:150px; height:150px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(5,8,13,.55); box-shadow:0 0 0 22px rgba(92,38,255,.08),0 0 70px rgba(240,30,124,.3); backdrop-filter:blur(10px); }
.play-ring span { padding-left:6px; font-size:35px; }
.playback-copy>p:last-of-type { color:var(--muted); font-size:18px; line-height:1.7; }
.playback-copy ul { padding:0; margin:32px 0 0; list-style:none; }
.playback-copy li { padding:17px 0 17px 30px; border-top:1px solid var(--line); color:#d2cfd1; }
.playback-copy li::before { margin-left:-30px; margin-right:18px; color:#df2e87; content:"◆"; font-size:9px; }

.platforms { text-align:center; }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:62px; }
.platform-grid article { min-height:305px; padding:48px 35px 36px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(19,22,31,.82),rgba(8,10,16,.7)); transition:border-color .2s ease,transform .2s ease; }
.platform-grid article:hover { border-color:rgba(146,89,255,.56); transform:translateY(-5px); }
.platform-icon { position:relative; width:90px; height:70px; margin:0 auto 28px; border:2px solid #707586; border-radius:7px; box-shadow:0 0 35px rgba(70,65,255,.2); }
.tv-icon::after { position:absolute; left:25%; right:25%; bottom:-11px; height:2px; content:""; background:#707586; }
.tablet-icon { width:55px; height:76px; border-radius:9px; }
.web-icon::before { position:absolute; top:11px; right:0; left:0; height:1px; content:""; background:#707586; }

.server { display:grid; grid-template-columns:.7fr 1.3fr; gap:9vw; align-items:center; margin-bottom:80px; border:1px solid var(--line); border-radius:38px; background:radial-gradient(circle at 20% 50%,rgba(106,33,255,.2),transparent 35%),linear-gradient(135deg,#11131c,#080a10); }
.server-orbit { position:relative; width:260px; height:260px; display:grid; place-items:center; margin:auto; border:1px solid rgba(177,72,255,.32); border-radius:50%; box-shadow:inset 0 0 80px rgba(41,92,255,.13),0 0 80px rgba(255,36,111,.12); }
.server-orbit::before,.server-orbit::after { position:absolute; content:""; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.server-orbit::before { inset:32px; }.server-orbit::after { inset:-30px; }
.server>div:last-child>p:not(.section-kicker) { max-width:650px; color:var(--muted); font-size:19px; line-height:1.6; }
.server-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }
.server-actions>span { color:#858895; font-size:13px; }

footer { max-width:var(--max); min-height:150px; margin:auto; padding:0 clamp(24px,6vw,90px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid var(--line); color:#777984; font-size:13px; }
footer .brand { color:white; font-size:14px; } footer p:last-child { justify-self:end; }
.error-page { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:24px; padding:30px; text-align:center; background:radial-gradient(circle at 50% 50%,rgba(105,35,255,.2),transparent 35%); }
.error-page h1 { font-size:clamp(54px,10vw,110px); }

@media (max-width:1120px) {
  .site-header { padding-inline:4%; }.site-nav { gap:26px; }
  .hero { min-height:900px; padding-inline:4%; grid-template-columns:47% 53%; }
  h1 { font-size:clamp(68px,8.1vw,91px); }.device-scene { width:130%; margin-left:-14%; }.hero-signoff { right:4%; }
}
@media (max-width:860px) {
  .site-header { height:76px; grid-template-columns:1fr auto; padding-inline:24px; }
  .menu-button { z-index:2; width:44px; height:44px; display:grid; align-content:center; gap:7px; padding:10px; border:0; background:transparent; }
  .menu-button>span:not(.sr-only) { height:1px; background:white; transition:transform .2s ease; }
  .menu-button[aria-expanded="true"]>span:nth-child(2) { transform:translateY(4px) rotate(45deg); }.menu-button[aria-expanded="true"]>span:nth-child(3) { transform:translateY(-4px) rotate(-45deg); }
  .site-nav { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:90px 24px; visibility:hidden; opacity:0; background:rgba(4,5,9,.97); transition:opacity .2s ease,visibility .2s ease; }
  .site-nav a { font-size:28px; }.menu-open { overflow:hidden; }.menu-open .site-nav { visibility:visible; opacity:1; }.header-cta { display:none; }
  .hero { min-height:auto; padding:132px 24px 70px; display:block; }.hero-copy { max-width:680px; }.hero-intro { max-width:590px; }
  .device-scene { width:112%; margin:20px -6% 0; transform:none; }.hero-signoff { position:relative; right:auto; bottom:auto; margin:-10px 0 0; text-align:center; }
  .principles { grid-template-columns:1fr; }.principles article,.principles article+article { padding:28px 0; border-left:0; border-bottom:1px solid var(--line); }
  .playback { grid-template-columns:1fr; }.playback-art { min-height:520px; max-width:600px; width:100%; margin:auto; }
  .platform-grid { grid-template-columns:1fr; max-width:600px; margin-inline:auto; }
  .server { grid-template-columns:1fr; text-align:center; margin-inline:18px; }.server>div:last-child>p { margin-inline:auto; }.server-actions { justify-content:center; }
  footer { grid-template-columns:1fr; gap:18px; padding-block:45px; text-align:center; } footer .brand,footer p:last-child { justify-self:center; } footer p { margin:0; }
}
@media (max-width:520px) {
  .brand { gap:10px; font-size:14px; }.brand img { width:35px; height:35px; }.hero { padding-inline:18px; }.eyebrow { font-size:11px; }
  h1 { font-size:clamp(53px,17.4vw,76px); }.hero-intro { font-size:17px; }.hero-actions { flex-direction:column; align-items:stretch; }.button { min-height:54px; padding-inline:22px; }
  .server-card { width:100%; padding-inline:16px; }.server-card dl { gap:0; }.server-card dl div { padding-inline:8px; }.server-card dd { font-size:12px; }
  .device-scene { width:140%; margin:15px -20% 0; }.signal-line { display:none; }.hero-signoff { font-size:9px; letter-spacing:.2em; }.hero-signoff span { display:none; }
  .section { padding:94px 20px; }.section h2 { font-size:43px; }.manifesto>p:last-of-type { font-size:17px; }
  .playback { gap:30px; }.playback-art { min-height:400px; }.poster { width:53%; }.poster-front { left:29%; }.play-ring { width:104px; height:104px; right:2%; bottom:16%; }
  .platform-grid article { min-height:270px; padding:38px 26px; }.server { padding:70px 22px; border-radius:26px; }.server-orbit { width:185px; height:185px; }.server-orbit img { width:70px; }.server-actions { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}