/* =============================================================
   DIGITALOVA TECHNOLOGY — Design System  (Editorial / "Agence")
   Charcoal surfaces, a single restrained lime accent, a tall
   serif display face over Inter UI. Thin borders, minimal
   shadow, generous rhythm. One iridescent 3D prism in the hero.
   ============================================================= */

:root {
  --bg: #0b0b0d;
  --bg-2: #0e0e11;
  --bg-elev: #121216;
  --surface: #141417;
  --surface-2: #191920;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f4f3ef;
  --text-dim: #a5a4ab;
  --muted: #6e6d76;
  --faint: #46454d;

  /* Restrained lime — the single accent */
  --accent: #c9f16b;
  --accent-soft: #d9ff8e;
  --accent-deep: #a6cf3f;
  --accent-ink: #10140a;
  --accent-glow: rgba(201, 241, 107, 0.26);
  --accent-wash: rgba(201, 241, 107, 0.08);
  --accent-line: rgba(201, 241, 107, 0.34);

  --ok: #7ddda0;
  --warn: #e7c766;
  --err: #f0857a;

  --font-display-stack: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-body-stack: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --pill: 999px;
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(84px, 12vw, 156px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body-stack);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }
.section + .section { border-top: 1px solid var(--line); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--text); text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display-stack);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.005em;
}
h3, h4 {
  font-family: var(--font-body-stack);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.display {
  font-family: var(--font-display-stack);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.4vw, 5.9rem);
  letter-spacing: -0.01em;
  line-height: 1.02;
}
h2, .h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3, .h3 { font-size: clamp(1.06rem, 1.6vw, 1.24rem); }
p { text-wrap: pretty; }

.lime { color: var(--accent); }
.serif-em { font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body-stack);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

.lead {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 54ch;
}
.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 68px); }
.section-head--wide { max-width: 900px; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--text-dim); }

/* ---------- Text link with arrow ---------- */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.tlink svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--pill);
  font-family: var(--font-body-stack);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.3s var(--ease),
    background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 34px -12px var(--accent-glow); }
.btn--primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 18px 48px -14px var(--accent-glow); }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-wash); transform: translateY(-2px); }
.btn--lg { padding: 16px 30px; font-size: 0.98rem; }
.btn--sm { padding: 10px 18px; font-size: 0.84rem; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- Announcement bar (optional, CMS-controlled) ---------- */
.announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body-stack);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 9px 44px;
  line-height: 1.35;
}
.announce a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
body.has-announce { padding-top: 38px; }
body.has-announce .header { top: 38px; }
@media (max-width: 600px) { .announce { font-size: 0.75rem; padding: 8px 16px; } }

/* ---------- Header (plain minimal bar — matches reference) ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark {
  width: 44px; height: 30px; flex-shrink: 0;
  background: url("../img/logo.png?v=3") center / contain no-repeat;
}
.brand__name {
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.brand__name b { display: block; font-weight: 600; letter-spacing: 0.06em; }
.brand__name span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 34px; margin-inline: auto; }
.nav a {
  position: relative;
  font-size: 0.86rem; font-weight: 500;
  color: var(--text-dim);
  transition: color 0.16s;
  padding-block: 6px;
}
.nav a:hover, .nav a.is-active { color: var(--text); }
.nav a.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.header__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  place-items: center; color: var(--text);
}
.burger svg { width: 18px; height: 18px; }

.mobile-nav {
  position: fixed;
  inset: 74px 0 auto 0;
  z-index: 79;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  display: grid;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a {
  padding: 16px var(--gutter);
  font-weight: 500; color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { color: var(--text); background: var(--accent-wash); }
.mobile-nav .btn { margin: 16px var(--gutter); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 96px;
  overflow: hidden;
}
/* Hero media — the supplied 3D animation, played as a native video.
   Full-bleed on desktop, right-anchored so the mass sits opposite the
   headline; the video's own near-black surround blends into the page. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--bg);
  pointer-events: none;
  animation: heroVideoIn 1.2s var(--ease) both;
}
@keyframes heroVideoIn { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1100px) {
  .hero__bg { inset: 0 0 0 auto; width: 62%; }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0% 27%, color-mix(in srgb, var(--bg) 80%, transparent) 44%, transparent 66%),
    radial-gradient(ellipse 54% 64% at 0% 50%, var(--bg) 20%, transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, transparent 15% 76%, var(--bg) 100%);
}
@media (max-width: 1100px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 44%, transparent 82%),
      linear-gradient(180deg, var(--bg) 0%, transparent 24% 64%, var(--bg) 100%);
  }
}
@media (max-width: 760px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 26%, color-mix(in srgb, var(--bg) 48%, transparent) 56%, var(--bg) 100%),
      linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 54%, transparent) 40%, transparent 74%);
  }
}
/* Desktop: video is right-anchored (62% width) — fade only the inner seam. */
@media (min-width: 1100px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, var(--bg) 0% 33%, color-mix(in srgb, var(--bg) 66%, transparent) 43%, transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, transparent 14% 80%, var(--bg) 100%);
  }
}
.hero__inner { position: relative; z-index: 2; max-width: 620px; }
.hero .eyebrow { margin-bottom: 28px; letter-spacing: 0.24em; }
/* Hero headline — bold clean grotesk, not the site's editorial serif.
   Three stacked lines: white / white (stronger) / neon-lime focal word. */
.hero h1.display {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero h1.display span { display: block; }
.hero h1.display .hl-strong { font-size: 1.04em; letter-spacing: -0.045em; }
.hero h1 .lime { display: block; }
.hero .lead { margin-bottom: 38px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__scroll {
  position: absolute; left: calc(var(--gutter) - 4px); bottom: 34px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--muted);
}
.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
}
.hero__scroll i {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 50%; top: 6px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--accent);
  transform: translateX(-50%);
  animation: scrolldot 1.9s var(--ease) infinite;
}
@keyframes scrolldot { 0% { opacity: 0; transform: translate(-50%, -2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 9px); } }

/* Tablet / mobile (<1024px): the supplied 3D animation becomes a full-bleed
   layer pinned to the TOP of the hero, sitting BEHIND the headline — no card,
   no border, no frame, no rounded box. The text flows over it and the video
   fades into the black background before the description. A left/bottom scrim
   keeps the white + lime type readable. Desktop (>=1024px) is left untouched. */
@media (max-width: 1023px) {
  .hero {
    display: block;
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 44px;
  }
  .hero__bg {
    position: absolute;
    inset: 0 0 auto 0;
    order: 0;
    width: 100%;
    height: clamp(460px, 96vw, 580px);
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 0;
  }
  .hero__video { object-fit: cover; object-position: 50% 30%; }
  /* fade the video into the page: a soft wash at the left (behind the
     headline) and resolving to solid black by the time the description
     flows over it, so the copy always sits on a clean surface */
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(11, 11, 13, 0.62) 0%, rgba(11, 11, 13, 0.22) 52%, rgba(11, 11, 13, 0.04) 80%, transparent 100%),
      linear-gradient(180deg, rgba(11, 11, 13, 0.4) 0%, rgba(11, 11, 13, 0) 20%, rgba(11, 11, 13, 0) 40%, var(--bg) 70%);
  }
  .hero__scrim { display: none; }
  .hero__scroll { display: none; }
  .hero__inner { max-width: none; }
  /* compact, dense headline composition — no wide gaps between the lines */
  .hero h1.display {
    font-size: clamp(2.6rem, 11.5vw, 3.4rem);
    line-height: 0.92;
    margin-bottom: 18px;
  }
  .hero .lead { margin-bottom: 24px; max-width: 40ch; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__actions .btn--lg { padding: 13px 22px; font-size: 0.92rem; }
}

/* ---------- About ----------
   The supplied 3D animation is a full layer BEHIND the copy at every
   breakpoint — no border, no card, no rounded frame. The text sits on top
   (z-index) and a scrim keeps every line readable while the animation stays
   visible around/through it. */
#about {
  overflow: hidden;
}
.about__layout {
  position: relative;
}
.about__body {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.about__body .eyebrow { margin-bottom: 22px; }
.about__body h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 20ch; margin-bottom: 22px; }
.about__body p { color: var(--text-dim); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.75; max-width: 44ch; }
.about__body p + p { margin-top: 16px; }
.about__body .btn { margin-top: 30px; }

.about__aside {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.about__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}
.about__media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* desktop scrim: opaque-ish over the left text column, clear on the right
   where the animation + capability list sit */
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--bg) 66%, transparent) 42%,
      color-mix(in srgb, var(--bg) 22%, transparent) 70%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 50%, transparent) 0%,
      transparent 22%, transparent 66%,
      var(--bg) 100%);
}
.about__list {
  position: absolute;
  top: 50%;
  right: clamp(-4px, 1.5vw, 24px);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-left: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.about__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.92rem; color: var(--text-dim); white-space: nowrap;
}
.about__list__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 30px);
}
.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 58px;
}
.process__step::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 42px;
  right: calc(-1 * clamp(16px, 2vw, 30px));
  height: 1px;
  background: var(--line-strong);
}
.process__step:last-child::before { display: none; }
.process__num {
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-display-stack);
  font-size: 0.95rem;
  background: var(--bg);
}
.process__step h3 {
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.process__step p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }

/* --- scroll-driven neon-lime light travelling along the existing timeline ---
   ::before = the lit segment (scales with scroll progress --pp: 0 → 1)
   ::after  = the concentrated bright point at the leading edge
   Both sit above the grey line but below the opaque step circles. */
.process { position: relative; }
.process__num { position: absolute; z-index: 2; }
.process::before,
.process::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.12s linear;
}
.process::before { box-shadow: 0 0 6px -1px var(--accent-glow); }
.process::after {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 9px 1px var(--accent-glow), 0 0 3px var(--accent);
}
.process.is-lit::before,
.process.is-lit::after { opacity: 1; }

.process[data-axis="x"]::before {
  left: var(--rail-x); top: var(--rail-y);
  width: var(--rail-len); height: 1px;
  transform-origin: left center;
  transform: translateY(-50%) scaleX(var(--pp, 0));
}
.process[data-axis="x"]::after {
  left: var(--rail-x); top: var(--rail-y);
  transform: translate(-50%, -50%) translateX(calc(var(--rail-len) * var(--pp, 0)));
}
.process[data-axis="y"]::before {
  left: var(--rail-x); top: var(--rail-y);
  width: 1px; height: var(--rail-len);
  transform-origin: center top;
  transform: translateX(-50%) scaleY(var(--pp, 0));
}
.process[data-axis="y"]::after {
  left: var(--rail-x); top: var(--rail-y);
  transform: translate(-50%, -50%) translateY(calc(var(--rail-len) * var(--pp, 0)));
}

/* step activation (only when the JS enhancement is active) */
.process.is-scroll-lit .process__num {
  border-color: var(--line-strong);
  color: var(--text-dim);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.process.is-scroll-lit .process__step.is-active .process__num {
  border-color: var(--accent-line);
  color: var(--accent);
}
.process.is-scroll-lit .process__step.is-current .process__num {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 16px -3px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .process::before,
  .process::after { display: none; }
}

/* ---------- Services (two-column intro + 2×2 card grid) ---------- */
.svc__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.4fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
.svc__intro .eyebrow { margin-bottom: 22px; }
.svc__intro h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  max-width: 18ch;
  margin-bottom: 20px;
}
.svc__intro > p {
  color: var(--text-dim);
  max-width: 42ch;
}

.svc__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.svc__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: clamp(22px, 2.3vw, 30px);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.svc__card.is-selected { border-color: var(--accent); }
.svc__card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  transition: transform 0.25s var(--ease);
}
.svc__card__icon svg { width: 22px; height: 22px; }
.svc__card h3 {
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.svc__card > p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.svc__card__arrow {
  margin-top: auto;
  color: var(--accent);
  display: inline-flex;
  transition: transform 0.2s var(--ease);
}
.svc__card__arrow svg { width: 20px; height: 20px; }

@media (hover: hover) {
  .svc__card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    background: var(--surface-2);
  }
  .svc__card:hover .svc__card__icon { transform: scale(1.08) rotate(-4deg); }
  .svc__card:hover .svc__card__arrow { transform: translateX(5px); }
}
.svc__card:focus-visible { border-color: var(--accent-line); }

@media (max-width: 900px) {
  .svc__layout { grid-template-columns: 1fr; gap: 34px; }
  .svc__grid { grid-template-columns: 1fr; gap: 14px; }
  .svc__intro h2 { max-width: 20ch; }
  .svc__intro > p { max-width: none; }
}
@media (max-width: 480px) {
  .svc__card { padding: 20px; }
}

/* ---------- Service detail modal (same-page) ---------- */
.svc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.svc-modal[hidden] { display: none; }
.svc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.72);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.svc-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(86vh, 880px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 4vw, 44px);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px var(--accent-line),
    0 26px 70px -22px rgba(0, 0, 0, 0.72),
    0 0 60px -26px var(--accent-glow);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.svc-modal.is-open .svc-modal__backdrop { opacity: 1; }
.svc-modal.is-open .svc-modal__panel { opacity: 1; transform: none; }

.svc-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, transform 0.2s var(--ease);
}
.svc-modal__close:hover { color: var(--text); border-color: var(--accent); transform: rotate(90deg); }
.svc-modal__close svg { width: 18px; height: 18px; }

.svc-modal__num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  font-family: var(--font-display-stack);
  font-size: 1rem;
  margin-bottom: 18px;
}
.svc-modal__num svg { width: 22px; height: 22px; }
.svc-modal__body h3 {
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 12px;
}
.svc-modal__intro { color: var(--text-dim); font-size: 1rem; line-height: 1.65; margin-bottom: 26px; }
.svc-modal__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.svc-modal__caps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
  margin-bottom: 26px;
}
.svc-modal__caps li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; color: var(--text-dim); line-height: 1.5;
}
.svc-modal__caps li::before {
  content: "";
  width: 6px; height: 6px; margin-top: 7px;
  border-radius: 50%; background: var(--accent);
  flex-shrink: 0;
}
.svc-modal__support {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  padding-left: 16px;
  border-left: 2px solid var(--accent-line);
  margin-bottom: 28px;
}
.svc-modal__body .btn { width: fit-content; }

@media (max-width: 560px) {
  .svc-modal { padding: 0; align-items: stretch; }
  .svc-modal__panel {
    width: 100%;
    min-height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    border-inline: 0;
    padding: 66px 20px 32px;
  }
  .svc-modal__caps { grid-template-columns: 1fr; }
  .svc-modal__close { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-modal__panel { transform: none; }
}

/* ---------- FAQ (AEO) ---------- */
#faq[hidden] { display: none; }
.faq {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 4px;
  position: relative;
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.16s var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--accent); }
.faq__mark {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--accent);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.faq__mark::before { width: 14px; height: 2px; }
.faq__mark::after { width: 2px; height: 14px; }
.faq__item[open] .faq__mark::after { opacity: 0; transform: rotate(90deg); }
.faq__a {
  padding: 0 44px 24px 4px;
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.72;
}
.faq__a p + p { margin-top: 0.8em; }
@media (prefers-reduced-motion: reduce) {
  .faq__mark::before, .faq__mark::after { transition: none; }
}

/* ---------- CTA + Contact ---------- */
.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 72px);
  align-items: start;
}
.cta__aside .eyebrow { margin-bottom: 22px; }
.cta__aside h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 22px; }
.cta__aside .lead { margin-bottom: 30px; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.cta__mail {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display-stack);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.16s, border-color 0.16s;
}
.cta__mail:hover { color: var(--accent); border-color: var(--accent); }
.cta__mail svg { width: 18px; height: 18px; color: var(--accent); }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 36px);
}
.form__title { font-family: var(--font-display-stack); font-weight: 400; font-size: 1.5rem; margin-bottom: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-dim); margin-bottom: 8px; }
.field > label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.9rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s;
  appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  background: var(--bg-elev);
}
.field textarea { resize: vertical; min-height: 122px; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.field select option { background: var(--bg-elev); }
.field__error { display: none; margin-top: 6px; font-size: 0.78rem; color: var(--err); }
.field.has-error .field__error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }

.form__note { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.86rem; }
.form__note:empty { display: none; }
.form__note.is-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.form__note.is-err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); }
.form__spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 84px); overflow: hidden; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.3fr 1.3fr;
  gap: 40px;
}
.footer__brand p { color: var(--muted); font-size: 0.88rem; margin: 14px 0 0; max-width: 32ch; }
.footer__tag { color: var(--accent) !important; font-family: var(--font-display-stack); margin-top: 10px !important; font-size: 1.05rem !important; }
.footer__col h4 {
  font-family: var(--font-body-stack);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer__col a, .footer__col span {
  display: block;
  font-size: 0.87rem;
  color: var(--text-dim);
  margin-bottom: 11px;
  transition: color 0.16s;
}
.footer__col a:hover { color: var(--accent); }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* ---------- Custom cursor ---------- */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed; top: 0; left: 0;
    width: 32px; height: 32px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 200;
    transform: translate(-50%, -50%);
    transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
    display: block;
  }
  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 200;
    transform: translate(-50%, -50%);
    display: block;
  }
  .cursor.is-hot { width: 48px; height: 48px; background: var(--accent-wash); border-color: var(--accent-soft); }
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-dot { display: none !important; }
  body.has-cursor { cursor: auto; }
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body-stack);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.loader__mark .brand__mark { width: 58px; height: 40px; }
.loader__bar { margin-top: 20px; width: 180px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.loader__bar i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: load 1.1s var(--ease) infinite;
}
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.noscroll { overflow: hidden; }
.muted { color: var(--muted); }
.empty-note { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- Responsive ---------- */
/* About (<1024px): same idea, tuned for a narrow column — the animation
   bleeds to the section edges behind the whole copy block, the capability
   list is dropped, and the scrim leans heavier so the paragraphs stay
   readable over the brighter part of the wave. */
@media (max-width: 1023px) {
  .about__body { max-width: none; }
  .about__body h2 { max-width: 22ch; }
  .about__aside {
    inset: -16px calc(-1 * var(--gutter)) 0;
  }
  .about__media__video { object-position: 50% 68%; }
  .about__media::after {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 34%, transparent) 0%,
        color-mix(in srgb, var(--bg) 22%, transparent) 30%,
        color-mix(in srgb, var(--bg) 46%, transparent) 52%,
        color-mix(in srgb, var(--bg) 78%, transparent) 74%,
        var(--bg) 96%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--bg) 30%, transparent) 0%,
        color-mix(in srgb, var(--bg) 6%, transparent) 55%,
        transparent 100%);
  }
  .about__list { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .header__cta > .btn { display: none; }
  .burger { display: grid; }
  .header__inner { justify-content: space-between; gap: 12px; }
  .cta__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* Process → vertical timeline */
  .process { grid-template-columns: 1fr; gap: 0; }
  .process__step { padding: 0 0 26px 60px; }
  .process__step::before {
    top: 42px; left: 20px; right: auto; bottom: 6px;
    width: 1px; height: auto;
  }
}
@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  :root { --gutter: 18px; }
}