:root {
  --bg: #030817;
  --bg-2: #071735;
  --bg-3: #0a2246;
  --surface: #071a36;
  --surface-2: #092246;
  --surface-3: #0b2a55;
  --ink: #f8fbff;
  --muted: rgba(210, 225, 247, 0.74);
  --muted-2: rgba(169, 190, 220, 0.68);
  --line: rgba(139, 181, 255, 0.16);
  --line-strong: rgba(24, 199, 255, 0.46);
  --panel: rgba(255, 255, 255, 0.055);
  --panel-2: rgba(255, 255, 255, 0.032);
  --accent: #0a63ff;
  --accent-2: #245cff;
  --cyan: #1ec7ff;
  --cyan-soft: #6ad6ff;
  --violet: #7c5cff;
  --shadow: 0 28px 90px rgba(0,0,0,.34);
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-tech: Oxanium, "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 10%, rgba(10,99,255,.18), transparent 28rem),
    radial-gradient(circle at 18% 42%, rgba(30,199,255,.06), transparent 36rem),
    linear-gradient(180deg, #030817 0%, #071a36 38%, #092246 70%, #061129 100%);
}
body::selection { background: rgba(30,199,255,.35); color: #fff; }
a { color: inherit; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.3vw, 34px);
  padding: 22px clamp(24px, 4vw, 72px);
  background: rgba(3, 8, 23, 0.74);
  border-bottom: 1px solid rgba(139,181,255,.12);
  backdrop-filter: blur(20px);
}
.brand,
.nav-links,
.nav-cta,
.hero-actions,
.button,
.hero-badges,
.hero-badges span { display: inline-flex; align-items: center; }
.brand { text-decoration: none; }
.brand-logo { display:block; width: 162px; height: auto; filter: drop-shadow(0 10px 28px rgba(10,99,255,.18)); }
.nav-links { justify-content:center; gap: clamp(18px, 3vw, 38px); }
.nav-links a {
  padding: 8px 2px;
  color: rgba(245,250,255,.84);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.nav-links a:hover,
.nav-links a:focus-visible { color:#fff; }
.nav-cta {
  justify-content:center;
  min-height: 44px;
  padding: 10px 18px;
  color:#fff;
  text-decoration:none;
  font-size: 14px;
  font-weight:800;
  border:1px solid rgba(55,142,255,.72);
  border-radius: 10px;
  background: linear-gradient(135deg, #1976ff, #0a63ff);
  box-shadow: 0 14px 34px rgba(10,99,255,.26);
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color:#fff;
  background:
    radial-gradient(circle at 82% 35%, rgba(10,99,255,.25), transparent 25rem),
    radial-gradient(circle at 66% 58%, rgba(30,199,255,.11), transparent 22rem),
    radial-gradient(circle at 10% 24%, rgba(36,92,255,.10), transparent 20rem),
    linear-gradient(180deg, #030817 0%, #061129 72%, #030817 100%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 60% 42%, #000 0%, rgba(0,0,0,.92) 45%, transparent 100%);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(3,8,23,.28) 0%, rgba(3,8,23,.06) 46%, rgba(3,8,23,.24) 100%),
    radial-gradient(ellipse at center, transparent 46%, rgba(3,8,23,.44) 100%);
  pointer-events:none;
}
.mesh-canvas {
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  opacity:.26;
  mix-blend-mode:screen;
}
.hero-inner { width: min(1420px, calc(100% - 64px)); margin: 0 auto; padding: 148px 0 66px; }
.hero-grid { display:grid; grid-template-columns: minmax(680px, 1.12fr) minmax(420px, .88fr); gap: clamp(42px, 5.5vw, 86px); align-items:center; }
.hero-copy { position: relative; z-index: 50; max-width: 820px; min-width: 0; }
.eyebrow,
.section-kicker,
.card-index,
.flow-card span { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: fit-content;
  margin-bottom: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
  box-shadow: none;
}
.eyebrow-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(24,199,255,.38);
  border-radius: 4px;
  color: #8ce5ff;
  background: rgba(10,99,255,.13);
}
.eyebrow-detail {
  color: rgba(181,214,255,.82);
  font-size: 12px;
  letter-spacing: .045em;
}
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family: var(--font-display); letter-spacing: -.055em; text-wrap: balance; }
p,li { text-wrap: pretty; }
h1 {
  margin-bottom: 25px;
  font-size: clamp(46px, 4.6vw, 68px);
  line-height: .98;
  font-weight: 700;
  text-shadow: 0 0 38px rgba(255,255,255,.12);
  max-width: 820px;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}
.hero-title-brand {
  color: #fff;
}
.hero-title-highlight {
  font-size: clamp(36px, 3.35vw, 54px);
  letter-spacing: -.062em;
  background: linear-gradient(90deg, #fff 0%, #56bfff 38%, #2b62ff 78%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-support { max-width: 590px; margin-bottom: 34px; color: var(--muted); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; }
.hero-actions { gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.button {
  justify-content:center;
  min-height: 58px;
  padding: 16px 28px;
  border:1px solid transparent;
  border-radius: 10px;
  text-decoration:none;
  color:#fff;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.button:hover,.button:focus-visible { transform: translateY(-1px); }
.button-primary { background: linear-gradient(135deg, #245cff, #0a63ff); box-shadow: 0 20px 58px rgba(10,99,255,.34); }
.button-secondary { background: rgba(255,255,255,.035); border-color: rgba(139,181,255,.25); }
.button-download { gap: 10px; }
.button-download svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-badges { gap: 24px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.hero-badges span { gap: 8px; }
.hero-badges svg { width: 20px; height: 20px; fill:none; stroke: var(--cyan); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(30,199,255,.32)); }

.hero-visual {
  position: relative;
  z-index: 1;
  min-height: 590px;
  transform-style: preserve-3d;
}
.visual-glow { position:absolute; border-radius:50%; filter: blur(32px); pointer-events:none; }
.visual-glow-one { width: 340px; height: 340px; right: 16%; top: 26%; background: rgba(30,199,255,.14); }
.visual-glow-two { width: 260px; height: 260px; left: 12%; bottom: 12%; background: rgba(36,92,255,.18); }
.hero-network {
  position:absolute;
  inset: 0 -24px 0 8px;
  width: calc(100% + 16px);
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events:none;
}
.orbit { fill:none; stroke: rgba(37,104,255,.25); stroke-width:1.1; stroke-dasharray: 9 12; transform-origin: center; }
.orbit-b { stroke: rgba(30,199,255,.18); }
.orbit-c { stroke: rgba(124,92,255,.18); }
.network-lines path { fill:none; stroke: rgba(82,140,255,.28); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.network-lines .strong {
  stroke: url(#heroLine);
  stroke-width: 2.2;
  stroke-dasharray: 20 250;
  filter: drop-shadow(0 0 10px rgba(30,199,255,.55));
  animation: pathFlow 6s linear infinite;
}
.network-lines .delay-one { animation-delay:-2s; }
.network-lines .delay-two { animation-delay:-3.9s; }
.node { stroke: rgba(255,255,255,.48); stroke-width: 1.2; }
.node.core { fill:url(#heroCore); filter: drop-shadow(0 0 34px rgba(30,199,255,.9)); animation: corePulse 3.5s ease-in-out infinite; }
.node.mid { fill:#0a63ff; }
.node.small.blue { fill:#0a63ff; }
.node.small.cyan { fill:#1ec7ff; }
.node.small.violet { fill:#7c5cff; }
.node.small.navy { fill:#0a1a3a; }
.server-nodes .server { fill:#176cff; stroke: rgba(139,218,255,.45); stroke-width:1; filter: drop-shadow(0 0 18px rgba(37,104,255,.65)); }
.packet { fill:#fff; opacity:.92; filter: drop-shadow(0 0 12px rgba(255,255,255,.95)); }
.packet-one { offset-path: path("M122 270 C260 190 350 196 468 292 C560 366 618 330 655 264"); animation: packetMove 6s linear infinite; }
.packet-two { offset-path: path("M210 178 C332 88 466 128 575 150 C645 165 660 215 655 264"); animation: packetMove 6s linear infinite -2s; }
.packet-three { offset-path: path("M214 386 C340 430 430 400 468 292 C508 192 548 164 575 150"); animation: packetMove 6s linear infinite -3.9s; }
.mesh-card {
  position:absolute;
  z-index: 20;
  left: 9%;
  top: 37%;
  display:flex;
  align-items:center;
  gap: 24px;
  width: min(455px, 86%);
  min-height: 136px;
  padding: 30px 36px;
  border: 1px solid rgba(24,199,255,.72);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(4,12,31,.985), rgba(8,21,48,.96));
  box-shadow: 0 24px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
  isolation:isolate;
}
.mesh-card::after {
  content:"";
  position:absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(4,12,31,1), rgba(8,21,48,.97));
}
.mesh-card img { width: 66px; height:66px; flex:0 0 auto; filter: drop-shadow(0 0 12px rgba(30,199,255,.28)); }
.mesh-card strong { display:block; color:#fff; font-family:var(--font-display); font-size: clamp(26px, 2.8vw, 34px); line-height:1.05; letter-spacing:-.055em; white-space:nowrap; }
.mesh-card span { display:block; margin-top:12px; color: var(--muted); font-size: clamp(17px, 1.8vw, 22px); }

.hero-proof {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  margin-top: 56px;
  border:1px solid rgba(139,181,255,.14);
  border-radius:22px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.proof-card {
  display:grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items:center;
  min-height: 150px;
  padding: 30px 36px;
  border-right:1px solid rgba(139,181,255,.12);
}
.proof-card:last-child { border-right:0; }
.proof-icon {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius: 16px;
  color: #2aaaff;
  background: radial-gradient(circle at 50% 10%, rgba(30,199,255,.20), rgba(10,99,255,.16));
  box-shadow: inset 0 0 24px rgba(10,99,255,.18), 0 0 30px rgba(10,99,255,.14);
}
.proof-icon svg { width: 40px; height:40px; fill:none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(42,170,255,.45)); }
.proof-card strong { display:block; margin-bottom:8px; color:#fff; font-family:var(--font-display); font-size: 20px; line-height: 1.1; letter-spacing:-.035em; }
.proof-card span:not(.proof-icon) { display:block; color: var(--muted); font-size: 15px; line-height: 1.55; }

.section {
  position: relative;
  width: 100%;
  margin:0;
  padding: 108px max(28px, calc((100vw - 1180px)/2));
  color:#fff;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(30,199,255,.09), transparent 34rem),
    radial-gradient(ellipse at 82% 8%, rgba(10,99,255,.13), transparent 36rem),
    linear-gradient(180deg, #071a36 0%, #092246 100%);
  border-top: 1px solid rgba(139,181,255,.10);
}
.section::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity:.46;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section > * { position: relative; z-index: 1; }
.platform-section {
  padding-top: 90px;
  scroll-margin-top: 18px;
  background:
    radial-gradient(circle at 14% 22%, rgba(30,199,255,.12), transparent 28rem),
    radial-gradient(circle at 78% 10%, rgba(10,99,255,.16), transparent 32rem),
    linear-gradient(180deg, #082044 0%, #0a2854 58%, #071a36 100%);
}
.section-header { margin-bottom: 44px; }
.split-header { display:grid; grid-template-columns: minmax(0,.95fr) minmax(320px,.72fr); gap:42px; align-items:end; }
.centered-header { max-width: 800px; margin-left:auto; margin-right:auto; text-align:center; }
.section-kicker { display:block; margin-bottom: 14px; color: var(--cyan); }
.section-header h2 { margin:0; font-size: clamp(34px, 4.4vw, 58px); line-height:.99; font-weight:700; }
.section-header p { margin:0; color: var(--muted); font-size: 18px; line-height:1.65; }
.section-header p a {
  color: var(--cyan);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.feature-grid,.beta-columns { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.feature-card,
.beta-columns article,
.flow-card,
.beta-form {
  border:1px solid rgba(139,181,255,.14);
  border-radius:16px;
  background: linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.036));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 52px rgba(0,0,0,.10);
}
.feature-card { min-height: 270px; padding: 30px; }
.card-index { display:block; margin-bottom: 48px; color: var(--cyan); }
.feature-card h3,
.beta-columns h3 { margin-bottom:12px; font-size:25px; line-height:1.1; }
.feature-card p,
.beta-columns li,
.flow-card p { color: var(--muted); line-height:1.62; }


/* v15 — Extensibility section */
.extensibility-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%, rgba(30,199,255,.18), transparent 29rem),
    radial-gradient(circle at 14% 68%, rgba(124,92,255,.13), transparent 30rem),
    linear-gradient(180deg, #071a36 0%, #0b2a5b 50%, #06142f 100%);
}
.extensibility-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.extensibility-panel {
  position: relative;
  min-height: 430px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(139,181,255,.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(30,199,255,.13), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 72px rgba(0,0,0,.16);
}
.extensibility-panel::after {
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 22px;
  border: 1px dashed rgba(30,199,255,.15);
  pointer-events:none;
}
.extensibility-label {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.extensibility-panel h3 {
  margin: 0 0 18px;
  max-width: 520px;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: .96;
  letter-spacing: -.055em;
}
.extensibility-panel p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
}
.extensibility-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.extensibility-tags span {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(139,181,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(232,241,255,.86);
  font-size: 14px;
  font-weight: 650;
}
.product-stack {
  position: relative;
  min-height: 430px;
  border: 1px solid rgba(139,181,255,.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 52% 44%, rgba(30,199,255,.19), transparent 15rem),
    radial-gradient(circle at 50% 50%, rgba(10,99,255,.18), transparent 24rem),
    linear-gradient(135deg, rgba(3,8,23,.34), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 72px rgba(0,0,0,.16);
  overflow: hidden;
}
.product-stack::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .54;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.76) 48%, transparent 78%);
}
.stack-orbit {
  position:absolute;
  left:50%; top:50%;
  border: 1px dashed rgba(30,199,255,.26);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-12deg);
}
.stack-orbit.orbit-one { width: 68%; height: 44%; }
.stack-orbit.orbit-two { width: 88%; height: 62%; transform: translate(-50%,-50%) rotate(15deg); opacity: .72; }
.stack-core,
.stack-node {
  position:absolute;
  z-index:1;
  border: 1px solid rgba(139,181,255,.20);
  background: rgba(6,20,47,.72);
  box-shadow: 0 16px 44px rgba(0,0,0,.20), 0 0 26px rgba(30,199,255,.08);
  backdrop-filter: blur(14px);
}
.stack-core {
  left:50%; top:50%;
  width: 230px;
  transform: translate(-50%,-50%);
  display: grid;
  justify-items:center;
  gap: 8px;
  padding: 26px 24px;
  border-radius: 24px;
  text-align:center;
}
.stack-core img { width: 72px; height: 72px; filter: drop-shadow(0 0 20px rgba(30,199,255,.42)); }
.stack-core strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -.05em; }
.stack-core span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.stack-node {
  padding: 13px 15px;
  border-radius: 999px;
  color: rgba(232,241,255,.88);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.node-client { left: 10%; top: 19%; }
.node-directory { right: 10%; top: 19%; }
.node-policy { left: 8%; bottom: 19%; }
.node-domain { right: 8%; bottom: 19%; }
.stack-node::before {
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin-right:8px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(30,199,255,.55);
}
@media (max-width: 900px) {
  .extensibility-layout { grid-template-columns: 1fr; }
  .product-stack { min-height: 460px; }
}
@media (max-width: 640px) {
  .extensibility-tags { grid-template-columns: 1fr; }
  .stack-core { width: 210px; }
  .node-client { left: 5%; }
  .node-directory { right: 5%; }
  .node-policy { left: 5%; }
  .node-domain { right: 5%; }
}


.federation-section {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(10,99,255,.22), transparent 34rem),
    radial-gradient(circle at 20% 20%, rgba(30,199,255,.10), transparent 26rem),
    linear-gradient(180deg, #06142f 0%, #030817 58%, #06142f 100%);
  border-top: 1px solid rgba(139,181,255,.10);
  border-bottom: 1px solid rgba(139,181,255,.10);
}
.federation-section::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, rgba(0,0,0,.84) 46%, transparent 88%);
  pointer-events:none;
}
.federation-map {
  position:relative;
  z-index:1;
  height: 520px;
  max-width: 1100px;
  margin: 20px auto 0;
}
.federation-map svg { position:absolute; inset: 42px 0 0; width:100%; height:420px; overflow:visible; }
.federation-ring {
  position:absolute;
  left:50%;
  top:54%;
  border:1px solid rgba(37,104,255,.24);
  border-radius:50%;
  transform: translate(-50%,-50%) rotateX(66deg) rotateZ(-3deg);
  box-shadow: 0 0 46px rgba(10,99,255,.12);
}
.ring-one { width: 870px; height: 310px; }
.ring-two { width: 620px; height: 220px; border-color: rgba(30,199,255,.18); }
.fed-link { fill:none; stroke:url(#fedLine); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 8px rgba(30,199,255,.38)); }
.fed-link.faint { stroke: rgba(82,140,255,.25); stroke-width:1.3; stroke-dasharray: 8 12; filter:none; }
.fed-node.core { fill:#0a63ff; }
.fed-node.white { fill:#fff; }
.fed-node.blue { fill:#0a63ff; }
.fed-node.violet { fill:#7c5cff; }
.fed-node.navy { fill:#071c41; }
.fed-item,
.fed-core-card {
  position:absolute;
  display:grid;
  justify-items:center;
  gap:10px;
  color: rgba(210,225,247,.62);
  font-size: 13px;
  text-align:center;
}
.fed-item strong { font-weight:600; }
.community { left: 9%; top: 76px; }
.enterprise { left: 8%; bottom: 78px; }
.private { right: 10%; bottom: 80px; }
.public { right: 7%; top: 78px; }
.selfhosted { left: 28%; bottom: 38px; }
.cloudprovider { left: 50%; bottom: 6px; transform:translateX(-50%); }
.fed-core-card { left:50%; top: 44%; transform:translate(-50%,-50%); gap:8px; color:#fff; font-family:var(--font-display); font-size:16px; }
.fed-core-card img { width:82px; height:82px; filter: drop-shadow(0 0 20px rgba(30,199,255,.45)); }
.server-stack {
  position:relative;
  display:grid;
  gap:3px;
  width:58px;
  padding:8px;
  border-radius:50%;
  background: rgba(10,99,255,.12);
  box-shadow: 0 0 28px rgba(10,99,255,.22);
}
.server-stack::before,
.cloud-stack::before,
.user-stack::before {
  content:"";
  position:absolute;
  inset: -8px -15px;
  border:1px solid rgba(30,199,255,.36);
  border-radius:50%;
  transform: rotateX(64deg);
}
.server-stack i { display:block; height:12px; border-radius:3px; background: linear-gradient(135deg, #2ba3ff, #245cff); border:1px solid rgba(255,255,255,.22); }

.architecture-section {
  background:
    radial-gradient(circle at 16% 20%, rgba(124,92,255,.10), transparent 30rem),
    radial-gradient(circle at 84% 0%, rgba(30,199,255,.10), transparent 30rem),
    linear-gradient(180deg, #092246 0%, #071a36 100%);
}
.beta-section {
  background:
    radial-gradient(circle at 74% 18%, rgba(30,199,255,.11), transparent 29rem),
    radial-gradient(circle at 20% 70%, rgba(10,99,255,.12), transparent 30rem),
    linear-gradient(180deg, #0a2854 0%, #082044 100%);
}
.beta-section .beta-columns article {
  background: linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.04));
}
.cloud-stack,
.user-stack {
  position:relative;
  display:block;
  width:62px;
  height:46px;
  border-radius:50%;
  background: rgba(10,99,255,.12);
  box-shadow: 0 0 28px rgba(10,99,255,.22);
}
.cloud-stack::after {
  content:"";
  position:absolute;
  left:11px; top:12px;
  width:42px; height:24px;
  border:3px solid #6ba8ff;
  border-top-width:4px;
  border-radius: 22px 22px 12px 12px;
  box-shadow: 0 0 18px rgba(106,168,255,.45);
}
.user-stack::after {
  content:"";
  position:absolute;
  left:20px; top:10px;
  width:22px; height:22px;
  border-radius:50%;
  background: linear-gradient(135deg, #fff, #8ab9ff);
  box-shadow: 0 0 18px rgba(255,255,255,.5);
}
.user-stack { border-radius: 50% 50% 44% 44%; }
.user-stack::before { inset: 28px -18px -10px; }

.architecture-flow { display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; }
.flow-card { padding:26px; }
.flow-card.highlight { border-color: rgba(30,199,255,.34); background: linear-gradient(135deg, rgba(10,99,255,.17), rgba(255,255,255,.035)); }
.flow-card span { display:block; margin-bottom: 14px; color: var(--cyan); }
.flow-card strong { display:block; margin-bottom: 10px; font-family:var(--font-display); font-size:21px; letter-spacing:-.035em; }
.flow-card p { margin-bottom:0; }
.flow-arrow { display:grid; place-items:center; color: var(--cyan); font-size:26px; opacity:.8; }
.beta-columns article { padding: 28px; }
.beta-columns ul { margin:0; padding-left:20px; }
.beta-columns li + li { margin-top:10px; }

.faq-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(124,92,255,.10), transparent 28rem),
    radial-gradient(circle at 20% 88%, rgba(30,199,255,.10), transparent 30rem),
    linear-gradient(180deg, #082044 0%, #071a36 100%);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.faq-item {
  min-height: 250px;
  padding: 26px;
  border: 1px solid rgba(139,181,255,.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.072), rgba(255,255,255,.034));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 52px rgba(0,0,0,.10);
}
.faq-item h3 {
  margin-bottom: 12px;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -.04em;
}
.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}
.faq-item code {
  color: #fff;
  font-family: var(--font-tech);
  font-size: .94em;
  font-weight: 700;
}

.apply-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(30,199,255,.13), transparent 28rem),
    radial-gradient(circle at 12% 100%, rgba(10,99,255,.12), transparent 30rem),
    linear-gradient(180deg, #082044 0%, #071a36 100%);
}
.apply-section .section-header {
  padding: 0 0 8px;
}
.beta-form {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(30,199,255,.075), transparent 24rem),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
  box-shadow: 0 26px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
label { display:grid; gap:10px; color: rgba(245,250,255,.9); font-size:14px; font-weight:750; letter-spacing:.01em; }
input,select,textarea {
  width:100%;
  border:1px solid rgba(139,181,255,.24);
  border-radius:14px;
  padding:16px 15px;
  color:#fff;
  background: rgba(255,255,255,.05);
  font: inherit;
  font-size:15px;
  line-height:1.35;
}
textarea { resize: vertical; min-height: 156px; }
input::placeholder,textarea::placeholder { color: rgba(211,225,247,.44); }
input:focus,select:focus,textarea:focus { outline: 3px solid rgba(10,99,255,.26); border-color: var(--cyan); background: rgba(255,255,255,.07); }
select option { background: #08152b; color:#fff; }
.consent-line {
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(139,181,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.028);
}
.consent-line input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; }
.privacy-note {
  margin: -6px 0 0;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.55;
}
.privacy-note a {
  color: var(--cyan);
  font-weight: 750;
  text-underline-offset: 3px;
}
.hidden-field { position:absolute; left:-9999px; width:1px; height:1px; }
.form-submit { width:fit-content; margin-top: 4px; }
.form-status { min-height:24px; margin:0; color: var(--muted); line-height:1.5; }
.form-status.success { color: var(--cyan); }
.form-status.error { color: #ff9f93; }

.site-footer {
  padding: 34px clamp(24px, 4vw, 72px);
  color: rgba(211,225,247,.62);
  background:#05122a;
  border-top:1px solid rgba(139,181,255,.14);
}
.footer-main,
.footer-meta {
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items:center;
  gap:32px;
}
.footer-main {
  padding-bottom:26px;
}
.footer-meta {
  padding-top:22px;
  border-top:1px solid rgba(139,181,255,.12);
}
.footer-brand .brand-logo { width: 144px; }
.footer-nav,
.footer-resources {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-nav { gap:16px 28px; }
.footer-resources { gap:16px 24px; }
.footer-legal { line-height: 1.55; font-size: 14px; }
.footer-legal strong { color: rgba(255,255,255,.86); font-weight: 750; }
.site-footer a { color: rgba(211,225,247,.72); text-decoration:none; }
.site-footer a:hover { color:#fff; }

@keyframes pathFlow { to { stroke-dashoffset: -270; } }
@keyframes packetMove { to { offset-distance: 100%; } }
@keyframes corePulse { 0%,100% { r:42; opacity:1; } 50% { r:48; opacity:.9; } }

@media (max-width: 1240px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 880px; }
  .hero-visual { min-height: 560px; }
  .mesh-card { left: 8%; }
  .hero-proof { grid-template-columns: 1fr; }
  .proof-card { border-right:0; border-bottom:1px solid rgba(139,181,255,.12); }
  .proof-card:last-child { border-bottom:0; }
  .architecture-flow { grid-template-columns:1fr; }
  .flow-arrow { transform: rotate(90deg); min-height: 20px; }
}
@media (max-width: 940px) {
  .site-header { position:absolute; grid-template-columns: 1fr auto; }
  .nav-links { display:none; }
  .brand-logo { width: 148px; }
  .hero-inner { width:min(100% - 36px, 1180px); padding-top: 118px; }
  .feature-grid,.beta-columns,.split-header { grid-template-columns: 1fr; }
  .hero-visual { min-height: 480px; }
  .hero-network { inset: 0 -130px 0 -120px; width: calc(100% + 250px); transform: scale(.92); transform-origin:center; }
  .mesh-card { width: min(420px, calc(100vw - 72px)); min-height: 118px; padding: 24px 26px; top: 36%; left: 2%; }
  .mesh-card img { width:54px; height:54px; }
  .mesh-card strong { font-size: 25px; }
  .mesh-card span { font-size: 17px; }
  .federation-map { height: 620px; }
  .federation-map svg { inset: 90px -170px 0 -170px; width: calc(100% + 340px); }
  .community { left: 2%; top: 90px; }
  .enterprise { left: 2%; bottom: 120px; }
  .private { right: 2%; bottom: 120px; }
  .public { right: 1%; top: 90px; }
  .selfhosted { left: 18%; bottom: 40px; }
  .cloudprovider { bottom: 18px; }
  .footer-main,
  .footer-meta {
    grid-template-columns:1fr;
    align-items:start;
    gap:20px;
  }
  .footer-nav,
  .footer-resources {
    justify-content:flex-start;
  }
}
@media (max-width: 640px) {
  .site-header { padding: 18px; }
  .nav-cta { padding: 10px 14px; }
  h1 { font-size: clamp(27px, 8.3vw, 44px); }
  .hero-title-highlight { font-size: clamp(25px, 7.2vw, 36px); letter-spacing: -.07em; white-space: normal; }
  .hero-support { font-size: 18px; }
  .button,.hero-actions { width:100%; }
  .hero-badges { gap: 12px; }
  .hero-visual { min-height: 420px; }
  .hero-network { inset: 12px -190px 0 -170px; width: calc(100% + 360px); transform: scale(.82); }
  .mesh-card { top: 37%; left: 0; gap: 14px; padding: 20px 18px; }
  .mesh-card img { width:44px; height:44px; }
  .mesh-card strong { font-size: 21px; }
  .mesh-card span { font-size: 15px; margin-top:7px; }
  .proof-card { grid-template-columns: 56px 1fr; padding: 24px; }
  .proof-icon { width:52px; height:52px; }
  .proof-icon svg { width:32px; height:32px; }
  .section { padding: 78px 18px; }
  .federation-map { height: 600px; margin-top: 0; }
  .federation-map svg { inset: 106px -230px 0 -230px; width: calc(100% + 460px); transform:scale(.9); }
  .fed-item { font-size:12px; }
  .server-stack { width:48px; }
  .fed-core-card img { width:66px; height:66px; }
  .form-row { grid-template-columns:1fr; }
  .beta-form { padding: 24px; gap:18px; border-radius:20px; }
  input,select,textarea { padding:15px 14px; }
  .consent-line { padding:14px 15px; }
  .form-submit { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* v13 — devFlorence makers section */
.makers-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 139, 68, .12), transparent 28rem),
    radial-gradient(circle at 84% 16%, rgba(30,199,255,.11), transparent 30rem),
    linear-gradient(180deg, #071a36 0%, #0a2142 48%, #071735 100%);
}
.makers-header { align-items: center; }
.makers-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(320px, 1.15fr) minmax(220px, .8fr) auto;
  gap: clamp(22px, 3vw, 38px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(139,181,255,.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 139, 68, .12), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.090), rgba(255,255,255,.038));
  box-shadow: 0 28px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.makers-card::before {
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .52;
  mask-image: radial-gradient(ellipse at 35% 52%, #000 0%, rgba(0,0,0,.7) 42%, transparent 100%);
}
.makers-card:hover,
.makers-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 139, 68, .46);
  box-shadow: 0 34px 100px rgba(0,0,0,.24), 0 0 48px rgba(255,139,68,.12), inset 0 1px 0 rgba(255,255,255,.08);
  outline: none;
}
.makers-identity,
.makers-copy,
.makers-proof,
.makers-link { position: relative; z-index: 1; }
.makers-identity {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 178px;
  padding: 24px;
  border: 1px solid rgba(139,181,255,.14);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(3, 8, 23, .42), rgba(255,255,255,.035));
}
.df-mark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 22px;
  background: linear-gradient(135deg, #10243a, #071326);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.16em;
}
.df-mark span:first-child { color:#fff; }
.df-mark span:last-child { color:#ff8f4d; font-family: Georgia, serif; letter-spacing: -.12em; }
.df-wordmark {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(25px, 2.5vw, 35px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: #fff;
}
.df-wordmark strong { color: #ff8f4d; font-weight: 800; }
.makers-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .98;
}
.makers-copy p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.makers-label {
  display: block;
  margin-bottom: 14px;
  color: #ffad75;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 850;
}
.makers-proof {
  display: grid;
  gap: 12px;
}
.makers-proof span {
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 16px 18px;
  border: 1px solid rgba(139,181,255,.15);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 13px;
  line-height: 1.35;
}
.makers-proof strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.04em;
}
.makers-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  font-size: 0;
  background: linear-gradient(135deg, #ff9d5e, #0a63ff);
  box-shadow: 0 16px 40px rgba(10,99,255,.20), 0 0 30px rgba(255,139,68,.16);
}
.makers-link span { font-size: 28px; line-height: 1; }

@media (max-width: 1120px) {
  .makers-card { grid-template-columns: 1fr; }
  .makers-identity { min-height: 0; }
  .makers-proof { grid-template-columns: repeat(3, 1fr); }
  .makers-link { width: auto; height: auto; justify-self: start; padding: 14px 20px; border-radius: 999px; font-size: 15px; font-weight: 800; }
  .makers-link span { margin-left: 6px; font-size: 17px; }
}
@media (max-width: 700px) {
  .makers-proof { grid-template-columns: 1fr; }
  .makers-card { padding: 22px; border-radius: 22px; }
  .makers-identity { padding: 18px; }
  .df-mark { width: 72px; height: 72px; font-size: 36px; border-radius: 18px; }
}
.makers-mark {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.20));
}
.makers-wordmark {
  display: block;
  width: min(260px, 100%);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.20));
}
@media (max-width: 700px) {
  .makers-mark { width: 76px; height: 76px; }
  .makers-wordmark { width: min(220px, 100%); }
}

/* v14 — communication polish */
.architecture-outcome {
  max-width: 880px;
  margin: 30px auto 0;
  padding: 22px 26px;
  border: 1px solid rgba(30,199,255,.24);
  border-radius: 18px;
  color: rgba(232, 243, 255, .84);
  background: linear-gradient(135deg, rgba(10,99,255,.11), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  font-size: 17px;
  line-height: 1.65;
  text-align: center;
}

/* v17 logo refinement: flowing N topology mark + futuristic wordmark */
:root {
  --font-brand: "Oxanium", "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}
.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  display: block;
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 12px 30px rgba(30, 199, 255, .32));
}
.brand-wordmark {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .055em;
  color: #fff;
  text-transform: lowercase;
  text-shadow: 0 10px 30px rgba(30, 199, 255, .14);
}
.footer-brand .brand-mark {
  width: 46px;
  height: 46px;
}
.footer-brand .brand-wordmark {
  font-size: 24px;
}

/* Privacy notice page */
.privacy-page {
  min-height: 100svh;
}
.privacy-page .section-header {
  max-width: 860px;
}
.privacy-page h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}
.privacy-content {
  display: grid;
  gap: 22px;
  max-width: 940px;
}
.privacy-block {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(139,181,255,.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.036));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 52px rgba(0,0,0,.10);
}
.privacy-block h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.privacy-block p,
.privacy-block li {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}
.privacy-block p:last-child,
.privacy-block ul:last-child {
  margin-bottom: 0;
}
.privacy-block a {
  color: var(--cyan);
  font-weight: 750;
  text-underline-offset: 4px;
}
.privacy-request-form {
  max-width: 940px;
  margin: 34px 0 0;
}
.privacy-request-form textarea {
  min-height: 128px;
}
.mesh-card img,
.stack-core img,
.fed-core-card img {
  filter: drop-shadow(0 12px 26px rgba(30,199,255,.28));
}
@media (max-width: 760px) {
  .brand-mark { width: 42px; height: 42px; }
  .brand-wordmark { font-size: 23px; letter-spacing: .04em; }
}

/* v20 — Hero artwork aligned with the refined Flow-N identity */
.hero-flow-visual {
  min-height: 660px;
}
.flow-network {
  inset: -28px -210px -26px -90px;
  width: calc(100% + 300px);
  height: calc(100% + 54px);
  max-width: none;
}
.hero-flow-visual .visual-glow-one {
  width: 420px;
  height: 420px;
  right: 21%;
  top: 22%;
  background: rgba(30,199,255,.16);
}
.hero-flow-visual .visual-glow-two {
  width: 330px;
  height: 330px;
  left: 18%;
  bottom: 16%;
  background: rgba(42,92,255,.15);
}
.hero-grid-lines path {
  fill: none;
  stroke: rgba(139,181,255,.055);
  stroke-width: 1;
}
.flow-orbits ellipse {
  fill: none;
  stroke: rgba(43,98,255,.22);
  stroke-width: 1.15;
  stroke-dasharray: 7 13;
  transform-origin: 452px 306px;
  animation: flowOrbitDrift 18s linear infinite;
}
.flow-orbits ellipse:nth-child(2) {
  stroke: rgba(30,199,255,.18);
  animation-duration: 14s;
  animation-direction: reverse;
}
.flow-orbits ellipse:nth-child(3) {
  stroke: rgba(124,92,255,.16);
  animation-duration: 22s;
}
.matrix-node {
  color: rgba(235,247,255,.86);
  filter: drop-shadow(0 0 22px rgba(37,104,255,.36));
}
.matrix-node text {
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  fill: rgba(235,247,255,.78);
}
.flow-streams path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-streams .stream {
  stroke: url(#flowStroke);
  stroke-width: 1.8;
  opacity: .84;
  filter: drop-shadow(0 0 11px rgba(30,199,255,.40));
  stroke-dasharray: 36 280;
  animation: streamFlow 7.4s linear infinite;
}
.flow-streams .stream-b { animation-delay: -1.2s; }
.flow-streams .stream-c { animation-delay: -2.3s; }
.flow-streams .stream-d { animation-delay: -3.4s; }
.flow-streams .stream-e { animation-delay: -4.1s; }
.flow-streams .stream-f { animation-delay: -5.2s; }
.flow-streams .soft {
  stroke: url(#softStroke);
  stroke-width: 1.05;
  opacity: .5;
  stroke-dasharray: 4 12;
  animation-duration: 13s;
}
.message-packets {
  opacity: .82;
}
.n-path {
  fill: none;
  stroke: url(#flowStroke);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(30,199,255,.55));
}
.n-cross {
  stroke-width: 2.5;
  opacity: .66;
}
.n-node {
  stroke: rgba(255,255,255,.58);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 16px rgba(30,199,255,.65));
}
.n-node.bright { fill: url(#flowNode); }
.n-node.cyan { fill: #18c7ff; }
.n-node.blue { fill: #0a63ff; }
.n-node.white { fill: #f7fbff; }
.n-node.core {
  fill: #0a63ff;
  stroke-width: 2;
  animation: flowCorePulse 3s ease-in-out infinite;
}
.flow-caption {
  font-family: var(--font-brand);
  filter: drop-shadow(0 0 18px rgba(10,99,255,.28));
}
.flow-caption .caption-title {
  fill: var(--cyan);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .28em;
}
.flow-caption .caption-sub {
  fill: rgba(241,247,255,.84);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .22em;
}
.flow-caption .aws-word {
  fill: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
}
@keyframes streamFlow {
  to { stroke-dashoffset: -316; }
}
@keyframes flowOrbitDrift {
  to { transform: rotate(360deg); }
}
@keyframes flowCorePulse {
  0%, 100% { r: 17; opacity: 1; }
  50% { r: 22; opacity: .88; }
}
@media (max-width: 1240px) {
  .hero-flow-visual { min-height: 620px; }
  .flow-network { inset: -24px -170px -24px -125px; width: calc(100% + 320px); }
}
@media (max-width: 940px) {
  .hero-flow-visual { min-height: 540px; }
  .flow-network { inset: -8px -220px 0 -220px; width: calc(100% + 440px); transform: scale(.9); transform-origin: center; }
}
@media (max-width: 640px) {
  .hero-flow-visual { min-height: 430px; }
  .flow-network { inset: 0 -280px 0 -280px; width: calc(100% + 560px); transform: scale(.78); }
  .matrix-node text, .flow-caption { opacity: .82; }
}


/* v21 — integrated high-fidelity graphics */
.art-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139,181,255,.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(30,199,255,.08), transparent 24rem),
    linear-gradient(135deg, rgba(4,12,31,.82), rgba(8,23,52,.58));
  box-shadow: 0 28px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.art-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
.art-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-grid {
  grid-template-columns: minmax(560px, .86fr) minmax(640px, 1.14fr);
  gap: clamp(36px, 4.8vw, 74px);
}
.hero-visual {
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art-frame {
  width: min(100%, 920px);
  aspect-ratio: 1816 / 866;
  border-color: rgba(30,199,255,.18);
  border-radius: 32px;
  background: transparent;
  box-shadow: 0 40px 110px rgba(0,0,0,.30);
}
.hero-art-frame img {
  object-fit: cover;
  transform: scale(1.02);
}
.federation-map.art-frame,
.product-stack.art-frame,
.architecture-flow.art-frame {
  height: auto;
  min-height: 0;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.federation-map.art-frame {
  aspect-ratio: 670 / 386;
  margin-top: 34px;
  border-color: rgba(30,199,255,.18);
}
.extensibility-art-frame {
  aspect-ratio: 608 / 463;
  min-height: 0;
  border-color: rgba(30,199,255,.18);
}
.architecture-flow.art-frame {
  display: block;
  aspect-ratio: 1200 / 850;
  margin-top: 34px;
  border-color: rgba(139,181,255,.18);
}
.federation-map.art-frame::before,
.product-stack.art-frame::before {
  display: none;
}
.architecture-flow.art-frame img,
.federation-map.art-frame img,
.extensibility-art-frame img {
  object-fit: cover;
}
@media (max-width: 1220px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 880px; }
  .hero-visual { min-height: auto; }
  .hero-art-frame { width: 100%; }
}
@media (max-width: 900px) {
  .extensibility-layout { grid-template-columns: 1fr; }
  .extensibility-art-frame { width: 100%; }
}
@media (max-width: 640px) {
  .hero-art-frame { border-radius: 22px; }
  .federation-map.art-frame,
  .architecture-flow.art-frame,
  .extensibility-art-frame { border-radius: 22px; }
}

/* v22: responsive hero artwork sizing
   The Flow-N hero graphic is intentionally the main visual asset, but it should
   not collapse into an oversized block when the layout stacks. Keep it larger
   on desktop, then cap it as a contained feature panel on narrower screens. */
.hero-inner {
  width: min(1540px, calc(100% - 64px));
}
.hero-grid {
  grid-template-columns: minmax(500px, .76fr) minmax(720px, 1.24fr);
  gap: clamp(36px, 4.4vw, 72px);
}
.hero-copy {
  max-width: 680px;
}
.hero-visual {
  min-height: clamp(420px, 39vw, 620px);
  justify-content: flex-start;
}
.hero-art-frame {
  width: clamp(760px, 55vw, 1080px);
  max-width: 100%;
  aspect-ratio: 1816 / 866;
  transform: translateX(-10px);
}
.hero-art-frame img {
  object-fit: cover;
  transform: scale(1.015);
}
@media (max-width: 1380px) {
  .hero-grid {
    grid-template-columns: minmax(470px, .82fr) minmax(600px, 1.18fr);
    gap: clamp(30px, 3.6vw, 56px);
  }
  .hero-art-frame {
    width: min(58vw, 940px);
    transform: translateX(0);
  }
}
@media (max-width: 1160px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .hero-copy {
    max-width: 760px;
  }
  .hero-visual {
    min-height: auto;
    justify-content: flex-start;
  }
  .hero-art-frame {
    width: min(860px, 88vw);
    max-width: 100%;
    margin-top: 6px;
    transform: none;
  }
}
@media (max-width: 760px) {
  .hero-inner {
    width: min(100% - 36px, 1180px);
  }
  .hero-grid {
    gap: 34px;
  }
  .hero-art-frame {
    width: 100%;
    aspect-ratio: 16 / 8.6;
    border-radius: 24px;
  }
}
@media (max-width: 520px) {
  .hero-art-frame {
    aspect-ratio: 16 / 10;
  }
  .hero-art-frame img {
    transform: scale(1.05);
  }
}

/* v23: extensibility graphic cleanup
   The integrated extensibility artwork is a full 16:9 section graphic. Keep the whole
   composition visible so the left text and top-left label are not clipped, and avoid
   browser upscaling blur by using the higher-resolution asset. */
.extensibility-art-frame {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.extensibility-art-frame img {
  object-fit: contain !important;
  transform: none !important;
}
@media (max-width: 900px) {
  .extensibility-art-frame {
    aspect-ratio: 16 / 9;
  }
}


/* v24: extensibility diagram-only asset
   The graphic now contains only the platform diagram. Section titles and copy stay in HTML,
   avoiding double backgrounds, embedded section labels, and cropped text. */
.extensibility-art-frame {
  aspect-ratio: 1204 / 954;
  min-height: 0;
  border-color: rgba(30,199,255,.20);
  background:
    radial-gradient(circle at 50% 42%, rgba(30,199,255,.14), transparent 18rem),
    linear-gradient(135deg, rgba(2,8,22,.96), rgba(8,24,52,.86));
}
.extensibility-art-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transform: none !important;
}
@media (max-width: 900px) {
  .extensibility-art-frame {
    aspect-ratio: 1204 / 954;
  }
}

/* v25: remove residual cropped text from extensibility artwork.
   The asset is now a tighter diagram-only crop, so match the frame ratio and avoid any browser crop. */
.extensibility-art-frame {
  aspect-ratio: 1215 / 890;
}
.extensibility-art-frame img {
  object-fit: contain !important;
  width: 100%;
  height: 100%;
}

/* v26: extensibility diagram frame correction
   The diagram crop now includes the full bottom border and is centered without
   leftover section text artifacts. Match the natural asset ratio so the browser
   does not crop the lower security/compliance layer. */
.extensibility-art-frame {
  aspect-ratio: 1215 / 942;
}
.extensibility-art-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}


/* v28: native extensibility diagram
   Replaced the raster screenshot-like asset with a native HTML/CSS/SVG diagram.
   This prevents cropped text, black patch artifacts, and blurry embedded labels. */
.extensibility-art-frame.extensibility-diagram {
  position: relative;
  display: grid;
  grid-template-rows: auto 46px auto auto;
  gap: 0;
  aspect-ratio: auto;
  min-height: 640px;
  padding: clamp(26px, 4vw, 56px);
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(33, 199, 255, .22);
  background:
    radial-gradient(circle at 52% 35%, rgba(38, 122, 255, .24), transparent 18rem),
    radial-gradient(circle at 82% 20%, rgba(123, 92, 255, .16), transparent 15rem),
    linear-gradient(135deg, rgba(2, 8, 24, .98), rgba(4, 16, 40, .94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 32px 90px rgba(0,0,0,.28);
}
.extensibility-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 169, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 169, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .45;
  pointer-events: none;
}
.extensibility-diagram::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 54%;
  height: 34%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(40, 190, 255, .16);
  border-radius: 999px;
  filter: blur(.1px);
  pointer-events: none;
}
.extensibility-diagram > * { position: relative; z-index: 1; }
.ext-app-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
.ext-app-card {
  min-height: 136px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px 12px 16px;
  border: 1px solid rgba(33, 199, 255, .26);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 24, 56, .82), rgba(8, 16, 42, .70));
  color: #f7fbff;
  text-align: center;
  font-weight: 800;
  line-height: 1.22;
  box-shadow: inset 0 0 22px rgba(40, 133, 255, .08), 0 12px 38px rgba(0,0,0,.22);
}
.ext-app-card svg,
.ext-base-card svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px currentColor);
}
.ext-purple { color: #b56bff; border-color: rgba(181, 107, 255, .45); }
.ext-blue { color: #39c8ff; border-color: rgba(57, 200, 255, .42); }
.ext-green { color: #22e6bd; border-color: rgba(34, 230, 189, .36); }
.ext-orange { color: #ff8f3d; border-color: rgba(255, 143, 61, .38); }
.ext-violet { color: #9a70ff; border-color: rgba(154, 112, 255, .43); }
.ext-app-card span { color: #eef7ff; text-shadow: 0 0 18px rgba(255,255,255,.16); }
.ext-connectors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  justify-items: center;
  height: 46px;
}
.ext-connectors span {
  width: 2px;
  height: 38px;
  border-left: 2px dotted rgba(46, 185, 255, .65);
  filter: drop-shadow(0 0 8px rgba(46,185,255,.7));
}
.ext-connectors span:nth-child(1),
.ext-connectors span:nth-child(2) { transform: translateX(44px); }
.ext-connectors span:nth-child(4),
.ext-connectors span:nth-child(5) { transform: translateX(-44px); }
.ext-platform-card {
  width: min(760px, 82%);
  justify-self: center;
  border: 1px solid rgba(33, 199, 255, .28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(4, 13, 34, .88), rgba(5, 12, 30, .74));
  box-shadow: 0 18px 62px rgba(0,0,0,.28), inset 0 0 38px rgba(22,118,255,.10);
  overflow: hidden;
}
.ext-platform-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: clamp(28px, 4vw, 42px) clamp(22px, 3vw, 36px);
  border-bottom: 1px solid rgba(33, 199, 255, .18);
}
.ext-platform-head img {
  width: clamp(86px, 10vw, 120px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(42,195,255,.65));
}
.ext-platform-head strong {
  display: block;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1;
}
.ext-platform-head span {
  display: block;
  margin-top: 6px;
  color: #2fc7ff;
  font-family: var(--font-tech, 'Oxanium', sans-serif);
  font-size: clamp(14px, 1.8vw, 22px);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.ext-api-layer {
  padding: 22px 28px 26px;
  text-align: center;
}
.ext-api-layer small {
  display: block;
  margin-bottom: 16px;
  color: #eaf7ff;
  font-weight: 800;
  font-size: 16px;
}
.ext-api-pills {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ext-api-pills span {
  border: 1px solid rgba(101, 93, 255, .42);
  border-radius: 10px;
  background: rgba(51, 36, 128, .52);
  color: #e8e9ff;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 0 18px rgba(83, 72, 255, .14);
}
.ext-base-card {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  border: 1px solid rgba(74, 174, 255, .22);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px) clamp(18px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(3, 11, 30, .72), rgba(3, 8, 22, .64));
  box-shadow: inset 0 0 32px rgba(43, 119, 255, .07);
}
.ext-base-card div {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #64caff;
  text-align: center;
}
.ext-base-card span {
  color: #ecf6ff;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}
@media (max-width: 1020px) {
  .extensibility-art-frame.extensibility-diagram { min-height: 0; padding: 28px; }
  .ext-app-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ext-app-card:last-child { grid-column: 1 / -1; }
  .ext-connectors { display: none; }
  .ext-platform-card { width: 100%; margin-top: 24px; }
  .ext-base-card { grid-template-columns: repeat(2, 1fr); }
  .ext-base-card div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ext-app-row, .ext-base-card { grid-template-columns: 1fr; }
  .ext-app-card:last-child, .ext-base-card div:last-child { grid-column: auto; }
  .ext-platform-head { flex-direction: column; text-align: center; }
}


/* v29: restore original high-fidelity extensibility artwork as a cleaned raster diagram.
   Keep section text in HTML, but preserve the original graphic style instead of the native redraw. */
.extensibility-art-frame.ext-raster-frame {
  aspect-ratio: 1198 / 970;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(30,199,255,.20);
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(8,24,52,.86));
}
.extensibility-art-frame.ext-raster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}
@media (max-width: 900px) {
  .extensibility-art-frame.ext-raster-frame {
    aspect-ratio: 1198 / 970;
  }
}

/* v30: extensibility artwork responsiveness and sharpness
   Keep the original high-fidelity raster artwork, but prevent it from staying beside the text
   when the browser is too narrow. Also avoid scaling it up beyond its natural visual weight. */
.extensibility-art-frame.ext-raster-frame {
  width: 100%;
  max-width: 760px;
  justify-self: center;
}
.extensibility-art-frame.ext-raster-frame img {
  image-rendering: auto;
  backface-visibility: hidden;
}
@media (max-width: 1180px) {
  .extensibility-layout {
    grid-template-columns: 1fr;
  }
  .extensibility-panel {
    min-height: auto;
  }
  .extensibility-art-frame.ext-raster-frame {
    width: min(100%, 900px);
    max-width: 900px;
    margin-inline: auto;
    aspect-ratio: 1198 / 970;
  }
}
@media (max-width: 680px) {
  .extensibility-art-frame.ext-raster-frame {
    width: 100%;
    border-radius: 22px;
  }
}

/* v31: federation artwork cleanup
   Use a diagram-only crop, with no embedded section copy/legend, and avoid oversized scaling. */
.federation-map.art-frame {
  aspect-ratio: 490 / 310;
  max-width: 980px;
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(8,24,52,.88));
}
.federation-map.art-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}
@media (max-width: 900px) {
  .federation-map.art-frame {
    max-width: 100%;
    aspect-ratio: 490 / 310;
  }
}

/* v32: federation artwork restored from the original section graphic.
   Keep a less-magnified crop, remove embedded text using a left-side fade,
   and match the natural aspect ratio so the diagram is not cropped. */
.federation-map.art-frame {
  aspect-ratio: 1396 / 820;
  max-width: 1120px;
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(8,24,52,.88));
}
.federation-map.art-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .federation-map.art-frame {
    aspect-ratio: 1396 / 820;
    max-width: 100%;
  }
}


/* v35: final federation graphic polish.
   The image is cropped inside its own generated border and re-centered so the
   page frame provides the only visible edge. */
.federation-map.art-frame {
  aspect-ratio: 1455 / 895;
  max-width: 1220px;
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(7,20,48,.82));
  border-color: rgba(30,199,255,.16);
}
.federation-map.art-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .federation-map.art-frame {
    aspect-ratio: 1455 / 895;
    max-width: 100%;
  }
}

/* v37: restore the clean regenerated federation artwork from the original preview.
   Keep the image unpainted/unshifted to preserve detail and avoid right-edge artifacts. */
.federation-map.art-frame {
  aspect-ratio: 1600 / 983;
  max-width: 1220px;
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(7,20,48,.82));
  border-color: rgba(30,199,255,.14);
  overflow: hidden;
}
.federation-map.art-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  image-rendering: auto;
}
@media (max-width: 900px) {
  .federation-map.art-frame {
    aspect-ratio: 1600 / 983;
    max-width: 100%;
  }
}


/* v38: federation graphic centered crop and internal-edge removal
   Uses a clean crop from the regenerated artwork: no embedded inner frame,
   no right-edge artifact, and a visually centered diagram composition. */
.federation-map.art-frame {
  aspect-ratio: 1480 / 870;
  max-width: 1220px;
  background: linear-gradient(135deg, rgba(2,8,22,.96), rgba(7,20,48,.82));
  border-color: rgba(30,199,255,.14);
  overflow: hidden;
}
.federation-map.art-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  image-rendering: auto;
}
@media (max-width: 900px) {
  .federation-map.art-frame {
    aspect-ratio: 1480 / 870;
    max-width: 100%;
  }
}

/* v41: normalize hero/main section to the same page grid as the rest of the site.
   The hero remains visually strong, but it no longer uses a much wider container
   than the following sections. */
:root {
  --site-grid-max: 1280px;
}

.section {
  padding-left: max(28px, calc((100vw - var(--site-grid-max)) / 2));
  padding-right: max(28px, calc((100vw - var(--site-grid-max)) / 2));
}

.hero-inner {
  width: min(var(--site-grid-max), calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}

.hero-grid {
  grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
  gap: clamp(34px, 3.8vw, 58px);
  align-items: center;
}

.hero-copy {
  max-width: 650px;
}

h1 {
  max-width: 650px;
}

.hero-title-highlight {
  font-size: clamp(34px, 3.25vw, 50px);
}

.hero-visual {
  min-height: auto;
  justify-content: center;
}

.hero-art-frame {
  width: 100%;
  max-width: 650px;
  transform: none;
}

.hero-art-frame img {
  transform: none;
  object-fit: cover;
}

@media (max-width: 1220px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .hero-copy {
    max-width: 760px;
  }
  h1 {
    max-width: 760px;
  }
  .hero-visual {
    justify-content: flex-start;
  }
  .hero-art-frame {
    width: min(900px, 100%);
    max-width: 900px;
  }
}

@media (max-width: 760px) {
  .hero-inner {
    width: min(100% - 36px, var(--site-grid-max));
  }
  .section {
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-title-highlight {
    white-space: normal;
  }
}

/* v42: hero visual balance
   Keep the hero aligned with the page grid, but give the new Flow-N artwork
   enough visual weight next to the headline. */
:root {
  --site-grid-max: 1360px;
}

.hero-grid {
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: clamp(34px, 3.2vw, 54px);
}

.hero-copy,
h1 {
  max-width: 600px;
}

.hero-art-frame {
  width: 100%;
  max-width: 780px;
}

@media (max-width: 1220px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy,
  h1 {
    max-width: 760px;
  }
  .hero-art-frame {
    width: min(900px, 100%);
    max-width: 900px;
  }
}


/* v43: larger hero artwork and safer headline wrapping
   Split the category line so the Flow-N artwork can grow without colliding
   with the end of "Federation" at desktop widths. */
.hero-grid {
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(34px, 3.6vw, 60px);
}

.hero-copy,
h1 {
  max-width: 540px;
}

h1 {
  margin-bottom: 27px;
}

.hero-title-highlight {
  font-size: clamp(35px, 3.15vw, 50px);
  line-height: .98;
}

.hero-title-highlight-second {
  margin-top: 2px;
}

.hero-support {
  max-width: 560px;
}

.hero-visual {
  justify-content: flex-end;
}

.hero-art-frame {
  max-width: 920px;
  width: min(100%, 920px);
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1440px, calc(100% - 64px));
  }
  .hero-art-frame {
    max-width: 960px;
  }
}

@media (max-width: 1320px) {
  .hero-grid {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: clamp(30px, 3vw, 46px);
  }
  .hero-title-highlight {
    font-size: clamp(34px, 3.05vw, 46px);
  }
  .hero-art-frame {
    max-width: 860px;
  }
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-copy,
  h1 {
    max-width: 760px;
  }
  .hero-visual {
    justify-content: flex-start;
  }
  .hero-art-frame {
    width: min(940px, 100%);
    max-width: 940px;
  }
}

@media (max-width: 760px) {
  .hero-title-highlight {
    white-space: normal;
    font-size: clamp(31px, 8.2vw, 40px);
  }
  .hero-art-frame {
    width: 100%;
    aspect-ratio: 1816 / 866;
  }
}


/* v44: final hero balance refinements
   Make the hero artwork slightly larger, split the category title as
   "Serverless" / "Matrix Federation", and keep the three assurance
   badges on a single line on desktop. */
.hero-grid {
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(30px, 2.9vw, 46px);
}

.hero-copy,
h1 {
  max-width: 500px;
}

.hero-title-highlight {
  font-size: clamp(35px, 3.25vw, 51px);
}

.hero-title-highlight-second {
  margin-top: 2px;
}

.hero-art-frame {
  width: 100%;
  max-width: 1010px;
}

.hero-badges {
  flex-wrap: nowrap;
  gap: 16px;
  font-size: 14px;
}

.hero-badges span {
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1480px, calc(100% - 64px));
  }
  .hero-art-frame {
    max-width: 1060px;
  }
}

@media (max-width: 1320px) {
  .hero-grid {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: clamp(28px, 2.8vw, 42px);
  }
  .hero-copy,
  h1 {
    max-width: 490px;
  }
  .hero-art-frame {
    max-width: 960px;
  }
  .hero-badges {
    gap: 12px;
    font-size: 13.5px;
  }
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-copy,
  h1 {
    max-width: 760px;
  }
  .hero-visual {
    justify-content: flex-start;
  }
  .hero-art-frame {
    width: min(980px, 100%);
    max-width: 980px;
  }
  .hero-badges {
    flex-wrap: wrap;
    gap: 16px 22px;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .hero-title-highlight {
    white-space: normal;
    font-size: clamp(31px, 8.2vw, 40px);
  }
  .hero-art-frame {
    width: 100%;
    aspect-ratio: 1816 / 866;
  }
  .hero-badges {
    flex-wrap: wrap;
  }
}

/* v45: hero artwork scale and baseline alignment
   Give the Flow-N hero image enough size to be readable and align its lower edge
   with the proof badges so the visual feels integrated with the text block. */
.hero-inner {
  width: min(1560px, calc(100% - 48px));
}

.hero-grid {
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: clamp(28px, 2.6vw, 44px);
  align-items: end;
}

.hero-copy,
h1 {
  max-width: 440px;
}

.hero-support {
  max-width: 480px;
}

.hero-art-frame {
  width: min(100%, 1120px);
  max-width: 1120px;
}

.hero-visual {
  align-self: end;
  justify-content: flex-end;
  padding-bottom: 4px;
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1600px, calc(100% - 56px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: clamp(32px, 2.8vw, 52px);
  }
  .hero-art-frame {
    max-width: 1180px;
  }
}

@media (max-width: 1360px) {
  .hero-inner {
    width: min(1440px, calc(100% - 40px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 30px;
  }
  .hero-copy,
  h1 {
    max-width: 430px;
  }
  .hero-art-frame {
    max-width: 1040px;
  }
}

@media (max-width: 1120px) {
  .hero-inner {
    width: min(var(--site-grid-max), calc(100% - 48px));
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }
  .hero-copy,
  h1 {
    max-width: 760px;
  }
  .hero-support {
    max-width: 690px;
  }
  .hero-visual {
    align-self: start;
    justify-content: flex-start;
    padding-bottom: 0;
  }
  .hero-art-frame {
    width: min(100%, 980px);
    max-width: 980px;
  }
}

@media (max-width: 760px) {
  .hero-inner {
    width: min(100% - 36px, var(--site-grid-max));
  }
  .hero-art-frame {
    width: 100%;
    max-width: 100%;
  }
}

/* v47: stronger hero artwork presence
   The Flow-N hero diagram is the primary visual asset, so it should read clearly
   without drifting outside the shared page grid. The frame is enlarged, lifted to
   align with the Neurons title, and its right edge remains aligned with the main
   hero/proof grid. */
@media (min-width: 1121px) {
  .hero-inner {
    width: min(1520px, calc(100% - 64px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
    gap: clamp(24px, 2.2vw, 34px);
    align-items: start;
  }
  .hero-copy,
  h1 {
    max-width: 450px;
  }
  .hero-title-highlight {
    font-size: clamp(35px, 3.2vw, 51px);
  }
  .hero-visual {
    justify-content: flex-end;
    align-self: start;
    padding-top: 2px;
  }
  .hero-art-frame {
    width: 100%;
    max-width: 1110px;
    margin-top: -18px;
  }
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1560px, calc(100% - 64px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 455px) minmax(0, 1fr);
    gap: 32px;
  }
  .hero-copy,
  h1 {
    max-width: 455px;
  }
  .hero-art-frame {
    max-width: 1160px;
    margin-top: -22px;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-inner {
    width: min(100% - 44px, 1320px);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: 26px;
  }
  .hero-copy,
  h1 {
    max-width: 430px;
  }
  .hero-art-frame {
    max-width: 940px;
    margin-top: -10px;
  }
}

/* v48: implement sketched hero artwork size
   The hero image should be genuinely larger, not only translated. We keep the
   shared grid, reduce the copy column slightly, let the visual column claim more
   horizontal space, and expand the frame toward the right edge while preserving
   a safe gap from the headline. */
@media (min-width: 1121px) {
  .hero-inner {
    width: min(1640px, calc(100% - 32px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
    gap: clamp(18px, 1.5vw, 26px);
    align-items: start;
  }
  .hero-copy,
  h1 {
    max-width: 390px;
  }
  .hero-title-brand {
    font-size: clamp(48px, 4.15vw, 70px);
  }
  .hero-title-highlight {
    font-size: clamp(37px, 3.25vw, 54px);
  }
  .hero-support {
    max-width: 390px;
  }
  .hero-visual {
    justify-content: flex-end;
    align-self: start;
    padding-top: 0;
  }
  .hero-art-frame {
    width: calc(100% + 16px);
    max-width: none;
    margin-top: -26px;
    margin-left: 0;
  }
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1680px, calc(100% - 36px));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 24px;
  }
  .hero-copy,
  h1,
  .hero-support {
    max-width: 400px;
  }
  .hero-art-frame {
    width: calc(100% + 20px);
    margin-top: -30px;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-inner {
    width: min(100% - 28px, 1320px);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 18px;
  }
  .hero-copy,
  h1,
  .hero-support {
    max-width: 380px;
  }
  .hero-title-highlight {
    font-size: clamp(34px, 3.1vw, 47px);
  }
  .hero-art-frame {
    width: calc(100% + 12px);
    margin-top: -18px;
  }
}

/* v49: final hero artwork placement
   Keep the approved v48 artwork size, but lower the visual so its top edge
   aligns with the Neurons title rather than the eyebrow badge, and nudge the
   frame slightly right to align with the proof-card grid edge. */
@media (min-width: 1121px) {
  .hero-art-frame {
    margin-top: 32px;
    transform: translateX(18px);
  }
}

@media (min-width: 1500px) {
  .hero-art-frame {
    margin-top: 34px;
    transform: translateX(20px);
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-art-frame {
    margin-top: 26px;
    transform: translateX(12px);
  }
}

@media (max-width: 1120px) {
  .hero-art-frame {
    transform: none;
  }
}

/* v50: hero artwork frame balance
   Keep the approved hero diagram width/readability, but reduce the visual mass of
   the image card by tightening the frame aspect ratio and cropping only the
   excess dark padding inside the artwork. The diagram stays readable while the
   hero feels less dominated by the frame. */
@media (min-width: 1121px) {
  .hero-art-frame {
    aspect-ratio: 2.34 / 1;
    border-color: rgba(30,199,255,.14);
    box-shadow: 0 28px 84px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
  }
  .hero-art-frame img {
    object-fit: cover;
    object-position: center center;
    transform: scale(1.045);
  }
}

@media (min-width: 1500px) {
  .hero-art-frame {
    aspect-ratio: 2.38 / 1;
  }
  .hero-art-frame img {
    transform: scale(1.055);
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-art-frame {
    aspect-ratio: 2.28 / 1;
  }
  .hero-art-frame img {
    transform: scale(1.035);
  }
}

@media (max-width: 1120px) {
  .hero-art-frame {
    aspect-ratio: 1816 / 866;
  }
  .hero-art-frame img {
    object-fit: contain;
    transform: none;
  }
}

/* v51: hero frame vertical breathing room and safe headline gap
   Restore a taller artwork frame so the diagram has vertical breathing room again,
   and increase the gap between the headline and the visual card so the left border
   does not visually collide with the end of "Matrix Federation". */
@media (min-width: 1121px) {
  .hero-grid {
    gap: clamp(42px, 3.1vw, 62px);
  }
  .hero-art-frame {
    width: 100%;
    max-width: none;
    margin-top: 34px;
    transform: none;
    aspect-ratio: 2.12 / 1;
    border-color: rgba(30,199,255,.16);
  }
  .hero-art-frame img {
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
}

@media (min-width: 1500px) {
  .hero-grid {
    gap: 58px;
  }
  .hero-art-frame {
    margin-top: 36px;
    aspect-ratio: 2.12 / 1;
  }
  .hero-art-frame img {
    transform: none;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-grid {
    gap: 40px;
  }
  .hero-art-frame {
    margin-top: 30px;
    aspect-ratio: 2.10 / 1;
  }
  .hero-art-frame img {
    transform: none;
  }
}

/* v55: fix hero title / image collision from v51
   Investigation: the visible collision was caused by the title line overflowing a
   too-narrow text column, not by the image border itself. Give the headline enough
   reserved width and keep a stable gap before the hero artwork. */
@media (min-width: 1121px) {
  .hero-grid {
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    gap: clamp(52px, 3.7vw, 72px);
  }
  .hero-copy,
  h1,
  .hero-support {
    max-width: 470px;
  }
  .hero-title-highlight-second {
    white-space: nowrap;
  }
  .hero-art-frame {
    margin-top: 34px;
    transform: none;
    aspect-ratio: 2.12 / 1;
  }
}

@media (min-width: 1500px) {
  .hero-grid {
    grid-template-columns: minmax(0, 490px) minmax(0, 1fr);
    gap: 70px;
  }
  .hero-copy,
  h1,
  .hero-support {
    max-width: 490px;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-grid {
    grid-template-columns: minmax(0, 455px) minmax(0, 1fr);
    gap: 48px;
  }
  .hero-copy,
  h1,
  .hero-support {
    max-width: 455px;
  }
  .hero-title-highlight {
    font-size: clamp(33px, 3vw, 45px);
  }
}

/* v59: reduce secondary diagram visual weight.
   The federation (Matrix) and extensibility graphics should support the copy,
   not dominate the page like the hero artwork. Keep the images crisp and
   readable, but scale their frames down relative to the page grid. */
.extensibility-art-frame.ext-raster-frame {
  max-width: 660px;
  width: min(100%, 660px);
  justify-self: center;
}

.federation-map.art-frame {
  max-width: 1080px;
  width: min(100%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1180px) {
  .extensibility-art-frame.ext-raster-frame {
    max-width: 760px;
    width: min(100%, 760px);
  }
  .federation-map.art-frame {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .extensibility-art-frame.ext-raster-frame,
  .federation-map.art-frame {
    width: 100%;
    max-width: 100%;
  }
}

/* v60: reduce AWS architecture diagram visual weight.
   Match the secondary diagram scale so the architecture image supports the section
   instead of dominating the page. */
.architecture-flow.art-frame {
  max-width: 980px;
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1180px) {
  .architecture-flow.art-frame {
    max-width: 100%;
  }
}

/* v61: align hero width with the site grid.
   The hero artwork remains large inside the grid, but the section no longer
   stretches close to the viewport edges on wide screens. */
@media (min-width: 1121px) {
  .hero-inner {
    width: min(var(--site-grid-max), calc(100% - 72px));
  }

  .hero-art-frame {
    width: 100%;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-inner {
    width: min(var(--site-grid-max), calc(100% - 56px));
  }
}

/* v62: make the hero diagram readable inside the corrected page grid.
   Keep the outer hero spacing from v61, but give the artwork more of the
   available grid so its labels and connection details are easier to inspect. */
@media (min-width: 1121px) {
  .hero-grid {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
    gap: clamp(40px, 3vw, 54px);
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 450px;
  }

  .hero-title-highlight {
    font-size: clamp(35px, 3vw, 50px);
  }

  .hero-art-frame {
    aspect-ratio: 2.06 / 1;
  }
}

@media (min-width: 1500px) {
  .hero-grid {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
    gap: 48px;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-grid {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 36px;
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 420px;
  }

  .hero-title-highlight {
    font-size: clamp(33px, 3vw, 44px);
  }
}

/* v63: let the hero become the one intentionally wider section.
   The rest of the site keeps the 1360px grid, while the hero gets enough
   desktop width for the diagram to be readable without becoming full-bleed. */
@media (min-width: 1121px) {
  .hero-inner {
    width: min(1540px, calc(100% - 56px));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: clamp(34px, 2.4vw, 46px);
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 430px;
  }

  .hero-title-highlight {
    font-size: clamp(34px, 2.9vw, 48px);
  }

  .hero-art-frame {
    margin: 34px 0 0;
    aspect-ratio: 2.02 / 1;
  }

  .hero-badges {
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .hero-proof {
    grid-template-columns: repeat(3, 1fr);
  }

  .proof-card {
    border-right: 1px solid rgba(139,181,255,.12);
    border-bottom: 0;
  }

  .proof-card:last-child {
    border-right: 0;
  }
}

@media (min-width: 1500px) {
  .hero-inner {
    width: min(1560px, calc(100% - 80px));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: 44px;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-inner {
    width: min(1320px, calc(100% - 48px));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 30px;
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 400px;
  }

  .hero-title-highlight {
    font-size: clamp(32px, 2.9vw, 42px);
  }
}

@media (max-width: 1120px) {
  .hero-art-frame {
    margin: 0;
  }
}

/* v64: make the Matrix ecosystem diagram a supporting proof visual.
   The section copy now carries more of the explanation, so the federation image
   should be readable but clearly secondary to the hero artwork. */
.federation-map.art-frame {
  max-width: 860px;
  width: min(100%, 860px);
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .federation-map.art-frame {
    max-width: 880px;
    width: min(100%, 880px);
  }
}

@media (max-width: 760px) {
  .federation-map.art-frame {
    max-width: 100%;
    width: 100%;
    margin-top: 20px;
  }
}

/* v65: use a hero-like split layout for the technical proof sections.
   Copy now leads on the left while the diagrams stay readable but secondary. */
.technical-split {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(34px, 4vw, 58px);
  align-items: center;
}

.technical-copy {
  max-width: 470px;
  margin-bottom: 0;
}

.technical-copy p {
  margin: 24px 0 0;
}

.technical-split .art-frame {
  justify-self: end;
}

.federation-split .federation-map.art-frame,
.architecture-split .architecture-flow.art-frame {
  width: min(100%, 780px);
  max-width: 780px;
  margin: 0;
}

.federation-split .federation-map.art-frame {
  aspect-ratio: 1480 / 870;
}

.architecture-split .architecture-flow.art-frame {
  aspect-ratio: 1200 / 850;
}

.federation-split .federation-map.art-frame img,
.architecture-split .architecture-flow.art-frame img {
  object-fit: contain;
}

.technical-copy .architecture-outcome {
  max-width: none;
  margin: 28px 0 0;
  padding: 20px 22px;
  text-align: left;
}

@media (max-width: 1120px) {
  .technical-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .technical-copy {
    max-width: 760px;
  }

  .technical-split .art-frame {
    justify-self: center;
  }

  .federation-split .federation-map.art-frame,
  .architecture-split .architecture-flow.art-frame {
    width: min(100%, 880px);
    max-width: 880px;
  }
}

@media (max-width: 760px) {
  .technical-split {
    gap: 26px;
  }

  .technical-copy {
    max-width: 100%;
  }

  .technical-copy p {
    margin-top: 18px;
  }

  .technical-copy .architecture-outcome {
    padding: 18px;
  }

  .federation-split .federation-map.art-frame,
  .architecture-split .architecture-flow.art-frame {
    width: 100%;
    max-width: 100%;
  }
}

/* v66: give the apply heading a cleaner rhythm before the explanatory text. */
.apply-section .section-header h2 {
  margin-bottom: 18px;
}

.apply-section .section-header p {
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .apply-section .section-header h2 {
    margin-bottom: 14px;
  }
}

/* v67: keep the FAQ compact on desktop and easy to scan on smaller screens. */
@media (max-width: 1120px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-item {
    min-height: 0;
    padding: 24px;
  }
}

/* v68: production navigation. */

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(139, 181, 255, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  cursor: pointer;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.mobile-nav[hidden] {
  display: none !important;
}

@media (max-width: 940px) {
  .site-header {
    position: fixed;
    grid-template-columns: 1fr auto;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-nav:not([hidden]) {
    position: fixed;
    top: 92px;
    left: 16px;
    right: 16px;
    z-index: 59;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(139, 181, 255, .22);
    border-radius: 16px;
    background: rgba(3, 8, 23, .97);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
    backdrop-filter: blur(20px);
  }

  .mobile-nav a {
    min-height: 44px;
    padding: 12px 14px;
    color: rgba(245, 250, 255, .88);
    text-decoration: none;
    font-weight: 700;
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    color: #fff;
    background: rgba(36, 92, 255, .2);
  }
}

@media (max-width: 640px) {
  .mobile-nav:not([hidden]) {
    top: 80px;
    grid-template-columns: 1fr;
  }

  .privacy-page > .section:first-child {
    padding-top: 132px;
  }
}

/* v69: secure communication positioning.
   Keep the approved visual system while giving privacy, elastic scale, push
   delivery, federation, and customer ownership comparable visual weight. */
.nav-links {
  gap: clamp(14px, 1.6vw, 26px);
}

.hero-title-brand,
.hero-title-highlight {
  letter-spacing: 0;
}

.hero-proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  min-height: 176px;
  padding: 26px 24px;
}

.proof-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.proof-icon svg {
  width: 34px;
  height: 34px;
}

.proof-card strong {
  font-size: 18px;
  letter-spacing: 0;
}

.proof-card span:not(.proof-icon) {
  font-size: 14px;
  line-height: 1.48;
}

.value-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.value-grid .feature-card {
  min-height: 310px;
  padding: 26px 24px;
}

.value-grid .card-index {
  margin-bottom: 38px;
}

.value-grid h3 {
  font-size: 22px;
  letter-spacing: 0;
}

.privacy-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 24%, rgba(0, 135, 122, .18), transparent 30rem),
    radial-gradient(circle at 84% 16%, rgba(30, 199, 255, .12), transparent 34rem),
    linear-gradient(180deg, #061a35 0%, #08274a 58%, #071a36 100%);
}

.privacy-section code {
  color: #8be9d8;
  font-size: .93em;
}

.privacy-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.privacy-principles article {
  padding-top: 28px;
  border-top: 2px solid rgba(73, 209, 125, .52);
}

.privacy-principles article > span {
  display: block;
  margin-bottom: 30px;
  color: #67ddc9;
  font-family: var(--font-tech);
  font-size: 14px;
  font-weight: 800;
}

.privacy-principles h3 {
  margin-bottom: 14px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: 0;
}

.privacy-principles p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

@media (min-width: 1321px) {
  .hero-grid {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: 46px;
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 500px;
  }

  .hero-title-brand {
    font-size: clamp(48px, 3.7vw, 62px);
    line-height: 1;
  }

  .hero-title-highlight {
    font-size: clamp(35px, 2.55vw, 43px);
    line-height: 1.04;
    white-space: nowrap;
  }
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .hero-grid {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
    gap: 34px;
  }

  .hero-copy,
  h1,
  .hero-support {
    max-width: 450px;
  }

  .hero-title-brand {
    font-size: clamp(44px, 4.1vw, 54px);
  }

  .hero-title-highlight {
    font-size: clamp(31px, 2.8vw, 37px);
    line-height: 1.05;
    white-space: nowrap;
  }

  .hero-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-card:nth-child(2) {
    border-right: 0;
  }

  .proof-card:nth-child(-n+2) {
    border-bottom: 1px solid rgba(139, 181, 255, .12);
  }
}

@media (max-width: 1300px) {
  .value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .hero-title-brand {
    font-size: clamp(45px, 7vw, 62px);
  }

  .hero-title-highlight {
    font-size: clamp(34px, 5vw, 46px);
    line-height: 1.04;
    white-space: normal;
  }

  .hero-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-card:nth-child(2) {
    border-right: 0;
  }

  .proof-card:nth-child(-n+2) {
    border-bottom: 1px solid rgba(139, 181, 255, .12);
  }
}

@media (max-width: 940px) {
  .value-grid,
  .privacy-principles {
    grid-template-columns: 1fr;
  }

  .value-grid .feature-card {
    min-height: 0;
  }

  .value-grid .card-index {
    margin-bottom: 28px;
  }
}

@media (max-width: 640px) {
  .hero-title-brand {
    font-size: clamp(36px, 11vw, 48px);
  }

  .hero-title-highlight {
    font-size: clamp(28px, 8.2vw, 36px);
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .proof-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(139, 181, 255, .12);
  }

  .proof-card:last-child {
    border-bottom: 0;
  }
}

/* v72: preserve the diagram's horizontal meaning at medium desktop widths.
   Stack the hero copy and artwork so the diagram remains large and legible;
   wide desktops keep the established two-column composition. */
@media (min-width: 941px) and (max-width: 1320px) {
  .hero-inner {
    width: min(1180px, calc(100% - 48px));
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  .hero-copy,
  .hero-copy h1,
  .hero-support {
    width: 100%;
    max-width: 820px;
  }

  .hero-badges {
    max-width: 820px;
  }

  .hero-visual {
    width: 100%;
    min-height: 0;
    align-self: start;
    justify-content: center;
    padding: 0;
  }

  .hero-art-frame {
    width: 100%;
    max-width: 1180px;
    margin: 0;
    aspect-ratio: 1816 / 866;
  }

  .hero-art-frame img {
    object-fit: contain;
    transform: none;
  }
}

@media (max-width: 640px) {
  .hero-art-frame {
    aspect-ratio: 720 / 1080;
  }
}