@charset "UTF-8";
/* ==========================================================================
   Open PON Foundation — openpon.org
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --brand-700: #5b21b6;
  --brand-600: #6d28d9;
  --brand-500: #7c3aed;
  --brand-300: #a78bfa;
  --blue-600:  #2563eb;
  --blue-500:  #3b82f6;
  --blue-300:  #60a5fa;

  --grad: linear-gradient(120deg, var(--brand-600) 0%, var(--blue-600) 100%);

  --bg:        #ffffff;
  --bg-alt:    #f7f8fc;
  --surface:   #ffffff;
  --surface-2: #f2f4fa;
  --text:      #0f172a;
  --text-2:    #475569;
  --muted:     #64748b;
  --border:    #e4e8f2;
  --border-2:  #d5dbe9;

  --danger:    #b91c1c;
  --danger-bg: #fef4f4;
  --danger-br: #f3cfcf;
  --warn:      #b45309;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 4px 20px -6px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 24px 60px -20px rgba(45, 30, 100, .25);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --container: 1180px;
  --gutter: 24px;


  /* Hero art glass */
  --glass-bg:        linear-gradient(150deg, rgba(255, 255, 255, .50), rgba(244, 243, 255, .26));
  --glass-fallback:  rgba(252, 252, 255, .92);
  --glass-hairline:  rgba(118, 108, 190, .18);
  --glass-edge:      rgba(255, 255, 255, .85);
  --glass-sheen:     rgba(255, 255, 255, .50);
  --glass-spot:      rgba(255, 255, 255, .55);

  /* Hero mesh */
  --mesh-line:            rgba(76, 63, 168, .20);
  --mesh-line-far:        rgba(90, 80, 170, .10);
  --mesh-node:            rgba(102, 45, 145, .55);
  --mesh-node-alt:        rgba(43, 97, 219, .55);
  --mesh-node-far:        rgba(110, 100, 180, .26);
  --mesh-glow:            rgba(124, 58, 237, .10);
  --mesh-glow-alt:        rgba(43, 97, 219, .10);
  --mesh-glow-far:        rgba(124, 110, 220, .05);
  --mesh-streak:          rgba(88, 40, 160, .95);
  --mesh-streak-alt:      rgba(30, 85, 210, .95);
  --mesh-streak-glow:     rgba(124, 58, 237, .26);
  --mesh-streak-glow-alt: rgba(43, 97, 219, .26);

  --font: "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0a0e1a;
    --bg-alt:    #0e1424;
    --surface:   #121a2c;
    --surface-2: #18203440;
    --text:      #e8edf9;
    --text-2:    #aab6cd;
    --muted:     #8494ae;
    --border:    #222d45;
    --border-2:  #2e3a55;

    --danger:    #fca5a5;
    --danger-bg: #1d1417;
    --danger-br: #4b2226;
    --warn:      #fbbf24;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 4px 24px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);

    --glass-bg:        linear-gradient(150deg, rgba(122, 132, 205, .14), rgba(30, 36, 68, .10));
    --glass-fallback:  rgba(18, 26, 44, .90);
    --glass-hairline:  rgba(176, 190, 255, .16);
    --glass-edge:      rgba(205, 215, 255, .26);
    --glass-sheen:     rgba(190, 205, 255, .13);
    --glass-spot:      rgba(175, 190, 255, .20);

    --mesh-line:            rgba(150, 170, 255, .34);
    --mesh-line-far:        rgba(130, 150, 235, .14);
    --mesh-node:            rgba(196, 181, 253, .95);
    --mesh-node-alt:        rgba(147, 197, 253, .95);
    --mesh-node-far:        rgba(150, 160, 230, .34);
    --mesh-glow:            rgba(139, 122, 255, .24);
    --mesh-glow-alt:        rgba(96, 165, 250, .24);
    --mesh-glow-far:        rgba(130, 140, 220, .06);
    --mesh-streak:          rgba(232, 226, 255, 1);
    --mesh-streak-alt:      rgba(196, 228, 255, 1);
    --mesh-streak-glow:     rgba(150, 130, 255, .38);
    --mesh-streak-glow-alt: rgba(110, 175, 255, .38);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-600); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; flex: none;
}
.brand-mark { width: 34px; height: 34px; flex: none; }
/* The mark ships in its brand colours for light backgrounds; lift it slightly
   wherever it sits on a dark ground so it holds against the wordmark. */
@media (prefers-color-scheme: dark) {
  .site-header .brand-mark { filter: brightness(1.4) saturate(1.05); }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 18px; letter-spacing: .01em; }
.brand-name strong { font-weight: 800; color: var(--text); }
.brand-name em {
  font-style: normal; font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

.primary-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.primary-nav a {
  text-decoration: none;
  font-size: 14.5px; font-weight: 550;
  color: var(--text-2);
  padding: 8px 11px; border-radius: 8px;
  transition: color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--text); background: var(--surface-2); }
.primary-nav a.is-active { color: var(--brand-600); }
@media (prefers-color-scheme: dark) { .primary-nav a.is-active { color: var(--brand-300); } }

.primary-nav .nav-cta {
  margin-left: 6px;
  color: var(--danger);
  border: 1px solid var(--danger-br);
  background: var(--danger-bg);
  font-weight: 600;
}
.primary-nav .nav-cta:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   Buttons / shared bits
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15.5px; font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(93, 47, 214, .7);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(93, 47, 214, .8); }
.btn-ghost {
  border-color: var(--border-2); color: var(--text); background: var(--surface);
}
.btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-600); transform: translateY(-2px); }
@media (prefers-color-scheme: dark) { .btn-ghost:hover { color: var(--brand-300); } }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.inline-link {
  color: var(--brand-600); font-weight: 600; text-decoration: none;
  font-size: 15px;
}
.inline-link:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .inline-link { color: var(--brand-300); } }

.loading { color: var(--muted); font-size: 15px; grid-column: 1 / -1; }
.data-error {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  padding: 20px 22px; color: var(--muted); font-size: 15px;
  background: var(--surface-2);
}
.data-error code { font-family: var(--mono); font-size: 13.5px; color: var(--text-2); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 68px 0 0;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px;
  background:
    radial-gradient(46% 60% at 22% 30%, rgba(124, 58, 237, .13), transparent 70%),
    radial-gradient(42% 55% at 78% 20%, rgba(37, 99, 235, .12), transparent 70%);
  pointer-events: none;
}
/* ---------- Abstract mesh: wired nodes with light streaks on the links ---------- */
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fade the mesh out before it reaches the stat strip. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 88%);
}
.hero-mesh svg { width: 100%; height: 100%; }

/* Two depth planes: a soft one set back, a crisp one in front. */
.mesh-edge line { stroke-linecap: round; }
.mesh-far line   { stroke: var(--mesh-line-far); stroke-width: 1; }
.mesh-near line  { stroke: var(--mesh-line);     stroke-width: 1.15; }

.mesh-node circle { stroke: none; }
.node-halo { fill: var(--mesh-glow); }
.node-core { fill: var(--mesh-node); }
.mesh-node-far .node-halo { fill: var(--mesh-glow-far); }
.mesh-node-far .node-core { fill: var(--mesh-node-far); }
/* Alternate the accent colour through the front nodes so it is not one flat hue.
   Scoped to the near plane - unscoped it out-specifics the far-node rules above and
   flattens the depth. Children run halo, core, halo, core, so 4n+3 / 4n+4 is one node. */
.mesh-node-near circle:nth-child(4n+3) { fill: var(--mesh-glow-alt); }
.mesh-node-near circle:nth-child(4n+4) { fill: var(--mesh-node-alt); }

/* A streak is one short dash chasing along a 1000-unit polyline (pathLength) that
   walks the mesh link to link, drawn twice: a long faint trail and a bright head. */
.mesh-streak use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: meshStreak var(--dur, 4s) linear infinite;
  animation-delay: var(--delay, 0s);
}
/* The trail lags the head by its own dash length, so it reads as light the head has
   already passed through rather than a beam shining ahead of it. */
.mesh-streak-tail use {
  stroke: var(--mesh-streak-glow);
  stroke-width: 2.8;
  stroke-dasharray: 78 922;
  animation-delay: calc(var(--delay, 0s) + var(--dur, 4s) * 0.072);
}
.mesh-streak-core use {
  stroke: var(--mesh-streak);
  stroke-width: 2;
  stroke-dasharray: 10 990;
}
.mesh-streak-tail use:nth-child(even) { stroke: var(--mesh-streak-glow-alt); }
.mesh-streak-core use:nth-child(even) { stroke: var(--mesh-streak-alt); }

@keyframes meshStreak {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Stop the repaints entirely once the hero is scrolled past (set from main.js). */
.hero-mesh.is-paused use { animation-play-state: paused; }

/* Stacked layouts make the hero very tall; hold the mesh to the headline area so it
   does not run the full length of the body copy. */
@media (max-width: 940px) { .hero-mesh { bottom: auto; height: 640px; } }
@media (max-width: 640px) { .hero-mesh { height: 540px; } }

@media (prefers-reduced-motion: reduce) {
  .mesh-streak { display: none; }
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px; align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-600);
  padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 22%, transparent);
  margin-bottom: 22px;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--brand-300); } }

.hero h1 {
  font-size: clamp(2.35rem, 4.6vw, 3.65rem);
  letter-spacing: -.035em;
  margin-bottom: 22px;
}
.lede {
  font-size: 18.5px; color: var(--text-2); max-width: 60ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 34px;
}
.hero-pills li {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Frosted glass panel. The artwork is a transparent PNG, so the mesh animating behind
   the hero reads through it - backdrop-filter blurs that, leaving the strands sharp
   outside the panel and soft within, which is what sells it as a pane of glass. */
.hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 594 / 512;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
          backdrop-filter: blur(20px) saturate(165%);
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--shadow-lg);
}
.hero-art img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
}

/* The glass surface itself: a fixed diagonal sheen, a specular spot that follows the
   pointer, and the rim light. Above the artwork, because the artwork sits inside the
   pane rather than on top of it. An inset shadow on .hero-art would paint under the
   image and be hidden by it, hence a layer of its own. */
.hero-art::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(60% 46% at var(--gx, 24%) var(--gy, 6%), var(--glass-spot), transparent 62%),
    linear-gradient(145deg, var(--glass-sheen) 0%, transparent 38%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 1px var(--glass-hairline),
    inset 0 -20px 40px -28px var(--glass-sheen);
}

/* Firefox below 103 and anything else without the filter: lean on an opaque tint so the
   panel still separates from the mesh instead of looking like a washed-out box. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-art { background: var(--glass-fallback); }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  position: relative;
  margin-top: 66px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stat {
  background: var(--surface);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-num {
  font-size: 34px; font-weight: 800; letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 92px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

.section-head { max-width: 760px; margin-bottom: 52px; }
.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) { .section-eyebrow { color: var(--brand-300); } }
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.section-lede { font-size: 17.5px; color: var(--text-2); }

/* Caveat that sits under a grid rather than above it - used for the disclosure about
   vendor code that is not ours to open. */
.section-note {
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15.5px;
  color: var(--text-2);
  max-width: 92ch;
}
.section-note strong { color: var(--text); font-weight: 650; }

/* ---------- Aligned vision ---------- */
.aligned-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 64px;
}
.aligned-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.aligned-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad);
}
.aligned-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.aligned-card h3 { font-size: 18px; margin-bottom: 8px; }
.aligned-tag {
  font-size: 12.5px; font-weight: 650; color: var(--brand-600);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 12px;
}
@media (prefers-color-scheme: dark) { .aligned-tag { color: var(--brand-300); } }
.aligned-card p:last-child { font-size: 15.5px; color: var(--text-2); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  padding: 30px 28px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.pillar-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
  margin-bottom: 18px;
}
.pillar-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--brand-600);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-color-scheme: dark) { .pillar-icon svg { stroke: var(--brand-300); } }
.pillar h3 { font-size: 18px; margin-bottom: 10px; }
.pillar p { font-size: 15.5px; color: var(--text-2); }

.pillar-note {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-500) 8%, var(--surface)),
    color-mix(in srgb, var(--blue-600) 7%, var(--surface)));
  border-color: color-mix(in srgb, var(--brand-500) 24%, transparent);
  display: flex; flex-direction: column; gap: 12px;
}
.pillar-note h3 { margin-bottom: 0; }
.pillar-note .inline-link { margin-top: auto; }

/* ---------- Firmware ---------- */
.firmware-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fw-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }

.fw-card.is-featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 34px; align-items: start;
  padding: 38px 34px;
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-500) 7%, var(--surface)),
    color-mix(in srgb, var(--blue-600) 6%, var(--surface)));
}
.fw-card.is-featured:hover { transform: none; }

.fw-main { display: flex; flex-direction: column; gap: 14px; }

.fw-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw-card h3 { font-size: 20px; }
.fw-card.is-featured h3 { font-size: 26px; letter-spacing: -.03em; }

.fw-badge,
.device-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--grad); color: #fff;
}
.fw-badge.is-tech {
  background: color-mix(in srgb, var(--blue-600) 12%, transparent);
  color: var(--blue-600);
  border: 1px solid color-mix(in srgb, var(--blue-600) 26%, transparent);
}
@media (prefers-color-scheme: dark) { .fw-badge.is-tech { color: var(--blue-300); } }

.fw-meta {
  font-size: 13.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.fw-meta span { display: inline-flex; align-items: center; gap: 6px; }
.fw-meta b { font-weight: 650; color: var(--text-2); }
.fw-chip {
  font-family: var(--mono); font-size: 12.5px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
}
.fw-summary { font-size: 15.5px; color: var(--text-2); }
.fw-card.is-featured .fw-summary { font-size: 17px; }

.fw-features { display: grid; gap: 10px; }
.device-features { align-self: center; }
.fw-features li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px; color: var(--text-2);
  min-height: 22px;
}
.fw-features li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad);
  opacity: .16;
}
.fw-features li::after {
  content: ""; position: absolute; left: 5.5px; top: 9.5px;
  width: 7px; height: 3.5px;
  border-left: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600);
  transform: rotate(-45deg);
}
@media (prefers-color-scheme: dark) {
  .fw-features li::after { border-color: var(--brand-300); }
}

/* ---------- Devices ---------- */
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.device-card {
  padding: 28px 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.device-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.device-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.device-top .compat { margin-left: auto; }
.device-card h3 { font-size: 19px; }

/* MikroTik gets the same wide treatment as the flagship firmware card. */
.device-card.is-featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 34px; align-items: start;
  padding: 38px 34px;
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-500) 7%, var(--surface)),
    color-mix(in srgb, var(--blue-600) 6%, var(--surface)));
}
.device-card.is-featured:hover { transform: none; }
.device-card.is-featured h3 { font-size: 26px; letter-spacing: -.03em; }
.device-main { display: flex; flex-direction: column; gap: 14px; }
.device-summary { font-size: 17px; color: var(--text-2); }

.device-pick {
  font-size: 15.5px; color: var(--text-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.device-pick-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 5px;
}
.device-pick b { color: var(--text); font-weight: 700; }
@media (prefers-color-scheme: dark) { .device-pick-label { color: var(--brand-300); } }
.compat {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.compat.level-full {
  background: color-mix(in srgb, #16a34a 13%, transparent);
  color: #15803d;
  border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
}
.compat.level-good {
  background: color-mix(in srgb, var(--blue-600) 11%, transparent);
  color: var(--blue-600);
  border: 1px solid color-mix(in srgb, var(--blue-600) 26%, transparent);
}
.compat.level-open {
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-600);
  border: 1px solid color-mix(in srgb, var(--brand-500) 28%, transparent);
}
@media (prefers-color-scheme: dark) {
  .compat.level-full { color: #4ade80; }
  .compat.level-good { color: var(--blue-300); }
  .compat.level-open { color: var(--brand-300); }
}
.device-card p { font-size: 15.5px; color: var(--text-2); }

/* ---------- Coverage ---------- */
.coverage-regions { display: grid; gap: 34px; }
.region-block h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 10px;
}
.region-count {
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-weight: 500;
}
.country-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px;
}
.country {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.country:hover { border-color: var(--brand-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cc {
  flex: none;
  width: 38px; height: 28px; border-radius: 5px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--grad);
}
.country-body { min-width: 0; }
.country-name { font-size: 15.5px; font-weight: 650; }
.country-ops { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- People ---------- */
.people-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
.person {
  padding: 24px 24px 22px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.person-top { display: flex; align-items: center; gap: 14px; }
.avatar {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: #fff;
  background: var(--grad);
  letter-spacing: -.01em;
}
.person-id { min-width: 0; }
.person-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.person-loc { font-size: 13px; color: var(--muted); }
.person-focus { font-size: 15px; color: var(--text-2); }
.person-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.tag.is-lead {
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-500) 26%, transparent);
  color: var(--brand-600);
}
@media (prefers-color-scheme: dark) { .tag.is-lead { color: var(--brand-300); } }
.person-links { margin-top: auto; padding-top: 4px; display: flex; gap: 12px; align-items: center; }
.gh-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text-2);
}
.gh-link svg { width: 17px; height: 17px; fill: currentColor; }
.gh-link:hover { color: var(--brand-600); }
@media (prefers-color-scheme: dark) { .gh-link:hover { color: var(--brand-300); } }
.person-community { font-size: 13.5px; color: var(--muted); }

/* ---------- Companies ---------- */
.company-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px;
}
.company {
  padding: 26px 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.company:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.company-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.company h3 { font-size: 18px; }
.asn {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--blue-600) 11%, transparent);
  color: var(--blue-600);
  border: 1px solid color-mix(in srgb, var(--blue-600) 24%, transparent);
}
@media (prefers-color-scheme: dark) { .asn { color: var(--blue-300); } }
.company-role { font-size: 15px; color: var(--text-2); }
.company-meta {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted);
}
.company-meta a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
.company-meta a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .company-meta a { color: var(--brand-300); } }

/* ---------- Suppliers ---------- */
.supplier-regions { display: grid; gap: 30px; }
.supplier-region {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.supplier-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.supplier-head h3 { font-size: 17px; }
.supplier-head .cc { width: 34px; height: 25px; font-size: 11.5px; }
.supplier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.supplier {
  padding: 22px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
/* Badge always on its own line under the name. Left to flex-wrap it sat inline after a
   short name like "Murat" and dropped below a long one like "EG Sphere Enterprise",
   so the cards did not line up with each other. */
.supplier-top {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.supplier h4 { font-size: 16px; }
.supplier-role { font-size: 14.5px; color: var(--text-2); }

/* Managed providers carry the deployment end to end, so they read as the recommended
   path rather than another line in the list. */
.supplier.is-msp {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand-500) 5%, transparent),
    transparent 60%);
}
.supplier-tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
}
/* Turnkey: the recommended path, so it carries the brand accent. */
.supplier-tier.tier-msp {
  color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-500) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 26%, transparent);
}
/* A business you buy hardware from. */
.supplier-tier.tier-trade {
  color: var(--blue-600);
  background: color-mix(in srgb, var(--blue-600) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue-600) 26%, transparent);
}
/* An individual, not a company - deliberately neutral rather than a warning colour.
   It sets expectations about invoices and response times, it is not a caution. */
.supplier-tier.tier-community {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}
@media (prefers-color-scheme: dark) {
  .supplier-tier.tier-msp   { color: var(--brand-300); }
  .supplier-tier.tier-trade { color: var(--blue-300); }
}

/* Legend above the regions, so the badges explain themselves. */
/* One grid across all three rows, with the rows dissolved into it, so the badge column
   sizes to the widest badge and every description still starts at the same x. A fixed
   column width would align them too, but only until a platform's font ran wider than the
   guess and a badge collided with its text. */
.supplier-legend {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 14px;
  align-items: baseline;
  margin: 0 0 30px;
  max-width: 82ch;
  font-size: 14.5px; color: var(--text-2);
}
.supplier-legend li { display: contents; }
.supplier-legend .supplier-tier { justify-self: start; }

@media (max-width: 640px) {
  .supplier-legend { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .supplier-legend li { display: grid; gap: 6px; margin-bottom: 16px; }
}

.supplier-commitments { display: grid; gap: 7px; margin-top: 2px; }
.supplier-commitments li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text-2);
}
.supplier-commitments li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--grad);
  opacity: .17;
}
.supplier-commitments li::after {
  content: "";
  position: absolute; left: 4px; top: 7px;
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--brand-600);
  border-bottom: 1.6px solid var(--brand-600);
  transform: rotate(-45deg);
}
@media (prefers-color-scheme: dark) {
  .supplier-commitments li::after { border-color: var(--brand-300); }
}
.supplier-contact {
  margin-top: auto; padding-top: 6px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  font-size: 14px;
}
.supplier-contact a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
.supplier-contact a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .supplier-contact a { color: var(--brand-300); } }
.contact-label {
  font-size: 12px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ==========================================================================
   Safety
   ========================================================================== */
.safety { background: var(--bg-alt); border-top: 1px solid var(--border); }
.safety-card {
  border: 1px solid var(--danger-br);
  border-top: 4px solid var(--danger);
  border-radius: var(--radius-lg);
  background: var(--danger-bg);
  padding: 46px 44px;
  box-shadow: var(--shadow);
}
.safety-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 16px;
}
.safety-eyebrow::before { content: "\26A0"; font-size: 15px; letter-spacing: 0; }
.safety-head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  margin-bottom: 18px; max-width: 22ch;
}
.safety-head > p { font-size: 17px; color: var(--text-2); max-width: 78ch; }
.safety-head strong { color: var(--text); }

.safety-sub {
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--danger);
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--danger-br);
}

.risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.risk {
  background: var(--surface);
  border: 1px solid var(--danger-br);
  border-radius: var(--radius);
  padding: 22px 22px;
}
.risk h4 { font-size: 16px; margin-bottom: 8px; color: var(--danger); }
.risk p { font-size: 14.5px; color: var(--text-2); }

.safety-body { display: grid; gap: 14px; max-width: 78ch; }
.safety-body p { font-size: 16.5px; color: var(--text-2); }
.safety-body strong { color: var(--text); }
.safety-rules { display: grid; gap: 8px; margin: 6px 0; }
.safety-rules li {
  position: relative; padding-left: 22px;
  font-size: 16.5px; font-weight: 650; color: var(--text);
}
.safety-rules li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
}
.safety-note {
  border-left: 3px solid var(--danger);
  padding: 4px 0 4px 18px;
  font-style: italic;
}

.principle {
  margin-top: 42px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #7f1d1d, #b91c1c);
  color: #fff;
  padding: 26px 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.principle-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
}
.principle-text {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #080c17;
  color: #cbd5e1;
  padding-top: 70px;
  border-top: 1px solid #1b2237;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr) minmax(0, .95fr);
  gap: 48px;
  padding-bottom: 56px;
}
.footer-brand .brand-name strong { color: #fff; }
.footer-brand .brand-name em {
  background: linear-gradient(120deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-brand .brand-sub { color: #7c8aa5; }
.footer-logo .brand-mark { filter: brightness(1.4) saturate(1.05); }
.footer-tagline { margin-top: 18px; font-size: 16px; font-weight: 600; color: #e2e8f0; }
.footer-note { margin-top: 10px; font-size: 14.5px; color: #94a3b8; max-width: 42ch; }

.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-nav h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7c8aa5; margin-bottom: 14px;
}
.footer-nav a {
  display: block; text-decoration: none;
  font-size: 15px; color: #cbd5e1;
  padding: 5px 0;
  transition: color .18s ease;
}
.footer-nav a:hover { color: #fff; }
/* Mark links that leave the site, so an outbound one does not read as another anchor.
   nowrap keeps a domain from breaking at its own hyphen - "hack-" over "gpon.org" reads
   as two broken links rather than one. */
.footer-nav a.is-external { white-space: nowrap; }
.footer-nav a.is-external::after {
  content: "↗";
  margin-left: 5px;
  font-size: 12px;
  opacity: .55;
}
.footer-nav a.is-external:hover::after { opacity: 1; }

.footer-sponsor h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7c8aa5; margin-bottom: 14px;
}
.sponsor-card {
  display: block; border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #1f2942;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sponsor-card:hover {
  transform: translateY(-3px);
  border-color: #3b4ba8;
  box-shadow: 0 18px 36px -18px rgba(59, 75, 168, .9);
}
.sponsor-card img { width: 100%; height: auto; }
.sponsor-caption { margin-top: 12px; font-size: 14px; color: #94a3b8; }

.footer-bottom {
  border-top: 1px solid #1b2237;
  padding-top: 22px; padding-bottom: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  font-size: 13.5px; color: #7c8aa5;
}
.footer-bottom-right { color: #64748b; }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .8, .3, 1), transform .55s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .primary-nav a { padding: 8px 9px; font-size: 14px; }
}

@media (max-width: 940px) {
  html { scroll-padding-top: 76px; }

  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 12px var(--gutter) 20px;
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 12px 14px; font-size: 16px; border-radius: 10px; }
  .primary-nav .nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }

  .hero { padding-top: 46px; }
  .hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .hero-art { max-width: 560px; }

  .stat-strip { grid-template-columns: repeat(2, 1fr); margin-top: 50px; }

  .section { padding: 70px 0; }
  .aligned-grid, .pillars, .firmware-grid, .device-grid, .risk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fw-card.is-featured,
  .device-card.is-featured { grid-column: span 2; grid-template-columns: 1fr; gap: 22px; padding: 30px 26px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-sponsor { grid-column: span 2; max-width: 420px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --gutter: 18px; }

  .header-inner { min-height: 64px; }

  .lede { font-size: 17px; }
  .hero-actions .btn { flex: 1 1 auto; }

  .stat-strip { grid-template-columns: 1fr; }
  .stat { padding: 20px; flex-direction: row; align-items: baseline; gap: 12px; }
  .stat-num { font-size: 27px; }
  .stat-label { font-size: 13px; }

  .section { padding: 58px 0; }
  .section-head { margin-bottom: 36px; }

  .aligned-grid, .pillars, .firmware-grid, .device-grid, .risk-grid,
  .country-grid, .people-grid, .company-grid, .supplier-list {
    grid-template-columns: 1fr;
  }
  .fw-card.is-featured,
  .device-card.is-featured { grid-column: span 1; }

  .safety-card { padding: 30px 22px; border-radius: var(--radius); }
  .principle { padding: 22px 20px; }

  .supplier { border-right: none; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-sponsor { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

@media print {
  .site-header, .nav-toggle, .hero-art, .hero-actions { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section, .safety { padding: 18pt 0; break-inside: avoid; }
  .reveal { opacity: 1; transform: none; }
}