:root {
  --bg:#0b0910; --panel:#12101a; --panel-2:#17131f; --text:#f5f2fa; --muted:#aaa4b4;
  --purple:#a98bd9; --purple-2:#cfb8f1; --line:rgba(255,255,255,.09); --glass:rgba(20,16,29,.68);
  --radius:28px; --shadow:0 30px 80px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-3;
  background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 80%);
}
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.ambient { position:fixed; border-radius:50%; filter:blur(110px); opacity:.18; pointer-events:none; z-index:-2; }
.ambient-one { width:600px; height:600px; background:#9a73cc; top:-240px; right:-160px; }
.ambient-two { width:460px; height:460px; background:#6e4c98; left:-240px; top:48%; }
.site-header {
  width:min(1180px,calc(100% - 40px)); height:76px; margin:16px auto 0; padding:0 18px;
  position:sticky; top:16px; z-index:50; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:20px; background:rgba(11,9,16,.72);
  backdrop-filter:blur(18px); box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
  width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#15101d;
  font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-1px;
  background:linear-gradient(135deg,#eee5fb,var(--purple));
  box-shadow:0 0 28px rgba(169,139,217,.22);
}
.brand-name { font-family:Manrope,sans-serif; font-size:14px; font-weight:700; letter-spacing:.12em; }
.brand-name strong { color:var(--purple-2); }
.nav { display:flex; gap:30px; color:#bbb5c4; font-size:13px; }
.nav a { transition:.2s ease; }
.nav a:hover { color:#fff; }
.header-cta {
  border:1px solid rgba(205,181,240,.22); border-radius:12px; padding:10px 15px; cursor:pointer;
  color:#eee7f8; background:rgba(169,139,217,.08); transition:.2s ease;
}
.header-cta:hover { background:rgba(169,139,217,.16); transform:translateY(-1px); }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.hero {
  min-height:760px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:70px; padding:80px 0 60px;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; color:#beb5ca; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.15em;
}
.eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--purple-2); box-shadow:0 0 14px var(--purple); }
h1,h2,h3 { font-family:Manrope,sans-serif; margin:0; }
.hero h1 {
  max-width:660px; margin-top:20px; font-size:clamp(48px,6vw,80px); line-height:.98; letter-spacing:-.052em; font-weight:800;
}
.hero h1 span { color:#c7addf; }
.hero-text { max-width:610px; margin:26px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-top:34px; }
.btn {
  min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:15px; border-radius:14px;
  padding:0 20px; border:1px solid transparent; cursor:pointer; transition:.22s ease; font-weight:600; font-size:13px;
}
.btn-primary { color:#17101f; background:linear-gradient(135deg,#e7d8f7,#af90d7); box-shadow:0 16px 38px rgba(146,112,186,.18); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 46px rgba(146,112,186,.28); }
.btn-ghost { color:#d2ccd9; border-color:var(--line); background:rgba(255,255,255,.025); }
.btn-ghost:hover { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.045); }
.trust-row { display:flex; gap:26px; margin-top:46px; color:#7f7888; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.trust-row span { display:flex; gap:7px; align-items:center; }
.trust-row b { color:#b7a4c9; font-weight:600; }
.hero-visual { min-height:500px; position:relative; display:grid; place-items:center; }
.screen-shell {
  width:min(100%,520px); aspect-ratio:1.2/1; position:relative; overflow:hidden; border-radius:34px;
  border:1px solid rgba(255,255,255,.11); background:linear-gradient(145deg,#16111f,#0f0d14 72%);
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.05); transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);
}
.screen-shell::before {
  content:""; position:absolute; inset:1px; border-radius:33px; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 28%);
}
.screen-topbar { height:54px; display:flex; align-items:center; gap:6px; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.055); }
.screen-topbar span { width:6px; height:6px; border-radius:50%; background:#46404d; }
.screen-content { position:absolute; inset:54px 0 0; padding:58px 50px; }
.mini-logo {
  width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:#18101f;
  background:linear-gradient(135deg,#f1e8fb,#aa86d3); font:800 19px Manrope,sans-serif;
}
.screen-kicker { margin-top:30px; color:#9c8fa7; font-size:10px; font-weight:700; letter-spacing:.16em; }
.screen-title { margin-top:11px; font:700 38px/1.05 Manrope,sans-serif; letter-spacing:-.04em; }
.screen-line { width:70px; height:3px; margin-top:27px; border-radius:10px; background:#9f7ac8; }
.screen-glow { position:absolute; width:280px; height:280px; right:-90px; bottom:-110px; border-radius:50%; background:#8c67b9; filter:blur(65px); opacity:.2; }
.float-card {
  position:absolute; display:flex; align-items:center; gap:12px; min-width:178px; padding:13px 15px; border-radius:16px;
  border:1px solid rgba(255,255,255,.1); background:rgba(20,16,29,.82); backdrop-filter:blur(15px);
  box-shadow:0 18px 48px rgba(0,0,0,.32);
}
.float-card small { display:block; margin-bottom:4px; color:#827b89; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.float-card strong { display:block; font-size:11px; font-weight:600; color:#ddd7e4; }
.float-live { right:-4px; top:65px; }
.float-device { left:-12px; bottom:70px; }
.pulse { width:9px; height:9px; border-radius:50%; background:#b799da; box-shadow:0 0 0 5px rgba(183,153,218,.1); }
.device-icon { width:26px; height:26px; display:grid; place-items:center; color:#cdb9e3; font-size:20px; }
.section { padding:120px 0; }
.section-heading { max-width:690px; }
.section-heading h2,.devices h2,.final-cta h2 { margin-top:17px; font-size:clamp(36px,5vw,60px); line-height:1.03; letter-spacing:-.045em; }
.section-heading p,.devices p,.final-cta p { margin:20px 0 0; color:var(--muted); line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px; }
.feature-card {
  min-height:265px; padding:30px; border:1px solid var(--line); border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); transition:.25s ease;
}
.feature-card:hover { transform:translateY(-5px); border-color:rgba(197,171,226,.17); background:rgba(255,255,255,.038); }
.feature-number { color:#8c7c9a; font-size:10px; letter-spacing:.12em; }
.feature-card h3 { margin-top:75px; font-size:25px; letter-spacing:-.03em; }
.feature-card p { margin:12px 0 0; color:#928b9a; font-size:13px; line-height:1.65; }
.device-panel {
  min-height:430px; padding:62px; display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:80px;
  border:1px solid rgba(255,255,255,.09); border-radius:32px; overflow:hidden; position:relative;
  background:radial-gradient(circle at 82% 22%,rgba(157,118,200,.14),transparent 32%),linear-gradient(145deg,#131019,#0d0b11);
}
.device-panel::after {
  content:"N+"; position:absolute; right:-24px; bottom:-86px; color:rgba(255,255,255,.018);
  font:800 250px/1 Manrope,sans-serif; letter-spacing:-.1em;
}
.device-list { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.device-list span {
  min-height:72px; display:grid; place-items:center; border:1px solid var(--line); border-radius:16px;
  color:#bcb4c5; background:rgba(255,255,255,.024); font-size:12px;
}
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary {
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  color:#ddd8e3; list-style:none; font-size:14px; font-weight:500;
}
summary::-webkit-details-marker { display:none; }
summary span { color:#8d8295; font-size:20px; font-weight:300; transition:.2s ease; }
details[open] summary span { transform:rotate(45deg); }
details p { margin:0; padding:0 40px 26px 0; color:#8e8795; font-size:13px; line-height:1.7; }
.final-cta {
  margin:50px 0 120px; padding:58px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,rgba(169,139,217,.08),rgba(255,255,255,.015));
}
footer {
  width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:140px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line); color:#6f6975; font-size:11px;
}
.brand-footer { opacity:.65; }
dialog {
  width:min(460px,calc(100% - 30px)); padding:38px; border:1px solid rgba(255,255,255,.12); border-radius:26px;
  color:var(--text); background:#131019; box-shadow:0 30px 100px rgba(0,0,0,.65);
}
dialog::backdrop { background:rgba(5,4,8,.78); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; top:16px; right:17px; border:0; background:none; color:#7e7586; font-size:26px; cursor:pointer; }
.dialog-mark {
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:25px; border-radius:15px;
  background:linear-gradient(135deg,#eee4fa,#a889d1); color:#16101d; font:800 20px Manrope,sans-serif;
}
dialog h2 { margin:16px 0 0; font-size:31px; letter-spacing:-.04em; }
dialog p { color:#99919f; line-height:1.65; margin-bottom:28px; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:900px) {
  .nav { display:none; }
  .hero { grid-template-columns:1fr; gap:20px; padding-top:80px; }
  .hero-copy { text-align:center; }
  .hero h1,.hero-text { margin-left:auto; margin-right:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-visual { min-height:480px; margin-top:10px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:210px; }
  .feature-card h3 { margin-top:48px; }
  .device-panel { grid-template-columns:1fr; gap:42px; padding:44px; }
  .faq { grid-template-columns:1fr; gap:42px; }
  .final-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width:600px) {
  .site-header,main,footer { width:calc(100% - 24px); }
  .site-header { height:66px; top:8px; margin-top:8px; padding:0 12px; }
  .brand-name { font-size:11px; }
  .brand-mark { width:33px; height:33px; }
  .header-cta { padding:9px 11px; font-size:11px; }
  .hero { min-height:auto; padding:70px 0 40px; }
  .hero h1 { font-size:44px; }
  .hero-text { font-size:14px; }
  .hero-actions { flex-direction:column; }
  .trust-row { display:grid; grid-template-columns:1fr; gap:10px; width:max-content; margin:34px auto 0; text-align:left; }
  .hero-visual { min-height:380px; }
  .screen-shell { border-radius:25px; transform:none; }
  .screen-content { padding:40px 28px; }
  .screen-title { font-size:29px; }
  .float-card { min-width:150px; padding:10px 12px; }
  .float-live { right:-6px; top:38px; }
  .float-device { left:-5px; bottom:40px; }
  .section { padding:82px 0; }
  .section-heading h2,.devices h2,.final-cta h2 { font-size:38px; }
  .device-panel { padding:32px 24px; border-radius:24px; }
  .device-list { grid-template-columns:1fr; }
  .final-cta { margin-bottom:80px; padding:34px 25px; }
  footer { min-height:120px; gap:20px; flex-direction:column; justify-content:center; text-align:center; }
  dialog { padding:32px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
  .reveal { opacity:1; transform:none; }
}

/* --- TV NEO PLUS commercial experience --- */
.premium-screen .screen-topbar b { margin-left:auto; color:#82798c; font-size:8px; font-weight:700; letter-spacing:.15em; }
.app-preview { display:flex; flex-direction:column; justify-content:space-between; padding:38px 42px 34px; }
.preview-brand { display:flex; align-items:center; gap:12px; }
.preview-brand small { color:#7e7688; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.preview-copy span { display:block; color:#9d91a8; font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; }
.preview-copy strong { display:block; font:700 34px/1.05 Manrope,sans-serif; letter-spacing:-.04em; }
.preview-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.preview-rail i { height:48px; border-radius:9px; border:1px solid rgba(255,255,255,.05); background:linear-gradient(145deg,rgba(198,168,228,.11),rgba(255,255,255,.02)); }
.intro-section { padding-top:145px; }
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px; align-items:stretch; }
.plan-card { min-height:510px; padding:32px; border:1px solid var(--line); border-radius:26px; position:relative; display:flex; flex-direction:column; background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.plan-card.featured { border-color:rgba(199,173,226,.26); background:radial-gradient(circle at 80% 0,rgba(170,130,216,.17),transparent 34%),linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:0 26px 70px rgba(0,0,0,.22); }
.plan-badge { position:absolute; top:20px; right:20px; padding:7px 9px; border:1px solid rgba(210,188,236,.18); border-radius:999px; color:#d5c3e7; background:rgba(171,135,212,.09); font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.plan-eyebrow { color:#827a8b; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.plan-card h3 { margin-top:18px; font-size:31px; letter-spacing:-.04em; }
.plan-price { margin-top:30px; color:#cab5de; font:700 20px Manrope,sans-serif; }
.plan-card > p { min-height:46px; color:#938b9b; font-size:12px; line-height:1.65; margin:15px 0 0; }
.plan-card ul { list-style:none; padding:0; margin:30px 0; display:grid; gap:14px; }
.plan-card li { display:flex; align-items:flex-start; gap:10px; color:#b4adba; font-size:12px; line-height:1.5; }
.plan-card li span { flex:0 0 19px; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:#cdb8df; background:rgba(172,138,207,.09); font-size:10px; }
.plan-card .plan-action { margin-top:auto; width:100%; }

.download-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:48px; }
.download-card { min-height:132px; padding:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.018); transition:.22s ease; }
.download-card:hover { transform:translateY(-2px); border-color:rgba(202,177,226,.18); background:rgba(255,255,255,.03); }
.download-card.recommended { border-color:rgba(194,164,223,.24); background:linear-gradient(135deg,rgba(166,130,202,.09),rgba(255,255,255,.02)); }
.download-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:14px; color:#c9b2de; background:rgba(168,131,205,.06); font:700 14px Manrope,sans-serif; }
.download-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.download-heading h3 { font-size:15px; }
.download-heading span { padding:4px 7px; border-radius:999px; color:#c8b6d9; background:rgba(177,142,209,.08); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.download-main p { margin:7px 0 0; color:#827b89; font-size:10px; line-height:1.5; }
.download-action { color:#cbb4df; font-size:11px; font-weight:600; white-space:nowrap; }
.download-action.muted { color:#6f6875; }
.download-note { margin-top:16px; padding:16px 18px; display:flex; align-items:flex-start; gap:12px; border:1px solid rgba(255,255,255,.06); border-radius:16px; color:#7f7887; background:rgba(255,255,255,.012); font-size:11px; line-height:1.55; }
.download-note span { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.05); color:#ad9bbb; }
.download-note p { margin:0; }
.guide-shell { margin-top:50px; padding:22px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.guide-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:2px; }
.guide-tab { flex:0 0 auto; min-height:40px; padding:0 14px; border:1px solid transparent; border-radius:11px; color:#89818f; background:transparent; cursor:pointer; font-size:11px; transition:.2s ease; }
.guide-tab:hover { color:#c5bdcb; }
.guide-tab.active { color:#e3d9ed; border-color:rgba(203,179,226,.16); background:rgba(173,138,207,.08); }
.guide-progress { height:2px; margin:22px 0 0; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.05); }
.guide-progress span { display:block; width:25%; height:100%; border-radius:99px; background:linear-gradient(90deg,#9e7bc4,#d1bae6); transition:width .25s ease; }
.guide-content { min-height:250px; display:grid; grid-template-columns:120px 1fr; align-items:center; gap:34px; padding:34px 22px; }
.guide-step-number { color:rgba(204,180,226,.12); font:800 82px/1 Manrope,sans-serif; letter-spacing:-.08em; }
.guide-small { color:#857b8f; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.guide-content h3 { margin-top:9px; font-size:30px; letter-spacing:-.035em; }
.guide-content p { max-width:650px; margin:13px 0 0; color:#938a9b; font-size:13px; line-height:1.7; }
.guide-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:18px; border-top:1px solid var(--line); }
.guide-controls > span { color:#746d79; font-size:10px; }
.guide-controls button:disabled { opacity:.3; cursor:not-allowed; transform:none; }

.live-card { min-height:520px; display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:32px; overflow:hidden; background:linear-gradient(145deg,#121019,#0d0b11); }
.live-visual { min-height:420px; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at center,rgba(153,111,195,.15),transparent 45%),#0b0910; }
.live-visual::before { content:""; position:absolute; inset:0; opacity:.22; background:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:34px 34px; }
.live-noise { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,transparent 0 20%,rgba(0,0,0,.26) 75%); }
.live-center { position:relative; z-index:2; display:grid; justify-items:center; gap:20px; }
.live-logo { width:76px; height:76px; display:grid; place-items:center; border-radius:22px; color:#17101e; background:linear-gradient(135deg,#eee4fa,#a987cf); box-shadow:0 0 60px rgba(157,119,195,.2); font:800 27px Manrope,sans-serif; }
.live-logo.large { width:88px; height:88px; font-size:31px; }
.live-status { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#b9a8c7; background:rgba(15,12,19,.55); font-size:9px; font-weight:700; letter-spacing:.12em; }
.live-status i { width:6px; height:6px; border-radius:50%; background:#b390d2; box-shadow:0 0 12px #a77fc9; }
.live-copy { padding:54px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.live-copy h2 { margin-top:17px; font-size:42px; line-height:1.06; letter-spacing:-.045em; }
.live-copy p { margin:20px 0 28px; color:#958d9d; font-size:13px; line-height:1.75; }
.live-page main { padding-top:1px; }
.live-hero { padding:90px 0 50px; }
.live-heading { max-width:760px; margin-bottom:44px; }
.live-heading h1 { margin-top:18px; font-size:clamp(52px,7vw,86px); line-height:.95; letter-spacing:-.055em; }
.live-heading h1 span { color:#c4aadd; }
.live-heading p { max-width:700px; margin:22px 0 0; color:#9991a0; line-height:1.7; }
.live-layout { display:grid; grid-template-columns:1.45fr .55fr; gap:14px; }
.player-shell { min-height:500px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:26px; background:#070608; box-shadow:0 30px 80px rgba(0,0,0,.26); }
#live-player { width:100%; height:100%; min-height:500px; object-fit:contain; background:#000; }
.player-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px; text-align:center; background:radial-gradient(circle at center,rgba(147,107,187,.14),transparent 40%),linear-gradient(145deg,#121019,#09080c); }
.player-placeholder[hidden] { display:none; }
.player-placeholder h2 { margin:8px 0 0; font-size:27px; letter-spacing:-.035em; }
.player-placeholder p { max-width:430px; margin:0; color:#7f7786; font-size:12px; line-height:1.6; }
.live-info { padding:30px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.018); display:flex; flex-direction:column; justify-content:center; }
.live-kicker { color:#8f819a; font-size:9px; text-transform:uppercase; letter-spacing:.15em; }
.live-info h2 { margin-top:12px; font-size:29px; line-height:1.08; letter-spacing:-.04em; }
.live-info > p { margin:15px 0 27px; color:#8b8392; font-size:12px; line-height:1.65; }
.live-meta { display:grid; gap:10px; }
.live-meta span { padding:13px 14px; border:1px solid rgba(255,255,255,.055); border-radius:12px; color:#77717d; font-size:10px; background:rgba(255,255,255,.015); }
.live-meta b { color:#c4b0d5; margin-right:8px; }
.footer-tagline { margin:11px 0 0; color:#625c67; }
.footer-links { display:flex; gap:20px; color:#837b8a; }
.footer-links a:hover { color:#c5bacc; }

@media (max-width:1000px) {
  .plans-grid { grid-template-columns:1fr; }
  .plan-card { min-height:430px; }
  .download-grid { grid-template-columns:1fr; }
  .live-card { grid-template-columns:1fr; }
  .live-copy { padding:42px; }
  .live-layout { grid-template-columns:1fr; }
  .live-info { min-height:260px; }
}
@media (max-width:700px) {
  .app-preview { padding:28px 24px; }
  .preview-copy strong { font-size:28px; }
  .plans-grid { margin-top:36px; }
  .plan-card { min-height:auto; padding:26px; }
  .download-card { grid-template-columns:auto 1fr; }
  .download-action { grid-column:2; }
  .guide-shell { padding:15px; border-radius:22px; }
  .guide-content { min-height:280px; grid-template-columns:1fr; gap:12px; padding:30px 10px; }
  .guide-step-number { font-size:54px; }
  .guide-controls { flex-wrap:wrap; }
  .guide-controls .btn { min-height:43px; padding:0 14px; }
  .live-card { border-radius:24px; }
  .live-visual { min-height:330px; }
  .live-copy { padding:32px 25px; }
  .live-copy h2 { font-size:35px; }
  .live-heading { margin-bottom:30px; }
  .live-layout { gap:10px; }
  .player-shell,#live-player { min-height:300px; }
  .live-info { padding:25px; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
}

.error-page { width:min(900px,calc(100% - 30px)); min-height:100vh; margin:0 auto; display:grid; place-items:center; }
.error-card { width:min(100%,620px); padding:52px; border:1px solid var(--line); border-radius:30px; text-align:center; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); box-shadow:var(--shadow); }
.error-card .brand-mark { margin:0 auto 28px; }
.error-card h1 { margin:18px 0 0; font-size:clamp(42px,7vw,70px); line-height:1; letter-spacing:-.05em; }
.error-card p { margin:20px auto 30px; max-width:420px; color:var(--muted); line-height:1.7; }

/* --- Premium refinement pass v2 --- */
:root {
  --bg:#0a0810;
  --panel:#121019;
  --panel-2:#17141e;
  --text:#f7f4fb;
  --muted:#a7a0ae;
  --purple:#a88bd0;
  --purple-2:#d4c0e8;
  --line:rgba(255,255,255,.075);
  --hairline:rgba(220,201,239,.11);
  --shadow-soft:0 22px 70px rgba(0,0,0,.28);
}
::selection { background:rgba(184,151,218,.28); color:#fff; }
body { background:radial-gradient(circle at 78% 2%,rgba(126,88,164,.09),transparent 25%),radial-gradient(circle at 12% 45%,rgba(105,75,136,.055),transparent 28%),var(--bg); }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:1px solid rgba(218,194,238,.55); outline-offset:4px; }

.site-header {
  width:min(1160px,calc(100% - 40px));
  height:72px;
  margin-top:14px;
  padding:0 16px;
  border-color:rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(10,8,15,.68);
  box-shadow:0 12px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);
}
.brand-mark { border-radius:10px; box-shadow:0 10px 30px rgba(143,107,180,.16); }
.brand-name { font-size:13px; letter-spacing:.115em; }
.nav { gap:26px; color:#a8a1af; font-size:12px; }
.nav a { position:relative; padding:8px 0; }
.nav a::after { content:""; position:absolute; left:50%; bottom:1px; width:0; height:1px; background:#baa0d3; transform:translateX(-50%); transition:width .22s ease; }
.nav a:hover::after { width:16px; }
.header-cta { border-color:rgba(210,188,231,.16); color:#e7dfee; background:rgba(174,139,207,.055); font-size:11px; letter-spacing:.025em; }

main,footer { width:min(1160px,calc(100% - 40px)); }
.hero { min-height:750px; gap:78px; padding-top:72px; }
.eyebrow { color:#aaa1b2; font-size:10px; letter-spacing:.175em; }
.eyebrow i { width:5px; height:5px; box-shadow:0 0 12px rgba(197,168,222,.72); }
.hero h1 { max-width:640px; font-size:clamp(50px,6vw,78px); line-height:.965; letter-spacing:-.055em; }
.hero h1 span { background:linear-gradient(110deg,#d7c5e8,#aa8acb 78%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-text { max-width:570px; color:#a39ba9; font-size:16px; line-height:1.75; }
.hero-actions { margin-top:32px; gap:10px; }
.btn { min-height:47px; border-radius:13px; padding:0 19px; font-size:12px; letter-spacing:.01em; }
.btn-primary { background:linear-gradient(135deg,#eadff5,#b495d3); box-shadow:0 14px 36px rgba(133,97,169,.15),inset 0 1px rgba(255,255,255,.55); }
.btn-ghost { border-color:rgba(255,255,255,.075); background:rgba(255,255,255,.018); }
.trust-row { margin-top:42px; gap:24px; color:#756f7b; font-size:9px; letter-spacing:.105em; }

.screen-shell { border-color:rgba(255,255,255,.085); background:linear-gradient(145deg,#15111d,#0d0b12 72%); box-shadow:0 34px 90px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.045); }
.float-card { border-color:rgba(255,255,255,.075); background:rgba(16,13,22,.78); box-shadow:0 18px 48px rgba(0,0,0,.26); }
.section { position:relative; padding:116px 0; }
.section:not(:first-of-type)::before { content:""; position:absolute; top:0; left:50%; width:min(700px,68%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(213,188,235,.08),transparent); }
.section-heading { max-width:660px; }
.section-heading h2,.devices h2,.final-cta h2 { margin-top:16px; font-size:clamp(36px,4.7vw,57px); line-height:1.025; letter-spacing:-.047em; }
.section-heading p,.devices p,.final-cta p { color:#9a929f; font-size:14px; line-height:1.75; }
.feature-grid { gap:14px; margin-top:50px; }
.feature-card { min-height:250px; padding:28px; border-color:rgba(255,255,255,.065); border-radius:22px; background:linear-gradient(155deg,rgba(255,255,255,.027),rgba(255,255,255,.008)); box-shadow:inset 0 1px rgba(255,255,255,.018); }
.feature-card:hover { transform:translateY(-3px); border-color:rgba(197,171,226,.13); background:rgba(255,255,255,.026); }
.feature-card h3 { font-size:23px; }

.plan-card { border-color:rgba(255,255,255,.065); border-radius:23px; background:linear-gradient(155deg,rgba(255,255,255,.028),rgba(255,255,255,.008)); box-shadow:inset 0 1px rgba(255,255,255,.018); }
.plan-card.featured { border-color:rgba(201,178,226,.2); box-shadow:0 24px 70px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035); }
.plan-badge { border-color:rgba(211,190,232,.13); background:rgba(171,135,212,.06); }
.download-card { border-color:rgba(255,255,255,.06); border-radius:18px; background:rgba(255,255,255,.012); }
.download-card.recommended { border-color:rgba(194,164,223,.18); background:linear-gradient(135deg,rgba(151,116,183,.065),rgba(255,255,255,.012)); }
.guide-shell { border-color:rgba(255,255,255,.065); border-radius:25px; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.live-card { border-color:rgba(255,255,255,.065); border-radius:28px; box-shadow:var(--shadow-soft); }
.final-cta { border-color:rgba(255,255,255,.065); background:radial-gradient(circle at 90% 20%,rgba(157,119,192,.09),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.022),rgba(255,255,255,.008)); }
.footer-tagline { margin-top:10px; color:#817887; font-size:10px; letter-spacing:.11em; }
footer { border-top-color:rgba(255,255,255,.065); }

@media (max-width:900px) {
  .site-header,main,footer { width:calc(100% - 28px); }
  .site-header { height:68px; margin-top:10px; top:10px; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:24px; padding:74px 0 44px; }
  .hero-copy { text-align:center; }
  .hero h1,.hero-text { margin-left:auto; margin-right:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-visual { min-height:470px; }
  .section { padding:96px 0; }
  .section-heading { max-width:700px; }
  .feature-grid,.plans-grid { grid-template-columns:1fr; }
  .download-grid,.faq,.live-layout { grid-template-columns:1fr; }
  .live-card { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .site-header,main,footer { width:calc(100% - 22px); }
  .site-header { height:64px; padding:0 11px; border-radius:16px; }
  .brand-name { font-size:10px; letter-spacing:.1em; }
  .header-cta { padding:9px 10px; font-size:10px; }
  .hero { padding-top:64px; }
  .hero h1 { font-size:43px; line-height:.98; }
  .hero-text { font-size:14px; line-height:1.7; }
  .hero-actions { flex-direction:column; }
  .trust-row { display:grid; grid-template-columns:1fr; gap:9px; width:max-content; margin:32px auto 0; text-align:left; }
  .hero-visual { min-height:370px; }
  .section { padding:78px 0; }
  .section-heading h2,.devices h2,.final-cta h2 { font-size:36px; }
  .section-heading p,.devices p,.final-cta p { font-size:13px; }
  .feature-card { min-height:205px; }
  .plan-card { min-height:auto; padding:25px; }
  .final-cta { padding:32px 24px; border-radius:24px; }
}

html { color-scheme:dark; }
body { text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1; }
section[id] { scroll-margin-top:105px; }
.footer-tagline { font-weight:500; }
@media (max-width:600px) {
  section[id] { scroll-margin-top:82px; }
}

.menu-toggle {
  display:none;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.menu-toggle span {
  width:16px;
  height:1px;
  background:#d7cfe0;
  transition:transform .22s ease,opacity .22s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }

@media (max-width:900px) {
  .header-cta { display:none; }
  .menu-toggle { display:flex; }
  .site-header { position:sticky; }
  .nav {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    padding:10px;
    flex-direction:column;
    gap:2px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    background:rgba(10,8,15,.94);
    backdrop-filter:blur(20px);
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  .nav.open { display:flex; }
  .nav a {
    width:100%;
    padding:13px 14px;
    border-radius:10px;
    font-size:12px;
  }
  .nav a:hover { background:rgba(255,255,255,.035); }
  .nav a::after { display:none; }
  body.menu-open { overflow:hidden; }
}

.release-panel {
  margin-top:28px;
  padding:28px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 0,rgba(165,127,200,.08),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.008));
}
.release-panel-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.release-panel h3 {
  margin-top:8px;
  font-size:24px;
  letter-spacing:-.035em;
}
.release-kicker {
  display:block;
  color:#857c8d;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.release-state {
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid rgba(208,185,229,.13);
  border-radius:999px;
  color:#cbb7dd;
  background:rgba(167,132,200,.055);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.release-state.beta {
  color:#b9b1c0;
  background:rgba(255,255,255,.025);
}

.release-meta {
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.release-meta span {
  min-height:62px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:13px;
  color:#8c8492;
  background:rgba(255,255,255,.012);
  font-size:10px;
}
.release-meta b {
  color:#c2b8ca;
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.release-integrity {
  margin-top:12px;
  padding:16px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:18px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:13px;
  background:rgba(255,255,255,.01);
}
.release-integrity strong {
  display:block;
  margin-top:6px;
  color:#b8afbe;
  font-size:11px;
  font-weight:500;
}
.release-integrity code {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#827989;
  font-size:9px;
  white-space:nowrap;
}

.release-notes {
  margin-top:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.release-notes ul {
  margin:0;
  padding:0 0 0 18px;
  color:#938b9a;
  font-size:11px;
  line-height:1.7;
}
.release-download { flex:0 0 auto; }
@media (max-width:760px) {
  .release-panel { padding:22px; }
  .release-panel-top { gap:14px; }
  .release-panel h3 { font-size:21px; }
  .release-meta { grid-template-columns:1fr 1fr; }
  .release-integrity { grid-template-columns:1fr; }
  .release-notes { align-items:stretch; flex-direction:column; }
  .release-download { width:100%; }
}

.release-history-link {
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#998ea3;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  transition:color .2s ease,transform .2s ease;
}
.release-history-link:hover { color:#d1c2de; transform:translateX(2px); }

.versions-hero {
  padding:120px 0 54px;
}
.versions-hero .section-heading {
  max-width:760px;
}
.versions-hero h1 {
  margin-top:17px;
  font:800 clamp(50px,7vw,82px)/.98 Manrope,sans-serif;
  letter-spacing:-.055em;
}
.versions-hero p {
  max-width:680px;
  margin:22px 0 0;
  color:#9b93a1;
  line-height:1.75;
}

.versions-catalog {
  padding:0 0 120px;
}
.versions-toolbar {
  min-height:86px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:rgba(255,255,255,.012);
}
.versions-toolbar strong {
  display:block;
  margin-top:6px;
  color:#bbb2c0;
  font-size:12px;
  font-weight:500;
}
.versions-grid {
  display:grid;
  gap:16px;
  margin-top:20px;
}
.version-platform {
  padding:26px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.007));
}
.version-platform-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.version-platform-head h2 {
  margin-top:7px;
  font-size:27px;
  letter-spacing:-.035em;
}

.version-release-list {
  display:grid;
  gap:12px;
  margin-top:24px;
}
.version-platform-empty {
  padding:25px;
  border:1px dashed rgba(255,255,255,.065);
  border-radius:16px;
  background:rgba(255,255,255,.008);
}
.version-platform-empty span {
  color:#b9afbe;
  font-size:12px;
  font-weight:600;
}
.version-platform-empty p,
.version-empty-note {
  margin:8px 0 0;
  color:#7f7786;
  font-size:10px;
  line-height:1.6;
}
.version-release {
  padding:22px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:17px;
  background:rgba(255,255,255,.01);
}
.version-release-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.version-release-head h3 {
  margin-top:6px;
  font-size:23px;
}
.version-release-head > span {
  color:#7d7583;
  font-size:10px;
}

.version-release-meta {
  margin-top:16px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
}
.version-release-meta > span {
  color:#aaa1af;
  font-size:10px;
}
.version-release-meta code {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#746c79;
  font-size:9px;
  white-space:nowrap;
}
.version-release-notes {
  margin:17px 0;
}
.version-release-notes ul {
  margin:0;
  padding-left:18px;
  color:#918895;
  font-size:10px;
  line-height:1.7;
}
.version-load-error {
  padding:28px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  color:#958c9a;
  background:rgba(255,255,255,.01);
}
@media (max-width:700px) {
  .versions-hero { padding:88px 0 42px; }
  .versions-hero h1 { font-size:45px; }
  .versions-toolbar { align-items:flex-start; flex-direction:column; }
  .version-platform { padding:21px; }
  .version-platform-head h2 { font-size:23px; }
  .version-release-meta { grid-template-columns:1fr; }
}

.version-compat {
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.version-compat > span {
  margin-right:3px;
  color:#7f7786;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.version-compat b {
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:999px;
  color:#a99fb0;
  background:rgba(255,255,255,.012);
  font-size:9px;
  font-weight:500;
}

@media (min-width:901px) {
  .download-grid > .download-card:last-child:nth-child(odd) {
    grid-column:1 / -1;
  }
}

.plan-action.is-pending,
.plan-action:disabled {
  cursor:default;
  color:#77707c;
  border-color:rgba(255,255,255,.055);
  background:rgba(255,255,255,.012);
  box-shadow:none;
  opacity:.82;
}
.plan-action:disabled:hover {
  transform:none;
  border-color:rgba(255,255,255,.055);
  background:rgba(255,255,255,.012);
}

.nav a[aria-current="page"] {
  color:#eee7f5;
}
.nav a[aria-current="page"]::after {
  width:16px;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:1000;
  padding:10px 13px;
  border:1px solid rgba(220,198,239,.22);
  border-radius:11px;
  color:#f5eefb;
  background:#17121f;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  font-size:11px;
  font-weight:600;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus { transform:none; }
main:focus { outline:none; }

/* --- TV NEO PLUS premium motion layer --- */
@keyframes neoAmbientOne {
  0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.16; }
  50% { transform:translate3d(-28px,22px,0) scale(1.045); opacity:.205; }
}
@keyframes neoAmbientTwo {
  0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.13; }
  50% { transform:translate3d(24px,-18px,0) scale(1.055); opacity:.17; }
}
@keyframes neoScreenFloat {
  0%,100% { transform:perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(0); }
  50% { transform:perspective(1100px) rotateY(-4.5deg) rotateX(1.6deg) translateY(-7px); }
}
@keyframes neoFloatLive {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(0,-6px,0); }
}
@keyframes neoFloatDevice {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(0,5px,0); }
}
@keyframes neoSoftPulse {
  0%,100% { box-shadow:0 0 0 5px rgba(183,153,218,.08),0 0 0 rgba(183,153,218,0); }
  50% { box-shadow:0 0 0 7px rgba(183,153,218,.035),0 0 22px rgba(183,153,218,.20); }
}
@keyframes neoProgressGlow {
  0%,100% { opacity:.68; }
  50% { opacity:1; }
}

.ambient-one { animation:neoAmbientOne 18s ease-in-out infinite; will-change:transform,opacity; }
.ambient-two { animation:neoAmbientTwo 22s ease-in-out infinite; will-change:transform,opacity; }

@media (min-width:901px) {
  .premium-screen {
    animation:neoScreenFloat 8.5s cubic-bezier(.45,.05,.55,.95) infinite;
    will-change:transform;
  }
  .float-live { animation:neoFloatLive 6.8s ease-in-out infinite; }
  .float-device { animation:neoFloatDevice 8.2s ease-in-out infinite; }
}

.pulse { animation:neoSoftPulse 2.8s ease-in-out infinite; }

.site-header {
  transition:
    background .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    backdrop-filter .32s ease,
    transform .32s ease;
}
.site-header.is-scrolled {
  background:rgba(10,8,15,.86);
  border-color:rgba(214,190,234,.115);
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.038);
  backdrop-filter:blur(22px) saturate(118%);
}

.neo-scroll-progress {
  position:fixed;
  inset:0 auto auto 0;
  z-index:120;
  width:100%;
  height:1px;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(169,139,217,.28),rgba(225,208,241,.92),rgba(169,139,217,.34));
  box-shadow:0 0 14px rgba(183,153,218,.28);
  animation:neoProgressGlow 3s ease-in-out infinite;
  will-change:transform;
}

.btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.btn-primary::after {
  content:"";
  position:absolute;
  z-index:0;
  top:-80%;
  left:-42%;
  width:30%;
  height:260%;
  transform:rotate(18deg) translateX(-170%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  transform:rotate(18deg) translateX(540%);
}

.feature-card,
.plan-card,
.download-card,
.guide-shell,
.release-panel,
.live-card,
.final-cta {
  --neo-x:50%;
  --neo-y:50%;
  position:relative;
  isolation:isolate;
}
.feature-card::after,
.plan-card::after,
.download-card::after,
.guide-shell::after,
.release-panel::after,
.live-card::after,
.final-cta::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      330px circle at var(--neo-x) var(--neo-y),
      rgba(215,193,235,.075),
      rgba(169,139,217,.025) 38%,
      transparent 68%
    );
  transition:opacity .28s ease;
}
@media (hover:hover) and (pointer:fine) {
  .feature-card:hover::after,
  .plan-card:hover::after,
  .download-card:hover::after,
  .guide-shell:hover::after,
  .release-panel:hover::after,
  .live-card:hover::after,
  .final-cta:hover::after {
    opacity:1;
  }
}

.feature-grid .reveal:nth-child(2),
.plans-grid .reveal:nth-child(2),
.download-grid .reveal:nth-child(2) { transition-delay:.07s; }
.feature-grid .reveal:nth-child(3),
.plans-grid .reveal:nth-child(3),
.download-grid .reveal:nth-child(3) { transition-delay:.14s; }
.download-grid .reveal:nth-child(4) { transition-delay:.21s; }
.download-grid .reveal:nth-child(5) { transition-delay:.28s; }

.section-heading .eyebrow i {
  transition:box-shadow .3s ease,transform .3s ease;
}
.section-heading:hover .eyebrow i {
  transform:scale(1.18);
  box-shadow:0 0 18px rgba(197,168,222,.78);
}

@media (prefers-reduced-motion:reduce) {
  .ambient-one,
  .ambient-two,
  .premium-screen,
  .float-live,
  .float-device,
  .pulse,
  .neo-scroll-progress {
    animation:none!important;
  }
  .site-header,
  .btn-primary::after,
  .feature-card::after,
  .plan-card::after,
  .download-card::after,
  .guide-shell::after,
  .release-panel::after,
  .live-card::after,
  .final-cta::after {
    transition:none!important;
  }
}

/* --- Product showcase: original TV NEO PLUS composition --- */
.product-showcase {
  padding-top:96px;
  padding-bottom:116px;
}
.product-stage {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:64px;
  align-items:center;
}
.product-frame {
  position:relative;
  overflow:hidden;
  min-height:520px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:32px;
  background:
    radial-gradient(circle at 78% 18%,rgba(159,119,194,.12),transparent 26%),
    linear-gradient(150deg,#14101b 0%,#0d0b12 68%,#0a0910 100%);
  box-shadow:
    0 42px 110px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.03);
}
.product-frame::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 26%),
    radial-gradient(circle at 15% 90%,rgba(133,95,168,.07),transparent 28%);
}
.product-frame-top {
  height:72px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.product-brand-dot {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#1a1220;
  background:linear-gradient(135deg,#efe4f9,#b797d5);
  font:800 13px Manrope,sans-serif;
  box-shadow:0 10px 30px rgba(147,109,181,.16);
}
.product-frame-nav {
  display:flex;
  gap:8px;
  justify-content:center;
}
.product-frame-nav i {
  width:32px;
  height:5px;
  border-radius:99px;
  background:rgba(255,255,255,.055);
}
.product-frame-nav i:first-child {
  width:44px;
  background:rgba(213,191,233,.18);
}
.product-live-pill {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(211,190,232,.10);
  border-radius:999px;
  color:#c7bfcc;
  background:rgba(255,255,255,.018);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}
.product-live-pill b {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b799da;
  box-shadow:0 0 12px rgba(183,153,218,.72);
}
.product-frame-body {
  position:relative;
  min-height:448px;
  padding:38px;
  display:grid;
  grid-template-columns:180px 1fr;
  grid-template-rows:auto 1fr auto;
  gap:22px;
}
.product-side {
  grid-row:1 / span 2;
  padding:22px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:20px;
  background:rgba(255,255,255,.012);
}
.product-side-kicker {
  display:block;
  color:#817788;
  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
}
.product-side strong {
  display:block;
  margin-top:54px;
  color:#f2edf5;
  font:700 26px/1.05 Manrope,sans-serif;
  letter-spacing:-.04em;
}
.product-side small {
  display:block;
  margin-top:16px;
  color:#8f8794;
  font-size:10px;
  line-height:1.5;
}
.product-channel-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.product-channel-grid span {
  aspect-ratio:1.45/1;
  border:1px solid rgba(255,255,255,.052);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.product-channel-grid span.active {
  border-color:rgba(198,172,222,.18);
  background:
    radial-gradient(circle at 70% 25%,rgba(176,140,208,.14),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
}
.product-epg {
  grid-column:2;
  padding:19px 20px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:rgba(255,255,255,.013);
}
.product-epg > div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.product-epg span {
  color:#9f87b5;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}
.product-epg strong {
  color:#ded7e4;
  font-size:11px;
  font-weight:600;
}
.product-progress {
  height:3px;
  margin-top:16px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.05);
}
.product-progress i {
  display:block;
  width:64%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#9d7bc1,#d1bde4);
  box-shadow:0 0 14px rgba(169,137,202,.25);
}
.product-epg small {
  display:block;
  margin-top:11px;
  color:#766f7c;
  font-size:9px;
}
.product-copy h2 {
  max-width:510px;
  margin-top:18px;
  font-size:clamp(40px,4.9vw,62px);
  line-height:1.01;
  letter-spacing:-.05em;
}
.product-copy > p {
  max-width:540px;
  margin-top:22px;
  color:#9a929f;
  font-size:14px;
  line-height:1.75;
}
.product-proof {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:34px;
}
.product-proof > div {
  min-height:124px;
  padding:18px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:17px;
  background:linear-gradient(155deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
}
.product-proof strong {
  display:block;
  color:#e8dff0;
  font:700 25px/1 Manrope,sans-serif;
  letter-spacing:-.035em;
}
.product-proof span {
  display:block;
  margin-top:9px;
  color:#b8b0bd;
  font-size:10px;
  font-weight:700;
}
.product-proof small {
  display:block;
  margin-top:8px;
  color:#746d79;
  font-size:8px;
  line-height:1.45;
}
.product-device-rail {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:24px;
  color:#7f7784;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.product-device-rail i {
  width:3px;
  height:3px;
  border-radius:50%;
  background:#7f668f;
}

@media (hover:hover) and (pointer:fine) {
  .product-frame {
    transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .35s ease;
  }
  .product-stage:hover .product-frame {
    transform:translateY(-5px) rotateX(.35deg);
    border-color:rgba(202,178,225,.12);
    box-shadow:
      0 48px 120px rgba(0,0,0,.38),
      0 0 70px rgba(135,95,168,.04),
      inset 0 1px rgba(255,255,255,.04);
  }
}

@media (max-width:980px) {
  .product-stage {
    grid-template-columns:1fr;
    gap:44px;
  }
  .product-copy {
    max-width:720px;
  }
}
@media (max-width:680px) {
  .product-showcase {
    padding-top:72px;
    padding-bottom:84px;
  }
  .product-frame {
    min-height:410px;
    border-radius:24px;
  }
  .product-frame-top {
    height:58px;
    padding:0 14px;
  }
  .product-frame-nav {
    display:none;
  }
  .product-frame-top {
    grid-template-columns:auto 1fr;
  }
  .product-live-pill {
    justify-self:end;
  }
  .product-frame-body {
    min-height:352px;
    padding:18px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .product-side {
    grid-row:auto;
    min-height:102px;
  }
  .product-side strong {
    margin-top:18px;
    font-size:21px;
  }
  .product-channel-grid {
    grid-template-columns:repeat(3,1fr);
  }
  .product-epg {
    grid-column:auto;
  }
  .product-copy h2 {
    font-size:38px;
  }
  .product-proof {
    grid-template-columns:1fr;
  }
  .product-proof > div {
    min-height:auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  .product-frame {
    transition:none!important;
    transform:none!important;
  }
}

/* --- Editorial experience ribbon --- */
@keyframes neoRibbonFlow {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

.experience-ribbon {
  position:relative;
  width:100%;
  overflow:hidden;
  margin:10px 0 6px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  background:
    linear-gradient(90deg,rgba(255,255,255,.008),rgba(154,116,188,.022),rgba(255,255,255,.008));
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.experience-ribbon-track {
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  white-space:nowrap;
  animation:neoRibbonFlow 28s linear infinite;
  will-change:transform;
}
.experience-ribbon span {
  color:#938a99;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}
.experience-ribbon span:nth-of-type(5n+1),
.experience-ribbon span:nth-of-type(5n+4) {
  color:#c8b5d9;
}
.experience-ribbon i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#775e87;
  box-shadow:0 0 10px rgba(180,145,210,.22);
}

@media (hover:hover) and (pointer:fine) {
  .experience-ribbon:hover .experience-ribbon-track {
    animation-play-state:paused;
  }
}
@media (max-width:680px) {
  .experience-ribbon {
    margin-top:0;
    padding:17px 0;
  }
  .experience-ribbon-track {
    gap:14px;
    animation-duration:23s;
  }
  .experience-ribbon span {
    font-size:8px;
    letter-spacing:.14em;
  }
}
@media (prefers-reduced-motion:reduce) {
  .experience-ribbon-track {
    animation:none!important;
    transform:none!important;
  }
}

/* --- Platform compatibility showcase --- */
.platform-section {
  padding-top:94px;
  padding-bottom:110px;
}
.platform-heading {
  max-width:720px;
}
.platform-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:44px;
}
.platform-card {
  min-height:126px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  transition:
    transform .26s ease,
    border-color .26s ease,
    background .26s ease,
    box-shadow .26s ease;
}
.platform-card img {
  width:38px;
  height:38px;
  object-fit:contain;
  opacity:.9;
  filter:drop-shadow(0 8px 18px rgba(145,110,176,.08));
}
.platform-card > div {
  min-width:0;
}
.platform-card strong {
  display:block;
  color:#e9e3ed;
  font-size:13px;
  line-height:1.25;
}
.platform-card span:not(.platform-monogram) {
  display:block;
  margin-top:7px;
  color:#817987;
  font-size:9px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.platform-card.available {
  border-color:rgba(205,179,229,.11);
  background:
    radial-gradient(circle at 16% 12%,rgba(164,127,198,.065),transparent 36%),
    linear-gradient(155deg,rgba(255,255,255,.03),rgba(255,255,255,.009));
}
.platform-card.available span:not(.platform-monogram) {
  color:#aa8fc2;
}
.platform-card.roadmap {
  opacity:.68;
}
.platform-monogram {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(217,196,235,.11);
  border-radius:11px;
  color:#cbbad9;
  background:rgba(255,255,255,.025);
  font:800 10px Manrope,sans-serif;
  letter-spacing:.06em;
}
.platform-note {
  max-width:780px;
  margin:22px 0 0;
  color:#716a76;
  font-size:9px;
  line-height:1.65;
}
@media (hover:hover) and (pointer:fine) {
  .platform-card:hover {
    transform:translateY(-3px);
    border-color:rgba(205,180,228,.16);
    background:rgba(255,255,255,.025);
    box-shadow:
      0 18px 44px rgba(0,0,0,.16),
      inset 0 1px rgba(255,255,255,.025);
  }
  .platform-card.roadmap:hover {
    opacity:.82;
  }
}
@media (max-width:900px) {
  .platform-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px) {
  .platform-section {
    padding-top:74px;
    padding-bottom:82px;
  }
  .platform-grid {
    grid-template-columns:1fr;
    gap:10px;
  }
  .platform-card {
    min-height:96px;
    padding:17px 18px;
    border-radius:17px;
  }
  .platform-card img,
  .platform-monogram {
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}

/* --- Interactive product preview --- */
.product-preview-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.product-preview-tab {
  appearance:none;
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
  padding:10px 13px;
  color:#857d8a;
  background:rgba(255,255,255,.012);
  font:700 9px/1 Manrope,sans-serif;
  letter-spacing:.055em;
  cursor:pointer;
  transition:
    color .24s ease,
    border-color .24s ease,
    background .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}
.product-preview-tab:hover,
.product-preview-tab:focus-visible {
  color:#d9cde3;
  border-color:rgba(201,177,225,.16);
  outline:none;
}
.product-preview-tab.active {
  color:#efe7f5;
  border-color:rgba(203,181,225,.19);
  background:linear-gradient(135deg,rgba(164,126,198,.10),rgba(255,255,255,.02));
  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.035);
}
.product-preview-tab.active::before {
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:7px;
  vertical-align:2px;
  border-radius:50%;
  background:#b596d0;
  box-shadow:0 0 10px rgba(181,150,208,.65);
}

.product-frame-body,
.product-side,
.product-channel-grid span,
.product-epg,
.product-progress i,
.product-live-pill,
.product-side strong,
.product-side small {
  transition:
    background .38s ease,
    border-color .38s ease,
    opacity .32s ease,
    transform .38s cubic-bezier(.2,.7,.2,1),
    width .42s cubic-bezier(.2,.7,.2,1),
    color .32s ease,
    box-shadow .38s ease;
}

/* Live */
.product-frame.preview-live .product-progress i { width:64%; }

/* Movies */
.product-frame.preview-movies {
  background:
    radial-gradient(circle at 78% 18%,rgba(184,143,217,.145),transparent 28%),
    linear-gradient(150deg,#15101d 0%,#0d0b12 68%,#09080e 100%);
}
.product-frame.preview-movies .product-channel-grid span {
  aspect-ratio:.72/1;
  border-radius:13px;
  background:
    linear-gradient(160deg,rgba(192,156,220,.09),rgba(255,255,255,.012) 44%,rgba(0,0,0,.08));
}
.product-frame.preview-movies .product-channel-grid span:nth-child(2n) {
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(133,95,166,.055));
}
.product-frame.preview-movies .product-progress i { width:38%; }

/* Series */
.product-frame.preview-series .product-channel-grid span {
  aspect-ratio:1.15/1;
  border-radius:15px;
  background:
    radial-gradient(circle at 68% 24%,rgba(169,126,202,.085),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.009));
}
.product-frame.preview-series .product-channel-grid span:nth-child(1),
.product-frame.preview-series .product-channel-grid span:nth-child(4) {
  transform:translateY(-3px);
  border-color:rgba(197,169,220,.14);
}
.product-frame.preview-series .product-progress i { width:52%; }

/* My List */
.product-frame.preview-list .product-channel-grid {
  grid-template-columns:1fr 1fr;
}
.product-frame.preview-list .product-channel-grid span {
  aspect-ratio:2.3/1;
  border-radius:13px;
  background:
    linear-gradient(90deg,rgba(185,151,212,.075),rgba(255,255,255,.018));
}
.product-frame.preview-list .product-channel-grid span:nth-child(n+5) {
  display:none;
}
.product-frame.preview-list .product-progress i { width:82%; }
.product-frame.preview-list .product-side {
  border-color:rgba(198,171,223,.12);
  background:linear-gradient(150deg,rgba(151,113,184,.055),rgba(255,255,255,.01));
}

@media (max-width:680px) {
  .product-preview-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:24px;
  }
  .product-preview-tab {
    padding:11px 10px;
    text-align:center;
  }
}

/* Platform cards: more tactile, still quiet */
.platform-card {
  position:relative;
  overflow:hidden;
}
.platform-card::before {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  top:-58px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(190,157,217,.065),transparent 68%);
  opacity:0;
  transform:scale(.8);
  transition:opacity .32s ease,transform .42s ease;
  pointer-events:none;
}
.platform-card img,
.platform-monogram {
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s ease,filter .3s ease;
}
.platform-card.available::after {
  content:"";
  position:absolute;
  top:16px;
  right:16px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a889c2;
  box-shadow:0 0 10px rgba(168,137,194,.42);
  opacity:.7;
}
@media (hover:hover) and (pointer:fine) {
  .platform-card:hover::before {
    opacity:1;
    transform:scale(1);
  }
  .platform-card:hover img,
  .platform-card:hover .platform-monogram {
    transform:translateY(-2px) scale(1.035);
    filter:drop-shadow(0 10px 20px rgba(160,122,190,.12));
  }
}
@media (prefers-reduced-motion:reduce) {
  .product-preview-tab,
  .product-frame-body,
  .product-side,
  .product-channel-grid span,
  .product-epg,
  .product-progress i,
  .product-live-pill,
  .platform-card::before,
  .platform-card img,
  .platform-monogram {
    transition:none!important;
  }
}

/* --- Featured channels: real brands, premium restraint --- */
.channels-section {
  padding-top:96px;
  padding-bottom:112px;
}
.channels-heading {
  max-width:760px;
}
.channel-filter {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:34px;
}
.channel-filter-btn {
  appearance:none;
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
  padding:10px 13px;
  color:#847d8a;
  background:rgba(255,255,255,.012);
  font:700 9px/1 Manrope,sans-serif;
  letter-spacing:.05em;
  cursor:pointer;
  transition:all .24s ease;
}
.channel-filter-btn:hover,
.channel-filter-btn:focus-visible {
  color:#ddd4e4;
  border-color:rgba(204,180,226,.16);
  outline:none;
}
.channel-filter-btn.active {
  color:#f0e9f4;
  border-color:rgba(204,181,227,.19);
  background:linear-gradient(135deg,rgba(161,123,194,.10),rgba(255,255,255,.018));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.channel-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}
.channel-card {
  min-height:220px;
  position:relative;
  overflow:hidden;
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  background:linear-gradient(155deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  transition:
    opacity .32s ease,
    transform .32s ease,
    filter .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}
.channel-logo-plate {
  min-height:104px;
  display:grid;
  place-items:center;
  padding:22px;
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(250,248,251,.97),rgba(234,228,238,.94));
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px rgba(255,255,255,.85);
}
.channel-logo-plate img {
  width:100%;
  max-width:118px;
  max-height:58px;
  object-fit:contain;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .32s ease;
}
.channel-logo-dark {
  background:
    linear-gradient(145deg,rgba(26,22,31,.98),rgba(14,12,18,.98));
  border:1px solid rgba(255,255,255,.055);
}
.channel-copy {
  padding:17px 4px 2px;
}
.channel-copy span {
  color:#887e8f;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.channel-copy strong {
  display:block;
  margin-top:8px;
  color:#ede7f0;
  font:700 15px/1.15 Manrope,sans-serif;
}
.channel-copy small {
  display:block;
  margin-top:8px;
  color:#716a76;
  font-size:9px;
}
.channel-card.is-filtered-out {
  opacity:.14;
  transform:scale(.985);
  filter:saturate(.2);
}
.channel-note {
  max-width:760px;
  margin-top:22px;
  color:#716a76;
  font-size:9px;
  line-height:1.65;
}
@media (hover:hover) and (pointer:fine) {
  .channel-card:not(.is-filtered-out):hover {
    transform:translateY(-4px);
    border-color:rgba(206,183,228,.13);
    box-shadow:
      0 22px 54px rgba(0,0,0,.20),
      inset 0 1px rgba(255,255,255,.025);
  }
  .channel-card:not(.is-filtered-out):hover .channel-logo-plate img {
    transform:scale(1.035);
    filter:saturate(1.08);
  }
}
@media (max-width:1050px) {
  .channel-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:680px) {
  .channels-section {
    padding-top:76px;
    padding-bottom:84px;
  }
  .channel-filter {
    gap:7px;
    margin-top:26px;
  }
  .channel-grid {
    display:flex;
    overflow-x:auto;
    gap:10px;
    margin-right:-11px;
    padding:0 11px 10px 0;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .channel-grid::-webkit-scrollbar { display:none; }
  .channel-card {
    flex:0 0 72%;
    min-height:205px;
    scroll-snap-align:start;
  }
  .channel-card.is-filtered-out {
    flex-basis:24%;
    opacity:.10;
  }
}
@media (prefers-reduced-motion:reduce) {
  .channel-filter-btn,
  .channel-card,
  .channel-logo-plate img {
    transition:none!important;
  }
}

/* --- Official-color platform identity --- */
.platform-logo-plate {
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(236,232,239,.94));
  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.9);
}
.platform-logo-plate img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  opacity:1;
  filter:none;
}
.platform-logo-wide {
  width:72px;
  flex-basis:72px;
  padding:11px 9px;
}
.platform-logo-pair {
  width:82px;
  flex-basis:82px;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:10px 8px;
}
.platform-logo-pair img {
  min-width:0;
}
.platform-card.roadmap {
  opacity:.78;
}
@media (hover:hover) and (pointer:fine) {
  .platform-card:hover .platform-logo-plate {
    box-shadow:
      0 16px 34px rgba(0,0,0,.2),
      0 0 28px rgba(177,145,205,.06),
      inset 0 1px rgba(255,255,255,.95);
  }
  .platform-card:hover .platform-logo-plate img {
    transform:scale(1.045);
    filter:none;
  }
}
@media (max-width:560px) {
  .platform-logo-plate {
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  .platform-logo-wide {
    width:66px;
    flex-basis:66px;
  }
  .platform-logo-pair {
    width:76px;
    flex-basis:76px;
  }
}

/* --- First-party live site presence --- */
.site-presence {
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  align-items:center;
  gap:22px;
  margin:18px 0 28px;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:
    radial-gradient(circle at 10% 20%,rgba(159,120,191,.055),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.presence-item {
  display:flex;
  align-items:center;
  gap:11px;
}
.presence-item small {
  display:block;
  color:#766f7b;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.presence-item strong {
  display:block;
  margin-top:4px;
  color:#eee8f2;
  font:700 20px/1 Manrope,sans-serif;
  letter-spacing:-.035em;
}
.presence-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9f7fba;
  box-shadow:0 0 0 5px rgba(159,127,186,.055),0 0 16px rgba(159,127,186,.30);
  animation:neoSoftPulse 2.8s ease-in-out infinite;
}
.presence-divider {
  width:1px;
  height:34px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10),transparent);
}
.site-presence > p {
  justify-self:end;
  margin:0;
  color:#6f6874;
  font-size:9px;
  line-height:1.5;
  text-align:right;
}
@media (max-width:700px) {
  .site-presence {
    grid-template-columns:1fr 1px 1fr;
    gap:14px;
    padding:17px;
  }
  .site-presence > p {
    grid-column:1 / -1;
    justify-self:start;
    text-align:left;
  }
}
@media (prefers-reduced-motion:reduce) {
  .presence-dot {
    animation:none!important;
  }
}

/* --- TV NEO PLUS master brand system v1 --- */
:root {
  --neo-black:#050510;
  --neo-carbon:#0f0f1a;
  --neo-violet:#7c3aed;
  --neo-magenta:#a855f7;
  --neo-lavender:#c9a4ff;
  --neo-blue:#38bdf8;
  --neo-white:#f5f6ff;
  --bg:var(--neo-black);
  --panel:#10101b;
  --panel-2:#151522;
  --text:var(--neo-white);
  --muted:#a8a3b2;
  --purple:var(--neo-violet);
  --purple-2:var(--neo-lavender);
}

body {
  background:
    radial-gradient(circle at 82% 2%,rgba(56,189,248,.055),transparent 19%),
    radial-gradient(circle at 73% 8%,rgba(124,58,237,.16),transparent 28%),
    radial-gradient(circle at 12% 43%,rgba(168,85,247,.05),transparent 30%),
    var(--neo-black);
}

.brand-master { gap:12px; }
.brand-symbol {
  width:43px;
  height:43px;
  flex:0 0 43px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(168,85,247,.20))
    drop-shadow(0 0 20px rgba(56,189,248,.07));
}
.brand-master .brand-name {
  color:#f2eff7;
  letter-spacing:.13em;
}
.brand-master .brand-name strong {
  background:linear-gradient(105deg,var(--neo-lavender),var(--neo-magenta) 46%,var(--neo-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero {
  isolation:isolate;
}
.hero-visual::before {
  content:"";
  position:absolute;
  z-index:-2;
  width:620px;
  height:620px;
  right:-315px;
  top:-230px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 68%,rgba(5,5,16,0) 0 43%,rgba(124,58,237,.10) 48%,rgba(168,85,247,.18) 51%,rgba(56,189,248,.11) 53%,rgba(5,5,16,.94) 56% 100%);
  border:1px solid rgba(151,118,255,.08);
  box-shadow:
    -30px 35px 100px rgba(124,58,237,.10),
    inset 20px -20px 80px rgba(56,189,248,.035);
  pointer-events:none;
}
.hero-visual::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;
  height:2px;
  right:-80px;
  bottom:80px;
  transform:rotate(-9deg);
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.28),rgba(56,189,248,.30),transparent);
  filter:blur(.2px);
  box-shadow:0 0 22px rgba(124,58,237,.26);
  pointer-events:none;
}

.hero h1 span {
  background:linear-gradient(108deg,var(--neo-lavender),var(--neo-magenta) 44%,#8b5cf6 70%,var(--neo-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mini-logo {
  border:1px solid rgba(201,164,255,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(124,58,237,.06));
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 26px rgba(124,58,237,.08);
}
.mini-logo img {
  width:38px;
  height:38px;
  object-fit:contain;
}

.product-brand-dot {
  padding:4px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(124,58,237,.07));
  border:1px solid rgba(201,164,255,.13);
}
.product-brand-dot img {
  width:30px;
  height:30px;
  object-fit:contain;
}

.footer-tagline {
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media (max-width:680px) {
  .brand-symbol {
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .hero-visual::before {
    width:420px;
    height:420px;
    right:-260px;
    top:-110px;
    opacity:.82;
  }
  .hero-visual::after {
    width:360px;
    right:-140px;
    bottom:40px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .brand-symbol { filter:none; }
}

/* --- Brand voice rollout: Sentí lo que ves. --- */
.hero-signature {
  max-width:520px;
  margin-top:22px;
  color:#cbc4d2;
  font:600 clamp(18px,1.65vw,23px)/1.45 Manrope,sans-serif;
  letter-spacing:-.025em;
}
.error-brand-symbol {
  display:block;
  width:92px;
  height:92px;
  margin:0 auto 28px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 16px rgba(168,85,247,.24))
    drop-shadow(0 0 28px rgba(56,189,248,.08));
}
.live-page .brand-symbol,
.versions-page .brand-symbol {
  filter:
    drop-shadow(0 0 10px rgba(168,85,247,.20))
    drop-shadow(0 0 20px rgba(56,189,248,.07));
}
@media (max-width:680px) {
  .hero-signature {
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
    font-size:18px;
  }
  .error-brand-symbol {
    width:76px;
    height:76px;
  }
}

/* --- Hero cinematic ecosystem stage --- */
.hero-stage {
  position:relative;
  width:min(100%,620px);
  min-height:520px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.hero-stage::before {
  content:"";
  position:absolute;
  inset:8% 1% 2% 6%;
  z-index:-4;
  border-radius:50%;
  background:
    radial-gradient(circle at 55% 48%,rgba(124,58,237,.19),transparent 32%),
    radial-gradient(circle at 70% 58%,rgba(56,189,248,.08),transparent 28%),
    radial-gradient(circle at 38% 67%,rgba(168,85,247,.11),transparent 24%);
  filter:blur(26px);
}
.hero-stage::after {
  content:"";
  position:absolute;
  left:6%;
  right:-6%;
  bottom:46px;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.24),rgba(56,189,248,.28),transparent);
  box-shadow:
    0 0 18px rgba(124,58,237,.30),
    0 0 42px rgba(56,189,248,.09);
  transform:perspective(500px) rotateX(64deg);
}
.hero-stage-mark {
  position:absolute;
  z-index:-2;
  width:320px;
  height:320px;
  right:-8px;
  top:28px;
  opacity:.085;
  filter:blur(.2px) drop-shadow(0 0 38px rgba(124,58,237,.28));
  pointer-events:none;
}
.hero-stage-mark img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.hero-stage .premium-screen {
  width:min(100%,535px);
  aspect-ratio:1.48/1;
  margin:0 18px 72px 0;
  border-radius:26px;
  transform:perspective(1250px) rotateY(-4deg) rotateX(1.2deg);
  box-shadow:
    0 38px 95px rgba(0,0,0,.42),
    0 0 0 1px rgba(201,164,255,.035),
    0 0 55px rgba(124,58,237,.07),
    inset 0 1px rgba(255,255,255,.045);
}
.hero-stage .premium-screen::after {
  content:"";
  position:absolute;
  left:19%;
  right:19%;
  bottom:-27px;
  height:22px;
  border-radius:0 0 16px 16px;
  background:
    linear-gradient(180deg,rgba(38,31,48,.96),rgba(10,9,15,.96));
  clip-path:polygon(44% 0,56% 0,66% 75%,94% 78%,100% 100%,0 100%,6% 78%,34% 75%);
  box-shadow:0 12px 30px rgba(0,0,0,.38);
}
.hero-stage .screen-topbar {
  height:46px;
  padding:0 17px;
}
.hero-stage .screen-content {
  inset:46px 0 0;
  padding:32px 34px 28px;
}
.hero-stage .app-preview {
  display:grid;
  grid-template-rows:auto 1fr auto auto;
}
.hero-stage .preview-copy {
  align-self:center;
}
.hero-stage .preview-copy strong {
  font-size:32px;
}
.preview-chips {
  display:flex;
  gap:6px;
  margin:10px 0 12px;
}
.preview-chips span {
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:999px;
  color:#82798a;
  background:rgba(255,255,255,.012);
  font-size:7px;
  font-weight:700;
  letter-spacing:.04em;
}
.preview-chips span:first-child {
  color:#e8dcf2;
  border-color:rgba(185,145,220,.16);
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(168,85,247,.06));
}
.hero-stage .preview-rail {
  gap:9px;
}
.hero-stage .preview-rail i {
  height:58px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.hero-stage .preview-rail i:nth-child(1) {
  background:
    radial-gradient(circle at 30% 25%,rgba(244,114,182,.19),transparent 31%),
    linear-gradient(145deg,#251735,#0c0b12 72%);
}
.hero-stage .preview-rail i:nth-child(2) {
  background:
    radial-gradient(circle at 62% 34%,rgba(56,189,248,.19),transparent 32%),
    linear-gradient(145deg,#131d31,#0c0b12 72%);
}
.hero-stage .preview-rail i:nth-child(3) {
  background:
    radial-gradient(circle at 50% 24%,rgba(250,204,21,.12),transparent 31%),
    linear-gradient(145deg,#261b19,#0c0b12 72%);
}
.hero-stage .preview-rail i:nth-child(4) {
  background:
    radial-gradient(circle at 68% 26%,rgba(168,85,247,.19),transparent 34%),
    linear-gradient(145deg,#20142f,#0c0b12 72%);
}
.hero-stage .preview-rail i::after {
  content:"";
  position:absolute;
  inset:auto 8px 8px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent);
  opacity:.45;
}

.hero-phone {
  position:absolute;
  z-index:4;
  left:-4px;
  bottom:28px;
  width:106px;
  height:205px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 10px 14px;
  border:1px solid rgba(201,164,255,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at 62% 35%,rgba(124,58,237,.16),transparent 34%),
    linear-gradient(160deg,#17121f,#09080f 75%);
  box-shadow:
    0 28px 56px rgba(0,0,0,.46),
    0 0 28px rgba(124,58,237,.08),
    inset 0 1px rgba(255,255,255,.05);
  transform:rotate(-2.5deg);
}
.hero-phone-speaker {
  position:absolute;
  top:8px;
  width:24px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
}
.hero-phone img {
  width:56px;
  height:56px;
  margin-top:26px;
  object-fit:contain;
  filter:drop-shadow(0 0 15px rgba(168,85,247,.20));
}
.hero-phone strong {
  margin-top:12px;
  color:#f1ecf5;
  font:700 9px Manrope,sans-serif;
  letter-spacing:.08em;
}
.hero-phone small {
  margin-top:5px;
  color:#8b8290;
  font-size:6px;
  letter-spacing:.06em;
}
.hero-phone-nav {
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:auto;
}
.hero-phone-nav i {
  height:21px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:6px;
  background:rgba(255,255,255,.015);
}
.hero-phone-nav i:first-child {
  border-color:rgba(168,85,247,.14);
  background:rgba(124,58,237,.08);
}

.hero-box {
  position:absolute;
  z-index:3;
  right:18px;
  bottom:20px;
  width:112px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:linear-gradient(150deg,#17131d,#09080e);
  box-shadow:
    0 22px 44px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.045);
  transform:perspective(600px) rotateX(8deg) rotateY(-5deg);
}
.hero-box img {
  width:30px;
  height:30px;
  object-fit:contain;
}
.hero-box span {
  color:#9a8fa4;
  font:700 8px Manrope,sans-serif;
  letter-spacing:.08em;
}

.hero-remote {
  position:absolute;
  z-index:2;
  right:103px;
  bottom:5px;
  width:31px;
  height:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:13px 7px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:14px;
  background:linear-gradient(180deg,#17131d,#09080e);
  box-shadow:0 22px 40px rgba(0,0,0,.36);
  transform:rotate(17deg);
}
.hero-remote i {
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.hero-remote i:first-child {
  background:#8b5cf6;
  border-color:#9f7aea;
  box-shadow:0 0 10px rgba(139,92,246,.28);
}

.hero-visual .float-live {
  right:2px;
  top:55px;
  z-index:7;
}
.hero-visual .float-device {
  left:88px;
  bottom:70px;
  z-index:6;
}

@media (hover:hover) and (pointer:fine) {
  .hero-stage .premium-screen,
  .hero-phone,
  .hero-box,
  .hero-remote {
    transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
  }
  .hero-visual:hover .premium-screen {
    transform:perspective(1250px) rotateY(-2deg) rotateX(.5deg) translateY(-3px);
  }
  .hero-visual:hover .hero-phone {
    transform:rotate(-1deg) translateY(-5px);
  }
  .hero-visual:hover .hero-box {
    transform:perspective(600px) rotateX(6deg) rotateY(-2deg) translateY(-3px);
  }
  .hero-visual:hover .hero-remote {
    transform:rotate(14deg) translateY(-3px);
  }
}

@media (max-width:980px) {
  .hero-stage {
    width:min(100%,600px);
    margin:0 auto;
  }
}
@media (max-width:680px) {
  .hero-stage {
    width:100%;
    min-height:395px;
  }
  .hero-stage .premium-screen {
    width:calc(100% - 14px);
    margin:0 0 54px;
    aspect-ratio:1.18/1;
    border-radius:24px;
    transform:none;
  }
  .hero-stage .screen-content {
    padding:29px 24px 24px;
  }
  .hero-stage .preview-copy strong {
    font-size:25px;
  }
  .preview-chips {
    overflow:hidden;
    white-space:nowrap;
  }
  .preview-chips span {
    padding:5px 7px;
  }
  .hero-stage .preview-rail i {
    height:45px;
  }
  .hero-stage-mark {
    width:210px;
    height:210px;
    right:-34px;
    top:34px;
  }
  .hero-phone {
    width:78px;
    height:150px;
    left:2px;
    bottom:10px;
    border-radius:19px;
    padding:16px 7px 10px;
  }
  .hero-phone img {
    width:42px;
    height:42px;
    margin-top:18px;
  }
  .hero-phone strong {
    font-size:7px;
  }
  .hero-phone small {
    font-size:5px;
  }
  .hero-phone-nav i {
    height:15px;
  }
  .hero-box {
    width:84px;
    height:40px;
    right:5px;
    bottom:7px;
  }
  .hero-box img {
    width:25px;
    height:25px;
  }
  .hero-remote {
    display:none;
  }
  .hero-visual .float-live {
    top:54px;
    right:-2px;
  }
  .hero-visual .float-device {
    left:57px;
    bottom:48px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-stage .premium-screen,
  .hero-phone,
  .hero-box,
  .hero-remote {
    transition:none!important;
    transform:none!important;
  }
}

/* Mobile hero restraint: preserve ecosystem without visual crowding */
@media (max-width:680px) {
  .hero-visual .float-device {
    display:none;
  }
  .hero-phone {
    left:-8px;
    bottom:-2px;
  }
  .hero-box {
    right:-2px;
    bottom:1px;
  }
}

/* --- Guided journey cards: product reality without visual noise --- */
.journey-card {
  min-height:325px;
  overflow:hidden;
  padding:24px;
  background:
    radial-gradient(circle at 80% 12%,rgba(124,58,237,.055),transparent 30%),
    linear-gradient(155deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
}
.journey-card > * {
  position:relative;
  z-index:2;
}
.journey-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.journey-label {
  color:#71697a;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.journey-visual {
  min-height:112px;
  margin-top:25px;
  padding:14px;
  border:1px solid rgba(255,255,255,.052);
  border-radius:17px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.007));
  box-shadow:
    inset 0 1px rgba(255,255,255,.02),
    0 18px 38px rgba(0,0,0,.12);
}
.journey-card h3 {
  margin-top:24px;
  font-size:24px;
}
.journey-card p {
  max-width:310px;
}
.journey-plan {
  display:grid;
  gap:7px;
}
.journey-plan-row {
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:8px;
  color:#77707f;
  background:rgba(255,255,255,.01);
  font-size:8px;
}

.journey-plan-row i {
  width:22px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.055);
}
.journey-plan-row.active {
  min-height:32px;
  color:#ece5f2;
  border-color:rgba(190,152,222,.15);
  background:
    linear-gradient(90deg,rgba(124,58,237,.10),rgba(168,85,247,.035));
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.journey-plan-row.active b {
  padding:4px 6px;
  border-radius:999px;
  color:#baa3cc;
  background:rgba(168,85,247,.06);
  font-size:6px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.journey-download {
  display:flex;
  align-items:center;
  gap:9px;
}
.journey-platform {
  width:48px;
  height:48px;

  display:grid;
  place-items:center;
  padding:10px;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(234,230,237,.95));
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.journey-platform.wide {
  width:67px;
  padding:11px 8px;
}
.journey-platform img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.journey-version {
  margin-left:auto;
  min-width:63px;
  padding:11px 10px;
  border:1px solid rgba(201,164,255,.09);
  border-radius:12px;
  background:rgba(124,58,237,.035);
}
.journey-version b {
  display:block;
  color:#e8e1ed;
  font:700 14px/1 Manrope,sans-serif;
}
.journey-version small {
  display:block;
  margin-top:5px;

  color:#8d8197;
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.journey-install {
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:8px;
}
.journey-install > i {
  height:1px;
  background:linear-gradient(90deg,rgba(168,85,247,.26),rgba(56,189,248,.13));
}
.journey-step {
  min-width:50px;
  text-align:center;
}
.journey-step span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  color:#8f8695;
  background:rgba(255,255,255,.015);
  font:700 9px Manrope,sans-serif;
}

.journey-step small {
  display:block;
  margin-top:8px;
  color:#6f6875;
  font-size:6px;
  letter-spacing:.04em;
}
.journey-step.done span {
  color:#d4c4df;
  border-color:rgba(168,85,247,.14);
  background:rgba(124,58,237,.065);
}
.journey-step.current span {
  color:#f4eff7;
  border-color:rgba(56,189,248,.15);
  background:
    linear-gradient(135deg,rgba(124,58,237,.14),rgba(56,189,248,.06));
  box-shadow:0 0 18px rgba(124,58,237,.09);
}
.journey-step.current small {
  color:#a593b3;
}
@media (hover:hover) and (pointer:fine) {
  .journey-card:hover .journey-visual {
    border-color:rgba(201,164,255,.095);
    box-shadow:
      inset 0 1px rgba(255,255,255,.025),
      0 22px 44px rgba(0,0,0,.15);
  }
}

@media (max-width:680px) {
  .journey-card {
    min-height:295px;
    padding:22px;
  }
  .journey-visual {
    min-height:104px;
    margin-top:22px;
  }
  .journey-card h3 {
    margin-top:22px;
  }
  .journey-download {
    gap:8px;
  }
  .journey-platform {
    width:44px;
    height:44px;
  }
  .journey-platform.wide {
    width:62px;
  }
  .journey-version {
    min-width:58px;
  }
}

/* --- Product cinema pass: premium display hardware + richer UI --- */
.product-cinema-shell {
  position:relative;
  min-width:0;
  padding-bottom:38px;
  isolation:isolate;
}
.product-cinema-shell::before {
  content:"";
  position:absolute;
  inset:8% 2% 13%;
  z-index:-2;
  border-radius:38%;
  background:
    radial-gradient(circle at 50% 48%,rgba(124,58,237,.15),transparent 34%),
    radial-gradient(circle at 72% 62%,rgba(56,189,248,.06),transparent 28%);
  filter:blur(30px);
}
.product-cinema-shell::after {
  content:"";
  position:absolute;
  left:7%;
  right:4%;
  bottom:30px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.30),rgba(56,189,248,.18),transparent);
  box-shadow:0 0 26px rgba(124,58,237,.22);
}

.product-cinema-shell .product-frame {
  min-height:500px;
  border-radius:27px;
  border-color:rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 78% 16%,rgba(124,58,237,.13),transparent 28%),
    radial-gradient(circle at 20% 86%,rgba(56,189,248,.035),transparent 25%),
    linear-gradient(155deg,#121019 0%,#09080f 74%,#07070c 100%);
  box-shadow:
    0 44px 100px rgba(0,0,0,.40),
    0 0 0 1px rgba(201,164,255,.025),
    0 0 54px rgba(124,58,237,.06),
    inset 0 1px rgba(255,255,255,.045);
}
.product-cinema-shell .product-frame::before {
  background:
    linear-gradient(132deg,rgba(255,255,255,.045),transparent 21%),
    linear-gradient(180deg,transparent 58%,rgba(124,58,237,.025)),
    radial-gradient(circle at 15% 90%,rgba(56,189,248,.045),transparent 28%);
}
.product-hardware-base {
  position:absolute;
  left:30%;
  right:30%;
  bottom:4px;
  height:35px;

  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,#26202e 0%,#0a090f 78%);
  clip-path:polygon(42% 0,58% 0,67% 72%,96% 76%,100% 100%,0 100%,4% 76%,33% 72%);
  box-shadow:0 16px 35px rgba(0,0,0,.34);
}
.product-hardware-base i {
  position:absolute;
  left:18%;
  right:18%;
  bottom:1px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.25),rgba(56,189,248,.18),transparent);
}
.product-frame-top {
  height:64px;
  padding:0 20px;
  background:rgba(255,255,255,.006);
  backdrop-filter:blur(10px);
}
.product-brand-dot {
  width:40px;
  height:40px;
  border-radius:12px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 24px rgba(124,58,237,.09);
}
.product-frame-nav i {
  height:4px;
  background:rgba(255,255,255,.045);
}

.product-frame-nav i:first-child {
  background:linear-gradient(90deg,rgba(168,85,247,.30),rgba(56,189,248,.16));
}
.product-live-pill {
  border-color:rgba(201,164,255,.12);
  background:rgba(8,7,13,.54);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.product-live-pill b {
  background:#b26dff;
  box-shadow:0 0 0 4px rgba(178,109,255,.045),0 0 14px rgba(178,109,255,.62);
}
.product-frame-body {
  min-height:436px;
  padding:30px;
  grid-template-columns:166px 1fr;
  gap:18px;
}
.product-side {
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:18px;
  border-color:rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 30% 8%,rgba(124,58,237,.07),transparent 26%),
    rgba(255,255,255,.010);
}
.product-side::after {
  content:"";
  position:absolute;
  width:120px;

  height:120px;
  right:-64px;
  bottom:-64px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.055),transparent 68%);
}
.product-side-kicker {
  color:#746d7b;
  letter-spacing:.17em;
}
.product-side-brand {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:19px;
}
.product-side-brand img {
  width:30px;
  height:30px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(168,85,247,.15));
}
.product-side-brand span {
  color:#8e8594;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.product-side strong {
  margin-top:34px;
  font-size:24px;
}
.product-side small {
  margin-top:12px;

  color:#807885;
  font-size:9px;
}
.product-side-menu {
  display:grid;
  gap:7px;
  margin-top:24px;
}
.product-side-menu i {
  height:7px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
}
.product-side-menu i:first-child {
  width:78%;
  background:linear-gradient(90deg,rgba(168,85,247,.20),rgba(56,189,248,.06));
}
.product-side-menu i:nth-child(2) { width:63%; }
.product-side-menu i:nth-child(3) { width:70%; }
.product-side-menu i:nth-child(4) { width:52%; }

.product-channel-grid {
  gap:10px;
}
.product-channel-grid span {
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border-color:rgba(255,255,255,.055);
  background:linear-gradient(145deg,#17121f,#0b0a10);
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 10px 22px rgba(0,0,0,.12);
}

.product-channel-grid span::before {
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:1/1;
  right:-22%;
  top:-38%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.18),transparent 66%);
}
.product-channel-grid span::after {
  content:"";
  position:absolute;
  left:10px;
  right:28%;
  bottom:10px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.30),transparent);
  opacity:.55;
}
.product-channel-grid span:nth-child(2)::before {
  background:radial-gradient(circle,rgba(56,189,248,.18),transparent 66%);
}
.product-channel-grid span:nth-child(3)::before {
  background:radial-gradient(circle,rgba(250,204,21,.11),transparent 66%);
}
.product-channel-grid span:nth-child(4)::before {
  background:radial-gradient(circle,rgba(244,114,182,.13),transparent 66%);
}
.product-channel-grid span:nth-child(5)::before {
  background:radial-gradient(circle,rgba(74,222,128,.08),transparent 66%);
}
.product-channel-grid span:nth-child(6)::before {

  background:radial-gradient(circle,rgba(129,140,248,.14),transparent 66%);
}
.product-channel-grid span.active {
  border-color:rgba(201,164,255,.18);
  background:
    linear-gradient(145deg,rgba(124,58,237,.12),rgba(11,10,16,.96));
  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    0 0 24px rgba(124,58,237,.05),
    inset 0 1px rgba(255,255,255,.035);
}
.product-epg {
  padding:17px 18px;
  border-radius:16px;
  border-color:rgba(255,255,255,.06);
  background:
    linear-gradient(135deg,rgba(255,255,255,.016),rgba(124,58,237,.018));
}
.product-progress {
  height:4px;
  background:rgba(255,255,255,.045);
}
.product-progress i {
  background:linear-gradient(90deg,#a855f7,#7c3aed 62%,#38bdf8);
  box-shadow:0 0 16px rgba(124,58,237,.25);
}
.product-epg small {
  color:#716a77;
}

.product-proof > div {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(155deg,rgba(255,255,255,.022),rgba(124,58,237,.010));
}
.product-proof > div::after {
  content:"";
  position:absolute;
  width:76px;
  height:76px;
  right:-34px;
  top:-34px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.055),transparent 70%);
}
.product-proof strong {
  background:linear-gradient(105deg,#f2edf6,#c9a4ff 60%,#38bdf8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.product-preview-tab.active {
  border-color:rgba(201,164,255,.22);
  background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(56,189,248,.025));
}
.product-preview-tab.active::before {
  background:#a855f7;
  box-shadow:0 0 11px rgba(168,85,247,.62);
}

@media (hover:hover) and (pointer:fine) {
  .product-cinema-shell:hover .product-frame {
    transform:translateY(-5px) rotateX(.3deg);
    border-color:rgba(201,164,255,.13);
    box-shadow:
      0 50px 116px rgba(0,0,0,.44),
      0 0 66px rgba(124,58,237,.07),
      inset 0 1px rgba(255,255,255,.045);
  }
  .product-channel-grid span:hover {
    transform:translateY(-2px);
    border-color:rgba(201,164,255,.13);
  }
}
@media (max-width:680px) {
  .product-cinema-shell {
    padding-bottom:24px;
  }
  .product-cinema-shell .product-frame {
    min-height:430px;
    border-radius:23px;
  }
  .product-hardware-base {
    left:32%;
    right:32%;
    height:25px;
    bottom:0;
  }

  .product-frame-body {
    min-height:360px;
    padding:18px;
  }
  .product-side {
    min-height:118px;
  }
  .product-side-brand {
    margin-top:13px;
  }
  .product-side strong {
    margin-top:16px;
    font-size:21px;
  }
  .product-side-menu {
    display:none;
  }
  .product-channel-grid {
    gap:8px;
  }
  .product-channel-grid span {
    border-radius:11px;
  }
  .product-epg {
    padding:15px;
  }
}

/* --- Platform ecosystem: one brand, every screen --- */
.platform-universe {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:38px;
  margin-top:42px;
  padding:34px 36px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:28px;
  background:
    radial-gradient(circle at 73% 38%,rgba(124,58,237,.10),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(56,189,248,.045),transparent 28%),
    linear-gradient(155deg,rgba(255,255,255,.024),rgba(255,255,255,.006));
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 30px 78px rgba(0,0,0,.18);
}
.platform-universe::before {
  content:"";
  position:absolute;
  left:37%;
  right:3%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.19),rgba(56,189,248,.12),transparent);
  box-shadow:0 0 20px rgba(124,58,237,.12);
}

.platform-universe-copy {
  position:relative;
  z-index:2;
}
.platform-universe-copy span {
  display:block;
  color:#92869c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.19em;
}
.platform-universe-copy strong {
  display:block;
  margin-top:8px;
  background:linear-gradient(105deg,#f0e9f5,#c9a4ff 48%,#a855f7 72%,#38bdf8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font:700 clamp(22px,2.2vw,31px)/1.08 Manrope,sans-serif;
  letter-spacing:-.035em;
}
.platform-universe-copy small {
  display:block;
  max-width:340px;
  margin-top:14px;
  color:#746d79;
  font-size:10px;
  line-height:1.55;
}
.platform-device-strip {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:end;
  gap:12px;
}
.platform-device-item {
  min-width:0;
  text-align:center;
}
.platform-device-item b {
  display:block;
  margin-top:11px;
  color:#7c7383;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.device-shape {
  position:relative;
  display:block;
  width:52px;
  height:42px;
  margin:0 auto;
  color:#b99acc;
}
.device-tv,
.device-pc {
  width:58px;
  height:36px;
  border:1.5px solid rgba(201,164,255,.58);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(124,58,237,.055),rgba(255,255,255,.006));
  box-shadow:0 0 22px rgba(124,58,237,.05);
}
.device-tv::before,
.device-pc::before {
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  bottom:-8px;
  height:1px;
  background:rgba(201,164,255,.42);
}
.device-tv::after,
.device-pc::after {
  content:"";
  position:absolute;
  width:14px;
  height:8px;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  border-left:1px solid rgba(201,164,255,.40);
  border-right:1px solid rgba(201,164,255,.40);
}
.device-tv i,
.device-pc i {
  position:absolute;
  inset:7px;
  border-radius:3px;
  background:
    radial-gradient(circle at 65% 35%,rgba(168,85,247,.15),transparent 38%),
    rgba(255,255,255,.006);
}

.device-phone {
  width:24px;
  height:46px;
  border:1.5px solid rgba(201,164,255,.60);
  border-radius:7px;
  background:linear-gradient(155deg,rgba(124,58,237,.055),rgba(255,255,255,.006));
}
.device-phone::before {
  content:"";
  position:absolute;
  width:8px;
  height:2px;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  border-radius:99px;
  background:rgba(201,164,255,.36);
}
.device-phone i {
  position:absolute;
  inset:8px 4px 5px;
  border-radius:3px;
  background:radial-gradient(circle at 50% 30%,rgba(168,85,247,.13),transparent 46%);
}
.device-box {
  width:48px;
  height:22px;
  margin-bottom:8px;
  border:1.5px solid rgba(201,164,255,.55);
  border-radius:8px;
  background:linear-gradient(155deg,rgba(124,58,237,.055),rgba(255,255,255,.006));
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.device-box i {
  position:absolute;
  width:5px;
  height:5px;
  right:7px;
  top:7px;
  border-radius:50%;
  background:#9f6ee1;
  box-shadow:0 0 10px rgba(159,110,225,.36);
}
.device-web {
  width:42px;
  height:42px;
  border:1.5px solid rgba(201,164,255,.58);
  border-radius:50%;
}
.device-web::before,
.device-web::after {
  content:"";
  position:absolute;
  inset:7px 13px;
  border-left:1px solid rgba(201,164,255,.34);
  border-right:1px solid rgba(201,164,255,.34);
  border-radius:50%;
}
.device-web::after {
  inset:13px 5px;
  border:0;
  border-top:1px solid rgba(201,164,255,.34);
  border-bottom:1px solid rgba(201,164,255,.34);
}

.platform-device-brand {
  transform:translateY(-4px);
}
.device-brand-halo {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto -4px;
  border:1px solid rgba(201,164,255,.11);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 50%,rgba(124,58,237,.11),transparent 66%),
    rgba(255,255,255,.008);
  box-shadow:
    0 0 36px rgba(124,58,237,.08),
    inset 0 1px rgba(255,255,255,.025);
}
.device-brand-halo img {
  width:44px;
  height:44px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 14px rgba(168,85,247,.22))
    drop-shadow(0 0 20px rgba(56,189,248,.05));
}
.platform-device-brand b {
  color:#a58fb6;
}
.platform-grid {
  margin-top:22px;
}
.platform-card {
  min-height:118px;
  border-radius:18px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
}
.platform-card.available {
  background:
    radial-gradient(circle at 12% 8%,rgba(124,58,237,.055),transparent 34%),
    linear-gradient(150deg,rgba(255,255,255,.027),rgba(255,255,255,.007));
}

.platform-card.available::after {
  background:#9f6ee1;
  box-shadow:0 0 0 4px rgba(159,110,225,.035),0 0 10px rgba(159,110,225,.38);
}
@media (hover:hover) and (pointer:fine) {
  .platform-universe {
    transition:border-color .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .platform-universe:hover {
    transform:translateY(-2px);
    border-color:rgba(201,164,255,.105);
    box-shadow:
      inset 0 1px rgba(255,255,255,.03),
      0 34px 84px rgba(0,0,0,.22),
      0 0 44px rgba(124,58,237,.035);
  }
  .platform-device-item {
    transition:transform .3s ease,opacity .3s ease;
  }
  .platform-device-item:hover {
    transform:translateY(-4px);
  }
}
@media (max-width:900px) {
  .platform-universe {
    grid-template-columns:1fr;
    gap:28px;
  }
  .platform-universe::before {
    left:4%;
    right:4%;
    top:auto;
    bottom:80px;
  }
}

@media (max-width:560px) {
  .platform-universe {
    margin-top:32px;
    padding:24px 20px 22px;
    border-radius:22px;
  }
  .platform-universe-copy {
    text-align:left;
  }
  .platform-universe-copy strong {
    max-width:300px;
    font-size:24px;
  }
  .platform-device-strip {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 10px;
  }
  .platform-universe::before {
    display:none;
  }
  .platform-device-brand {
    order:-1;
    grid-column:2;
  }
  .platform-device-item b {
    font-size:6px;
  }
  .platform-grid {
    margin-top:18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .platform-universe,
  .platform-device-item {
    transition:none!important;
    transform:none!important;
  }
}

/* --- Featured channels editorial wall --- */
.channel-wall {
  position:relative;
  overflow:hidden;
  margin-top:34px;
  padding:22px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:28px;
  background:
    radial-gradient(circle at 84% 18%,rgba(124,58,237,.08),transparent 28%),
    radial-gradient(circle at 12% 85%,rgba(56,189,248,.025),transparent 26%),
    linear-gradient(155deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 34px 84px rgba(0,0,0,.18);
}
.channel-wall::before {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-120px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.08),transparent 70%);
  pointer-events:none;
}
.channel-wall::after {
  content:"N+";
  position:absolute;
  right:34px;
  bottom:-38px;
  color:rgba(201,164,255,.018);
  font:800 150px/1 Manrope,sans-serif;
  letter-spacing:-.08em;
  pointer-events:none;
}
.channel-wall-head {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:2px 2px 18px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.channel-wall-brand {
  display:flex;
  align-items:center;
  gap:12px;
}
.channel-wall-brand img {
  width:38px;
  height:38px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(168,85,247,.16));
}
.channel-wall-brand span {
  display:block;
  color:#766d7d;
  font-size:7px;
  font-weight:800;
  letter-spacing:.15em;
}
.channel-wall-brand strong {
  display:block;
  margin-top:4px;
  color:#d9d1df;
  font:700 11px/1.1 Manrope,sans-serif;
}
.channel-wall .channel-filter {
  margin-top:0;
}
.channel-wall .channel-filter-btn {
  padding:8px 11px;
  font-size:8px;
  background:rgba(255,255,255,.009);
}
.channel-wall .channel-grid {
  position:relative;
  z-index:2;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:0;
}
.channel-wall .channel-card {
  min-height:192px;
  padding:18px 16px 16px;
  border:0;
  border-right:1px solid rgba(255,255,255,.045);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.channel-wall .channel-card:last-child {
  border-right:0;
}

.channel-wall .channel-logo-plate {
  min-height:88px;
  padding:18px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(249,247,251,.98),rgba(230,225,234,.94));
  box-shadow:
    0 14px 28px rgba(0,0,0,.15),
    inset 0 1px rgba(255,255,255,.88);
}
.channel-wall .channel-logo-dark {
  background:
    radial-gradient(circle at 70% 20%,rgba(124,58,237,.08),transparent 38%),
    linear-gradient(145deg,#19151f,#0b0a10);
  border-color:rgba(255,255,255,.06);
}
.channel-wall .channel-logo-plate img {
  max-width:112px;
  max-height:52px;
}
.channel-wall .channel-copy {
  padding:15px 2px 0;
}
.channel-wall .channel-copy span {
  color:#7c7282;
  font-size:7px;
  letter-spacing:.13em;
}
.channel-wall .channel-copy strong {
  margin-top:7px;
  color:#ece6f0;
  font-size:14px;
}
.channel-wall .channel-copy small {
  margin-top:6px;
  color:#6c6572;
  font-size:8px;
}
.channel-wall .channel-card::before {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.04),transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.channel-wall .channel-card.is-filtered-out {
  opacity:.10;
  transform:scale(.99);
  filter:saturate(.15);
}
@media (hover:hover) and (pointer:fine) {
  .channel-wall {
    transition:border-color .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .channel-wall:hover {
    transform:translateY(-2px);
    border-color:rgba(201,164,255,.10);
    box-shadow:
      inset 0 1px rgba(255,255,255,.028),
      0 38px 92px rgba(0,0,0,.22),
      0 0 42px rgba(124,58,237,.03);
  }
  .channel-wall .channel-card:not(.is-filtered-out):hover {
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.045);
    background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);
    box-shadow:none;
  }
  .channel-wall .channel-card:not(.is-filtered-out):hover::before {
    opacity:1;
  }
  .channel-wall .channel-card:not(.is-filtered-out):hover .channel-logo-plate img {
    transform:scale(1.04);
  }
}
@media (max-width:1050px) {
  .channel-wall .channel-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .channel-wall .channel-card {
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .channel-wall .channel-card:nth-child(3n) {
    border-right:0;
  }
}

@media (max-width:680px) {
  .channel-wall {
    margin-top:28px;
    padding:18px 16px 16px;
    border-radius:22px;
  }
  .channel-wall-head {
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  .channel-wall .channel-filter {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .channel-wall .channel-grid {
    display:flex;
    overflow-x:auto;
    gap:10px;
    margin:0 -2px;
    padding:16px 2px 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .channel-wall .channel-grid::-webkit-scrollbar {
    display:none;
  }
  .channel-wall .channel-card {
    flex:0 0 76%;
    min-height:190px;
    padding:0 0 14px;
    border:0;
    border-radius:17px;
    scroll-snap-align:start;
  }
  .channel-wall .channel-card.is-filtered-out {
    flex-basis:22%;
  }
  .channel-wall .channel-logo-plate {
    min-height:96px;
  }
  .channel-wall::after {
    right:14px;
    bottom:-20px;
    font-size:100px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .channel-wall,
  .channel-wall .channel-card,
  .channel-wall .channel-card::before {
    transition:none!important;
    transform:none!important;
  }
}

/* --- Header / Hero A-reference atmosphere pass --- */
.site-header {
  width:min(1220px,calc(100% - 30px));
  height:78px;
  margin-top:12px;
  padding:0 20px;
  border-color:rgba(201,164,255,.12);
  background:
    linear-gradient(90deg,rgba(10,8,17,.88),rgba(19,12,31,.80) 48%,rgba(9,9,18,.88));
  box-shadow:
    0 16px 52px rgba(0,0,0,.26),
    0 0 48px rgba(124,58,237,.035),
    inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(22px) saturate(125%);
}
.site-header::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(168,85,247,.04),transparent 34%,rgba(56,189,248,.025) 74%,transparent);
}

.brand-master .brand-symbol {
  width:46px;
  height:46px;
  flex-basis:46px;
}
.brand-master .brand-name {
  font-size:13px;
  letter-spacing:.14em;
}
.nav {
  gap:30px;
  color:#b8afc1;
}
.nav a {
  padding:9px 0;
}
.nav a:hover {
  color:#fff;
  text-shadow:0 0 18px rgba(201,164,255,.22);
}
.nav a::after {
  background:linear-gradient(90deg,#a855f7,#38bdf8);
  box-shadow:0 0 10px rgba(124,58,237,.22);
}
.header-cta {
  padding:11px 17px;
  border-color:rgba(201,164,255,.22);
  color:#f5eff9;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(168,85,247,.07));

  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.12);
}
.header-cta:hover {
  border-color:rgba(201,164,255,.30);
  background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(56,189,248,.05));
  box-shadow:
    0 12px 30px rgba(0,0,0,.16),
    0 0 24px rgba(124,58,237,.08);
}

.hero {
  position:relative;
  min-height:810px;
  gap:92px;
  padding-top:92px;
  padding-bottom:78px;
}
.hero::before {
  content:"";
  position:absolute;
  z-index:-5;
  left:-12vw;
  right:-12vw;
  top:-110px;
  height:820px;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 20%,rgba(168,85,247,.24),transparent 18%),
    radial-gradient(circle at 72% 16%,rgba(56,189,248,.10),transparent 24%),

    radial-gradient(circle at 32% 30%,rgba(124,58,237,.10),transparent 28%),
    linear-gradient(180deg,rgba(13,8,28,.82),rgba(5,5,16,.26) 74%,transparent);
  filter:saturate(112%);
}
.hero::after {
  content:"";
  position:absolute;
  z-index:-4;
  width:760px;
  height:760px;
  right:-320px;
  top:-160px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 68%,rgba(5,5,16,0) 0 45%,rgba(124,58,237,.20) 49%,rgba(168,85,247,.28) 52%,rgba(56,189,248,.16) 54%,rgba(5,5,16,.96) 58% 100%);
  border:1px solid rgba(170,125,255,.12);
  box-shadow:
    -36px 44px 120px rgba(124,58,237,.16),
    0 0 80px rgba(56,189,248,.055),
    inset 28px -30px 90px rgba(56,189,248,.05);
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-left:2px;
}
.hero-copy::before {
  content:"";
  position:absolute;
  width:140px;
  height:1px;
  left:0;
  top:-28px;
  background:linear-gradient(90deg,rgba(168,85,247,.60),rgba(56,189,248,.30),transparent);
  box-shadow:0 0 18px rgba(124,58,237,.22);
}
.hero h1 {
  max-width:690px;
  font-size:clamp(54px,6.25vw,84px);
}
.hero-signature {
  color:#d2cad8;
  font-size:clamp(18px,1.7vw,24px);
}
.hero-actions {
  margin-top:36px;
}
.btn-primary {
  background:linear-gradient(135deg,#eadcff 0%,#c7a8ef 46%,#9f7aea 100%);
  box-shadow:
    0 18px 42px rgba(124,58,237,.20),
    inset 0 1px rgba(255,255,255,.68);
}

.btn-primary:hover {
  box-shadow:
    0 20px 48px rgba(124,58,237,.30),
    0 0 34px rgba(56,189,248,.07),
    inset 0 1px rgba(255,255,255,.70);
}
.trust-row {
  margin-top:50px;
  color:#857c8e;
}
.hero-visual {
  min-height:560px;
}
.hero-visual::before {
  width:700px;
  height:700px;
  right:-330px;
  top:-220px;
  opacity:.95;
}
.hero-stage::before {
  filter:blur(34px);
  opacity:1;
}
.hero-stage-mark {
  opacity:.11;
}

@media (max-width:900px) {
  .site-header {
    width:min(100% - 22px,1220px);
    height:70px;
    padding:0 14px;
  }
  .hero {
    min-height:auto;
    gap:56px;
    padding-top:70px;
    padding-bottom:64px;
  }
  .hero::after {
    width:560px;
    height:560px;
    right:-330px;
    top:120px;
    opacity:.72;
  }
}
@media (max-width:680px) {
  .site-header {
    margin-top:10px;
    border-radius:18px;
  }
  .brand-master .brand-symbol {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .hero {
    padding-top:72px;

    padding-bottom:58px;
  }
  .hero::before {
    left:-30px;
    right:-30px;
    top:-90px;
    height:720px;
    background:
      radial-gradient(circle at 74% 17%,rgba(168,85,247,.20),transparent 20%),
      radial-gradient(circle at 70% 18%,rgba(56,189,248,.08),transparent 26%),
      linear-gradient(180deg,rgba(14,8,30,.80),rgba(5,5,16,.24) 76%,transparent);
  }
  .hero::after {
    width:450px;
    height:450px;
    right:-300px;
    top:285px;
    opacity:.62;
  }
  .hero-copy::before {
    display:none;
  }
  .hero h1 {
    font-size:clamp(44px,11.5vw,58px);
  }
}
/* --- Hero master composition: N+ first, cinematic planet --- */
.hero {
  min-height:860px;
  overflow:visible;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:68px;
}
.hero::before,
.hero::after {
  content:none;
}
.hero-cosmos {
  position:absolute;
  z-index:-6;
  inset:-120px -13vw -40px -13vw;
  overflow:hidden;
  pointer-events:none;
}
.hero-cosmos::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 79% 24%,rgba(168,85,247,.22),transparent 19%),
    radial-gradient(circle at 72% 27%,rgba(56,189,248,.09),transparent 28%),
    radial-gradient(circle at 30% 35%,rgba(124,58,237,.075),transparent 32%),
    linear-gradient(180deg,rgba(13,7,30,.92),rgba(5,5,16,.28) 72%,transparent);
}
.hero-planet {
  position:absolute;
  width:760px;
  height:760px;
  right:-230px;
  top:70px;
  border-radius:50%;
  background:
    radial-gradient(circle at 29% 23%,rgba(242,219,255,.24),transparent 10%),
    radial-gradient(circle at 34% 30%,rgba(182,117,255,.28),transparent 23%),
    radial-gradient(circle at 42% 42%,#4e267f 0%,#25123f 32%,#100b1e 56%,#05050b 73%);
  border:1px solid rgba(190,137,255,.18);
  box-shadow:
    inset -120px -80px 170px rgba(0,0,0,.82),
    inset 60px 28px 110px rgba(128,67,220,.16),
    -34px 14px 120px rgba(124,58,237,.22),
    0 0 70px rgba(56,189,248,.07);
}
.hero-planet::before {
  content:"";
  position:absolute;
  inset:6% 5% 58% 11%;
  border-radius:50%;
  background:
    linear-gradient(165deg,transparent 0 28%,rgba(197,151,255,.12) 31%,transparent 35%),
    linear-gradient(10deg,transparent 0 44%,rgba(255,255,255,.05) 47%,transparent 51%);
  filter:blur(3px);
  opacity:.9;
}
.hero-planet::after {
  content:"";
  position:absolute;
  inset:-3%;
  border-radius:50%;
  border-top:3px solid rgba(197,141,255,.60);
  border-left:2px solid rgba(129,92,246,.28);
  border-right:2px solid rgba(56,189,248,.20);
  filter:blur(.4px);
  box-shadow:
    -10px -14px 34px rgba(168,85,247,.34),
    8px 4px 26px rgba(56,189,248,.10);
}
.hero-atmosphere {
  position:absolute;
  width:804px;
  height:804px;
  right:-252px;
  top:48px;
  border-radius:50%;
  border:1px solid rgba(185,124,255,.16);
  box-shadow:
    0 0 36px rgba(168,85,247,.18),
    0 0 82px rgba(124,58,237,.12),
    0 0 130px rgba(56,189,248,.045);
  opacity:.95;
}
.hero-orbit {
  position:absolute;
  right:-320px;
  top:370px;
  width:980px;
  height:180px;
  border:1px solid rgba(187,128,255,.16);
  border-radius:50%;
  transform:rotate(-9deg);
  box-shadow:0 -1px 18px rgba(124,58,237,.10);
}
.hero-orbit-two {
  right:-350px;
  top:398px;
  width:1050px;
  opacity:.45;
  border-color:rgba(56,189,248,.12);
}
.hero-star {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#eadcff;
  box-shadow:0 0 10px rgba(201,164,255,.9);
}
.hero-star-one { right:52%; top:24%; }
.hero-star-two { right:38%; top:14%; width:2px; height:2px; opacity:.7; }
.hero-star-three { right:27%; top:56%; width:2px; height:2px; opacity:.55; }

.hero-master-lockup {
  position:relative;
  width:min(100%,390px);
  margin-top:22px;
}
.hero-master-symbol {
  display:block;
  width:310px;
  height:210px;
  object-fit:contain;
  object-position:left center;
  margin-left:-18px;
  filter:
    drop-shadow(0 0 18px rgba(168,85,247,.34))
    drop-shadow(0 0 40px rgba(124,58,237,.18))
    drop-shadow(0 0 70px rgba(56,189,248,.06));
}
.hero-master-wordmark {
  margin-top:-18px;
  color:#f3eef7;
  font:700 clamp(28px,3vw,42px)/1 Manrope,sans-serif;
  letter-spacing:.13em;
  white-space:nowrap;
}
.hero-master-wordmark strong {
  background:linear-gradient(100deg,#d9b8ff,#a855f7 58%,#38bdf8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-master-slogan {
  margin:24px 0 0;
  color:#efe8f4;
  font:700 clamp(21px,2vw,28px)/1.1 Manrope,sans-serif;
  letter-spacing:-.03em;
}
.hero-master-editorial {
  margin:12px 0 0;
  color:#9e94a7;
  font-size:14px;
  letter-spacing:.015em;
}
.hero-copy .hero-actions {
  margin-top:30px;
}
.hero-copy .trust-row {
  margin-top:36px;
}
.hero-visual {
  z-index:2;
  min-height:590px;
}
.hero-visual::before,
.hero-visual::after {
  content:none;
}
.hero-stage {
  transform:translateY(18px);
}
.hero-stage .premium-screen {
  box-shadow:
    0 42px 110px rgba(0,0,0,.48),
    0 0 0 1px rgba(201,164,255,.04),
    0 0 62px rgba(124,58,237,.10),
    inset 0 1px rgba(255,255,255,.05);
}
@media (hover:hover) and (pointer:fine) {
  .hero-master-symbol {
    transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease;
  }
  .hero:hover .hero-master-symbol {
    transform:translateY(-3px) scale(1.015);
    filter:
      drop-shadow(0 0 22px rgba(168,85,247,.40))
      drop-shadow(0 0 48px rgba(124,58,237,.22))
      drop-shadow(0 0 82px rgba(56,189,248,.08));
  }
}
@media (max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    gap:34px;
    padding-top:72px;
  }
  .hero-copy {
    text-align:center;
  }
  .hero-copy .eyebrow {
    justify-content:center;
  }
  .hero-master-lockup {
    margin-left:auto;
    margin-right:auto;
  }
  .hero-master-symbol {
    margin-left:auto;
    margin-right:auto;
    object-position:center;
  }
  .hero-master-wordmark {
    text-align:center;
  }
  .hero-copy .hero-actions,
  .hero-copy .trust-row {
    justify-content:center;
  }
  .hero-planet {
    width:620px;
    height:620px;
    right:-360px;
    top:430px;
  }
  .hero-atmosphere {
    width:654px;
    height:654px;
    right:-377px;
    top:413px;
  }
  .hero-orbit { top:710px; right:-430px; }
  .hero-orbit-two { top:738px; right:-455px; }
}
@media (max-width:680px) {
  .hero {
    gap:26px;
    padding-top:62px;
  }
  .hero-master-lockup {
    width:100%;
  }
  .hero-master-symbol {
    width:230px;
    height:155px;
  }
  .hero-master-wordmark {
    margin-top:-12px;
    font-size:25px;
    letter-spacing:.11em;
  }
  .hero-master-slogan {
    margin-top:20px;
    font-size:21px;
  }
  .hero-master-editorial {
    margin-top:9px;
    font-size:13px;
  }
  .hero-copy .hero-actions {
    margin-top:26px;
  }
  .hero-copy .trust-row {
    margin-top:32px;
  }
  .hero-planet {
    width:500px;
    height:500px;
    right:-330px;
    top:500px;
  }
  .hero-atmosphere {
    width:528px;
    height:528px;
    right:-344px;
    top:486px;
  }
  .hero-orbit { top:730px; right:-470px; width:850px; }
  .hero-orbit-two { top:755px; right:-495px; width:900px; }
}

/* --- Hero refinement: brighter N+, dimensional planet, denser composition --- */
.hero {
  min-height:900px;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:42px;
  padding-top:72px;
  padding-bottom:82px;
}
.hero-cosmos {
  inset:-140px -15vw -50px -15vw;
}
.hero-cosmos::before {
  background:
    radial-gradient(circle at 83% 18%,rgba(222,184,255,.16),transparent 9%),
    radial-gradient(circle at 79% 24%,rgba(168,85,247,.34),transparent 20%),
    radial-gradient(circle at 72% 29%,rgba(56,189,248,.14),transparent 29%),
    radial-gradient(circle at 24% 35%,rgba(124,58,237,.10),transparent 30%),
    radial-gradient(circle at 45% 70%,rgba(94,56,160,.08),transparent 26%),
    linear-gradient(180deg,rgba(12,6,29,.98),rgba(5,5,16,.34) 74%,transparent);
}
.hero-planet {
  width:860px;
  height:860px;
  right:-205px;
  top:14px;
  background:
    radial-gradient(circle at 29% 19%,rgba(255,255,255,.42),transparent 5%),
    radial-gradient(circle at 34% 24%,rgba(236,209,255,.26),transparent 10%),
    radial-gradient(circle at 37% 31%,rgba(202,148,255,.34),transparent 19%),
    radial-gradient(ellipse at 42% 40%,rgba(125,70,210,.58),transparent 30%),
    radial-gradient(circle at 48% 45%,#552989 0%,#351957 24%,#1b102d 44%,#0d0917 62%,#04050a 79%);
  border:1px solid rgba(221,186,255,.24);
  box-shadow:
    inset -150px -115px 210px rgba(0,0,0,.88),
    inset 65px 28px 150px rgba(165,92,255,.18),
    -54px 24px 160px rgba(124,58,237,.30),
    -10px 0 95px rgba(168,85,247,.18),
    0 0 110px rgba(56,189,248,.09);
}
.hero-planet::before {
  inset:7% 6% 16% 7%;
  background:
    radial-gradient(ellipse at 26% 20%,rgba(255,255,255,.15),transparent 18%),
    linear-gradient(156deg,transparent 0 16%,rgba(219,185,255,.12) 20%,transparent 25%),
    linear-gradient(8deg,transparent 0 31%,rgba(174,120,237,.08) 34%,transparent 39%),
    linear-gradient(164deg,transparent 0 45%,rgba(88,184,255,.055) 48%,transparent 54%),
    repeating-radial-gradient(ellipse at 37% 36%,rgba(255,255,255,.025) 0 2px,transparent 3px 16px);
  filter:blur(1.4px);
  opacity:.95;
}
.hero-planet::after {
  inset:-3.5%;
  border-top:5px solid rgba(235,207,255,.82);
  border-left:3px solid rgba(183,126,255,.40);
  border-right:3px solid rgba(70,196,255,.24);
  border-bottom:1px solid rgba(124,58,237,.10);
  filter:blur(.25px);
  box-shadow:
    -18px -20px 52px rgba(191,126,255,.44),
    10px 8px 42px rgba(56,189,248,.16),
    0 0 115px rgba(168,85,247,.20);
}
.hero-atmosphere {
  width:916px;
  height:916px;
  right:-232px;
  top:-14px;
  border-color:rgba(222,184,255,.18);
  box-shadow:
    0 0 52px rgba(190,126,255,.27),
    0 0 115px rgba(124,58,237,.18),
    0 0 185px rgba(56,189,248,.07);
}
.hero-orbit {
  right:-300px;
  top:390px;
  width:1060px;
  height:205px;
  border-color:rgba(208,151,255,.24);
  box-shadow:0 -1px 26px rgba(168,85,247,.17);
}
.hero-orbit-two {
  right:-340px;
  top:423px;
  width:1140px;
  border-color:rgba(71,190,255,.15);
}
.hero-master-lockup {
  width:min(100%,470px);
  margin-top:12px;
}
.hero-master-symbol {
  width:420px;
  height:290px;
  margin-left:-28px;
  filter:
    drop-shadow(0 0 22px rgba(239,211,255,.32))
    drop-shadow(0 0 42px rgba(168,85,247,.62))
    drop-shadow(0 0 86px rgba(124,58,237,.36))
    drop-shadow(0 0 130px rgba(56,189,248,.14));
}
.hero-master-slogan {
  margin-top:-18px;
  color:#f4eef8;
  font-size:clamp(18px,1.65vw,24px);
  font-weight:650;
  letter-spacing:.015em;
}
.hero-copy .hero-actions {
  margin-top:28px;
}
.hero-copy .trust-row {
  margin-top:34px;
}
.hero-visual {
  min-height:650px;
}
.hero-stage {
  width:min(100%,670px);
  min-height:590px;
  transform:translate(-12px,8px);
}
.hero-stage .premium-screen {
  width:min(100%,575px);
  margin-right:0;
  box-shadow:
    0 48px 125px rgba(0,0,0,.52),
    0 0 0 1px rgba(223,190,255,.045),
    0 0 80px rgba(124,58,237,.13),
    inset 0 1px rgba(255,255,255,.055);
}
.hero-stage-mark {
  width:355px;
  height:355px;
  right:-18px;
  top:6px;
  opacity:.12;
}
.hero-visual .float-live {
  right:5px;
  top:38px;
}
.hero-visual .float-device {
  left:82px;
  bottom:62px;
}
@media (hover:hover) and (pointer:fine) {
  .hero:hover .hero-master-symbol {
    transform:translateY(-4px) scale(1.025);
    filter:
      drop-shadow(0 0 26px rgba(244,220,255,.38))
      drop-shadow(0 0 52px rgba(168,85,247,.72))
      drop-shadow(0 0 98px rgba(124,58,237,.42))
      drop-shadow(0 0 145px rgba(56,189,248,.16));
  }
}
@media (max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:56px;
  }
  .hero-master-symbol {
    width:335px;
    height:230px;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-master-slogan {
    margin-top:-12px;
  }
  .hero-planet {
    width:670px;
    height:670px;
    right:-390px;
    top:430px;
  }
  .hero-atmosphere {
    width:716px;
    height:716px;
    right:-413px;
    top:407px;
  }
  .hero-orbit {
    top:745px;
    right:-460px;
    width:940px;
  }
  .hero-orbit-two {
    top:777px;
    right:-490px;
    width:1010px;
  }
  .hero-stage {
    transform:none;
  }
}
@media (max-width:680px) {
  .hero {
    padding-top:48px;
    padding-bottom:60px;
  }
  .hero-copy .eyebrow {
    margin-bottom:4px;
  }
  .hero-master-symbol {
    width:285px;
    height:205px;
  }
  .hero-master-slogan {
    margin-top:-14px;
    font-size:18px;
  }
  .hero-copy .hero-actions {
    margin-top:24px;
  }
  .hero-copy .trust-row {
    margin-top:28px;
  }
  .hero-planet {
    width:575px;
    height:575px;
    right:-370px;
    top:485px;
  }
  .hero-atmosphere {
    width:616px;
    height:616px;
    right:-390px;
    top:464px;
  }
  .hero-orbit {
    top:755px;
    right:-505px;
    width:900px;
  }
  .hero-orbit-two {
    top:782px;
    right:-532px;
    width:955px;
  }
  .hero-stage {
    min-height:430px;
  }
}

/* Final hero polish: stronger emblem and planetary surface */
.hero-master-symbol {
  width:455px;
  height:315px;
  margin-left:-34px;
  filter:
    drop-shadow(0 0 24px rgba(251,236,255,.36))
    drop-shadow(0 0 50px rgba(184,110,255,.72))
    drop-shadow(0 0 96px rgba(124,58,237,.42))
    drop-shadow(0 0 145px rgba(56,189,248,.16));
}
.hero-master-slogan {
  margin-top:-24px;
}
.hero-planet {
  filter:saturate(1.16) contrast(1.04);
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,.48),transparent 4.5%),
    radial-gradient(ellipse at 34% 24%,rgba(239,213,255,.30),transparent 10%),
    radial-gradient(ellipse at 31% 37%,rgba(177,110,245,.18),transparent 17%),
    radial-gradient(ellipse at 52% 24%,rgba(98,175,255,.08),transparent 18%),
    radial-gradient(ellipse at 39% 49%,rgba(150,86,225,.22),transparent 26%),
    radial-gradient(circle at 48% 45%,#5b2d91 0%,#381c5c 24%,#1b102e 44%,#0d0918 63%,#04050a 80%);
}
.hero-planet::before {
  inset:6% 5% 12% 6%;
  background:
    radial-gradient(ellipse at 25% 18%,rgba(255,255,255,.17),transparent 15%),
    linear-gradient(162deg,transparent 0 11%,rgba(235,210,255,.12) 14%,transparent 18%),
    linear-gradient(172deg,transparent 0 29%,rgba(195,142,255,.11) 33%,transparent 37%),
    linear-gradient(154deg,transparent 0 48%,rgba(110,78,190,.12) 52%,transparent 57%),
    linear-gradient(6deg,transparent 0 56%,rgba(76,184,255,.055) 59%,transparent 64%),
    repeating-radial-gradient(ellipse at 39% 35%,rgba(255,255,255,.025) 0 2px,transparent 3px 15px);
  mix-blend-mode:screen;
  filter:blur(1px);
  opacity:.98;
}
@media (max-width:900px) {
  .hero-master-symbol {
    width:360px;
    height:245px;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-master-slogan {
    margin-top:-17px;
  }
}
@media (max-width:680px) {
  .hero-master-symbol {
    width:305px;
    height:215px;
  }
  .hero-master-slogan {
    margin-top:-17px;
  }
}

/* Hero density correction: reduce unused vertical space */
.hero {
  min-height:790px;
  padding-bottom:34px;
}
@media (max-width:900px) {
  .hero {
    min-height:auto;
    padding-bottom:34px;
  }
}
@media (max-width:680px) {
  .hero {
    gap:16px;
    padding-bottom:24px;
  }
}

/* --- WEBGL HERO MASTER: advanced production layer --- */
.hero {
  position:relative;
  min-height:735px;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:26px;
  padding-top:58px;
  padding-bottom:34px;
  isolation:isolate;
}
.hero-cosmos {
  position:absolute;
  z-index:-4;
  inset:-118px -12vw -22px -12vw;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 30%,rgba(104,45,210,.13),transparent 25%),
    radial-gradient(circle at 48% 45%,rgba(56,189,248,.025),transparent 28%),
    linear-gradient(180deg,rgba(8,5,20,.54),rgba(5,5,16,.10) 72%,transparent);
}
.hero-planet-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .8s ease;
}
.webgl-hero-ready .hero-planet-canvas {
  opacity:1;
}
.webgl-hero-ready .hero-planet,
.webgl-hero-ready .hero-atmosphere,
.webgl-hero-ready .hero-orbit,
.webgl-hero-ready .hero-star {
  display:none;
}
.hero-copy {
  position:relative;
  z-index:4;
  align-self:center;
  padding-top:8px;
}
.hero-master-lockup {
  position:relative;
  width:min(100%,520px);
  margin-top:4px;
  isolation:isolate;
}
.hero-master-lockup::before {
  content:"";
  position:absolute;
  z-index:-2;
  width:430px;
  height:270px;
  left:-58px;
  top:20px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 44% 48%,rgba(190,112,255,.30),rgba(124,58,237,.14) 30%,rgba(56,189,248,.055) 47%,transparent 70%);
  filter:blur(26px);
  opacity:.95;
}
.hero-master-lockup::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-18px;
  top:42%;
  width:360px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,172,255,.22),rgba(65,190,255,.12),transparent);
  box-shadow:0 0 20px rgba(155,82,255,.22);
  transform:rotate(-8deg);
}
.hero-master-symbol {
  display:block;
  width:490px;
  height:330px;
  margin-left:-42px;
  object-fit:contain;
  object-position:left center;
  filter:
    drop-shadow(0 0 5px rgba(239,218,255,.38))
    drop-shadow(0 0 13px rgba(155,82,255,.32));
  transform:none;
}
.hero-master-slogan {
  margin:-30px 0 0;
  color:#eee8f4;
  font:650 clamp(18px,1.6vw,23px)/1.15 Manrope,sans-serif;
  letter-spacing:.005em;
  text-shadow:0 0 20px rgba(146,84,226,.08);
}
.hero-copy .hero-actions {
  margin-top:26px;
}
.hero-copy .trust-row {
  margin-top:30px;
}
.hero-visual {
  position:relative;
  z-index:3;
  min-height:575px;
  margin:0;
}
.hero-stage {
  width:min(100%,690px);
  min-height:560px;
  transform:translate(-6px,8px);
}
.hero-stage::before {
  opacity:.62;
  filter:blur(38px);
}
.hero-stage-mark {
  opacity:.065;
}
.hero-stage .premium-screen {
  width:min(100%,590px);
  box-shadow:
    0 50px 130px rgba(0,0,0,.54),
    0 0 0 1px rgba(211,183,240,.045),
    0 0 80px rgba(106,50,201,.10),
    inset 0 1px rgba(255,255,255,.05);
}
@media (hover:hover) and (pointer:fine) {
  .hero-master-symbol {
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .hero:hover .hero-master-symbol {
    transform:translateY(-3px) scale(1.012);
    filter:
      drop-shadow(0 0 6px rgba(245,225,255,.42))
      drop-shadow(0 0 16px rgba(155,82,255,.38));
  }
}
@media (max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    gap:8px;
    padding-top:48px;
    padding-bottom:28px;
  }
  .hero-copy {
    text-align:center;
    padding-top:0;
  }
  .hero-master-lockup {
    margin-left:auto;
    margin-right:auto;
  }
  .hero-master-lockup::before {
    left:50%;
    transform:translateX(-50%);
  }
  .hero-master-symbol {
    width:365px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    object-position:center;
  }
  .hero-master-slogan {
    margin-top:-22px;
  }
  .hero-copy .hero-actions,
  .hero-copy .trust-row {
    justify-content:center;
  }
  .hero-visual {
    min-height:475px;
  }
  .hero-stage {
    min-height:455px;
    transform:none;
  }
}
@media (max-width:680px) {
  .hero {
    gap:2px;
    padding-top:42px;
    padding-bottom:22px;
  }
  .hero-cosmos {
    inset:-92px -26px -8px -26px;
  }
  .hero-master-lockup {
    width:100%;
  }
  .hero-master-lockup::before {
    width:315px;
    height:210px;
    top:8px;
    filter:blur(22px);
  }
  .hero-master-lockup::after {
    left:50%;
    width:290px;
    transform:translateX(-50%) rotate(-8deg);
  }
  .hero-master-symbol {
    width:320px;
    height:225px;
  }
  .hero-master-slogan {
    margin-top:-22px;
    font-size:18px;
  }
  .hero-copy .hero-actions {
    margin-top:22px;
  }
  .hero-copy .trust-row {
    margin-top:25px;
  }
  .hero-visual {
    min-height:430px;
  }
  .hero-stage {
    min-height:410px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-planet-canvas {
    transition:none;
  }
  .hero-master-symbol {
    transition:none!important;
    transform:none!important;
  }
}

/* --- Master reference emblem pass --- */
.hero-copy .eyebrow {
  opacity:.62;
  margin-bottom:-4px;
}
.hero-master-lockup {
  width:min(100%,560px);
  margin-top:-2px;
}
.hero-master-lockup::before {
  width:500px;
  height:310px;
  left:-72px;
  top:5px;
  background:
    radial-gradient(ellipse at 43% 50%,rgba(208,92,255,.34),rgba(112,42,232,.18) 31%,rgba(45,139,255,.075) 51%,transparent 72%);
  filter:blur(29px);
}
.hero-master-symbol {
  width:525px;
  height:350px;
  margin-left:-48px;
  filter:
    drop-shadow(0 0 7px rgba(218,118,255,.34))
    drop-shadow(0 0 17px rgba(119,49,237,.28))
    drop-shadow(0 0 30px rgba(48,139,255,.08));
}
.hero-master-slogan {
  margin:-30px 0 0;
  color:#f0e8f5;
  font:500 clamp(14px,1.25vw,18px)/1.2 Manrope,sans-serif;
  letter-spacing:.34em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 0 18px rgba(155,78,230,.12);
}
@media (hover:hover) and (pointer:fine) {
  .hero:hover .hero-master-symbol {
    transform:translateY(-3px) scale(1.014);
    filter:
      drop-shadow(0 0 9px rgba(234,136,255,.40))
      drop-shadow(0 0 21px rgba(127,52,244,.36))
      drop-shadow(0 0 34px rgba(48,139,255,.10));
  }
}
@media (max-width:900px) {
  .hero-master-symbol {
    width:390px;
    height:265px;
  }
  .hero-master-slogan {
    margin-top:-23px;
    font-size:15px;
    letter-spacing:.27em;
  }
}
@media (max-width:680px) {
  .hero-copy .eyebrow {
    margin-bottom:0;
  }
  .hero-master-symbol {
    width:330px;
    height:230px;
  }
  .hero-master-slogan {
    margin-top:-22px;
    font-size:13px;
    letter-spacing:.23em;
  }
}

/* --- Master reference hero platform rail --- */
.hero {
  grid-template-rows:auto auto;
}
.hero-copy {
  padding-top:0;
}
.hero-master-lockup {
  margin-top:-10px;
}
.hero-master-slogan {
  margin-top:-32px;
}
.hero-platforms {
  grid-column:1 / -1;
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;
  gap:0;
  width:min(100%,1120px);
  margin:-44px auto 0;
  padding:18px 20px 10px;
  border-top:1px solid rgba(201,164,255,.08);
  background:
    linear-gradient(90deg,transparent,rgba(15,10,30,.46) 10%,rgba(15,10,30,.46) 90%,transparent);
}
.hero-platforms::before {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:-20px;
  height:40px;
  background:radial-gradient(ellipse at center,rgba(119,55,230,.14),transparent 72%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-platform {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:64px;
  padding:0 12px;
  border-right:1px solid rgba(255,255,255,.055);
}
.hero-platform:last-child {
  border-right:0;
}
.hero-platform img {
  display:block;
  max-width:56px;
  max-height:27px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
.hero-platform > span:last-child {
  color:#91879b;
  font:650 8px/1.1 Manrope,sans-serif;
  letter-spacing:.08em;
}
.hero-platform-pair {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:27px;
}
.hero-platform-pair img:first-child {
  max-width:24px;
  max-height:24px;
}
.hero-platform-pair img:last-child {
  max-width:46px;
  max-height:22px;
}
.hero-web-glyph {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#c9a4ff;
  border:1px solid rgba(201,164,255,.42);
  border-radius:50%;
  font:500 24px/1 sans-serif;
  box-shadow:0 0 16px rgba(124,58,237,.08);
}
@media (hover:hover) and (pointer:fine) {
  .hero-platform {
    transition:transform .28s ease,filter .28s ease;
  }
  .hero-platform:hover {
    transform:translateY(-3px);
    filter:brightness(1.08);
  }
}
@media (max-width:900px) {
  .hero-platforms {
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:min(100%,680px);
    margin:-18px auto 0;
    gap:12px 0;
    padding:18px 10px 8px;
  }
  .hero-platform {
    border-right:0;
  }
}
@media (max-width:680px) {
  .hero-master-lockup {
    margin-top:-4px;
  }
  .hero-master-slogan {
    margin-top:-24px;
  }
  .hero-platforms {
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin:4px auto 0;
    padding:15px 2px 4px;
    gap:13px 0;
  }
  .hero-platform {
    min-height:54px;
    padding:0 4px;
  }
  .hero-platform img {
    max-width:44px;
    max-height:23px;
  }
  .hero-platform > span:last-child {
    font-size:6px;
    letter-spacing:.05em;
  }
  .hero-platform-lg {
    display:none;
  }
}

/* --- Mobile stability mode: no WebGL on phones --- */
@media (max-width:820px) {
  .hero-lite-mobile .hero-planet-canvas {
    display:none!important;
  }
  .hero-lite-mobile .hero-planet,
  .hero-lite-mobile .hero-atmosphere,
  .hero-lite-mobile .hero-orbit,
  .hero-lite-mobile .hero-star {
    display:block!important;
  }
  .hero-lite-mobile .hero-cosmos {
    overflow:hidden;
  }
  .hero-lite-mobile .hero-planet {
    width:560px;
    height:560px;
    right:-345px;
    top:420px;
    opacity:.95;
    transform:rotate(0deg);
    animation:tvneoPlanetLiteSpin 220s linear infinite;
    background:
      radial-gradient(circle at 30% 20%,rgba(255,255,255,.26),transparent 6%),
      radial-gradient(circle at 36% 27%,rgba(221,176,255,.20),transparent 14%),
      radial-gradient(circle at 43% 40%,rgba(116,63,195,.50),transparent 30%),
      radial-gradient(circle at 50% 48%,#4a2378 0%,#26143f 30%,#110b1e 55%,#05050b 77%);
    box-shadow:
      inset -105px -78px 160px rgba(0,0,0,.84),
      inset 35px 18px 85px rgba(146,78,230,.13),
      -24px 12px 90px rgba(124,58,237,.20),
      0 0 55px rgba(56,189,248,.06);
  }
  .hero-lite-mobile .hero-planet::after {
    border-top-width:3px;
    box-shadow:
      -8px -10px 26px rgba(168,85,247,.28),
      6px 4px 18px rgba(56,189,248,.10);
  }
  .hero-lite-mobile .hero-atmosphere {
    width:590px;
    height:590px;
    right:-360px;
    top:405px;
    opacity:.76;
  }
  .hero-lite-mobile .hero-orbit {
    top:665px;
    right:-450px;
    width:830px;
    height:150px;
    opacity:.46;
  }
  .hero-lite-mobile .hero-orbit-two {
    top:690px;
    right:-470px;
    width:880px;
    opacity:.28;
  }
  .hero-lite-mobile .hero-star-one { right:18%; top:34%; }
  .hero-lite-mobile .hero-star-two { right:32%; top:26%; }
  .hero-lite-mobile .hero-star-three { right:12%; top:52%; }
}
@keyframes tvneoPlanetLiteSpin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-lite-mobile .hero-planet {
    animation:none!important;
  }
}

/* Hard mobile failsafe: lightweight hero regardless of JS class */
@media (max-width:820px) {
  .hero-planet-canvas {
    display:none!important;
  }
  .hero-planet,
  .hero-atmosphere,
  .hero-orbit,
  .hero-star {
    display:block!important;
  }
  .hero-planet {
    width:560px!important;
    height:560px!important;
    right:-345px!important;
    top:420px!important;
    opacity:.95!important;
    animation:tvneoPlanetLiteSpin 220s linear infinite!important;
  }
  .hero-atmosphere {
    width:590px!important;
    height:590px!important;
    right:-360px!important;
    top:405px!important;
    opacity:.76!important;
  }
  .hero-orbit {
    top:665px!important;
    right:-450px!important;
    width:830px!important;
    height:150px!important;
    opacity:.46!important;
  }
  .hero-orbit-two {
    top:690px!important;
    right:-470px!important;
    width:880px!important;
    opacity:.28!important;
  }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce) {
  .hero-planet {
    animation:none!important;
  }
}

/* --- N+ precision pass: crystal clarity, minimal haze --- */
.hero-master-lockup::before {
  width:420px;
  height:250px;
  left:-34px;
  top:34px;
  background:
    radial-gradient(ellipse at 44% 50%,
      rgba(202,82,255,.18) 0%,
      rgba(118,45,232,.08) 34%,
      rgba(48,145,255,.035) 52%,
      transparent 72%);
  filter:blur(16px);
  opacity:.58;
}
.hero-master-lockup::after {
  opacity:.42;
  box-shadow:0 0 10px rgba(155,82,255,.12);
}
.hero-master-symbol {
  filter:
    saturate(1.24)
    contrast(1.14)
    brightness(1.05)
    drop-shadow(0 0 2px rgba(250,239,255,.32))
    drop-shadow(0 0 7px rgba(155,72,245,.22))
    drop-shadow(0 0 13px rgba(54,154,255,.055));
}
@media (hover:hover) and (pointer:fine) {
  .hero:hover .hero-master-symbol {
    filter:
      saturate(1.30)
      contrast(1.17)
      brightness(1.07)
      drop-shadow(0 0 2px rgba(255,245,255,.36))
      drop-shadow(0 0 8px rgba(164,75,255,.26))
      drop-shadow(0 0 15px rgba(54,154,255,.065));
  }
}
@media (max-width:820px) {
  .hero-master-lockup::before {
    width:300px;
    height:190px;
    left:50%;
    top:18px;
    transform:translateX(-50%);
    filter:blur(13px);
    opacity:.48;
  }
  .hero-master-symbol {
    filter:
      saturate(1.22)
      contrast(1.13)
      brightness(1.05)
      drop-shadow(0 0 2px rgba(250,239,255,.26))
      drop-shadow(0 0 6px rgba(155,72,245,.18));
  }
}

/* --- 2026-09-29 HERO REFERENCE MATCH: image-master composition --- */
.hero {
  position:relative;
  overflow:hidden;
}
.hero-cosmos {
  background:
    radial-gradient(circle at 63% 30%,rgba(70,52,255,.16),transparent 15%),
    radial-gradient(circle at 22% 50%,rgba(151,31,255,.16),transparent 25%),
    radial-gradient(ellipse at 52% 78%,rgba(78,32,196,.12),transparent 32%),
    linear-gradient(180deg,#04030b 0%,#080518 47%,#06040d 100%);
}
.hero-cosmos::before {
  opacity:1;
  background:
    radial-gradient(circle at 76% 21%,rgba(98,85,255,.18),transparent 12%),
    radial-gradient(circle at 70% 29%,rgba(157,59,255,.16),transparent 24%),
    radial-gradient(circle at 15% 58%,rgba(131,27,238,.12),transparent 24%),
    linear-gradient(180deg,rgba(4,3,12,.20),rgba(4,3,12,.02));
}
.hero-copy {
  z-index:8;
}
.hero-master-lockup {
  width:min(100%,570px);
  margin-left:0;
}
.hero-master-symbol {
  width:545px;
  height:365px;
  margin-left:-44px;
  filter:
    saturate(1.34)
    contrast(1.22)
    brightness(.94)
    drop-shadow(0 0 2px rgba(245,225,255,.38))
    drop-shadow(0 0 8px rgba(142,49,255,.28))
    drop-shadow(0 0 14px rgba(38,141,234,.08));
}
.hero-master-lockup::before {
  width:420px;
  height:230px;
  left:-16px;
  top:55px;
  opacity:.42;
  filter:blur(18px);
}
.hero-master-slogan {
  width:min(100%,510px);
  margin:-38px 0 0;
  text-align:center;
  color:#c9bdd4;
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:.42em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:
    0 0 7px rgba(210,151,255,.16),
    0 0 18px rgba(122,61,214,.08);
}

/* Reference device scene */
.hero-stage {
  width:min(100%,720px);
  min-height:520px;
  place-items:unset;
}
.hero-stage-mark,
.hero-remote,
.hero-visual .float-live,
.hero-visual .float-device {
  display:none!important;
}
.hero-stage::before {
  inset:26% -4% -2% 2%;
  border-radius:48%;
  background:
    radial-gradient(ellipse at 58% 74%,rgba(106,34,236,.25),transparent 27%),
    radial-gradient(ellipse at 46% 88%,rgba(30,123,255,.12),transparent 31%),
    linear-gradient(180deg,transparent 0 60%,rgba(105,29,230,.08));
  filter:blur(24px);
}
.hero-stage::after {
  left:0;
  right:-8%;
  bottom:35px;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(149,69,255,.42),rgba(40,133,255,.35),transparent);
  box-shadow:
    0 0 24px rgba(112,38,239,.40),
    0 14px 48px rgba(55,67,255,.14);
}
.hero-stage .premium-screen {
  position:absolute;
  z-index:5;
  width:min(86%,610px);
  aspect-ratio:1.72/1;
  right:-4px;
  top:92px;
  margin:0;
  border-radius:18px;
  transform:perspective(1250px) rotateY(-5deg) rotateX(1deg);
  background:#06050b;
  box-shadow:
    0 40px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(164,96,255,.11),
    0 0 48px rgba(117,41,238,.14),
    inset 0 1px rgba(255,255,255,.05);
}
.hero-stage .premium-screen::after {
  left:28%;
  right:28%;
  bottom:-23px;
  height:20px;
}
.hero-stage .screen-topbar {
  height:34px;
  padding:0 12px;
}
.hero-stage .screen-content {
  inset:34px 0 0;
  padding:21px 24px 18px;
}
.hero-stage .preview-copy strong {
  font-size:27px;
  line-height:.98;
}
.hero-stage .preview-copy span {
  max-width:250px;
  color:#a69aaf;
  font-size:7px;
  letter-spacing:.06em;
  text-transform:none;
}
.hero-stage .preview-rail i {
  height:43px;
}

/* Re-purpose the former phone as the smaller laptop/display in the master image */
.hero-phone {
  z-index:7;
  left:10px;
  bottom:54px;
  width:235px;
  height:145px;
  padding:14px;
  border-radius:10px;
  align-items:flex-start;
  overflow:visible;
  background:
    radial-gradient(circle at 74% 24%,rgba(109,43,229,.24),transparent 32%),
    linear-gradient(155deg,#0c0915,#05040a 82%);
  border:1px solid rgba(142,89,225,.25);
  box-shadow:
    0 32px 62px rgba(0,0,0,.52),
    0 0 28px rgba(97,37,213,.10),
    inset 0 1px rgba(255,255,255,.06);
  transform:perspective(900px) rotateY(5deg) rotateX(1deg);
}
.hero-phone::before {
  content:"";
  position:absolute;
  inset:34px 13px 17px;
  border-radius:5px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28) 0 24%,transparent 24%),
    radial-gradient(circle at 68% 22%,rgba(108,54,240,.38),transparent 32%),
    linear-gradient(145deg,#0e0920,#111537 52%,#08101e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.hero-phone::after {
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:-17px;
  height:17px;
  border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,#2a2334,#09080d);
  clip-path:polygon(3% 0,97% 0,100% 74%,62% 84%,58% 100%,42% 100%,38% 84%,0 74%);
  box-shadow:0 11px 24px rgba(0,0,0,.32);
}
.hero-phone-speaker,
.hero-phone strong,
.hero-phone small,
.hero-phone-nav {
  display:none!important;
}
.hero-phone img {
  position:relative;
  z-index:3;
  width:26px;
  height:26px;
  margin:0;
  object-fit:contain;
  filter:saturate(1.2) drop-shadow(0 0 5px rgba(151,61,255,.22));
}

.hero-box {
  z-index:7;
  right:8px;
  bottom:20px;
  width:118px;
  height:46px;
  border-radius:13px;
  background:linear-gradient(155deg,#16101f,#07060b);
  box-shadow:
    0 24px 44px rgba(0,0,0,.46),
    0 0 22px rgba(112,42,222,.08),
    inset 0 1px rgba(255,255,255,.04);
}
.hero-box span { display:none; }

/* desktop composition density */
@media (min-width:821px) {
  .hero {
    min-height:760px;
    grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
    gap:14px;
  }
  .hero-copy {
    align-self:center;
    padding-bottom:70px;
  }
  .hero-visual {
    min-height:590px;
  }
  .hero-actions {
    margin-top:34px;
  }
  .hero-platforms {
    margin-top:-34px;
  }
}

/* Mobile = reference image first impression; no WebGL, no heavy CTA blocks */
@media (max-width:820px) {
  .hero {
    display:grid;
    grid-template-columns:1fr;
    min-height:830px;
    gap:0;
    padding-top:26px;
    padding-bottom:26px;
  }
  .hero-copy {
    min-height:390px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:18px;
  }
  .hero-master-lockup {
    width:100%;
    max-width:430px;
    margin:0 auto;
  }
  .hero-master-symbol {
    width:min(94vw,430px);
    height:auto;
    aspect-ratio:620/500;
    margin:0 auto;
    object-position:center;
    filter:
      saturate(1.38)
      contrast(1.24)
      brightness(.95)
      drop-shadow(0 0 2px rgba(245,225,255,.34))
      drop-shadow(0 0 7px rgba(139,46,255,.26));
  }
  .hero-master-lockup::before {
    width:340px;
    height:205px;
    left:50%;
    top:72px;
    transform:translateX(-50%);
    opacity:.38;
    filter:blur(15px);
  }
  .hero-master-slogan {
    width:100%;
    max-width:430px;
    margin:-58px auto 0;
    padding-left:.42em;
    text-align:center;
    font-size:clamp(11px,3.2vw,14px);
    letter-spacing:.42em;
    color:#b9acbf;
  }
  .hero-actions,
  .hero-platforms {
    display:none!important;
  }

  /* place lightweight planet behind emblem, matching reference */
  .hero-planet {
    width:610px!important;
    height:610px!important;
    right:-125px!important;
    top:-78px!important;
    opacity:.98!important;
    background:
      radial-gradient(circle at 29% 18%,rgba(255,255,255,.26),transparent 5%),
      radial-gradient(circle at 34% 24%,rgba(211,170,255,.19),transparent 11%),
      radial-gradient(ellipse at 48% 28%,rgba(63,104,232,.16),transparent 22%),
      radial-gradient(ellipse at 39% 43%,rgba(92,45,174,.36),transparent 31%),
      radial-gradient(circle at 52% 50%,#251054 0%,#140c34 31%,#080817 56%,#03040a 78%)!important;
    box-shadow:
      inset -105px -80px 165px rgba(0,0,0,.86),
      inset 35px 16px 95px rgba(113,68,225,.13),
      -18px 6px 85px rgba(117,51,244,.18),
      0 0 48px rgba(46,109,235,.08)!important;
  }
  .hero-atmosphere {
    width:642px!important;
    height:642px!important;
    right:-141px!important;
    top:-94px!important;
    opacity:.84!important;
  }
  .hero-orbit {
    width:720px!important;
    height:155px!important;
    right:-190px!important;
    top:165px!important;
    opacity:.42!important;
  }
  .hero-orbit-two {
    width:760px!important;
    right:-210px!important;
    top:188px!important;
    opacity:.24!important;
  }

  .hero-visual {
    min-height:395px;
    margin-top:-18px;
  }
  .hero-stage {
    width:100%;
    min-height:390px;
    margin:0 auto;
  }
  .hero-stage::before {
    inset:17% -8% -5% -8%;
  }
  .hero-stage::after {
    bottom:30px;
  }
  .hero-stage .premium-screen {
    width:78%;
    aspect-ratio:1.68/1;
    right:-6%;
    top:62px;
    margin:0;
    border-radius:12px;
    transform:perspective(900px) rotateY(-6deg) rotateX(1deg);
  }
  .hero-stage .screen-topbar {
    height:22px;
    padding:0 8px;
  }
  .hero-stage .screen-topbar b {
    font-size:5px;
  }
  .hero-stage .screen-content {
    inset:22px 0 0;
    padding:13px 13px 11px;
  }
  .hero-stage .preview-brand small,
  .hero-stage .preview-copy span {
    font-size:5px;
  }
  .hero-stage .preview-copy strong {
    font-size:16px;
  }
  .hero-stage .preview-chips {
    gap:3px;
    margin:4px 0 5px;
  }
  .hero-stage .preview-chips span {
    padding:3px 4px;
    font-size:4px;
  }
  .hero-stage .preview-rail {
    gap:4px;
  }
  .hero-stage .preview-rail i {
    height:26px;
    border-radius:4px;
  }

  .hero-phone {
    left:2%;
    bottom:48px;
    width:42%;
    max-width:205px;
    height:118px;
    border-radius:8px;
    padding:10px;
    transform:perspective(700px) rotateY(5deg) rotateX(1deg);
  }
  .hero-phone::before {
    inset:27px 9px 13px;
  }
  .hero-phone::after {
    bottom:-13px;
    height:13px;
  }
  .hero-phone img {
    width:20px;
    height:20px;
  }
  .hero-box {
    right:2%;
    bottom:23px;
    width:86px;
    height:35px;
  }
  .hero-box img {
    width:24px;
    height:24px;
  }
}

/* tiny screens */
@media (max-width:420px) {
  .hero {
    min-height:790px;
  }
  .hero-copy {
    min-height:360px;
  }
  .hero-master-symbol {
    width:min(96vw,390px);
  }
  .hero-master-slogan {
    margin-top:-55px;
    font-size:11px;
    letter-spacing:.34em;
    padding-left:.34em;
  }
  .hero-planet {
    width:560px!important;
    height:560px!important;
    right:-112px!important;
    top:-60px!important;
  }
  .hero-atmosphere {
    width:590px!important;
    height:590px!important;
    right:-127px!important;
    top:-75px!important;
  }
}

/* --- fidelity refinement against approved master artwork --- */
.hero-master-symbol {
  filter:
    saturate(1.42)
    contrast(1.28)
    brightness(.91)
    drop-shadow(0 0 2px rgba(248,228,255,.34))
    drop-shadow(0 0 6px rgba(133,42,245,.23))
    drop-shadow(0 0 11px rgba(35,129,228,.07));
}

@media (max-width:820px) {
  .hero-master-symbol {
    filter:
      saturate(1.44)
      contrast(1.30)
      brightness(.92)
      drop-shadow(0 0 2px rgba(250,232,255,.31))
      drop-shadow(0 0 6px rgba(138,44,248,.22));
  }

  .hero-planet {
    background:
      radial-gradient(circle at 74% 18%,rgba(255,244,255,.34),transparent 4.5%),
      radial-gradient(circle at 68% 24%,rgba(177,126,255,.25),transparent 11%),
      radial-gradient(ellipse at 34% 24%,rgba(37,94,226,.26),transparent 23%),
      radial-gradient(ellipse at 44% 42%,rgba(57,42,156,.40),transparent 33%),
      radial-gradient(circle at 50% 49%,#24115b 0%,#17104a 28%,#0b0c2b 53%,#04050d 76%)!important;
    border-color:rgba(122,91,255,.34)!important;
    box-shadow:
      inset -104px -75px 155px rgba(0,0,0,.78),
      inset 26px 8px 88px rgba(84,92,235,.18),
      -18px -8px 68px rgba(91,58,242,.22),
      24px 0 58px rgba(97,52,230,.10)!important;
  }
  .hero-planet::before {
    inset:7% 7% 12% 7%!important;
    background:
      radial-gradient(circle at 24% 20%,rgba(117,143,255,.13),transparent 18%),
      repeating-radial-gradient(ellipse at 39% 35%,rgba(161,169,255,.045) 0 1px,transparent 2px 13px),
      linear-gradient(155deg,transparent 0 22%,rgba(83,61,185,.10) 25%,transparent 31%),
      linear-gradient(12deg,transparent 0 48%,rgba(38,113,208,.07) 51%,transparent 57%)!important;
    opacity:.82!important;
    filter:blur(.6px)!important;
  }
  .hero-planet::after {
    border-top:4px solid rgba(220,198,255,.72)!important;
    border-right:2px solid rgba(119,99,255,.28)!important;
    border-left:2px solid rgba(63,151,255,.22)!important;
    box-shadow:
      -14px -13px 35px rgba(144,75,255,.30),
      8px 2px 24px rgba(52,143,255,.10)!important;
  }
}

/* --- final master correction: organic planet, no concentric texture --- */
@media (max-width:820px) {
  .hero-planet::before {
    inset:7% 7% 12% 7%!important;
    background:
      radial-gradient(ellipse at 24% 18%,rgba(110,137,255,.15),transparent 16%),
      radial-gradient(ellipse at 46% 28%,rgba(116,73,210,.10),transparent 18%),
      radial-gradient(ellipse at 32% 50%,rgba(59,102,205,.075),transparent 21%),
      linear-gradient(162deg,transparent 0 18%,rgba(134,91,225,.09) 22%,transparent 28%),
      linear-gradient(8deg,transparent 0 42%,rgba(55,121,211,.065) 47%,transparent 54%),
      linear-gradient(148deg,transparent 0 58%,rgba(90,56,170,.08) 63%,transparent 69%)!important;
    opacity:.84!important;
    filter:blur(.7px)!important;
  }
}