/* =============================================================
   XONO — Cybersecurity Consulting
   Inspired by DotDNA: dark green, particle motion, glass UI
   ============================================================= */

:root {
  --bg: #050907;
  --bg-2: #0a120e;
  --ink: #e9efe8;
  --ink-dim: #98a89c;
  --ink-faint: #5a6b5f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: #5BC401;
  --accent-2: #8CFF3F;
  --accent-glow: rgba(91, 196, 1, 0.45);
  --accent-soft: rgba(91, 196, 1, 0.12);

  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.09);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  --font-display: 'PP Neue Montreal', 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* DO NOT add `scroll-behavior: smooth` here. Scrolling MUST stay native. */
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  cursor: none;
}
@media (hover: none), (pointer: coarse) { body { cursor: auto; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

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

/* ---------- background ---------- */
.bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bg-grain {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}
.bg-glow {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(91, 196, 1, 0.12), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(91, 196, 1, 0.08), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(91, 196, 1, 0.1), transparent 50%);
}

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner {
  width: min(560px, 80vw);
  display: flex; flex-direction: column; gap: 24px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.preloader__logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink);
}
.preloader__bar {
  position: relative; height: 1px; background: var(--line);
  overflow: hidden;
}
.preloader__progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 0.3s ease-out;
}
.preloader__meta { display: flex; justify-content: space-between; }
.dots::after { content: '...'; animation: dots 1.2s infinite steps(4); }
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ---------- custom cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 999;
  mix-blend-mode: difference;
  transition: opacity 0.2s;
}
.cursor__dot {
  position: absolute; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease-out), background 0.2s;
}
.cursor__ring {
  position: absolute;
  width: 36px; height: 36px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), width 0.3s var(--ease-out), height 0.3s var(--ease-out), opacity 0.3s;
  opacity: 0.6;
}
.cursor.is-hover .cursor__ring {
  width: 64px; height: 64px; opacity: 1;
  background: rgba(91, 196, 1, 0.08);
}
.cursor.is-hover .cursor__dot { transform: translate(-50%, -50%) scale(0); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: clamp(16px, 2.4vw, 28px) var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: backdrop-filter 0.3s, background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(5, 9, 7, 0.6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line);
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.14em; font-size: 16px; color: var(--ink);
}
.logo-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 30%, var(--accent), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--accent-2), transparent 50%),
    #0a160b;
  border: 1px solid rgba(91, 196, 1, 0.4);
  box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px rgba(91, 196, 1, 0.4);
  position: relative;
}
.logo-mark::before, .logo-mark::after {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(91, 196, 1, 0.5);
  border-radius: 3px;
}
.logo-mark::after {
  inset: 8px;
  background: var(--accent);
  border: none; border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-glow);
}

.nav { flex: 1; display: flex; justify-content: center; }
.nav ul {
  display: flex; gap: 6px; padding: 6px 8px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.nav a {
  display: inline-block;
  padding: 8px 16px; font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
  position: relative;
}
.nav a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.nav a.is-active { color: var(--ink); background: rgba(91, 196, 1, 0.08); }
.nav a.is-active::before {
  content: ''; position: absolute; left: 12px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateY(-50%);
  box-shadow: 0 0 6px var(--accent-glow);
}
.nav a.is-active { padding-left: 24px; }

@media (max-width: 900px) {
  .nav { display: none; }
}

/* ---------- buttons ----------
   Dark transparent pill · white label · bright-green circular icon ·
   animated hairline border that traces the pill perimeter.

   Technique: a conic-gradient layer sits behind the pill and is rotated
   by `transform: rotate()` (GPU-composited, runs at 60fps). The pill
   itself overlays the layer except along a 1px rim, so only the rim
   shows the spinning gradient.
*/
@keyframes btn-border-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.btn {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(8, 14, 10, 0.55);
  border: 0;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  isolation: isolate;
  white-space: nowrap;
  overflow: hidden;        /* clip the spinning layer to the pill */
  cursor: pointer;
  transition:
    background 0.3s,
    box-shadow 0.4s,
    color 0.3s;
}

/* Spinning gradient layer — much larger than the pill so the rotation
   reaches every part of the rim. Clipped by .btn's `overflow: hidden`. */
.btn::before {
  content: '';
  position: absolute;
  /* anchor at centre so rotate() spins around the pill's middle */
  top: 50%;
  left: 50%;
  /* The square must extend to the pill's corners. 250% guarantees that
     for any aspect ratio we use. */
  width: 250%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(91, 196, 1, 0)     0deg,
    rgba(91, 196, 1, 0)     140deg,
    rgba(91, 196, 1, 0.55)  200deg,
    rgba(91, 196, 1, 1)     260deg,
    rgba(220, 255, 140, 1)  280deg,
    rgba(91, 196, 1, 1)     300deg,
    rgba(91, 196, 1, 0.55)  340deg,
    rgba(91, 196, 1, 0)     360deg
  );
  animation: btn-border-spin 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Pill body covers the spinning layer except for a 1px rim. */
.btn::after {
  content: '';
  position: absolute;
  inset: 1px;                              /* leaves a 1px ring exposed */
  border-radius: inherit;
  background: rgba(8, 14, 10, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  /* faint static green tint so the pill never looks naked between
     the bright arc passes */
  box-shadow: inset 0 0 0 1px rgba(91, 196, 1, 0.18);
  pointer-events: none;
  z-index: 1;
}

.btn:hover {
  background: rgba(8, 14, 10, 0.7);
  box-shadow: 0 14px 40px rgba(91, 196, 1, 0.18);
}

.btn > span:not(.btn__icon) { position: relative; z-index: 2; }

/* Circular bright-green icon disc */
.btn__icon {
  position: relative;
  z-index: 2;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  background: var(--accent);
  color: #051104;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 14px rgba(91, 196, 1, 0.55);
  transition: transform 0.45s var(--ease-out), box-shadow 0.4s;
}
.btn:hover .btn__icon {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 22px rgba(91, 196, 1, 0.85);
}
.btn__icon svg {
  stroke: #ffffff;
  stroke-width: 2.4;
}
/* Arrow inside the icon disc — white by default */
.btn__arrow { color: #ffffff; }

/* ---------- variants ---------- */

/* PILL — dark glass + animated spinning border (header "Contact us") */
.btn--pill { padding: 6px 6px 6px 22px; }

/* GLASS — WHITE pill, dark label, green icon, dotted arrow.
   Matches the reference screenshot. No animated rim. */
.btn--glass {
  background: #f4f6f0;
  color: #061206;
  overflow: visible;                        /* no gradient layer to clip */
  border: 1px solid rgba(91, 196, 1, 0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 12px 32px rgba(0,0,0,0.18),
    0 0 0 1px rgba(91, 196, 1, 0.10);
}
.btn--glass::before { display: none; }
.btn--glass::after  { display: none; }
.btn--glass:hover {
  background: #ffffff;
  border-color: rgba(91, 196, 1, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 18px 50px rgba(91, 196, 1, 0.28),
    0 0 0 1px rgba(91, 196, 1, 0.30);
}

/* CTA — same white treatment, larger pill (Contact section + form submit) */
.btn--cta {
  background: #f4f6f0;
  color: #061206;
  overflow: visible;
  padding: 8px 8px 8px 28px;
  font-size: 15px;
  border: 1px solid rgba(91, 196, 1, 0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 40px rgba(0,0,0,0.2),
    0 0 0 1px rgba(91, 196, 1, 0.10);
}
.btn--cta::before { display: none; }
.btn--cta::after  { display: none; }
.btn--cta:hover {
  background: #ffffff;
  border-color: rgba(91, 196, 1, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 20px 60px rgba(91, 196, 1, 0.32),
    0 0 0 1px rgba(91, 196, 1, 0.35);
}
.btn--cta .btn__icon { width: 42px; height: 42px; flex: 0 0 42px; }

/* GHOST — no animated rim, no icon disc (secondary "Explore services") */
.btn--ghost {
  background: transparent;
  color: var(--ink-dim);
  padding: 12px 22px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.btn--ghost::before { display: none; }
.btn--ghost::after  { display: none; }
.btn--ghost:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(91, 196, 1, 0.4);
}
.btn--ghost .btn__icon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { animation: none; }
}

/* ---------- shared section atoms ---------- */
.section__head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; flex-direction: column; gap: 18px;
}
.section__eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.section__title span:not(.dot-deco) { display: inline-block; }
.dot-deco {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(40px, 5vw, 64px); height: clamp(40px, 5vw, 64px);
  position: relative;
}
.dot-deco::before {
  content: '';
  width: 60%; height: 60%;
  border: 1px dashed rgba(91, 196, 1, 0.6);
  border-radius: 50%;
  animation: spin 14s linear infinite;
}
.dot-deco::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  /* Fits a MacBook Air (1440x900) viewport without scroll-jacking. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 12vh, 140px) var(--pad) clamp(60px, 10vh, 90px);
  z-index: 2;
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vh, 40px);
  position: relative;
  z-index: 2;
}
.hero__eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  /* Scales with viewport HEIGHT too, so it doesn't overflow on short laptop screens. */
  font-size: clamp(48px, min(8.5vw, 14vh), 132px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  max-width: 1200px;
}
.hero__title .line { display: block; }
.hero__title .word {
  display: inline-block;
  /* No entry animation. Hero text is visible immediately. */
}
.hero__title .word--accent { color: var(--ink-dim); font-style: italic; font-weight: 300; }
.dot-mark {
  display: inline-block;
  color: var(--accent);
  transform: translateY(-0.05em);
  text-shadow: 0 0 24px var(--accent-glow);
}

.hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 820px;
  align-items: end;
}
@media (min-width: 800px) {
  .hero__meta { grid-template-columns: 1.1fr auto; gap: 40px; }
}
.hero__sub {
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 480px;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  bottom: 32px; left: var(--pad);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.16em; text-transform: uppercase;
  z-index: 3;
}
.scroll-hint i { color: var(--ink-faint); font-style: normal; }
.scroll-hint__icon {
  width: 18px; height: 18px;
  background:
    radial-gradient(circle at center, var(--accent) 1.5px, transparent 2px) 50% 50% / 4px 4px,
    radial-gradient(circle at 30% 50%, var(--accent) 1px, transparent 1.5px) 0 50% / 4px 4px;
  background-repeat: repeat;
  opacity: 0.7;
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- SERVICES ---------- */
.services {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 180px) 0 clamp(60px, 10vw, 140px);
  isolation: isolate;
}
.services::before {
  /* Big central radial glow behind the featured card — the DotDNA halo. */
  content: '';
  position: absolute;
  left: 50%; top: 55%;
  width: min(900px, 70vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(91, 196, 1, 0.32) 0%,
      rgba(91, 196, 1, 0.15) 25%,
      rgba(91, 196, 1, 0.04) 50%,
      transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}
.services__grid {
  max-width: var(--maxw);
  margin: clamp(50px, 7vw, 100px) auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* ----- SERVICE CARDS — restrained, corporate-boutique ----- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Dark-glass: mostly black with just enough transparency for the blur to read */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006) 35%, transparent 60%),
    rgba(6, 11, 8, 0.88);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s var(--ease-out),
    border-color 0.4s,
    box-shadow 0.4s,
    background 0.4s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 18px 42px rgba(0, 0, 0, 0.45);
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 196, 1, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(91, 196, 1, 0.015) 40%, transparent 70%),
    rgba(6, 11, 8, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(91, 196, 1, 0.08);
}

/* Soft mouse-tracked glow (kept; the only decorative motion) */
.service-card__glow {
  position: absolute; inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 30%),
    rgba(91, 196, 1, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 0;
}
.service-card:hover .service-card__glow { opacity: 1; }

/* Illustration band — full-width header that integrates with the card
   via a smooth gradient fade into the body. No frame, no borders. */
.service-card__viz {
  position: relative;
  height: 160px;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(91, 196, 1, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(91, 196, 1, 0.04), transparent 80%);
  display: grid; place-items: center;
  overflow: hidden;
}
.service-card__viz::after {
  /* fade the bottom of the illustration into the glass body */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 11, 8, 0.92) 100%);
  pointer-events: none;
}
.service-card__viz svg,
.service-card__viz img {
  width: auto;
  max-width: 80%;
  max-height: 130px;
  display: block;
  opacity: 0.85;
  transition: transform 0.6s var(--ease-out), opacity 0.4s;
}
.service-card:hover .service-card__viz svg,
.service-card:hover .service-card__viz img {
  opacity: 1;
  transform: scale(1.03);
}

/* Body — generous padding, clear hierarchy */
.service-card__body {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 26px 28px 28px;
  gap: 14px;
}
.service-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.service-card__lede {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.55;
  letter-spacing: -0.002em;
}
.service-card__bullets {
  display: flex; flex-direction: column;
  gap: 9px;
  margin: 6px 0 0;
  padding: 0;
}
.service-card__bullets li {
  font-size: 13px;
  color: var(--ink-dim);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.service-card__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 1px;
  background: rgba(91, 196, 1, 0.6);
}

/* Optional "Learn more" — sits at the bottom, never decorative chrome */
.service-card__more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: 0.005em;
  transition: color 0.25s, gap 0.3s var(--ease-out);
}
.service-card__more::after {
  content: '→';
  font-size: 14px;
  color: var(--accent);
  transition: transform 0.3s var(--ease-out);
}
.service-card:hover .service-card__more {
  color: var(--ink);
  gap: 12px;
}
.service-card:hover .service-card__more::after {
  transform: translateX(2px);
}

/* Legacy featured-card rules — kept inert (no card uses this class now) */
.service-card--featured h3 {
  background: linear-gradient(180deg, #ffffff, #c5e5a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-card--featured .service-card__particles {
  opacity: 1;
}

/* ---------- APPROACH ---------- */
.approach {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
}
.approach__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(91, 196, 1, 0.08), transparent 60%);
  pointer-events: none;
}
.approach__inner { position: relative; z-index: 1; }
.approach__grid {
  max-width: var(--maxw);
  margin: clamp(50px, 7vw, 80px) auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.approach-card {
  padding: 32px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
.approach-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 196, 1, 0.3);
}
.approach-card__num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--accent);
}
.approach-card h3 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.approach-card p {
  font-size: 14px; color: var(--ink-dim);
  margin: 0; line-height: 1.55;
}

/* ---------- FRAMEWORKS MARQUEE ---------- */
.frameworks {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 10vw, 120px) 0;
}
.marquee {
  margin-top: clamp(40px, 6vw, 70px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex; gap: 36px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee__track span:nth-child(even) { color: var(--accent); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 160px) 0;
}
.about__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.about__body {
  margin: clamp(40px, 5vw, 60px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
}
@media (min-width: 800px) {
  .about__body { grid-template-columns: 1.2fr 1fr; }
}
.about__body p {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}
.about__body strong { color: var(--ink); font-weight: 500; }
.about__quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink) !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  border-left: 1px solid var(--accent);
  padding-left: 24px;
}

.stats {
  margin-top: clamp(50px, 8vw, 100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat {
  padding: 32px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 0.4s;
}
.stat:hover { background: rgba(91, 196, 1, 0.04); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- FOUNDERS ---------- */
.founders {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 160px) 0;
}
.founders__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.founders__grid {
  margin-top: clamp(50px, 7vw, 90px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}
.founder-card {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.founder-card:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 196, 1, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(91, 196, 1, 0.18);
}
.founder-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(91, 196, 1, 0.06), transparent 35%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.4s;
}
.founder-card:hover::before { opacity: 1; }

.founder-card__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(91,196,1,0.18), transparent 60%),
    #0a160b;
  border: 1px solid rgba(91, 196, 1, 0.18);
}
.founder-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: transform 0.8s var(--ease-out);
}
.founder-card:hover .founder-card__media img {
  transform: scale(1.04);
}
.founder-card__media-glow {
  position: absolute; inset: -1px;
  background: radial-gradient(circle at 30% 30%, rgba(91,196,1,0.25), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.6;
}

.founder-card__body {
  display: flex; flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.founder-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.founder-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-card__social {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--ink-dim);
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.4s var(--ease-out);
}
.founder-card__social:hover {
  color: var(--accent);
  border-color: rgba(91, 196, 1, 0.4);
  background: rgba(91, 196, 1, 0.08);
  transform: translateY(-2px);
}
.founder-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.founder-card__bio {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}
.founder-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.founder-card__tags li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .founder-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .founder-card__media {
    aspect-ratio: 16 / 11;
    max-height: 280px;
  }
}

/* ---------- CONTACT ---------- */
.contact {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 14vw, 180px) 0;
  text-align: center;
  overflow: hidden;
}
/* Anchor jump target — sits right above "Let's talk." so the headline
   + form are visible the moment a user clicks the header's Contact us. */
.contact__anchor {
  display: block;
  width: 0; height: 0;
  scroll-margin-top: clamp(72px, 10vh, 96px);   /* clear the fixed header */
}
.contact__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.contact__orb {
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 1;
  margin-bottom: 16px;
  position: relative;
}
.contact__orb canvas {
  width: 100% !important; height: 100% !important;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.contact__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-dim);
  max-width: 520px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Floating direct-message widget ----------
   Launcher styled like .btn--ghost (outline, transparent, no icon disc).
   Popover above with two founder rows.
*/
.dm {
  position: fixed;
  right: clamp(20px, 2.5vw, 32px);
  bottom: clamp(20px, 2.5vw, 32px);
  z-index: 200;
  font: inherit;
}

/* Launcher — matches .btn--ghost */
.dm-launch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(8, 14, 10, 0.4);
  color: var(--ink-dim);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font: 500 14px/1 var(--font-display);
  letter-spacing: 0.005em;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: color 0.25s, background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.dm-launch:hover,
.dm-launch[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(91, 196, 1, 0.4);
}
.dm-launch__icon {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  color: var(--accent);
}
.dm-launch__label { line-height: 1; }
@media (max-width: 600px) {
  .dm-launch__label { display: none; }
  .dm-launch { padding: 12px; }
}

/* Popover above the launcher */
.dm-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(320px, calc(100vw - 40px));
  padding: 8px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(8, 14, 10, 0.85);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(91, 196, 1, 0.08);
  transform-origin: bottom right;
  animation: dm-pop-in 0.28s var(--ease-out);
}
.dm-pop[hidden] { display: none; }
@keyframes dm-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dm-pop__head {
  padding: 10px 12px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dm-pop__row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: background 0.2s;
}
.dm-pop__row + .dm-pop__row { margin-top: 2px; }
.dm-pop__row:hover,
.dm-pop__row:focus-visible {
  background: rgba(91, 196, 1, 0.08);
  outline: none;
}

.dm-pop__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a160b;
  border: 1px solid rgba(91, 196, 1, 0.25);
  flex: 0 0 44px;
}
.dm-pop__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}

.dm-pop__body {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dm-pop__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-pop__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.dm-pop__icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #051104;
  flex: 0 0 30px;
  transition: transform 0.4s var(--ease-out);
}
.dm-pop__row:hover .dm-pop__icon {
  transform: rotate(-8deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .dm-pop { animation: none; }
}

/* ---------- CONTACT FORM ---------- */
.contact__divider {
  display: flex; align-items: center; gap: 16px;
  width: min(560px, 100%);
  margin: 28px auto 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact__divider span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.contact__divider em { font-style: normal; color: var(--ink-dim); }

.contact-form {
  position: relative;
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(8, 14, 10, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}
.contact-form::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(91,196,1,0.05), transparent 45%);
  pointer-events: none;
  z-index: -1;
}

.contact-form__row {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field__label em { color: var(--ink-faint); font-style: normal; text-transform: none; letter-spacing: 0.04em; }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  font-family: var(--font-body);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}
.field input:hover,
.field textarea:hover { border-color: rgba(255,255,255,0.18); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(91, 196, 1, 0.5);
  background: rgba(91, 196, 1, 0.04);
  box-shadow: 0 0 0 4px rgba(91, 196, 1, 0.1);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 90, 90, 0.4);
}

/* Honeypot — visually hidden but accessible-to-bots */
.contact-form__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* hCaptcha widget — sit inside the form, force dark-friendly framing */
.contact-form .h-captcha {
  align-self: flex-start;
  /* hCaptcha renders an iframe; we just give it breathing room */
  margin-top: 4px;
  min-height: 78px;
}

.contact-form__footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 4px;
}
.contact-form__submit { min-width: 200px; }
.contact-form__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.contact-form__submit.is-loading .contact-form__submit-label::after {
  content: '...';
  display: inline-block;
  animation: dots 1.2s infinite steps(4);
}

.contact-form__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  min-height: 1.2em;
}
.contact-form__status.is-success { color: var(--accent); }
.contact-form__status.is-error { color: #ff7c7c; }

/* Success card replaces form on success */
.contact-form.is-success {
  text-align: center;
  align-items: center;
}
.contact-form.is-success > *:not(.contact-form__success) { display: none; }
.contact-form__success {
  display: none;
  flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 0;
}
.contact-form.is-success .contact-form__success { display: flex; }
.contact-form__success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(91, 196, 1, 0.1);
  border: 1px solid rgba(91, 196, 1, 0.4);
  color: var(--accent);
  box-shadow: 0 0 24px rgba(91, 196, 1, 0.25);
}
.contact-form__success h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.contact-form__success p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  max-width: 360px;
}

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  z-index: 2;
  padding: 60px var(--pad) 30px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.footer__top {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
@media (min-width: 800px) {
  .footer__top { grid-template-columns: 1.2fr 2fr; }
}
.footer__brand p {
  margin: 16px 0 0;
  color: var(--ink-dim);
  max-width: 320px;
  font-size: 14px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
}
.footer__col h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col a {
  font-size: 13px;
  color: var(--ink-dim);
  transition: color 0.25s;
  display: inline-block;
  position: relative;
}
.footer__col a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.footer__col a:hover { color: var(--ink); }
.footer__col a:hover::after { transform: scaleX(1); }

.footer__bottom {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- responsive nudges ---------- */
/* ---------- Mobile polish ----------
   Targeted fixes for the small-viewport blind spots:
   header overflow, hero proportions, founder card stacking,
   contact form, hCaptcha overflow, popover positioning. */

/* Tablet+phone: nav collapses (we don't ship a hamburger). Make the row
   read as logo + CTA only. Hide the Contact-us pill if even that overflows. */
@media (max-width: 900px) {
  .header {
    padding-inline: clamp(16px, 4vw, 28px);
    gap: 12px;
  }
  .logo-text { font-size: 15px; }
}

@media (max-width: 600px) {
  .header { padding: 14px 18px; }
  .nav { display: none; }
  .header > .btn--pill { padding: 6px 6px 6px 16px; font-size: 13px; }
  .header > .btn--pill .btn__icon { width: 30px; height: 30px; flex: 0 0 30px; }

  .hero { padding: 100px 18px 80px; }
  .hero__sub { font-size: 14px; }
  .hero__cta { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .hero__cta .btn { font-size: 13px; }
  .hero__cta .btn--glass { width: 100%; justify-content: space-between; }
  .scroll-hint { left: 18px; font-size: 10px; }

  .section__head { padding: 0 18px; }
  .section__title { font-size: clamp(30px, 9vw, 44px); gap: 8px; }
  .dot-deco { width: 32px; height: 32px; }

  .services__grid,
  .approach__grid,
  .founders__grid {
    padding: 0 18px;
    grid-template-columns: 1fr;
  }
  .service-card { padding: 22px; min-height: 280px; }
  .approach-card { padding: 24px; }
  .stat { padding: 22px; }

  /* Founder cards: image on top, body below */
  .founder-card { grid-template-columns: 1fr; padding: 18px; }
  .founder-card__media { aspect-ratio: 16 / 11; max-height: 240px; }

  /* Contact section + form */
  .contact { padding: 80px 0 120px; }
  .contact__inner { padding: 0 18px; }
  .contact__title { font-size: clamp(44px, 12vw, 64px); }
  .contact__orb { width: 200px; }
  .contact-form { padding: 22px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 14px; }
  .field input, .field textarea { font-size: 16px; }   /* avoid iOS zoom on focus */
  .contact-form__footer { flex-direction: column; align-items: stretch; }
  .contact-form__submit { width: 100%; justify-content: center; }

  /* hCaptcha widget can overflow 320px screens — scale it down. */
  .contact-form .h-captcha {
    transform-origin: left top;
    transform: scale(0.92);
  }

  /* Footer */
  .footer { padding: 50px 18px 30px; }
  .footer__top { gap: 36px; }
  .footer__cols { gap: 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Marquee runs faster on small viewports for the same perceived speed */
  .marquee__track { font-size: clamp(22px, 7vw, 36px); }

  /* WhatsApp popover: keep it on-screen when the launcher is near the edge */
  .dm-pop {
    right: 0;
    width: min(300px, calc(100vw - 36px));
  }

  /* Header CTA can fully disappear on the narrowest phones — the floating
     WhatsApp launcher + footer email cover the same need. */
}

/* Smallest phones (iPhone SE 320–360px) */
@media (max-width: 380px) {
  .header > .btn--pill span:first-child { display: none; }
  .header > .btn--pill { padding: 6px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__title .word { transform: none; opacity: 1; }
}