/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:          #000000;
  --bg-alt:      #0a0a0a;
  --surface:     #0d0d0d;
  --surface-2:   #141414;
  --ink:         #ffffff;
  --ink-soft:    rgba(255,255,255,.72);
  --ink-mute:    rgba(255,255,255,.46);
  --line:        rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);

  --accent:      #ff2340;
  --accent-dim:  #b3162c;
  --accent-soft: #ff6b7a;
  --ink-icon:    rgba(255,255,255,.82);

  --display:       "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --display-black: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "Segoe UI Mono", Consolas, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container-w: 1240px;
  --nav-h: 76px;
}

@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --mesh-y     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --angle      { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Rubber-band suppression only for fine pointers — touch keeps native
   pull-to-refresh and swipe navigation. */
@media (pointer: fine) {
  html { overscroll-behavior: none; }
}
/* Anchored targets clear the fixed nav when reached via native #hash links. */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
a, button, .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.06; letter-spacing: -0.01em; font-family: var(--display); }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--accent); color: #041014; }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container-w); margin-inline: auto; padding-inline: 1.25rem; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1.1rem; background: var(--accent); color: #041014;
  border-radius: 8px; font-weight: 600; transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}

.section { position: relative; isolation: isolate; padding-block: clamp(4rem, 9vw, 7.5rem); }

/* Circuit reveal — cursor-tracked PCB-trace texture, masked to a soft
   radius around the pointer, faded in only while hovering the section. */
.circuit-layer {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><g fill='none' stroke='%23ff2340' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 24H84V64H150V24H228'/><path d='M24 228V172H96V120H180V228'/><path d='M228 72H176V128H120V96'/><path d='M12 120H48V184H12'/><path d='M228 180H190V150'/><path d='M60 12V48H12'/><circle cx='84' cy='24' r='3.4' fill='%23ff2340'/><circle cx='150' cy='64' r='3.4' fill='%23ff2340'/><circle cx='96' cy='172' r='3.4' fill='%23ff2340'/><circle cx='180' cy='120' r='3.4' fill='%23ff2340'/><circle cx='176' cy='72' r='2.6' fill='none'/><circle cx='120' cy='96' r='2.6' fill='none'/><circle cx='48' cy='120' r='2.6' fill='none'/><circle cx='190' cy='150' r='2.6' fill='none'/><circle cx='60' cy='48' r='2.6' fill='none'/></g></svg>");
  background-size: 300px 300px;
  opacity: 0;
  -webkit-mask-image: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%), #000 0%, rgba(0,0,0,.4) 55%, transparent 78%);
  mask-image: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%), #000 0%, rgba(0,0,0,.4) 55%, transparent 78%);
  transition: opacity .6s ease;
}
.is-circuit-active > .circuit-layer { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .circuit-layer { display: none; }
}
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title {
  font-family: var(--display-black);
  font-size: clamp(2.3rem, 5.8vw, 4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
/* Short red rule instead of a typographic dash. */
.section-title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 1.1rem; background: var(--accent); }
.section-desc { margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; }

/* Body copy that sits directly over the world background (no card
   backdrop) gets a soft shadow so it stays legible while the scene
   behind it moves. */
.section-desc, .hero-sub, .why-item p, .process-step p, .contact-text {
  text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
}

/* Global ambient textures */
.world-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.fx-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Foreground content must stack above the fixed world canvas */
main, .footer { position: relative; z-index: 1; }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: rgba(238,243,246,0.06); pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: var(--accent);
  transform-origin: 0 0; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(255,35,64,.6);
}

/* =============================================================
   4. Cursor
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  display: none;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px; background: var(--accent); border-radius: 50%; }
.cursor-ring {
  width: 30px; height: 30px; margin: -15px; border: 1px solid var(--accent); border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), border-color .35s;
}
.cursor.is-interactive .cursor-ring { width: 52px; height: 52px; margin: -26px; border-color: var(--accent); }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .85rem 1.9rem; border-radius: 0;
  font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; justify-content: center;
  transition: transform .5s var(--ease-soft), background .3s, color .3s, border-color .3s;
}
/* Sharp corners, uppercase tracking: Ferrari-inspired CTA geometry. */
.btn-primary {
  background: var(--accent);
  color: #04070a;
}
.btn-primary:hover { background: var(--ink); color: #000; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: #000; }
.btn-ghost:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: .55rem 1.2rem; font-size: .74rem; }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner { display: inline-flex; align-items: center; gap: inherit; will-change: transform; transition: transform .8s var(--ease-soft); }

/* WhatsApp icon used inline in CTA buttons across the site */
.icon-whatsapp { width: 18px; height: 18px; flex-shrink: 0; }

/* =============================================================
   Card slider — used by "Lo que construyo" y "Proyectos". An
   overlapping-panels layout: every card shares the same box
   (position/width) and is placed purely with a per-card --tx/
   --scale/--op/--z custom property computed in initCardSliders
   (main.js) from its offset to the active index. Only transform,
   opacity, filter and z-index change — no layout thrash.
   ============================================================= */
.card-slider { position: relative; margin: 1.5rem auto 0; max-width: 1180px; padding: 0 1.1rem; }

.card-slider-viewport {
  --ratio: 0.66; --overlap: 48;
  position: relative; overflow: hidden; border-radius: 0;
  height: clamp(440px, 52vw, 600px);
}

.card-slider-track {
  position: absolute; inset: 0;
  cursor: grab; touch-action: pan-y;
}
.card-slider-track.is-dragging { cursor: grabbing; }

.slider-card {
  --tx: 0px; --scale: 1; --op: 1; --z: 1; --tint: none;
  position: absolute; top: 0; left: 50%; width: calc(var(--ratio) * 100%); height: 100%;
  overflow: hidden; isolation: isolate;
  border-radius: 0; background: #050505;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
  transform: translate(-50%, 0) translateX(var(--tx)) scale(var(--scale));
  opacity: var(--op);
  z-index: var(--z);
  filter: var(--tint);
  transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .6s ease, filter .6s ease, box-shadow .6s ease, border-color .6s ease;
  pointer-events: none;
  outline-offset: 4px;
}
.slider-card.is-reachable { pointer-events: auto; cursor: pointer; }
/* No-JS fallback: before initCardSliders() runs (or if JS is disabled),
   show the first card's content readably instead of nothing. */
.slider-card:first-child .slider-card-content,
.slider-card:first-child .slider-card-icon,
.slider-card:first-child .slider-card-category,
.slider-card:first-child .slider-card-expand,
.slider-card:first-child .slider-card-cta {
  opacity: 1; transform: none; pointer-events: auto;
}
.slider-card[data-slider-role="active"] {
  cursor: default;
  border-color: var(--line-strong);
  box-shadow: 0 45px 100px -25px rgba(0,0,0,.8), 0 0 70px -16px rgba(255,35,64,.3);
}

.slider-card-media { position: absolute; inset: 0; overflow: hidden; }
.slider-card-media video, .slider-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  filter: saturate(.5) brightness(.6);
  transition: transform 1s ease, filter .7s ease;
}
.slider-card[data-slider-role="active"] .slider-card-media video,
.slider-card[data-slider-role="active"] .slider-card-media img {
  transform: scale(1.045);
  filter: saturate(1) brightness(.85);
}

.slider-card-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.15) 100%),
    linear-gradient(100deg, rgba(0,0,0,.4), transparent 60%);
}

.slider-card-glow {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,53,74,.22), transparent 60%);
  transition: opacity .5s ease;
  mix-blend-mode: screen;
}
.slider-card[data-slider-role="active"]:hover .slider-card-glow { opacity: 1; }

.slider-card-num {
  position: absolute; top: 1.15rem; right: 1.25rem; z-index: 3;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--ink-mute); transition: color .4s;
}
.slider-card[data-slider-role="active"] .slider-card-num { color: var(--accent-soft); }

/* Peek button — the circular affordance shown only on the two
   partially-visible neighbour panels, anchored to whichever edge
   actually pokes out from behind the active card. */
.slider-card-peek-btn {
  position: absolute; top: 50%; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(5,5,5,.7); border: 1px solid var(--line-strong); color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-50%) scale(.8); pointer-events: none;
  transition: opacity .4s ease, transform .4s var(--ease-soft), border-color .3s, color .3s;
}
.slider-card-peek-btn svg { width: 16px; height: 16px; }
.slider-card[data-slider-role="prev"] .slider-card-peek-btn { right: 14px; }
.slider-card[data-slider-role="next"] .slider-card-peek-btn { left: 14px; transform: translateY(-50%) scale(.8) scaleX(-1); }
.slider-card[data-slider-role="prev"] .slider-card-peek-btn,
.slider-card[data-slider-role="next"] .slider-card-peek-btn { opacity: 1; }
.slider-card[data-slider-role="next"] .slider-card-peek-btn { transform: translateY(-50%) scale(1) scaleX(-1); }
.slider-card[data-slider-role="prev"] .slider-card-peek-btn { transform: translateY(-50%) scale(1); }
.slider-card.is-reachable:hover .slider-card-peek-btn { border-color: var(--accent); color: var(--accent); }

.slider-card-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.1rem 1.3rem;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease, padding .7s var(--ease-soft);
}
.slider-card[data-slider-role="active"] .slider-card-content {
  opacity: 1; transform: none; pointer-events: auto;
  padding: 2.1rem 2.2rem 2.4rem;
  transition-delay: .15s, .15s, 0s;
}

.slider-card-icon {
  width: 30px; height: 30px; margin-bottom: .9rem; color: var(--accent); flex-shrink: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.slider-card[data-slider-role="active"] .slider-card-icon { opacity: 1; transform: none; transition-delay: .2s; }
.slider-card-icon svg { width: 100%; height: 100%; }

.slider-card-category {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em; color: var(--accent-soft);
  margin-bottom: .5rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.slider-card[data-slider-role="active"] .slider-card-category { opacity: 1; transform: none; transition-delay: .22s; }

.slider-card-title {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.2;
}

.slider-card-expand {
  display: grid; gap: 1rem; margin-top: .85rem;
  max-width: 62ch;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.slider-card[data-slider-role="active"] .slider-card-expand {
  opacity: 1; transform: none; pointer-events: auto; transition-delay: .3s;
}

.slider-card-desc { color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }

.slider-card-facts { display: grid; gap: .7rem; }
.slider-card-facts dt { font-family: var(--mono); font-size: .72rem; color: var(--accent-soft); margin-bottom: .2rem; }
.slider-card-facts dd { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }

.slider-card-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.slider-card-tags li {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .3rem .8rem;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
}

.slider-card-cta {
  justify-self: start; margin-top: .2rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft), gap .3s var(--ease-soft), color .3s;
}
.slider-card-cta:hover { color: var(--accent-soft); gap: .75rem; }
.slider-card[data-slider-role="active"] .slider-card-cta { opacity: 1; transform: none; transition-delay: .4s; }

.slider-card:focus-visible { outline: 2px solid var(--accent); }

.card-slider-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: 1.4rem;
}
.card-slider-controls[hidden] { display: none; }

.card-slider-arrow {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--ink-soft);
  transition: border-color .3s, color .3s, transform .3s var(--ease-soft), background .3s;
}
.card-slider-arrow svg { width: 16px; height: 16px; }
.card-slider-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.card-slider-index {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .05em; color: var(--ink-soft);
  min-width: 4.5em; text-align: center;
}
.card-slider-index strong { color: var(--accent-soft); font-weight: 500; }

@media (max-width: 860px) {
  .card-slider-viewport { --ratio: 0.78; --overlap: 34; height: clamp(400px, 62vw, 560px); }
}

@media (max-width: 640px) {
  .card-slider { padding: 0 .6rem; }
  .card-slider-viewport { --ratio: 0.9; --overlap: 22; height: clamp(420px, 108vw, 560px); border-radius: 0; }
  .slider-card { border-radius: 0; }
  .slider-card-title { font-size: 1.15rem; }
  .slider-card[data-slider-role="active"] .slider-card-content { padding: 1.5rem 1.3rem 1.7rem; }
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-split] { opacity: 1; transform: none; }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  background: #000;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5,7,10,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
}
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.case-nav-back {
  margin-right: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .85rem; color: var(--ink-soft);
  transition: color .3s;
}
.case-nav-back:hover { color: var(--accent); }
.nav-links { display: none; align-items: center; gap: 1.9rem; }
.nav-link { position: relative; padding: .25rem 0; font-size: .92rem; color: var(--ink-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 38px; height: 30px; margin-left: .5rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft);
  transition: border-color .3s, color .3s;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-toggle::after { content: ""; position: absolute; inset: -7px -3px; } /* 44px touch target */

.nav-burger {
  display: grid; gap: 5px; width: 26px; margin-left: .5rem;
  padding: 14px 9px; box-sizing: content-box; /* 44px touch target */
}
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease-soft), opacity .35s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(5,7,10,.98);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.nav-mobile-link { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.nav-mobile-link:hover { color: var(--accent); }
.nav-mobile-cta { margin-top: .6rem; }

/* =============================================================
   6.5 Language gate (first-visit popup)
   ============================================================= */
.lang-gate {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.lang-gate[hidden] { display: none; }
.lang-gate.is-visible { opacity: 1; }
.lang-gate-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lang-gate-card {
  position: relative; z-index: 1;
  width: min(90vw, 420px);
  padding: 2.4rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  text-align: center;
  box-shadow: 0 40px 90px -30px rgba(255,35,64,.35);
  transform: translateY(16px) scale(.97);
  transition: transform .45s var(--ease-soft);
}
.lang-gate.is-visible .lang-gate-card { transform: translateY(0) scale(1); }
.lang-gate-kicker {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 1.2rem;
  border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #0a0505; font-family: var(--mono); font-size: .75rem; font-weight: 700;
}
.lang-gate-title { font-size: 1.5rem; margin-bottom: .7rem; }
.lang-gate-sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.8rem; }
.lang-gate-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
  overflow: clip;
  isolation: isolate;
}
.hero-video {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
}
.hero-video-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: saturate(1.15) contrast(1.05);
  transition: opacity .28s linear;
}
.hero-video-media.is-active { opacity: .9; }
.hero-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 10%, transparent 34%, var(--bg) 100%);
}
.hero-portal {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 78% 48%, rgba(255,35,64,var(--awake-glow, .22)), transparent 70%);
  mix-blend-mode: screen;
  transition: background .4s linear;
}
.hero-content {
  position: relative; z-index: 2; padding-block: clamp(2rem, 6vw, 3rem);
  max-width: 30rem; width: 100%;
  margin-left: auto; margin-right: clamp(1.25rem, 6vw, 5rem);
  text-align: left;
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.hero-content.is-visible { opacity: 1; transform: translateX(0); }
.hero-content.is-leaving {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
@media (min-width: 960px) {
  .hero-content { max-width: 50%; }
}
.hero-actions { justify-content: flex-start; }
.hero-capabilities { max-width: none; margin-inline: 0; text-align: left; }
.hero-title {
  font-family: var(--display-black);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  max-width: 14ch;
  display: flex; flex-direction: column; gap: .5rem;
}
.hero-role {
  font-family: var(--mono);
  font-size: clamp(.85rem, 1.6vw, 1rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-role::before { content: "// "; color: var(--ink-mute); }
.hero-sub { margin-top: 1.6rem; max-width: 56ch; color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.hero-actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-badge {
  width: 100%; margin-top: 1.75rem;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em; color: var(--ink-soft);
  background: rgba(0,0,0,.5);
  transition: border-color .3s, color .3s, background .3s;
}
.hero-badge:hover {
  border-color: rgba(34,197,94,.6); color: var(--ink); background: rgba(0,0,0,.7);
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,.8);
  animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-capabilities {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem;
}
.hero-capabilities li { display: flex; align-items: flex-start; gap: .65rem; }
.hero-capabilities svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); margin-top: .1rem; }
.hero-capabilities span { display: flex; flex-direction: column; font-weight: 600; font-size: .92rem; }
.hero-capabilities em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--ink-mute); }

.hero-scrollcue {
  position: relative; z-index: 2; margin: 0 auto 2.5rem; margin-top: auto;
  width: 22px; height: 36px; border: 1px solid var(--line-strong); border-radius: 20px;
}
.hero-scrollcue span {
  display: block; width: 4px; height: 8px; margin: 6px auto 0;
  border-radius: 4px; background: var(--accent);
  animation: scrollcue 1.8s var(--ease-soft) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(14px); opacity: 0; } }

@media (max-width: 719px) {
  .hero-content { text-align: center; max-width: none; margin-right: auto; padding-block: 1.25rem; }
  .hero-title { max-width: none; margin-inline: auto; align-items: center; }
  .hero-sub { max-width: 46ch; margin-inline: auto; }
  .hero-actions { justify-content: center; margin-top: 1.5rem; }
  .hero-capabilities { max-width: 26rem; margin-inline: auto; margin-top: 1.75rem; padding-top: 1.25rem; text-align: left; }
  .hero-scrollcue { margin-top: 1.5rem; }
  .hero-video-media { object-position: center 30%; }
  .hero-video::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 45%, var(--bg) 92%);
  }
}

/* =============================================================
   8. Projects top fade — blends the hero video's bottom edge into
   this section (it's now the first section after the hero).
   ============================================================= */
.projects::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: clamp(5rem, 16vw, 10rem); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}

/* =============================================================
   9.5 Why (differentiators) — editorial layout, deliberately not
   another card grid, to break the visual rhythm of Builds/Stack.
   ============================================================= */
.why { overflow: clip; }
.why .container {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.why .container::before {
  content: "";
  position: absolute; inset: -3rem; z-index: -1;
  background: rgba(0,0,0,.75);
  filter: blur(36px);
}
.why-layout { display: grid; gap: 2.5rem; }
.why-head { margin-bottom: 0; }
.why-head .section-title { font-size: clamp(1.7rem, 2.6vw, 2.15rem); max-width: 14ch; }
@media (min-width: 900px) {
  .why-layout { grid-template-columns: minmax(220px, 340px) 1fr; gap: 3.5rem; align-items: start; }
  .why-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.why-list { display: flex; flex-direction: column; }
.why-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  padding-block: 1.6rem; border-top: 1px solid var(--line);
}
.why-item:last-child { border-bottom: 1px solid var(--line); }
.why-item-icon {
  display: inline-flex; width: 38px; height: 38px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--ink-icon);
  transition: color .35s, border-color .35s;
}
.why-item-icon svg { width: 18px; height: 18px; }
.why-item:hover .why-item-icon { color: var(--accent); border-color: var(--accent); }
.why-item h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.why-item p { color: var(--ink-soft); font-size: .95rem; }

/* =============================================================
   9.6 Process (how I work) — horizontal timeline
   ============================================================= */
.process-track {
  position: relative;
  display: grid; gap: 2.4rem; grid-template-columns: 1fr;
  margin-top: 1rem;
}
@media (min-width: 860px) {
  .process-track { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
  .process-track::before {
    content: "";
    position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent);
  }
}
.process-step { position: relative; }
.process-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 1.2rem;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg);
  font-family: var(--mono); font-size: .85rem; color: var(--accent);
  position: relative; z-index: 1;
}
.process-step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.process-step p { color: var(--ink-soft); font-size: .93rem; }

/* =============================================================
   11. Projects
   ============================================================= */
.project-category { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.project-facts { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.project-facts dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .2rem; }
.project-facts dd { color: var(--ink-soft); font-size: .93rem; }
.project-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); }
.project-link span { transition: transform .35s var(--ease-out); }
.project-link:hover { color: var(--accent); }
.project-link:hover span { transform: translateX(4px); }


/* =============================================================
   12.5 CTA banner (mid-page)
   ============================================================= */
.cta-banner {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-banner-inner { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta-banner h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.cta-banner p { color: var(--ink-soft); font-size: 1rem; }
.cta-banner .btn { margin-top: .5rem; }

/* =============================================================
   13. Contact
   ============================================================= */
.contact { text-align: center; overflow: clip; }
.contact-halo {
  position: absolute; inset: -35% -10% -10% -10%; z-index: -1;
  background: radial-gradient(42% 55% at 50% 20%, rgba(5,5,5,.85), transparent 72%),
              radial-gradient(45% 40% at 50% 55%, rgba(255,35,64,.08), transparent 70%),
              conic-gradient(from var(--mesh-angle), rgba(255,107,122,.06), rgba(179,22,44,.025), rgba(255,35,64,.06), rgba(255,107,122,.06));
  filter: blur(90px) saturate(100%);
  animation: meshShift 24s linear infinite;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg; }
  100% { --mesh-angle: 360deg; }
}
.contact-inner { max-width: 720px; margin-inline: auto; }
.contact-title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1.3rem; }
.contact-text { color: var(--ink-soft); font-size: 1.1rem; max-width: 52ch; margin-inline: auto; }
.contact-actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.contact-actions .btn-ghost {
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: none;
}
.contact-actions .btn-ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0505;
  box-shadow: 0 18px 40px -14px rgba(255,35,64,.5);
}

/* =============================================================
   15. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line); padding-block: 2.6rem; }
.footer-inner { display: flex; flex-direction: column; gap: 1.2rem; }
.footer-brand { font-family: var(--display); font-weight: 600; }
.footer-tagline { color: var(--ink-mute); font-size: .88rem; margin-top: .3rem; }
.footer-meta { color: var(--ink-mute); font-size: .82rem; display: flex; flex-direction: column; gap: .3rem; }
.footer-credits a { color: var(--accent); }

@media (min-width: 720px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .footer-meta { align-items: flex-end; text-align: right; }
}

/* =============================================================
   15.5 Case study page (proyectos.html)
   ============================================================= */
.case-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .82rem; color: var(--ink-soft);
  padding-top: calc(var(--nav-h) + 2rem);
}
.case-back:hover { color: var(--accent); }

.case-intro { padding-block: 1.5rem clamp(3rem, 7vw, 5rem); }
.case-intro .section-title { margin-top: .3rem; }
.case-intro-text { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; }

.case {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.case:first-of-type { border-top: 0; }

.case-index {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-mute);
  margin-bottom: 1rem;
}

.case-body { max-width: 780px; }
.case-category {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
.case-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
.case-facts { display: grid; gap: 1.4rem; margin-bottom: 2.2rem; }
@media (min-width: 720px) { .case-facts { grid-template-columns: repeat(3, 1fr); } }
.case-facts dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .4rem; }
.case-facts dd { color: var(--ink-soft); font-size: .95rem; }

.case-reel-grid { display: grid; gap: 1.4rem; margin: 2.4rem 0 2.2rem; }
.case-reel {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--surface);
  transition: border-color .3s;
}
.case-reel:hover { border-color: var(--line-strong); }
.case-reel-media { position: relative; aspect-ratio: 16 / 9; background: #000; flex-shrink: 0; }
.case-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case-reel-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.case-reel-meta {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); margin-bottom: .5rem;
}
.case-reel-title { font-size: 1.08rem; margin-bottom: .5rem; }
.case-reel-desc { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }

@media (min-width: 720px) {
  .case-reel-grid { grid-template-columns: repeat(2, 1fr); }
  .case-reel-featured { grid-column: 1 / -1; flex-direction: row; }
  .case-reel-featured .case-reel-media { width: 56%; aspect-ratio: auto; }
  .case-reel-featured .case-reel-body { width: 44%; }
  .case-reel-featured .case-reel-title { font-size: 1.35rem; }
}

.case-links { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =============================================================
   15.6 Floating WhatsApp CTA — persistent contact affordance,
   hidden over the hero, revealed once the visitor starts scrolling.
   ============================================================= */
.whatsapp-float {
  position: fixed; right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right)); bottom: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-bottom)); z-index: 250;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft), border-color .3s, background .3s, color .3s;
}
.whatsapp-float svg { width: 24px; height: 24px; }
.whatsapp-float.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.whatsapp-float:hover { border-color: var(--accent); background: var(--accent); color: #04070a; }

/* =============================================================
   16. Responsive — nav breakpoint
   ============================================================= */
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

/* =============================================================
   17. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scrollcue span { animation: none; }
  .contact-halo { animation: none; }
  .hero-badge-dot { animation: none; }
  .hero-content { transition: none; }
  .whatsapp-float { transition: opacity .3s; transform: none; }
  .slider-card, .slider-card-media video, .slider-card-media img { transition: none; }
  .slider-card-glow { display: none; }
  .fx-grain { display: none; }
  .hero-video-media { transition: none; }
  /* Hero videos and the card-slider autoplay are also gated in main.js. */
}

/* =============================================================
   18. Sales sections: problem, plans, FAQ, diagnosis
   Layout and CTA geometry borrowed from the Ferrari DESIGN.md
   (sharp corners, hairlines, scarce red), kept inside the existing
   black + red identity. One radius rule: 0 everywhere.
   ============================================================= */

/* ---- Problem ---- */
.problem .section-head { max-width: 780px; }
.problem-list { display: flex; flex-direction: column; max-width: 980px; }
.problem-row {
  display: grid; gap: .6rem 3rem; padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.problem-row:last-child { border-bottom: 1px solid var(--line); }
.problem-row h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.15; }
.problem-row p { color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }
@media (min-width: 860px) {
  .problem-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.problem-close {
  margin-top: 2.5rem; max-width: 40ch;
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.3;
  color: var(--ink);
}

/* ---- Plans ---- */
.plans .section-head { max-width: 680px; }
.plans-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .plans-grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
}
.plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: rgba(13,13,13,.82); border: 1px solid var(--line);
  border-radius: 0;
}
.plan-main { border-top: 3px solid var(--accent); background: rgba(20,20,20,.88); }
.plan h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; }
.plan-lead { color: var(--ink-soft); max-width: 46ch; }
.plan-list { width: 100%; margin-block: .4rem 1rem; }
.plan-list li { padding-block: .8rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .96rem; }
.plan .btn { margin-top: auto; }

/* ---- FAQ ---- */
.faq-inner { max-width: 900px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px; padding-block: 1rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.6rem; line-height: 1; color: var(--accent);
  transition: transform .3s var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--accent-soft); }
.faq-list details p { padding-bottom: 1.4rem; max-width: 62ch; color: var(--ink-soft); }

/* ---- Diagnosis: full-width red band (Ferrari "livery band") ---- */
.diag { background: var(--accent-dim); color: #fff; }
.diag-inner { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .diag-inner { grid-template-columns: 1fr minmax(0, 520px); gap: 5rem; align-items: start; }
}
.diag-title {
  font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600;
  line-height: 1.02; text-transform: uppercase; letter-spacing: -0.01em; max-width: 14ch;
}
.diag-text { margin-top: 1.4rem; max-width: 40ch; font-size: 1.1rem; color: #fff; text-shadow: none; }
.diag-alt { margin-top: 2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .95rem; }
.diag-alt a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.diag-alt a:hover { text-decoration-thickness: 2px; }

.diag-form {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.2rem); background: #0a0a0a; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0;
}
.diag-form .field { display: flex; flex-direction: column; gap: .5rem; border: 0; padding: 0; min-width: 0; }
.diag-form label, .diag-form legend {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.diag-form input[type="text"], .diag-form select {
  width: 100%; min-height: 48px; padding: .8rem 1rem;
  background: #000; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0;
  font: inherit; font-size: 1rem;
}
.diag-form select { color-scheme: dark; }
.diag-form input[type="text"]:focus-visible, .diag-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.diag-form .choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: .5rem; }
.diag-form .choices label {
  position: relative; display: block; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; color: var(--ink);
}
.diag-form .choices input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.diag-form .choices span {
  display: flex; align-items: center; min-height: 48px; padding: .7rem 1rem;
  border: 1px solid var(--line-strong); transition: border-color .25s, background .25s;
}
.diag-form .choices input:checked + span { border-color: var(--accent); background: rgba(255,35,64,.14); }
.diag-form .choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.diag-error { color: #ff8a97; font-size: .92rem; }
.diag-error[hidden] { display: none; }
.diag-submit { width: 100%; }
.diag-note { font-size: .82rem; color: var(--ink-mute); }

@media (prefers-reduced-motion: reduce) {
  .faq-list summary::after { transition: none; }
}

/* =============================================================
   19. Case page additions: spec cells, closing CTA, light button
   ============================================================= */
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #000; color: #fff; }
.btn-light:active { transform: translateY(1px); }

.case-reel { border-radius: 0; }
.case-body { max-width: 900px; }

/* Spec cells: big numbers, hairline above (Ferrari "spec-cell"). */
.case-specs {
  display: grid; gap: 1.5rem 2rem; margin: 0 0 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.case-specs li { padding-top: 1.1rem; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: .6rem; }
.case-specs strong {
  font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case-specs span { color: var(--ink-soft); font-size: .92rem; max-width: 24ch; }

.case-cta { background: var(--accent-dim); color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); }
.case-cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.case-cta-title {
  font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 600;
  line-height: 1.02; text-transform: uppercase; letter-spacing: -0.01em; max-width: 16ch;
}
.case-cta-text { font-size: 1.1rem; max-width: 40ch; text-shadow: none; }

/* Touch targets: at least 44px tall for text links */
.slider-card-cta, .diag-alt a, .footer-credits a { display: inline-flex; align-items: center; min-height: 44px; }

/* =============================================================
   20. Light band (Plans + FAQ): one deliberate white block before
   the red close, like Ferrari's white editorial bands for pricing.
   Only this block inverts; every other section stays dark.
   ============================================================= */
.section-light {
  background: #fff; color: #181818;
  --line: #d2d2d2; --line-strong: #181818; --ink: #181818; --ink-soft: #4a4a4a;
}
.section-light .section-title { color: #181818; }
.section-light .section-desc { color: #4a4a4a; text-shadow: none; }

.section-light .plan { background: #fff; border-color: #d2d2d2; }
.section-light .plan-main { background: #f7f7f7; border-top-color: var(--accent); }
.section-light .plan-lead { color: #4a4a4a; }
.section-light .plan-list li { color: #181818; border-top-color: #d2d2d2; }
.section-light .btn-ghost { color: #181818; border-color: #181818; }
.section-light .btn-ghost:hover { background: #181818; color: #fff; border-color: #181818; }

.section-light .faq-list details { border-color: #d2d2d2; }
.section-light .faq-list summary { color: #181818; }
.section-light .faq-list summary:hover { color: var(--accent-dim); }
.section-light .faq-list details p { color: #4a4a4a; text-shadow: none; }
.section-light .faq-list summary::after { color: var(--accent-dim); }
.section-light .faq-list summary:focus-visible { outline-color: #181818; }

/* =============================================================
   21. Featured case (home): one case, shown whole.
   ============================================================= */
.case-feature { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) {
  .case-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; }
}
.case-feature-media {
  display: block; order: -1; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line-strong); background: #e9e9ee;
}
@media (min-width: 960px) { .case-feature-media { order: 2; } }
.case-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.case-feature-media:hover img { transform: scale(1.03); }
.case-feature-category {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem;
}
.case-feature-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.1; margin-bottom: 1.6rem; }
.case-feature-facts { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.case-feature-facts dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .3rem; }
.case-feature-facts dd { color: var(--ink-soft); font-size: .95rem; max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .case-feature-media img { transition: none; } }

/* =============================================================
   22. Dravok Studio wordmark (version B): the red V reads as a
   voice wave and a fang. Dra (dragon) + vok (vox, voice).
   ============================================================= */
.brand-mark {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; margin-right: auto; line-height: 1; color: var(--ink);
}
.brand-mark b { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; }
.brand-mark b span { color: var(--accent); }
.brand-mark i { font-style: normal; font-family: var(--mono); font-size: .5rem; letter-spacing: .55em; color: var(--ink-soft); margin-top: .3rem; }
.brand-mark:hover b { color: var(--ink); }
/* On the case page the back link sits right after the mark. */
.brand-mark:has(+ .case-nav-back) { margin-right: 1.5rem; }
@media (max-width: 600px) {
  .brand-mark + .case-nav-back span:last-child { display: none; }
}
.brand-mark-sm { min-height: 0; margin-right: 0; }
.brand-mark-sm b { font-size: 1.15rem; }
.footer-sign { color: var(--ink-soft); font-size: .9rem; margin-top: .5rem; }
.lang-gate-kicker { letter-spacing: .3em; }

/* =============================================================
   23. Hero mark: the wordmark's red V emitting voice waves
   (dra + vok, the dragon's voice). Placeholder until the dragon
   video exists; sits where the old hero video was.
   ============================================================= */
.hero-mark {
  position: absolute; z-index: -1; pointer-events: none;
  left: clamp(1rem, 6vw, 6rem); top: 50%;
  width: min(34vw, 440px); aspect-ratio: 1;
  transform: translateY(-46%);
}
.hero-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mark path {
  stroke: var(--accent); stroke-width: 9; stroke-linejoin: miter;
  filter: drop-shadow(0 0 18px rgba(255,35,64,.55));
}
/* Waves start at the V's vertex (100,170 in the 200 viewBox) */
.hero-wave {
  position: absolute; left: 50%; top: 85%;
  width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%;
  border: 2px solid rgba(255,35,64,.55); border-radius: 50%;
  opacity: 0; transform: scale(.4);
  animation: heroWave 3.6s var(--ease-out) infinite;
}
.hero-wave:nth-child(2) { animation-delay: 1.2s; }
.hero-wave:nth-child(3) { animation-delay: 2.4s; }
@keyframes heroWave {
  0%   { opacity: 0; transform: scale(.4); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: scale(4.2); }
}
@media (max-width: 719px) {
  .hero-mark { left: 50%; top: 18%; width: 62vw; transform: translate(-50%, 0); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wave { animation: none; opacity: .25; transform: scale(1.6); }
  .hero-wave:nth-child(2) { transform: scale(2.6); opacity: .15; }
  .hero-wave:nth-child(3) { transform: scale(3.6); opacity: .08; }
}

/* Hero stage: solid black, the pulsing V is the only light. */
.hero { background: #000; }
.hero-portal { display: none; }

/* =============================================================
   24. White hero: the pulsing V on white, with red pixels that
   form around the pointer behind it (initHeroPixels in main.js).
   ============================================================= */
.hero { background: #fff; color: #181818; }
.hero-pixels { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero .hero-title { color: #181818; }
.hero .kicker { color: var(--accent-dim); }
.hero .hero-sub { color: #4a4a4a; text-shadow: none; }
.hero .btn-ghost { color: #181818; border-color: #181818; }
.hero .btn-ghost:hover { background: #181818; color: #fff; border-color: #181818; }
.hero-mark path { filter: drop-shadow(0 0 14px rgba(255,35,64,.35)); }

/* Nav turns light over white sections (set by initNav), dark over black ones. */
.nav.is-on-light {
  background: rgba(255,255,255,.92); border-bottom-color: #e6e6e6;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  --ink: #181818; --ink-soft: #4a4a4a; --line-strong: #181818;
}

/* Hero layout with the dragon: copy on the left, dragon on the right facing it. */
@media (min-width: 720px) {
  .hero-content { margin-left: clamp(1.25rem, 6vw, 5rem); margin-right: auto; }
}
@media (min-width: 960px) {
  .hero-content { max-width: 46%; }
}

/* =============================================================
   25. Manifesto (problem): lines light up as they cross the
   viewport (CSS scroll-driven animation). Without support, or
   with reduced motion, every line is simply lit.
   ============================================================= */
.manifesto .container { max-width: 1100px; }
.manifesto-text { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(2rem, 6vw, 4.6rem); }
.m-line { display: block; color: #fff; margin-bottom: .2em; }
.manifesto-promise {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(2rem, 6vw, 4.6rem); color: var(--accent); margin: .3em 0 2.4rem;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-line { animation: mLit linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .manifesto-promise { animation: mRed linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
  }
}
/* Start values keep >= 3:1 contrast (large text) even before lighting up. */
@keyframes mLit { from { color: #858585; } to { color: #fff; } }
@keyframes mRed { from { color: #c41a33; } to { color: var(--accent); } }

/* =============================================================
   26. Plans as a path: launch -> momentum, one CTA.
   ============================================================= */
.plan-path { display: grid; gap: 1rem; margin-top: .5rem; list-style: none; padding: 0; }
@media (min-width: 860px) { .plan-path { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.plan-step { position: relative; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid #d2d2d2; background: #fff; }
.plan-step-main { border-top: 3px solid var(--accent); background: #f7f7f7; }
.plan-step-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #5c5c5c; }
.plan-step h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; margin: .5rem 0 .7rem; color: #181818; }
.plan-step p:last-child { color: #4a4a4a; max-width: 44ch; }
@media (min-width: 860px) {
  .plan-step-main::before {
    content: "→"; position: absolute; left: -2.6rem; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 1.6rem;
  }
}
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.2rem; }
.plan-note { color: #4a4a4a; font-size: .95rem; }

/* =============================================================
   27. Footer legal links
   ============================================================= */
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .88rem; }
.footer-legal a, .footer-legal button {
  color: var(--ink-soft); min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: underline; text-underline-offset: 3px; font-size: inherit;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--ink); }
.footer-legal [aria-current="page"] { color: var(--ink); text-decoration-color: var(--accent); }

/* =============================================================
   28. Diagnosis form: required note, inline errors, honeypot, status
   ============================================================= */
.diag-req { font-size: .85rem; color: var(--ink-soft); }
.field-error { color: #ff8a97; font-size: .88rem; }
.field-error[hidden] { display: none; }
.diag-form [aria-invalid="true"] { border-color: #ff8a97; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.diag-status:empty { display: none; }
.diag-status { color: #fff; font-size: .95rem; padding: .8rem 1rem; border-left: 3px solid var(--accent); background: rgba(255,255,255,.06); }
.diag-note a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   29. Cookie banner: non-modal, equal-weight choices
   ============================================================= */
.cookie-banner {
  position: fixed; z-index: 400; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: 640px; margin-inline: auto;
  display: grid; gap: 1rem; padding: 1.2rem 1.3rem;
  background: #0a0a0a; color: #fff; border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.cookie-text { font-size: .92rem; color: rgba(255,255,255,.85); }
.cookie-text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-actions .btn { flex: 1 1 140px; color: #fff; border-color: rgba(255,255,255,.6); }
.cookie-actions .btn:hover { background: #fff; color: #000; }

/* =============================================================
   30. Legal pages and 404
   ============================================================= */
.legal-body { background: #fff; color: #181818; --ink: #181818; --ink-soft: #4a4a4a; --line: #e2e2e2; --line-strong: #181818; }
.legal-body .skip-link { color: #fff; }
.legal-nav { border-bottom: 1px solid #e2e2e2; }
.legal-nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legal-back { font-family: var(--mono); font-size: .85rem; color: #4a4a4a; min-height: 44px; display: inline-flex; align-items: center; }
.legal-back:hover { color: var(--accent-dim); }
.legal { max-width: 760px; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; }
.legal h2 { font-size: 1.25rem; margin: 2.4rem 0 .8rem; scroll-margin-top: 1rem; }
.legal p, .legal li { color: #333; line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .5rem; margin: .6rem 0; }
.legal a, .legal-link-btn { color: var(--accent-dim); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.legal-updated { font-family: var(--mono); font-size: .8rem; color: #5c5c5c !important; margin-top: .6rem; }
.legal-note { margin-top: 1.4rem; padding: 1rem 1.2rem; background: #f7f7f7; border-left: 3px solid var(--accent); }
.legal-table-wrap { overflow-x: auto; margin: 1rem 0; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid #e2e2e2; vertical-align: top; }
.legal-table th { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #5c5c5c; }
.legal-body .footer { border-top: 1px solid #e2e2e2; }
.legal-body .footer-inner { align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.notfound { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; padding-block: 4rem; }
.notfound-code { font-family: var(--display); font-weight: 700; font-size: clamp(6rem, 22vw, 14rem); line-height: .9; color: var(--accent); }
.notfound h1 { font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; }
.notfound p { color: #4a4a4a; max-width: 46ch; }

/* =============================================================
   31. Hero reel: the studio's own clips in a framed panel
   (placeholder until the dragon video). Mobile: below the copy.
   ============================================================= */
.hero-reel { position: relative; z-index: 1; margin: 2.2rem 1.25rem 0; }
@media (min-width: 960px) {
  .hero-reel {
    position: absolute; margin: 0; right: clamp(1.25rem, 5vw, 4.5rem); top: 50%;
    width: min(44vw, 680px); transform: translateY(-44%);
  }
}
.hero-reel::before {
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; z-index: -1;
  border: 1px solid #e2e2e2;
}
.hero-reel-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; border-top: 3px solid var(--accent); }
.hero-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hero-reel-video.is-active { opacity: 1; }
.hero-reel-toggle {
  position: absolute; right: .75rem; bottom: .75rem; width: 44px; height: 44px;
  display: grid; place-items: center; color: #fff;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.45);
  transition: background .25s;
}
.hero-reel-toggle:hover { background: #000; }
.hero-reel-toggle svg { width: 18px; height: 18px; }
.hero-reel .icon-play { display: none; }
.hero-reel.is-paused .icon-play { display: block; }
.hero-reel.is-paused .icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-reel-video { transition: none; } }

/* =============================================================
   32. Why + Process on white (editorial block before plans)
   ============================================================= */
.section-light .kicker { color: var(--accent-dim); }
.section-light.why .container::before { display: none; }
.section-light .why-item p, .section-light .process-step p { color: #4a4a4a; text-shadow: none; }
.section-light .why-item h3, .section-light .process-step h3 { color: #181818; }
.section-light .why-item-icon { color: #181818; border-color: #cfcfcf; }
.section-light .why-item:hover .why-item-icon { color: var(--accent-dim); border-color: var(--accent-dim); }
.section-light .process-step-num { background: #fff; border-color: #cfcfcf; color: var(--accent-dim); }
.section-light .process-track::before { background: linear-gradient(90deg, transparent, #cfcfcf 8%, #cfcfcf 92%, transparent); }

/* =============================================================
   33. Light theme for the home page (body.theme-light): every
   content section on white. The animated world background stays,
   inverted to read as faint red lines on white, so the sections
   keep their ambient motion.
   ============================================================= */
.theme-light { background: #fff; }
.theme-light .world-bg { filter: invert(1) hue-rotate(180deg); }
.theme-light .section-light { background: transparent; }
.theme-light .footer { background: #050505; }
.theme-light .section-desc, .theme-light .why-item p, .theme-light .process-step p { text-shadow: none; }

/* Manifesto on white: same scroll-driven lighting, dark ink instead of white. */
.section-light .m-line { color: #181818; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-light .m-line { animation-name: mLitLight; }
    .section-light .manifesto-promise { animation-name: mRedLight; }
  }
}
/* Start values keep >= 3:1 on white (large text) before lighting up. */
@keyframes mLitLight { from { color: #8a8a8a; } to { color: #181818; } }
@keyframes mRedLight { from { color: #e0596c; } to { color: var(--accent); } }

/* Solutions slider on white: cards stay dark media panels with white text. */
.section-light .slider-card {
  --ink: #fff; --ink-soft: rgba(255,255,255,.75); --ink-mute: rgba(255,255,255,.5);
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.3);
  color: #fff;
}
.section-light .card-slider-viewport, .section-light .slider-card { box-shadow: 0 28px 60px -30px rgba(0,0,0,.35); }

/* Case feature on white: small red labels use the darker red for contrast. */
.section-light .case-feature-category, .section-light .case-feature-facts dt { color: var(--accent-dim); }
.section-light .case-feature-facts dd { color: #4a4a4a; }

/* =============================================================
   34. Cursor contrast: white over red, hidden over form fields
   (the native caret shows there instead).
   ============================================================= */
.has-cursor input, .has-cursor textarea { cursor: text; }
.has-cursor select, .has-cursor label { cursor: pointer; }
.cursor.on-red .cursor-dot { background: #fff; }
.cursor.on-red .cursor-ring { border-color: #fff; }
.cursor.on-field { opacity: 0; }

/* =============================================================
   35. FAQ: two columns, grouped questions, fuller answers
   ============================================================= */
.faq-layout { display: grid; gap: 2.5rem; max-width: var(--container-w); }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr); gap: 5rem; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.faq-head .section-head, .faq-head { margin-bottom: 0; }
.faq-head .section-desc { color: #4a4a4a; }
.faq-contact { margin-top: 1.6rem; font-size: .95rem; color: #4a4a4a; }
.faq-contact a { color: var(--accent-dim); text-decoration: underline; text-underline-offset: 3px; }
.faq-groups { display: grid; gap: 2.8rem; }
.faq-group-title {
  font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dim); padding-bottom: .9rem; border-bottom: 2px solid #181818;
}
.faq-groups details { border-bottom: 1px solid #e2e2e2; }
.faq-groups summary {
  display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 1.5rem;
  min-height: 72px; padding: 1.1rem 0; cursor: pointer; list-style: none; color: #181818;
  font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 500; line-height: 1.3;
}
.faq-groups summary::-webkit-details-marker { display: none; }
.faq-groups summary::after {
  content: "+"; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid #cfcfcf; color: #181818; font-family: var(--sans); font-size: 1.3rem; font-weight: 300;
  transition: transform .3s var(--ease-out), background .25s, color .25s, border-color .25s;
}
.faq-groups summary:hover::after { border-color: #181818; }
.faq-groups details[open] summary { color: var(--accent-dim); }
.faq-groups details[open] summary::after { content: "\2212"; background: #181818; color: #fff; border-color: #181818; }
.faq-groups summary:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 4px; }
.faq-answer { padding: 0 0 1.6rem 1.2rem; border-left: 3px solid var(--accent); margin-bottom: 1.4rem; }
.faq-answer p { color: #333; font-size: 1rem; line-height: 1.75; max-width: 64ch; }
@media (prefers-reduced-motion: reduce) { .faq-groups summary::after { transition: none; } }