:root { --ink:#101312; --paper:#eff1ea; --acid:#d9ff37; --orange:#ff5e32; --muted:#87918a; --line:#cbd0c7; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; } a { color:inherit; text-decoration:none; } .topline { min-height:31px; padding:7px 5vw; display:flex; justify-content:space-between; overflow:hidden; background:var(--acid); font:500 10px/1 'DM Mono', monospace; letter-spacing:.1em; } .site-header { height:86px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; background:var(--paper); } .brand { display:flex; align-items:center; gap:9px; font:800 16px/.75 'Barlow Condensed', sans-serif; letter-spacing:.05em; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--ink); border-radius:50%; font:800 14px 'Barlow Condensed', sans-serif; letter-spacing:0; } nav { display:flex; align-items:center; gap:30px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } nav a:not(.nav-cta) { opacity:.6; } nav a.active, nav a:hover { opacity:1; } .nav-cta, .button.primary { background:var(--ink); color:white; padding:14px 17px; } .nav-cta b, .button b { margin-left:15px; color:var(--acid); font-size:16px; } .menu-button { display:none; background:none; border:0; width:38px; height:38px; padding:8px; } .menu-button i { display:block; height:2px; background:var(--ink); margin:6px 0; }
.hero { min-height:650px; position:relative; overflow:hidden; background:var(--ink); color:white; padding:90px 10vw; display:flex; align-items:center; } .hero:before { content:""; position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(90deg,transparent 0 98px,#eff1ea 99px 100px), repeating-linear-gradient(0deg,transparent 0 98px,#eff1ea 99px 100px); mask-image:linear-gradient(100deg,#000,transparent 70%); } .signal { position:absolute; border:1px solid var(--acid); border-radius:50%; opacity:.6; } .signal-one { width:760px; height:760px; right:-220px; top:-240px; } .signal-two { width:490px; height:490px; right:-85px; top:-105px; border-color:var(--orange); } .hero-copy { max-width:720px; position:relative; z-index:1; } .eyebrow { margin:0 0 19px; color:var(--orange); font:500 11px/1 'DM Mono', monospace; letter-spacing:.13em; } h1,h2,h3 { margin:0; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.01em; } h1 { font-size:clamp(65px,10vw,138px); line-height:.78; } h1 em,h2 em { color:var(--acid); font-style:normal; } .hero-text { max-width:420px; margin:32px 0; color:#c5cec6; font-size:15px; line-height:1.7; } .actions { display:flex; gap:27px; align-items:center; } .button { display:inline-block; font:800 12px/1 Manrope,sans-serif; text-transform:uppercase; letter-spacing:.04em; } .text-button { color:white; border-bottom:1px solid #728077; padding-bottom:7px; } .text-button b { color:var(--acid); margin-left:9px; } .hero-panel { position:absolute; right:10vw; bottom:70px; z-index:1; width:210px; border-top:1px solid #819087; padding-top:13px; } .live-dot { color:var(--acid); text-transform:uppercase; font:500 10px 'DM Mono'; letter-spacing:.1em; } .live-dot:before { content:""; display:inline-block; height:7px; width:7px; border-radius:50%; background:var(--acid); margin-right:7px; } .panel-label { display:block; margin-top:48px; font:500 10px 'DM Mono'; letter-spacing:.12em; color:#a7b0aa; } .hero-panel strong { font:600 37px/.87 'Barlow Condensed'; text-transform:uppercase; } .wave { display:flex; align-items:center; gap:4px; margin-top:24px; height:18px; } .wave i { width:3px; background:var(--orange); } .wave i:nth-child(1){height:7px}.wave i:nth-child(2){height:18px}.wave i:nth-child(3){height:11px}.wave i:nth-child(4){height:15px}.wave i:nth-child(5){height:6px}
.strip { display:flex; gap:38px; overflow:hidden; white-space:nowrap; padding:17px 0; background:var(--orange); font:800 22px 'Barlow Condensed'; letter-spacing:.07em; }.strip span:after { content:"✦"; margin-left:38px; color:var(--paper); }.features { padding:120px 10vw; display:grid; grid-template-columns:1fr 2fr; gap:80px; } h2 { font-size:clamp(45px,5vw,72px); line-height:.83; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .feature-grid article { padding:20px 24px 0; min-height:250px; border-right:1px solid var(--line); } .feature-grid article:first-child { padding-left:0; } .feature-grid article:last-child { border:0; } .feature-grid span,.channel-group>span,.software-grid article>span,.signup-notes span { color:var(--orange); font:500 11px 'DM Mono'; } h3 { margin:37px 0 13px; font-size:30px; line-height:.93; } .feature-grid p,.copy,.signup-notes p,.software-grid p,.compatibility>p { color:#556059; font-size:13px; line-height:1.7; } .devices { background:#d6dcd1; padding:105px 10vw; display:grid; grid-template-columns:1.1fr 1fr; gap:14vw; align-items:center; } .devices .copy { max-width:390px; margin:25px 0; } .inline-link { display:inline-block; padding-bottom:7px; border-bottom:1px solid var(--ink); font:800 11px Manrope; text-transform:uppercase; letter-spacing:.05em; }.inline-link b { color:var(--orange); font-size:17px; margin-left:14px; }.device-visual { height:325px; position:relative; }.screen { position:absolute; z-index:2; top:20px; left:18px; width:75%; height:215px; overflow:hidden; background:var(--ink); color:var(--acid); display:grid; place-items:center; border:11px solid #262d27; box-shadow:16px 16px 0 var(--orange); }.screen img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:.82; }.screen small { position:absolute; bottom:11px; left:13px; color:white; font:10px 'DM Mono'; }.phone { position:absolute; z-index:3; bottom:0; right:10px; height:176px; width:90px; border:7px solid var(--ink); border-radius:11px; background:var(--acid); color:var(--ink); padding:9px; text-align:center; }.orbit { position:absolute; border:1px solid #a1a99e; border-radius:50%; }.orbit-a { width:360px; height:360px; top:-16px; left:-29px; }.orbit-b { width:245px; height:245px; top:42px; left:30px; }.price-banner { display:flex; justify-content:space-between; gap:70px; padding:105px 10vw; color:white; background:var(--ink); }.price-banner>div:last-child { max-width:300px; }.price-banner p:not(.eyebrow) { color:#c5cec6; line-height:1.7; font-size:13px; margin:0 0 25px; }
.page-intro { padding:100px 10vw 80px; min-height:390px; background:var(--ink); color:white; position:relative; overflow:hidden; }.page-intro:after { content:""; position:absolute; width:500px; height:500px; border:1px solid var(--orange); border-radius:50%; top:-260px; right:-70px; }.page-intro>div { position:relative; z-index:1; max-width:800px; }.page-intro>div>p:last-child { max-width:540px; color:#c5cec6; line-height:1.7; margin-top:27px; }.channel-list,.software-grid,.signup-wrap { padding:80px 10vw 120px; }.notice { margin:0 0 50px; padding:16px 18px; background:var(--acid); font:500 11px 'DM Mono'; letter-spacing:.04em; }.channel-group { padding:25px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:100px 1fr; }.channel-group h2 { font-size:44px; }.tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }.tags b { padding:9px 12px; border:1px solid var(--line); font-size:11px; text-transform:uppercase; }.channel-bottom { border-top:1px solid var(--line); padding-top:29px; display:flex; justify-content:space-between; align-items:center; color:#556059; font-size:13px; }.signup-wrap { display:grid; grid-template-columns:minmax(280px,440px) 1fr; gap:130px; }.plan { padding:38px; background:var(--acid); }.plan h2 { font-size:77px; }.plan h2 span { font:600 24px 'Barlow Condensed'; }.plan-sub { font-size:13px; line-height:1.6; }.plan ul { margin:32px 0; padding:0; list-style:none; border-top:1px solid #98b71f; }.plan li { padding:11px 0; border-bottom:1px solid #98b71f; font-size:12px; font-weight:700; }.full { display:flex; justify-content:space-between; }.signup-notes { padding-top:13px; }.signup-notes>div { position:relative; padding:0 0 27px 40px; border-bottom:1px solid var(--line); margin-bottom:24px; }.signup-notes span { position:absolute; left:0; top:2px; }.signup-notes h3 { margin:0 0 8px; font-size:27px; }.signup-notes p { margin:0; }.signup-notes a { color:var(--orange); font-weight:800; }.signup-notes aside { margin-top:50px; padding:25px; border-left:5px solid var(--orange); background:#dfe3da; }.signup-notes aside strong { font:700 25px 'Barlow Condensed'; text-transform:uppercase; }.signup-notes aside p { margin:8px 0 17px; }.software-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; padding-left:10vw; padding-right:10vw; background:var(--line); }.software-grid article { padding:38px; min-height:250px; background:var(--paper); }.software-grid h2 { margin:28px 0 11px; font-size:38px; }.software-grid p { max-width:260px; }.software-grid .inline-link { margin-top:16px; }.compatibility { padding:100px 10vw; background:#d6dcd1; }.compatibility div { display:flex; flex-wrap:wrap; margin:20px 0 30px; }.compatibility b { padding:14px 19px; border:1px solid #a8b0a6; margin:-1px 0 0 -1px; font:700 19px 'Barlow Condensed'; }.compatibility>p:last-child { max-width:680px; }
footer { padding:55px 10vw 30px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; align-items:start; }.footer-brand { width:max-content; } footer p { margin:0; color:#556059; font-size:13px; } footer>div { display:flex; gap:20px; font-size:11px; font-weight:800; text-transform:uppercase; } footer small { grid-column:1/-1; padding-top:38px; color:#87918a; font:10px 'DM Mono'; }
@media (max-width:760px) { .topline span:nth-child(2),.topline span:nth-child(3) { display:none; }.site-header { height:70px; }.menu-button { display:block; } nav { position:absolute; display:none; top:70px; left:0; right:0; padding:20px 5vw 30px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:20px; }.menu-open nav { display:flex; }.hero { min-height:650px; padding:74px 7vw; align-items:flex-start; }.hero-panel { left:7vw; right:auto; bottom:50px; }.hero h1 { font-size:68px; }.hero-text { font-size:14px; }.actions { gap:18px; align-items:flex-start; flex-direction:column; }.features,.devices,.signup-wrap { padding:75px 7vw; grid-template-columns:1fr; gap:45px; }.feature-grid { grid-template-columns:1fr; }.feature-grid article,.feature-grid article:first-child { min-height:auto; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }.feature-grid article:last-child { border-bottom:0; }.devices { gap:48px; }.device-visual { transform:scale(.9); transform-origin:left top; margin-bottom:-30px; }.price-banner { padding:70px 7vw; display:block; }.price-banner>div:last-child { margin-top:32px; }.page-intro { padding:70px 7vw 65px; min-height:340px; }.channel-list,.software-grid,.signup-wrap { padding:60px 7vw 80px; }.channel-group { grid-template-columns:50px 1fr; }.channel-group h2 { font-size:37px; }.channel-bottom { align-items:flex-start; gap:20px; flex-direction:column; }.software-grid { grid-template-columns:1fr; padding:0; background:var(--line); }.software-grid article { padding:34px 7vw; }.signup-wrap { gap:50px; }.plan { padding:28px; } footer { padding:45px 7vw 25px; grid-template-columns:1fr; gap:22px; } footer>div { flex-wrap:wrap; } }

/* Ninja visual system */
:root { --ink:#080909; --paper:#eee8dc; --acid:#d52027; --orange:#c8a250; --muted:#817d73; --line:#cfc6b4; }
body { background:var(--paper); background-image:linear-gradient(90deg,rgba(8,9,9,.025) 1px,transparent 1px),linear-gradient(rgba(8,9,9,.025) 1px,transparent 1px); background-size:32px 32px; }
.topline { background:var(--acid); color:#fff; font-size:9px; }
.site-header { background:rgba(238,232,220,.96); border-bottom:2px solid var(--ink); }
.brand { font-size:18px; letter-spacing:.08em; }
.brand-mark { width:42px; height:42px; border:0; border-radius:0; clip-path:polygon(50% 0,92% 21%,92% 72%,50% 100%,8% 72%,8% 21%); background:var(--ink); color:var(--paper); font-size:15px; }
.nav-cta,.button.primary { background:var(--acid); box-shadow:5px 5px 0 var(--ink); transition:transform .2s ease,box-shadow .2s ease; }
.nav-cta b,.button b { color:var(--paper); }.nav-cta:hover,.button.primary:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.hero { background:#080909; isolation:isolate; }.hero:before { opacity:.32; background:repeating-linear-gradient(90deg,transparent 0 78px,#726e66 79px 80px),repeating-linear-gradient(0deg,transparent 0 78px,#726e66 79px 80px); mask-image:linear-gradient(100deg,#000,transparent 78%); }
.hero:after { content:""; position:absolute; z-index:-1; top:-185px; right:7vw; width:350px; height:850px; background:var(--acid); transform:skewX(-26deg); opacity:.9; box-shadow:-20px 0 0 var(--orange); }
.signal { border:0; border-radius:0; transform:rotate(-28deg); opacity:1; }.signal-one { width:28px; height:900px; right:32vw; top:-175px; background:var(--orange); }.signal-two { width:14px; height:700px; right:22vw; top:-105px; background:var(--acid); }
.hero h1 { text-shadow:6px 6px 0 var(--acid); }.hero h1 em,h2 em { color:var(--acid); }.hero-panel { border-color:var(--orange); }.live-dot { color:var(--orange); }.live-dot:before { background:var(--acid); box-shadow:0 0 0 3px rgba(213,32,39,.25); }.wave i { background:var(--acid); }
.strip { background:var(--ink); color:var(--paper); border-block:5px solid var(--acid); }.strip span:after { color:var(--acid); }.eyebrow,.feature-grid span,.channel-group>span,.software-grid article>span,.signup-notes span { color:var(--acid); }
.features { background:var(--paper); }.feature-grid { border-color:#bcb4a5; }.feature-grid article { border-color:#bcb4a5; }.feature-grid article:hover { background:#e2dacb; }.devices,.compatibility { background:#d9d1c2; }.screen { border-color:var(--ink); box-shadow:16px 16px 0 var(--acid); }.screen:after { content:""; position:absolute; inset:0; background:linear-gradient(125deg,transparent 38%,rgba(213,32,39,.52) 39% 44%,transparent 45%); pointer-events:none; }.phone { background:var(--acid); }.price-banner { background:var(--ink); border-top:6px solid var(--acid); }.notice { background:var(--ink); color:var(--paper); border-left:5px solid var(--acid); }.tags b { border-color:#a89f90; }.tags b:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }.plan { background:var(--ink); color:var(--paper); border-top:8px solid var(--acid); box-shadow:12px 12px 0 var(--orange); }.plan h2 { color:var(--paper); }.plan li { border-color:#3b3b39; }.plan ul { border-color:#3b3b39; }.plan .button.primary { box-shadow:none; }.signup-notes aside { border-color:var(--acid); }.software-grid { background:#bdb4a4; }.software-grid article { background:var(--paper); }.software-grid article:hover { background:var(--ink); color:var(--paper); }.software-grid article:hover p { color:#c7c1b6; }.inline-link b { color:var(--acid); } footer { background:var(--ink); color:var(--paper); border-top:6px solid var(--acid); } footer p,footer small { color:#aaa69e; }
@media (max-width:760px) { .hero:after { right:-160px; width:255px; }.signal-one { right:49vw; }.signal-two { right:20vw; }.nav-cta,.button.primary { box-shadow:3px 3px 0 var(--ink); } }

/* Readability refinement: crimson is an accent, not a text backdrop. */
.hero:after { right:10vw; width:190px; background:#4a1519; opacity:.65; box-shadow:-12px 0 0 var(--orange); }
.signal-one { width:10px; right:29vw; background:var(--orange); }.signal-two { width:7px; right:23vw; background:#7d2429; }
.hero h1 { text-shadow:4px 4px 0 rgba(213,32,39,.55); }.hero h1 em { color:var(--orange); }
.strip { border-block-width:3px; }.topline { background:#9f1b22; }.nav-cta,.button.primary { background:#b51f27; }.nav-cta:hover,.button.primary:hover { background:#951920; }
.price-banner { border-top-color:#b51f27; }.plan { border-top-color:#b51f27; }.plan .button.primary { background:var(--orange); color:var(--ink); }.plan .button.primary b { color:var(--ink); }
@media (max-width:760px) { .hero:after { right:-125px; width:190px; }.signal-one { right:48vw; }.signal-two { right:24vw; } }

.channel-options { margin-top:24px; border-top:1px solid var(--line); }
.channel-option { border-bottom:1px solid var(--line); }
.channel-option summary { min-height:66px; display:grid; grid-template-columns:1fr auto 34px; gap:20px; align-items:center; cursor:pointer; list-style:none; font-weight:800; text-transform:uppercase; }
.channel-option summary::-webkit-details-marker { display:none; }
.channel-option summary span { font-size:15px; }.channel-option summary small { color:var(--muted); font:500 9px 'DM Mono',monospace; letter-spacing:.08em; }.channel-option summary b { display:grid; place-items:center; width:28px; height:28px; color:var(--paper); background:var(--ink); font-size:20px; font-weight:400; transition:transform .2s ease,background .2s ease; }
.channel-option[open] summary { color:var(--acid); }.channel-option[open] summary b { background:var(--acid); transform:rotate(45deg); }.network-directory { padding:0 0 27px; }.network-directory img { display:block; width:min(100%,1012px); max-height:570px; object-fit:contain; object-position:left top; background:var(--ink); }.network-directory a { display:inline-block; margin-top:14px; padding-bottom:6px; border-bottom:1px solid currentColor; color:var(--ink); font:800 10px Manrope,sans-serif; letter-spacing:.06em; text-transform:uppercase; }.network-directory a b { color:var(--acid); margin-left:8px; font-size:15px; }.channel-option[open] .network-directory { animation:reveal-directory .22s ease-out; }
@keyframes reveal-directory { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .channel-option summary { grid-template-columns:1fr 30px; gap:11px; }.channel-option summary small { display:none; }.network-directory img { max-height:300px; } }