/* ──────────────────────────────────────────────────────────
   AIZY · V3 · niro-inspired (3D keyboard, dotted grid, glow)
   ────────────────────────────────────────────────────────── */

.v3 {
  /* Light tokens (default) — white + blue palette */
  --bg: #F5F8FD;
  --bg-2: #FFFFFF;
  --bg-3: #EEF3FB;
  --bg-4: #E2EBF7;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --ink: #07182E;
  --ink-2: #4B5970;
  --ink-3: #8995A8;
  --ink-4: #BCC6D6;
  --line: #E1E8F2;
  --line-2: #CFDAE9;
  /* Accent = primary blue. amber-* vars kept as aliases so we don't rewrite every component. */
  --amber: #2D6CF6;
  --amber-2: #4A85FF;
  --amber-ink: #FFFFFF;
  --sky: #5FA8FF;
  --warm: #FF6B4D;
  --cool: #5FA8FF;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  min-height: 100%;
  font-feature-settings: "ss01", "ss02";
  position: relative;
  overflow-x: clip;
}

/* Dark variant */
.v3-dark {
  --bg: #07101F;
  --bg-2: #0D1928;
  --bg-3: #122236;
  --bg-4: #1A2D44;
  --surface: #0D1928;
  --card: #122236;
  --ink: #EDF2F8;
  --ink-2: #98A4B7;
  --ink-3: #5D6B7F;
  --ink-4: #2E3B50;
  --line: #1A2A40;
  --line-2: #243854;
  --amber: #4A85FF;
  --amber-2: #76A0FF;
  --amber-ink: #061224;
  --sky: #76A0FF;
}
.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }

.v3__wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px; position: relative; }

/* ── Dot grid bg ──────────────────────────────────────────── */
.v3-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, color-mix(in oklab, var(--amber) 22%, transparent) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black, transparent 75%);
}
.v3-dark .v3-dots {
  background-image: radial-gradient(circle at center, color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.5px);
}
.v3-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: .55;
}
.v3-dark .v3-glow { opacity: .35; }

/* ── Mono / numeric ───────────────────────────────────────── */
.v3-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.v3-num  { font-variant-numeric: tabular-nums; }

/* ── Nav ──────────────────────────────────────────────────── */
.v3-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
}
.v3-nav__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  height: 76px;
}
.v3-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.025em;
}
.v3-logo__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--amber), var(--sky));
  position: relative;
  display: inline-block;
  box-shadow: 0 8px 20px -4px color-mix(in oklab, var(--amber) 50%, transparent);
}
.v3-logo__mark::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.v3-logo__mark::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
}
.v3-nav__links { justify-self: center; display: flex; gap: 32px; }
.v3-nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .15s;
}
.v3-nav__links a:hover { color: var(--ink); }
.v3-nav__right { display: flex; align-items: center; gap: 14px; }
.v3-lang {
  display: flex; gap: 4px;
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg-2);
}
.v3-lang button { background: transparent; border: 0; cursor: pointer; padding: 6px 10px; color: inherit; font: inherit; border-radius: 999px; }
.v3-lang button.is-active { color: #fff; background: var(--ink); }
.v3-dark .v3-lang button.is-active { color: var(--bg); background: var(--ink); }

/* ── Buttons ──────────────────────────────────────────────── */
.v3-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
  white-space: nowrap;
  font-family: inherit;
}
.v3-btn:hover { transform: translateY(-2px); }
.v3-btn--amber { background: var(--amber); color: var(--amber-ink); box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--amber) 70%, transparent); }
.v3-btn--amber:hover { background: var(--amber-2); }
.v3-btn--ghost {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--line-2);
}
.v3-btn--ghost:hover { background: var(--bg-3); }

/* ── Hero ─────────────────────────────────────────────────── */
.v3-hero {
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}
.v3-hero .v3-glow.g1 { width: 600px; height: 600px; background: var(--amber); top: -200px; right: -100px; opacity: .12; }
.v3-hero .v3-glow.g2 { width: 500px; height: 500px; background: var(--sky); bottom: -200px; left: -100px; opacity: .15; }
.v3-dark .v3-hero .v3-glow.g1 { opacity: .14; }
.v3-dark .v3-hero .v3-glow.g2 { opacity: .1; }
.v3-hero__head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 36px;
}
.v3-hero__tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
}
.v3-hero__tag i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--amber) 18%, transparent), 0 0 14px var(--amber);
  animation: v3pulse 1.8s ease-in-out infinite;
}
@keyframes v3pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--amber) 26%, transparent), 0 0 12px var(--amber); }
  50%     { box-shadow: 0 0 0 6px color-mix(in oklab, var(--amber) 0%, transparent), 0 0 16px var(--amber); }
}
.v3-hero__arrow {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber);
}
.v3-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.v3-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 6.8vw, 116px);
  line-height: .96;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
.v3-hero__title .amber { color: var(--amber); }
.v3-hero__title .underline {
  display: inline-block;
  position: relative;
  font-style: italic;
}
.v3-hero__title .underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 4%;
  height: 8px;
  background: var(--amber);
  border-radius: 6px;
  opacity: .9;
}
.v3-hero__lede {
  margin-top: 36px;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
}
.v3-hero__cta {
  margin-top: 42px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.v3-hero__stat {
  display: flex; gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.v3-hero__stat-item { display: flex; flex-direction: column; gap: 4px; }
.v3-hero__stat-item .v {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
}
.v3-hero__stat-item .v sup { font-size: 0.42em; vertical-align: super; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.v3-hero__stat-item .k {
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Hero phone visual */
.v3-hero__viz {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: flex; align-items: center; justify-content: center;
}
.v3-phone {
  width: 280px;
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  background: linear-gradient(160deg, #0E1B30, #050B16 80%);
  border: 1px solid #1A2A40;
  padding: 14px;
  position: relative;
  box-shadow:
    0 60px 100px -30px rgba(14, 27, 48, .35),
    0 30px 60px -20px color-mix(in oklab, var(--amber) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: rotate(-6deg);
  z-index: 2;
}
.v3-dark .v3-phone {
  box-shadow:
    0 60px 100px -30px rgba(0,0,0,.7),
    0 30px 60px -20px color-mix(in oklab, var(--amber) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.v3-phone__screen {
  width: 100%; height: 100%;
  border-radius: 28px;
  background: #07101F;
  border: 1px solid #1A2A40;
  display: flex; flex-direction: column;
  padding: 26px 18px 22px;
  gap: 14px;
  overflow: hidden;
  position: relative;
  color: #EDF2F8;
}
.v3-phone__status { color: #5D6B7F; }
.v3-phone__name { color: #EDF2F8; }
.v3-phone__num { color: #5D6B7F; }
.v3-phone__line.is-caller { background: #1A2D44; color: #EDF2F8; }
.v3-phone__cta button { background: #1A2D44; color: #EDF2F8; }
.v3-phone__notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #000;
  border-radius: 12px;
  z-index: 3;
}
.v3-phone__status {
  display: flex; justify-content: space-between;
  font: 500 9px/1 var(--font-mono);
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 8px;
  margin-top: 8px;
}
.v3-phone__call {
  font: 500 10px/1 var(--font-mono);
  color: var(--amber);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.v3-phone__call::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.v3-phone__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.v3-phone__num { font: 500 10px/1 var(--font-mono); color: var(--ink-3); }
.v3-phone__wave {
  display: flex; gap: 2px; align-items: center;
  height: 32px;
  margin: 10px 0;
}
.v3-phone__wave i {
  display: block; width: 2px;
  border-radius: 1px;
  background: var(--amber);
  animation: v3wave 1.4s ease-in-out infinite;
}
@keyframes v3wave {
  0%,100% { height: 4px; }
  50%     { height: var(--h, 18px); }
}
.v3-phone__transcript {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
}
.v3-phone__line {
  font-size: 11px;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 10px;
  max-width: 86%;
}
.v3-phone__line.is-aizy { background: var(--amber); color: var(--amber-ink); align-self: flex-start; font-weight: 500; }
.v3-phone__line.is-caller { background: var(--bg-3); color: var(--ink); align-self: flex-end; }
.v3-phone__cta {
  margin-top: auto;
  display: flex; gap: 8px;
  padding-top: 10px;
}
.v3-phone__cta button {
  flex: 1;
  border: 0;
  background: var(--bg-3);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px;
  font: 500 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.v3-phone__cta button.is-amber { background: var(--amber); color: var(--amber-ink); }

/* Floating cards behind phone */
.v3-hero__chip {
  position: absolute;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  animation: v3float 6s ease-in-out infinite;
}
.v3-hero__chip .label { font: 500 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.v3-hero__chip .val { font-size: 14px; font-weight: 600; color: var(--ink); }
.v3-hero__chip .val .acc { color: var(--amber); }
.v3-hero__chip.c1 { top: 18%; right: 0%; animation-delay: -1s; }
.v3-hero__chip.c2 { bottom: 26%; left: 4%; animation-delay: -3s; }
.v3-hero__chip.c3 { top: 50%; right: 6%; animation-delay: -5s; transform: translateY(-50%); }
@keyframes v3float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.v3-hero__chip.c3 { animation-name: v3float-mid; }
@keyframes v3float-mid {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 10px)); }
}

/* ── Section ──────────────────────────────────────────────── */
.v3-sec {
  padding: 120px 0;
  position: relative;
}
.v3-sec--tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v3-sec__hd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 64px;
  align-items: end;
}
.v3-sec__eyebrow {
  font: 500 13px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.v3-sec__eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
}
.v3-sec__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}
.v3-sec__h em {
  font-style: italic;
  color: var(--amber);
}
.v3-sec__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}

/* ── Portfolio grid (industries) ──────────────────────────── */
.v3-port {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.v3-port__card {
  border-radius: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(7,24,46,.02), 0 4px 16px -8px rgba(7,24,46,.08);
}
.v3-port__card:hover {
  transform: translateY(-6px);
  border-color: var(--amber);
  box-shadow: 0 20px 50px -20px color-mix(in oklab, var(--amber) 25%, transparent), 0 4px 16px -4px rgba(7,24,46,.1);
}
.v3-dark .v3-port__card { box-shadow: none; }
.v3-dark .v3-port__card:hover { border-color: var(--ink-4); box-shadow: none; }
.v3-port__card:hover .v3-port__cta { color: var(--amber); }
.v3-port__card:hover .v3-port__viz { transform: scale(1.04) rotate(-1deg); }
.v3-port__viz {
  flex: 1;
  border-radius: 16px;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  min-height: 160px;
}
.v3-port__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.v3-port__icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  color: var(--amber);
  border: 1px solid var(--line);
}
.v3-port__tag {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
}
.v3-port__t {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.v3-port__d {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.v3-port__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .15s;
}

/* ── Case study (featured) ────────────────────────────────── */
.v3-case {
  border-radius: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 48px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.v3-case::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in oklab, var(--amber) 50%, transparent), transparent 60%);
  pointer-events: none;
  opacity: .35;
}
.v3-case__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0;
}
.v3-case__sub {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.v3-case__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.v3-case__metric {
  display: flex; flex-direction: column; gap: 4px;
}
.v3-case__metric .v {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 600; letter-spacing: -.025em; line-height: 1;
}
.v3-case__metric .v sup { font-size: .4em; color: var(--ink-3); vertical-align: super; font-weight: 500; margin-left: 2px; }
.v3-case__metric .k { font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v3-case__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px;
}
.v3-case__tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--ink-2);
}
.v3-case__viz {
  position: relative;
  height: 420px;
  border-radius: 20px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.v3-case__viz-h {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
  letter-spacing: .04em;
}
.v3-case__viz-h strong { color: var(--ink); font-weight: 600; font-size: 13px; font-family: inherit; letter-spacing: -.005em; }
.v3-case__row {
  display: grid; grid-template-columns: 36px 1fr 60px 80px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
}
.v3-case__row:last-child { border-bottom: 0; }
.v3-case__row .av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-4);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--font-sans);
  color: var(--ink-2);
}
.v3-case__row .nm { font-weight: 500; }
.v3-case__row .nm small { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; font-family: var(--font-mono); margin-top: 2px; }
.v3-case__row .tg {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  text-align: center;
  background: var(--bg-4);
  color: var(--ink-2);
}
.v3-case__row .tg.is-lead { background: var(--amber); color: var(--amber-ink); }
.v3-case__row .tm { color: var(--ink-3); font: 500 11px/1 var(--font-mono); text-align: right; }

/* ── KEYBOARD of capabilities ─────────────────────────────── */
.v3-kb-wrap {
  perspective: 1800px;
  transform-style: preserve-3d;
}
.v3-kb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.v3-key {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 220px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, box-shadow .35s;
  will-change: transform;
  box-shadow: 0 1px 0 rgba(7,24,46,.02), 0 4px 16px -8px rgba(7,24,46,.06);
}
.v3-dark .v3-key { box-shadow: none; }
.v3-key::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--amber) 20%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.v3-key:hover {
  transform: translateZ(40px) translateY(-4px);
  background: var(--bg-2);
  border-color: color-mix(in oklab, var(--amber) 50%, var(--line));
  box-shadow:
    0 40px 60px -20px color-mix(in oklab, var(--amber) 30%, transparent),
    0 0 0 1px color-mix(in oklab, var(--amber) 22%, transparent);
}
.v3-dark .v3-key:hover {
  background: var(--bg-3);
  border-color: color-mix(in oklab, var(--amber) 40%, var(--line));
  box-shadow:
    0 40px 60px -20px rgba(0,0,0,.6),
    0 0 0 1px color-mix(in oklab, var(--amber) 12%, transparent);
}
.v3-key:hover::before { opacity: 1; }
.v3-key:hover .v3-key__icon {
  background: var(--amber);
  color: var(--amber-ink);
  border-color: var(--amber);
  transform: translateZ(20px) rotate(-6deg);
}
.v3-key:hover .v3-key__t { color: var(--amber); }
.v3-key__top { display: flex; align-items: center; justify-content: space-between; }
.v3-key__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--amber);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, border-color .25s;
  transform-style: preserve-3d;
}
.v3-key__num {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--ink-3);
}
.v3-key__t {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
  margin-top: auto;
  transition: color .2s;
}
.v3-key__d {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.v3-key--big {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--amber) 0%, var(--sky) 100%);
  color: #fff;
  border-color: transparent;
}
.v3-key--big .v3-key__icon { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v3-key--big .v3-key__num { color: rgba(255,255,255,.65); }
.v3-key--big .v3-key__t { color: #fff; font-size: 26px; }
.v3-key--big .v3-key__d { color: rgba(255,255,255,.85); }
.v3-key--big:hover { background: linear-gradient(135deg, var(--amber-2) 0%, var(--sky) 100%); border-color: transparent; box-shadow: 0 40px 60px -20px color-mix(in oklab, var(--amber) 40%, transparent); }
.v3-key--big:hover .v3-key__t { color: #fff; }
.v3-key--big:hover .v3-key__icon { background: rgba(255,255,255,.28); color: #fff; }

.v3-kb-hint {
  margin-top: 22px;
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
  justify-content: center;
}
.v3-kb-hint .cursor {
  display: inline-block;
  width: 14px; height: 14px;
}

/* ── Roadmap ──────────────────────────────────────────────── */
.v3-rm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(7,24,46,.03), 0 8px 24px -12px rgba(7,24,46,.1);
}
.v3-dark .v3-rm { box-shadow: none; }
.v3-rm__step {
  background: var(--bg-2);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  min-height: 380px;
}
.v3-rm__step-n {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--amber);
}
.v3-rm__step-viz {
  flex: 1;
  border-radius: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}
.v3-rm__step-t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.v3-rm__step-d { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* ── Reviews marquee ──────────────────────────────────────── */
.v3-rev {
  position: relative;
  overflow: hidden;
  margin: 0 -56px;
  padding: 0 56px;
  --col-w: 380px;
}
.v3-rev::before, .v3-rev::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.v3-rev::before { left: 0; background: linear-gradient(to right, var(--bg) 30%, transparent); }
.v3-rev::after  { right: 0; background: linear-gradient(to left, var(--bg) 30%, transparent); }
.v3-rev__row {
  display: flex; gap: 20px;
  width: max-content;
  animation: v3rev 80s linear infinite;
}
.v3-rev__row.r2 {
  animation-direction: reverse;
  animation-duration: 60s;
  margin-top: 20px;
}
@keyframes v3rev {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.v3-rev__card {
  width: var(--col-w);
  flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.v3-rev__top { display: flex; align-items: center; gap: 12px; }
.v3-rev__av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font-sans);
  color: var(--amber);
}
.v3-rev__name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.v3-rev__date { font: 500 10px/1 var(--font-mono); color: var(--ink-3); margin-top: 4px; letter-spacing: .04em; }
.v3-rev__stars { margin-left: auto; color: var(--amber); display: flex; gap: 1px; font-size: 11px; }
.v3-rev__t { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }

/* ── FAQ ──────────────────────────────────────────────────── */
.v3-faq { display: flex; flex-direction: column; }
.v3-faq__item {
  border-bottom: 1px solid var(--line);
  padding: 0;
  transition: padding .2s;
}
.v3-faq__btn {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 28px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: inherit;
  cursor: pointer;
  font: 600 22px/1.3 var(--font-display);
  letter-spacing: -.015em;
  text-align: left;
  font-family: inherit;
}
.v3-faq__icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  transition: background .15s, transform .25s;
}
.v3-faq__item.is-open .v3-faq__icon { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); transform: rotate(45deg); }
.v3-faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.v3-faq__item.is-open .v3-faq__body {
  max-height: 400px;
  padding-bottom: 28px;
}
.v3-faq__body p {
  font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; margin: 0;
}

/* ── Final CTA ────────────────────────────────────────────── */
.v3-cta-card {
  border-radius: 32px;
  padding: 80px 64px;
  background: linear-gradient(135deg, var(--amber) 0%, #1B47C2 100%);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--amber) 40%, transparent);
}
.v3-cta-card::before {
  content: ""; position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.v3-cta-card p { color: rgba(255,255,255,.82); }
.v3-cta-card h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0;
  position: relative;
}
.v3-cta-card p {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--amber-ink) 80%, transparent);
  position: relative;
  max-width: 50ch;
}
.v3-cta-card__buttons { display: flex; flex-direction: column; gap: 12px; position: relative; align-items: flex-start; }
.v3-cta-card__buttons .v3-btn { padding: 16px 24px; font-size: 16px; }
.v3-cta-card__buttons .v3-btn--dark { background: #07182E; color: #fff; }
.v3-cta-card__buttons .v3-btn--dark:hover { background: #102747; }
.v3-cta-card__buttons .v3-btn--outline { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.v3-cta-card__buttons .v3-btn--outline:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* ── Footer ───────────────────────────────────────────────── */
.v3-foot {
  padding: 56px 0 36px;
  border-top: 1px solid var(--line);
}
.v3-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v3-foot__tag { color: var(--ink-3); font-size: 13px; }
.v3-foot__links { display: flex; gap: 22px; }
.v3-foot__links a { color: var(--ink-2); text-decoration: none; font-size: 13px; transition: color .15s; }
.v3-foot__links a:hover { color: var(--amber); }

/* ──────────────────────────────────────────────────────────
   RESPONSIVE — tablet & mobile
   The base styles above are desktop-first; everything below
   collapses the multi-column grids to single column, hides the
   desktop nav links (no hamburger), and shrinks display type so
   the page reads correctly down to ~320px.
   ────────────────────────────────────────────────────────── */

/* Tablet / small laptop */
@media (max-width: 1024px) {
  .v3__wrap { padding: 0 32px; }
  .v3-hero__grid { gap: 48px; }
  .v3-sec { padding: 96px 0; }
}

/* Phone landscape / small tablet */
@media (max-width: 900px) {
  .v3__wrap { padding: 0 24px; }

  /* Nav — drop the centre links (empty 1fr column just spaces logo ↔ actions) */
  .v3-nav__row { height: 64px; gap: 12px; }
  .v3-nav__links { display: none; }
  .v3-nav__right { gap: 10px; }

  /* Hero */
  .v3-hero { padding: 40px 0 64px; }
  .v3-hero__head { margin-bottom: 24px; }
  .v3-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .v3-hero__title { font-size: clamp(38px, 8vw, 64px); line-height: 1; }
  .v3-hero__lede { margin-top: 24px; font-size: 17px; }
  .v3-hero__cta { margin-top: 28px; }
  .v3-hero__stat { margin-top: 36px; padding-top: 24px; gap: 20px; }

  /* Sections */
  .v3-sec { padding: 64px 0; }
  .v3-sec__hd { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; align-items: start; }

  /* Multi-column grids → 2 columns */
  .v3-port { grid-template-columns: repeat(2, 1fr); }
  .v3-kb { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .v3-rm { grid-template-columns: repeat(2, 1fr); }

  /* Case study + final CTA → stack */
  .v3-case { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
  .v3-case__viz { height: 320px; }
  .v3-cta-card { grid-template-columns: 1fr; padding: 48px 32px; gap: 28px; }
}

/* Phone portrait */
@media (max-width: 640px) {
  .v3__wrap { padding: 0 16px; }

  /* Hide the secondary (login) button so the action cluster fits */
  .v3-nav__right > .v3-btn--ghost { display: none; }
  .v3-nav__right { gap: 8px; }

  /* Hero */
  .v3-hero { padding: 28px 0 48px; }
  .v3-hero__head { gap: 12px; }
  .v3-hero__title { font-size: clamp(32px, 9vw, 46px); }
  .v3-hero__lede { font-size: 16px; }
  .v3-hero__cta { width: 100%; }
  .v3-hero__cta .v3-btn { flex: 1 1 auto; justify-content: center; }
  .v3-hero__stat { flex-wrap: wrap; gap: 16px 28px; }
  .v3-hero__stat-item .v { font-size: 26px; }
  .v3-hero__chip { display: none; } /* declutter the floating cards on small screens */

  /* Sections */
  .v3-sec { padding: 48px 0; }
  .v3-sec__h { font-size: clamp(28px, 7.5vw, 40px); }
  .v3-sec__sub { font-size: 15px; }

  /* Grids → single column */
  .v3-port { grid-template-columns: 1fr; }
  .v3-port__card { min-height: 0; }
  .v3-kb { grid-template-columns: 1fr; }
  .v3-key { min-height: 0; padding: 24px; }
  .v3-key--big { grid-column: auto; }
  .v3-key--big .v3-key__t { font-size: 22px; }
  .v3-rm { grid-template-columns: 1fr; }
  .v3-rm__step { min-height: 0; padding: 28px 24px; }
  .v3-rm__step-n { font-size: 56px; }

  /* Case study + CTA */
  .v3-case { padding: 24px; border-radius: 22px; }
  .v3-case__viz { height: 280px; padding: 18px; }
  .v3-case__metrics { gap: 14px; }
  .v3-cta-card { padding: 36px 22px; border-radius: 24px; }
  .v3-cta-card h2 { font-size: clamp(30px, 7vw, 40px); }

  /* FAQ + footer */
  .v3-faq__btn { font-size: 18px; padding: 22px 0; }
  .v3-foot__row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Very small phones — the nav CTA labels ("Подключить пилот") are wide, so
   drop the nav pilot button; conversion is carried by the hero CTA + ingest
   form. Keep logo · theme · language so the row always fits to ~320px. */
@media (max-width: 480px) {
  .v3-nav__right > .v3-btn--amber { display: none; }
  .v3-logo { font-size: 19px; }
  .v3-logo__mark { width: 26px; height: 26px; }
  .v3-hero__stat { gap: 14px 20px; }
}