/* ──────────────────────────────────────────────
   DW Technologies — Linear-inspired dark theme
   ────────────────────────────────────────────── */

/* ── Self-hosted fonts ─────────────────────────
   Inter (SIL OFL 1.1) and JetBrains Mono (SIL OFL 1.1) are served from
   this project's own domain instead of Google Fonts. This keeps the
   privacy notice in mentions-legales.html accurate: no third-party
   asset request means no visitor IP address is exposed to Google's
   servers (a common GDPR concern for French audiences). Licenses are
   bundled alongside the .woff2 files under public/assets/fonts/. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

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

:root {
  /* Background scale (deep blacks) */
  --bg-0: #08090a;
  --bg-1: #0c0d0f;
  --bg-2: #111214;
  --bg-3: #161719;
  --bg-elev: rgba(255, 255, 255, 0.02);

  /* Text */
  --text: #f7f8f8;
  --text-muted: #b4bcd0;
  --text-dim: #8a8f98;
  --text-faint: #62666d;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Accent — Linear-style indigo/violet */
  --accent: #5e6ad2;
  --accent-hover: #7170ff;
  --accent-soft: rgba(94, 106, 210, 0.12);
  --accent-glow: rgba(94, 106, 210, 0.45);
  --accent-glow-2: rgba(155, 100, 230, 0.35);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container-max: 1200px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 32px -12px rgba(0, 0, 0, 0.5);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-0);
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection {
  background: var(--accent);
  color: #fff;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Utility: skip link ────────────────────── */
/* .visually-hidden-focusable is invisible for sighted mouse users but
   still in the DOM and focusable by keyboard. When it receives focus
   (Tab from the address bar) it becomes a real, visible button anchored
   to the top-left. This is the standard "skip to main content" pattern
   (WCAG 2.4.1 Bypass Blocks). The :not(:focus-within) guard covers the
   old-Safari path where :focus-visible isn't reliable on links. */
.visually-hidden-focusable:not(:focus):not(:focus-visible):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--text);
  outline-offset: 2px;
  text-decoration: none;
}

/* Programmatic focus on <main> after clicking the skip link would draw
   a browser-default focus ring around the entire page content, which
   is visually distracting since the ring already appears on the skip
   link itself. Suppress it — the target landmark still receives focus
   for AT, only the visual outline is hidden. */
.main:focus {
  outline: none;
}

/* ── Section header ────────────────────────── */
.section__header {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}

.section__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 1rem;
}

.section__intro {
  color: var(--text-muted);
  font-size: 1.175rem;
  line-height: 1.6;
}

/* ── Shared section / card / grid primitives ─ */
.section {
  padding: 7rem 0;
  border-bottom: 1px solid var(--border-strong);
}

.section--flush {
  padding: 6rem 0;
  border-bottom: none;
}

/* Kill the trailing bottom border on whichever section is last inside
   <main>. Without this, its border-bottom stacks against .footer's
   border-top and shows as a subtle double rule above the footer.
   Written as a descendant/last-child rule so it also covers custom
   section wrappers (.contact__section, .section--flush, .hero) —
   anything that happens to end the page. */
.main > section:last-child {
  border-bottom: none;
}

/* ── Header / Nav ──────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 2rem;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.2rem;
  font-weight: 700;
  font-size: 1.10rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.header__logo-mark,
.footer__logo-mark {
  width: 2.25rem;
  height: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(94, 106, 210, 0.35));
}

.header__logo-mark {
  transform: translateY(-0.5px);
}

.header__logo-text {
  background: linear-gradient(180deg, #ffffff 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav__link:hover,
.header__lang:hover {
  color: var(--text);
  background: var(--bg-elev);
}

.nav__link--active {
  color: var(--text);
  background: var(--accent-soft);
  position: relative;
}

.nav__link--active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Mobile nav toggle (burger) ────────────── */
.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.header__burger:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev);
}

.header__burger-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.header__burger-bar:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
.header__burger-bar:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }

.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(2) {
  opacity: 0;
}
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.header__lang {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  transition: color 0.15s, background 0.15s;
}

/* ── Buttons ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.825rem; }
.btn--block { width: 100%; padding: 0.95rem; }

.btn--primary {
  background: var(--text);
  color: var(--bg-0);
}
.btn--primary:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* ── Hero ──────────────────────────────────── */
.hero {
  position: relative;
  padding: 9rem 0 5rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border-strong);
}

.hero__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 1100px;
  height: 800px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, var(--accent-glow), transparent 70%),
    radial-gradient(closest-side, var(--accent-glow-2), transparent 70%);
  background-position: 30% 40%, 70% 60%;
  background-size: 60% 60%, 55% 55%;
  background-repeat: no-repeat;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  background: linear-gradient(180deg, #ffffff 0%, #b4bcd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.5rem;
}

.hero__title-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.hero__subtitle {
  font-size: clamp(1.125rem, 1.6vw, 1.325rem);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── Interior page hero ──────────────────────
   Used on pages where a content section starts immediately below the
   hero (e.g. développement grid, contact form). Tightens the vertical
   rhythm and drops the border since the following .section / .contact__section
   already provides one — avoids a double rule. */
.hero--compact {
  padding-bottom: 2rem;
  border-bottom: none;
}

/* ── Cards & grids ─────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  list-style: none;
}

/* Force exactly three columns above the mobile breakpoint. The base
   .grid uses auto-fit + minmax(280px, 1fr), which is great for grids
   with N items but produces an awkward 2 + orphan layout at ~900px
   viewports when N=3 (e.g. the home team section). Pinning to 3
   columns here keeps them locked side-by-side; the mobile media query
   below collapses to 1 column when there isn't horizontal room. */
.grid--fixed-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--divided {
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card {
  position: relative;
  padding: 2rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.card--flat {
  border-color: transparent;
  border-radius: 0;
  transition: background 0.2s;
}

.card--flat::before {
  display: none;
}

.card--flat:hover {
  background: var(--bg-2);
  transform: none;
}

.card__title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.65rem;
  color: var(--text);
}

.card__description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.card--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.card--logo .card__title {
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}

.card__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* ── About — Story ─────────────────────────── */
.story__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.story__paragraph {
  color: var(--text-muted);
  font-size: 1.175rem;
  line-height: 1.7;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.story__paragraph:first-child {
  padding-top: 0;
  border-top: none;
}

.story__paragraph:last-child {
  margin-bottom: 0;
}

/* ── FAQ ───────────────────────────────────── */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text-dim);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::before {
  width: 100%;
  height: 2px;
}

.faq-item__icon::after {
  width: 2px;
  height: 100%;
  transition: opacity 0.2s ease;
}

.faq-item[open] .faq-item__question {
  border-bottom: 1px solid var(--border);
}

.faq-item[open] .faq-item__icon::after {
  opacity: 0;
}

.faq-item__answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ── Legal notice ──────────────────────────── */
.legal__layout {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 760px;
  margin: 0 auto;
}

.legal__heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.legal__paragraph {
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.legal__paragraph:last-child {
  margin-bottom: 0;
}

/* ── Contact ───────────────────────────────── */
.contact__section {
  padding: 0rem 0 7rem;
  border-bottom: 1px solid var(--border);
}

.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  max-width: 1100px;
}

.contact__info-heading {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.contact__info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact__info-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.contact__info-value {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.contact__form {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Off-screen honeypot wrapper. We deliberately avoid display:none and
   visibility:hidden — many spam bots skip fields with those styles, so
   they'd never fill the trap. Positioning the field off-screen keeps
   it in the DOM (bots fill it) while hiding it from real users. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--border-strong);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-success,
.form-error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.form-success {
  color: #5cd9a6;
  background: rgba(92, 217, 166, 0.08);
  border: 1px solid rgba(92, 217, 166, 0.2);
}

.form-error {
  color: #ff7575;
  background: rgba(255, 117, 117, 0.08);
  border: 1px solid rgba(255, 117, 117, 0.2);
}

/* ── Footer ────────────────────────────────── */
.footer {
  padding: 5rem 0 2.5rem;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer__tagline {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 1rem;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__link {
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: color 0.15s;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.footer__lang {
  font-weight: 500;
  color: var(--text-dim);
}

.footer__link:hover,
.footer__lang:hover { color: var(--text); }

/* ── Focus states ──────────────────────────── */
/* Consistent, visible focus ring for every keyboard-focusable
   interactive element. :focus-visible (rather than :focus) keeps the
   ring hidden for mouse clicks and shows it for keyboard/tab users. */
.btn:focus-visible,
.nav__link:focus-visible,
.header__logo:focus-visible,
.header__burger:focus-visible,
.footer__link:focus-visible,
.footer__lang:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The <summary> lives inside .faq-item, which has overflow:hidden and
   rounded corners — an outer outline would be clipped. Render the ring
   inset instead so it visibly hugs the question row. */
.faq-item__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Form fields already have a visible focus state (border colour +
   accent-soft box-shadow, defined next to .form-group input:focus), so
   they aren't repeated here. */

/* ── Main spacing ──────────────────────────── */
.main { display: block; }

/* ── Deferred rendering for below-the-fold sections ──
   content-visibility: auto lets the browser skip layout, paint, and
   even rendering of these subtrees until they scroll close to the
   viewport. The catch: skipped content has zero size by default, which
   causes scrollbar jumps and breaks Ctrl+F. contain-intrinsic-size
   reserves an estimated height so the scroll geometry stays stable
   before the content is actually laid out. The numbers below are rough
   heights measured in the built HTML (a bit larger than reality so the
   real content never expands the reserved box).

   Only applied to sections that (a) are guaranteed below the fold on
   every page they appear and (b) contain a lot of DOM — the FAQ
   accordion and the pre-built features grid. Applying it to the hero
   or first-viewport sections would be counterproductive. */
#faq,
#features {
  content-visibility: auto;
}

#faq {
  contain-intrinsic-size: 1px 800px;
}

#features {
  contain-intrinsic-size: 1px 1600px;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 900px) {
  .contact__layout { grid-template-columns: 1fr; gap: 2rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero { padding: 6rem 0 5rem; }
  .section { padding: 5rem 0; }
  .header__inner { gap: 1rem; }
  .header__logo { gap: 0.35rem; }
  .header__logo-text { font-size: 0.9rem; }
  .form-row { grid-template-columns: 1fr; }
  .grid--fixed-3 { grid-template-columns: 1fr; }

  .header__burger { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 9, 10, 0.96);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.5rem 1rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .nav.nav--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav__link {
    display: block;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
  }

  .nav__link--active::after { display: none; }
}

@media (max-width: 480px) {
  .footer__columns { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 0.75rem; }
}