/* ==========================================================================
   DigiTech Experts — digitechexperts.co.uk
   Deep Ink / Cyber. Dark by default, light on request. No build step.

   The accent is never a flat colour — it is a four-stop spectrum
   (cyan → blue → violet → magenta) that runs across display type, rules,
   indicators and the particle field, so the whole page reads as one system.

   Contents
     1. Tokens
     2. Reset & base
     3. Atmosphere (field, gridlines, glow, progress)
     4. Layout primitives
     5. Gradient type
     6. Navigation
     7. Hero
     8. Capabilities
     9. The register
    10. Sectors
    11. Approach
    12. Footer
    13. Motion & reveal
    14. Responsive
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  --canvas:      #0E181E;
  --canvas-alt:  #13212A;
  --surface:     #192A35;
  --line:        #223543;
  --line-strong: #2F4554;
  --surface-hi:  #213544;
  --canvas-deep: #0A1217;
  --edge:        rgba(255, 255, 255, 0.045);

  --ink:         #E2EBEE;
  --ink-muted:   #A2B4BC;
  --ink-faint:   #8BA0AA;

  /* One colour family: the brand teal from the logo. The pure logo teal
     (#12D9CB) is reserved for the logo itself; these tones are tuned for
     UI contrast. */
  --accent:      #19D3C5;
  --accent-hi:   #5EEADF;
  --accent-deep: #0FB5A9;
  --on-accent:   #04161A;
  --slate:       #7D8CAE;

  /* Particle tones — all drawn from the same teal. */
  --tone-1: #5EEADF;
  --tone-2: #19D3C5;
  --tone-3: #BDF5F0;
  --tone-4: #0E9E95;

  --grad: linear-gradient(100deg, #E2EBEE 0%, #D2F6F2 40%, #5EEADF 78%, #19D3C5 100%);
  --grad-line: linear-gradient(90deg,
            rgba(25,211,197,0)   0%,
            rgba(25,211,197,.85) 40%,
            rgba(94,234,223,.5)  78%,
            rgba(94,234,223,0)   100%);

  --glow-a: rgba(25, 211, 197, 0.11);
  --glow-b: rgba(0, 163, 176, 0.09);
  --glow-c: rgba(25, 211, 197, 0.045);

  --signal:      #19D3C5;
  --signal-line: rgba(25, 211, 197, 0.40);

  --rule: rgba(255, 255, 255, 0.035);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --shell:       1280px;
  --gutter:      clamp(1.25rem, 5vw, 5rem);
  --section-y:   clamp(4rem, 8vw, 7.5rem);

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light mode. Navy ink on white, a deeper teal carrying the accents. */
:root[data-theme='light'] {
  --canvas:      #EBF1F2;
  --canvas-alt:  #E2EAEC;
  --surface:     #F5F8F9;
  --line:        #D2DCDF;
  --line-strong: #B9C7CD;
  --surface-hi:  #FFFFFF;
  --canvas-deep: #DCE5E8;
  --edge:        rgba(255, 255, 255, 0.75);

  --ink:         #1B2A33;
  --ink-muted:   #435660;
  --ink-faint:   #4E626C;

  --accent:      #006A63;
  --accent-hi:   #006A63;
  --accent-deep: #00554F;
  --on-accent:   #FFFFFF;
  --slate:       #6B7896;

  --tone-1: #00A3B0;
  --tone-2: #19D3C5;
  --tone-3: #8FD9D3;
  --tone-4: #1B2A33;

  --grad: linear-gradient(100deg, #1B2A33 0%, #1B2A33 38%, #006A63 82%, #00A3B0 100%);
  --grad-line: linear-gradient(90deg,
            rgba(0,122,114,0)   0%,
            rgba(0,122,114,.75) 40%,
            rgba(25,211,197,.4) 78%,
            rgba(25,211,197,0)  100%);

  --glow-a: rgba(0, 163, 176, 0.07);
  --glow-b: rgba(25, 211, 197, 0.05);
  --glow-c: rgba(0, 122, 114, 0.03);

  --signal:      #006A63;
  --signal-line: rgba(0, 122, 114, 0.35);

  --rule: rgba(10, 20, 51, 0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --canvas:      #EBF1F2;
    --canvas-alt:  #E2EAEC;
    --surface:     #F5F8F9;
    --line:        #D2DCDF;
    --line-strong: #B9C7CD;
    --surface-hi:  #FFFFFF;
    --canvas-deep: #DCE5E8;
    --edge:        rgba(255, 255, 255, 0.75);

    --ink:         #1B2A33;
    --ink-muted:   #435660;
    --ink-faint:   #4E626C;

    --accent:      #006A63;
    --accent-hi:   #006A63;
    --accent-deep: #00554F;
    --on-accent:   #FFFFFF;
    --slate:       #6B7896;

    --tone-1: #00A3B0;
    --tone-2: #19D3C5;
    --tone-3: #8FD9D3;
    --tone-4: #1B2A33;

    --grad: linear-gradient(100deg, #1B2A33 0%, #1B2A33 38%, #006A63 82%, #00A3B0 100%);
    --grad-line: linear-gradient(90deg,
              rgba(0,122,114,0)   0%,
              rgba(0,122,114,.75) 40%,
              rgba(25,211,197,.4) 78%,
              rgba(25,211,197,0)  100%);

    --glow-a: rgba(0, 163, 176, 0.07);
    --glow-b: rgba(25, 211, 197, 0.05);
    --glow-c: rgba(0, 122, 114, 0.03);

    --signal:      #006A63;
    --signal-line: rgba(0, 122, 114, 0.35);

    --rule: rgba(10, 20, 51, 0.05);
  }
}

/* ── 2. Reset & base ───────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

h1, h2, h3 { margin: 0; font-weight: 500; }
p  { margin: 0; }
ol, ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a  { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 0.75rem 1.25rem; background: var(--accent); color: var(--on-accent); font-size: 0.875rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── 3. Atmosphere ─────────────────────────────────────────────────────── */

/* Particle field. Fixed, behind everything, painted by main.js. */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 0.3s;
}
.field.is-live { opacity: 1; }

/* Five vertical rules. Structure made visible — the column grid the page sits on. */
.gridlines {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.gridlines i { border-left: 1px solid var(--rule); }
.gridlines i:last-child { border-right: 1px solid var(--rule); }

/* Two soft spectrum blooms that drift. This is where the colour comes from. */
.glow {
  position: fixed;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 12%, var(--glow-a) 0%, transparent 70%),
    radial-gradient(34% 30% at 82% 28%, var(--glow-b) 0%, transparent 70%),
    radial-gradient(40% 38% at 50% 88%, var(--glow-c) 0%, transparent 72%);
  filter: blur(18px);
  animation: bloom 26s var(--ease) infinite alternate;
}

/* Scroll progress, drawn in the spectrum. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  background: var(--line);
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  background-size: 100vw 100%;
  box-shadow: 0 0 12px rgba(25, 211, 197, 0.55);
}

/* Everything real sits above the atmosphere. */
.nav, main, .footer { position: relative; z-index: 2; }

/* ── 4. Layout primitives ──────────────────────────────────────────────── */

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

.section { padding-block: var(--section-y); }
.section__head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }

.section__note {
  margin-top: 1.25rem;
  max-width: 38rem;
  color: var(--ink-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--grad);
}

/* ── 5. Gradient type ──────────────────────────────────────────────────── */

/* The spectrum runs through the glyphs and drifts continuously, so the type
   is never the same twice. background-size is oversized so the animation has
   somewhere to travel. */
.grad {
  background: var(--grad);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: drift 18s ease-in-out infinite alternate;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ── 6. Navigation ─────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 2px 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Poppins', var(--font-body);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__mark { width: 32px; height: 32px; flex: none; overflow: visible; }
.wordmark__text b { font-weight: 600; color: #12D9CB; }
.wordmark__text i { font-style: normal; font-weight: 600; color: #9A9CA1; }
.wordmark__text s { text-decoration: none; font-weight: 300; color: #B7B9BE; font-size: 0.66em; letter-spacing: 0; }

/* On hover the dot trail runs bottom-left to top-right, the direction the
   mark already points. */
.wordmark .dx-dot { transform-box: fill-box; transform-origin: center; }
.wordmark:hover .dx-dot { animation: trail 0.9s var(--ease-out) both; }
.wordmark:hover .dx-dot:nth-of-type(1) { animation-delay: 0ms; }
.wordmark:hover .dx-dot:nth-of-type(2) { animation-delay: 45ms; }
.wordmark:hover .dx-dot:nth-of-type(3) { animation-delay: 90ms; }
.wordmark:hover .dx-dot:nth-of-type(4) { animation-delay: 135ms; }
.wordmark:hover .dx-dot:nth-of-type(5) { animation-delay: 180ms; }
.wordmark:hover .dx-dot:nth-of-type(6) { animation-delay: 225ms; }
.wordmark:hover .dx-dot:nth-of-type(7) { animation-delay: 270ms; }
.wordmark:hover .dx-dot:nth-of-type(8) { animation-delay: 315ms; }
.wordmark:hover .dx-dot:nth-of-type(9) { animation-delay: 360ms; }

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  position: relative;
  font-size: 0.875rem;
  color: var(--ink-muted);
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: 1.5rem; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease);
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle__track {
  position: relative; display: block;
  width: 34px; height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.theme-toggle__thumb {
  position: absolute; top: 50%; left: 3px;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%;
  background: var(--grad);
  transition: transform 0.45s var(--ease-out);
}
:root[data-theme='light'] .theme-toggle__thumb { transform: translateX(14px); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle__thumb { transform: translateX(14px); }
}

/* ── 7. Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(7.5rem, 16vh, 10.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.statusbar {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.statusbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 10px var(--accent-hi);
  animation: pulse 2.6s var(--ease) infinite;
}
.statusbar__rule { width: 1.75rem; height: 1px; background: var(--grad); }
.statusbar__clock { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
/* Typed commands and their output read as a terminal, so no forced capitals. */
.statusbar__text { text-transform: none; letter-spacing: 0.03em; }

.hero__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.0;
  letter-spacing: -0.038em;
  max-width: none;
}

/* The type emits light rather than just being coloured in. drop-shadow reads
   the glyph alpha of the clipped gradient, so the bloom follows the letterforms
   and survives the per-line overflow clipping that a ghost element would not. */
.hero__title {
  filter: drop-shadow(0 0 42px rgba(25, 211, 197, 0.22));
}

/* The gradient sits on the typed copy, not the <h1>: background-clip:text
   paints every glyph inside the element it's on, including the screen-reader
   copy that is meant to be invisible. */
.hero__typed {
  display: block;
  animation: fade-up 0.9s var(--ease-out) 0.1s both, drift 18s ease-in-out infinite alternate;
}

/* The full stop is the cursor: solid while a title is being typed, flashing
   once it's complete. It takes the accent rather than the headline gradient. */
.hero__dot {
  /* Must stay inline: an inline-block inside background-clip:text makes Chrome
     paint a second copy of the glyph at the start of the line. */
  display: inline;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  animation: dot-blink 1.1s steps(1) infinite;
}
/* Its own state name: .is-typing also draws the block caret used by the
   smaller typed lines, which would add a stray line under the headline. */
.hero__title.is-writing .hero__dot { animation: none; }
@keyframes dot-blink { 50% { opacity: 0; } }

.hero__foot {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.6s forwards;
}
.hero__lede {
  max-width: 34rem;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.hero__cue {
  display: inline-flex; align-items: baseline; gap: 0.75rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hero__cue:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.hero__cue-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── 8. Capabilities ───────────────────────────────────────────────────── */

.spec { border-top: 1px solid var(--line); }

.spec__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-inline: 1.25rem;
  margin-inline: -1.25rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.45s var(--ease);
}
/* A spectrum rule wipes in along the bottom edge on hover. */
.spec__row::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.spec__row:hover { background: color-mix(in srgb, var(--surface-hi) 70%, transparent); }
.spec__row:hover::after { transform: scaleX(1); }

.spec__term {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.spec__desc { max-width: 44rem; color: var(--ink-muted); text-wrap: pretty; }

/* ── 9. The register ───────────────────────────────────────────────────── */

.section--register {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: inset 0 1px 0 var(--edge);
}

#capabilities,
.section--sectors {
  background: color-mix(in srgb, var(--canvas-alt) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--edge);
}

.register { border-top: 1px solid var(--line-strong); }

.record {
  position: relative;
  padding-inline: 1.25rem;
  margin-inline: -1.25rem;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  transition: background-color 0.4s var(--ease);
  /* Set by main.js from the row's position in the viewport. */
  --p: 0;
}
/* A spectrum rule that fills as the row travels up the viewport — the scroll
   position of each record made literal. */
.record::before {
  content: '';
  position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--grad-line);
  transform: scaleX(var(--p));
  transform-origin: left;
}

.record__head {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 13rem) 8.5rem;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-block: clamp(1.3rem, 2.4vw, 1.9rem);
  text-align: left;
  transition: opacity 0.35s var(--ease);
}

.record__ref {
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color 0.3s var(--ease);
}
.record:hover .record__ref,
.record.is-open .record__ref {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.record__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.65rem);
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -0.025em;
  line-height: 1.15;
  transition: transform 0.5s var(--ease-out);
}
.record:hover .record__name,
.record.is-open .record__name { transform: translateX(8px); }

.record.is-open .record__name {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.record__disc { font-size: 0.875rem; color: var(--ink-muted); }

.record__status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
[data-status='live'] .dot {
  background: var(--accent-hi);
  box-shadow: 0 0 10px var(--accent-hi);
  animation: pulse 2.6s var(--ease) infinite;
}
[data-status='maintained'] .dot { background: var(--slate); }
[data-status='delivered'] .dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}

.record__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.record.is-open .record__panel { grid-template-rows: 1fr; }
.record:hover { background: color-mix(in srgb, var(--surface-hi) 45%, transparent); }
.record.is-open { background: var(--surface-hi); box-shadow: inset 0 1px 0 var(--edge); }

.record__panel-inner { overflow: hidden; opacity: 0; transition: opacity 0.4s var(--ease); }
.record.is-open .record__panel-inner { opacity: 1; transition-delay: 0.14s; }
.record__panel-inner > * { margin-left: 6.5rem; }

.record__copy { max-width: 44rem; padding-bottom: 1.75rem; color: var(--ink-muted); text-wrap: pretty; }

.record__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; padding-bottom: 1.75rem; }
.record__meta li { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink); }
.record__meta li span {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.record__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-bottom: 2.25rem; padding-bottom: 0.35rem;
  font-family: var(--font-mono); font-size: 0.8125rem;
  color: var(--accent-hi);
  border-bottom: 1px solid var(--signal-line);
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease), color 0.3s var(--ease);
}
.record__link:hover { border-bottom-color: var(--accent-hi); gap: 0.8rem; }

.register.has-open .record:not(.is-open) .record__head { opacity: 0.38; }

/* ── 10. Sectors ───────────────────────────────────────────────────────── */

.section--sectors { padding-block: clamp(3.5rem, 7vw, 6rem); }

.sectors {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  gap: clamp(1rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sectors .eyebrow { margin-bottom: 0; }

.sectors__list {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.sectors__list i {
  font-style: normal;
  padding-inline: 0.2em;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── 11. Approach ──────────────────────────────────────────────────────── */

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }

.principle {
  position: relative;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--edge);
  overflow: hidden;
}
.principle::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.principle.is-revealed::before { transform: scaleX(1); }
.principle:nth-child(2)::before { transition-delay: 0.12s; }
.principle:nth-child(3)::before { transition-delay: 0.24s; }

.principle__title {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.principle p { color: var(--ink-muted); font-size: 0.9375rem; text-wrap: pretty; }

/* ── 12. Footer ────────────────────────────────────────────────────────── */

.footer {
  padding-block: 2.5rem;
  background: var(--canvas-deep);
  border-top: 1px solid var(--line);
}

.footer__bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.footer__mark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Poppins', var(--font-body); font-size: 0.875rem; letter-spacing: -0.01em;
}
.footer__mark b { font-weight: 600; color: #12D9CB; }
.footer__mark i { font-style: normal; font-weight: 600; color: #9A9CA1; }
.footer__logo { width: 22px; height: 22px; flex: none; }
.footer__owned a {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.footer__owned a:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

/* ── 13. Motion & reveal ───────────────────────────────────────────────── */

@keyframes line-in { to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drift   { to { background-position: 100% 0; } }
@keyframes bloom {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}
@keyframes trail { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.7); } }
@keyframes pulse {
  0%        { box-shadow: 0 0 0 0 var(--signal-line), 0 0 10px var(--accent-hi); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(25, 211, 197, 0), 0 0 10px var(--accent-hi); }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-revealed { opacity: 1; transform: none; }

.record {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.record.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .field { display: none; }
  .glow { animation: none; }
  .reveal, .record, .hero__foot { opacity: 1 !important; transform: none !important; }
  .record::before, .principle::before { transform: scaleX(1); }
}

/* ── 14. Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .record__head { grid-template-columns: 4rem minmax(0, 1fr) 7.5rem; }
  .record__disc { display: none; }
  .record__panel-inner > * { margin-left: 5.5rem; }
  .gridlines { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
  .spec__row, .sectors { grid-template-columns: 1fr; gap: 0.75rem; }
  .nav__links { display: none; }
}

@media (max-width: 620px) {
  .hero__title { font-size: clamp(1.95rem, 9vw, 2.6rem); font-stretch: 100%; letter-spacing: -0.035em; line-height: 1.04; }
  .theme-toggle__label { display: none; }
  .wordmark { font-size: 0.95rem; gap: 0.45rem; }
  .wordmark__mark { width: 28px; height: 28px; }
  .wordmark__text s { display: none; }
  .nav__actions { gap: 0.75rem; }
  .hero__title { filter: drop-shadow(0 0 24px rgba(25, 211, 197, 0.18)); }
  .gridlines { display: none; }

  .record__head {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'ref status' 'name name';
    gap: 0.85rem 1rem;
  }
  .record__ref    { grid-area: ref; }
  .record__status { grid-area: status; }
  .record__name   { grid-area: name; }
  .record:hover .record__name { transform: none; }
  .record.is-open .record__name { transform: none; }

  .record__panel-inner > * { margin-left: 0; }
  .record { padding-inline: 0.9rem; margin-inline: -0.9rem; }
  .record__meta { gap: 1rem 2rem; }

  .hero__foot { align-items: flex-start; }
}

/* ── 15. Typing, terminal, live status ────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  font-family: var(--font-mono);
  font-size: 0.78em;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* Block caret shown while text is being typed. */
.is-typing::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__for {
  margin-top: clamp(1.25rem, 2.5vw, 1.9rem);
  min-height: 1.6em;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.15vw, 0.95rem);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.45s forwards;
}
.typer { color: var(--accent-hi); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.hero__term {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.hero__term:hover { border-color: var(--accent); color: var(--accent-hi); }
.hero__term > span { color: var(--accent-hi); }

.query {
  min-height: 1.5em;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.query__result { color: var(--accent-hi); white-space: pre; }

.checked {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.checked::before { content: '●'; margin-right: 0.5em; color: var(--signal); }

.footer__hint { margin-left: 0.75rem; }
@media (hover: none) { .footer__hint { display: none; } }

/* The terminal is always dark, whatever the page theme — it's a terminal. */
.term {
  --t-bg:   #070B12;
  --t-ink:  #D8DEE9;
  --t-dim:  #7C8699;
  --t-ok:   #5EEADF;
  --t-err:  #FF7A85;
  --t-line: rgba(255, 255, 255, 0.08);

  width: min(760px, calc(100% - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t-ink);
  overflow: visible;
}
.term::backdrop { background: rgba(3, 6, 12, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html.term-open { overflow: hidden; }

.term__window {
  display: flex;
  flex-direction: column;
  height: min(520px, calc(100dvh - 32px));
  font-family: var(--font-mono);
  background: var(--t-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--signal-line);
  overflow: hidden;
}
.term[open] .term__window { animation: term-in 0.28s var(--ease-out); }
@keyframes term-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.72rem;
  color: var(--t-dim);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--t-line);
}
.term__lights { display: inline-flex; gap: 6px; }
.term__lights i { width: 10px; height: 10px; border-radius: 50%; background: #2A3140; }
.term__title { flex: 1; text-align: center; }
.term__close {
  padding: 0.15rem 0.45rem;
  font-family: inherit;
  font-size: 0.68rem;
  color: var(--t-dim);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
}
.term__close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.term__out {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0.25rem;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term__line { margin: 0; }
.term__line.is-cmd { margin-top: 0.4rem; color: #fff; }
.term__line.is-dim { color: var(--t-dim); }
.term__line.is-ok  { color: var(--t-ok); }
.term__line.is-err { color: var(--t-err); }
.term__line a { color: var(--t-ok); text-decoration: underline; text-underline-offset: 3px; }

.term__form { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.9rem; }
.term__prompt { font-size: 0.82rem; color: var(--t-ok); white-space: nowrap; }
.term__in {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0;
  font: inherit;
  font-size: 0.82rem;
  color: #fff;
  caret-color: var(--t-ok);
  background: transparent;
  border: 0;
  outline: 0;
}
.term__form:focus-within .term__prompt { text-shadow: 0 0 12px var(--t-ok); }

.term__hint {
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
  color: #5E677A;
  border-top: 1px solid var(--t-line);
}
.term kbd { color: #9AA3B5; border-color: rgba(255, 255, 255, 0.18); }

/* Touch screens: 16px input stops iOS zooming, and the window leaves room
   for the on-screen keyboard. */
@media (hover: none) {
  .term__in { font-size: 16px; }
  .term__window { height: min(460px, 68dvh); }
}

@media (max-width: 620px) {
  .statusbar { flex-wrap: wrap; row-gap: 0.4rem; }
  .statusbar__rule { display: none; }
  /* Clock always on its own line, so the bar keeps one height whether it
     shows the short ping or the longer result. */
  .statusbar__clock { flex-basis: 100%; }
  .term { width: calc(100% - 20px); }
  .term__hint { display: none; }
  .term__title { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__for { opacity: 1 !important; }
  .term[open] .term__window { animation: none; }
}