:root {
  --bg: #05040a;
  --bg-2: #090711;
  --surface: #0d0a17;
  --surface-2: #130e20;
  --surface-3: #1a1229;
  --line: rgba(195, 171, 255, .16);
  --line-strong: rgba(195, 171, 255, .3);
  --violet: #9b69ff;
  --violet-bright: #bb91ff;
  --violet-deep: #5e31c4;
  --text: #f7f4ff;
  --muted: #aaa3ba;
  --soft: #746d83;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'DM Sans', sans-serif;
  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; background: #0c0817; }
body { margin: 0; padding: 0; background: #0c0817; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body, button, input { font-family: var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(var(--wrap), calc(100% - 72px)); margin-inline: auto; }
.section { position: relative; padding: 108px 0; }
.site-frame { position: relative; isolation: isolate; margin: 0; overflow: hidden; background: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 100px; background: radial-gradient(ellipse 90% 70% at 50% 10%, rgba(104,55,176,.32), transparent 80%), radial-gradient(ellipse 80% 90% at 15% 55%, rgba(79,40,124,.28), transparent 80%), radial-gradient(ellipse 80% 90% at 85% 55%, rgba(72,36,114,.26), transparent 80%), linear-gradient(180deg, #110a1e 0%, #0c0817 60%, #0e0a1b 100%); }
.hero::before, .proof-section::before, .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .48; background-image: radial-gradient(circle at 12% 26%, rgba(224,209,255,.65) 0 1px, transparent 1.5px), radial-gradient(circle at 87% 33%, rgba(219,189,255,.55) 0 1px, transparent 1.5px), radial-gradient(circle at 35% 66%, rgba(227,208,255,.4) 0 1px, transparent 1.5px), radial-gradient(circle at 71% 78%, rgba(191,161,255,.5) 0 1px, transparent 1.5px), radial-gradient(circle at 56% 22%, rgba(237,223,255,.38) 0 1px, transparent 1.5px); background-size: 380px 310px, 490px 420px, 340px 470px, 520px 380px, 610px 510px; }
.hero-atmosphere { position: absolute; z-index: -3; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 37% at 50% 43%, rgba(106,58,183,.22), transparent 78%), linear-gradient(110deg, rgba(49,24,79,.14), transparent 36%, rgba(56,29,86,.16)); }
.hero-smoke { position: absolute; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(75px); mix-blend-mode: screen; opacity: .44; }
.hero-smoke-a { width: 48vw; height: 320px; left: 21%; top: 135px; background: radial-gradient(ellipse, rgba(126,78,204,.37), rgba(73,47,113,.1) 44%, transparent 72%); animation: smokeDrift 19s ease-in-out infinite alternate; }
.hero-smoke-b { width: 52vw; height: 265px; right: 1%; bottom: 50px; background: radial-gradient(ellipse, rgba(98,58,159,.3), rgba(81,42,127,.06) 47%, transparent 72%); animation: smokeDrift 23s ease-in-out infinite alternate-reverse; }
.hero-stars { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
@keyframes smokeDrift { from { transform: translate3d(-2%,1%,0) scale(.96); } to { transform: translate3d(3%,-3%,0) scale(1.06); } }

.site-nav { position: relative; z-index: 8; height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(209,188,255,.11); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: white; }
.brand-mark { width: 27px; height: 27px; display: inline-flex; color: var(--violet-bright); filter: drop-shadow(0 0 9px rgba(159,102,255,.45)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.085em; }
.brand-dot { color: var(--violet-bright); }
.nav-links { display: flex; align-items: center; gap: 32px; margin-left: 70px; }
.nav-links a, .nav-login { color: rgba(239,232,255,.68); font-size: 11px; font-weight: 500; transition: color .2s ease; }
.nav-links a:hover, .nav-login:hover { color: white; }
.nav-actions { display: flex; align-items: center; gap: 21px; }
.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 19px; border: 1px solid transparent; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .015em; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 15px; transition: transform .2s; }
.button:hover span { transform: translateX(2px); }
.button-nav { min-height: 38px; padding: 0 15px; border-color: rgba(188,153,255,.24); border-radius: 8px; background: linear-gradient(130deg, rgba(118,65,205,.86), rgba(76,40,145,.88)); color: white; box-shadow: 0 8px 26px rgba(101,48,186,.22), inset 0 1px rgba(255,255,255,.13); font-size: 10px; }
.button-nav:hover { box-shadow: 0 10px 30px rgba(127,72,215,.34); }
.button-primary { color: white; background: linear-gradient(130deg, #9e6bff, #6b3dc2); box-shadow: 0 9px 28px rgba(118,60,206,.3), inset 0 1px rgba(255,255,255,.28); }
.button-primary:hover { background: linear-gradient(130deg, #ae80ff, #7646d0); box-shadow: 0 12px 34px rgba(118,60,206,.39); }
.button-quiet { border-color: rgba(214,197,255,.25); background: rgba(255,255,255,.025); color: rgba(250,247,255,.9); }
.button-quiet:hover { border-color: rgba(215,193,255,.48); background: rgba(143,101,217,.1); }
.play-outline { width: 20px; height: 20px; display: grid; place-items: center; padding-left: 2px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 7px !important; }
.menu-toggle { display: none; }

.hero-copy { position: relative; z-index: 1; padding-top: 61px; text-align: center; }
.hero-kicker, .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: rgba(224,211,255,.7); font-size: 8px; line-height: 1.2; letter-spacing: .19em; font-weight: 700; }
.signal-dot { width: 6px; height: 6px; display: inline-block; flex: none; border-radius: 50%; background: #b99aff; box-shadow: 0 0 0 4px rgba(151,104,232,.14), 0 0 13px rgba(171,122,255,.82); }
.hero h1 { margin: 22px 0 14px; color: #fcfaff; font: 700 clamp(46px,6vw,78px)/1.02 var(--display); letter-spacing: -.067em; text-shadow: 0 2px 32px rgba(169,127,255,.13); }
.hero h1 span { color: #c2a2ff; }
.hero-copy > p { max-width: 520px; margin: 0 auto; color: rgba(227,218,240,.66); font-size: 13px; line-height: 1.75; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }

.hero-dashboard { position: relative; z-index: 2; margin-top: 46px; }
.dashboard-frame { position: relative; display: grid; grid-template-columns: 182px minmax(0,1fr); min-height: 580px; overflow: hidden; border: 1px solid rgba(202,174,255,.3); border-radius: 17px; background: #07060d; box-shadow: 0 26px 90px rgba(0,0,0,.58), 0 0 0 5px rgba(143,93,214,.045), 0 0 65px rgba(135,80,213,.17), inset 0 1px rgba(255,255,255,.1); }
.dashboard-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(206,177,255,.08), transparent 20%, transparent 70%, rgba(145,99,230,.08)); }
.dash-sidebar { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 23px 14px 16px; border-right: 1px solid rgba(198,173,250,.12); background: linear-gradient(180deg, rgba(18,14,29,.98), rgba(8,7,13,.98)); }
.dash-brand { display: flex; align-items: center; gap: 8px; padding: 0 7px 24px; color: #fff; font: 700 16px var(--display); letter-spacing: -.07em; }
.dash-brand > span:last-child { color: #bd9cff; }
.dash-brand-mark { color: #bf9cff; filter: drop-shadow(0 0 6px rgba(164,106,255,.7)); font-size: 18px; }
.dash-label { margin: 4px 7px 11px; color: #706a7f; font-size: 7px; letter-spacing: .16em; font-weight: 700; }
.dash-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; color: #9992a8; font-size: 9px; transition: color .2s, background .2s, border-color .2s; }
.dash-link > span { width: 15px; color: #a89abf; font-size: 13px; text-align: center; }
.dash-link:hover { color: white; background: rgba(255,255,255,.04); }
.dash-link.is-current { border-color: rgba(179,135,255,.26); background: linear-gradient(90deg, rgba(128,72,223,.6), rgba(96,50,167,.22)); color: white; box-shadow: inset 2px 0 #b991ff, 0 0 22px rgba(135,80,210,.13); }
.mini-live { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #fa5e80; box-shadow: 0 0 8px rgba(250,94,128,.8); }
.dash-sidebar-bottom { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 4px 0; border-top: 1px solid rgba(199,175,255,.1); }
.profile-avatar, .dash-profile { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid rgba(197,160,255,.38); border-radius: 50%; background: linear-gradient(135deg, #8052c5, #342044); color: white; font-size: 8px; }
.dash-sidebar-bottom strong, .dash-sidebar-bottom small { display: block; }
.dash-sidebar-bottom strong { color: #ded5ec; font-size: 8px; }
.dash-sidebar-bottom small { margin-top: 3px; color: #746d82; font-size: 7px; }
.dash-sidebar-bottom > b { margin-left: auto; color: #756d81; font-size: 9px; }
.dash-main { position: relative; z-index: 1; min-width: 0; padding: 0 22px 20px; }
.dash-topbar { min-height: 58px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(203,180,255,.11); }
.dash-crumb { color: #847d91; font-size: 8px; }
.dash-crumb i { padding: 0 7px; color: #514b5b; font-style: normal; }
.dash-crumb strong { color: #e2d9f2; font-weight: 600; }
.dash-top-actions { display: flex; align-items: center; gap: 14px; }
.dash-search { display: flex; gap: 6px; align-items: center; padding: 7px 10px; border: 1px solid rgba(196,175,241,.12); border-radius: 6px; color: #a797c0; font-size: 12px; }
.dash-search span { color: #726a7e; font-size: 7px; }
.dash-profile { width: 22px; height: 22px; }
.dash-feature { position: relative; min-height: 278px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(183,151,245,.18); border-radius: 11px; background: #100b19; box-shadow: inset 0 0 44px rgba(151,95,218,.08); }
.dash-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; opacity: .8; }
.dash-feature-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,4,10,.89), rgba(10,6,16,.63) 40%, rgba(9,5,13,.08) 82%), linear-gradient(0deg, rgba(6,4,10,.76), transparent 48%); }
.dash-feature-copy { position: absolute; top: 50%; left: 6%; width: 45%; transform: translateY(-46%); }
.dash-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: rgba(241,228,255,.8); font-size: 7px; font-weight: 700; letter-spacing: .17em; }
.dash-eyebrow i, .story-live i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #fa577d; box-shadow: 0 0 9px rgba(250,87,125,.8); }
.dash-eyebrow b { color: #8d7aa5; }
.dash-feature-copy h2 { margin: 10px 0 7px; color: white; font: 700 clamp(25px,3vw,39px)/1.03 var(--display); letter-spacing: -.06em; }
.dash-feature-copy p { margin: 0; color: rgba(240,232,248,.68); font-size: 8px; line-height: 1.6; }
.dash-play { min-height: 29px; display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 0 11px; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; background: #f6f2ff; color: #16101f; font-size: 7px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.dash-play:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(185,145,255,.25); }
.dash-feature-meta { position: absolute; right: 13px; bottom: 11px; left: 13px; display: flex; justify-content: space-between; color: rgba(230,218,247,.56); font-size: 6px; letter-spacing: .12em; }
.dash-feature-meta b { padding: 0 4px; color: #b38bfa; }
.dash-bottom-row { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(215px,.85fr); gap: 18px; margin-top: 19px; }
.dash-row-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dash-row-title strong { color: #ece5f7; font-size: 9px; font-weight: 600; }
.dash-row-title a { color: #8e79a9; font-size: 7px; }
.dash-row-title a span { margin-left: 3px; color: #c09cff; }
.mini-programs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.mini-program { position: relative; min-width: 0; overflow: hidden; padding-bottom: 7px; border: 1px solid rgba(197,166,246,.14); border-radius: 6px; background: #100c18; }
.mini-program img { width: 100%; aspect-ratio: 1.75; object-fit: cover; opacity: .84; }
.mini-program-label { position: absolute; top: 5px; left: 5px; padding: 3px 4px; border: 1px solid rgba(245,232,255,.16); border-radius: 3px; background: rgba(10,6,15,.65); color: #e1d6ef; font-size: 5px; letter-spacing: .1em; }
.mini-program-label i { width: 4px; height: 4px; display: inline-block; margin-right: 3px; border-radius: 50%; background: #ff5d7c; }
.mini-program > strong, .mini-program > small { display: block; overflow: hidden; margin: 6px 7px 0; text-overflow: ellipsis; white-space: nowrap; }
.mini-program > strong { color: #e7e0ef; font-size: 7px; font-weight: 600; }
.mini-program > small { margin-top: 3px; color: #837a8e; font-size: 6px; }
.dash-queue { min-width: 0; }
.queue-card { display: flex; align-items: center; gap: 9px; min-height: 66px; padding: 7px; border: 1px solid rgba(196,171,242,.15); border-radius: 6px; background: linear-gradient(110deg, rgba(44,27,64,.54), rgba(13,10,18,.84)); }
.queue-art { width: 58px; height: 48px; flex: none; border-radius: 4px; background: url('/assets/series-orbit.webp') center/cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.queue-copy { min-width: 0; flex: 1; }
.queue-copy b, .queue-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-copy b { color: #e9e0f2; font-size: 7px; font-weight: 600; }
.queue-copy small { margin-top: 4px; color: #8b8294; font-size: 6px; }
.queue-copy > i { display: block; height: 2px; margin-top: 7px; border-radius: 3px; background: rgba(255,255,255,.15); }
.queue-copy > i em { width: 46%; height: 100%; display: block; border-radius: inherit; background: #a778ff; box-shadow: 0 0 8px rgba(167,120,255,.6); }
.queue-play { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border: 1px solid rgba(197,166,246,.24); border-radius: 50%; color: #d5c0fa; font-size: 7px; }
.queue-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #82788d; font-size: 6px; }
.quality-chip { padding: 3px 4px; border: 1px solid rgba(179,143,240,.3); border-radius: 3px; color: #cbb0ff; font-size: 6px; font-weight: 700; }
.dashboard-shadow { position: absolute; z-index: -1; bottom: -27px; left: 14%; width: 72%; height: 68px; border-radius: 50%; background: rgba(115,63,188,.33); filter: blur(42px); }
.dashboard-orbit { position: absolute; z-index: -2; left: 50%; top: 22%; width: 116%; height: 78%; border: 1px solid rgba(195,153,255,.07); border-radius: 50%; transform: translateX(-50%) rotate(-8deg); pointer-events: none; }
.orbit-two { width: 125%; height: 88%; border-color: rgba(195,153,255,.04); transform: translateX(-50%) rotate(8deg); }
.hero-bottom-glow { position: absolute; z-index: 0; right: 0; bottom: -80px; left: 0; height: 170px; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(89,45,151,.35), transparent 70%); }

.channel-band { position: relative; padding: 58px 0 63px; overflow: hidden; border-top: 1px solid rgba(182,147,241,.11); border-bottom: 1px solid rgba(182,147,241,.1); background: radial-gradient(ellipse at 50% 106%, rgba(96,49,157,.33), transparent 72%), linear-gradient(110deg, #0d0915, #130c20 48%, #0d0916); }
.channel-band::after { content: ""; position: absolute; right: -5%; bottom: -63px; left: -5%; height: 110px; border-top: 1px solid rgba(178,137,249,.16); border-radius: 50%; transform: perspective(250px) rotateX(9deg); box-shadow: 0 -13px 44px rgba(127,69,202,.07); }
.channel-band-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 28px; }
.channel-band-copy { display: flex; flex-direction: column; gap: 8px; }
.micro-label { display: block; color: #857b97; font-size: 7px; letter-spacing: .18em; font-weight: 700; }
.channel-band-copy strong { color: white; font: 600 20px/1.08 var(--display); letter-spacing: -.05em; }
.channel-chip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.channel-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(204,181,255,.16); border-radius: 7px; background: linear-gradient(135deg, rgba(36,27,50,.83), rgba(18,14,26,.86)); color: #d7cee4; font-size: 8px; box-shadow: inset 0 1px rgba(255,255,255,.045); transition: border-color .2s, transform .2s, background .2s; }
.channel-chip:hover { border-color: rgba(199,158,255,.45); background: rgba(102,61,156,.27); transform: translateY(-2px); }
.chip-symbol { color: #c6a1ff; font-size: 13px; text-shadow: 0 0 12px rgba(169,111,255,.52); }

.features-section { background: radial-gradient(ellipse at 8% 53%, rgba(62,34,94,.16), transparent 54%), #07060c; }
.section-heading h2 { margin: 13px 0 0; color: #fbf9ff; font: 600 clamp(36px,4.2vw,53px)/1.08 var(--display); letter-spacing: -.065em; }
.section-heading h2 span, .devices-copy h2 span, .proof-copy h2 span, .pricing-heading h2 span, .faq-intro h2 span, .closing-inner h2 span, .newsletter-inner h2 span { color: #bb96ff; }
.eyebrow { color: #b2a4c5; font-size: 7px; letter-spacing: .17em; }
.eyebrow-line { width: 18px; height: 1px; display: inline-block; background: linear-gradient(90deg, #c09bff, rgba(192,155,255,.28)); box-shadow: 0 0 8px rgba(171,114,255,.4); }
.centered-heading { max-width: 580px; margin: 0 auto 47px; text-align: center; }
.centered-heading .eyebrow { justify-content: center; }
.centered-heading > p { max-width: 430px; margin: 16px auto 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.feature-card { position: relative; min-height: 248px; overflow: hidden; padding: 25px 24px 23px; border: 1px solid rgba(184,150,244,.19); border-radius: 15px; background: radial-gradient(ellipse at 72% 116%, rgba(108,55,168,.32), transparent 60%), linear-gradient(145deg, rgba(31,21,47,.98), rgba(11,9,17,.98) 64%); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 10px 38px rgba(0,0,0,.16); transition: border-color .25s, transform .25s, box-shadow .25s; }
.feature-card::before { content: ""; position: absolute; top: 24px; right: 0; left: 59px; height: 1px; background: linear-gradient(90deg, rgba(181,140,248,.56), rgba(181,140,248,.03)); }
.feature-card::after { content: ""; position: absolute; right: -62px; bottom: -105px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(133,73,204,.15), transparent 69%); pointer-events: none; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(199,161,255,.48); box-shadow: inset 0 1px rgba(255,255,255,.075), 0 16px 45px rgba(0,0,0,.28), 0 0 28px rgba(117,62,188,.1); }
.feature-orb { position: relative; z-index: 1; width: 41px; height: 41px; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid rgba(197,165,255,.34); border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(165,111,246,.27), rgba(38,24,58,.55) 64%); box-shadow: 0 0 0 5px rgba(151,104,222,.055), inset 0 1px rgba(255,255,255,.12), 0 0 21px rgba(142,80,220,.19); color: #d0afff; font-size: 18px; }
.feature-index { display: block; margin-bottom: 8px; color: #9c8bae; font-size: 6px; letter-spacing: .15em; font-weight: 700; }
.feature-card h3 { position: relative; z-index: 1; margin: 0 0 8px; color: #f7f2ff; font: 600 16px/1.25 var(--display); letter-spacing: -.035em; }
.feature-card p { position: relative; z-index: 1; max-width: 295px; min-height: 41px; margin: 0; color: #a49aad; font-size: 9px; line-height: 1.72; }
.feature-card > a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; color: #d3b8ff; font-size: 8px; font-weight: 600; }
.feature-card > a span { font-size: 12px; transition: transform .2s; }
.feature-card > a:hover span { transform: translate(2px,-2px); }

.devices-section { overflow: hidden; background: radial-gradient(ellipse at 13% 44%, rgba(76,39,120,.21), transparent 49%), linear-gradient(105deg, #090710, #08070d 48%, #0c0913); }
.devices-layout { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 75px; }
.devices-copy { max-width: 420px; }
.devices-copy h2, .proof-copy h2, .faq-intro h2 { margin: 15px 0 14px; color: #fbf9ff; font: 600 clamp(35px,4vw,49px)/1.08 var(--display); letter-spacing: -.064em; }
.devices-copy > p, .faq-intro > p { max-width: 390px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.85; }
.device-list { display: grid; gap: 15px; margin: 25px 0 25px; padding: 0; list-style: none; }
.device-list li { display: flex; align-items: flex-start; gap: 11px; }
.list-orb { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border: 1px solid rgba(190,151,251,.26); border-radius: 50%; background: rgba(129,76,188,.13); color: #c5a2ff; font-size: 6px; }
.device-list strong, .device-list small { display: block; }
.device-list strong { color: #eee8f5; font-size: 9px; font-weight: 600; }
.device-list small { margin-top: 4px; color: #8f8799; font-size: 8px; line-height: 1.55; }
.device-compatibility { padding-top: 16px; border-top: 1px solid rgba(191,164,236,.13); }
.compatibility-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.compatibility-list span { padding: 7px 8px; border: 1px solid rgba(199,174,242,.16); border-radius: 5px; background: rgba(255,255,255,.025); color: #c2b7ce; font-size: 7px; }
.devices-art { position: relative; min-height: 390px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.devices-art-glow { position: absolute; z-index: -1; width: 82%; height: 74%; border-radius: 50%; background: radial-gradient(ellipse at 60% 48%, rgba(143,83,220,.25), rgba(76,37,114,.08) 50%, transparent 74%); filter: blur(21px); }
.devices-art > img { width: min(100%, 540px); aspect-ratio: 4/3; object-fit: cover; border: 1px solid rgba(195,161,248,.32); border-radius: 15px; box-shadow: 0 24px 75px rgba(0,0,0,.44), 0 0 35px rgba(115,66,181,.17); }
.devices-art::after { content: ""; position: absolute; z-index: -1; right: -18px; bottom: 25px; width: 65%; height: 38%; border: 1px solid rgba(191,155,255,.2); border-radius: 14px; background: rgba(30,18,44,.27); }
.devices-caption { position: absolute; right: -10px; bottom: 4px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(209,183,255,.22); border-radius: 8px; background: linear-gradient(130deg, rgba(33,23,49,.93), rgba(12,9,18,.93)); box-shadow: 0 12px 32px rgba(0,0,0,.36); backdrop-filter: blur(14px); }
.caption-mark { color: #c6a0ff; font-size: 15px; }
.devices-caption b, .devices-caption small { display: block; }
.devices-caption b { color: #eee6fa; font-size: 8px; }
.devices-caption small { margin-top: 3px; color: #877d93; font-size: 7px; }
.caption-wave { margin-left: 8px; color: #ad88ef; font-size: 18px; }
.art-index { position: absolute; top: 20px; right: 20px; color: rgba(242,229,255,.72); font-size: 6px; letter-spacing: .15em; }

.proof-section { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0; border-block: 1px solid rgba(186,150,241,.12); background: radial-gradient(ellipse at 91% 58%, rgba(103,54,164,.38), transparent 46%), radial-gradient(ellipse at 11% 53%, rgba(83,40,134,.25), transparent 43%), linear-gradient(104deg, #110b1b, #0c0913 52%, #130b20); }
.proof-section::before { z-index: -1; opacity: .18; }
.proof-ambient { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, rgba(115,61,188,.07), transparent 37%, rgba(111,56,173,.1)); }
.proof-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.proof-copy h2 { font-size: clamp(35px,3.7vw,47px); }
.proof-copy > p { max-width: 380px; margin: 0; color: #a49aad; font-size: 10px; line-height: 1.8; }
.proof-symbols { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 23px; color: #b5a9c2; font-size: 6px; letter-spacing: .13em; }
.proof-symbols i { width: 3px; height: 3px; border-radius: 50%; background: #a277ea; box-shadow: 0 0 8px #a277ea; }
.quote-card { position: relative; margin: 0; padding: 27px 29px 19px; border: 1px solid rgba(197,166,246,.22); border-radius: 12px; background: linear-gradient(135deg, rgba(48,31,69,.75), rgba(13,10,19,.91) 66%); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 20px 54px rgba(0,0,0,.22); }
.quote-glint { position: absolute; top: 13px; right: 22px; color: rgba(177,127,255,.4); font: 58px/1 Georgia,serif; }
.quote-card blockquote { position: relative; max-width: 500px; margin: 0 32px 22px 0; color: #f4effb; font: 500 clamp(15px,1.65vw,21px)/1.5 var(--display); letter-spacing: -.025em; }
.quote-card figcaption { display: flex; align-items: center; gap: 9px; padding-bottom: 17px; }
.person-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(200,163,255,.38); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #9263c2, #261930 72%); color: #f4eaff; font-size: 8px; }
.quote-card figcaption strong, .quote-card figcaption small { display: block; }
.quote-card figcaption strong { color: #e6def0; font-size: 8px; }
.quote-card figcaption small { margin-top: 3px; color: #887e92; font-size: 7px; }
.sample-tag { margin-left: auto; padding: 5px 7px; border: 1px solid rgba(187,152,237,.19); border-radius: 4px; color: #a897ba; font-size: 5px; letter-spacing: .12em; }
.quote-controls { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(198,174,242,.12); color: #90859a; font-size: 7px; }
.quote-progress { height: 2px; flex: 1; background: rgba(231,216,255,.12); }
.quote-progress i { width: 35%; height: 100%; display: block; background: linear-gradient(90deg, #7d4aca, #c197ff); box-shadow: 0 0 9px rgba(177,123,255,.55); transition: width .25s; }
.quote-arrow { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(205,177,249,.2); border-radius: 50%; background: rgba(255,255,255,.025); color: #d5c1ef; cursor: pointer; transition: background .2s; }
.quote-arrow:hover { background: rgba(151,98,218,.2); }

.discover-section { background: radial-gradient(ellipse at 99% 41%, rgba(64,36,95,.16), transparent 46%), #07060c; }
.heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.heading-aside { width: 290px; padding-bottom: 5px; }
.heading-aside p { margin: 0 0 15px; color: #a49aad; font-size: 9px; line-height: 1.75; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #d2b5ff; font-size: 8px; font-weight: 600; }
.text-link span { font-size: 13px; transition: transform .2s; }
.text-link:hover span { transform: translateX(3px); }
.content-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 17px; padding-bottom: 12px; border-bottom: 1px solid rgba(194,164,237,.13); }
.content-tabs { display: flex; align-items: center; gap: 5px; }
.content-tab { padding: 8px 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #93899e; font-size: 8px; font-weight: 600; cursor: pointer; transition: background .2s,color .2s,border-color .2s; }
.content-tab:hover { color: white; background: rgba(149,97,213,.1); }
.content-tab.is-active { border-color: rgba(191,149,251,.34); background: linear-gradient(120deg, rgba(134,80,205,.52), rgba(70,41,105,.28)); color: white; box-shadow: 0 0 18px rgba(112,60,177,.17); }
.toolbar-note { display: inline-flex; align-items: center; gap: 8px; color: #82798c; font-size: 7px; }
.toolbar-note .signal-dot { width: 5px; height: 5px; }
.story-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.story-card { min-width: 0; }
.story-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1.68; border: 1px solid rgba(186,152,240,.21); border-radius: 9px; background: #100c17; box-shadow: 0 13px 30px rgba(0,0,0,.22); isolation: isolate; }
.story-art img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.75,.25,1),filter .35s; filter: saturate(.88); }
.story-card:hover .story-art img { transform: scale(1.045); filter: saturate(1.08); }
.story-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5,3,9,.08), rgba(8,5,12,.09) 42%, rgba(6,4,9,.63)); }
.story-category { position: absolute; top: 11px; left: 11px; padding: 5px 7px; border: 1px solid rgba(233,219,255,.22); border-radius: 4px; background: rgba(11,7,16,.62); color: #e2d6f0; font-size: 6px; letter-spacing: .12em; backdrop-filter: blur(8px); }
.story-live { display: inline-flex; align-items: center; gap: 5px; }
.story-play { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; display: grid; place-items: center; padding-left: 2px; border: 1px solid rgba(238,221,255,.5); border-radius: 50%; background: rgba(17,9,26,.35); color: white; font-size: 7px; opacity: .85; backdrop-filter: blur(7px); }
.story-copy { position: relative; padding: 14px 34px 5px 1px; }
.story-number { color: #a38dac; font-size: 6px; letter-spacing: .15em; font-weight: 700; }
.story-copy h3 { margin: 7px 0 5px; color: #f0eaf6; font: 500 14px/1.35 var(--display); letter-spacing: -.025em; }
.story-copy p { max-width: 270px; margin: 0; color: #968d9f; font-size: 8px; line-height: 1.65; }
.round-link { position: absolute; right: 0; bottom: 8px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(193,159,239,.21); border-radius: 50%; color: #cfb2fa; font-size: 10px; transition: background .2s; }
.round-link:hover { background: rgba(137,79,200,.25); }
.live-ribbon { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 12px 15px; border: 1px solid rgba(190,157,239,.18); border-radius: 7px; background: linear-gradient(100deg, rgba(50,31,68,.7), rgba(15,11,20,.86) 65%); }
.ribbon-live { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid rgba(248,95,126,.22); border-radius: 4px; background: rgba(115,30,56,.18); color: #ff9aad; font-size: 6px; letter-spacing: .09em; font-weight: 800; }
.ribbon-live i { width: 4px; height: 4px; border-radius: 50%; background: #fa5e7f; box-shadow: 0 0 7px rgba(255,93,128,.8); }
.live-ribbon > strong { color: #e8e0ef; font-size: 8px; font-weight: 600; }
.ribbon-copy { color: #8d8396; font-size: 7px; }
.ribbon-link { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #d0b1fb; font-size: 7px; font-weight: 600; }
.ribbon-link span { font-size: 12px; }

.pricing-section { background: radial-gradient(ellipse at 50% 96%, rgba(78,41,123,.2), transparent 48%), #08070e; }
.pricing-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.pricing-heading h2 { font-size: clamp(34px,3.8vw,48px); }
.billing-control { display: flex; align-items: center; gap: 3px; padding: 4px; border: 0; border-radius: 999px; background: rgba(255,255,255,.055); }
.billing-option { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #aaa0b6; font-size: 10px; font-weight: 600; cursor: pointer; }
.billing-option.is-selected { background: linear-gradient(130deg, #8154ce, #563590); color: white; box-shadow: none; }
.billing-option span { margin-left: 4px; color: #e0cdff; font-size: 9px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.price-card { position: relative; overflow: hidden; padding: 31px 28px 29px; border: 0; border-radius: 18px; background: linear-gradient(145deg, rgba(31,24,42,.82), rgba(11,9,16,.98) 72%); box-shadow: 0 20px 52px rgba(0,0,0,.24); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.32); }
.price-card-featured { transform: translateY(-6px); background: radial-gradient(ellipse at 50% 0, rgba(144,91,223,.28), transparent 55%), linear-gradient(148deg, rgba(38,25,59,.98), rgba(12,9,17,.98) 70%); box-shadow: 0 0 48px rgba(120,67,182,.17), 0 22px 58px rgba(0,0,0,.3); }
.plan-overline { color: #b99adc; font-size: 9px; letter-spacing: .14em; font-weight: 700; }
.price-card h3 { margin: 13px 0 6px; color: #f7f2fc; font: 600 26px var(--display); letter-spacing: -.05em; }
.plan-desc { margin: 0; color: #aaa0b4; font-size: 12px; }
.price { display: flex; align-items: baseline; margin-top: 27px; }
.currency { margin-right: 4px; color: #d1b8f2; font-size: 16px; }
.price strong { color: #fff; font: 600 47px/1 var(--display); letter-spacing: -.07em; }
.price-period { margin-left: 7px; color: #a399ad; font-size: 11px; }
.billing-note { margin: 8px 0 19px; color: #958ba0; font-size: 10px; }
.price-card .button-outline { width: 100%; min-height: 45px; justify-content: space-between; padding-inline: 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: #f2eafa; font-size: 11px; }
.price-card .button-outline:hover { border: 0; background: rgba(151,105,207,.22); }
.price-card .price-cta { width: 100%; min-height: 45px; justify-content: space-between; border: 0; border-radius: 999px; font-size: 11px; }
.popular-badge { position: absolute; top: 23px; right: 23px; padding: 7px 10px; border-radius: 999px; background: rgba(162,116,237,.17); color: #dfcbff; text-align: center; font-size: 8px; letter-spacing: .08em; font-weight: 700; }
.plan-features { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; border: 0; list-style: none; }
.plan-features li { position: relative; padding-left: 18px; color: #c0b7cb; font-size: 10px; line-height: 1.5; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: #c3a2fa; font-size: 11px; }
.pricing-footnote { margin: 20px 0 0; color: #91889a; text-align: center; font-size: 9px; }
.pricing-footnote span { margin-right: 4px; color: #b790f5; }

.faq-section { background: radial-gradient(ellipse at 93% 55%, rgba(57,32,88,.18), transparent 47%), #07060c; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 88px; }
.faq-intro h2 { font-size: clamp(34px,3.7vw,46px); }
.faq-intro > p { margin-bottom: 16px; }
.faq-list { border-top: 1px solid rgba(196,169,238,.19); }
.faq-item { border-bottom: 1px solid rgba(196,169,238,.15); }
.faq-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; color: #ece5f2; font-size: 9px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 19px; height: 19px; flex: none; border: 1px solid rgba(191,157,240,.25); border-radius: 50%; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; top: 8px; left: 5px; width: 7px; height: 1px; background: #c1a0f0; transition: transform .2s; }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-item p { max-width: 680px; margin: -2px 35px 17px 2px; color: #a198aa; font-size: 8px; line-height: 1.8; }

.closing-section { position: relative; isolation: isolate; overflow: hidden; padding: 60px 0; border-block: 1px solid rgba(197,161,246,.16); background: linear-gradient(100deg, #140c20, #0d0913 45%, #1a0f29); }
.closing-atmosphere { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 82% 48%, rgba(150,91,222,.28), transparent 39%), radial-gradient(ellipse at 12% 120%, rgba(96,47,146,.22), transparent 54%); }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.closing-inner h2 { margin: 11px 0 6px; color: white; font: 600 clamp(29px,3.3vw,41px)/1.08 var(--display); letter-spacing: -.06em; }
.closing-inner p { margin: 0; color: #a79bad; font-size: 8px; }
.closing-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.closing-actions small { color: #91859d; font-size: 7px; }

.newsletter-section { position: relative; padding: 54px 0; overflow: hidden; background: radial-gradient(ellipse at 85% 50%, rgba(100,56,154,.17), transparent 43%), #090710; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.newsletter-inner h2 { margin: 9px 0 5px; color: #f8f4ff; font: 600 clamp(24px,3vw,35px)/1.12 var(--display); letter-spacing: -.055em; }
.newsletter-inner p { margin: 0; color: #978da1; font-size: 8px; }
.newsletter-form { position: relative; width: min(100%, 410px); display: flex; align-items: center; gap: 7px; padding: 4px; border: 1px solid rgba(198,168,244,.25); border-radius: 8px; background: rgba(4,3,8,.38); }
.newsletter-form input { min-width: 0; flex: 1; height: 35px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: white; font-size: 8px; }
.newsletter-form input::placeholder { color: #847b8d; }
.newsletter-form input:focus-visible { outline: 1px solid rgba(193,151,255,.65); outline-offset: -2px; border-radius: 4px; }
.newsletter-form button { min-height: 34px; display: inline-flex; align-items: center; gap: 12px; padding: 0 13px; border: 1px solid rgba(197,158,255,.23); border-radius: 6px; background: linear-gradient(130deg,#8655d0,#56338c); color: white; font-size: 7px; font-weight: 600; cursor: pointer; }
.newsletter-form button span { font-size: 12px; }
.newsletter-feedback { position: absolute; top: calc(100% + 7px); left: 5px; color: #c6a9ed; font-size: 7px; }

.site-footer { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid rgba(193,162,237,.13); background: radial-gradient(ellipse at 20% 112%, rgba(100,50,157,.24), transparent 52%), #07060c; }
.site-footer::before { z-index: -1; opacity: .12; }
.footer-main { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 35px; padding-top: 42px; padding-bottom: 34px; }
.brand-footer .brand-mark { width: 23px; height: 23px; }
.brand-footer .brand-word { font-size: 18px; }
.footer-brand > p { margin: 12px 0; color: #92889b; font-size: 8px; line-height: 1.7; }
.social-links { display: flex; gap: 6px; }
.social-links a { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(197,166,239,.15); border-radius: 50%; color: #b8a8c9; font-size: 7px; }
.social-links a:hover { border-color: rgba(200,161,255,.44); color: white; }
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-column strong { margin-bottom: 3px; color: #e8e1f0; font-size: 8px; font-weight: 600; }
.footer-column a { color: #92889b; font-size: 7px; transition: color .2s; }
.footer-column a:hover { color: #d2b7f5; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-top: 1px solid rgba(195,168,238,.12); color: #7e7589; font-size: 6px; }
.footer-bottom > a { color: #ae9abc; }
.footer-location { display: inline-flex; align-items: center; gap: 6px; }
.footer-location i { width: 5px; height: 5px; border-radius: 50%; background: #a77ae8; box-shadow: 0 0 8px rgba(167,122,232,.75); }
.site-disclaimer { padding: 0 0 16px; color: #726a7b; font-size: 6px; line-height: 1.5; }

.preview-dialog { width: min(620px, calc(100% - 30px)); overflow: hidden; padding: 0; border: 1px solid rgba(202,168,249,.35); border-radius: 13px; background: #0b0810; color: white; box-shadow: 0 25px 90px rgba(0,0,0,.72), 0 0 40px rgba(123,65,193,.18); }
.preview-dialog::backdrop { background: rgba(1,0,4,.82); backdrop-filter: blur(7px); }
.preview-dialog > img { width: 100%; max-height: 300px; object-fit: cover; }
.dialog-content { padding: 22px 24px 25px; }
.dialog-content h2 { margin: 10px 0 6px; color: white; font: 600 24px var(--display); letter-spacing: -.04em; }
.dialog-content p { margin: 0 0 16px; color: #b0a5ba; font-size: 9px; line-height: 1.7; }
.dialog-close { position: absolute; z-index: 2; top: 11px; right: 11px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.31); border-radius: 50%; background: rgba(8,5,13,.56); color: white; font-size: 17px; cursor: pointer; }

:focus-visible { outline: 2px solid #c8a4ff; outline-offset: 3px; }
[hidden] { display: none !important; }

@media (max-width: 980px) {
  .wrap { width: min(var(--wrap), calc(100% - 48px)); }
  .nav-links { gap: 20px; margin-left: 28px; }
  .dashboard-frame { grid-template-columns: 150px minmax(0,1fr); }
  .dash-sidebar { padding-inline: 10px; }
  .dash-main { padding-inline: 15px; }
  .dash-bottom-row { grid-template-columns: minmax(0,1.4fr) minmax(185px,.9fr); gap: 12px; }
  .devices-layout { gap: 42px; }
  .proof-layout { gap: 46px; }
  .faq-layout { gap: 52px; }
}

@media (max-width: 720px) {
  body { padding: 0; }
  .site-frame { border-radius: 0; border-inline: 0; }
  .wrap { width: calc(100% - 38px); }
  .section { padding: 76px 0; }
  .site-nav { height: 68px; }
  .nav-actions { margin-left: auto; margin-right: 15px; }
  .nav-login { display: none; }
  .button-nav { min-height: 34px; padding-inline: 10px; font-size: 8px; }
  .menu-toggle { width: 34px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(205,181,245,.2); border-radius: 7px; background: rgba(255,255,255,.025); cursor: pointer; }
  .menu-toggle span { width: 13px; height: 1px; display: block; background: #efe6fc; transition: transform .2s; }
  .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); }
  .nav-links { position: absolute; top: 60px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px; border: 1px solid rgba(198,164,248,.23); border-radius: 9px; background: rgba(12,8,18,.97); box-shadow: 0 15px 38px rgba(0,0,0,.5); backdrop-filter: blur(18px); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 10px; border-radius: 5px; font-size: 10px; }
  .nav-links a:hover { background: rgba(138,82,196,.15); }
  .hero { padding-bottom: 68px; }
  .hero-copy { padding-top: 53px; }
  .hero h1 { margin-top: 19px; font-size: clamp(43px,11vw,62px); }
  .hero-copy > p { max-width: 385px; font-size: 10px; }
  .hero-actions { gap: 8px; margin-top: 19px; }
  .hero-actions .button { min-height: 40px; padding-inline: 12px; font-size: 8px; }
  .hero-dashboard { width: calc(100% - 24px); margin-top: 34px; }
  .dashboard-frame { grid-template-columns: 1fr; min-height: auto; border-radius: 11px; }
  .dash-sidebar { display: none; }
  .dash-main { padding: 0 10px 12px; }
  .dash-topbar { min-height: 44px; }
  .dash-crumb { font-size: 7px; }
  .dash-search { padding: 6px 7px; }
  .dash-search span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-feature { min-height: 177px; margin-top: 11px; border-radius: 7px; }
  .dash-feature-copy { left: 6%; width: 63%; }
  .dash-feature-copy h2 { font-size: clamp(19px,5.5vw,27px); }
  .dash-feature-copy p { font-size: 6px; }
  .dash-eyebrow { font-size: 5px; }
  .dash-play { min-height: 24px; margin-top: 9px; font-size: 6px; }
  .dash-feature-meta { font-size: 5px; }
  .dash-bottom-row { grid-template-columns: minmax(0,1fr); gap: 13px; margin-top: 12px; }
  .dash-queue { display: none; }
  .dash-row-title { margin-bottom: 7px; }
  .dash-row-title strong { font-size: 7px; }
  .dash-row-title a { font-size: 6px; }
  .mini-programs { gap: 6px; }
  .mini-program { border-radius: 4px; }
  .mini-program > strong { margin-inline: 5px; font-size: 6px; }
  .mini-program > small { margin-inline: 5px; font-size: 5px; }
  .mini-program-label { top: 4px; left: 4px; font-size: 4px; }
  .channel-band { padding: 37px 0 41px; }
  .channel-band-inner { grid-template-columns: 1fr; gap: 15px; }
  .channel-band-copy { flex-direction: row; align-items: end; justify-content: space-between; }
  .channel-band-copy strong { font-size: 17px; text-align: right; }
  .channel-chip-list { justify-content: flex-start; gap: 6px; }
  .channel-chip { min-height: 32px; gap: 6px; padding-inline: 8px; font-size: 6px; }
  .chip-symbol { font-size: 10px; }
  .centered-heading { margin-bottom: 32px; }
  .section-heading h2 { font-size: clamp(33px,8vw,43px); }
  .centered-heading > p { font-size: 9px; }
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .feature-card { min-height: 220px; padding: 16px 13px 15px; border-radius: 10px; }
  .feature-card::before { top: 20px; left: 51px; }
  .feature-orb { width: 34px; height: 34px; margin-bottom: 15px; font-size: 15px; }
  .feature-index { font-size: 5px; }
  .feature-card h3 { font-size: 12px; }
  .feature-card p { min-height: 57px; font-size: 7px; }
  .feature-card > a { gap: 5px; margin-top: 12px; font-size: 6px; }
  .devices-layout { grid-template-columns: 1fr; gap: 28px; }
  .devices-copy { max-width: none; }
  .devices-copy h2, .proof-copy h2, .faq-intro h2 { font-size: clamp(34px,8vw,43px); }
  .devices-copy > p, .faq-intro > p { font-size: 9px; }
  .device-list { gap: 12px; margin: 19px 0; }
  .devices-art { min-height: 250px; }
  .devices-art > img { width: 93%; border-radius: 9px; }
  .devices-caption { right: 0; bottom: -1px; padding: 8px 10px; }
  .proof-section { padding: 64px 0; }
  .proof-layout { grid-template-columns: 1fr; gap: 28px; }
  .proof-copy > p { font-size: 9px; }
  .quote-card { padding: 21px 17px 14px; }
  .quote-card blockquote { font-size: 15px; }
  .heading-row { align-items: flex-start; flex-direction: column; gap: 15px; }
  .heading-aside { width: auto; max-width: 400px; }
  .heading-aside p { margin-bottom: 8px; font-size: 8px; }
  .content-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 23px; }
  .content-tabs { width: 100%; overflow-x: auto; }
  .content-tab { flex: none; padding-inline: 8px; font-size: 7px; }
  .toolbar-note { font-size: 6px; }
  .story-grid { grid-template-columns: 1fr; gap: 21px; }
  .story-art { aspect-ratio: 1.68; }
  .story-copy { padding-top: 10px; }
  .story-copy h3 { font-size: 13px; }
  .story-copy p { font-size: 7px; }
  .live-ribbon { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .live-ribbon > strong { font-size: 7px; }
  .ribbon-copy { width: 100%; order: 3; font-size: 6px; }
  .ribbon-link { margin-left: auto; font-size: 6px; }
  .pricing-heading { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 24px; }
  .pricing-heading h2 { font-size: clamp(33px,8vw,42px); }
  .pricing-grid { grid-template-columns: 1fr; gap: 11px; }
  .price-card { padding: 26px 23px; border-radius: 16px; }
  .price-card-featured { order: -1; transform: none; }
  .plan-features { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; }
  .faq-layout { grid-template-columns: 1fr; gap: 25px; }
  .faq-item summary { padding: 14px 1px; font-size: 8px; }
  .faq-item p { font-size: 7px; }
  .closing-inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .closing-inner h2 { font-size: 34px; }
  .newsletter-inner { align-items: flex-start; flex-direction: column; gap: 19px; }
  .newsletter-form { width: 100%; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; padding-top: 33px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; justify-content: flex-start; font-size: 6px; }
  .footer-location { order: 3; width: 100%; }
  .site-disclaimer { font-size: 5px; }
}

@media (max-width: 390px) {
  .wrap { width: calc(100% - 30px); }
  .nav-actions { margin-right: 9px; }
  .button-nav { padding-inline: 7px; font-size: 7px; }
  .hero-actions .button { gap: 7px; padding-inline: 9px; font-size: 7px; }
  .feature-card { padding-inline: 11px; }
  .content-tab { padding-inline: 6px; }
  .compatibility-list span { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}