/*
 * StreamNav public site.
 *
 * The palette is the approved brand system, taken from the frozen prototype's
 * tokens.css at d49d57d and not re-picked here: Night, Graphite, Cloud, Steel,
 * Mist, and the brand blue that is the right-hand stop of the Explore Packages
 * gradient. Deriving a new colour would be a new brand.
 *
 * No webfont is downloaded. Inter is the brand face and is already present on
 * most systems; the stack degrades to the platform UI face rather than blocking
 * first paint on a third-party request, which also means the page makes no
 * external connection at all.
 */

:root {
  --brand: #0d7fd0;
  --brand-light: #29a9ee;
  --brand-dark: #0a65a6;
  --night: #0d1117;
  --graphite: #252c36;
  --steel: #66707c;
  --mist: #dce3ea;
  --cloud: #f7f9fc;

  --bg: var(--night);
  --surface: var(--graphite);
  --text: var(--cloud);
  --muted: #9299a2;
  --hairline: rgba(220, 227, 234, 0.1);

  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; }

/*
 * The ground.
 *
 * Two radial washes over a navy linear base rather than a flat dark colour:
 * the layering is what gives the hero depth, because the light has a source and
 * falls off. Every value is StreamNav's own brand blue and Night shifted toward
 * navy -- no colour here is borrowed from anywhere.
 */
body {
  margin: 0;
  background:
    radial-gradient(circle at 32% 2%, rgba(13, 127, 208, 0.32), transparent 620px),
    radial-gradient(circle at 82% 14%, rgba(41, 169, 238, 0.15), transparent 520px),
    linear-gradient(150deg, #0b1626, #0a1220 46%, #070c15);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--brand-light); }
a:hover { color: var(--cloud); }

/* Visible on every interactive element, in both directions. A focus ring that
   only shows for keyboard users is right; one that shows for nobody is not. */
:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--cloud);
  padding: 10px 16px;
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---- header ---- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--hairline);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { height: 30px; width: auto; }
.brand-name {
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
}

/* ---- hero ----
   The signature element: a single horizontal rule that carries a moving
   highlight, standing for a connection rather than illustrating one. It is the
   only motion on the page, and it stops entirely under reduced motion. */
.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 96px) clamp(32px, 4vw, 52px);
  isolation: isolate;
}

/* A fine technical grid, gridded the way a drawing is rather than tiled the way
   wallpaper is: it is masked out before the edges so it reads as depth. */
.hero::before {
  content: "";
  position: absolute;
  inset: -70px calc(var(--gutter) * -1) 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(220, 227, 234, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 227, 234, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 92% at 28% 10%, #000 28%, transparent 76%);
  mask-image: radial-gradient(120% 92% at 28% 10%, #000 28%, transparent 76%);
  pointer-events: none;
}

/* Two long diagonal light trails. This is where the line Andre liked went: the
   same idea given a direction and a horizon instead of lying flat. They do not
   animate -- the rail below the CTAs is the page's one moving element, and two
   competing motions would cheapen both. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  /* Shallow angles. At 104deg the band is almost vertical and reads as a column
     of light rather than a trail; a trail has to run across the frame. */
  background-image:
    linear-gradient(163deg, transparent 40%, rgba(41, 169, 238, 0.17) 50%, transparent 61%),
    linear-gradient(171deg, transparent 64%, rgba(13, 127, 208, 0.12) 72%, transparent 81%);
  pointer-events: none;
}

/* The eyebrow: small, heavy, wide-tracked caps above the headline. It works
   because it LABELS the headline rather than competing with it, which is what a
   status pill in the opposite corner was doing. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin: 0 0 22px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 0 4px rgba(41, 169, 238, 0.16);
  flex: none;
}

.hero h1 {
  /* Large, tight and heavy: the single biggest contributor to a hero reading as
     confident. Tracking goes further negative as the size grows. */
  font-size: clamp(2.45rem, 6.6vw, 4.9rem);
  line-height: 0.97;
  letter-spacing: -0.043em;
  font-weight: 700;
  margin: 0 0 26px;
  max-width: 17ch;
  text-wrap: balance;
}

/* The second lede line: same voice, quieter, so the hero has a statement and a
   qualifier rather than two competing paragraphs. */
.lede-sub {
  color: var(--muted);
  font-size: clamp(0.96rem, 1.3vw, 1.04rem);
  margin-top: -18px;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--mist);
  max-width: 56ch;
  margin: 0 0 34px;
}

/* Three plain facts under the CTAs, indexed. The numbers are an index, not
   decoration: these are the three things StreamNav does, in order. */
.hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.hero-index li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--mist); }
.hero-index .n {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-light);
  background: rgba(13, 127, 208, 0.14);
  border: 1px solid rgba(41, 169, 238, 0.3);
  border-radius: 5px;
  padding: 3px 7px;
  font-variant-numeric: tabular-nums;
}

/* The element Andre approved, kept as the page's only motion, now acting as a
   baseline under the whole hero block instead of floating between sections. */
.signal {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 227, 234, 0.18), rgba(220, 227, 234, 0.03));
  margin-top: 34px;
  overflow: hidden;
}
.signal::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--brand-light), transparent);
  animation: travel 7s linear infinite;
  will-change: transform;
}
@keyframes travel {
  from { transform: translateX(-110%); }
  to { transform: translateX(360%); }
}

/* The strip that closes the hero: wide-tracked caps, quiet, and a summary of
   what follows rather than a claim about it. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 38px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  min-height: 46px;
}
.btn-primary {
  background: var(--brand);
  color: var(--cloud);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, -4px 9px 26px -10px rgba(13, 127, 208, 0.85);
}
.btn svg { flex: none; transition: transform 0.16s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary:hover { background: var(--brand-dark); color: var(--cloud); }
.btn-quiet {
  background: transparent;
  color: var(--mist);
  border-color: var(--hairline);
}
.btn-quiet:hover { border-color: var(--steel); color: var(--cloud); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- capability grid ---- */
section { padding-block: clamp(44px, 7vw, 76px); }

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
/* The second line in brand blue. One line white, one line coloured reads as a
   deliberate typographic device; colouring the whole heading would just be a
   coloured heading. */
h2 .lit { color: var(--brand-light); display: block; }

/* Header as two columns: the statement left, the qualifier right. Stacking the
   supporting line under the heading makes it look like a subtitle; setting it
   beside makes it read as the counterweight it is. */
.section-head {
  display: grid;
  gap: 18px clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (min-width: 860px) {
  .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.section-note { color: var(--muted); margin: 0; max-width: 46ch; }

/* The same wide-tracked cap label the hero uses, so a section announces itself
   the way the page already taught the reader to expect. */
.section-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin: 0 0 16px;
}

/* Six columns so five cards can fill two rows without a hole: three spanning
   two each, then two spanning three each. auto-fit left a gap at the end of the
   second row, which reads as a missing card rather than a deliberate stop. */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
/* Three equal columns. The previous six-column span rules existed to stop five
   cards leaving a hole in the second row; with three cards they made the third
   one wrap on its own, which is a worse hole than the one they fixed. Match the
   rule to the content rather than carrying the old arithmetic forward. */
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  /* A gradient rather than a flat fill, lighter at the top: the card catches
     the same light the hero does instead of sitting on the page unlit. */
  background: linear-gradient(168deg, rgba(30, 48, 76, 0.75), rgba(16, 26, 42, 0.62));
  border: 1px solid rgba(220, 227, 234, 0.09);
  border-radius: 14px;
  padding: clamp(24px, 2.4vw, 32px);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
/* The lit edge. One hairline along the top, brightest in the middle, which is
   what makes a flat rectangle read as a panel with a bevel. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 169, 238, 0.45), transparent);
}
.card:hover { border-color: rgba(41, 169, 238, 0.32); transform: translateY(-2px); }

/* A filled badge, not an inline chip: at this size the number is a marker on
   the card rather than a prefix to the title. */
.card .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(13, 127, 208, 0.16);
  border: 1px solid rgba(41, 169, 238, 0.32);
  color: var(--cloud);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 1.03rem;
  font-weight: 620;
  letter-spacing: -0.012em;
}
.card p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.58; }

/* ---- responsibility notice ---- */
.notice {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: rgba(37, 44, 54, 0.5);
  padding: 22px 24px;
}
.notice p { margin: 0; color: var(--mist); max-width: var(--measure); }
.notice p + p { margin-top: 14px; color: var(--muted); font-size: 0.94rem; }

/* ---- form ---- */
.form-shell {
  background: rgba(37, 44, 54, 0.62);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  max-width: 660px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 560;
  margin-bottom: 7px;
  color: var(--mist);
}
.req { color: var(--brand-light); }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--night);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 11px 13px;
  min-height: 44px;
}
textarea { min-height: 128px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--steel); }

/* aria-invalid is the source of truth, so the styling cannot disagree with
   what a screen reader is told. */
[aria-invalid="true"] { border-color: #ff6b60; }

.hint { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.error {
  font-size: 0.85rem;
  color: #ff8b82;
  margin-top: 6px;
  min-height: 1.2em;
}

.consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; }
.consent input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.consent label { font-size: 0.9rem; color: var(--mist); margin: 0; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. Hidden from assistive technology and
   removed from the tab order so no real person can reach it by accident. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status { margin-top: 18px; border-radius: 9px; padding: 0; }
.status:not(:empty) { padding: 13px 15px; border: 1px solid var(--hairline); }
.status.ok { border-color: rgba(41, 169, 238, 0.5); background: rgba(13, 127, 208, 0.12); }
.status.bad { border-color: rgba(255, 107, 96, 0.5); background: rgba(255, 107, 96, 0.09); }
.status p { margin: 0; font-size: 0.93rem; }

/* ---- footer ---- */
.site-foot {
  border-top: 1px solid var(--hairline);
  padding-block: 34px 44px;
  color: var(--muted);
  font-size: 0.9rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
}
.foot-links a { color: var(--mist); text-decoration: none; }
.foot-links a:hover { color: var(--cloud); text-decoration: underline; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---- policy pages ---- */
.doc { padding-block: clamp(40px, 7vw, 72px); max-width: 72ch; }
.doc h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -0.025em; margin: 0 0 6px; }
.doc .updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 32px; }
.doc h2 { margin-top: 34px; font-size: 1.15rem; }
.doc p, .doc li { color: var(--mist); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .signal::after { animation: none; opacity: 0.45; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}