/* ---------- Red theme tokens ---------- */
:root{
  --bg:#0a0a0b;
  --bg-alt:#0b0b0d;
  --surface:#111113;
  --text:#f3f4f6;
  --muted:#b7bec8;
  --brand:#ef4444;      /* red-500 */
  --brand-2:#dc2626;    /* red-600 */
  --accent:#f43f5e;     /* rose-500 */
  --border:rgba(255,255,255,.08);
  --container:1120px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.65 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg, #0a0a0b 0%, #0b0b0d 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
.container{width:min(100% - 32px,var(--container));margin-inline:auto}

/* ---------- Type ---------- */
h1{font-weight:900;font-size:clamp(32px,6.5vw,64px);line-height:1.05;margin:0 0 8px}
h2{font-weight:900;font-size:clamp(22px,3.4vw,30px);margin:0 0 8px}
h3{font-weight:800;font-size:clamp(16px,2.2vw,18px);margin:0}
.lead{color:var(--muted);font-size:clamp(15px,2.2vw,18px)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:40;
  backdrop-filter: blur(10px) saturate(1.1);
  background:rgba(10,10,12,.65);
  border-bottom:1px solid var(--border);
}
.header__row{display:flex;align-items:center;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900}
.brand img{width:36px;height:36px}
.nav{margin-left:auto}
.nav__toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--text);margin:4px 0}
.nav__menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav__menu a{color:var(--muted);text-decoration:none;font-weight:700}
.nav__menu a:hover{color:var(--text)}
.hide-sm{display:inline-flex}
.hide-md{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:14px;border:1px solid transparent;
  font-weight:900;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  line-height:1;box-shadow:var(--shadow);white-space:nowrap;
  font-size:clamp(14px,1.6vw,16px);
}
.btn--primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff}
.btn--outline{background:transparent;border-color:rgba(255,255,255,.18);color:var(--text)}
.btn--order{background:transparent;border-color:rgba(239,68,68,.45);color:var(--text)}
.btn--order:hover{background:rgba(239,68,68,.08)}
.btn--accent{background:linear-gradient(180deg,#ff9bb0,var(--accent));color:#1e0b0f}
.btn:focus{outline:2px solid rgba(239,68,68,.35);outline-offset:2px}
.btn:hover{transform:translateY(-1px)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;text-align:center}
.hero__bg{
  position:absolute;inset:-2px;z-index:-1;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(239,68,68,.20), transparent 60%),
    radial-gradient(900px 400px at 80% -40px, rgba(244,63,94,.12), transparent 60%),
    linear-gradient(180deg,#0c0c0f,#0b0b0d 70%);
}
.hero__inner{padding:72px 0 56px}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero__trust{display:flex;gap:18px;justify-content:center;margin:16px 0 0;color:var(--muted);font-weight:700;list-style:none;padding:0;flex-wrap:wrap}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section--alt{background:linear-gradient(180deg,#0b0b0d,#0a0a0b)}
.section__head{text-align:center;margin-bottom:26px}
.section__head p{color:var(--muted)}



/* Themed Channels pill button */
.btn--channels{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.05rem;border-radius:999px;
  font-weight:700;letter-spacing:.2px;text-decoration:none;
  border:1px solid rgba(239,68,68,.35);
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(135deg,rgba(239,68,68,.9),rgba(239,68,68,.25)) border-box;
  color:#fff; box-shadow:0 4px 18px rgba(239,68,68,.18);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn--channels svg{ fill:currentColor; display:block; }

.btn--channels:hover{
  border-color:rgba(239,68,68,.6);
  box-shadow:0 6px 26px rgba(239,68,68,.3);
  transform:translateY(-1px);
}
.btn--channels:active{ transform:translateY(0); box-shadow:0 2px 10px rgba(239,68,68,.22); }
.btn--channels:focus-visible{
  outline:2px solid rgba(239,68,68,.6); outline-offset:3px;
}

/* Nav pill variant (optional) */
.nav-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border-radius:999px;font-weight:700;
  text-decoration:none; color:#fff;background:#151515;border:1px solid rgba(239,68,68,.28);
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.nav-pill--channels{ box-shadow:0 2px 12px rgba(239,68,68,.12); }
.nav-pill:hover{ background:#1a1a1a; border-color:rgba(239,68,68,.5); transform:translateY(-1px); }
.nav-pill:focus-visible{ outline:2px solid rgba(239,68,68,.6); outline-offset:3px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--channels,.nav-pill{ transition:none }
}




/* ---------- Cards & Grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}

/* Features */
.feat{text-align:center}
.feat__icon{font-size:26px;margin-bottom:8px}

/* Pricing */
.grid--pricing .price .btn{width:100%}
.price{position:relative}
.price__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.price__value{font-weight:900;font-size:clamp(22px,3.2vw,32px)}
.price__value .currency{margin-right:2px}
.price__value .per{font-size:12px;color:var(--muted);font-weight:800;margin-left:2px}
.price__list{list-style:none;margin:12px 0 16px;padding:0;color:var(--muted);font-size:14px}
.price--featured{outline:2px solid rgba(239,68,68,.40)}
.pill{
  position:absolute;top:12px;left:12px;background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.price--accent{outline:2px solid rgba(244,63,94,.35)}

/* Devices */
.devices .device{
  display:grid;place-items:center;background:linear-gradient(180deg,#141416,#121214);
  border:1px solid var(--border);border-radius:12px;padding:16px;font-weight:900;min-height:88px;font-size:15px
}

/* CTA */
.cta{padding:72px 0;background:
  radial-gradient(800px 300px at 20% -40%, rgba(239,68,68,.16), transparent 60%),
  radial-gradient(800px 300px at 80% -40%, rgba(244,63,94,.16), transparent 60%),
  linear-gradient(180deg,#0a0a0b,#0a0a0b)}
.cta__inner{text-align:center}
.cta h2{margin:0 0 8px;font-size:clamp(22px,3.4vw,28px)}
.cta p{color:var(--muted);margin:0 0 16px}
.cta .btn{min-width:220px}

/* Footer */
.footer{border-top:1px solid var(--border);background:#0a0a0b}
.footer__grid{display:grid;gap:24px;grid-template-columns:2fr 1.2fr 1.2fr;padding:32px 0}
.footer__bar{border-top:1px solid var(--border);padding:12px 0;color:var(--muted);background:#070707}
.list{list-style:none;margin:0;padding:0}
.list a{color:var(--muted);text-decoration:none}
.list a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--5{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 860px){
  .hide-sm{display:none}
  .hide-md{display:inline-flex}
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute;right:16px;top:62px;display:none;flex-direction:column;background:#141416;
    border:1px solid var(--border);border-radius:12px;padding:10px;min-width:230px;box-shadow:var(--shadow)
  }
  .nav__menu.show{display:flex}
}
@media (max-width: 600px){
  .grid--pricing{grid-template-columns:1fr !important}
  .grid--5{grid-template-columns:repeat(2,1fr)}
  .hero__inner{padding:60px 0 48px}
  .btn{font-size:16px}
}


/* ---- Footer link color override (email white) ---- */
.footer__grid a[href^="mailto:"],
.footer__grid p a{
  color: var(--text) !important;
  text-decoration: none;
}
.footer__grid p a:hover{
  text-decoration: underline;
}


/* ---- Mailto hard override (all states) ---- */
.footer__grid a[href^="mailto:"],
.footer__grid a[href^="mailto:"]:visited,
.footer__grid a[href^="mailto:"]:active,
.footer__grid a[href^="mailto:"]:focus,
.footer__grid a[href^="mailto:"]:hover{
  color: var(--text) !important;
  text-decoration: none;
}
.footer__grid a[href^="mailto:"]:hover{ text-decoration: underline; }