/* Akka Yazılım — iteration 2. Tokens are documented in DESIGN.md.
   Dark is the default; [data-theme="light"] on <html> swaps the palette. */

:root {
  color-scheme: dark;

  /* Night glaze: İznik cobalt and turquoise on deep blue */
  --bg: #0e1729;
  --surface: #142038;
  --surface-2: #1b2a47;
  --surface-3: #2a3c62;
  --line: #26365a;
  --text: #e8eef0;
  --muted: #9aa8bf;
  --accent: #3d63c9;
  --accent-hover: #4c72d8;
  --cobalt: #5b7fe0;
  --cobalt-light: #8ea6ea;
  --turquoise: #4fb3aa;
  --turquoise-light: #7cc9c1;
  --error: #f6b8b0;
  --white: #ffffff;
  --shadow-frame: 0 30px 60px -30px rgb(0 0 0 / 0.6);
  --shadow-menu: 0 20px 30px -20px rgb(0 0 0 / 0.6);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ~1.25 scale */
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.2vw, 4.75rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1200px;
  --section-space: clamp(4.5rem, 3rem + 7vw, 9rem);

  --radius-frame: 28px;
  --radius-field: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Day glaze: the same tiles on a cool porcelain ground */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f4;
  --surface: #ffffff;
  --surface-2: #e6eeed;
  --surface-3: #c9d6d6;
  --line: #dce6e5;
  --text: #16223a;
  --muted: #55627a;
  --accent: #2a4da6;
  --accent-hover: #1f3c86;
  --cobalt: #2a4da6;
  --cobalt-light: #2a4da6;
  --turquoise: #3c9c95;
  --turquoise-light: #2f8a83;
  --error: #b3261e;
  --shadow-frame: 0 30px 60px -30px rgb(42 77 166 / 0.35);
  --shadow-menu: 0 20px 30px -20px rgb(22 34 58 / 0.25);
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Translations: every language's text sits in the same grid cell (built by
   setText in main.js), so elements are sized for the longest one and
   switching language never moves anything. Only the layer matching
   <html lang> shows; the outgoing one fades out, then the new one in. */
.i18n {
  display: inline-grid;
}

.i18n-block {
  display: grid;
}

.i18n-layer {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}

html[lang="en"] .i18n-layer[lang="en"],
html[lang="tr"] .i18n-layer[lang="tr"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 150ms ease 150ms, visibility 0s linear 150ms;
}

/* Headlines sit on the bottom of their cell, so any space reserved for a
   longer translation opens above them, not between them and the text. */
.hero-title .i18n-layer,
.section-title .i18n-layer {
  align-self: end;
}

/* Centred controls centre whichever language is showing in their cell. */
.button .i18n,
.site-nav .i18n {
  justify-items: center;
  text-align: center;
}

img,
svg {
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--cobalt-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

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

.button {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms var(--ease-out);
}

.button:hover {
  --btn-bg: var(--accent-hover);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button-small {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
}

.button-quiet {
  background: transparent;
  border-color: var(--surface-3);
  color: var(--text);
}

.button-quiet:hover {
  background: var(--surface-2);
  border-color: var(--muted);
}

.button-light {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
}

.button-light:hover {
  --btn-bg: color-mix(in srgb, var(--text) 82%, var(--bg));
}

.button-quiet-light {
  background: transparent;
  border-color: var(--surface-3);
  color: var(--text);
}

.button-quiet-light:hover {
  border-color: var(--muted);
  background: var(--surface-2);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wordmark-tile {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 7px;
  background: var(--accent);
  transition: transform 500ms var(--ease-spring);
}

.wordmark-tile path {
  fill: none;
  stroke: var(--text);
  stroke-width: 16;
}

.wordmark:hover .wordmark-tile {
  transform: rotate(90deg);
}

.wordmark-text {
  font-weight: 500;
  color: var(--muted);
}

.wordmark-text strong {
  font-weight: 800;
  color: var(--text);
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
}

.site-nav a {
  position: relative;
  padding-block: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  transition: color 200ms ease;
}

/* The underline sits on the visible language's text, not the link box,
   which is sized for the longest translation. */
.site-nav .i18n-layer {
  position: relative;
}

.site-nav .i18n-layer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-0.25rem - 2px);
  height: 2px;
  border-radius: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--text);
}

.site-nav a:hover .i18n-layer::after,
.site-nav a[aria-current="true"] .i18n-layer::after {
  transform: scaleX(1);
}

.nav-contact-mobile {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
}

.lang-switch button {
  min-width: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text);
}

/* Theme switch: a half-glazed tile that turns over */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.theme-toggle:hover {
  background: var(--surface-3);
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 600ms var(--ease-spring);
}

:root[data-theme="light"] .theme-toggle svg {
  transform: rotate(180deg);
}

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.menu-bars,
.menu-bars::before,
.menu-bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}

.menu-bars {
  position: relative;
}

.menu-bars::before,
.menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bars::before {
  transform: translateY(-6px);
}

.menu-bars::after {
  transform: translateY(6px);
}

.menu-toggle[aria-expanded="true"] .menu-bars {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-bars::before {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-bars::after {
  transform: rotate(-45deg);
}

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

.hero {
  padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero-title {
  max-width: 13ch;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-lede {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* Hero copy settles in after the tiles start moving. */
.js .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 800ms var(--ease-out) forwards;
}

.js .hero-copy > :nth-child(2) { animation-delay: 120ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 240ms; }

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-art {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.tile-field {
  --cols: 8;
  --rows: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  aspect-ratio: var(--cols) / var(--rows);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    var(--shadow-frame);
}

.tile {
  aspect-ratio: 1;
  transform: rotate(calc(var(--turns, 0) * 90deg));
  transition: transform 550ms var(--ease-spring);
}

.tile svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tile path {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 15;
  /* Square caps poke past the tile edge and hide subpixel seams. */
  stroke-linecap: square;
}

.tile.is-turquoise path {
  stroke: var(--turquoise);
}

/* Load sequence: tiles arrive in a diagonal wave. */
.tile-field.is-entering .tile {
  opacity: 0;
  transform: rotate(calc((var(--turns, 0) - 1) * 90deg)) scale(0.6);
}

.tile-field.is-entered .tile {
  transition:
    transform 700ms var(--ease-spring) var(--delay, 0ms),
    opacity 400ms ease var(--delay, 0ms);
}

.tile-field.is-settled .tile {
  transition: transform 550ms var(--ease-spring);
}

/* A tile touched during the intro wave turns without the wave's delay. */
.tile-field .tile.is-live {
  transition: transform 550ms var(--ease-spring);
}

.tile-hint {
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--section-space);
}

.section-title {
  font-size: var(--step-3);
  text-wrap: balance;
}

.section-head {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.section-lede {
  color: var(--muted);
}

/* About */

.about {
  border-top: 1px solid var(--line);
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.about-lede {
  max-width: 38rem;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--turquoise);
}

.facts h3 {
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.facts p {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* Services */

.services {
  background: var(--surface);
}

.services-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.services .section-head {
  position: sticky;
  top: 7rem;
}

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.service {
  border-bottom: 1px solid var(--line);
}

.service h3 {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.6rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: color 200ms ease, padding 400ms var(--ease-out);
}

.service-toggle:hover,
.service-toggle[aria-expanded="true"] {
  color: var(--cobalt-light);
}

.service-toggle[aria-expanded="true"] {
  padding-bottom: 0.75rem;
}

/* Plus sign that turns into a minus */
.service-icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  transition: background-color 250ms ease, transform 400ms var(--ease-spring);
}

.service-icon::before,
.service-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.875rem;
  height: 2px;
  margin: -1px 0 0 -0.4375rem;
  border-radius: 2px;
  background: currentColor;
  transition: transform 400ms var(--ease-spring);
}

.service-icon::after {
  transform: rotate(90deg);
}

.service-toggle[aria-expanded="true"] .service-icon {
  background: var(--accent);
  color: var(--white);
  transform: rotate(180deg);
}

.service-toggle[aria-expanded="true"] .service-icon::after {
  transform: rotate(0deg);
}

.service-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}

.service-panel.is-open {
  grid-template-rows: 1fr;
}

.service-panel-inner {
  overflow: hidden;
}

.service-panel p {
  max-width: 36rem;
  padding-bottom: 1.75rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}

.service-panel.is-open p {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

/* Process */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Line from the first step marker's centre to the last one's.
   Last column starts at 75% + 1.5rem (4 columns, 2rem gaps); its marker
   centre is 1.25rem further in. */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: calc(1.25rem - 1px);
  left: 1.25rem;
  right: calc(25% - 2.75rem);
  height: 2px;
}

/* Dashed track */
.steps::before {
  background: repeating-linear-gradient(
    to right,
    var(--surface-3) 0 8px,
    transparent 8px 14px
  );
}

/* Filled line; --line (0–1) is set from scroll position in main.js */
.steps::after {
  background: linear-gradient(to right, var(--cobalt), var(--turquoise));
  border-radius: 2px;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
  transition: transform 120ms linear;
}

/* Above the line pseudo-elements, which come later in paint order */
.step {
  position: relative;
  z-index: 1;
}

.step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--bg);
}

.step h3 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Scroll-linked states (class added by main.js unless reduced motion).
   Unreached steps show a hollow marker; reaching one fills it. */
.steps.is-scroll-linked .step-num {
  background: var(--bg);
  color: var(--muted);
  box-shadow:
    0 0 0 6px var(--bg),
    inset 0 0 0 2px var(--surface-3);
  transform: scale(0.85);
  transition:
    background-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease,
    transform 500ms var(--ease-spring);
}

.steps.is-scroll-linked .step h3 {
  color: var(--muted);
  transition: color 300ms ease;
}

.steps.is-scroll-linked .step.is-reached .step-num {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 0 6px var(--bg);
  transform: none;
}

.steps.is-scroll-linked .step.is-reached h3 {
  color: var(--text);
}

.step p {
  margin-top: 0.6rem;
  max-width: 26ch;
  font-size: 1rem;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact {
  padding-block: var(--section-space);
  background: var(--surface);
}

.contact :focus-visible {
  outline-color: var(--turquoise-light);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact-copy > p {
  max-width: 28rem;
  margin-top: 1.25rem;
  color: var(--muted);
}

.contact-details {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
}

.contact-details dt {
  font-size: var(--step--1);
  color: var(--muted);
}

.contact-details dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}

.contact-details a {
  text-decoration-color: var(--turquoise);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 200ms ease;
}

.contact-details a:hover {
  color: var(--turquoise-light);
}

.contact-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-frame);
  background: var(--bg);
  border: 1px solid var(--line);
}

.contact-form {
  display: grid;
  gap: 1.25rem;
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}

.contact-form.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--surface-3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--turquoise-light);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquoise-light) 30%, transparent);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.select-wrap select option {
  background: var(--surface);
  color: var(--text);
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.field-error {
  font-size: 0.875rem;
  color: var(--error);
}

.field-error:empty {
  display: none;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}

.form-status {
  font-size: 0.9375rem;
  color: var(--muted);
}

.form-status.is-error {
  color: var(--error);
}

/* Sending: a small ring spins inside the button */
#f-submit.is-sending {
  pointer-events: none;
  opacity: 0.85;
}

#f-submit.is-sending::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-done {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding-block: 1rem;
  animation: rise 600ms var(--ease-out);
}

.form-done:focus {
  outline: none;
}

.form-done h3 {
  font-size: var(--step-2);
}

.form-done p {
  max-width: 30rem;
  color: var(--muted);
}

.done-tile {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: var(--turquoise);
  animation: settle 900ms var(--ease-spring);
}

.done-tile path {
  fill: none;
  stroke: var(--bg);
  stroke-width: 14;
}

@keyframes settle {
  from {
    transform: rotate(-180deg) scale(0.4);
    opacity: 0;
  }
}

.form-done .button {
  margin-top: 0.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 2rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

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

/* Keep in sync with STACKED_QUERY in main.js (tile rows drop to 3 here). */
@media (max-width: 960px) {
  .hero-inner,
  .about-inner,
  .services-inner,
  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile-field {
    border-radius: 20px;
  }

  .services .section-head {
    position: static;
    margin-bottom: 0;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .steps::before,
  .steps::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .header-inner {
    gap: 1rem;
  }

  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .header-actions {
    margin-inline-start: auto;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-menu);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 250ms ease, transform 300ms var(--ease-out), visibility 0s linear 300ms;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 250ms ease, transform 300ms var(--ease-out);
  }

  .site-nav a {
    padding-block: 0.85rem;
    font-size: var(--step-1);
    color: var(--text);
    border-bottom: 1px solid var(--line);
  }

  .site-nav .i18n-layer::after {
    display: none;
  }

  .site-nav .i18n {
    justify-items: start;
    text-align: start;
  }

  .nav-contact-mobile {
    display: block;
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile-hint {
    display: none;
  }
}

@media (max-width: 520px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .wordmark-text {
    font-size: 1.125rem;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .lang-switch button {
    min-width: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}