/* ==========================================================================
   TX FIBER — Design System
   Dark premium fiber theme · Inter · blue→cyan light accents
   ========================================================================== */

:root {
  --bg0: #05070f;
  --bg1: #0a0f1e;
  --bg2: #0e1526;
  --bg3: #131c33;
  --line: rgba(148, 163, 184, .14);
  --line2: rgba(148, 163, 184, .22);
  --text: #e9eef8;
  --muted: #96a2ba;
  --faint: #64748b;
  --blue: #3b82f6;
  --blue2: #60a5fa;
  --cyan: #22d3ee;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --grad: linear-gradient(135deg, #2563eb 0%, #3b82f6 45%, #22d3ee 100%);
  --grad-text: linear-gradient(100deg, #60a5fa, #22d3ee);
  --radius: 16px;
  --radius-lg: 22px;
  --nav-h: 72px;
  --strip-h: 38px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg0);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue2); text-decoration: none; }
a:hover { color: var(--cyan); }
::selection { background: rgba(59, 130, 246, .35); }

.container { width: min(1180px, 92%); margin: 0 auto; }
/* Nav-inner mirrors container width so nav content aligns with hero/section grids on every breakpoint */
.nav-inner { width: min(1180px, 92%); margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 64px 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 640px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 12px;
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 28px -8px rgba(59, 130, 246, .55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(59, 130, 246, .7); }
.btn-ghost {
  background: rgba(148, 163, 184, .07); color: var(--text);
  border-color: var(--line2); backdrop-filter: blur(6px);
}
.btn-ghost:hover { color: #fff; border-color: rgba(96, 165, 250, .5); background: rgba(59, 130, 246, .1); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: .87rem; border-radius: 10px; }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: var(--strip-h); left: 0; right: 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  background: rgba(5, 7, 15, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav.scrolled { background: rgba(6, 9, 18, .88); border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); padding: 5px 0; flex: 0 0 auto; }
.brand:hover { color: #fff; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(59,130,246,.45)); }
.brand-logo { display: block; height: 34px; width: auto; flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) brightness(1.05);
}
.brand-logo--footer { height: 44px; }
.brand-name { font-weight: 900; font-size: 1.12rem; letter-spacing: -.01em; }
.brand-name span { color: var(--cyan); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; }
.nav-links a {
  color: var(--muted); font-weight: 600; font-size: .92rem;
  padding: 9px 15px; border-radius: 9px; transition: color .15s, background .15s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(148, 163, 184, .08); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-account { color: var(--muted); font-size: .88rem; font-weight: 600; padding: 11px 4px; }
.nav-account:hover { color: var(--cyan); }
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 9px 10px;
  width: 44px; height: 44px; margin-left: auto; color: var(--text);
}
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- Top local strip ---------- */
.topstrip {
  position: fixed; top: 0; left: 0; right: 0; height: var(--strip-h); z-index: 101;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .20), rgba(34, 211, 238, .10) 50%, rgba(37, 99, 235, .20)), var(--bg0);
  border-bottom: 1px solid rgba(59, 130, 246, .28); padding: 0 12px;
  font-size: .82rem; font-weight: 600; color: #c3cfe3; letter-spacing: .01em; text-align: center;
}
.topstrip svg { width: 14px; height: 14px; color: var(--cyan); flex: 0 0 auto; }
.topstrip b { color: #fff; font-weight: 700; }
@media (max-width: 640px) { .topstrip { font-size: .78rem; } .topstrip .ts-extra { display: none; } }

/* Anchor jump offset (fixed nav + strip) */
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--strip-h) + 14px); }

/* ---------- Network facts list ---------- */
.net-facts { list-style: none; display: grid; gap: 13px; margin-top: 28px; padding: 0; }
.net-facts li { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.net-facts li svg { width: 18px; height: 18px; color: var(--cyan); flex: 0 0 auto; margin-top: 2px; }
.net-facts b { color: var(--text); font-weight: 700; }

/* Drawer-only items (My Account, CTA copy) live inside #navLinks; hidden on desktop */
.nav-links .nav-drawer-only { display: none; }

@media (max-width: 920px) {
  .nav-inner { gap: 12px; }
  .nav-burger { display: block; order: 3; margin-left: 0; }
  .nav-cta { margin-left: auto; }
  .nav-links, .nav-cta .nav-account { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h) - var(--strip-h)); max-height: calc(100dvh - var(--nav-h) - var(--strip-h)); overflow-y: auto;
    background: #060912; border-bottom: 1px solid var(--line);
    /* dim the page below the open drawer (clipped so the bar above stays bright) */
    box-shadow: 0 0 0 100vmax rgba(2, 4, 10, .62); clip-path: inset(0 0 -100vmax 0);
    padding: 10px 4% 16px;
  }
  .nav-links.open a { display: flex; align-items: center; min-height: 48px; padding: 12px; font-size: 1rem; }
  .nav-links.open .nav-drawer-only.nav-drawer-account { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  /* burger → close icon while open */
  .nav-burger span { transform-origin: center; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Narrow phones: the header CTA can't share the bar with the logo, so it moves into the drawer.
   tel: CTAs (contact page "Call us") are short and stay in the bar. */
@media (max-width: 480px) {
  .nav-cta .btn:not([href^="tel:"]) { display: none; }
  .nav-links.open .nav-drawer-only.nav-drawer-cta { display: block; padding-top: 8px; }
  .nav-links.open .nav-drawer-cta .btn { justify-content: center; width: 100%; font-size: 1rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--nav-h) + var(--strip-h) + 76px) 0 100px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
.hero-glow {
  position: absolute; width: 900px; height: 600px; top: -320px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, .22), rgba(34, 211, 238, .07) 45%, transparent 70%);
  filter: blur(20px);
}
.hero-inner { position: relative; text-align: center; }
.hero h1 { max-width: 900px; margin: 0 auto 22px; }
.hero .lead { margin: 0 auto 36px; font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 720px; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 54px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; color: var(--faint); font-size: .86rem; font-weight: 600; }
.hero-badges span { display: inline-flex; align-items: center; gap: 7px; }
.hero-badges svg { width: 15px; height: 15px; color: var(--green); flex: 0 0 auto; }

/* Availability bar */
.avail-bar {
  display: flex; gap: 10px; max-width: 640px; margin: 0 auto 26px;
  background: rgba(13, 20, 38, .8); border: 1px solid var(--line2);
  border-radius: 16px; padding: 10px; backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
}
.avail-bar input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--font); font-size: .98rem; padding: 10px 14px;
}
.avail-bar input::placeholder { color: #7c8aa5; }
@media (max-width: 560px) { .avail-bar { flex-direction: column; } }
@media (min-width: 561px) { .avail-bar input[type="email"] { flex: 0 1 150px; } }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 22px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(19, 28, 51, .55), rgba(10, 15, 30, .55));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; position: relative; overflow: hidden;
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, .35); box-shadow: 0 24px 48px -24px rgba(37, 99, 235, .35); }
.card-icon {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .28);
  color: var(--blue2); margin-bottom: 18px;
}
.card-icon svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--muted); font-size: .95rem; }
.card .link-arrow {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  color: var(--cyan); font-weight: 700; font-size: .9rem;
}
.card .link-arrow:hover { color: #fff; }
.card .link-arrow svg { width: 15px; height: 15px; transition: transform .15s; }
.card .link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Stats band ---------- */
.stats-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 21, 38, .5), rgba(5, 7, 15, .2));
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 20px 8px; }
.stat-num {
  font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 900; letter-spacing: -.03em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: 4px; }

/* ---------- Network section (copy + Backbone Line) ---------- */
.net-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 1080px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(19, 28, 51, .6), rgba(10, 15, 30, .6));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(96,165,250,.4); }
.price-card.featured {
  border-color: rgba(59, 130, 246, .55);
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(37, 99, 235, .22), transparent 55%),
    linear-gradient(180deg, rgba(19, 28, 51, .7), rgba(10, 15, 30, .7));
  box-shadow: 0 30px 60px -30px rgba(37, 99, 235, .5);
}
.price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.price-name { font-size: 1.06rem; font-weight: 800; color: var(--blue2); }
.price-speed { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; margin: 10px 0 2px; }
.price-speed small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-amt { display: flex; align-items: baseline; gap: 5px; margin: 12px 0 4px; }
.price-amt .amt { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; }
.price-amt .per { color: var(--muted); font-size: .9rem; font-weight: 600; }
.price-note { color: var(--faint); font-size: .8rem; margin-bottom: 18px; }
.price-feats { list-style: none; display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); flex: 1; }
.price-feats li { display: flex; gap: 10px; font-size: .9rem; color: var(--muted); }
.price-feats svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; margin-top: 3px; }

/* ---------- Comparison table ---------- */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .94rem; }
.compare-table th, .compare-table td { padding: 15px 18px; text-align: left; }
.compare-table thead th {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line2); font-weight: 800;
}
.compare-table tbody tr { transition: background .12s; }
.compare-table tbody td { border-bottom: 1px solid var(--line); }
.compare-table tbody tr:hover { background: rgba(59, 130, 246, .05); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.txf-col { color: var(--cyan); font-weight: 700; }
.compare-wrap {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: rgba(10, 15, 30, .45);
}
.compare-wrap .overflow { overflow-x: auto; }
.badge-yes { color: var(--green); font-weight: 700; }
.badge-no { color: var(--faint); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14, 21, 38, .45); }
.step-num {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 900; font-size: 1.05rem; margin-bottom: 16px;
  box-shadow: 0 6px 18px -6px rgba(59, 130, 246, .6);
}
.step h4 { margin-bottom: 7px; font-size: 1.05rem; }
.step p { color: var(--muted); font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(14, 21, 38, .5); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 22px;
  font-weight: 700; font-size: .99rem; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.35rem; font-weight: 600; color: var(--blue2); transition: transform .2s;
  flex: 0 0 auto; line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 22px 20px; color: var(--muted); font-size: .93rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(59, 130, 246, .35);
  background:
    radial-gradient(ellipse 80% 120% at 50% -30%, rgba(37, 99, 235, .3), transparent 60%),
    linear-gradient(180deg, rgba(16, 24, 46, .8), rgba(8, 12, 24, .9));
  padding: 66px 40px; text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lead { margin: 0 auto 32px; }
.cta-band .hero-ctas { margin-bottom: 0; }

/* ---------- DDoS page specifics ---------- */
.ddos-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 44px 0 10px; }
@media (max-width: 900px) { .ddos-flow { grid-template-columns: 1fr; } .ddos-flow .flow-arrow { transform: rotate(90deg); margin: 2px auto; } }
.flow-node {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center;
  background: rgba(14, 21, 38, .55); position: relative;
}
.flow-node h4 { font-size: .98rem; margin-bottom: 6px; }
.flow-node p { font-size: .84rem; color: var(--muted); }
.flow-node.attack { border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .05); }
.flow-node.scrub { border-color: rgba(59, 130, 246, .45); background: rgba(37, 99, 235, .08); }
.flow-node.clean { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .05); }
.flow-node .flow-icon { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.flow-node.attack .flow-icon { background: rgba(239,68,68,.12); color: var(--red); }
.flow-node.scrub .flow-icon { background: rgba(59,130,246,.14); color: var(--blue2); }
.flow-node.clean .flow-icon { background: rgba(16,185,129,.12); color: var(--green); }
.flow-node .flow-icon svg { width: 20px; height: 20px; }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.flow-arrow svg { width: 30px; height: 30px; }

/* ---------- Forms / contact ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(5, 9, 18, .7); border: 1px solid var(--line2);
  border-radius: 12px; color: var(--text); font-family: var(--font);
  font-size: .95rem; padding: 13px 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2396a2ba' stroke-width='2'%3E%3Cpath d='M2 4l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.form-note { font-size: .8rem; color: var(--faint); margin-top: 14px; }
.form-success {
  display: none; text-align: center; padding: 46px 24px;
  border: 1px solid rgba(16, 185, 129, .35); border-radius: var(--radius-lg);
  background: rgba(16, 185, 129, .06);
}
.form-success.show { display: block; }
.form-success .big-check {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .4);
  display: flex; align-items: center; justify-content: center; color: var(--green);
}
.form-success .big-check svg { width: 30px; height: 30px; }
.form-error {
  padding: 14px 18px; border-radius: 12px; font-size: .92rem;
  border: 1px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); color: #fca5a5;
}
.form-error[hidden], .avail-bar[hidden], .avail-result[hidden] { display: none; }
.avail-result {
  max-width: 640px; margin: 0 auto 26px; padding: 16px 20px; border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .07);
  color: var(--text); font-weight: 600; text-align: center;
}
.avail-result.is-error { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); color: #fca5a5; font-weight: 500; }

/* ---------- Contact info cards ---------- */
.contact-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .contact-band { grid-template-columns: 1fr; } }
.contact-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  background: rgba(14, 21, 38, .5); text-align: center;
}
.contact-card .card-icon { margin: 0 auto 14px; }
.contact-card p { color: var(--muted); font-size: .92rem; }
.contact-card .strong { color: var(--text); font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 12, 24, .4), rgba(5, 7, 15, 1)); padding: 70px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8b98b3; margin-bottom: 16px; font-weight: 800; }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: var(--muted); font-size: .92rem; }
.footer a:hover { color: var(--cyan); }
.footer-brand p { color: var(--muted); font-size: .9rem; margin-top: 14px; max-width: 300px; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--faint); font-size: .84rem;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; padding: calc(var(--nav-h) + var(--strip-h) + 64px) 0 64px; overflow: hidden; }
.page-hero .hero-glow { opacity: .8; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin-bottom: 18px; }
.page-hero .lead { margin-bottom: 8px; }
/* Text layer above .hero-bg (absolute) — otherwise the bg + its ::before scrim paint over the copy */
.page-hero > .container { position: relative; z-index: 2; }
/* Kicker pill matches the homepage .kicker: brand-blue accent */
.page-hero .pill { border-color: rgba(59, 130, 246, .25); color: var(--blue-bright); background: rgba(59, 130, 246, .08); }
.crumbs { display: flex; gap: 8px; font-size: .84rem; color: var(--faint); margin-bottom: 22px; font-weight: 600; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cyan); }

/* ---------- Utility ---------- */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid rgba(34, 211, 238, .3); color: var(--cyan); background: rgba(34, 211, 238, .07);
}
.pill.green { border-color: rgba(16,185,129,.3); color: var(--green); background: rgba(16,185,129,.07); }
.pill.amber { border-color: rgba(245,158,11,.3); color: var(--amber); background: rgba(245,158,11,.07); }

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

/* A11y: visible keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px;
}

/* Reusable section tint */
.section-tint { background: linear-gradient(180deg, transparent, rgba(14,21,38,.35) 20%, rgba(14,21,38,.35) 80%, transparent); }


/* ====== Hero: fiber strands (variant A, integrated) ====== */
/* center vignette dim — text stays clean, strands visible at edges */
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 46% 64% at 50% 55%, rgba(5,7,15,.78), rgba(5,7,15,0) 72%),
    radial-gradient(ellipse 60% 50% at 25% 40%, rgba(59,130,246,.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(34,211,238,.10), transparent 70%);
  pointer-events:none;
}



/* glow duplicate — fainter cyan/teal halo behind every strand */







/* comet core (white) + bloom (cyan) layered together */


/* pill-row accent strand */


.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.25);
  color:var(--blue-bright);
  font-size:13px;font-weight:600;letter-spacing:.04em;
  margin-bottom:28px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.kicker-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}


/* ====== Hero integration fixes ====== */
:root { --blue-bright: #93c5fd; --hair: rgba(148,163,184,.22); }
.hero-inner .kicker { margin: 0 auto 28px; display: inline-flex; }
.hero-inner { text-align: center; }

/* ====== City pills (from hero-a variant) ====== */
.cities {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 28px;
}
.city {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(13,20,38,.5);
  color: var(--text); font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.city .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  flex: none;
}
.city.live { color: var(--text); }
.city.soon { color: var(--blue-bright); }
.city.soon .d { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 2.4s ease-in-out infinite; }

/* ====== Hero: fiber lanes (variant G, integrated Sep 19 2026) ====== */
.hero-bg-canvas { overflow: hidden; }
.hero-bg canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* scrim over canvas — headline zone clean, lanes full brightness below */
.hero-bg-canvas::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 46% 64% at 50% 55%, rgba(5,7,15,.78), rgba(5,7,15,0) 72%),
    linear-gradient(to top, rgba(5,7,15,.86) 0%, rgba(5,7,15,.44) 96px, rgba(5,7,15,0) 158px);
}
/* Subpage heroes have no canvas: drop the center dim (meant for strands), keep the blue/cyan depth tints */
.page-hero .hero-bg::before {
  background:
    radial-gradient(ellipse 60% 50% at 25% 40%, rgba(59,130,246,.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(34,211,238,.10), transparent 70%);
}
/* bottom-band scrim under trust row + city pills (densest lane zone) */
.hero-inner { position: relative; z-index: 2; }
.hero-inner::after {
  content: ""; position: absolute; left: 50%; bottom: -90px; transform: translateX(-50%);
  width: min(1100px, 120%); height: 170px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 62% at 50% 60%, rgba(5,7,15,.80), rgba(5,7,15,0) 78%);
}

/* ====== Network: Backbone Line (replaces Texas map, Sep 24 2026) ====== */
/* All rules scoped under #network — nothing leaks to subpages. */
@media (min-width: 981px) {
  #network .net-copy { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 56px; align-items: start; }
  #network .net-copy > :not(.net-facts) { grid-column: 1; }
  #network .net-copy > .net-facts { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}
#network .backbone-panel {
  --bb-bg: #0b101e; --bb-ly: 92px; --bb-cycle: 7s;
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(37, 99, 235, .08), transparent 70%),
    var(--bb-bg);
  padding: 20px clamp(20px, 4vw, 52px) 26px;
}

/* strip: fixed-height horizontal track; stations sit at --x of its width */
#network .backbone-strip { position: relative; height: 196px; container-type: inline-size; }
#network .backbone-lines {
  position: absolute; left: 0; top: calc(var(--bb-ly) - 6px);
  width: 100%; height: 12px; overflow: visible;
}
#network .backbone { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
#network .backbone > li { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: 0; }
#network .backbone > li::before,
#network .backbone > li::after {
  content: ""; position: absolute; z-index: 2; left: -7px; top: calc(var(--bb-ly) - 7px);
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
}
/* ring: masks the hairlines so the line "enters" each station */
#network .backbone > li::before {
  border: 2px solid var(--blue); background: var(--bb-bg);
  animation: bb-ring-east calc(var(--bb-cycle) / 2) linear infinite;
  animation-delay: calc(var(--x) * var(--bb-cycle) - .35s);
}
#network .backbone > li.bb-hq::before { background: var(--blue); }
/* second ring layer pulses for westbound beads (separate element = no animation clash) */
#network .backbone > li::after {
  border: 2px solid #bfdbfe; box-shadow: 0 0 10px rgba(96, 165, 250, .7); opacity: 0;
  animation: bb-ring-west calc(var(--bb-cycle) / 2) linear infinite;
  animation-delay: calc(var(--bb-cycle) * .7 - var(--x) * var(--bb-cycle));
}
@keyframes bb-ring-east {
  0%, 22%, 100% { border-color: var(--blue); box-shadow: none; }
  10% { border-color: #bfdbfe; box-shadow: 0 0 10px rgba(96, 165, 250, .7); }
}
@keyframes bb-ring-west {
  0%, 22%, 100% { opacity: 0; }
  10% { opacity: 1; }
}

#network .bb-city, #network .bb-role, #network .bb-seg {
  position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap;
}
#network .bb-city { top: calc(var(--bb-ly) - 66px); font-size: 17px; font-weight: 700; line-height: 24px; color: var(--text); letter-spacing: -.01em; }
#network .bb-role { top: calc(var(--bb-ly) + 16px); font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 500; }
#network .bb-seg {
  left: 14cqw; top: calc(var(--bb-ly) - 28px);
  font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; color: var(--blue2);
}
#network .bb-end {
  position: absolute; top: calc(var(--bb-ly) + 66px); margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
#network .bb-end-in { left: 0; }
#network .bb-end-out { right: 0; }

/* beads: full-width wrapper translated 0→100% of the strip; the dot rides its left edge */
#network .backbone-beads {
  position: absolute; left: 0; right: 0; top: calc(var(--bb-ly) - 20px); height: 40px;
  overflow: hidden; pointer-events: none; z-index: 1;
}
#network .bb-bead {
  position: absolute; left: 0; top: 15px; width: 100%; height: 0; opacity: 0;
  animation: bb-east var(--bb-cycle) linear infinite;
}
#network .bb-bead::before {
  content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: #e0f2fe; box-shadow: 0 0 4px 1.5px rgba(96, 165, 250, .6);
}
#network .bb-bead.bb-east.bb-b2 { animation-delay: calc(var(--bb-cycle) / -2); }
#network .bb-bead.bb-west { top: 25px; animation-name: bb-west; animation-delay: calc(var(--bb-cycle) / -4); }
#network .bb-bead.bb-west.bb-b2 { animation-delay: calc(var(--bb-cycle) * -.75); }
@keyframes bb-east {
  0% { transform: translateX(0); opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes bb-west {
  0% { transform: translateX(100%); opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* stat slots */
#network .bb-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 6px 0 0;
  padding-top: 22px; border-top: 1px solid var(--line);
}
#network .bb-stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; text-align: center; padding-bottom: 26px; }
#network .bb-stat dt { color: var(--muted); font-size: .86rem; font-weight: 600; margin-top: 2px; }
#network .bb-stat dd { margin: 0; }
#network .bb-val {
  display: block; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.2;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#network .bb-stat.is-pending .bb-val { background: none; color: var(--line2); }
/* "coming soon" hint sits under the label so values + labels stay aligned across the row */
#network .bb-soon {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--line2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* datacenter disclosure */
#network .bb-details { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
#network .bb-details > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 700; color: var(--blue2); padding: 4px 2px;
}
#network .bb-details > summary::-webkit-details-marker { display: none; }
#network .bb-details > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
#network .bb-details[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
#network .bb-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .9rem; }
#network .bb-table th, #network .bb-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
}
#network .bb-table thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
#network .bb-table tbody th { color: var(--text); font-weight: 700; }
#network .bb-table tbody td { color: var(--muted); }
#network .bb-table tbody tr:last-child > * { border-bottom: 0; }
#network .bb-status { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; }
#network .bb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* <720px: rotate to a vertical line on the left; beads omitted (stations aren't at fixed %) */
@media (max-width: 719px) {
  #network .backbone-strip { height: auto; container-type: normal; padding: 2px 0 6px; }
  #network .backbone-strip::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 17.25px; width: 11.5px; box-sizing: border-box;
    border-left: 1.5px solid rgba(96, 165, 250, .35); border-right: 1.5px solid rgba(96, 165, 250, .35);
    -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  #network .backbone-lines, #network .backbone-beads { display: none; }
  #network .backbone { position: relative; inset: auto; }
  #network .backbone > li { position: relative; left: auto; width: auto; padding: 0 0 22px 46px; }
  #network .backbone > li::before, #network .backbone > li::after { left: 16px; top: 5px; animation: none; }
  #network .bb-city, #network .bb-role, #network .bb-seg { position: static; transform: none; display: block; white-space: normal; }
  #network .bb-role { margin-top: 1px; }
  #network .bb-seg { margin-top: 12px; }
  #network .bb-end { position: static; padding: 8px 0 18px 46px; }
  #network .bb-end-out { padding: 0 0 8px 46px; }
  #network .bb-stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  #network .bb-table th, #network .bb-table td { padding: 9px 8px; }
}

/* narrow phones: table rows become stacked cards (4 columns can't fit ~290px) */
@media (max-width: 559px) {
  #network .bb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #network .bb-table, #network .bb-table tbody { display: block; }
  #network .bb-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  #network .bb-table tbody tr:last-child { border-bottom: 0; }
  #network .bb-table th, #network .bb-table td { display: block; padding: 0; border: 0; }
  #network .bb-table tbody th { grid-row: 1; grid-column: 1; }
  #network .bb-table tbody td:first-child { grid-row: 1; grid-column: 2; }
  #network .bb-table tbody td:nth-child(3) { grid-column: 1 / -1; margin-top: 2px; }
  #network .bb-table tbody td:nth-child(4) { grid-column: 1 / -1; margin-top: 2px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  #network .backbone-beads { display: none; }
  #network .backbone > li::before, #network .backbone > li::after { animation: none; }
}

/* ====== Mobile readiness pass (Sep 24 2026) ====== */
/* Drawer CTA keeps button styling (.nav-links a color/hover would otherwise win) */
.nav-links .nav-drawer-cta .btn, .nav-links .nav-drawer-cta .btn:hover { color: #fff; background: var(--grad); }

/* Touch devices: no sticky hover lifts after a tap */
@media (hover: none) {
  .btn-primary:hover, .btn-ghost:hover, .card:hover, .price-card:hover { transform: none; }
}

/* Touch targets on tablets + phones (and any coarse pointer): footer lists, crumbs */
@media (max-width: 1024px), (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer ul a { display: inline-block; padding: 11px 0; }
  .crumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  #network .bb-details > summary { min-height: 44px; margin: -6px 0; }
  /* standalone sentence links: taller hit area without changing the line box */
  p.center > a { padding: 14px 0; }
  /* 16px+ keeps iOS Safari (incl. iPad landscape) from zooming on focus */
  .avail-bar input, .field input, .field select, .field textarea { font-size: 16px; }
}


@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-sm { padding: 44px 0; }
  .hero { padding-top: calc(var(--nav-h) + var(--strip-h) + 40px); padding-bottom: 72px; }
  .page-hero { padding-top: calc(var(--nav-h) + var(--strip-h) + 36px); padding-bottom: 48px; }
  /* hero trust row + city pills sit on the densest lanes on phones: deeper scrim, brighter text */
  .hero-inner::after { bottom: -30px; width: 150%; height: 400px; background: radial-gradient(ellipse 62% 56% at 50% 52%, rgba(5,7,15,.88), rgba(5,7,15,0) 82%); }
  .hero-badges { color: var(--muted); }
  .cta-band { padding: 44px 20px; border-radius: 22px; }
  .footer { padding-top: 52px; }
  .footer-grid { gap: 28px; margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contact-card .btn { width: 100%; }
  #contactForm { padding: 24px 18px !important; }
  .compare-table th, .compare-table td { padding: 13px 14px; }
}

@media (max-width: 560px) {
  .avail-bar input { min-height: 48px; }
  .avail-bar .btn { min-height: 48px; }
}

@media (max-width: 480px) {
  /* long button labels wrap instead of overflowing their card */
  .btn { white-space: normal; text-align: center; }
  .hero-ctas .btn, .cta-band .btn, #contactForm .btn { width: 100%; }
}

/* Stacked comparison tables on phones: each row becomes a card, header text shown via data-label */
@media (max-width: 560px) {
  .compare-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table.stack, .compare-table.stack tbody { display: block; }
  .compare-table.stack tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .compare-table.stack tbody tr:last-child { border-bottom: 0; }
  .compare-table.stack td { display: block; padding: 0; border: 0; }
  .compare-table.stack td:first-child { grid-column: 1 / -1; color: var(--text); font-weight: 700; }
  .compare-table.stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  }
}

/* ====== Speed gauge module (index, Sep 24 2026) ====== */
/* Mono is for the small data labels only; values and copy stay Inter */
.sg-card {
  --sg-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  max-width: 880px; margin: 0 auto; border: 1px solid var(--line2); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(19,28,51,.72), rgba(10,15,30,.92)); padding: 22px 28px 20px;
  box-shadow: 0 30px 80px -40px rgba(37,99,235,.45);
}
.sg-mono { font-family: var(--sg-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sg-head .sg-mono { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.sg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.18); flex: 0 0 auto; }
.sg-tag { color: var(--blue2) !important; }
.sg-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 0 22px; }
.sg-gauge { text-align: center; }
.sg-gauge svg { width: 100%; max-width: 300px; height: auto; margin: 0 auto; overflow: visible; }
.sg-track { fill: none; stroke: rgba(148,163,184,.13); stroke-width: 12; stroke-linecap: round; }
.sg-value { fill: none; stroke: url(#sgGrad); stroke-width: 12; stroke-linecap: round; filter: url(#sgGlow); }
.sg-tick { stroke: rgba(148,163,184,.3); stroke-width: 1.5; }
.sg-scale { font-family: var(--sg-mono); font-size: 10px; fill: var(--faint); letter-spacing: .04em; }
.sg-needle { stroke: #e9eef8; stroke-width: 2; stroke-linecap: round; }
.sg-hub { fill: var(--bg1); stroke: #e9eef8; stroke-width: 2; }
.sg-label { display: block; margin-top: 6px; }
.sg-num { display: block; font-size: clamp(2.4rem, 5vw, 3.1rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sg-num small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.sg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.sg-stats div { text-align: center; }
.sg-stats dt { margin-bottom: 4px; }
.sg-stats dd { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sg-foot { padding-top: 14px; text-align: center; color: var(--faint); font-size: .84rem; }
@media (max-width: 640px) {
  .sg-card { padding: 18px 16px 16px; }
  .sg-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sg-gauges { grid-template-columns: 1fr; gap: 22px; }
  .sg-gauge svg { max-width: 260px; }
  .sg-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
}

/* Speed test animation states (set by JS only; no-JS and reduced-motion keep the static card) */
.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; }
.sg-val { display: inline-block; min-width: 4.3ch; text-align: right; }
.sg-armed .sg-num { transition: opacity .35s ease; }
.sg-armed .sg-gauge.is-idle .sg-num { opacity: .3; }
.sg-armed .sg-gauge.is-done .sg-num { opacity: .75; }
.sg-armed .sg-stats dd { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sg-armed .sg-stats dd.in { opacity: 1; transform: none; }
.sg-card.is-testing .sg-dot { animation: sgPulse 1s ease-in-out infinite; }
@keyframes sgPulse { 50% { opacity: .35; box-shadow: 0 0 0 6px rgba(16,185,129,0); } }

/* ====== Broadband Facts labels (plan cards, Sep 24 2026) ====== */
.bbf { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.bbf > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; font-size: .84rem; font-weight: 700; color: var(--muted);
}
.bbf > summary::-webkit-details-marker { display: none; }
.bbf > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.bbf[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.bbf > summary:hover { color: var(--text); }
.bbf-label { border: 1px solid var(--line2); border-radius: 10px; padding: 12px 12px 10px; margin: 4px 0 6px; background: rgba(5,7,15,.55); }
.bbf-head { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 3px solid var(--text); }
.bbf-head strong { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; color: var(--text); }
.bbf-head span { display: block; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.bbf-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.bbf-table th, .bbf-table td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.bbf-table th { font-weight: 600; color: var(--muted); padding-right: 10px; }
.bbf-table td { color: var(--text); font-weight: 700; text-align: right; }
.bbf-table tr.bbf-group th { padding-top: 9px; color: var(--text); font-weight: 800; border-bottom: 1px solid var(--line2); }
.bbf-table tr.bbf-sub th { padding-left: 10px; }
.bbf-foot { font-size: .72rem; color: var(--faint); margin-top: 8px; line-height: 1.5; }
@media (hover: none) { .bbf > summary:hover { color: var(--muted); } }

/* ====== Legal pages (privacy, terms) ====== */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; margin-top: 10px; }
.legal strong { color: var(--text); }
.legal .legal-meta { color: var(--faint); font-size: .9rem; }
.legal-wrap { padding-top: 0; }

/* Speed test Retest button (index, Sep 24 2026): footnote stays centered, button sits bottom-right */
.sg-foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 14px; }
.sg-foot-row .sg-foot { grid-column: 2; padding-top: 0; }
.sg-retest {
  grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; min-height: 32px; border-radius: 8px; border: 1px solid var(--line2); background: transparent;
  font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.sg-retest[hidden] { display: none; }
.sg-retest:hover { color: var(--text); border-color: rgba(96,165,250,.5); background: rgba(59,130,246,.08); }
.sg-retest:focus-visible { border-radius: 8px; }
.sg-retest[aria-disabled="true"] { opacity: .5; cursor: default; color: var(--muted); border-color: var(--line2); background: transparent; }
.sg-snap, .sg-snap * { transition: none !important; }
@media (max-width: 640px) {
  .sg-foot-row { grid-template-columns: 1fr; justify-items: center; }
  .sg-foot-row .sg-foot, .sg-retest { grid-column: 1; justify-self: center; }
  .sg-retest { min-height: 40px; padding: 8px 16px; }
}