/* ==========================================================================
   Drone Sistemas — main stylesheet
   1. Tokens  2. Base  3. Layout  4. Header  5. Hero  6. Components
   7. Sections  8. Form  9. Footer  10. Animation  11. Responsive
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
  /* Brand accent — the yellow from the hardware */
  --accent:        #F0C419;
  --accent-hover:  #F7D34A;
  --accent-ink:    #16191D;   /* text on yellow */
  --accent-soft:   #FCEFBE;   /* soft yellow background */
  --accent-line:   #E0AE00;   /* accent that still reads as a line on white */
  --accent-glow:   #FFD84A;   /* warmer yellow, ambient light only — never text */
  --accent-text:   #856700;   /* yellow that stays legible on light — 5.9:1 on white */

  /* Primary interactive colour */
  --brand:         #16191D;
  --brand-hover:   #333A42;
  --on-brand:      #FFFFFF;

  /* Surfaces.
     The page base is a warm off-white rather than #FFF, so that cards, which
     stay pure white, have something to lift off. On a flat white page a white
     card is invisible and every panel has to be outlined instead. */
  --bg:            #FCFBF8;
  --bg-alt:        #F4F1EB;
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    #16191D;

  /* Text */
  --text:          #16191D;
  --text-muted:    #4D555F;
  --text-inverse:  #F2F4F6;

  /* Lines — warmed to match the base rather than reading blue against it */
  --border:        #E3DFD6;
  --border-strong: #B6AFA2;

  /* Gradients. Declared once so a card edge, a button and an accent bar all
     lean the same way; a page where every gradient runs at its own angle
     reads as a template, not a design. */
  --grad-accent:  linear-gradient(135deg, #F5D24A 0%, #E0AE00 100%);
  --grad-ink:     linear-gradient(180deg, #2A2F36 0%, #16191D 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%);
  --grad-band:    linear-gradient(180deg, #FAF8F3 0%, #F1EDE4 100%);
  --grad-edge:    linear-gradient(150deg, #DED7C7 0%, #EFEBE1 45%, #DBD4C3 100%);
  --grad-edge-hi: linear-gradient(150deg, #F0C419 0%, #E6C98A 30%, #DED7C7 70%);
  --hairline:     linear-gradient(90deg, transparent, #DFD9CD 18%, #DFD9CD 82%, transparent);

  /* The infrared palette, in order: the ramp the camera itself uses to turn
     temperature into colour. It marks where one band of the page begins, and
     it is the one motif on this site that means something rather than
     decorating something. Identical in both themes — the ramp is the ramp. */
  --thermal-edge: linear-gradient(90deg,
      rgba(11, 16, 48, 0) 0%, #0B1030 8%, #3B1E6E 24%, #8C1D4E 40%,
      #C93A1E 56%, #E8951A 70%, #F0C419 84%, #FFF4C2 94%, rgba(255, 244, 194, 0) 100%);
  /* Contour lines: ink at the ends, a drift of accent through the middle. */
  --contour-ink:  linear-gradient(115deg, #CFC7B4 0%, #D9C583 45%, #CFC7B4 100%);
  --contour-op:   .34;
  --flight-line:  #B6AFA2;

  /* Shadow */
  /* Warm-tinted rather than neutral grey: a grey shadow on a warm base looks
     like dirt. Two layers — a tight contact shadow and a wide soft one. */
  --shadow-sm: 0 1px 2px rgba(74, 62, 38, .07), 0 1px 1px rgba(74, 62, 38, .05);
  --shadow-md: 0 2px 4px rgba(74, 62, 38, .06), 0 10px 26px rgba(74, 62, 38, .10);
  --shadow-lg: 0 4px 8px rgba(74, 62, 38, .07), 0 26px 60px rgba(74, 62, 38, .16);

  /* Metrics */
  --radius:    6px;
  --radius-lg: 10px;
  --container: 1180px;
  /* The header only. Wider than the reading column on purpose — see .header */
  --container-wide: 1420px;
  --gutter:    24px;
  --header-h:  76px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --accent:        #F0C419;
  --accent-hover:  #F7D34A;
  --accent-ink:    #14161A;
  --accent-soft:   #2C2612;
  --accent-glow:   #F0C419;
  --accent-line:   #F0C419;
  --accent-text:   #F0C419;

  --brand:         #F0C419;
  --brand-hover:   #F7D34A;
  --on-brand:      #14161A;

  --bg:            #121417;
  --bg-alt:        #171A1E;
  --bg-elevated:   #1B1F25;
  --bg-inverse:    #0A0C0E;

  --text:          #ECEFF2;
  --text-muted:    #98A1AB;
  --text-inverse:  #ECEFF2;

  --border:        #272C33;
  --border-strong: #39414A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);

  /* Dark mode was already right and is left alone. These exist only so the
     shared rules below resolve to something sensible instead of inheriting a
     light-mode gradient onto a dark surface. */
  --grad-accent:  linear-gradient(135deg, #F7D34A 0%, #F0C419 100%);
  --grad-ink:     linear-gradient(180deg, #F7D34A 0%, #F0C419 100%);
  --grad-surface: linear-gradient(180deg, #1B1F25 0%, #1B1F25 100%);
  --grad-band:    linear-gradient(180deg, #171A1E 0%, #171A1E 100%);
  --grad-edge:    linear-gradient(150deg, #272C33 0%, #272C33 100%);
  --grad-edge-hi: linear-gradient(150deg, #F0C419 0%, #39414A 55%);
  --hairline:     linear-gradient(90deg, transparent, #272C33 18%, #272C33 82%, transparent);
  --contour-ink:  linear-gradient(115deg, #2E343C 0%, #4A422B 45%, #2E343C 100%);
  --contour-op:   .5;
  --flight-line:  #39414A;

  color-scheme: dark;
}

/* ---------- 2. BASE ------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* A backstop, not the fix. Chromium leaves fixed-position boxes out of the
     page's scrollable area, so the off-canvas drawer costs nothing there;
     WebKit is less consistent about it. The drawer is handled properly at
     source — see .nav's visibility rule in section 11 — and this stays for
     everything else that might one day bleed a pixel past the right edge. */
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* Prevents a flash of untranslated text */
html:not(.i18n-ready) body { visibility: hidden; }

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.018em; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 4.4vw, 3.25rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.25rem); letter-spacing: -.024em; }
h3 { font-size: 1.16rem; }
p  { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--radius); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* ---------- 3. LAYOUT ---------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 900px; }

.section { padding: clamp(56px, 8vw, 104px) 0; }
/* The thermal rule sits on the TOP edge only. On both edges of five bands it
   is ten rainbows on one page; on the leading edge it reads as "a new band
   starts here" and the existing soft fade closes the band at the bottom. */
.section--alt { background: var(--thermal-edge) top / 100% 3px no-repeat, var(--bg-alt); }
.section--tight { padding: clamp(38px, 5vw, 62px) 0; }
.section--dark {
  background: var(--thermal-edge) top / 100% 3px no-repeat, var(--bg-inverse);
  color: var(--text-inverse); position: relative; overflow: hidden;
}
.section--dark::before {
  content: ""; position: absolute; inset: -40% -15%; pointer-events: none;
  background: radial-gradient(32rem 20rem at 20% 15%, rgba(255, 216, 74, .13), transparent 64%);
  animation: glow-b 59s var(--ease) infinite alternate;
  will-change: transform, opacity;
}
.section--dark > * { position: relative; z-index: 1; }
html[data-theme="dark"] .section--dark { border-block: 1px solid var(--border); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p, .section--dark .section-head p { color: rgba(255, 255, 255, .72); }

.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .73rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--accent); border-radius: 2px; }
.section--dark .eyebrow { color: var(--accent); }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. HEADER ---------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

/* The bar is wider than the text column.
   Body copy wants ~1180px because that is a comfortable measure to read. A
   navigation bar has the opposite problem: brand, seven translated links and
   three language buttons all competing for the same row. Holding it to the
   reading width is what made them collide. */
.header .container { max-width: var(--container-wide); }
/* A three-column grid, not a flex row.
   -------------------------------------------------------------------------
   As a flex row this was `brand | nav (margin-left:auto) | tools`, and the
   language switcher moved by up to 61px when you changed language. Nothing
   was wrong with the switcher: the nav links are translated, so the middle
   column is 511px wide in English and 655px in Hungarian, and with every item
   set to `flex: 0 0 auto` the row simply grew past the container and dragged
   the tools out with it. body{overflow-x:hidden} hid the overflow, so it read
   as a jump rather than as the layout breaking.

   A grid fixes it structurally: the third column is measured from the right
   edge inwards, so its position cannot depend on what is in column two. The
   nav column takes 1fr with min-width:0, which means it is the one that gives
   when something has to. */
.header__inner {
  height: var(--header-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 18px;
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); flex: 0 0 auto; }
.brand:hover { color: var(--text); }
.brand__mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
/* display:block, not flex.
   As a flex column this reported the wrong max-content width to the grid track
   above it in Safari, so the brand column came out narrower than the brand and
   the text ran underneath the first nav link. Two block children stacked is
   what this always wanted anyway, and every engine measures it the same way. */
.brand__text { display: block; line-height: 1.08; }
.brand__name {
  display: block; font-weight: 800; font-size: 1rem; letter-spacing: -.015em;
  text-transform: uppercase; white-space: nowrap;
}
.brand__tag {
  display: block; font-size: .585rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
}

.nav { min-width: 0; }
/* Justified to the end so the links still sit against the tools rather than
   floating in the middle of their column. */
.nav__list { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.nav__link {
  position: relative; display: block; padding: 9px 10px;
  font-size: .92rem; font-weight: 500; color: var(--text);
  border-radius: var(--radius); white-space: nowrap;
  transition: color .2s var(--ease);
}
/* Seven nav items, and Hungarian labels run about 145px longer than the
   English ones — long enough that 13px of horizontal padding never fitted the
   container at any desktop width. 10px is the widest value that does. */
@media (max-width: 1240px) {
  .nav__link { padding: 9px 8px; font-size: .87rem; }
}
/* The tagline under the wordmark goes first when the row gets tight. It is the
   widest thing in the brand block and it repeats what the page already says.
   1400px is where brand + Hungarian nav + three language buttons stop fitting
   with it present. */
@media (max-width: 1400px) {
  .header .brand__tag { display: none; }
}
@media (max-width: 1080px) {
  .nav__link { padding: 9px 7px; font-size: .82rem; }
  .header__inner { gap: 12px; }
  .header__tools .lang__btn { padding: 0 8px; gap: 0; }
  .header__tools .lang__btn span { display: none; }   /* flags only — saves ~90px */
  .header__tools { gap: 6px; }
}
.nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
  height: 3px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 650; }

.header__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); border-radius: var(--radius); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .18s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.icon-btn:active { transform: scale(.93); }
.icon-btn svg { width: 18px; height: 18px; }

.theme-toggle .icon--sun { display: none; }
.theme-toggle .icon--moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon--moon { display: none; }

.lang {
  display: flex; align-items: center; height: 38px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  border-radius: var(--radius); overflow: hidden;
}
.lang__btn {
  display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: .77rem; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--border); }
.lang__btn:hover { color: var(--text); background: var(--bg-alt); }
.lang__btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.lang__btn[aria-pressed="true"]:hover { background: var(--accent-hover); color: var(--accent-ink); }
.lang__flag {
  width: 21px; height: 14px; border-radius: 2px; display: block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) inset;
}
.lang__btn[aria-pressed="false"] .lang__flag { filter: saturate(.5); opacity: .75; }

.burger, .nav__close { display: none; }

/* ---------- 5. HERO ------------------------------------------------------ */

.hero { position: relative; padding: clamp(46px, 6.5vw, 88px) 0 clamp(54px, 7vw, 96px); overflow: hidden; }
/* Ambient light. Two layers on separate slow cycles so the wash never sits
   still and never repeats visibly. Transform + opacity only — stays on the
   compositor, costs nothing. */
.hero::before, .hero::after {
  content: ""; position: absolute; inset: -25% -15%; pointer-events: none;
  will-change: transform, opacity;
}
.hero::before {
  background: radial-gradient(42rem 27rem at 78% 8%,
              color-mix(in srgb, var(--accent-glow) 30%, transparent), transparent 62%);
  animation: glow-a 31s var(--ease) infinite alternate;
}
.hero::after {
  background: radial-gradient(30rem 22rem at 6% 92%,
              color-mix(in srgb, var(--accent-glow) 17%, transparent), transparent 64%);
  animation: glow-b 43s var(--ease) infinite alternate;
}
html[data-theme="dark"] .hero::before { opacity: .42; }
html[data-theme="dark"] .hero::after  { opacity: .42; }
/* A third, much slower layer. Three cycles with no common multiple means the
   combined wash never returns to the same state — the eye reads it as ambient
   rather than as a loop. */
.hero .hero__aura {
  position: absolute; inset: -30% -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(26rem 20rem at 45% 55%,
              color-mix(in srgb, var(--accent-glow) 12%, transparent), transparent 66%);
  animation: glow-c 67s var(--ease) infinite alternate;
  will-change: transform, opacity;
}

.hero__grid {
  position: relative; display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: clamp(30px, 5vw, 62px); align-items: center;
}
.hero__title { margin-bottom: .4em; }
.hero__title em {
  font-style: normal; position: relative; white-space: nowrap;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 65%, transparent) 62%);
}
.hero__lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  color: var(--text-muted); max-width: 34em; margin-bottom: 30px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.hero__trust li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-muted); font-weight: 500; }
.hero__trust svg { width: 17px; height: 17px; color: var(--accent-text); flex: 0 0 auto; }

.hero__media { position: relative; }
.hero__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); aspect-ratio: 4 / 3.1;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(195deg, transparent 46%, rgba(10, 12, 14, .42));
}
.hero__badge {
  position: absolute; left: -20px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px 18px;
}
.hero__badge-dot { width: 9px; height: 9px; border-radius: 50%; background: #21A366; flex: 0 0 auto; position: relative; }
.hero__badge-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid #21A366; opacity: 0; animation: ping 2.8s var(--ease) infinite;
}
.hero__badge-label {
  display: block; font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700;
}
.hero__badge-value { font-size: .9rem; font-weight: 600; }

/* ---------- 6. COMPONENTS ---------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; font-family: var(--font); font-size: .93rem; font-weight: 600;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .2s var(--ease), box-shadow .22s var(--ease);
}
.btn svg { width: 17px; height: 17px; transition: transform .28s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); box-shadow: var(--shadow-md); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); color: var(--accent-ink); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent); }
.btn--accent:hover svg { transform: translateX(3px); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.btn--light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn--light:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .55); }

.btn--block { width: 100%; }

/* Card */
.card {
  position: relative; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px; overflow: hidden;
  transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card:hover::before { transform: scaleX(1); }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--accent-soft);
  color: var(--accent-text); margin-bottom: 17px;
  transition: background-color .28s var(--ease), color .28s var(--ease);
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { background: var(--accent); color: var(--accent-ink); }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--text-muted); font-size: .92rem; margin-bottom: 0; }

.section--dark .card { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .11); }
.section--dark .card:hover { border-color: rgba(255, 255, 255, .24); }
.section--dark .card p { color: rgba(255, 255, 255, .68); }
.section--dark .card__icon { background: rgba(240, 196, 25, .16); color: var(--accent); }

/* Stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.stat { background: var(--bg); padding: 28px 22px; text-align: center; }
.stat__value {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat__value span { color: var(--accent-text); }
.stat__label { font-size: .81rem; color: var(--text-muted); font-weight: 500; margin-top: 5px; }

/* Text / image block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; object-fit: cover;
}
.split__media--wide img { aspect-ratio: 16 / 9; }
.split__caption {
  position: absolute; left: 14px; bottom: 14px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 8px 13px;
  font-size: .78rem; font-weight: 600; color: var(--text);
}

.checklist { display: grid; gap: 14px; margin: 24px 0 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { width: 20px; height: 20px; color: var(--accent-text); flex: 0 0 auto; margin-top: 3px; }
.section--dark .checklist svg { color: var(--accent); }
.checklist strong { display: block; font-size: .96rem; }
.checklist span { color: var(--text-muted); font-size: .89rem; }
.section--dark .checklist span { color: rgba(255, 255, 255, .66); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 24px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border); }
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 3px;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
  transition: transform .6s var(--ease);
}
.step.is-in::after, .reveal.is-in .step::after { transform: scaleX(1); }
.step__num { font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--accent-text); display: block; margin-bottom: 8px; }
.step h3 { font-size: 1.02rem; }
.step p { color: var(--text-muted); font-size: .89rem; margin-bottom: 0; }

/* CTA band */
.cta-band { position: relative; background: var(--bg-inverse); color: var(--text-inverse); overflow: hidden; }
html[data-theme="dark"] .cta-band { border-top: 1px solid var(--border); }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; inset: -30% -12%; pointer-events: none;
  will-change: transform, opacity;
}
.cta-band::before {
  background: radial-gradient(34rem 21rem at 82% 12%, rgba(255, 216, 74, .26), transparent 62%);
  animation: glow-a 37s var(--ease) infinite alternate;
}
.cta-band::after {
  background: radial-gradient(26rem 17rem at 8% 88%, rgba(255, 216, 74, .13), transparent 64%);
  animation: glow-b 53s var(--ease) infinite alternate;
}
.cta-band__inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; padding: clamp(44px, 6vw, 74px) 0;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; max-width: 15em; }
.cta-band p { color: rgba(255, 255, 255, .72); margin-bottom: 0; max-width: 40em; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Editable-placeholder notice */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: 14px 18px; font-size: .87rem; color: var(--text);
}
.notice svg { width: 18px; height: 18px; color: var(--accent-text); flex: 0 0 auto; margin-top: 3px; }
.notice p { margin: 0; }

/* Anomaly table (lightweight) */
.anomaly { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.anomaly__row { display: grid; grid-template-columns: 1.1fr 2fr 1fr; gap: 18px; background: var(--bg); padding: 16px 22px; align-items: center; }
.anomaly__row--head { background: var(--bg-alt); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.anomaly__name { font-weight: 600; font-size: .95rem; }
.anomaly__desc { color: var(--text-muted); font-size: .88rem; }
.sev { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; }
.sev::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.sev--high::before { background: #D64541; }
.sev--mid::before  { background: var(--accent); }
.sev--low::before  { background: #4A9E6B; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elevated); overflow: hidden; transition: border-color .25s var(--ease);
}
.faq__item[open] { border-color: var(--accent); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 16px 22px; font-weight: 600; font-size: .99rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); margin-top: -4px;
  transition: transform .3s var(--ease), border-color .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--accent-text); }
.faq__body { padding: 0 22px 19px; color: var(--text-muted); font-size: .93rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* Equipment block */
.kit { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.kit__img { position: relative; padding: 20px; border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--border); }
.kit__img img { width: 100%; }
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 22px; }
.spec div { background: var(--bg); padding: 15px 18px; }
.spec dt { font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.spec dd { margin: 0; font-size: .93rem; font-weight: 600; }

/* ---------- 7. INNER PAGES ----------------------------------------- */

.page-head {
  position: relative; padding: clamp(44px, 6vw, 74px) 0 clamp(38px, 5vw, 58px);
  background: var(--bg-alt); border-bottom: 1px solid var(--border); overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(42rem 22rem at 88% -22%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}
.page-head__inner { position: relative; max-width: 760px; }
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.page-head p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 0; }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .81rem; color: var(--text-muted); margin-bottom: 15px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb span { opacity: .45; }

.service-detail { display: grid; grid-template-columns: 54px 1fr; gap: 22px; align-items: start; padding: 28px 0; border-top: 1px solid var(--border); }
.service-detail:first-of-type { border-top: 0; padding-top: 0; }
.service-detail__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); }
.service-detail__icon svg { width: 26px; height: 26px; }
.service-detail h3 { margin-bottom: .3em; font-size: 1.2rem; }
.service-detail p { color: var(--text-muted); margin-bottom: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { font-size: .76rem; font-weight: 500; padding: 4px 11px; border-radius: 100px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted); }

.prose { max-width: 760px; }
.prose h2 { font-size: 1.32rem; margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1.1em; }
.prose li { margin-bottom: .4em; }
.prose p, .prose li { color: var(--text-muted); }

/* ---------- 8. FORM ------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 5vw, 54px); align-items: start; }
.form-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(22px, 3.4vw, 34px); box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 17px; }
.field label { display: block; font-size: .84rem; font-weight: 650; margin-bottom: 7px; }
.field label .req { color: #C2413A; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: .94rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 11px 13px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field--check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--text-muted); }
.field--check input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.field--check a { color: var(--accent-text); text-decoration: underline; }

.form-status { margin-top: 15px; padding: 12px 16px; border-radius: var(--radius); font-size: .88rem; display: none; }
.form-status.is-ok  { display: block; background: #E7F5EE; border: 1px solid #9AD5B8; color: #14533A; }
.form-status.is-err { display: block; background: #FDECEB; border: 1px solid #F0B4B0; color: #7A241F; }
html[data-theme="dark"] .form-status.is-ok  { background: #10281E; border-color: #245C43; color: #A6E3C4; }
html[data-theme="dark"] .form-status.is-err { background: #2B1614; border-color: #6A2E29; color: #F0B4B0; }

.info-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.info-item:last-child { border-bottom: 0; }
.info-item svg { width: 19px; height: 19px; color: var(--accent-text); flex: 0 0 auto; margin-top: 3px; }
.info-item .k { display: block; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.info-item .v { font-size: .97rem; font-weight: 500; }
.contact-wa-note { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
/* WhatsApp keeps its own green; it is what makes it recognisable. */
.info-item svg[data-wa] { color: inherit; }

/* ---------- 9. FOOTER ---------------------------------------------------- */

.footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: clamp(46px, 6vw, 70px); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 42px; }
.footer__about p { color: var(--text-muted); font-size: .89rem; max-width: 32em; margin: 17px 0 0; }
.footer h4 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 15px; font-weight: 700; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { color: var(--text); font-size: .9rem; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer__links a:hover { color: var(--accent-text); padding-left: 4px; }
.footer__contact { display: grid; gap: 12px; font-size: .9rem; color: var(--text-muted); }
.footer__contact a { color: var(--text); }
.footer__contact a:hover { color: var(--accent-text); }
/* Legal position under Ley 5/2014 — see BROCHURE-PLAN.md §1.2. Deliberately
   quiet: it is a statement of scope, not a warning. */
.footer__disclaimer {
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: .78rem; line-height: 1.65; color: var(--text-muted); max-width: 78ch;
}
.footer__bottom {
  border-top: 1px solid var(--border); padding: 19px 0;
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between;
  font-size: .83rem; color: var(--text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a { color: var(--text-muted); }
.footer__legal a:hover { color: var(--accent-text); }

.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 560px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px 20px; display: none;
  animation: slide-up .5s var(--ease) both;
}
.cookie.is-visible { display: block; }
.cookie p { font-size: .86rem; color: var(--text-muted); margin-bottom: 13px; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .btn { padding: 9px 18px; font-size: .86rem; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- 10. ANIMATION --------------------------------------------- */

@keyframes ping { 0% { opacity: .8; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Ambient light drift. Deliberately long cycles at low amplitude: at a glance
   the page is still, but it is never quite the same twice. Anything faster
   than ~25s starts to read as a screensaver. */
@keyframes glow-a {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: .85; }
  50%  { transform: translate3d(-3.5%, 2.5%, 0) scale(1.09); opacity: 1; }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04);   opacity: .78; }
}
@keyframes glow-c {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1);    opacity: .55; }
  35%  { transform: translate3d(5%, -3%, 0) scale(1.14); opacity: .9; }
  100% { transform: translate3d(-2%, -6%, 0) scale(1.02); opacity: .6; }
}

@keyframes glow-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.05);   opacity: .7; }
  50%  { transform: translate3d(4%, -3%, 0) scale(1);   opacity: .95; }
  100% { transform: translate3d(-2%, 3.5%, 0) scale(1.08); opacity: .72; }
}

/* The yellow marker behind the hero headline draws itself once, after the
   line has arrived. */
@keyframes underline-in { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

/* The little accent rule in front of every eyebrow grows in with its section. */
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }
.reveal[data-delay="6"] { transition-delay: .42s; }

.hero .anim { animation: rise .8s var(--ease) both; }
.hero .anim[data-delay="1"] { animation-delay: .07s; }
.hero .anim[data-delay="2"] { animation-delay: .16s; }
.hero .anim[data-delay="3"] { animation-delay: .25s; }
.hero .anim[data-delay="4"] { animation-delay: .34s; }
.hero .anim[data-delay="5"] { animation-delay: .46s; }

/* Headline marker */
.hero__title em {
  background-repeat: no-repeat; background-size: 0 100%;
  animation: underline-in .85s var(--ease) .55s both;
}

/* Eyebrow rule */
.eyebrow::before { transform-origin: left; }
.reveal .eyebrow::before, .section-head.reveal .eyebrow::before { transform: scaleX(0); }
.reveal.is-in .eyebrow::before, .section-head.reveal.is-in .eyebrow::before {
  animation: rule-in .5s var(--ease) .18s forwards;
}
.hero .anim .eyebrow::before, .hero .eyebrow::before { animation: rule-in .5s var(--ease) .3s both; }

/* A single slow highlight crossing the yellow button on hover. Fires once per
   hover, not on a loop — a looping shine is what makes a site look like a
   template. */
.btn--accent { position: relative; overflow: hidden; }
.btn--accent::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-120%);
}
.btn--accent:hover::before { transition: transform .75s var(--ease); transform: translateX(120%); }

/* Images settle a fraction as their section arrives. */
.split__media img, .hero__frame img { transition: transform 1.1s var(--ease); }
.split__media.reveal img { transform: scale(1.035); }
.split__media.reveal.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .step::after { transform: scaleX(1); }
  .hero::before, .hero::after, .hero__aura,
  .cta-band::before, .cta-band::after, .section--dark::before { animation: none; }
  .hero__title em { background-size: 100% 100%; }
  .eyebrow::before { transform: scaleX(1) !important; animation: none !important; }
  .split__media.reveal img { transform: none; }
}

/* ---------- 11. RESPONSIVE ---------------------------------------------- */

@media (max-width: 1040px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .kit { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 560px; }
  .hero__badge { left: 12px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .anomaly__row { grid-template-columns: 1fr; gap: 4px; }
  .anomaly__row--head { display: none; }

  /* `backdrop-filter` makes .header a containing block for its fixed
     children, which would misplace the nav drawer. On mobile we use a solid
     background so the drawer positions against the viewport instead. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }

  /* The burger belongs on the right, and until now it was not.
     .nav carries `margin-left:auto`, which is what pushes everything after it
     to the far edge. Below this breakpoint .nav becomes position:fixed — it
     leaves the flex flow, and its auto margin goes with it. That left .brand
     and .header__tools as the only two items in flow, both flex:0 0 auto,
     packed against the left edge with the burger stranded in the middle of
     the bar. The auto margin has to move to whatever is still in the flow.

     The grid also has to collapse to two columns here. With .nav out of flow
     the tools are auto-placed into column 2, the empty third track still
     contributes its column-gap, and the burger lands exactly one gap short of
     the right edge — 10px on a phone, 12px on a tablet. Small, consistent,
     and wrong. */
  .header__inner { grid-template-columns: auto minmax(0, 1fr); }
  .header__tools { grid-column: 2; justify-self: end; margin-left: auto; }

  /* Three languages will not fit next to the brand on a 360px phone, and
     shrinking them to bare flags makes the choice harder to see rather than
     easier. The switcher moves into the drawer, where there is room to write
     the language names out.

     Scoped to .header__tools, not .header. The drawer is .nav, and .nav is a
     child of <header> — so anything scoped to `.header` reaches into the
     drawer and hides, or strips the labels off, the copy that is supposed to
     be showing. The bar's switcher is in .header__tools; the drawer's is in
     .nav. Those two never overlap. */
  .header__tools .lang { display: none; }

  .burger {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    border-radius: var(--radius); cursor: pointer; color: var(--text);
  }
  .burger svg { width: 20px; height: 20px; }
  /* The drawer is a column, not one long scrolling box.
     -----------------------------------------------------------------------
     Seven links and a three-language block come to 675px of content. An
     iPhone SE has 568px of viewport, and a real phone gives up another
     ~110px to the browser's own chrome. So the language switcher — the one
     thing the Hungarian visitors open this drawer to find — sat below the
     fold of a panel nobody thinks to scroll, and the panel itself was the
     part that scrolled.

     Splitting it fixes both: the link list is the only scrolling region, and
     the languages are pinned to the bottom, on screen the moment the drawer
     opens, on every phone. Above 375px nothing scrolls at all.

     height:100dvh rather than leaning on `bottom: 0`, so the drawer follows
     Safari's address bar instead of hiding its last rows underneath it.
     Browsers without dvh ignore the line and fall back to inset. */
  .nav {
    position: fixed; inset: 0 0 0 auto; height: 100dvh;
    width: min(320px, 84vw);
    display: flex; flex-direction: column;
    background: var(--bg); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: 0;
    transform: translateX(100%); z-index: 120;
    /* The drawer itself never scrolls — only .nav__list does. A box with
       overflow-y:auto gets overflow-x:auto for free, and that is a box you
       can drag sideways the moment anything inside it is a pixel too wide. */
    overflow: hidden;
    /* Off screen it has to actually not be there: not painted, not tappable,
       and — the reason this line exists — not part of anything the browser
       will let you scroll to. `transform: translateX(100%)` moves the box; it
       does not remove it, so 269px of drawer hangs off the right edge of a
       320px phone. body{overflow-x:hidden} is meant to cover that and does
       not do so reliably on iOS, which is why the page can be dragged
       sideways. visibility:hidden takes the box out of play in every engine.
       The 0s delay holds it visible until the slide-out has finished. */
    visibility: hidden; pointer-events: none;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav.is-open {
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition: transform .38s var(--ease), visibility 0s;
  }
  .nav__list {
    flex: 1 1 auto; min-height: 0;
    /* hidden, not auto: the list scrolls up and down and nothing else. */
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    /* flex-start explicitly. The bar's rule is justify-content:flex-end, and
       once this became a column with a definite height that stopped meaning
       "links to the right" and started meaning "links to the bottom" — with
       the overflow going off the top, where no scrollbar can reach it. The
       first two menu items simply were not there. */
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; margin: 0; padding: 56px 18px 10px;
  }
  .nav__link {
    padding: 11px 12px; font-size: 1rem; border-radius: 0;
    border-bottom: 1px solid var(--border);
    /* The bar needs nowrap so links never break mid-label. A 268px drawer
       needs the opposite, or a long label at a large accessibility font size
       is exactly the pixel too wide described above. */
    white-space: normal;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent-text); }
  .nav__close {
    display: grid; place-items: center; position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; z-index: 1; border: 1px solid var(--border);
    background: var(--bg-elevated); border-radius: var(--radius); cursor: pointer; color: var(--text);
  }
  .nav__close svg { width: 18px; height: 18px; }
  /* Below .header (z-index 100): the drawer lives inside the header, so the
     scrim must not paint over it. */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 98; background: rgba(8, 10, 12, .55);
    /* Dragging the scrim must not move the page behind it. */
    touch-action: none; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-locked { overflow: hidden; }
  /* The storage notice is fixed to the bottom of the screen at z-index 150,
     which is above the drawer — so on a first visit it landed exactly on top
     of the language switcher, for the visitors most likely to be looking for
     it. It is not dismissed, only stood aside, and it comes back the moment
     the drawer closes. */
  body.nav-locked .cookie, body.nav-locked .to-top {
    visibility: hidden; pointer-events: none;
  }

  /* ---- language switcher, drawer version ---- */
  /* Pinned: flex:0 0 auto against a list that takes 1fr. The safe-area inset
     keeps the last language button clear of the iPhone's home indicator. */
  .nav__foot {
    flex: 0 0 auto; margin: 0;
    padding: 13px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    /* Reads as a pinned footer rather than as text being cut off, on the
       short phones where the link list scrolls underneath it. */
    box-shadow: 0 -10px 14px -12px rgba(8, 10, 12, .28);
  }
  .nav__foot-h {
    display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700; margin-bottom: 9px;
  }
  /* .langlist, NOT .lang with a modifier.
     Every width rule for the top bar sets a height on .lang — 38px, and 34px
     under 400px — and a modifier class loses that fight on specificity in one
     direction or the other depending on source order. Sharing only .lang__btn
     means the buttons keep their colours, focus ring and pressed state, and
     the container is nobody else's business. */
  .langlist {
    display: flex; flex-direction: column; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elevated); overflow: hidden;
  }
  .langlist .lang__btn {
    height: 44px; flex: none; padding: 0 14px; gap: 11px;
    font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  .langlist .lang__btn + .lang__btn { border-left: 0; border-top: 1px solid var(--border); }
  .langlist .lang__flag { width: 24px; height: 16px; }
}

/* Above the drawer breakpoint the switcher lives in the bar, so the drawer's
   copy must not appear underneath the menu links. */
@media (min-width: 901px) { .nav__foot { display: none; } }

/* The precedence note on the legal pages. It carries text in Hungarian only:
   the Spanish and English values of the key are empty strings, and :empty
   removes the box entirely rather than leaving a bordered blank. */
.legal-prevail {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 13px 17px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .88rem; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 30px;
}
.legal-prevail:empty { display: none; }

/* Small tablet / large phone — compact the top bar */
@media (max-width: 720px) {
  .header__inner { gap: 10px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: .8rem; letter-spacing: -.005em; max-width: 8.5em; }
  .brand__tag { display: none; }
  .header__tools .lang__btn { padding: 0 8px; gap: 0; }
  .header__tools .lang__btn span { display: none; }   /* flags only — saves width */
  .header__tools { gap: 6px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; --header-h: 66px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .spec { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__badge { position: static; margin-top: 14px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .service-detail { grid-template-columns: 1fr; gap: 13px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer .brand__tag { display: block; }

  /* More compact cookie notice */
  .cookie { left: 10px; right: 10px; bottom: 10px; padding: 15px 16px; }
  .cookie p { font-size: .8rem; line-height: 1.5; margin-bottom: 11px; }
  .cookie .btn { flex: 1 1 auto; padding: 9px 12px; font-size: .82rem; }
}

@media (max-width: 400px) {
  .brand__name { font-size: .74rem; max-width: 7.5em; }
  .icon-btn, .burger { width: 34px; height: 34px; }
  .lang { height: 34px; }
}

@media print {
  .header, .footer, .cookie, .to-top, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ---------- 12. LIGHT MODE PRESENCE ------------------------------------- */
/* Dark mode gets its structure free: surfaces separate because they glow
   against black. On white, everything floats unless it is given an edge.
   These rules are light-only — they exist so light does not read as the
   afterthought version of dark. Written flat rather than nested: CSS nesting
   is still too new to depend on for a production site. */

/* Cards, panels and inputs get a real border, not a suggestion of one. */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .form-card,
html:not([data-theme="dark"]) .faq__item,
html:not([data-theme="dark"]) .notice,
html:not([data-theme="dark"]) .anomaly,
html:not([data-theme="dark"]) .split__media,
html:not([data-theme="dark"]) .hero__frame {
  border-color: var(--border-strong);
}

/* The accent rule in front of every eyebrow goes a shade deeper so it holds
   its own on white. */
html:not([data-theme="dark"]) .eyebrow::before { background: var(--accent-line); }
html:not([data-theme="dark"]) .hero__title em {
  background-image: linear-gradient(transparent 62%,
                    color-mix(in srgb, var(--accent) 80%, transparent) 62%);
}

/* A hairline where the background changes, so the page reads as stacked
   panels rather than one continuous sheet. */
html:not([data-theme="dark"]) .section--alt { border-block: 1px solid var(--border-strong); }

/* Checklist ticks carry the accent instead of grey. */
html:not([data-theme="dark"]) .checklist svg { color: var(--accent-line); }

/* Cards lift more decisively. */
html:not([data-theme="dark"]) .card:hover { border-color: var(--accent-line); }
html:not([data-theme="dark"]) .card__icon { background: var(--accent-soft); color: var(--accent-text); }

/* The header earns its separation once you scroll. */
html:not([data-theme="dark"]) .header.is-scrolled { border-bottom-color: var(--border-strong); }

/* The ghost button was nearly invisible. */
html:not([data-theme="dark"]) .btn--ghost { border-color: var(--border-strong); }
html:not([data-theme="dark"]) .btn--ghost:hover {
  border-color: var(--accent-line); background: var(--accent-soft);
}

/* ---------- 13. PLACEHOLDER PHOTOGRAPHY --------------------------------- */
/* Marks an image as a stand-in. Same yellow as the PENDIENTE notices, so the
   gaps are impossible to miss while reviewing and impossible to ship by
   accident. Delete the class from build.py once the real frame is in. */
.split__media--todo { position: relative; }
.split__media--todo::after {
  content: attr(data-todo);
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   12. LIGHT MODE — LAYERED SURFACES
   --------------------------------------------------------------------------
   The light theme used to be flat white with grey lines: correct, legible and
   completely without depth. Everything below adds that depth and nothing else
   — no new components, no changed copy, no layout.

   The whole block is scoped to html[data-theme="light"]. Dark mode was
   already good and is deliberately untouched; the inline script in <head>
   always writes an explicit data-theme, so the attribute is never absent.

   The idea is three planes:
     1. the page      — a warm base with two very low-opacity washes
     2. bands         — .section--alt and the footer, a shade darker
     3. things        — cards, panels and images, pure white, lifted by shadow
   Read in that order it looks like paper on a desk. Read as one flat colour,
   as it was, it looks like a document.
   ========================================================================== */

html[data-theme="light"] body {
  background:
    radial-gradient(78rem 50rem at 90% -12%, rgba(240, 196, 25, .20), transparent 58%),
    radial-gradient(60rem 44rem at -12% 22%, rgba(104, 130, 175, .13), transparent 62%),
    radial-gradient(50rem 36rem at 30% 108%, rgba(214, 150, 60, .10), transparent 62%),
    linear-gradient(180deg, #FDFCFA 0%, #F3EFE6 100%);
  /* Fixed, so the washes stay put while the content scrolls past them. A
     scrolling wash reads as a texture; a still one reads as light. */
  background-attachment: fixed;
}

/* ---- bands -------------------------------------------------------------- */

html[data-theme="light"] .section--alt {
  position: relative;
  background: var(--thermal-edge) top / 100% 3px no-repeat, var(--grad-band);
}
/* The edges of a band fade rather than stop.
   A 1px line between two flat colours is a seam; a 72px fade from the page
   colour into the band colour is a sheet of paper lying on the desk. This is
   the single rule that does most of the "layers" work — the hairline on top
   of it is what stops the fade from looking like a printing fault. */
html[data-theme="light"] .section--alt::before,
html[data-theme="light"] .section--alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 72px;
  pointer-events: none;
}
/* No 1px hairline here any more: the thermal rule is the top edge now, and a
   grey line drawn immediately under it just looked like a printing fault. */
html[data-theme="light"] .section--alt::before {
  top: 0;
  background: linear-gradient(180deg, rgba(253, 252, 250, .85), transparent);
}
html[data-theme="light"] .section--alt::after {
  bottom: 0;
  background:
    linear-gradient(90deg, transparent, #D8D1C0 16%, #D8D1C0 84%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(250, 247, 241, .9), transparent);
}

html[data-theme="light"] .footer {
  background: linear-gradient(180deg, #F3F0E8 0%, #ECE8DE 100%);
  border-top-color: transparent;
  position: relative;
}
html[data-theme="light"] .footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hairline);
}

/* ---- things ------------------------------------------------------------- */

/* A gradient border, done with two backgrounds rather than a wrapper element:
   the padding-box layer paints the card face, the border-box layer paints
   underneath and shows only where the transparent border is. */
html[data-theme="light"] .card,
html[data-theme="light"] .faq__item,
html[data-theme="light"] .notice {
  border: 1px solid transparent;
  background:
    var(--grad-surface) padding-box,
    var(--grad-edge) border-box;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .card:hover {
  background:
    var(--grad-surface) padding-box,
    var(--grad-edge-hi) border-box;
  box-shadow: var(--shadow-md);
}

/* Dark bands sit inside light pages, so their cards have to be put back. */
html[data-theme="light"] .section--dark .card,
html[data-theme="light"] .cta-band .card {
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}

/* The stats strip is one of the first things on the page, so it earns a
   little more: a gradient hairline grid, a gradient face, and an accent rule
   across the top that ties it to the eyebrow above it. */
html[data-theme="light"] .stats {
  position: relative;
  background: var(--grad-edge);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .stats::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-accent); z-index: 2;
}
html[data-theme="light"] .stat  { background: var(--grad-surface); }
html[data-theme="light"] .spec div,
html[data-theme="light"] .anomaly__row { background: var(--grad-surface); }
html[data-theme="light"] .anomaly__row--head { background: var(--grad-band); }

html[data-theme="light"] .split__media img,
html[data-theme="light"] .hero__frame {
  box-shadow: var(--shadow-lg);
  border-color: #E0D9C9;
}
/* A warm halo behind the hero image, so it sits in the page rather than on
   top of it. Sized off the frame itself and pushed behind with a negative
   z-index on the pseudo, not on the frame — a negative z-index on the frame
   would put it behind the section background. */
html[data-theme="light"] .hero__media { position: relative; }
html[data-theme="light"] .hero__media::before {
  content: ""; position: absolute; inset: -6% -5% -10%;
  background: radial-gradient(60% 55% at 50% 55%, rgba(240, 196, 25, .30), transparent 70%);
  filter: blur(28px); z-index: 0; pointer-events: none;
}
html[data-theme="light"] .hero__frame,
html[data-theme="light"] .hero__badge { position: relative; z-index: 1; }

/* ---- accents ------------------------------------------------------------ */

/* Every 3px yellow bar on the site, as a gradient. Flat yellow next to a
   gradient surface is the one thing that gives away a half-finished restyle. */
html[data-theme="light"] .eyebrow::before,
html[data-theme="light"] .card::before,
html[data-theme="light"] .step::after,
html[data-theme="light"] .rule {
  background: var(--grad-accent);
}
html[data-theme="light"] .step::before { background: var(--grad-edge); }

html[data-theme="light"] .btn--primary {
  background: var(--grad-ink);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .btn--primary:hover {
  background: linear-gradient(180deg, #3B424B 0%, #23272D 100%);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .btn--accent {
  background: var(--grad-accent);
  box-shadow: 0 1px 2px rgba(160, 124, 0, .22), 0 6px 18px rgba(240, 196, 25, .26);
}
html[data-theme="light"] .btn--accent:hover {
  background: linear-gradient(135deg, #F9DC64 0%, #EEBE07 100%);
  box-shadow: 0 2px 4px rgba(160, 124, 0, .24), 0 12px 30px rgba(240, 196, 25, .34);
}

/* The card icon tile picks up the same gradient on hover as the accent bar,
   so the whole card resolves to one colour rather than two yellows. */
html[data-theme="light"] .card:hover .card__icon { background: var(--grad-accent); }

/* ---- header ------------------------------------------------------------- */

/* The bar is translucent over a gradient page, so it needs its own gradient
   or it reads as a flat grey strip once you scroll something warm under it. */
html[data-theme="light"] .header {
  background: linear-gradient(180deg,
              rgba(253, 252, 250, .92) 0%, rgba(250, 248, 243, .82) 100%);
}
html[data-theme="light"] .header.is-scrolled { border-bottom-color: #E6E1D6; }

/* ---- form --------------------------------------------------------------- */

html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  background: #FFFFFF;
  border-color: #DCD6C9;
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(240, 196, 25, .18);
}

/* ---- reduced motion ----------------------------------------------------- */

/* background-attachment: fixed is a repaint cost on every scroll frame for
   some mobile browsers. Anyone who has asked for less motion gets the flat
   base instead — they lose nothing but the parallax. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body { background-attachment: scroll; }
}


/* ---------- 14. SURVEY MOTIFS -------------------------------------------- */
/* Two marks that mean something on a page about flying a grid over a site.
   Both are decoration and both are aria-hidden; nothing here carries
   information that is not also in the text. */

/* ---- contour field ----
   A seamlessly tiling 1440x240 SVG of topographic contours, used as a MASK so
   one asset serves both themes — the paint underneath is a CSS gradient, which
   is also how the accent drifts through the middle of the field without
   needing a second copy of the artwork.

   The waveform's phase completes exactly one turn over the tile height and its
   x-periods (720px, 288px) both divide 1440, so the tile repeats in both
   directions with no seam. */
.section--contour { position: relative; }
/* :not(.contour) matters. `.section--contour > *` and `.contour` have the
   same specificity, so whichever came second won — and what it won was
   turning the absolutely-positioned field into an in-flow block. */
.section--contour > *:not(.contour) { position: relative; z-index: 1; }
.contour {
  /* Anchored to the top of the section and fading out, rather than tiled over
     the whole of it. Repeated to the bottom edge of a 580px section it stops
     being topography and becomes ruled paper. */
  position: absolute; inset: 0 0 auto; height: min(100%, 400px);
  pointer-events: none; z-index: 0;
  opacity: var(--contour-op);
  background: var(--contour-ink);
  /* Two mask layers, intersected: the contours, and a vertical fade so the
     field belongs to the section instead of stopping dead at its padding.
     Masked rather than painted — these sections sit over the body's fixed
     washes, and any solid fade colour would show as a bar across them. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='240'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 0.0 L20 3.7 L40 6.9 L60 9.3 L80 10.7 L100 11.0 L120 10.3 L140 8.9 L160 7.2 L180 5.5 L200 4.2 L220 3.5 L240 3.5 L260 4.0 L280 4.9 L300 5.8 L320 6.3 L340 6.1 L360 5.0 L380 3.0 L400 0.1 L420 -3.2 L440 -6.7 L460 -9.8 L480 -12.1 L500 -13.4 L520 -13.6 L540 -12.5 L560 -10.6 L580 -8.0 L600 -5.3 L620 -2.8 L640 -0.9 L660 0.3 L680 0.8 L700 0.6 L720 0.0 L740 -0.6 L760 -0.8 L780 -0.3 L800 0.9 L820 2.8 L840 5.3 L860 8.0 L880 10.6 L900 12.5 L920 13.6 L940 13.4 L960 12.1 L980 9.8 L1000 6.7 L1020 3.2 L1040 -0.1 L1060 -3.0 L1080 -5.0 L1100 -6.1 L1120 -6.3 L1140 -5.8 L1160 -4.9 L1180 -4.0 L1200 -3.5 L1220 -3.5 L1240 -4.2 L1260 -5.5 L1280 -7.2 L1300 -8.9 L1320 -10.3 L1340 -11.0 L1360 -10.7 L1380 -9.3 L1400 -6.9 L1420 -3.7 L1440 -0.0'/%3E%3Cpath d='M0 54.4 L20 54.1 L40 53.0 L60 51.4 L80 49.6 L100 47.9 L120 46.6 L140 45.7 L160 45.3 L180 45.1 L200 45.0 L220 44.6 L240 43.6 L260 42.0 L280 39.7 L300 36.7 L320 33.4 L340 30.1 L360 27.1 L380 24.8 L400 23.6 L420 23.5 L440 24.5 L460 26.5 L480 29.2 L500 32.2 L520 35.2 L540 37.8 L560 39.9 L580 41.3 L600 42.1 L620 42.5 L640 42.8 L660 43.3 L680 44.1 L700 45.4 L720 47.2 L740 49.3 L760 51.5 L780 53.6 L800 55.0 L820 55.5 L840 55.0 L860 53.4 L880 50.7 L900 47.3 L920 43.5 L940 39.8 L960 36.4 L980 33.7 L1000 31.8 L1020 30.8 L1040 30.6 L1060 30.8 L1080 31.3 L1100 31.7 L1120 31.9 L1140 31.6 L1160 30.9 L1180 30.1 L1200 29.2 L1220 28.7 L1240 28.8 L1260 29.7 L1280 31.6 L1300 34.4 L1320 37.9 L1340 41.8 L1360 45.7 L1380 49.2 L1400 52.0 L1420 53.7 L1440 54.4'/%3E%3Cpath d='M0 88.5 L20 87.0 L40 85.6 L60 84.4 L80 83.4 L100 82.4 L120 81.3 L140 80.0 L160 78.3 L180 76.3 L200 74.0 L220 71.6 L240 69.2 L260 67.2 L280 65.7 L300 65.0 L320 65.2 L340 66.2 L360 67.9 L380 70.2 L400 72.9 L420 75.6 L440 78.2 L460 80.4 L480 82.3 L500 83.7 L520 84.7 L540 85.6 L560 86.3 L580 87.2 L600 88.2 L620 89.4 L640 90.6 L660 91.8 L680 92.7 L700 93.2 L720 93.0 L740 92.1 L760 90.5 L780 88.1 L800 85.2 L820 81.9 L840 78.7 L860 75.7 L880 73.2 L900 71.3 L920 70.0 L940 69.4 L960 69.2 L980 69.4 L1000 69.7 L1020 70.0 L1040 70.3 L1060 70.4 L1080 70.5 L1100 70.7 L1120 71.1 L1140 71.9 L1160 73.3 L1180 75.2 L1200 77.7 L1220 80.7 L1240 83.8 L1260 86.9 L1280 89.7 L1300 91.9 L1320 93.4 L1340 94.1 L1360 93.9 L1380 93.1 L1400 91.8 L1420 90.2 L1440 88.5'/%3E%3Cpath d='M0 120.0 L20 119.2 L40 118.3 L60 117.2 L80 116.0 L100 114.6 L120 113.1 L140 111.7 L160 110.5 L180 109.7 L200 109.4 L220 109.7 L240 110.6 L260 112.1 L280 113.9 L300 116.0 L320 118.1 L340 120.1 L360 121.8 L380 123.2 L400 124.2 L420 125.0 L440 125.5 L460 125.9 L480 126.2 L500 126.7 L520 127.2 L540 127.7 L560 128.2 L580 128.6 L600 128.7 L620 128.4 L640 127.6 L660 126.2 L680 124.5 L700 122.3 L720 120.0 L740 117.7 L760 115.5 L780 113.8 L800 112.4 L820 111.6 L840 111.3 L860 111.4 L880 111.8 L900 112.3 L920 112.8 L940 113.3 L960 113.8 L980 114.1 L1000 114.5 L1020 115.0 L1040 115.8 L1060 116.8 L1080 118.2 L1100 119.9 L1120 121.9 L1140 124.0 L1160 126.1 L1180 127.9 L1200 129.4 L1220 130.3 L1240 130.6 L1260 130.3 L1280 129.5 L1300 128.3 L1320 126.9 L1340 125.4 L1360 124.0 L1380 122.8 L1400 121.7 L1420 120.8 L1440 120.0'/%3E%3Cpath d='M0 157.5 L20 156.3 L40 155.0 L60 153.8 L80 152.9 L100 152.4 L120 152.6 L140 153.4 L160 154.8 L180 156.6 L200 158.6 L220 160.5 L240 162.3 L260 163.6 L280 164.3 L300 164.6 L320 164.4 L340 164.0 L360 163.5 L380 163.1 L400 162.9 L420 163.0 L440 163.5 L460 164.1 L480 164.8 L500 165.3 L520 165.6 L540 165.3 L560 164.5 L580 163.1 L600 161.3 L620 159.3 L640 157.2 L660 155.4 L680 154.0 L700 153.2 L720 153.0 L740 153.3 L760 154.1 L780 155.1 L800 156.2 L820 157.2 L840 157.8 L860 158.1 L880 158.1 L900 157.9 L920 157.7 L940 157.5 L960 157.7 L980 158.4 L1000 159.5 L1020 160.9 L1040 162.7 L1060 164.5 L1080 166.1 L1100 167.3 L1120 168.0 L1140 168.0 L1160 167.4 L1180 166.3 L1200 164.8 L1220 163.1 L1240 161.6 L1260 160.3 L1280 159.3 L1300 158.8 L1320 158.7 L1340 158.8 L1360 159.0 L1380 159.1 L1400 158.9 L1420 158.3 L1440 157.5'/%3E%3Cpath d='M0 191.6 L20 191.6 L40 192.5 L60 194.3 L80 196.7 L100 199.4 L120 202.1 L140 204.4 L160 206.0 L180 206.8 L200 206.8 L220 206.0 L240 204.8 L260 203.4 L280 202.2 L300 201.5 L320 201.3 L340 201.8 L360 202.7 L380 203.9 L400 205.0 L420 205.7 L440 205.8 L460 205.1 L480 203.6 L500 201.4 L520 198.8 L540 196.1 L560 193.7 L580 192.0 L600 191.0 L620 191.0 L640 191.8 L660 193.4 L680 195.3 L700 197.2 L720 198.8 L740 199.9 L760 200.4 L780 200.2 L800 199.5 L820 198.7 L840 197.9 L860 197.5 L880 197.8 L900 198.7 L920 200.3 L940 202.5 L960 204.8 L980 207.0 L1000 208.7 L1020 209.6 L1040 209.6 L1060 208.6 L1080 206.9 L1100 204.6 L1120 202.1 L1140 199.8 L1160 197.9 L1180 196.8 L1200 196.4 L1220 196.6 L1240 197.4 L1260 198.3 L1280 199.1 L1300 199.6 L1320 199.4 L1340 198.6 L1360 197.2 L1380 195.6 L1400 193.8 L1420 192.4 L1440 191.6'/%3E%3C/g%3E%3C/svg%3E"),
                      linear-gradient(180deg, #000 0%, #000 38%, transparent 100%);
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='240'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 0.0 L20 3.7 L40 6.9 L60 9.3 L80 10.7 L100 11.0 L120 10.3 L140 8.9 L160 7.2 L180 5.5 L200 4.2 L220 3.5 L240 3.5 L260 4.0 L280 4.9 L300 5.8 L320 6.3 L340 6.1 L360 5.0 L380 3.0 L400 0.1 L420 -3.2 L440 -6.7 L460 -9.8 L480 -12.1 L500 -13.4 L520 -13.6 L540 -12.5 L560 -10.6 L580 -8.0 L600 -5.3 L620 -2.8 L640 -0.9 L660 0.3 L680 0.8 L700 0.6 L720 0.0 L740 -0.6 L760 -0.8 L780 -0.3 L800 0.9 L820 2.8 L840 5.3 L860 8.0 L880 10.6 L900 12.5 L920 13.6 L940 13.4 L960 12.1 L980 9.8 L1000 6.7 L1020 3.2 L1040 -0.1 L1060 -3.0 L1080 -5.0 L1100 -6.1 L1120 -6.3 L1140 -5.8 L1160 -4.9 L1180 -4.0 L1200 -3.5 L1220 -3.5 L1240 -4.2 L1260 -5.5 L1280 -7.2 L1300 -8.9 L1320 -10.3 L1340 -11.0 L1360 -10.7 L1380 -9.3 L1400 -6.9 L1420 -3.7 L1440 -0.0'/%3E%3Cpath d='M0 54.4 L20 54.1 L40 53.0 L60 51.4 L80 49.6 L100 47.9 L120 46.6 L140 45.7 L160 45.3 L180 45.1 L200 45.0 L220 44.6 L240 43.6 L260 42.0 L280 39.7 L300 36.7 L320 33.4 L340 30.1 L360 27.1 L380 24.8 L400 23.6 L420 23.5 L440 24.5 L460 26.5 L480 29.2 L500 32.2 L520 35.2 L540 37.8 L560 39.9 L580 41.3 L600 42.1 L620 42.5 L640 42.8 L660 43.3 L680 44.1 L700 45.4 L720 47.2 L740 49.3 L760 51.5 L780 53.6 L800 55.0 L820 55.5 L840 55.0 L860 53.4 L880 50.7 L900 47.3 L920 43.5 L940 39.8 L960 36.4 L980 33.7 L1000 31.8 L1020 30.8 L1040 30.6 L1060 30.8 L1080 31.3 L1100 31.7 L1120 31.9 L1140 31.6 L1160 30.9 L1180 30.1 L1200 29.2 L1220 28.7 L1240 28.8 L1260 29.7 L1280 31.6 L1300 34.4 L1320 37.9 L1340 41.8 L1360 45.7 L1380 49.2 L1400 52.0 L1420 53.7 L1440 54.4'/%3E%3Cpath d='M0 88.5 L20 87.0 L40 85.6 L60 84.4 L80 83.4 L100 82.4 L120 81.3 L140 80.0 L160 78.3 L180 76.3 L200 74.0 L220 71.6 L240 69.2 L260 67.2 L280 65.7 L300 65.0 L320 65.2 L340 66.2 L360 67.9 L380 70.2 L400 72.9 L420 75.6 L440 78.2 L460 80.4 L480 82.3 L500 83.7 L520 84.7 L540 85.6 L560 86.3 L580 87.2 L600 88.2 L620 89.4 L640 90.6 L660 91.8 L680 92.7 L700 93.2 L720 93.0 L740 92.1 L760 90.5 L780 88.1 L800 85.2 L820 81.9 L840 78.7 L860 75.7 L880 73.2 L900 71.3 L920 70.0 L940 69.4 L960 69.2 L980 69.4 L1000 69.7 L1020 70.0 L1040 70.3 L1060 70.4 L1080 70.5 L1100 70.7 L1120 71.1 L1140 71.9 L1160 73.3 L1180 75.2 L1200 77.7 L1220 80.7 L1240 83.8 L1260 86.9 L1280 89.7 L1300 91.9 L1320 93.4 L1340 94.1 L1360 93.9 L1380 93.1 L1400 91.8 L1420 90.2 L1440 88.5'/%3E%3Cpath d='M0 120.0 L20 119.2 L40 118.3 L60 117.2 L80 116.0 L100 114.6 L120 113.1 L140 111.7 L160 110.5 L180 109.7 L200 109.4 L220 109.7 L240 110.6 L260 112.1 L280 113.9 L300 116.0 L320 118.1 L340 120.1 L360 121.8 L380 123.2 L400 124.2 L420 125.0 L440 125.5 L460 125.9 L480 126.2 L500 126.7 L520 127.2 L540 127.7 L560 128.2 L580 128.6 L600 128.7 L620 128.4 L640 127.6 L660 126.2 L680 124.5 L700 122.3 L720 120.0 L740 117.7 L760 115.5 L780 113.8 L800 112.4 L820 111.6 L840 111.3 L860 111.4 L880 111.8 L900 112.3 L920 112.8 L940 113.3 L960 113.8 L980 114.1 L1000 114.5 L1020 115.0 L1040 115.8 L1060 116.8 L1080 118.2 L1100 119.9 L1120 121.9 L1140 124.0 L1160 126.1 L1180 127.9 L1200 129.4 L1220 130.3 L1240 130.6 L1260 130.3 L1280 129.5 L1300 128.3 L1320 126.9 L1340 125.4 L1360 124.0 L1380 122.8 L1400 121.7 L1420 120.8 L1440 120.0'/%3E%3Cpath d='M0 157.5 L20 156.3 L40 155.0 L60 153.8 L80 152.9 L100 152.4 L120 152.6 L140 153.4 L160 154.8 L180 156.6 L200 158.6 L220 160.5 L240 162.3 L260 163.6 L280 164.3 L300 164.6 L320 164.4 L340 164.0 L360 163.5 L380 163.1 L400 162.9 L420 163.0 L440 163.5 L460 164.1 L480 164.8 L500 165.3 L520 165.6 L540 165.3 L560 164.5 L580 163.1 L600 161.3 L620 159.3 L640 157.2 L660 155.4 L680 154.0 L700 153.2 L720 153.0 L740 153.3 L760 154.1 L780 155.1 L800 156.2 L820 157.2 L840 157.8 L860 158.1 L880 158.1 L900 157.9 L920 157.7 L940 157.5 L960 157.7 L980 158.4 L1000 159.5 L1020 160.9 L1040 162.7 L1060 164.5 L1080 166.1 L1100 167.3 L1120 168.0 L1140 168.0 L1160 167.4 L1180 166.3 L1200 164.8 L1220 163.1 L1240 161.6 L1260 160.3 L1280 159.3 L1300 158.8 L1320 158.7 L1340 158.8 L1360 159.0 L1380 159.1 L1400 158.9 L1420 158.3 L1440 157.5'/%3E%3Cpath d='M0 191.6 L20 191.6 L40 192.5 L60 194.3 L80 196.7 L100 199.4 L120 202.1 L140 204.4 L160 206.0 L180 206.8 L200 206.8 L220 206.0 L240 204.8 L260 203.4 L280 202.2 L300 201.5 L320 201.3 L340 201.8 L360 202.7 L380 203.9 L400 205.0 L420 205.7 L440 205.8 L460 205.1 L480 203.6 L500 201.4 L520 198.8 L540 196.1 L560 193.7 L580 192.0 L600 191.0 L620 191.0 L640 191.8 L660 193.4 L680 195.3 L700 197.2 L720 198.8 L740 199.9 L760 200.4 L780 200.2 L800 199.5 L820 198.7 L840 197.9 L860 197.5 L880 197.8 L900 198.7 L920 200.3 L940 202.5 L960 204.8 L980 207.0 L1000 208.7 L1020 209.6 L1040 209.6 L1060 208.6 L1080 206.9 L1100 204.6 L1120 202.1 L1140 199.8 L1160 197.9 L1180 196.8 L1200 196.4 L1220 196.6 L1240 197.4 L1260 198.3 L1280 199.1 L1300 199.6 L1320 199.4 L1340 198.6 L1360 197.2 L1380 195.6 L1400 193.8 L1420 192.4 L1440 191.6'/%3E%3C/g%3E%3C/svg%3E"),
                      linear-gradient(180deg, #000 0%, #000 38%, transparent 100%);
  /* Scaled up from the 1440x240 tile: 53px between lines instead of 40px.
     Closer than that and the eye reads a texture rather than a contour map. */
  -webkit-mask-size: 1560px 320px, 100% 100%;
          mask-size: 1560px 320px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ---- flight path ----
   The boustrophedon a survey actually flies: out, turn, back, turn, out. Drawn
   by main.js at the element's real pixel width, because a fixed viewBox with
   preserveAspectRatio="none" squashes the turns into flat lines at every width
   but one — and the turns are the part that says "survey". */
.flightpath {
  position: absolute; left: 0; right: 0; top: 0; height: 132px;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.flightpath svg { display: block; width: 100%; height: 100%; }
.flightpath .fp-track { fill: none; stroke: var(--flight-line); stroke-width: 1.2;
                        stroke-dasharray: 5 8; opacity: .5; }
.flightpath .fp-node  { fill: var(--accent); opacity: .5; }
.flightpath .fp-glow  { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .62;
                        stroke-linecap: round; animation: fp-sweep 11s linear infinite; }
@keyframes fp-sweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--fp-len)); } }
.section--flight { position: relative; }
.section--flight > *:not(.flightpath) { position: relative; z-index: 1; }
.section--flight .container { padding-top: 26px; }
@media (max-width: 700px) { .flightpath { height: 104px; } }
@media (prefers-reduced-motion: reduce) {
  .flightpath .fp-glow { animation: none; opacity: .3; stroke-dasharray: none; }
}