/* ==========================================================================
   Hello Delorus, one-page site
   Design system: docs/design-system.md
   Light editorial base (warm paper) with a single deep-teal accent, Inter,
   CSS custom properties.
   ========================================================================== */

/* Inter is self-hosted (variable font, one file, weights 400-600) so the site
   has no third-party font dependency. latin subset covers Swedish (a/aa/oe). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Neutrals (warm paper base) */
  --bg:        #F6F4EF;
  --surface:   #FFFFFF;
  --surface-2: #FBFAF7;
  --border:    #E4E0D6;
  --text:      #1A1A1A;
  --text-dim:  #57534E;
  --text-faint:#8A857C;

  /* The single accent, deep teal — unexpected for a warm editorial base */
  --accent:       #0E7C7B;
  --accent-hover: #0A625F;
  --on-accent:    #FFFFFF;

  /* Type */
  --font: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --maxw: 72rem;
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fixed-nav height, mirrored as hero top padding so centered hero copy
     never rises into the nav. Mobile CTA wraps to two lines (taller nav);
     it becomes one line from 440px up, so the value drops there. */
  --nav-h: 88px;
}
/* CTA is one line (shorter nav) from 414px up; two lines below that. */
@media (min-width: 414px) { :root { --nav-h: 68px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Faint structural grid, depth without clutter. Fades out below the hero so the
   lower sections stay clean. Purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(26, 26, 26, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 26, 26, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 22%, transparent 42%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 22%, transparent 42%);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-4);
  position: relative;
  z-index: 1; /* sit above decorative bg layers (grid, scan, iris) */
}
@media (min-width: 720px) { .container { padding-inline: var(--space-6); } }
.container--narrow { max-width: 46rem; }

/* ---------- Type primitives ---------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}
.section { padding-block: var(--space-6); }
@media (min-width: 720px) { .section { padding-block: var(--space-8); } }
.section__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 20ch;
  margin-bottom: var(--space-3);
}
.section__lead {
  font-size: 1.25rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}
.section__title--center,
.section__lead--center { margin-inline: auto; text-align: center; }
.section__title--center { max-width: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 980px;
  padding: var(--space-3) var(--space-5);
}
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn__arrow { transition: transform 200ms var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }

.link {
  font-weight: 500;
  color: var(--text);
  transition: color 200ms var(--ease);
}
.link:hover { color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 300ms var(--ease), border-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(246, 244, 239, 0.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--border);
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
@media (min-width: 720px) { .nav__inner { padding-inline: var(--space-6); } }
.nav__brand { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.nav__links { display: none; gap: var(--space-5); }
.nav__links a { font-size: 0.9375rem; color: var(--text-dim); transition: color 200ms var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__cta { padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
@media (min-width: 820px) { .nav__links { display: flex; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Reserve the fixed nav's height as top padding so the centered copy always
     clears the nav. Without this, on short viewports the centered content rises
     up under the fixed transparent nav and the eyebrow collides with the CTA
     pill (reproduced at 390x667: 17px overlap). The nav is out of flow, so the
     hero must account for it. --nav-h matches the measured nav height per
     breakpoint (87px mobile = 2-line CTA, 68px desktop = 1-line CTA). */
  padding-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate; /* contain the negative-z background so it stays inside the hero */
}
/* The Delorus still, graded for the light base (img/hero-graded.jpg): the source
   is a low-key cinematic frame (YAVG~32) that would bury dark text as a full-bleed
   background, so it is re-introduced as a framed right-column visual instead. The
   grade lifts the black floor, neutralizes the muddy olive cast, and adds a
   controlled teal lift in the shadows to echo --accent. Hidden on mobile so the
   centered copy keeps the CTA reachable; the paper + glow carry the hero there. */
.hero__media { display: none; }
/* A soft teal halo centered behind the headline — the single accent note,
   read as an intentional glow rather than a stray corner shape. Kept small and
   fully contained so its falloff never reaches a viewport corner. */
.hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(14, 124, 123, 0.12) 0%, rgba(14, 124, 123, 0.04) 40%, transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}
/* Live particle constellation: a field of drifting teal nodes that link into a
   mesh and reach toward the cursor. The "tuning" made visible. Rendered in
   script.js (same origin, no external deps); a single static frame under
   prefers-reduced-motion. Sits behind the text, above the glow/scan. */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* The "Delorus scan", a faint sonar motif: concentric rings with a slow teal
   sweep. The host sensing and tuning. Purely decorative, sits behind the text. */
.hero__scan {
  position: absolute;
  top: 50%;
  right: -16%;
  width: 92vmin;
  height: 92vmin;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  background: repeating-radial-gradient(circle at center,
    transparent 0 46px, rgba(26, 26, 26, 0.05) 46px 47px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 72%);
}
.hero__scan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 300deg,
    rgba(14, 124, 123, 0.10) 348deg, rgba(14, 124, 123, 0.28) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 40%, #000 41% 70%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 0 40%, #000 41% 70%, transparent 71%);
  animation: hero-scan 9s linear infinite;
}
@keyframes hero-scan { to { transform: rotate(360deg); } }
@media (max-width: 719px) {
  .hero__scan { right: -45%; width: 130vmin; height: 130vmin; opacity: 0.4; }
}
.hero .container { position: relative; }
/* Below 900px the photo is hidden and the hero is a single centered column —
   the warm paper + glow carry it, and the centered copy keeps the CTA reachable. */
@media (min-width: 720px) and (max-width: 899px) {
  .hero .container { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__actions { justify-content: center; }
}
/* >=900px: two-column editorial hero. Copy left, graded still right. Left-aligned
   to match the body sections; the photo is the visual weight on the right. */
@media (min-width: 900px) {
  .hero__media {
    position: relative;
    display: block;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    /* Soft lift so the dark still sits on the paper without a hard drop shadow. */
    box-shadow: 0 24px 60px -32px rgba(26, 26, 26, 0.35);
    aspect-ratio: 4 / 5;
    max-width: 30rem;
    justify-self: end;
  }
  /* Tonal bridge: a faint teal wash bleeding from behind the frame's left edge
     ties the dark cinematic still to the paper background and the accent, so it
     reads as part of the page rather than a rectangle pasted on top of it. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: -18% -14% -14% -14%;
    z-index: -1;
    background: radial-gradient(60% 70% at 30% 55%, rgba(14, 124, 123, 0.22), transparent 72%);
    filter: blur(28px);
    pointer-events: none;
  }
  .hero__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
  }
  /* Soft teal-tinted scrim from the left edge: bridges the dark still into the
     warm paper and ties it to the accent, so it reads as a curated brand element
     rather than a pasted-in dark box. Kept subtle so the subject stays legible. */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(105deg, rgba(14, 124, 123, 0.28) 0%, rgba(14, 124, 123, 0.06) 42%, transparent 70%),
      linear-gradient(0deg, rgba(26, 26, 26, 0.28) 0%, transparent 32%);
    pointer-events: none;
  }
}
.hero__title {
  /* Capped at 4.5rem (not 5rem): in the two-column hero the title column is
     only ~484px wide, and 5rem pushes the CTA below the fold at 1280x800. */
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.04;
  margin-bottom: var(--space-4);
}
.hero__sub {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.hero__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

/* ---------- Grid + cards ---------- */
.grid { display: grid; gap: var(--space-4); }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  /* Method pipeline: a faint thread linking Diagnose → Build → Tune, behind the
     cards. Decorative; hidden on mobile where the cards stack. */
  #method .grid--3 { position: relative; }
  #method .grid--3::before {
    content: "";
    position: absolute;
    top: 56px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(to right,
      transparent, var(--border) 12%, var(--border) 88%, transparent);
    pointer-events: none;
  }
  #method .card { position: relative; z-index: 1; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--text-faint); background: var(--surface-2); }
.card__num {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.card__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.card__body { color: var(--text-dim); font-size: 1rem; }
/* Service-catalog price anchor: a quiet, tabular line under the description. */
.card__price {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* The agentic-AI line is the differentiator — a hairline teal edge, not a loud badge. */
.card--specialty { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card--specialty .card__num { color: var(--accent-hover); }
.card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
/* Work cards: a Bottleneck → Agent → Outcome flow. Each step is a labeled line
   that reads as a worked example of the method, not a feature bullet. */
.card__flow { margin: var(--space-3) 0 0; border-top: 1px solid var(--border); }
.card__step { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.card__step:last-child { border-bottom: 0; }
.card__step-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}
.card__step-body { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.proof__note {
  margin-top: var(--space-5);
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* ---------- Story ---------- */
.section--story { position: relative; overflow: hidden; border-block: 1px solid var(--border); }
/* The "iris", faint concentric rings on the right, the host gaining awareness.
   Mirrors the hero scan so the two brand sections rhyme. Purely decorative. */
.story__iris {
  position: absolute;
  top: 50%;
  right: -14%;
  width: 60vmin;
  height: 60vmin;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-radial-gradient(circle at center,
    transparent 0 38px, rgba(26, 26, 26, 0.05) 38px 39px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 72%);
}
.story__iris::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 120deg,
    transparent 0deg, transparent 300deg,
    rgba(14, 124, 123, 0.10) 348deg, rgba(14, 124, 123, 0.24) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 42%, #000 43% 70%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 0 42%, #000 43% 70%, transparent 71%);
  animation: hero-scan 14s linear infinite;
}
@media (max-width: 719px) {
  .story__iris { right: -55%; width: 120vmin; height: 120vmin; opacity: 0.35; }
}
.story__body { max-width: 62ch; }
.story__body p { font-size: 1.25rem; color: var(--text-dim); line-height: 1.6; }
.story__body p + p { margin-top: var(--space-4); }
.story__body strong { color: var(--text); font-weight: 600; }
/* A single Delorus still. One per scene. Rounded, bordered frame with a slow
   zoom on hover. Constrained to a cinematic width so it reads as a deliberate
   still, not a full-bleed banner. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-top: var(--space-6);
  max-width: 52rem;
  transition: border-color 200ms var(--ease);
}
.frame:hover { border-color: rgba(14, 124, 123, 0.45); }
.frame__img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.001);
  transition: transform 600ms var(--ease);
}
.frame:hover .frame__img { transform: scale(1.03); }

/* ---------- Trust ---------- */
.section--trust { border-top: 1px solid var(--border); }
.trust__grid { margin-top: var(--space-2); }
.integrations { margin-top: var(--space-6); }
.integrations__label {
  font-size: 0.875rem;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.integrations__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 640px) { .integrations__grid { grid-template-columns: repeat(4, 1fr); } }
.integrations__grid li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.integrations__grid li::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
}
.integrations__grid li:hover { border-color: rgba(14, 124, 123, 0.45); color: var(--text); }

/* ---------- Offer ---------- */
.offer__body { max-width: 62ch; }
.offer__body > p { font-size: 1.25rem; color: var(--text-dim); margin-bottom: var(--space-5); }
.offer__list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.offer__list li {
  padding-left: var(--space-5);
  position: relative;
  color: var(--text-dim);
  font-size: 1.0625rem;
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
}
.offer__list strong { color: var(--text); font-weight: 600; }

.offer__fees {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .offer__fees { grid-template-columns: repeat(3, 1fr); } }
.fee {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
}
.fee__label {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.fee__amount {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.fee__note {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.offer__cap {
  margin-top: var(--space-4);
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1rem;
}
.offer__cap strong { color: var(--text); font-weight: 600; }

/* ---------- CTA / form ---------- */
.section--cta { border-top: 1px solid var(--border); }
.form {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  text-align: left;
}
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: block; }
.field__label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.form__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.form__note { font-size: 0.875rem; color: var(--text-faint); }
.form__success {
  display: none;
  padding: var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
}
.form.is-sent .form__success { display: block; }
.form.is-sent .form__fields,
.form.is-sent .form__actions { display: none; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: var(--space-6); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  justify-content: space-between;
}
.footer__wordmark { font-weight: 600; font-size: 1.0625rem; }
.footer__tag { color: var(--text-faint); font-size: 0.9375rem; margin-top: var(--space-2); }
.footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer__links a { color: var(--text-dim); font-size: 0.9375rem; transition: color 200ms var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__contact { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__contact-label { color: var(--text-faint); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.footer__email { color: var(--text); font-size: 0.9375rem; transition: color 200ms var(--ease); }
.footer__email:hover { color: var(--accent); }
.footer__who { color: var(--text-faint); font-size: 0.8125rem; max-width: 32ch; }
.footer__legal { margin-top: var(--space-5); }
.footer__legal p { color: var(--text-faint); font-size: 0.8125rem; }
.footer__privacy { max-width: 72ch; margin-top: var(--space-1); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* JS off: the no-js class is never removed, so show everything immediately. */
html.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- BRF diagnostic page (/se/brf.html) ---------- */
/* The hero on this page is a two-column split: copy on the left, the live
   micro-calculator on the right. The calculator is the product, so it gets the
   same surface treatment as a card, and the accent is reserved for the numbers. */
.nav__brand { display: inline-flex; align-items: center; gap: 0.5em; }
.nav__mark { width: 1.375rem; height: 1.375rem; color: var(--accent); }

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero__content { max-width: 34rem; }
/* Faint backdrop wash for heroes that have no photo (e.g. the BRF calculator
   hero). The index hero uses a framed still instead, so it carries no .hero__bg. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 85% 10%, rgba(14, 124, 123, 0.10) 0%, transparent 60%),
    radial-gradient(50vw 50vw at 10% 90%, rgba(14, 124, 123, 0.05) 0%, transparent 60%);
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(26, 26, 26, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 26, 26, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 70% 40%, #000 0%, transparent 100%);
}

.calc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.calc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.calc__title { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.calc__live {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.calc__fields { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.calc__fields .field + .field { margin-top: 0; }

/* Range inputs, styled to the system: thin track, accent fill, accent thumb. */
.field__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  margin-top: var(--space-2);
  cursor: pointer;
}
.field__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform 150ms var(--ease);
}
.field__range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.field__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.field__range:focus-visible { box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.3); }
.field__val {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.field__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.calc__out {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.calc__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.calc__stat-label { font-size: 0.875rem; color: var(--text-dim); }
.calc__stat-num {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.calc__stat--risk .calc__stat-num { color: var(--accent); }

.calc__score {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.calc__score-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.calc__score-label { font-size: 0.875rem; color: var(--text-dim); }
.calc__score-num {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.calc__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.calc__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 124, 123, 0.55), var(--accent));
  transition: width 400ms var(--ease);
}
.calc__verdict {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Cards grid used on the BRF page (same cards, 3-up). */
.cards { display: grid; gap: var(--space-4); }
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* CTA block: title + sub + form, left-aligned inside the section. */
.cta { max-width: 46rem; }
.cta__title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.cta__sub {
  font-size: 1.125rem;
  color: var(--text-dim);
  max-width: 56ch;
  margin-bottom: var(--space-5);
}
.form__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* BRF footer variant: brand + contact column. */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  justify-content: space-between;
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- 404 page ---------- */
.notfound {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-6);
}
.notfound__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.notfound__sub {
  font-size: 1.25rem;
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}

/* ---------- App pages (apps/) ----------
   Product pages for the AAOS car apps. Reuse the site's section/card/frame
   primitives; this block only adds the app-specific chrome: a product hero
   (icon + name + tagline), a screenshot gallery, and a spec list. */
.app-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  isolation: isolate;
  overflow: hidden;
}
.app-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(14, 124, 123, 0.10), transparent 55%),
    var(--bg);
}
.app-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 720px) {
  .app-hero__inner { grid-template-columns: 1fr auto; gap: var(--space-8); }
}
.app-hero__icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  object-fit: cover;
  box-shadow: 0 24px 60px -30px rgba(26, 26, 26, 0.35);
}
@media (min-width: 720px) {
  .app-hero__icon { width: 128px; height: 128px; border-radius: 28px; }
}
.app-hero__name {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: var(--space-3);
}
.app-hero__tag {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  color: var(--text-dim);
  max-width: 40ch;
  margin-bottom: var(--space-5);
}
.app-hero__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

/* Screenshot gallery: a lead shot full-width, then a two-up row. */
.shots { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.shots__lead { margin-top: 0; }
.shots__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .shots__row { grid-template-columns: 1fr 1fr; } }
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 200ms var(--ease);
}
.shot:hover { border-color: rgba(14, 124, 123, 0.45); }
.shot__img { width: 100%; height: auto; display: block; transform: scale(1.001); transition: transform 600ms var(--ease); }
.shot:hover .shot__img { transform: scale(1.03); }
.shot__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-dim);
  background: linear-gradient(to top, rgba(10, 10, 11, 0.9), transparent);
}

/* Spec list: a two-column definition list for the technical angle. */
.spec {
  margin-top: var(--space-6);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.spec__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .spec__row { grid-template-columns: 16rem 1fr; gap: var(--space-5); } }
.spec__key {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec__val { color: var(--text-dim); font-size: 1rem; line-height: 1.55; }
.spec__val strong { color: var(--text); font-weight: 600; }

/* App index: a grid of product cards, each a link to the app page. */
.apps-grid { margin-top: var(--space-6); }
@media (min-width: 640px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
.app-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-5);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.app-card:hover { transform: translateY(-2px); border-color: rgba(14, 124, 123, 0.45); background: var(--surface-2); }
.app-card__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.app-card__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  object-fit: cover;
  flex-shrink: 0;
}
.app-card__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.app-card__cat {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--space-1);
}
.app-card__body { color: var(--text-dim); font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-4); }
.app-card__go { color: var(--accent); font-size: 0.9rem; font-weight: 600; }