/* m5 . Dark AI Product, after the Gcore library entry, taken inverted.

   The reference is an all dark page with one white theme break. This is a light
   page with one dark band. The inversion keeps the two components the reference
   itself calls load bearing (the diagonal beam, and the node diagram whose
   connectors carry light pulses inward) without producing a second near black
   variant in the same set.

   Also taken: the presentation treatment, a capture floating in a rounded frame
   on a dimmed backdrop with a bright highlight line along the frame's top edge.
   The backdrop is a solid plate rather than the blurred radial the reference
   uses in its own video, because a radial spotlight behind a mockup is the most
   worn out gesture on the internet and the plate does the same job harder. And
   the three tier row with the middle tier promoted by a solid button against
   two outline buttons.

   The reference insists headline sizes stay restrained. They do. */

@font-face { font-family: 'Tight'; src: url('assets/fonts/sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #FFFFFF;
  --card: #F7F7F5;
  --near: #0A0908;
  --near-2: #171512;
  --ink: #16130F;
  --soft: #55514A;      /* 7.9:1 on white */
  --on-dark: #F2EFE9;   /* 16.1:1 on near black */
  --on-dark-2: #B9B2A7; /* 7.5:1 on near black, for secondary copy in the dark band */
  --accent: #F0491C;    /* 5.3:1 against near black, so it is safe as text there.
                           On paper it is a fill colour only, never text. */
  --line: #E2E2DE;
  --line-d: #3A322C;
  --pad: clamp(1.15rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Tight', ui-sans-serif, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { letter-spacing: -0.022em; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--near); color: var(--on-dark); padding: 0.75rem 1.25rem; text-decoration: none; }
.skip:focus { left: 0; }
.fine { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; max-width: 50ch; font-size: 0.8125rem; line-height: 1.6; color: var(--soft); }

/* ---- Buttons ------------------------------------------------------------- */
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 0.65rem 1.25rem; border-radius: 6px; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
/* near black text on the accent, because white on this orange is only 3.7:1 */
.btn--fill { background: var(--accent); color: var(--near); }
.btn--fill:hover { background: #D33F16; }
.btn--line { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.btn--line:hover { border-color: var(--ink); }
.btn--text { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; padding-left: 0.35rem; padding-right: 0.35rem; }
.btn--text:hover { color: var(--soft); }

/* ---- Dense utility header ------------------------------------------------ */
.util__now { margin: 0; display: flex; align-items: center; gap: 0.5rem; background: var(--near); color: var(--on-dark); font-size: 0.8125rem; padding: 0.5rem var(--pad); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.util__bar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 0.85rem var(--pad); border-bottom: 1px solid var(--line); }
.util__mark { margin: 0; font-weight: 700; font-size: 1.1875rem; }
.util__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.util__nav a { text-decoration: none; font-size: 0.875rem; color: var(--soft); transition: color 180ms ease; }
.util__nav a:hover { color: var(--ink); }
.util__bar .btn { margin-left: auto; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 941px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
/* restrained, per the reference: this never becomes a display face moment */
.hero h1 { margin: 0 0 0.9rem; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; max-width: 17ch; }
.hero__sub { margin: 0 0 clamp(1.5rem, 3.5vw, 2rem); max-width: 44ch; color: var(--soft); font-size: 1rem; }
.acts { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---- The presentation treatment ------------------------------------------ */
.frame { position: relative; padding: clamp(1rem, 2.4vw, 1.75rem); }
.frame::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: var(--near); }
.frame__win { position: relative; z-index: 1; margin: 0; border-radius: 12px; overflow: hidden; background: var(--near-2); box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); }
/* the bright highlight line along the frame's top edge */
.frame__win::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.75), rgb(255 255 255 / 0)); }
.frame__chrome { display: flex; gap: 6px; padding: 0.6rem 0.75rem; background: var(--near); }
.frame__chrome span { width: 9px; height: 9px; border-radius: 50%; background: #4A423B; }
.frame__win img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---- The one dark band --------------------------------------------------- */
.deep { position: relative; background: var(--near); color: var(--on-dark); padding: clamp(3rem, 8vw, 6rem) var(--pad); overflow: hidden; }
/* the diagonal beam, anchored top right, faded out by mid band */
.beam {
  position: absolute; top: -30%; right: -10%; width: 70%; height: 130%; pointer-events: none;
  background: linear-gradient(202deg, rgb(240 73 28 / 0.34) 0%, rgb(240 73 28 / 0.10) 34%, rgb(240 73 28 / 0) 62%);
  filter: blur(28px);
}
.deep h2, .deep__sub, .deep__fine, .diag { position: relative; z-index: 1; }
.deep h2 { margin: 0 0 0.75rem; font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; max-width: 20ch; }
.deep__sub { margin: 0 0 clamp(2.25rem, 5vw, 3.5rem); max-width: 50ch; color: var(--on-dark-2); font-size: 0.9375rem; }
.deep__fine { margin: clamp(2rem, 4vw, 2.75rem) 0 0; max-width: 50ch; font-size: 0.8125rem; color: var(--on-dark-2); }

/* ---- Node diagram -------------------------------------------------------- */
.diag { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-items: center; }
@media (min-width: 981px) { .diag { grid-template-columns: 1fr auto 1fr; gap: clamp(2rem, 5vw, 5rem); } }
/* sized and populated by script from measured geometry; empty until then, so
   with JS off the diagram is six labelled systems and a hub, which still reads */
.diag__wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
@media (max-width: 980px) { .diag__wire { display: none; } }
.diag__col { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.node { display: flex; gap: 0.75rem; align-items: flex-start; }
.diag__col--r .node { flex-direction: row-reverse; text-align: right; }
.node__ic {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: 10px; background: var(--near-2); border: 1px solid var(--line-d); color: var(--accent);
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.node__ic svg { width: 1.375rem; height: 1.375rem; }
/* the node lights as its own pulse sets off, so you can tell which system the
   travelling dash belongs to. Without this the six pulses are just weather. */
.node.is-live .node__ic { background: var(--accent); color: var(--near); border-color: var(--accent); }
.node__t { display: grid; gap: 0.1rem; font-weight: 600; font-size: 0.9375rem; }
.node__t span { font-weight: 400; font-size: 0.8125rem; color: var(--on-dark-2); max-width: 24ch; }
.diag__col--r .node__t span { justify-self: end; }
/* the hub the connectors converge on */
.chip {
  margin: 0; justify-self: center; align-self: center; text-align: center;
  padding: 1.15rem 1.5rem; border-radius: 12px;
  background: var(--accent); color: var(--near);
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  display: grid; gap: 0.1rem;
  transition: outline-color 200ms ease;
  outline: 3px solid transparent; outline-offset: 5px;
}
.chip span { font-weight: 500; font-size: 0.8125rem; opacity: 0.85; }
/* the hub registers each arrival rather than sitting inert while things fly at it */
.chip.is-hit { outline-color: var(--accent); }

/* ---- Plans --------------------------------------------------------------- */
.plans { padding: clamp(3rem, 8vw, 6rem) var(--pad); }
.plans h2, .notes h2, .reach h2 { margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
.plans__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.25rem, 2.6vw, 1.85rem); display: grid; gap: 0.9rem; align-content: start; }
/* the middle tier is promoted by its button, exactly as the reference does it,
   plus one degree of surface: no badge, no ribbon, no second colour */
.tier--on { border-color: var(--ink); border-width: 2px; background: var(--card); }
.tier h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.tier__n { margin: 0; font-weight: 700; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; display: flex; align-items: baseline; gap: 0.4rem; }
.tier__n span { font-size: 0.8125rem; font-weight: 400; color: var(--soft); letter-spacing: 0; }
.tier__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; color: var(--soft); }
.tier__l li { padding-left: 1.15rem; position: relative; max-width: 34ch; }
.tier__l li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.tier .btn { justify-self: start; }

/* ---- Notes --------------------------------------------------------------- */
.notes { padding: clamp(3rem, 8vw, 6rem) var(--pad); border-top: 1px solid var(--line); }
.notes__g { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.notes__g h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; }
.notes__g p { margin: 0; max-width: 40ch; color: var(--soft); font-size: 0.9375rem; }

/* ---- Reach --------------------------------------------------------------- */
.reach { padding: clamp(3rem, 8vw, 6rem) var(--pad); border-top: 1px solid var(--line); }
.reach__grid { margin: 0; }
.reach__grid > div { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.2rem; }
.reach__grid dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.reach__grid dd { margin: 0; }
.reach__big { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; }
@media (min-width: 561px) { .reach__grid > div { grid-template-columns: 13rem 1fr; gap: 2rem; align-items: baseline; } }

/* ---- Footer -------------------------------------------------------------- */
.foot { background: var(--near); color: var(--on-dark); padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(3rem, 7vw, 4.5rem); }
.foot__cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: clamp(2rem, 4vw, 3rem); }
.foot__cols > div { display: grid; gap: 0.4rem; align-content: start; }
.foot__cols h2 { margin: 0 0 0.2rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 600; }
.foot__cols a { text-decoration: none; font-size: 0.9375rem; color: var(--on-dark); transition: color 180ms ease; }
.foot__cols a:hover { color: var(--accent); }
.foot__mark { margin: 0; font-weight: 700; font-size: 1.25rem; }
.foot .fine { color: var(--on-dark-2); }
.foot .fine strong { color: var(--on-dark); }

/* ---- Motion -------------------------------------------------------------- */
/* Level 2, as measured on the reference: transitions and state work rather than
   scroll choreography. The pulse is a single dash whose offset is transitioned
   along a measured path, one connector at a time, driven from script so the
   sequence can stay in step with the node that owns it. Nothing loops on its
   own, which is what makes it readable instead of ambient. */
.wire__base { fill: none; stroke: var(--line-d); stroke-width: 2; stroke-dasharray: 5 6; }
.wire__pulse { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }

.js-motion [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js-motion [data-rise].is-up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  /* the connectors stay: they carry the information. Only the pulse goes. */
  .wire__pulse { display: none; }
}