:root {
  color-scheme: dark;
  --bg: #05070b;
  --bg-soft: #0a0e15;
  --surface: #0d121b;
  --surface-2: #111824;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f7f9fc;
  --muted: #9ca7b8;
  --blue: #2176ff;
  --blue-light: #54a0ff;
  --blue-dark: #0a49b8;
  --radius: 22px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); line-height: 1.6; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 20;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: white; color: black; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.scrolled { background: rgba(5, 7, 11, .86); border-color: var(--line); backdrop-filter: blur(18px); }
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 11px; align-items: center; font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.brand > span:last-child > span, .mini-brand span { color: var(--blue-light); }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: linear-gradient(135deg, var(--blue-light), var(--blue-dark)); color: white; box-shadow: 0 9px 25px rgba(33,118,255,.3); }
.primary-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; color: #c4ccda; }
.primary-nav > a:not(.button):hover { color: white; }
.menu-button { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.menu-button span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: white; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 25px; border: 1px solid var(--blue); border-radius: 10px; background: linear-gradient(135deg, var(--blue), #125bd8); color: white; font-size: 14px; font-weight: 750; box-shadow: 0 12px 32px rgba(33, 118, 255, .24); transition: transform .2s, filter .2s; }
.button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.button-small { min-height: 40px; padding-inline: 18px; }
.button-outline { background: transparent; border-color: #324052; box-shadow: none; }
.text-link { font-size: 14px; font-weight: 700; color: #d8deea; }
.text-link span { margin-left: 8px; color: var(--blue-light); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue-light); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.2px; }
.eyebrow > span { width: 26px; height: 2px; background: var(--blue); }

.hero { position: relative; min-height: 790px; display: grid; align-items: center; overflow: hidden; padding: 120px 0 80px; background: radial-gradient(circle at 75% 45%, rgba(21,62,134,.18), transparent 30%), linear-gradient(180deg, #070a10 0%, var(--bg) 100%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 55px; }
.hero h1, .section h2, .cta-section h2 { margin: 18px 0 24px; font-size: clamp(48px, 6.2vw, 79px); line-height: .99; letter-spacing: -4.2px; }
.hero h1 em, .device-copy h2 em { color: transparent; background: linear-gradient(90deg, #56a1ff, #1768ec); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-lead { max-width: 610px; margin: 0; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 35px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 35px; color: #b8c1cf; font-size: 13px; }
.hero-points i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: rgba(33,118,255,.15); color: var(--blue-light); font-style: normal; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .16; }
.hero-glow-one { width: 420px; height: 420px; top: -150px; left: -170px; background: var(--blue); }
.hero-glow-two { width: 300px; height: 300px; right: 2%; bottom: -160px; background: #174fa6; }

.hero-visual { position: relative; min-height: 465px; }
.screen { position: absolute; inset: 40px 0 auto 10px; height: 345px; padding: 26px 28px; overflow: hidden; border: 1px solid rgba(127,179,255,.28); border-radius: 22px; background: linear-gradient(130deg, #142b51, #07111f 56%, #102644); box-shadow: var(--shadow), 0 0 70px rgba(39,113,232,.12); transform: perspective(1100px) rotateY(-7deg) rotateX(2deg); }
.screen::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 76% 32%, rgba(91,162,255,.52), transparent 3%, rgba(33,118,255,.18) 25%, transparent 48%), linear-gradient(115deg, transparent 20%, rgba(71,135,240,.13) 52%, transparent 53%); }
.screen-shine { position:absolute; inset:0; background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.06) 40%, transparent 57%); }
.screen-top, .screen-content, .content-row { position: relative; z-index: 2; }
.screen-top { display:flex; justify-content:space-between; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.live-pill { color: #ff6572; }
.screen-content { margin-top: 65px; }
.screen-content p { margin:0 0 4px; color:#9bb9e8; font-size:11px; text-transform:uppercase; letter-spacing:2px; }
.screen-content strong { font-size:34px; line-height:1; letter-spacing:-1px; }
.play-button { display:grid; place-items:center; width:38px; height:38px; margin-top:17px; border-radius:50%; background:white; color:#0a1830; font-size:12px; }
.content-row { display:flex; gap:8px; margin-top:30px; }
.content-row span { width:75px; height:43px; border:1px solid rgba(255,255,255,.08); border-radius:5px; background:linear-gradient(135deg, #1e4d8d, #0c1c32); }
.content-row span:nth-child(2) { background:linear-gradient(135deg, #383e55, #151b28); }
.content-row span:nth-child(3) { background:linear-gradient(135deg, #265f78, #0b2433); }
.content-row span:nth-child(4) { background:linear-gradient(135deg, #503447, #271724); }
.floating-card { position:absolute; z-index:5; display:flex; align-items:center; gap:12px; min-width:185px; padding:13px 16px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(13,18,27,.9); box-shadow:0 17px 35px rgba(0,0,0,.38); backdrop-filter:blur(12px); }
.floating-card strong, .floating-card small { display:block; }
.floating-card strong { font-size:12px; }
.floating-card small { color:var(--muted); font-size:10px; }
.floating-icon { display:grid; place-items:center; width:37px; height:37px; border-radius:9px; background:rgba(33,118,255,.14); color:var(--blue-light); font-size:12px; font-weight:800; }
.floating-one { right:-15px; top:14px; }
.floating-two { left:-22px; bottom:13px; }
.scroll-cue { position:absolute; z-index:3; bottom:23px; left:50%; color:#7d8999; font-size:24px; animation:bob 2s infinite; }
@keyframes bob { 50% { transform:translateY(6px); } }

.trust-strip { border-block:1px solid var(--line); background:#070a0f; }
.trust-items { min-height:82px; display:flex; align-items:center; justify-content:space-around; gap:18px; color:#596473; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:2px; }
.trust-items i { width:3px; height:3px; border-radius:50%; background:#334052; }
.section { padding: 118px 0; }
.section-heading { max-width: 610px; margin-bottom: 48px; }
.section-heading.centred { margin-inline:auto; text-align:center; }
.section-heading.centred .eyebrow { justify-content:center; }
.section h2 { margin:14px 0 18px; font-size:clamp(38px,5vw,56px); letter-spacing:-2.8px; }
.section-heading > p:last-child, .device-copy > p, .faq-grid > div:first-child > p { color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.feature-card { position:relative; min-height:300px; overflow:hidden; padding:29px 25px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); transition:.25s; }
.feature-card:hover { border-color:rgba(73,145,255,.35); transform:translateY(-5px); }
.feature-card.featured { background:linear-gradient(145deg, rgba(34,107,220,.2), rgba(10,25,48,.25)); }
.feature-number { position:absolute; top:20px; right:20px; color:#35404e; font-size:11px; font-weight:800; }
.feature-icon { display:grid; place-items:center; width:48px; height:48px; margin:24px 0 40px; border:1px solid rgba(65,140,255,.35); border-radius:12px; background:rgba(33,118,255,.1); color:var(--blue-light); font-weight:900; }
.feature-card h3 { margin:0 0 10px; font-size:18px; }
.feature-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.card-line { position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--blue), transparent); opacity:0; transition:.25s; }
.feature-card:hover .card-line, .feature-card.featured .card-line { opacity:1; }

.device-section { background:linear-gradient(180deg, #080c12, #06090e); border-block:1px solid rgba(255,255,255,.04); }
.device-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:100px; }
.device-copy h2 { font-size:clamp(43px,5vw,64px); }
.tick-list { display:grid; gap:17px; padding:0; margin:34px 0 0; list-style:none; }
.tick-list li { display:flex; gap:14px; align-items:center; }
.tick-list li > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; background:rgba(33,118,255,.12); color:var(--blue-light); }
.tick-list strong, .tick-list small { display:block; }
.tick-list strong { font-size:14px; }
.tick-list small { color:var(--muted); font-size:12px; }
.device-art { position:relative; min-height:410px; }
.tv-device { position:absolute; inset:45px 0 auto 15px; height:285px; display:grid; place-items:center; border:8px solid #202834; border-bottom-width:17px; border-radius:18px; background:radial-gradient(circle at 60% 36%, #174e9b, #081529 53%, #070a11 80%); box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 80px rgba(30,102,219,.12); }
.tv-device::after { content:""; position:absolute; width:120px; height:38px; bottom:-47px; border-bottom:9px solid #242c37; clip-path:polygon(30% 0,70% 0,100% 100%,0 100%); }
.tv-device > span { font-size:34px; font-weight:900; letter-spacing:-2px; }
.tv-device > span em { color:var(--blue-light); font-style:normal; }
.tv-device i { position:absolute; width:42px; height:42px; border:1px solid rgba(255,255,255,.4); border-radius:50%; }
.tablet-device, .phone-device { position:absolute; z-index:3; display:grid; place-items:center; border:5px solid #28313d; background:linear-gradient(145deg, #164b92, #081425 70%); box-shadow:0 20px 45px rgba(0,0,0,.5); }
.tablet-device { width:185px; height:125px; left:-35px; bottom:10px; border-radius:13px; }
.phone-device { width:72px; height:145px; right:-15px; bottom:5px; border-radius:15px; }
.tablet-device span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:white; color:#0a1830; font-size:12px; }
.phone-device span { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; background:var(--blue); font-weight:900; }

.pricing-section { background:radial-gradient(circle at 50% 50%, rgba(23,73,150,.09), transparent 38%); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:18px; max-width:1040px; margin-inline:auto; }
.price-card { position:relative; display:flex; flex-direction:column; min-height:545px; padding:36px 32px 31px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(160deg, #0d121b, #090d13); }
.price-card.popular { border-color:rgba(53,131,255,.65); background:linear-gradient(160deg, rgba(22,68,139,.36), #0a1019 55%); box-shadow:0 25px 70px rgba(8,52,127,.19); transform:translateY(-12px); }
.popular-label { position:absolute; top:0; right:24px; padding:6px 13px; border-radius:0 0 7px 7px; background:var(--blue); font-size:9px; font-weight:900; letter-spacing:1.3px; }
.plan-name { margin:0 0 17px; color:#dce3ef; font-size:17px; font-weight:800; }
.price { display:flex; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:25px; }
.price span { margin:7px 3px 0 0; color:var(--blue-light); font-size:18px; font-weight:700; }
.price strong { font-size:54px; line-height:1; letter-spacing:-3px; }
.price small { align-self:flex-end; margin:0 0 6px 7px; color:var(--muted); }
.plan-description { min-height:66px; color:var(--muted); font-size:13px; }
.price-card ul { display:grid; gap:12px; padding:14px 0 30px; margin:0; list-style:none; color:#c6cfdd; font-size:13px; }
.price-card li span { margin-right:8px; color:var(--blue-light); }
.price-card .button { width:100%; margin-top:auto; }
.pricing-note { max-width:700px; margin:26px auto 0; color:#697587; font-size:12px; text-align:center; }

.faq-section { background:#070a0f; }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:100px; }
.faq-grid .text-link { display:inline-block; margin-top:22px; }
.accordion details { border-top:1px solid var(--line); }
.accordion details:last-child { border-bottom:1px solid var(--line); }
.accordion summary { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px 0; cursor:pointer; list-style:none; font-size:15px; font-weight:700; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary span { color:var(--blue-light); font-size:21px; transition:.2s; }
.accordion details[open] summary span { transform:rotate(45deg); }
.accordion details p { margin:-7px 45px 24px 0; color:var(--muted); font-size:13px; }

.cta-section { position:relative; overflow:hidden; padding:120px 0; text-align:center; background:linear-gradient(180deg, #071020, #05070b); }
.cta-section::before { content:""; position:absolute; width:700px; height:700px; left:50%; top:25%; transform:translate(-50%,-50%); border:1px solid rgba(65,133,239,.08); border-radius:50%; box-shadow:0 0 0 100px rgba(65,133,239,.025), 0 0 0 200px rgba(65,133,239,.018); }
.cta-content { position:relative; z-index:2; }
.cta-content .eyebrow { justify-content:center; }
.cta-section h2 { font-size:clamp(48px,6vw,72px); }
.cta-section p:not(.eyebrow) { max-width:530px; margin-inline:auto; color:var(--muted); }
.centred-actions { justify-content:center; }

footer { padding:70px 0 24px; border-top:1px solid var(--line); background:#040609; }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:55px; padding-bottom:55px; }
.footer-grid > div { display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:#788495; font-size:12px; }
.footer-grid > div:first-child p { max-width:270px; }
.footer-grid strong { margin-bottom:8px; color:#e1e7ef; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.footer-grid a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid var(--line); color:#4f5b6b; font-size:10px; }

@media (max-width: 960px) {
  .menu-button { display:block; }
  .primary-nav { position:absolute; inset:72px 20px auto; display:none; flex-direction:column; align-items:stretch; gap:0; padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(8,12,18,.98); box-shadow:var(--shadow); }
  .primary-nav.open { display:flex; }
  .primary-nav a { padding:12px 14px; }
  .primary-nav .button { margin-top:8px; }
  .hero { min-height:auto; padding-top:150px; }
  .hero-grid, .device-grid { grid-template-columns:1fr; gap:50px; }
  .hero-copy { text-align:center; }
  .hero-copy .eyebrow, .hero-actions, .hero-points { justify-content:center; }
  .hero-lead { margin-inline:auto; }
  .hero-visual { width:min(600px,100%); margin-inline:auto; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .device-grid { max-width:700px; }
  .device-art { margin-inline:30px; }
  .faq-grid { grid-template-columns:1fr; gap:45px; }
}

@media (max-width: 720px) {
  .container { width:min(100% - 28px, 1160px); }
  .nav-wrap { height:70px; }
  .hero { padding-top:120px; }
  .hero h1 { font-size:clamp(45px,14vw,64px); letter-spacing:-3px; }
  .hero-lead { font-size:16px; }
  .hero-actions { flex-direction:column; gap:17px; }
  .hero-actions .button { width:100%; }
  .hero-points { gap:10px 17px; font-size:11px; }
  .hero-visual { min-height:390px; }
  .screen { inset:35px 0 auto; height:285px; padding:20px; transform:none; }
  .screen-content { margin-top:47px; }
  .screen-content strong { font-size:28px; }
  .content-row { margin-top:22px; }
  .floating-card { min-width:156px; padding:10px; }
  .floating-one { right:-5px; top:8px; }
  .floating-two { left:-5px; bottom:15px; }
  .trust-items { min-height:66px; overflow:hidden; justify-content:flex-start; }
  .trust-items span:nth-of-type(n+4), .trust-items i:nth-of-type(n+4) { display:none; }
  .section { padding:82px 0; }
  .section-heading { margin-bottom:30px; }
  .section h2 { font-size:39px; letter-spacing:-2px; }
  .feature-grid, .pricing-grid { grid-template-columns:1fr; }
  .feature-card { min-height:260px; }
  .feature-icon { margin-bottom:27px; }
  .device-grid { gap:35px; }
  .device-art { min-height:310px; margin:0 15px; }
  .tv-device { inset:20px 0 auto; height:220px; }
  .tablet-device { width:140px; height:96px; left:-10px; }
  .phone-device { right:-5px; width:61px; height:124px; }
  .price-card, .price-card.popular { min-height:500px; transform:none; }
  .faq-grid { gap:30px; }
  .cta-section { padding:90px 0; }
  .cta-section h2 { font-size:47px; letter-spacing:-3px; }
  .centred-actions { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px 25px; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; }
}

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