/* Telecom Agency
   Palette: ink #03060F, surface #090E1D, electric blue #2668FF, cyan #54D6FF, mint signal #7CF5B5
   Type: Bricolage Grotesque (display), Instrument Sans (text) */

:root {
  --bg: #03060F;
  --surface: #090E1D;
  --surface-2: #101A31;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --brand: #2668FF;
  --brand-hi: #54D6FF;
  --brand-deep: #0B2470;
  --signal: #7CF5B5;
  --rose: #FF8FA3;
  --text: #F2F6FF;
  --muted: #A3AFCA;
  --dim: #8792B0;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--text); color: var(--bg); border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Type ---------- */

.h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-top: 22px;
  text-wrap: balance;
}
.h2 .dim, .h3-xl .dim { display: block; color: var(--dim); }

.h3-xl {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-top: 18px;
}

.lede { color: var(--muted); max-width: 46ch; margin-top: 20px; font-size: 1.02rem; }
.lede-left { margin-inline: 0; }

.fineprint { color: var(--dim); font-size: .82rem; margin-top: 28px; }

/* ---------- Pieces ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  font-size: .86rem; color: var(--text);
}
.pill-dot {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); font-size: .8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pill-tag {
  padding: 2px 10px; border-radius: 999px;
  background: var(--brand); font-size: .75rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 600; font-size: .92rem; line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #2F6BF0, #1A48D6);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px -8px rgba(38, 104, 255, .8);
  color: #fff;
}
.btn-primary:hover { background: linear-gradient(180deg, #2760E0, #1740C8); }
.btn-light { background: var(--text); color: #060A16; }
.btn-light:hover { background: #fff; }
.btn-ghost { background: rgba(84, 214, 255, .22); border-color: rgba(84, 214, 255, .4); color: #fff; }
.btn-ghost:hover { background: rgba(84, 214, 255, .32); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }

.badge {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 20%, #5FA2FF, var(--brand) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 5px rgba(38, 104, 255, .16);
  font-size: 1.1rem; color: #fff; flex: none;
}
.badge-sm { width: 30px; height: 30px; font-size: .9rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.badge-lg { width: 52px; height: 52px; font-size: 1.35rem; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px;
}
.card::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-hi), transparent);
  opacity: .7;
}
.card h3 { font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: .94rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li a { display: block; margin: -3px -10px; padding: 3px 10px; border-radius: 999px; transition: color .15s, background-color .15s; }
.tags li a:hover { color: #fff; background: rgba(84, 214, 255, .16); }
.tags li {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(84, 214, 255, .1); border: 1px solid rgba(84, 214, 255, .18);
  color: #BEE4FF; font-size: .78rem;
}

.checks { display: grid; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .94rem; }
.checks .ico {
  width: 18px; height: 18px; padding: 4px; margin-top: 3px;
  border-radius: 50%; background: var(--brand); color: #fff; stroke-width: 2.6;
}

.stage-tag {
  padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  font-size: .78rem; color: var(--text);
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 10vw, 120px); position: relative; }
.section-head { margin-bottom: 52px; }

/* Glows stay inside their section so no edge shows where two sections meet */
.glow-a { background: radial-gradient(48% 34% at 14% 42%, rgba(38, 104, 255, .17), transparent 100%), radial-gradient(40% 28% at 90% 64%, rgba(38, 104, 255, .1), transparent 100%); }
.glow-b { background: radial-gradient(46% 34% at 86% 44%, rgba(38, 104, 255, .17), transparent 100%), radial-gradient(36% 26% at 8% 66%, rgba(38, 104, 255, .09), transparent 100%); }
.glow-c { background: radial-gradient(56% 38% at 50% 52%, rgba(38, 104, 255, .15), transparent 100%); }

.panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(44px, 6vw, 76px) clamp(18px, 4vw, 48px);
}
.panel > * { position: relative; z-index: 1; }
.panel-head { margin-bottom: 48px; }
.panel-head .btn { margin-top: 26px; }
.panel-spot {
  background:
    radial-gradient(34% 130px at 50% 0, rgba(84, 214, 255, .55), transparent 100%),
    radial-gradient(75% 300px at 50% 0, rgba(38, 104, 255, .9), rgba(38, 104, 255, .22) 55%, transparent 100%),
    var(--surface);
}
.panel-spot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 340px;
  background: repeating-conic-gradient(from 148deg at 50% -18%, rgba(255, 255, 255, .09) 0 2.5deg, transparent 2.5deg 8deg);
  -webkit-mask-image: radial-gradient(60% 100% at 50% 0, #000, transparent 75%);
  mask-image: radial-gradient(60% 100% at 50% 0, #000, transparent 75%);
}
.panel-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(#000, transparent 420px);
  mask-image: linear-gradient(#000, transparent 420px);
}
.panel-plain { background: radial-gradient(60% 60% at 80% 0, rgba(38, 104, 255, .2), transparent 70%), var(--surface); }

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(3, 6, 15, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-logo { height: 34px; width: auto; }
.footer .brand-logo { height: 38px; }
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--brand); font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.brand-mark .ico { stroke-width: 2.1; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }

.nav-links { display: flex; align-items: center; gap: 26px; font-size: .9rem; }
.nav-links a { white-space: nowrap; }
.nav-links a:not(.btn) { color: var(--muted); transition: color .15s; }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }
.hero-stage { position: relative; padding: clamp(48px, 7vw, 76px) 0 250px; }
.hero-inner { text-align: center; position: relative; z-index: 2; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.listen { cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; border-color: rgba(84, 214, 255, .45); background: rgba(84, 214, 255, .1); transition: background-color .18s, border-color .18s; }
.listen:hover { background: rgba(84, 214, 255, .2); border-color: var(--brand-hi); }
.listen .pill-dot { background: var(--brand-hi); color: #03060F; }
.listen .pill-dot .ico { fill: currentColor; stroke-width: 1.4; }
.listen.is-playing .pill-dot { animation: live 1.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(84, 214, 255, .6); }
.listen-time { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.listen-time:empty { display: none; }
.hero-title { font-family: var(--display); letter-spacing: -.025em; margin-top: 26px; }
.hero-line-a { display: block; font-weight: 300; font-size: clamp(1.75rem, 4.6vw, 3.1rem); line-height: 1.1; }
.hero-line-b { display: block; text-wrap: balance; font-weight: 600; font-size: clamp(2.15rem, 6.2vw, 4.3rem); line-height: 1.05; }
.hero-sub { color: var(--muted); max-width: 70ch; margin: 22px auto 0; }
.hero-sub + .hero-sub { margin-top: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }

/* Glow horizon. Four stacked ellipses centred on the top edge of the stage, so only
   their lower halves show: a white rim, two blurred colour layers and a dark dome.
   --drop is how far the rim's lowest point sits below the top; the inner layers are
   the same shape at 94% and 91% of that size. */
.glow {
  --drop: calc(100% - 120px);
  position: absolute; inset: 0; isolation: isolate;
  transform-origin: 50% 0;
  animation: glow-in 2s cubic-bezier(.16, 1, .3, 1) both;
}
.arc { position: absolute; border-radius: 100%; }
.arc-rim { inset: calc(-1 * var(--drop)) -16% calc(100% - var(--drop)); background: #fff; box-shadow: 0 -4px 23px 0 rgba(255, 255, 255, .71); }
.arc-a { inset: calc(-.909 * var(--drop)) -10% calc(100% - .909 * var(--drop)); background: var(--brand-hi); filter: blur(31px); animation: arc-in 2s cubic-bezier(.16, 1, .3, 1) .6s both; }
.arc-b { inset: calc(-.939 * var(--drop)) -12% calc(100% - .939 * var(--drop)); background: var(--brand); filter: blur(21px); animation: arc-in 2s cubic-bezier(.16, 1, .3, 1) both; }
.arc-c { inset: calc(-.909 * var(--drop)) -10% calc(100% - .909 * var(--drop)); background: var(--bg); filter: blur(51px); animation: arc-in 2s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes glow-in {
  from { transform: translateY(-50%) scaleY(1.5); opacity: 0; filter: blur(15px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes arc-in { from { transform: translateY(-40%); } to { transform: none; } }

/* Provider ticker */
.carriers { position: relative; z-index: 2; display: grid; gap: 12px; margin-top: -64px; padding-bottom: clamp(40px, 6vw, 72px); }
.carriers-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: .9rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(124, 245, 181, .6); animation: live 2.2s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 9px rgba(124, 245, 181, 0); } }

.chip-lg {
  display: inline-flex; align-items: center; gap: 12px; margin-right: 14px;
  padding: 9px 20px 9px 9px; border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--text);
  transition: border-color .2s, transform .2s;
}
.chip-lg:hover { border-color: rgba(84, 214, 255, .5); transform: translateY(-2px); }
.mono {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(150deg, #3D7DFF, #0B2470);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  font-style: normal; font-weight: 600; font-size: .82rem; letter-spacing: .01em; color: #fff;
}
.logo {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 6px; border-radius: 10px;
  background: #fff; flex: none; overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo.tile-sm { width: 24px; height: 24px; padding: 3px; border-radius: 7px; margin: -3px 0 -3px -6px; }
.chip-sm {
  display: inline-flex; align-items: center; gap: 9px; margin-right: 10px;
  padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .03); font-size: .86rem; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.chip-sm:hover { color: var(--text); border-color: var(--line-2); }
.chip-sm i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-hi); }
.chip-sm:nth-child(3n) i { background: var(--brand); }
.chip-sm:nth-child(3n + 1) i { background: var(--signal); }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; padding-block: 3px; animation: slide 60s linear infinite; }
.marquee-track > * { flex: none; white-space: nowrap; }
.marquee-slow { animation-duration: 90s; }
.marquee-rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- About ---------- */

.about-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.about-head { position: sticky; top: 110px; }
.about-head .h2 { margin-top: 0; }
.about-head .btn { margin-top: 28px; }
.about-body { display: grid; gap: 22px; max-width: 68ch; }
.about-body p { color: var(--muted); }
.about-body .about-lead { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: -.012em; color: var(--text); }
.about-body .about-commit {
  padding: 22px 24px; border: 1px solid rgba(84, 214, 255, .28); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(38, 104, 255, .2), rgba(38, 104, 255, .05));
  color: var(--text); font-weight: 500;
}

/* ---------- Orbit + features ---------- */

.orbit { position: relative; height: 760px; }
.orbit-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.orbit-scene.is-ready { opacity: 1; }
.orbit-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Logos are placed by orbit.js: each one is translated from the top-left corner of the scene. */
.orbit-logo {
  position: absolute; left: 0; top: 0; margin: -32px 0 0 -32px;
  display: grid; place-items: center; width: 64px; height: 64px; padding: 11px;
  border-radius: 17px; background: #fff;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5);
  will-change: transform;
}
.orbit-logo img { width: 100%; height: 100%; object-fit: contain; }
.orbit-logo:hover, .orbit-logo:focus-visible { box-shadow: 0 0 0 3px var(--brand-hi), 0 16px 34px -10px rgba(0, 0, 0, .85); opacity: 1 !important; }
/* The text block spans the full width, so let clicks through to logos passing beside it. */
.orbit-content { position: absolute; left: 0; right: 0; top: 190px; z-index: 2; pointer-events: none; }
.orbit-content > * { pointer-events: auto; }
.orbit-content .h2, .orbit-content .lede { max-width: 580px; margin-inline: auto; }
.orbit-content .btn { margin-top: 26px; }

.feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 30px 22px 22px; }
.feature h3 { font-size: 1.4rem; max-width: 12em; }
.feature p { max-width: 30ch; margin-bottom: 10px; }

.art {
  position: relative; width: 100%; height: 158px; margin-top: auto;
  border: 1px solid rgba(84, 214, 255, .22); border-radius: 12px;
  background: linear-gradient(180deg, rgba(38, 104, 255, .22), rgba(38, 104, 255, .03));
  overflow: hidden;
}
.art-converge svg { width: 100%; height: 100%; }
/* Words fill the top of the box; the check mark sits in the space kept clear beneath them. */
.art-words { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px 6px; padding: 12px 10px 62px; }
.art-words span { font-size: .8rem; color: rgba(190, 228, 255, .5); }
.art-seal {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 1.15rem; font-style: normal;
  box-shadow: 0 0 0 7px rgba(38, 104, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.art-seal .ico { stroke-width: 2.4; }
.art-bill { display: grid; align-content: center; gap: 7px; padding: 0 14px; text-align: left; }
.bill-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 10px; border-radius: 7px; background: rgba(3, 6, 15, .5);
  font-size: .78rem; color: var(--text);
}
.bill-row b { font-weight: 500; color: var(--signal); }
.bill-row.is-cut span { text-decoration: line-through; color: var(--dim); }
.bill-row.is-cut b { color: var(--rose); }

.mini-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.mini h3 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; font-size: 1.02rem; }
.mini p { color: var(--muted); font-size: .93rem; margin-top: 8px; }

/* ---------- Solutions ---------- */

.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.solution { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: rgba(3, 6, 15, .55); }
.solution p { flex: 1; }
.solution .tags { padding-top: 14px; border-top: 1px solid var(--line); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.chips li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .03); font-size: .9rem; font-weight: 500;
}
.chip-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); font-size: .85rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ---------- Industries ---------- */

.industry h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }

/* ---------- Steps ---------- */

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 940px; margin-inline: auto; padding: 8px;
  border: 1px solid var(--line); border-radius: 26px; background: rgba(9, 14, 29, .6);
}
.step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 30px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.step h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 500; font-size: 1.35rem; }
.step-n { color: var(--brand-hi); font-variant-numeric: tabular-nums; }
.step p { color: var(--muted); font-size: .95rem; }

/* ---------- Audit split ---------- */

.split { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.split-main > .lede { margin-bottom: 36px; }
.stage { display: grid; gap: 12px; margin-top: 16px; background: linear-gradient(180deg, rgba(38, 104, 255, .16), rgba(38, 104, 255, .04) 60%), var(--surface); }
.stage header, .plan header { display: flex; align-items: center; justify-content: space-between; }
.stage-ico, .plan-ico {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); font-size: 1.1rem;
}
.stage .btn { justify-self: start; margin-top: 6px; }

.split-side { position: sticky; top: 100px; }
.report {
  border: 1px solid var(--line-2); border-radius: 22px; padding: 10px;
  background: linear-gradient(180deg, rgba(38, 104, 255, .3), rgba(38, 104, 255, .05) 40%), var(--surface);
  box-shadow: 0 40px 90px -30px rgba(38, 104, 255, .55);
}
.report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 14px 16px; }
.report-title { font-family: var(--display); font-weight: 500; font-size: 1.2rem; }
.report-note { font-size: .78rem; color: var(--muted); }
.report-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 14px; margin-top: 6px; border-radius: 12px;
  background: rgba(3, 6, 15, .72); border: 1px solid var(--line);
}
.report-row b { display: block; font-weight: 500; font-size: .93rem; }
.report-row small { display: block; color: var(--muted); font-size: .8rem; }
.tag-find, .tag-keep { padding: 3px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.tag-find { background: rgba(84, 214, 255, .16); color: #BEE4FF; border: 1px solid rgba(84, 214, 255, .3); }
.tag-keep { background: rgba(124, 245, 181, .12); color: var(--signal); border: 1px solid rgba(124, 245, 181, .3); }
.report-foot { padding: 16px 14px 10px; font-size: .86rem; color: var(--muted); }

.goals-title { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; margin-top: 24px; }
.goals li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--muted); }
.goals .ico { width: 18px; height: 18px; padding: 4px; margin-top: 3px; border-radius: 50%; background: var(--brand); color: #fff; stroke-width: 2.6; }

/* ---------- Partners ---------- */

.vendor-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vendor-cat { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(3, 6, 15, .55); }
.vendor-cat h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin-bottom: 14px; }

/* ---------- Plans ---------- */

.plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: 26px; background: rgba(9, 14, 29, .6);
}
.plan {
  display: flex; flex-direction: column; gap: 14px; padding: 26px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--bg);
}
.plan-ico { background: var(--brand); border-color: rgba(255, 255, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.plan h3 { font-family: var(--display); font-weight: 500; font-size: 1.08rem; margin-top: 6px; }
.price { font-family: var(--display); font-weight: 500; font-size: 2.7rem; line-height: 1; letter-spacing: -.02em; }
.price small { font-family: var(--body); font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.plan > p:not(.price) { color: var(--muted); font-size: .94rem; }
.plan .checks { flex: 1; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 8px; }

/* ---------- Support ---------- */

.thread { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin: 0 auto 44px; }
.bubble { max-width: 82%; padding: 11px 16px; border-radius: 18px; font-size: .94rem; }
.bubble-in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble-out { align-self: flex-end; background: linear-gradient(180deg, #3D7DFF, #1A48D6); border-bottom-right-radius: 6px; box-shadow: 0 14px 34px -14px rgba(38, 104, 255, .9); }

.support-grid { max-width: 940px; margin-inline: auto; }
.support h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ---------- Compare + numbers ---------- */

.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px;
  max-width: 860px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 26px; background: var(--surface);
}
.compare-col { padding: 26px 28px; border-radius: var(--r-md); }
.compare-col h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--muted); margin-bottom: 20px; }
.compare-col ul { display: grid; gap: 15px; }
.compare-col li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .97rem; }
.compare-us { position: relative; border: 1px solid var(--line-2); background: var(--bg); }
.compare-us::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-hi), transparent); }
.compare-us h3, .compare-us li { color: var(--text); }
.compare-us li { font-weight: 500; }
.mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; color: #fff; flex: none; }
.mark .ico { stroke-width: 3.2; }
.mark-no { background: #E5354F; }
.mark-yes { background: var(--brand); }

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 72px auto 0; text-align: center; }
.numbers div { display: flex; flex-direction: column; gap: 6px; padding-inline: 12px; }
.numbers div + div { border-left: 1px solid var(--line); }
.numbers dt { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.numbers dd { color: var(--muted); font-size: .95rem; }

/* ---------- Quotes ---------- */

.quote { display: flex; flex-direction: column; gap: 16px; background: rgba(3, 6, 15, .55); }
.sample { position: absolute; top: 22px; right: 22px; font-size: .75rem; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 999px; padding: 2px 10px; }
.stars { display: flex; gap: 3px; }
.stars i { width: 15px; height: 15px; background: var(--text); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.quote blockquote { color: var(--muted); font-size: .96rem; flex: 1; }
.quote figcaption b { display: block; font-weight: 600; font-size: .93rem; }
.quote figcaption span { color: var(--muted); font-size: .88rem; }

/* ---------- Referral ---------- */

.referral {
  display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(60% 90% at 100% 0, rgba(38, 104, 255, .5), transparent 70%), var(--surface);
}
.referral-body { padding: clamp(32px, 5vw, 60px) clamp(22px, 4vw, 56px) clamp(32px, 5vw, 60px) 0; }
.referral-body > p { color: var(--muted); margin-top: 18px; max-width: 56ch; }
.checks-row { grid-auto-flow: column; justify-content: start; gap: 22px; margin: 24px 0 28px; }
.checks-row li { color: var(--text); font-size: .9rem; }

.referral-art { position: relative; align-self: stretch; min-height: 340px; }
.referral-art::before, .referral-art::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(84, 214, 255, .28); transform: translate(-50%, -50%);
}
.referral-art::before { width: 170px; height: 170px; }
.referral-art::after { width: 290px; height: 290px; border-color: rgba(84, 214, 255, .15); }
.node { position: absolute; z-index: 1; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: .82rem; white-space: nowrap; transform: translate(-50%, -50%); }
.node-a { left: 28%; top: 24%; }
.node-b { left: 74%; top: 36%; }
.node-c { left: 38%; top: 80%; }
.node-hub {
  left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; padding: 0;
  background: var(--brand); border-color: rgba(255, 255, 255, .3); font-size: 1.7rem;
  box-shadow: 0 0 0 12px rgba(38, 104, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------- Notes ---------- */

.note { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.note h3 { font-size: 1.3rem; }
.note p { flex: 1; }
.soon { font-size: .82rem; color: var(--dim); }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; cursor: pointer; list-style: none; font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ico { font-size: 1.2rem; transition: transform .2s; }
.faq-list details[open] summary .ico { transform: rotate(45deg); }
.faq-list details p { padding: 0 22px 20px; color: var(--muted); font-size: .95rem; max-width: 62ch; }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-line { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--muted); font-size: .95rem; }
.contact .checks { margin-top: 28px; }
.contact-line a { display: block; color: var(--text); font-family: var(--display); font-weight: 500; font-size: 1.25rem; }

.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-2); border-radius: 20px;
  background: rgba(3, 6, 15, .78);
}
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 500; }
.opt { color: var(--dim); font-weight: 400; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field select option { background: var(--surface); color: var(--text); }
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-hi); box-shadow: 0 0 0 3px rgba(38, 104, 255, .35); }
.field .is-invalid { border-color: var(--rose); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.form-status { font-size: .9rem; color: var(--muted); flex: 1; min-width: 200px; }
.form-status.is-error { color: var(--rose); }
.form-status.is-ok { color: var(--signal); }

/* ---------- Provider pages ---------- */

.prov-hero {
  padding: clamp(36px, 5vw, 60px) 0 clamp(36px, 5vw, 56px);
  background: radial-gradient(70% 120% at 50% -30%, rgba(38, 104, 255, .5), transparent 70%);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; color: var(--dim); margin-bottom: 32px; }
.crumbs a { color: var(--muted); display: inline-block; padding-block: 8px; margin-block: -8px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
.prov-head { display: flex; align-items: center; gap: 22px; }
.tile-xl { width: 84px; height: 84px; border-radius: 22px; flex: none; box-shadow: 0 18px 44px -14px rgba(38, 104, 255, .9); }
.mono.tile-xl { font-family: var(--display); font-size: 1.7rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -14px rgba(38, 104, 255, .9); }
.logo.tile-xl { padding: 14px; }
.prov-title { font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.025em; margin-top: 12px; }
.prov-line { font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); margin-top: 8px; }
.prov-summary { max-width: 68ch; color: var(--muted); font-size: 1.05rem; margin-top: 26px; }
.prov-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.prov-actions .btn { gap: 8px; padding: 13px 20px; font-size: .96rem; }
.prov-actions-center { justify-content: center; }

.prov-section { padding-block: clamp(36px, 5vw, 60px); }
.prov-h2 { margin: 0 0 28px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.prov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prov-svc h3 { margin-bottom: 8px; }
.prov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prov-box h2 { font-family: var(--display); font-weight: 500; font-size: 1.3rem; margin-bottom: 20px; }
.prov-cta .lede { margin-bottom: 4px; }
.prov-more { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin: 56px 0 18px; }
.prov-chips { display: flex; flex-wrap: wrap; gap: 10px 0; }

.prov-group + .prov-group { margin-top: 56px; }
.prov-group h2 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 500; font-size: 1.4rem; margin-bottom: 20px; }
.prov-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prov-card { display: flex; align-items: center; gap: 14px; padding: 16px; transition: border-color .2s, transform .2s; }
.prov-card:hover { border-color: rgba(84, 214, 255, .5); transform: translateY(-2px); }
.prov-card .mono, .prov-card .logo { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.prov-card-text { display: grid; gap: 2px; }
.prov-card-text b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.prov-card-text span { color: var(--muted); font-size: .86rem; line-height: 1.4; }

/* Industry pages */
.section-btn { margin-top: 26px; }
a.industry { display: block; transition: border-color .2s, transform .2s; }
a.industry:hover { border-color: rgba(84, 214, 255, .5); transform: translateY(-2px); }
.ind-home .industry { padding: 22px 20px; }
.ind-home .industry h3 { font-size: 1.02rem; }
.ind-title { max-width: 18em; margin-top: 18px; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.ind-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind-card { display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, transform .2s; }
.ind-card:hover { border-color: rgba(84, 214, 255, .5); transform: translateY(-2px); }
.ind-card h2 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; margin-top: 4px; }
.ind-card p { flex: 1; }
.ind-more { color: var(--brand-hi); font-size: .9rem; font-weight: 600; }
.ind-setup { gap: 18px; }
.ind-setup b { display: block; color: var(--text); font-weight: 600; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 10px 0; }
.prov-box .fineprint { margin-top: 20px; }

/* Trade pages */
.section-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.trade-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(28px, 4vw, 44px); }
.trade-teaser .prov-h2 { margin: 0; }
.trade-teaser .lede { max-width: 60ch; }
.trade-lede { margin: -12px 0 28px; max-width: 62ch; }
.trade-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trade-pillar { display: grid; gap: 12px; align-content: start; }
.trade-pillar h3 { font-size: 1.3rem; }
.trade-jump { margin-top: 30px; }
.trade-blurb { color: var(--muted); max-width: 70ch; margin: -8px 0 20px; }
.trade-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.trade-link {
  display: flex; align-items: center; min-height: 56px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-size: .93rem; font-weight: 500; line-height: 1.3;
  transition: border-color .2s, background-color .2s;
}
.trade-link:hover { border-color: rgba(84, 214, 255, .5); background: var(--surface-2); }
.text-link { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
.prov-group { scroll-margin-top: 90px; }

/* Articles */
.story {
  max-width: 820px; margin-inline: auto; padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--line); border-left: 3px solid var(--brand-hi); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(38, 104, 255, .12), rgba(38, 104, 255, .02) 55%), var(--surface);
}
.story-title { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; margin-top: 18px; text-wrap: balance; }
.story-by { color: var(--dim); font-size: .88rem; margin: 10px 0 24px; }
.story-lead { font-size: 1.12rem; line-height: 1.6; color: var(--text); }
.story h3 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin: 28px 0 10px; }
.story p { color: var(--muted); max-width: 68ch; }
.story .story-lead { color: var(--text); }
.story-shop { display: grid; gap: 14px; margin: 14px 0 0; }
.story-shop div { display: grid; grid-template-columns: 110px 1fr; gap: 6px 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 6, 15, .5); }
.story-shop dt { font-family: var(--display); font-weight: 500; color: var(--brand-hi); }
.story-shop dd { color: var(--muted); }
.story-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.story-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--text); }
.story-points .ico { width: 18px; height: 18px; padding: 4px; margin-top: 3px; border-radius: 50%; background: var(--brand); color: #fff; stroke-width: 2.6; }
.story .fineprint { margin-top: 22px; }
a.note { transition: border-color .2s, transform .2s; }
a.note:hover { border-color: rgba(84, 214, 255, .5); transform: translateY(-2px); }
.article-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.article-link {
  display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color .2s, background-color .2s;
}
.article-link:hover { border-color: rgba(84, 214, 255, .5); background: var(--surface-2); }
.article-link span { color: var(--brand-hi); font-size: .82rem; font-weight: 600; }
.article-link b { font-family: var(--display); font-weight: 500; line-height: 1.3; }
#article { scroll-margin-top: 90px; }

/* Availability check and carrier quote */
.avail { display: grid; gap: 28px; padding-block: clamp(32px, 4vw, 52px); }
.avail-head .lede { max-width: 62ch; }
.avail-search label { display: block; font-size: .86rem; font-weight: 500; margin-bottom: 7px; }
.avail-row { display: flex; gap: 10px; }
.avail-row input {
  flex: 1; min-width: 0; padding: 14px 16px; font-size: 1.05rem;
  background: rgba(3, 6, 15, .78); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.avail-row input:focus { outline: none; border-color: var(--brand-hi); box-shadow: 0 0 0 3px rgba(38, 104, 255, .35); }
.avail-row .btn { padding-inline: 22px; white-space: nowrap; }
.avail-hint { color: var(--dim); font-size: .84rem; margin-top: 8px; }
.avail-result { display: grid; gap: 18px; margin-top: 26px; }
.avail-note { color: var(--muted); }
.avail-note.is-error { color: var(--rose); }
.avail-matched { color: var(--muted); font-size: .92rem; }
.avail-matched b { color: var(--text); font-weight: 600; }
.avail-verdict { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line-2); }
.avail-verdict strong { font-family: var(--display); font-weight: 500; font-size: 1.3rem; }
.avail-verdict span { color: var(--muted); font-size: .94rem; }
.avail-verdict.is-yes { border-color: rgba(124, 245, 181, .45); background: rgba(124, 245, 181, .08); }
.avail-verdict.is-yes strong { color: var(--signal); }
.avail-verdict.is-no { border-color: rgba(255, 143, 163, .4); background: rgba(255, 143, 163, .06); }
.avail-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avail-item { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(3, 6, 15, .6); }
.avail-item.is-self { border-color: rgba(124, 245, 181, .5); }
.avail-name { font-family: var(--display); font-weight: 500; }
a.avail-name { text-decoration: underline; text-decoration-color: rgba(84, 214, 255, .5); text-underline-offset: 3px; }
a.avail-name:hover { color: var(--brand-hi); }
.avail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.avail-tags span { padding: 2px 9px; border-radius: 999px; font-size: .76rem; color: #BEE4FF; background: rgba(84, 214, 255, .1); border: 1px solid rgba(84, 214, 255, .18); }
.avail-tags .is-res { color: var(--muted); background: none; border-color: var(--line-2); }
.avail-speed { color: var(--muted); font-size: .84rem; }
.avail-result .prov-actions { margin-top: 4px; }
.avail-result .fineprint { margin-top: 0; max-width: 90ch; }
.avail-manual { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.avail-manual summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; color: var(--muted); font-size: .94rem; }
.avail-manual summary::-webkit-details-marker { display: none; }
.avail-manual summary .ico { transition: transform .2s; }
.avail-manual[open] summary .ico { transform: rotate(45deg); }
.avail-manual .form { margin-top: 18px; max-width: 640px; }
.avail-head .prov-h2 { margin: 18px 0 0; }
.field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.quote-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.quote-side { position: sticky; top: 100px; }
.quote-card { display: grid; gap: 10px; justify-items: start; }
.quote-card h2 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin-top: 8px; }
.quote-points { margin-top: 24px; }
.quote-form { grid-template-columns: 1fr; gap: 22px; }
.quote-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.quote-form legend { padding: 0 0 10px; width: 100%; font-family: var(--display); font-weight: 500; font-size: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-box { position: relative; cursor: pointer; }
.opt-box input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt-box span { display: block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9rem; color: var(--muted); transition: background-color .15s, border-color .15s, color .15s; }
.opt-box input:checked + span { background: var(--brand); border-color: rgba(255, 255, 255, .3); color: #fff; }
.opt-box input:focus-visible + span { outline: 2px solid var(--brand-hi); outline-offset: 3px; }

/* ---------- Cursor trail ---------- */

.trail-dot {
  position: fixed; left: 0; top: 0; z-index: 9999; border-radius: 50%;
  background: var(--brand-hi); box-shadow: 0 0 10px rgba(84, 214, 255, .7);
  pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform;
}

/* ---------- Scroll progress ---------- */

.progress {
  position: fixed; right: 20px; bottom: 90px; z-index: 40;  /* sits above the accessibility button */
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(9, 14, 29, .92); color: var(--text); cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.progress.is-shown { opacity: 1; visibility: visible; transform: none; }
.progress svg { position: absolute; inset: 1px; width: 52px; height: 52px; transform: rotate(-90deg); }
.progress circle { fill: none; stroke-width: 3; }
.progress-track { stroke: rgba(255, 255, 255, .1); }
.progress-bar { stroke: var(--brand-hi); stroke-linecap: round; }
.progress-num { position: relative; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress:hover { background: var(--surface-2); }

/* ---------- Accessibility statement ---------- */

.prose { max-width: 72ch; display: grid; gap: 16px; }
.prose h2 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin-top: 22px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.prose a { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
.prose .btn { justify-self: start; }
.footer-legal a { display: inline-block; padding-block: 8px; }
.footer-a11y-btn { background: none; border: 0; padding: 8px 0; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-a11y-btn:hover, .footer-legal a:hover { color: var(--text); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: flex-end; }
@media (min-width: 1081px) { .footer-base, .footer-legal { flex-wrap: nowrap; white-space: nowrap; } }
.footer-wcag { padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .8rem; color: var(--text); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: radial-gradient(40% 120% at 50% 0, rgba(38, 104, 255, .42), transparent 70%);
  padding-top: 64px;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.2fr; gap: 40px; }
.footer-brand p { color: var(--muted); font-size: .93rem; max-width: 30ch; margin-top: 16px; }
.footer h3 { font-family: var(--display); font-weight: 500; font-size: 1rem; margin-bottom: 14px; }
.footer nav a { display: block; color: var(--muted); font-size: .92rem; padding-block: 8px; }
.footer nav a:hover { color: var(--text); }
.footer-cta p { color: var(--muted); font-size: .93rem; margin-bottom: 16px; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-block: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer-legal a:hover { color: var(--text); }

.footer-credit { white-space: nowrap; }
.footer-credit a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--brand-hi); }
.heart { display: inline-block; width: .8em; height: .8em; margin: 0 .2em; vertical-align: -.06em; color: #FF4D6D; animation: heartbeat 1.2s ease-in-out infinite; transform-origin: 50% 60%; }
.heart svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes heartbeat {
  0%, 40%, 80%, 100% { transform: scale(1); }
  20%, 60% { transform: scale(1.28); }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  .solution-grid, .prov-grid, .prov-cards, .grid-4, .ind-cards { grid-template-columns: repeat(2, 1fr); }
  .trade-links { grid-template-columns: repeat(3, 1fr); }

  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 20px; background: rgba(3, 6, 15, .97); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a:not(.btn) { padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--text); }
  .nav-cta { margin: 16px 0 0; }
}

@media (max-width: 960px) {
  .tags li { padding: 0; }
  .tags li a { margin: 0; padding: 8px 12px; }
  .vendor-cat .tags { gap: 8px; }
  .orbit { height: auto; padding-top: 250px; }
  .orbit-content { position: static; margin-bottom: 48px; }

  .grid-3, .steps, .plans { grid-template-columns: 1fr; }
  .mini-row, .goals { grid-template-columns: repeat(2, 1fr); }
  .split, .faq, .contact, .referral, .about-grid { grid-template-columns: 1fr; }
  .split-side, .about-head, .quote-side { position: static; }
  .quote-grid { grid-template-columns: 1fr; }
  .avail-list { grid-template-columns: 1fr 1fr; }
  .referral-art { min-height: 300px; }
  .referral-body { padding: 0 24px 36px; }
  .checks-row { grid-auto-flow: row; gap: 10px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .progress { right: 11px; bottom: 76px; }
}

@media (max-width: 600px) {
  .solution-grid, .compare, .form, .mini-row, .goals, .prov-grid, .prov-cards, .prov-two, .grid-4, .ind-cards, .trade-pillars { grid-template-columns: 1fr; }
  .story-points, .article-links { grid-template-columns: 1fr; }
  .story-shop div { grid-template-columns: 1fr; }
  .trade-links { grid-template-columns: 1fr 1fr; }
  .prov-head { flex-direction: column; align-items: flex-start; }
  .avail-row { flex-direction: column; }
  .avail-list { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .prov-actions .btn { width: 100%; }
  .numbers { grid-template-columns: 1fr; gap: 28px; }
  .numbers div + div { border-left: 0; }
  .vendor-cats { grid-template-columns: 1fr; }
  .arc-rim { inset-inline: -45%; }
  .arc-b { inset-inline: -39%; }
  .arc-a, .arc-c { inset-inline: -36%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
  .section-head, .panel-head { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .glow, .arc, .live-dot, .listen .pill-dot, .heart { animation: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 10px; }
  .marquee-track [aria-hidden="true"] { display: none; }
  * { transition-duration: 0s !important; }
}