/* ==========================================================================
   Plansyx — landing page
   Implemented from the Claude Design canvas "Plansyx Landing.dc.html".
   ========================================================================== */

:root {
  /* Surfaces */
  --paper:        #E4EADC;
  --card:         #F7F9F4;
  --ink:          #0F1F1B;
  --panel:        #16281F;

  /* Lines */
  --rule:         #C3CFB8;
  --rule-soft:    #DDE5D3;
  --card-border:  #CFDAC5;
  --panel-border: #244034;
  --panel-rule:   #3A5548;

  /* Type on light */
  --text:         #0F1F1B;
  --text-strong:  #26382A;
  --text-muted:   #44553D;
  --label:        #5E7554;

  /* Type on dark */
  --cream:        #EEF2EA;
  --cream-muted:  #B9C6B2;
  --cream-dim:    #8FA487;
  --cream-faint:  #7C9273;

  /* Accent */
  --lime:         #A9EE5C;
  --lime-deep:    #8CCB4B;
  --moss:         #4C6B3C;

  /* Type stacks */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --shell: 1320px;
}

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

html { scroll-behavior: smooth; }

/* Anchor jumps must land below the sticky header. */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--moss); }

::selection { background: var(--lime); color: var(--ink); }

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

img, svg { display: block; max-width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lime);
  color: var(--ink);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Shared type primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 18px;
}
.eyebrow--accent { color: var(--lime); }

.micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.micro--label  { letter-spacing: 0.12em; color: var(--label); }
.micro--accent { color: var(--lime); }
.micro--faint  { color: var(--cream-faint); }

.h2 {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
}
.h2--sm { font-size: 40px; line-height: 1.08; }

.lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.lede--dark { color: var(--cream-muted); }

/* Section head: heading left, supporting paragraph right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.section-head--ruled {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 30px;
  margin-bottom: 34px;
}

.section { padding: 96px 20px; }
.section--dark { background: var(--ink); color: var(--cream); }
.section--flush-top { padding-top: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-deep); color: var(--ink); }

.btn--ghost { border: 1px solid var(--panel-rule); color: var(--cream); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }

.btn--lg { font-size: 11px; letter-spacing: 0.1em; padding: 14px 22px; }
.btn--sm { font-size: 10px; letter-spacing: 0.1em; padding: 10px 14px; border-radius: 5px; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: 0 20px;
  overflow: hidden;
}
.hero > .shell { position: relative; z-index: 1; }

/* Faint instrument grid + ambient glow behind the hero. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(238, 242, 234, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 242, 234, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.site-header.is-stuck {
  background: rgba(15, 31, 27, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(238, 242, 234, 0.09);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/* Scroll position rail, pinned above the header. */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.scroll-rail__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--moss), var(--lime));
  box-shadow: 0 0 12px rgba(169, 238, 92, 0.5);
  transform-origin: left center;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 4px;
  transition: padding 300ms ease;
}
.site-header.is-stuck .nav { padding: 9px 4px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
}
.nav__links a {
  position: relative;
  color: var(--cream-muted);
  transition: color 200ms ease;
}
.nav__links a:hover { color: var(--lime); }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a.is-active { color: var(--cream); }
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__signin { font-size: 13px; color: var(--cream-muted); }
.nav__signin:hover { color: var(--lime); }

.nav__links-signin { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--panel-rule);
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--cream);
}
.nav__toggle span + span { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__head {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 4px 34px;
}
.hero__headline {
  font-family: var(--display);
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.hero__title-col { max-width: 760px; }
.hero__sub {
  max-width: 390px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream-muted);
  margin: 0 0 8px;
}

.hero__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  height: 300px;
  margin-bottom: 8px;
}

/* Imagery tiles. The hatch stays as the backdrop while media loads. */
.plate {
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: repeating-linear-gradient(135deg, #1B322B 0 8px, #16281F 8px 16px);
}
.plate--light {
  background: repeating-linear-gradient(135deg, #D3DEC8 0 8px, #CAD6BE 8px 16px);
}
.plate--light .micro { color: var(--label); }

.plate--media { margin: 0; }
.plate__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sits the imagery back a touch so the lime signal card stays the loudest
     thing in the hero. Relative colour relationships are untouched. */
  filter: saturate(0.94) brightness(0.94);
}
.plate--light .plate__media { filter: saturate(0.96); }

/* Captions sit over live imagery, so they override the muted label colour
   and lean on the scrim below rather than on the plate background. */
.plate__cap {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(238, 242, 234, 0.94);
  text-shadow: 0 1px 4px rgba(15, 31, 27, 0.9);
}
.plate--light .plate__cap {
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(247, 249, 244, 0.9);
}

/* Scrim so the caption stays legible over any part of the raster. */
.plate--media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 31, 27, 0.9) 0%, rgba(15, 31, 27, 0.45) 22%, transparent 48%);
  pointer-events: none;
}
.plate--light.plate--media::before {
  background: linear-gradient(to top, rgba(228, 234, 220, 0.92) 0%, rgba(228, 234, 220, 0.5) 22%, transparent 48%);
}

.hero__mosaic .plate:nth-child(1) { grid-column: span 5; }
.hero__mosaic .plate:nth-child(2) { grid-column: span 3; }

/* The signal card carries a live fire/dryness map behind its own copy. The
   lime stays as the backdrop, so it is what shows while the raster loads and
   what the accent reads as if the image never arrives. */
.hero__signal {
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  background: var(--lime);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
}
/* Absolute, so it drops out of the column flow instead of becoming a third
   flex item and pulling the label off the top edge. */
.hero__signal picture { position: absolute; inset: 0; z-index: 0; }

/* Cream rather than lime, because a lime wash would remap a data palette —
   the map has to keep meaning what its producer says it means. Weighted to
   the foot of the card, where the figure and the note sit. */
.hero__signal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(232, 238, 224, 0.95) 0%,
    rgba(232, 238, 224, 0.78) 26%,
    rgba(232, 238, 224, 0) 56%
  );
  pointer-events: none;
}
.hero__signal > *:not(picture) { position: relative; z-index: 2; }
/* The knock-back on .plate__media exists to keep the two plates recessive
   behind this card. The card is a raster itself now, and its fire detections
   are small red crosses that cannot afford to be dimmed. */
.hero__signal .plate__media { filter: none; }

/* The lime survives as a chip once the raster covers the card. */
.hero__signal-tag {
  align-self: flex-start;
  background: var(--lime);
  border-radius: 3px;
  padding: 4px 8px;
}
.hero__signal-figure {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__signal-note { font-size: 13px; margin-top: 6px; line-height: 1.4; }
.hero__signal-source { margin: 10px 0 0; color: var(--label); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  margin: 0;
}
.stat {
  flex: 1 1 220px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px 22px;
}
.stat__value {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0;
}
.stat__label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream-dim);
  margin: 6px 0 0;
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 12px; }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.grid--tight { gap: 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card--dark {
  background: var(--panel);
  border-color: var(--panel-border);
  color: var(--cream);
}
.card--outline {
  background: none;
  border: 1px solid var(--panel-border);
  padding: 20px 22px;
  gap: 8px;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}
.card__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hazard cards */
.hazard { min-height: 340px; }
.hazard__points {
  margin: auto 0 0;
  padding: 16px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--rule-soft);
}
.hazard__points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-strong);
}
.hazard__points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lime-deep);
  margin-top: 6px;
  flex: none;
}

/* Prediction chain */
.chain-step {
  min-height: 200px;
  padding: 22px;
  gap: 12px;
}
.chain-step__name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.chain-step__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: auto 0 0;
}

/* Platform modules */
.module__name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.module__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Area of business — fields of practice + service list
   -------------------------------------------------------------------------- */

.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
.field {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 9px 13px;
}

/* Spec-sheet rhythm rather than another card grid — this section is a
   statement of scope, not a set of products. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  column-gap: 32px;
}
.capability {
  border-top: 1px solid var(--rule);
  padding: 18px 0 22px;
}
.capability__name {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 10px 0 7px;
}
.capability__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Data spine
   -------------------------------------------------------------------------- */

.data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 48px;
  align-items: start;
}
.data__lede { max-width: 520px; margin: 0 0 28px; line-height: 1.65; }
.data .h2 { margin: 0 0 20px; }

.data__table {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.data__row {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.data__layer {
  flex: 0 0 150px;
  font-size: 14.5px;
  font-weight: 500;
  margin: 0;
}
.data__inputs {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.data__viz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data__viz .plate--light { grid-column: span 2; height: 230px; border-radius: 8px; }

.metric {
  border-radius: 8px;
  padding: 22px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric--dark { background: var(--ink); color: var(--cream); }
.metric--lime { background: var(--lime); color: var(--ink); }
.metric__figure {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.03em;
}
.metric__note { font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.metric--dark .metric__note { color: var(--cream-dim); }

/* --------------------------------------------------------------------------
   Customers · packages · trust
   -------------------------------------------------------------------------- */

.customer { min-height: 250px; padding: 24px; gap: 12px; }
.customer__name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.customer__decision { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.customer__value {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-strong);
}

.package { min-height: 280px; gap: 14px; }
.package__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.package__price {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.03em;
  margin: 0;
}
.package__body { font-size: 14px; line-height: 1.55; color: var(--cream-dim); margin: 0; }
.package .btn { margin-top: auto; align-self: flex-start; }

.trust { min-height: 190px; padding: 24px; gap: 10px; }
.trust__name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.trust__body { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 900px; margin: 0 auto; }
.faq__title {
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 28px;
  text-align: center;
}

.faq__item {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 20px 22px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.faq__sign {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--label);
  flex: none;
}
.faq__a { padding: 0 22px 20px; }
.faq__a p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 660px;
}
.faq__item[data-open='false'] .faq__a { display: none; }

/* --------------------------------------------------------------------------
   CTA + footer
   -------------------------------------------------------------------------- */

.cta { padding: 0 20px 20px; }
.cta__panel {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--ink);
  border-radius: 14px;
  padding: 74px 48px;
  color: var(--cream);
}
.cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.cta__title {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
}
.cta__sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cream-muted);
  margin: 0;
  max-width: 520px;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.footer { padding: 44px 20px 34px; }
.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 260px;
}
.footer__brand .brand__name { color: var(--text); font-size: 17px; }
.footer__tagline { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.footer__credit {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--label);
  max-width: 260px;
}

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}
.footer__col a { color: var(--text-muted); }
.footer__col a:hover { color: var(--moss); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__headline { font-size: 54px; }
  .h2 { font-size: 38px; }
  .h2--sm { font-size: 34px; }
  .cta__title { font-size: 38px; }
}

@media (max-width: 900px) {
  /* Top row stays brand + demo CTA + toggle; the section links and the
     secondary sign-in drop into the disclosure panel below. */
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav__toggle { display: block; order: 3; }
  .nav__actions { order: 2; margin-left: auto; }
  .nav__signin { display: none; }
  .nav__links-signin { display: block; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 6px 0 10px;
  }
  .nav[data-open='false'] .nav__links { display: none; }

  .hero__mosaic { height: auto; grid-template-columns: 1fr; }
  .hero__mosaic .plate:nth-child(1),
  .hero__mosaic .plate:nth-child(2) { grid-column: span 1; height: 160px; }
  /* Stacked, the card sizes to its copy — enough for a flat lime block, too
     short to read a map in. */
  .hero__signal { grid-column: span 1; min-height: 200px; }

  .data { grid-template-columns: 1fr; gap: 36px; }
  .cta__panel { padding: 56px 28px; }
}

@media (max-width: 620px) {
  /* Headings reflow as one paragraph rather than keeping the desktop line
     breaks, so the masked line reveal steps aside here. */
  .js .line {
    display: inline;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .js .line__i {
    display: inline;
    transform: none !important;
    transition: none !important;
  }

  .section { padding: 64px 20px; }
  .section--flush-top { padding-top: 0; }

  .hero__headline { font-size: 40px; }
  .hero__headline br,
  .h2 br,
  .cta__title br { display: none; }

  .h2, .h2--sm { font-size: 30px; }
  .cta__title { font-size: 30px; }
  .faq__title { font-size: 26px; }

  .data__viz { grid-template-columns: 1fr; }
  .data__viz .plate--light { grid-column: span 1; height: 180px; }
  .data__row { flex-direction: column; gap: 6px; }
  .data__layer { flex: none; }

  .capabilities { grid-template-columns: 1fr; }
  .capability__body { max-width: none; }
  .footer__cols { gap: 32px; }
  .card, .customer, .trust { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   Motion layer
   Everything here is gated on `html.js`, so the page renders complete with
   scripting off, and is switched off wholesale under prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-dur: 760ms;
}

/* -- Reveal on scroll ---------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Mono labels resolve from a character scramble, so they must not slide. */
.js [data-reveal='label'] { transform: none; }

/* Group containers stay put; their children carry the motion. */
.js [data-reveal='group'] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js [data-reveal='group'] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal='group'].is-in > * {
  opacity: 1;
  transform: none;
}

/* -- Masked line reveal for headings -------------------------------------- */

.js [data-reveal='lines'] { transform: none; }
.js [data-reveal='lines'].is-in { opacity: 1; }

.line {
  display: block;
  overflow: hidden;
  /* Descenders would otherwise be clipped by the mask. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.line__i {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal='lines'].is-in .line__i { transform: none; }

/* -- Count-up figures ----------------------------------------------------- */

[data-count] { font-variant-numeric: tabular-nums; }

/* -- Prediction chain: each step fills like a progress bar ---------------- */

.chain .chain-step { position: relative; overflow: hidden; }
.chain .chain-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lime), rgba(169, 238, 92, 0.15));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 180ms);
}
.js .chain.is-in .chain-step::before { transform: scaleX(1); }
.js .chain:not(.is-in) .chain-step::before { transform: scaleX(0); }

/* -- Ambient glow in the dark sections ------------------------------------ */

.section--dark,
.cta__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--dark > .shell,
.cta__panel > .cta__inner { position: relative; z-index: 1; }

.hero::after,
.section--dark::before,
.cta__panel::before {
  content: '';
  position: absolute;
  inset: -30% -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 18% 8%, rgba(169, 238, 92, 0.10), transparent 62%),
    radial-gradient(46% 52% at 88% 96%, rgba(169, 238, 92, 0.055), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero::after { inset: -20% -10% 20%; }

@keyframes drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}

/* -- Data plates read as a live acquisition ------------------------------- */

.plate { position: relative; overflow: hidden; }
/* Children carry their own stacking (media 0, scrim/sweep 1, caption 2) — see
   the .plate--media rules above; do not flatten them to a single layer here. */
.plate > .plate__cap { position: relative; z-index: 2; }
.js .plate.is-in::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(169, 238, 92, 0.13) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sweep 5.5s cubic-bezier(0.5, 0, 0.3, 1) 600ms infinite;
}
.js .plate--light.is-in::after {
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(76, 107, 60, 0.16) 50%,
    transparent 65%
  );
}

@keyframes sweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* -- Hover affordances ---------------------------------------------------- */

.card {
  transition:
    transform 320ms var(--ease-out),
    border-color 320ms ease,
    box-shadow 320ms var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--lime-deep);
  box-shadow: 0 18px 34px -26px rgba(15, 31, 27, 0.55);
}
.card--dark:hover,
.card--outline:hover {
  border-color: rgba(169, 238, 92, 0.42);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.8);
}

.faq__item { transition: border-color 260ms ease, background-color 260ms ease; }
.faq__item:hover { border-color: var(--lime-deep); }
.faq__a p {
  animation: answer-in 420ms var(--ease-out) both;
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.btn--lime:hover { transform: translateY(-1px); }
.btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }

.capability { transition: border-color 280ms ease; }
.capability:hover { border-color: var(--lime-deep); }

/* -- Hero parallax (desktop only; JS writes the custom property) ---------- */

@media (min-width: 900px) {
  .js .hero__mosaic { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }
}

/* -- Reduced motion: hand back a completely static page ------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal] > *,
  .js [data-reveal='group'] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .line__i { transform: none !important; transition: none !important; }
  .js .chain .chain-step::before { transform: scaleX(1) !important; transition: none !important; }
  .hero::after,
  .section--dark::before,
  .cta__panel::before,
  .js .plate.is-in::after { animation: none !important; }
  .js .plate.is-in::after { content: none; }
  .card:hover, .btn--lime:hover { transform: none; }
  .js .hero__mosaic { transform: none !important; }
  .faq__a p { animation: none !important; }
}