/* ==========================================================================
   Auvionis — Landing Page
   Hand-written CSS, no build pipeline, no external dependencies.
   Layout:  1 Tokens · 2 Reset · 3 Typography · 4 Layout · 5 Components
            6 Sections · 7 Form · 8 Legal pages · 9 Motion · 10 Responsive

   Design language (mirrors the cinema campaign assistant app):
   a city photo shimmers through layered navy/violet veils across the whole
   page, oversized black-weight headlines (Inter Variable), lilac labels,
   pill CTAs with a lilac→blue gradient, white secondary buttons — and
   deliberately NO borders: surfaces separate through tone, translucency
   and shadow instead of lines.
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */

:root {
  /* Brand colors (logo gradient stays untouched in the markup) */
  --brand-cyan:    #22D3EE;
  --brand-blue:    #3758D5;
  --brand-violet:  #6C3AED;

  /* UI accent (lilac — labels, icons, checkmarks, focus) */
  --accent:        #9C7CFF;
  --accent-soft:   #B8A8FF;

  /* Canvas */
  --bg:            #05060B;

  /* Translucent surfaces on the photo backdrop (white-based like the app) */
  --surface:       rgb(246 244 255 / 0.06);
  --surface-grad:  linear-gradient(135deg, rgb(246 244 255 / 0.10), rgb(246 244 255 / 0.045));
  --surface-hover: rgb(246 244 255 / 0.07);
  --surface-hover-grad: linear-gradient(135deg, rgb(246 244 255 / 0.14), rgb(156 124 255 / 0.07));
  --surface-solid: #0E1024;

  /* Text */
  --fg:            #F6F4FF;
  --fg-muted:      rgb(246 244 255 / 0.78);
  --fg-subtle:     rgb(246 244 255 / 0.58);

  /* Signals */
  --danger:        #FF8A8A;
  --success:       #5EE9B5;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, var(--brand-cyan) 0%, #2563EB 38%, var(--brand-violet) 72%, #4B21B6 100%);
  --grad-cta:    linear-gradient(135deg, #9C7CFF, #3758D5);
  --grad-cta-hover: linear-gradient(135deg, #AB8FFF, #4B6AE0);
  --grad-text:   linear-gradient(120deg, #4CDDF2 0%, #7FA6FF 45%, #B8A8FF 100%);

  /* Spacing (marketing page: generous) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;

  /* Measures */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 72px;
}

/* ---------- 2. Reset & foundations ----------------------------------------- */

/* Inter as a variable font: one file covers all weights (400–900),
   self-hosted — no connection to Google, no consent required */
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

body {
  margin: 0;
  background: transparent; /* the canvas is painted by html + body::before */
  color: var(--fg);
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Sticky footer: short pages (404, legal) must not leave an uncovered
     strip of the photo backdrop below the footer */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .footer { margin-top: auto; }

/* City photo shimmering through navy and violet veils across the whole page
   (same layering as the campaign assistant app). One fixed pseudo-element
   avoids stacking-context pitfalls; position:fixed also works on iOS, where
   background-attachment:fixed does not. Sections add their own darkening on
   top, so the photo stays most present in the hero. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(4 6 16 / 0.56), rgb(4 6 16 / 0.74)),
    linear-gradient(120deg, rgb(76 32 134 / 0.22), transparent 38%),
    linear-gradient(300deg, rgb(18 34 92 / 0.24), transparent 42%),
    url('../img/bangkok-bg.webp') center / cover no-repeat var(--bg);
}
@media (max-width: 720px) {
  body::before {
    background:
      linear-gradient(180deg, rgb(4 6 16 / 0.56), rgb(4 6 16 / 0.74)),
      linear-gradient(120deg, rgb(76 32 134 / 0.22), transparent 38%),
      linear-gradient(300deg, rgb(18 34 92 / 0.24), transparent 42%),
      url('../img/bangkok-bg-1080.webp') center / cover no-repeat var(--bg);
  }
}

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

/* Visible focus ring — never remove (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: #7248C6; color: #fff; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: var(--space-md); top: -100px;
  z-index: 999;
  background: #FFFFFF; color: #111423;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-weight: 800; text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

.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. Typography -------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.45rem + 4vw, 4.5rem); line-height: 0.96; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.0; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.25; font-weight: 850; }
h4 { font-size: 1.0625rem; line-height: 1.4; font-weight: 850; }

p { margin: 0 0 var(--space-md); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #D6CBFF; }

strong { font-weight: 760; color: var(--fg); }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: 0.75rem; font-weight: 850;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: var(--space-md);
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Fallback in case background-clip does not apply */
  -webkit-text-fill-color: transparent;
}

.section-intro { max-width: 66ch; margin-bottom: var(--space-2xl); }

/* ---------- 4. Layout ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* Content sections lay their own veil over the photo (app pattern). It
   multiplies with the veil on body::before, so these numbers are lower
   than they look: at 0.58 over 0.56 roughly a quarter of the photo still
   comes through, against a twentieth before. */
.section {
  background: linear-gradient(180deg, rgb(6 10 27 / 0.58), rgb(5 8 22 / 0.68));
}
.section--alt {
  background:
    radial-gradient(circle at top, rgb(45 83 196 / 0.20), transparent 34rem),
    linear-gradient(180deg, rgb(9 12 26 / 0.72), rgb(6 7 15 / 0.80));
}

/* Grid deliberately via breakpoints instead of auto-fit + minmax():
   auto-fit with a fixed min width can force a column wider than the
   viewport on narrow devices, pushing the whole page sideways.
   A breakpoint cannot do that by definition. */
.grid { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 5. Components -------------------------------------------------- */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;                 /* touch target ≥ 44px */
  padding: 0.8rem 1.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit; font-weight: 850; font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-cta);
  color: #FFFFFF;
}
.btn--primary:hover {
  background: var(--grad-cta-hover);
  color: #FFFFFF;
  box-shadow: 0 16px 36px -16px rgb(156 124 255 / 0.55);
}
/* Arrow as pure decoration — the empty alt text keeps it out of the
   accessible name; browsers without that syntax simply skip the arrow. */
.btn--primary::after {
  content: '→' / '';
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(3px); }

/* White secondary button — signature piece of the reference design */
.btn--secondary {
  background: #FFFFFF;
  color: #111423;
}
.btn--secondary:hover {
  background: #EDEAFB;
  color: #111423;
}

.btn--full { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* --- Badge / pill chip --- */
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  background: rgb(246 244 255 / 0.10);
  font-size: 0.8125rem; font-weight: 760;
  line-height: 1.4;
  color: rgb(246 244 255 / 0.85);
  /* deliberately NO white-space:nowrap — a long badge text would otherwise
     define the grid column's min width and push the page sideways */
  text-wrap: balance;
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgb(156 124 255 / 0.22);
}

/* --- Cards (translucent panel recipe from the app) --- */
/* Tiles carry a colour wash the way the campaign assistant's do. The hue
   lives in one custom property so the recipe stays in a single place; only
   the four hues below differ. */
/* The wash is declared on the tiles themselves, not as a token on :root:
   a var() inside a custom property is resolved where that property is
   declared, so a --tile-tint set further down would never reach it. */
/* Two layers only: the wash, then the ground. In the background shorthand
   just the last layer may be a colour — a colour in the middle makes the
   whole declaration invalid and the tile loses its background entirely.
   The ground already carries the slight lift the old white film provided,
   and at 0.88 it stops the backdrop drawing its lines through the copy. */
.card,
.price-block {
  background:
    linear-gradient(150deg, var(--tile-tint, rgb(246 244 255 / 0.10)) 0%, rgb(13 14 26 / 0.12) 100%),
    rgb(24 29 50 / 0.88);
}

.card {
  position: relative;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card:hover {
  background:
    linear-gradient(150deg, var(--tile-tint, rgb(246 244 255 / 0.10)) 0%, rgb(13 14 26 / 0.04) 100%),
    rgb(31 37 62 / 0.90);
  transform: translateY(-1px);
}

/* The contact form is a working surface, not a decorative tile. It needs a
   calm, largely opaque ground, otherwise the backdrop shows through the
   panel and the input fields stop reading as fields. It also does not lift
   on hover — there is nothing to click about the panel itself. */
.card:has(.form),
.card:has(.form):hover {
  background: linear-gradient(180deg, rgb(12 16 38 / 0.94), rgb(9 12 30 / 0.96));
  transform: none;
}

/* Rotating over four hues rather than two: with three- and four-column
   grids on the same page, a two-step rotation would line the same colour
   up in a column. Price blocks join the rotation — they are the same kind
   of tile, and leaving them grey among coloured ones reads as an oversight. */
/* The alphas rose with the ground: the wash used to sit on the lit photo,
   which carried half the colour itself, and now sits on an opaque tile. */
.grid > :is(.card, .price-block):nth-child(4n + 1) { --tile-tint: rgb(55 109 212 / 0.44); }
.grid > :is(.card, .price-block):nth-child(4n + 2) { --tile-tint: rgb(126 82 235 / 0.44); }
.grid > :is(.card, .price-block):nth-child(4n + 3) { --tile-tint: rgb(25 78 168 / 0.52); }
.grid > :is(.card, .price-block):nth-child(4n + 4) { --tile-tint: rgb(150 74 190 / 0.44); }
.card h3 { margin-bottom: var(--space-xs); }
.card p { color: var(--fg-muted); font-size: 0.9625rem; }

.card--feature { padding: var(--space-lg); }

/* Image at the top of a card — bleeding to the card edge */
.card__media {
  width: calc(100% + var(--space-xl) * 2);
  max-width: none;               /* overrides the global img{max-width:100%} rule */
  margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Two-column section with image */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  margin-bottom: var(--space-2xl);
}
.split__figure { margin: 0; }
.split__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -35px rgb(0 0 0 / 0.9);
}
.split__figure figcaption {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--fg-subtle);
  line-height: 1.5;
}

.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgb(156 124 255 / 0.16);
  color: var(--accent-soft);
  font-size: 0.875rem; font-weight: 850;
  margin-bottom: var(--space-md);
}

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgb(246 244 255 / 0.10);
  margin-bottom: var(--space-md);
  color: var(--fg);
}
.card__icon svg { width: 21px; height: 21px; }

/* Checkmark list */
.check-list { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: grid; gap: var(--space-sm); }
.check-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-sm);
  align-items: start;
  color: var(--fg-muted); font-size: 0.9375rem;
}
.check-list svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }

/* --- Key figures / facts --- */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); margin-top: var(--space-xl); }
.fact__value { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; display: block; }
.fact__label { font-size: 0.8125rem; color: var(--fg-subtle); }

/* --- Header --- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgb(5 7 18 / 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.header.is-scrolled {
  background: rgb(5 7 18 / 0.85);
  box-shadow: 0 14px 34px -22px rgb(0 0 0 / 0.9);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); width: 100%; }

.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--fg);
  font-weight: 900; font-size: 1.25rem; letter-spacing: -0.01em;
}
.logo:hover { color: var(--fg); }
.logo svg { width: 30px; height: 30px; flex-shrink: 0; }

.nav { display: flex; align-items: center; gap: var(--space-xs); }
.nav a {
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  color: rgb(246 244 255 / 0.86);
  text-decoration: none;
  font-size: 0.9375rem; font-weight: 700;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--fg); background: rgb(246 244 255 / 0.08); }
/* Important: `.nav a` is more specific than `.btn--primary` and would
   otherwise tint the header CTA. In the header the CTA is the white button
   from the reference design; the arrow stays reserved for the gradient CTAs. */
.nav a.btn--primary,
.nav a.btn--primary:hover { color: #111423; background: #FFFFFF; box-shadow: 0 10px 26px -14px rgb(0 0 0 / 0.8); }
.nav a.btn--primary::after { content: none; }
.nav a.btn--secondary,
.nav a.btn--secondary:hover { color: #111423; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgb(8 11 24 / 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--fg); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* --- Hero --- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* Readability scrim over the photo, below the aura; the bottom fade eases
   the hero into the first content section. Stacked layout (below 921px),
   so the scrim runs top to bottom — the split into halves is a desktop
   idea and would sit crooked here. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  /* Above the aura, not below it: the aura's violet glow sits at 80% width
     and would otherwise light the right-hand panel back up. */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgb(6 10 27 / 0.80) 100%),
    linear-gradient(180deg, rgb(3 5 14 / 0.30), rgb(3 5 14 / 0.42));
}

/* Animated gradient haze — pure CSS, adds depth above the photo backdrop */
.hero__aura {
  position: absolute; inset: -30% -10% auto -10%;
  height: 140%;
  /* Below the scrim — see the note there */
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 16% 20%, rgb(55 88 213 / 0.20) 0%, transparent 65%),
    radial-gradient(42% 46% at 80% 28%, rgb(156 124 255 / 0.20) 0%, transparent 68%),
    radial-gradient(50% 40% at 50% 90%, rgb(34 211 238 / 0.06) 0%, transparent 70%);
  filter: blur(24px);
  animation: aura-drift 26s var(--ease-inout) infinite alternate;
}
@keyframes aura-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(2.5%, -1.5%, 0) scale(1.03); }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

/* The product shot needs its own dark ground: without it the lit bridge in
   the backdrop photo runs straight into the picture and both fight for
   attention. A faint halo seats the picture; the heavy lifting is done by
   the right-hand panel below. */
.hero__visual { position: relative; }
.hero__visual::before {
  content: '';
  position: absolute;
  inset: -16% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgb(4 6 16 / 0.55) 0%,
    rgb(4 6 16 / 0.32) 60%,
    transparent 100%);
  filter: blur(24px);
}

/* Desktop only — below 920px the visual moves above the text and spans the
   full width, where a right-hand panel would sit crooked. */
@media (min-width: 921px) {
  /* The picture sits high in its column rather than centred against the
     tall text block, and is centred in the right half of the viewport.
     The container stops at 1180px, so on wider screens the column ends up
     left of that half's centre — `left` makes up the difference and stays
     at 0 below ~1250px, where the column already sits right of it.
     `left` rather than a transform: the entrance animation owns transform. */
  .hero__visual {
    align-self: start;
    /* Lines the top of the picture up with the top of the headline rather
       than with the badge above it. Measured across 1000–1920px, the
       distance the picture has to drop stays at ~49px, because the badge
       and the gap under it do not change with the viewport. */
    margin-top: 49px;
    left: max(0px, calc(25vw - 312px));
  }

  /* Two zones, and the contrast between them is the point: on the left the
     city stays visible as atmosphere, on the right a near-solid panel gives
     the picture a calm ground. The left scrim is kept deliberately light —
     darkening both halves evenly is what makes the split disappear. The
     edge runs over ~16% of the width so no seam is drawn down the middle. */
  .hero::after {
    background:
      linear-gradient(180deg, transparent 62%, rgb(6 10 27 / 0.80) 100%),
      linear-gradient(90deg,
        transparent 40%,
        rgb(4 6 18 / 0.50) 48%,
        rgb(4 6 18 / 0.90) 56%,
        rgb(4 6 18 / 0.94) 100%),
      linear-gradient(90deg, rgb(3 5 14 / 0.42) 0%, rgb(3 5 14 / 0.18) 42%, transparent 58%);
  }
}
.hero h1 { margin-bottom: var(--space-lg); }
.hero .btn-row { margin-top: var(--space-xl); }

.hero__note {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  color: var(--fg-subtle);
}

/* --- Image stage in the hero --- */
.stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(108 58 237 / 0.18) 0%, transparent 60%),
    var(--surface-solid);
  overflow: hidden;
  box-shadow: 0 28px 90px rgb(0 0 0 / 0.36);
}
.stage__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Gradient scrim: ties the photo to the brand colors and keeps the
   overlays on top of it readable */
.stage__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(190deg, rgb(6 8 26 / 0.42) 0%, transparent 34%, rgb(6 8 26 / 0.55) 100%),
    linear-gradient(115deg, rgb(34 211 238 / 0.10) 0%, transparent 45%, rgb(108 58 237 / 0.18) 100%);
  pointer-events: none;
}

/* "Online" status chip on the photo */
.screen__status {
  position: absolute; left: 6%; top: 7%;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgb(5 6 15 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em;
  color: #EAF4FF;
}
.screen__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Sound waves hinting at the instore radio */
.stage__waves { position: absolute; right: 7%; bottom: 8%; z-index: 2; display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.stage__waves span {
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--brand-blue));
  animation: wave 1.5s var(--ease-inout) infinite;
  opacity: 0.85;
}
.stage__waves span:nth-child(1) { height: 40%; animation-delay: 0s; }
.stage__waves span:nth-child(2) { height: 75%; animation-delay: 0.15s; }
.stage__waves span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.stage__waves span:nth-child(4) { height: 95%; animation-delay: 0.45s; }
.stage__waves span:nth-child(5) { height: 60%; animation-delay: 0.6s; }
.stage__waves span:nth-child(6) { height: 35%; animation-delay: 0.75s; }
@keyframes wave { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

/* --- Step list --- */
.steps { counter-reset: step; display: grid; gap: var(--space-lg); }
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.step__marker {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgb(156 124 255 / 0.16);
  font-weight: 850; font-size: 1rem;
  color: var(--accent-soft);
}
.step h3 { margin-bottom: var(--space-2xs); }
.step p { color: var(--fg-muted); font-size: 0.9625rem; }

/* --- Pricing blocks --- */
.price-block {
  display: grid; gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
}
/* The block name is the label, the price frame is the statement */
.price-block h3 {
  font-size: 0.75rem; font-weight: 850;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0;
}
.price-block__amount {
  font-size: 1.375rem; font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
}
.price-block > p:last-child { color: var(--fg-muted); font-size: 0.9375rem; }
.price-note {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgb(156 124 255 / 0.10);
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* Highlighted pilot card — the app's "selected" panel recipe */
.card--highlight {
  background:
    linear-gradient(135deg, rgb(156 124 255 / 0.34), rgb(35 82 203 / 0.28)),
    rgb(246 244 255 / 0.07);
  box-shadow: 0 18px 44px rgb(20 26 80 / 0.28);
}
.card--highlight:hover {
  background:
    linear-gradient(135deg, rgb(156 124 255 / 0.40), rgb(35 82 203 / 0.32)),
    rgb(246 244 255 / 0.08);
}

/* --- FAQ (native details/summary, works without JavaScript) --- */
.faq { display: grid; gap: var(--space-sm); }
/* Enough body that the backdrop does not read through the questions — a
   pure white film at 5% was legible only while the veil behind it was
   heavy. */
.faq details {
  background:
    linear-gradient(180deg, rgb(246 244 255 / 0.06), rgb(246 244 255 / 0.03)),
    rgb(9 13 30 / 0.76);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
.faq details[open] {
  background:
    linear-gradient(180deg, rgb(246 244 255 / 0.09), rgb(246 244 255 / 0.04)),
    rgb(9 13 30 / 0.84);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg);
  min-height: 56px;
  font-weight: 760; font-size: 1rem;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgb(246 244 255 / 0.04); }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding: 0 var(--space-lg) var(--space-lg); color: var(--fg-muted); font-size: 0.9625rem; }

/* --- Footer --- */
.footer {
  background: linear-gradient(180deg, rgb(5 6 14 / 0.86), rgb(4 5 12 / 0.94));
  padding-block: var(--space-3xl) var(--space-xl);
  font-size: 0.9375rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.footer h4 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-md); color: var(--fg-subtle); font-weight: 850; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.footer a { color: var(--fg-muted); text-decoration: none; }
.footer a:hover { color: var(--fg); text-decoration: underline; }
.footer p { color: var(--fg-muted); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between;
  padding-top: var(--space-xl);
  color: var(--fg-subtle); font-size: 0.875rem;
}

/* ---------- 7. Form -------------------------------------------------------- */

.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* align-content keeps label and input packed at the top. Optional fields
   carry no error line, so they are shorter than the required ones beside
   them and get stretched to the row height — without this the spare space
   is handed to the rows and the input itself grows and drifts down. */
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-weight: 700; font-size: 0.9375rem; color: var(--fg); }
.field .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  background: rgb(246 244 255 / 0.08);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--fg);
  font: inherit; font-size: 1rem;   /* 16px prevents auto-zoom on iOS */
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); }
.field input:hover, .field select:hover, .field textarea:hover { background: rgb(246 244 255 / 0.11); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgb(246 244 255 / 0.13);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7CFF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px;
  padding-right: 2.6rem;
}
.field select option { background: var(--surface-solid); color: var(--fg); }

.field__hint { font-size: 0.8125rem; color: var(--fg-subtle); }

/* The line is reserved whether or not there is an error. Revealing it on
   blur would otherwise push every field below it down at the moment the
   visitor clicks into the next one. */
/* Two class names on purpose: the form sits inside a .card, and `.card p`
   is more specific than a lone `.field__error`, so it would win on
   font-size and the reserved height below would no longer match a line. */
.field .field__error,
.consent .field__error {
  font-size: 0.8125rem; color: var(--danger); font-weight: 700;
  /* Line height and reserved height are pinned to the same value, so the
     box is exactly one line tall whether or not it holds text. */
  line-height: 1.3;
  min-height: 1.05625rem;
  visibility: hidden;
}
.field.has-error .field__error,
.consent.has-error .field__error { visibility: visible; }
/* Error state marks the field with an inset ring (functional, not decorative) */
.field.has-error input, .field.has-error select, .field.has-error textarea {
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

/* Consent */
.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-sm); align-items: start; }
.consent input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 0; margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent label { font-size: 0.875rem; font-weight: 400; color: var(--fg-muted); line-height: 1.55; }
.consent.has-error label { color: var(--danger); }

/* Error summary at the top of the form */
.form__summary {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgb(255 138 138 / 0.12);
}
.form__summary h3 { font-size: 1rem; margin-bottom: var(--space-xs); color: var(--danger); }
.form__summary ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.25rem; }
.form__summary a { color: var(--danger); font-weight: 700; }
[hidden] { display: none !important; }

/* Success message */
.form__success {
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background: rgb(94 233 181 / 0.10);
}
.form__success h3 { color: var(--success); }

/* Honeypot against spam bots — invisible to humans, tempting for bots */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Contact details next to the form */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-lg); }
.contact-list li { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-md); align-items: start; }
.contact-list svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.contact-list span { display: block; font-size: 0.8125rem; color: var(--fg-subtle); }
.contact-list a, .contact-list strong { font-weight: 700; color: var(--fg); text-decoration: none; }
.contact-list a:hover { color: var(--accent-soft); text-decoration: underline; }

/* ---------- 8. Legal pages ------------------------------------------------- */

.legal {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  /* Legal pages have no .section wrapper — lay the same veil over the
     photo so long-form text stays comfortably readable */
  background: linear-gradient(180deg, rgb(6 10 27 / 0.88), rgb(5 8 22 / 0.92));
}
.legal h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); margin-bottom: var(--space-lg); }
.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  margin-top: var(--space-2xl); margin-bottom: var(--space-sm);
}
.legal h3 { font-size: 1.0625rem; margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.legal p, .legal li { color: var(--fg-muted); }
.legal ul { padding-left: 1.2rem; display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.legal address { font-style: normal; color: var(--fg-muted); margin-bottom: var(--space-md); }
.legal .lead { margin-bottom: var(--space-xl); }
.legal__meta { font-size: 0.875rem; color: var(--fg-subtle); margin-top: var(--space-2xl); }

/* ---------- 9. Motion / scroll reveal -------------------------------------- */

/* Hero intro: the content settles in from slightly above through a soft
   blur, one element after the other. Pure CSS — `both` holds the opening
   frame during the delay, and where animations do not run at all the
   content simply renders in place instead of staying hidden. */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(-28px);
    filter: blur(16px);
  }
}

/* Calm pacing: every line gets its own moment. The steps between the
   delays shrink towards the end so the sequence closes instead of
   trailing off, and the headline still starts early enough not to hold
   back the largest contentful paint. */
:is(.hero__text, .hero > .container--narrow) > * {
  animation: hero-enter 1450ms var(--ease-out) both;
}
:is(.hero__text, .hero > .container--narrow) > :nth-child(2) { animation-delay: 140ms; }
:is(.hero__text, .hero > .container--narrow) > :nth-child(3) { animation-delay: 290ms; }
:is(.hero__text, .hero > .container--narrow) > :nth-child(4) { animation-delay: 410ms; }
:is(.hero__text, .hero > .container--narrow) > :nth-child(5) { animation-delay: 505ms; }
:is(.hero__text, .hero > .container--narrow) > :nth-child(6) { animation-delay: 585ms; }

/* The picture takes a touch longer and rises with the headline */
.hero__visual { animation: hero-enter 1700ms var(--ease-out) both; animation-delay: 200ms; }

/* The headline lands in two beats: the problem first, then the promise a
   second later. The second line is a block so it can carry a transform —
   transforms do not apply to inline boxes — and it replaces the former
   line break. It holds its opening frame through the delay while its
   parent fades in, so it stays invisible until its own moment. */
.hero h1 .gradient-text {
  display: block;
  /* As a block the line paints its gradient across one box instead of
     across two inline fragments laid end to end, so the ramp runs shorter
     and both lines would sit at the same point on it. A steeper angle with
     tighter stops restores the progression from the cyan start to the
     lilac last word; measured against the previous rendering the last word
     matches and the first line stays a touch warmer. */
  background-image: linear-gradient(170deg, #4CDDF2 0%, #7FA6FF 34%, #B8A8FF 68%);
  animation: hero-enter 1450ms var(--ease-out) both;
  animation-delay: 1140ms;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Immediately visible without JavaScript — no blank-page risk */
.no-js .reveal { opacity: 1; transform: none; }

/* Section openers repeat the hero's motion — they are the hero of their
   section. Cards keep rising from below, following the scroll direction. */
.section-intro.reveal,
.reveal:has(> .eyebrow) {
  transform: translateY(-16px);
  filter: blur(9px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out),
              filter 700ms var(--ease-out);
}
.section-intro.reveal.is-visible,
.reveal:has(> .eyebrow).is-visible { transform: none; filter: none; }
.no-js .section-intro.reveal,
.no-js .reveal:has(> .eyebrow) { transform: none; filter: none; }

/* Branchen-Videos ohne JS: kein Nachladen möglich, also keinen leeren Rahmen zeigen.
   Mit JS bleibt die Box bewusst sichtbar (nur leer), sonst könnte
   IntersectionObserver ein display:none-Element nie als sichtbar erkennen. */
.no-js video[data-src] { display: none; }

/* Staggered children */
.stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* Respect motion sensitivity (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Without this the staggered hero would hold its hidden opening frame
       for the length of its delay before snapping into view */
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero__aura { animation: none; }
  /* Keep the sound bars' end state instead of letting them jitter */
  .stage__waves span { transform: none; }
}

/* ---------- 10. Responsive -------------------------------------------------- */

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--space-lg) var(--space-xl);
    /* Opaque on purpose: the open menu must cover the page content
       reliably, independent of backdrop-filter support */
    background: #070A18;
    box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.9);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: var(--space-md); font-size: 1.0625rem; min-height: 48px; display: flex; align-items: center; }
  .nav .btn { margin-top: var(--space-sm); }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .facts { gap: var(--space-lg); }
  .step { grid-template-columns: 38px 1fr; gap: var(--space-md); }
  .step__marker { width: 38px; height: 38px; font-size: 0.875rem; }
}

/* ---------- Print ----------------------------------------------------------- */

@media print {
  .header, .footer__grid, .nav, .btn, .hero__aura, .stage { display: none !important; }
  body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .legal p, .legal li, .legal address { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}