:root {
  --bg: #0b1220; /* Graphite Navy */
  --bg-spot-1: rgba(79, 70, 229, 0.12);
  --bg-spot-2: rgba(99, 102, 241, 0.12);
  --panel: #0f172a;
  --muted: #0b1220;
  --light: #f8fafc; /* Cloud White */
  --text: #f8fafc;
  --subtext: #cbd5e1;
  --ink: #0f172a;
  --muted-ink: #475569;
  --accent: #4f46e5; /* Electric Indigo */
  --accent-strong: #6366f1;
  --success: #22c55e; /* Controlled Green */
  --gold: #c9a227;
  --gold-glow: #ffd966;
  --stroke: rgba(255, 255, 255, 0.16);
  --stroke-dark: rgba(255, 255, 255, 0.08);
  --card: #0f172a;
  --card-light: #ffffff;
  --code: #020617;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --input-bg: #0b1222;
  --header-bg: rgba(11, 18, 32, 0.9);
  --header-border: rgba(255, 255, 255, 0.08);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-hover-color: #fff;
  --ghost-border: rgba(255, 255, 255, 0.5);
  --ghost-color: #fff;
  --surface-blur: blur(12px);
  --radius: 16px;
  --hero-fade: 0;
  --brain-intensity: 0.6;
  --brain-trail: 0;
  --bg-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='45%25' stop-color='%236ee7ff'/%3E%3Cstop offset='70%25' stop-color='%234f46e5'/%3E%3Cstop offset='100%25' stop-color='%23c9a227'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M220 360 C260 250 380 200 520 240 S760 360 720 520 C690 660 480 700 340 620 C240 560 200 440 220 360 Z' stroke='url(%23g)' stroke-width='2.2' stroke-dasharray='130 180'/%3E%3Cpath d='M260 520 C320 660 520 760 700 700 C820 660 840 520 760 430 C660 330 460 340 340 420 C260 480 220 560 260 520 Z' stroke='%23c9a227' stroke-width='1.7' stroke-dasharray='120 150'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  --bg: #f5f7ff;
  --bg-spot-1: rgba(79, 70, 229, 0.14);
  --bg-spot-2: rgba(201, 162, 39, 0.12);
  --panel: #ffffff;
  --muted: #eef2f7;
  --light: #ffffff;
  --text: #0f172a;
  --subtext: #475569;
  --ink: #0f172a;
  --muted-ink: #475569;
  --accent: #4f46e5;
  --accent-strong: #6366f1;
  --success: #22c55e;
  --stroke: #d7def0;
  --stroke-dark: #c1c9db;
  --card: #ffffff;
  --card-light: #ffffff;
  --code: #e2e8f0;
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  --input-bg: #ffffff;
  --header-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(201, 162, 39, 0.08));
  --header-border: rgba(99, 102, 241, 0.4);
  --nav-hover-bg: rgba(79, 70, 229, 0.12);
  --nav-hover-color: #111827;
  --ghost-border: rgba(79, 70, 229, 0.35);
  --ghost-color: #111827;
  --surface-blur: blur(10px);
}

@property --blade-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --trail-length {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

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

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 20%, var(--bg-spot-1), transparent 30%),
    radial-gradient(circle at 80% 0%, var(--bg-spot-2), transparent 25%),
    var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.global-brains {
  position: fixed;
  inset: -6% -18% 0 -18%;
  pointer-events: none;
  background-image: var(--bg-brain), var(--bg-brain), var(--bg-brain), var(--bg-brain);
  background-repeat: no-repeat;
  /* Увеличены x3 для более крупных боковых элементов */
  background-size: 1920px, 1560px, 1080px, 960px;
  background-position: -10% 18%, 108% 68%, 12% 78%, 88% 12%;
  mix-blend-mode: screen;
  opacity: 0.32;
  filter: saturate(1.1) drop-shadow(0 0 28px rgba(79, 70, 229, 0.15));
  z-index: 0;
}

:root[data-theme="light"] .global-brains {
  mix-blend-mode: multiply;
  opacity: 0.18;
  filter: saturate(0.9) blur(0.2px);
}

.global-brains::before,
.global-brains::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.35;
  filter: blur(0.4px);
}

.global-brains::before {
  background-image:
    radial-gradient(220px 320px at 24% 32%, rgba(99, 102, 241, 0.45), transparent 65%),
    radial-gradient(320px 220px at 22% 30%, rgba(201, 162, 39, 0.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 640'%3E%3Cdefs%3E%3ClinearGradient id='hg' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='45%25' stop-color='%236ee7ff'/%3E%3Cstop offset='70%25' stop-color='%234f46e5'/%3E%3Cstop offset='100%25' stop-color='%23c9a227'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 180 C140 122 218 90 286 118 C332 138 370 198 368 238 C366 278 326 304 292 286 C258 268 242 212 218 190 C194 168 162 176 146 208 C130 240 132 288 134 334 C136 380 140 430 156 466 C172 502 202 520 236 512 C270 504 302 470 312 426' stroke='url(%23hg)' stroke-width='3' stroke-dasharray='48 26'/%3E%3Cpath d='M178 226 C188 204 214 194 238 206 C262 218 280 246 284 276 C288 306 278 332 258 342 C238 352 206 346 190 324 C174 302 168 248 178 226 Z' stroke='%236ee7ff' stroke-width='2.4' stroke-dasharray='30 18'/%3E%3Cpath d='M136 324 C146 352 172 382 198 396 C224 410 252 406 274 386' stroke='%23c9a227' stroke-width='2.2' stroke-dasharray='26 16'/%3E%3Cpath d='M214 162 C242 140 286 138 314 154 C342 170 358 204 356 226' stroke='%236ee7ff' stroke-width='2' stroke-dasharray='18 14'/%3E%3Cpath d='M198 278 C208 300 224 320 242 330 C260 340 286 340 304 326' stroke='url(%23hg)' stroke-width='2.2' stroke-dasharray='22 14'/%3E%3C/g%3E%3C/svg%3E");
  background-position: -12% 22%, -6% 28%, -10% 24%;
  /* x3 */
  background-size: 2520px, 2520px, 2100px;
}

.global-brains::after {
  background-image:
    radial-gradient(220px 320px at 82% 62%, rgba(99, 102, 241, 0.45), transparent 65%),
    radial-gradient(320px 220px at 78% 60%, rgba(201, 162, 39, 0.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 640'%3E%3Cdefs%3E%3ClinearGradient id='hg' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='45%25' stop-color='%236ee7ff'/%3E%3Cstop offset='70%25' stop-color='%234f46e5'/%3E%3Cstop offset='100%25' stop-color='%23c9a227'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M400 180 C380 122 302 90 234 118 C188 138 150 198 152 238 C154 278 194 304 228 286 C262 268 278 212 302 190 C326 168 358 176 374 208 C390 240 388 288 386 334 C384 380 380 430 364 466 C348 502 318 520 284 512 C250 504 218 470 208 426' stroke='url(%23hg)' stroke-width='3' stroke-dasharray='48 26'/%3E%3Cpath d='M342 226 C332 204 306 194 282 206 C258 218 240 246 236 276 C232 306 242 332 262 342 C282 352 314 346 330 324 C346 302 352 248 342 226 Z' stroke='%236ee7ff' stroke-width='2.4' stroke-dasharray='30 18'/%3E%3Cpath d='M384 324 C374 352 348 382 322 396 C296 410 268 406 246 386' stroke='%23c9a227' stroke-width='2.2' stroke-dasharray='26 16'/%3E%3Cpath d='M306 162 C278 140 234 138 206 154 C178 170 162 204 164 226' stroke='%236ee7ff' stroke-width='2' stroke-dasharray='18 14'/%3E%3Cpath d='M322 278 C312 300 296 320 278 330 C260 340 234 340 216 326' stroke='url(%23hg)' stroke-width='2.2' stroke-dasharray='22 14'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 112% 62%, 106% 68%, 110% 64%;
  /* x3 */
  background-size: 2520px, 2520px, 2100px;
  transform: scaleX(-1);
}

:root[data-theme="light"] .global-brains::before,
:root[data-theme="light"] .global-brains::after {
  mix-blend-mode: multiply;
  opacity: 0.24;
  filter: blur(0.6px);
}

header, main, footer, .site-header, .hero, .section, .cta {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  line-height: 1.2;
}

p {
  margin: 0 0 12px;
  color: var(--subtext);
}

.container {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: var(--surface-blur);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  min-height: 72px;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 16px;
  font-size: 15px;
  flex-wrap: nowrap;
}

.nav a {
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav a:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-color);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-height: 48px;
}

.control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  min-width: 150px;
  justify-content: center;
  white-space: nowrap;
}

.control:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.16);
  transform: translateY(-1px);
}

.theme-icon {
  font-size: 16px;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--subtext);
}

.lang-select {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  min-width: 78px;
  white-space: nowrap;
}

.with-dot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.with-dot .turbo-circle {
  --turbo-size: 63px;      /* x1.5 */
  --blades-size: 72px;     /* слой шлейфа компактной версии ~120px/1.66 */
  --blade-length: 33px;
  --blade-width: 2px;
}

.turbo-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--turbo-size, 120px);   /* увеличен базовый диаметр */
  height: var(--turbo-size, 120px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--turbo-bg, #4f46e5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.blades {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--blades-size, 120px);  /* слой шлейфа 120px */
  height: var(--blades-size, 120px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg));
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: screen;
  --trail-length: 0deg;
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.4) 0 14%, rgba(15, 23, 42, 0) 36%),
    conic-gradient(
      from calc(var(--blade-angle, 0deg) - var(--trail-length)),
      rgba(249, 115, 22, 0) 0deg,
      rgba(249, 115, 22, 1) calc(var(--trail-length) * 0.18),
      rgba(252, 211, 77, 0.9)  calc(var(--trail-length) * 0.42),
      rgba(252, 211, 77, 0.28) calc(var(--trail-length) * 0.9),
      rgba(252, 211, 77, 0.0) 360deg
    ),
    conic-gradient(
      from calc(var(--blade-angle, 0deg) + 120deg - var(--trail-length)),
      rgba(249, 115, 22, 0) 0deg,
      rgba(249, 115, 22, 1) calc(var(--trail-length) * 0.18),
      rgba(252, 211, 77, 0.9)  calc(var(--trail-length) * 0.42),
      rgba(252, 211, 77, 0.28) calc(var(--trail-length) * 0.9),
      rgba(252, 211, 77, 0.0) 360deg
    ),
    conic-gradient(
      from calc(var(--blade-angle, 0deg) + 240deg - var(--trail-length)),
      rgba(249, 115, 22, 0) 0deg,
      rgba(249, 115, 22, 1) calc(var(--trail-length) * 0.18),
      rgba(252, 211, 77, 0.9)  calc(var(--trail-length) * 0.42),
      rgba(252, 211, 77, 0.28) calc(var(--trail-length) * 0.9),
      rgba(252, 211, 77, 0.0) 360deg
    );
  animation: idle-sputter-angle 1.6s ease-in-out infinite alternate;
}

.blades::before,
.blades::after,
.blades span {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform-origin: center;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.blades::before { transform: translate(-50%, -100%) rotate(0deg); }
.blades::after { transform: translate(-50%, -100%) rotate(120deg); }
.blades span { transform: translate(-50%, -100%) rotate(240deg); }

@keyframes idle-sputter-angle {
  0% { --blade-angle: -6deg; filter: brightness(0.52); opacity: 0.68; }
  30% { --blade-angle: 2deg; filter: brightness(0.6); opacity: 0.75; }
  55% { --blade-angle: -3deg; filter: brightness(0.56); opacity: 0.72; }
  80% { --blade-angle: 4deg; filter: brightness(0.62); opacity: 0.78; }
  100% { --blade-angle: 0deg; filter: brightness(0.58); opacity: 0.74; }
}

@keyframes turbine-spin-active {
  from {
    --blade-angle: 0deg;
    filter: drop-shadow(0 0 12px rgba(252, 211, 77, 0.28));
  }
  to {
    --blade-angle: 360deg;
    filter: drop-shadow(0 0 16px rgba(252, 211, 77, 0.4));
  }
}

.turbo-circle.is-active .blades,
.dot-hover:hover .turbo-circle .blades {
  animation: turbine-spin-active 0.8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(252, 211, 77, 0.28));
  opacity: 1;
}

.turbo-circle:not(.is-active) .blades {
  animation: idle-sputter-angle 1.6s ease-in-out infinite alternate;
  opacity: 0.82;
}

/* Mobile: turbines spin only when active (after 1 second) */
@media (max-width: 768px) {
  .turbo-circle .blades {
    animation: none;
    opacity: 0.5;
    --blade-angle: 0deg;
    filter: brightness(0.5);
  }
  
  .turbo-circle.is-active .blades {
    animation: turbine-spin-active 0.8s linear infinite !important;
    filter: drop-shadow(0 0 14px rgba(252, 211, 77, 0.35));
    opacity: 1;
  }
}

.dot-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.dot-hover:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 38px rgba(79, 70, 229, 0.22);
  transform: translateY(-2px);
}

.dot-hover:hover .turbo-circle {
  box-shadow: 0 0 12px rgba(255, 217, 102, 0.35);
}

/* Глобальное затемнение остальных объектов при ховере на одном */
@media (min-width: 769px) {
  body:has(.dot-hover:hover) .dot-hover:not(:hover) {
    opacity: 0.45;
    filter: saturate(0.4) brightness(0.8);
    transition: opacity 0.25s ease, filter 0.25s ease;
  }
}

.nav-dot {
  padding-left: 22px;
}

.nav-dot::before {
  top: 50%;
  transform: translateY(-50%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff;
  box-shadow: 0 14px 40px rgba(79, 70, 229, 0.35);
}

.btn.primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25), 0 16px 50px rgba(201, 162, 39, 0.35);
}

.btn.secondary {
  background: var(--panel);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.btn.secondary:hover {
  border-color: var(--accent);
}

.btn.ghost {
  background: transparent;
  border-color: var(--ghost-border);
  color: var(--ghost-color);
}

.btn.ghost:hover {
  border-color: var(--accent);
}

.hero {
  padding: 80px 0 40px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(1 - var(--hero-fade, 0));
  transition: opacity 0.5s ease;
}

.hero-brain {
  position: absolute;
  left: -10%;
  top: 48%;
  transform: translateY(-50%);
  width: min(760px, 86vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  filter: saturate(1.1);
  will-change: transform, opacity;
}

.brain-svg {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: calc(0.32 + var(--brain-intensity, 0.6) * 0.5);
  transition: opacity 0.3s ease;
}

.brain-lines path {
  stroke: url(#brain-stroke);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120 170;
  animation: brain-flow-loop 11s linear infinite;
  opacity: calc(0.6 + var(--brain-intensity, 0.6) * 0.3);
  will-change: stroke-dashoffset, opacity, filter;
}

.brain-nodes circle {
  fill: #c9a227;
  opacity: calc(0.36 + var(--brain-intensity, 0.6) * 0.5);
  filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.38));
}

.brain-lines.layer-2 path {
  stroke: rgba(255, 217, 102, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 90 140;
  animation: brain-flow-loop-soft 14s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.brain-lines.layer-3 path {
  stroke: rgba(79, 70, 229, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: 70 120;
  animation: brain-flow-loop-deep 16s linear infinite reverse;
  mix-blend-mode: screen;
  opacity: 0.45;
}

.brain-lines path:nth-child(3n) {
  animation-duration: 13s;
  animation-delay: -2s;
  stroke-dasharray: 140 190;
}

.brain-lines path:nth-child(4n) {
  animation-duration: 10s;
  animation-delay: -4s;
  opacity: calc(0.5 + var(--brain-intensity, 0.6) * 0.35);
}

.brain-lines path:nth-child(5n) {
  animation-duration: 12s;
  animation-delay: -6s;
  stroke-width: 1.3;
}

.brain-core {
  position: absolute;
  inset: 38%;
  display: grid;
  place-items: center;
}

.brain-glow {
  position: absolute;
  inset: 12% 16%;
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.4), rgba(11, 18, 32, 0) 60%),
    radial-gradient(circle at 55% 40%, rgba(201, 162, 39, 0.32), rgba(11, 18, 32, 0) 55%);
  opacity: calc(0.45 + var(--brain-intensity, 0.6) * 0.35);
  filter: drop-shadow(0 0 20px rgba(255, 217, 102, 0.35));
  transition: opacity 0.4s ease;
}

.turbo-hero {
  --turbo-size: 210px;
  --blades-size: 260px;
  --blade-length: 56px;
  --blade-width: 3px;
  --turbo-bg: radial-gradient(circle at 30% 30%, #1e1b4b, #0b1220 60%);
  box-shadow: 0 0 24px rgba(79, 70, 229, 0.5), 0 0 32px rgba(201, 162, 39, 0.35);
}

.turbo-hero .blades {
  filter: drop-shadow(0 0 12px rgba(252, 211, 77, 0.3));
}

.turbo-hero .blades::before,
.turbo-hero .blades::after,
.turbo-hero .blades span {
  opacity: 0;
}

@keyframes brain-flow-loop {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -180; opacity: 0.94; }
  100% { stroke-dashoffset: -360; opacity: 0.65; }
}

@keyframes brain-flow-loop-soft {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -140; opacity: 0.72; }
  100% { stroke-dashoffset: -280; opacity: 0.55; }
}

@keyframes brain-flow-loop-deep {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -200; opacity: 0.7; }
  100% { stroke-dashoffset: -400; opacity: 0.45; }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}

.subhead, .section-subhead {
  color: var(--subtext);
  max-width: 620px;
}

#integrations .section-head {
  text-align: center;
}

#integrations .section-head h2,
#integrations .section-subhead {
  text-align: center;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 16px;
}

.just-logic {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 10px;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 700;
  color: #ffd966;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(255, 217, 102, 0.45);
  letter-spacing: 0.5px;
}

.services-tagline {
  display: block;
  margin: 24px 0 32px;
  padding: 0;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.4;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.hero-metrics span {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-glow);
}

@media (max-width: 1100px) {
  .hero-brain {
    width: min(620px, 92vw);
    left: -14%;
  }

  .brain-core {
    inset: 40%;
  }
}

@media (max-width: 900px) {
  .hero-brain {
    width: min(520px, 110vw);
    left: -18%;
    opacity: 0.72;
  }

  .turbo-hero {
    --turbo-size: 180px;
    --blades-size: 220px;
  }
}

@media (max-width: 640px) {
  .hero-brain {
    width: min(420px, 120vw);
    left: -32%;
    top: 46%;
    opacity: 0.55;
  }

  .brain-core {
    inset: 44%;
  }

  .brain-lines path {
    stroke-width: 1.2;
    stroke-dasharray: 120 150;
  }

  .brain-nodes {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-bg {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brain-lines path {
    animation: none;
  }

  .turbo-hero .blades {
    animation: none;
    filter: none;
  }
}

.hero-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.hero-card ul {
  padding-left: 18px;
  margin: 12px 0 18px;
  color: var(--subtext);
}

.section {
  padding: 70px 0;
}

.section.muted {
  background: var(--muted);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.section.light {
  background:
    radial-gradient(circle at 18% 18%, rgba(79, 70, 229, 0.06), transparent 42%),
    radial-gradient(circle at 82% 32%, rgba(201, 162, 39, 0.05), transparent 46%),
    var(--light);
  color: var(--ink);
}

.section.light p,
.section.light .section-subhead,
.section.light .note {
  color: var(--muted-ink);
}

:root[data-theme="dark"] #faq.section.light,
:root[data-theme="dark"] #about.section.light,
:root[data-theme="dark"] #process.section.light {
  background: var(--muted);
  color: var(--text);
}

:root[data-theme="dark"] #faq.section.light p,
:root[data-theme="dark"] #faq.section.light .section-subhead,
:root[data-theme="dark"] #faq.section.light .note,
:root[data-theme="dark"] #process.section.light p,
:root[data-theme="dark"] #process.section.light .section-subhead,
:root[data-theme="dark"] #process.section.light .note {
  color: var(--subtext);
}

:root[data-theme="dark"] #faq.section.light .faq details {
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
}

:root[data-theme="dark"] #faq.section.light summary {
  color: var(--text);
}

:root[data-theme="dark"] #process.section.light .step {
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
}

:root[data-theme="dark"] #process.section.light .step p,
:root[data-theme="dark"] #process.section.light .step h4 {
  color: var(--text);
}

.section-head {
  margin-bottom: 32px;
}

.section-head h2 {
  font-size: clamp(26px, 4vw, 36px);
}

.grid {
  display: grid;
  gap: 16px;
}

.cards {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--stroke-dark);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.card.light {
  background: var(--card-light);
  border: 1px solid var(--stroke);
  color: var(--ink);
}

.card.light p,
.card.light li {
  color: var(--muted-ink);
}

.benefits {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.benefit {
  background: var(--panel);
  border: 1px solid var(--stroke-dark);
  border-radius: var(--radius);
  padding: 18px;
}

.timeline {
  display: grid;
  gap: 16px;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-dark);
  background: var(--panel);
}

.step-badge {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-weight: 700;
}

.section.light .step {
  background: var(--card-light);
  border: 1px solid var(--stroke);
  color: var(--ink);
}

.section.light .step p,
.section.light .step h4 {
  color: var(--ink);
}

.cases {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.case {
  background: var(--panel);
  border: 1px solid var(--stroke-dark);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.cta {
  padding: 60px 0;
  background: linear-gradient(135deg, #0b1220, #020617);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.contact {
  display: grid;
  gap: 18px;
}

.chat-support {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
              0 0 30px rgba(79, 70, 229, 0.4);
  display: grid;
  gap: 14px;
  position: relative;
  overflow: visible;
  animation: chatGlow 4s ease-in-out infinite;
}

@keyframes chatGlow {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
                0 0 25px rgba(79, 70, 229, 0.3),
                0 0 40px rgba(79, 70, 229, 0.1);
  }
  50% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
                0 0 35px rgba(79, 70, 229, 0.5),
                0 0 60px rgba(201, 162, 39, 0.3);
  }
}

.chat-body {
  background: var(--input-bg);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
  min-height: 240px;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.message {
  display: flex;
  gap: 12px;
  max-width: 640px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke-dark);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
}

.message.agent {
  border-color: rgba(79, 70, 229, 0.25);
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.16);
}

.message.user {
  margin-left: auto;
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.12);
  box-shadow: 0 6px 16px rgba(201, 162, 39, 0.22);
}

.message-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(79, 70, 229, 0.3);
  background: var(--panel);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.message.user .message-avatar {
  display: none;
}

.message-content {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.message-meta {
  font-size: 12px;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message-text {
  font-size: 15px;
  line-height: 1.5;
}

.chat-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.chat-input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}

.chat-input:focus {
  outline: 2px solid rgba(124, 58, 237, 0.6);
  border-color: var(--accent);
}

.note {
  margin: 0;
  font-size: 13px;
  color: var(--subtext);
}

.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--stroke);
  background: var(--panel);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-contact a {
  color: var(--accent);
}

.gold-text {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-glow);
}

.gold-glow {
  box-shadow: 0 0 12px var(--gold-glow);
}

.section.light .case {
  background: var(--card-light);
  border: 1px solid var(--stroke);
  color: var(--ink);
}

.section.light .case p,
.section.light .case h4 {
  color: var(--ink);
}

.section.light .faq details {
  background: var(--card-light);
  border: 1px solid var(--stroke);
  color: var(--ink);
}

.section.light .faq summary {
  color: var(--ink);
}

.section.light .benefit {
  background: var(--card-light);
  border: 1px solid var(--stroke);
  color: var(--ink);
}

.integration-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

#integrations .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(16px, 5vw, 48px);
}

.integration-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.three-carousels {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 520px;
}

.carousel-wrapper {
  position: relative;
  width: min(1200px, 100%);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: none;
  display: grid;
}

.logo-carousel {
  position: relative;
  width: 100%;
  min-height: 520px;
  aspect-ratio: 2.2 / 1;
  perspective: var(--perspective, 1200px);
  border: none;
  border-radius: 14px;
  overflow: visible;
  background:
    radial-gradient(circle at 45% 30%, rgba(99, 102, 241, 0.12), transparent 38%),
    radial-gradient(circle at 78% 68%, rgba(201, 162, 39, 0.14), transparent 36%),
    #0b1222;
}

@media (min-width: 769px) {
  .logo-carousel {
    padding: 60px;
    margin: -60px;
  }
}

.logo-carousel::before {
  content: "";
  position: absolute;
  inset: 14% 10%;
  border: none;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.carousel-rotator {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.triple-carousel {
  position: relative;
}

.triple-carousel .carousel-rotator.ring {
  position: absolute;
  inset: 0;
}

.triple-carousel .carousel-rotator.apps { z-index: 3; }
.triple-carousel .carousel-rotator.crm { z-index: 2; }
.triple-carousel .carousel-rotator.enterprise { z-index: 1; }

.logo-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-size, 78px);
  height: var(--card-size, 78px);
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px;
  text-align: center;
  transform-style: preserve-3d;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  border: none;
  box-shadow: none;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.logo-card img {
  max-width: 54px;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.logo-card .logo-label {
  font-size: 12px;
  color: var(--subtext);
}

.logo-card .logo-fallback {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.logo-card.is-front {
  border-color: transparent;
  box-shadow: none;
  background: rgba(15, 23, 42, 0.92);
}

.carousel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--subtext);
  font-size: 12px;
}

.carousel-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, 0.03);
}

.carousel {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  background: #0b1222;
  padding: 10px 6px;
}

.carousel-track {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  animation: scroll var(--speed, 24s) linear infinite;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  white-space: nowrap;
  font-size: 14px;
  transition: box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.logo-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.faq {
  display: grid;
  gap: 16px;
}

.faq details {
  background: rgba(79, 70, 229, 0.08);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.faq details:hover {
  border-color: var(--accent-strong);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.2);
  transform: translateY(-2px);
  background: rgba(79, 70, 229, 0.12);
}

.faq details[open] {
  background: rgba(79, 70, 229, 0.15);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.2);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  user-select: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: '➕';
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq details[open] summary::before {
  content: '➖';
  color: var(--gold);
  transform: rotate(180deg);
}

.faq summary:hover {
  color: var(--accent);
}

.faq p {
  margin-top: 12px;
  padding-left: 32px;
  line-height: 1.7;
}

:root[data-theme="light"] .faq details {
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.4);
}

:root[data-theme="light"] .faq details:hover {
  background: rgba(79, 70, 229, 0.1);
  border-color: rgba(79, 70, 229, 0.6);
}

:root[data-theme="light"] .faq details[open] {
  background: rgba(201, 162, 39, 0.1);
  border-color: var(--gold);
}

.pricing .card {
  display: grid;
  gap: 8px;
}

.list {
  padding-left: 18px;
  margin: 6px 0 0;
  color: var(--subtext);
}

/* ============================================
   Mobile Menu with Hamburger
   ============================================ */

.mobile-menu-button {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  width: 56px;
  height: 56px;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  will-change: left;
}

.mobile-menu-button:hover {
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
  transform: scale(1.05);
}

.hamburger-line {
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-button.active .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  background: var(--gold);
}

.mobile-menu-button.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-button.active .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  background: var(--gold);
}


.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--panel);
  border-right: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  padding: 80px 20px 20px;
  transform: translateX(-100%);
  overflow-y: auto;
  will-change: transform;
}

.mobile-nav-link {
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
  margin-bottom: 8px;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: var(--nav-hover-bg);
  color: var(--accent);
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-theme-toggle,
.mobile-language-switcher {
  width: 100%;
  justify-content: flex-start;
}

/* ============================================
   Mobile Carousels for Cards
   ============================================ */

@media (max-width: 768px) {
  .mobile-menu-button {
    display: flex;
  }

  .site-header .nav,
  .site-header .header-actions {
    display: none;
  }

  .site-header {
    padding: 8px 0;
  }

  .header-inner {
    justify-content: center;
  }

  .logo {
    font-size: 18px;
  }

  /* Horizontal scroll carousel for service cards */
  .grid.cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    gap: 16px;
    padding: 0 4vw 16px;
    scroll-padding: 0 4vw;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .grid.cards .card {
    min-width: 88vw;
    max-width: 88vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
  }

  /* Horizontal scroll carousel for benefits */
  .grid.benefits {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    gap: 16px;
    padding: 0 4vw 16px;
    scroll-padding: 0 4vw;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .grid.benefits .benefit {
    min-width: 88vw;
    max-width: 88vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
  }

  /* Visible scrollbar for better UX */
  .grid.cards::-webkit-scrollbar,
  .grid.benefits::-webkit-scrollbar {
    height: 8px;
  }

  .grid.cards::-webkit-scrollbar-track,
  .grid.benefits::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin: 0 4vw;
  }

  .grid.cards::-webkit-scrollbar-thumb,
  .grid.benefits::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(79, 70, 229, 0.5);
  }

  .grid.cards::-webkit-scrollbar-thumb:active,
  .grid.benefits::-webkit-scrollbar-thumb:active {
    background: linear-gradient(90deg, var(--accent-strong), var(--gold));
  }

  /* Integrations section mobile layout */
  .three-carousels {
    width: 100%;
    min-height: 900px;
    overflow: visible;
    padding: 80px 0;
  }

  .logo-carousel {
    min-height: 740px;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  /* Typography scaling for mobile */
  h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  h3 {
    font-size: clamp(18px, 4.5vw, 24px) !important;
  }

  h4 {
    font-size: clamp(16px, 4vw, 20px) !important;
  }

  body {
    font-size: 16px;
    line-height: 1.7;
  }

  .container {
    width: min(1200px, 94vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }

  /* Sections spacing */
  .section {
    padding: 50px 0;
  }

  .hero {
    padding: 60px 0 30px;
  }

  /* Cards full width on mobile */
  .card,
  .benefit,
  .hero-card {
    width: 100%;
  }

  /* Buttons full width */
  .btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  /* Touch targets minimum 44px */
  .nav a,
  .mobile-nav-link,
  .control,
  .lang-select,
  button {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Hero metrics stack vertically */
  .hero-metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* CTA section */
  .cta {
    padding: 40px 0;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Timeline steps */
  .step {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }

  .step-badge {
    margin: 0 auto;
  }

  /* Chat support */
  .chat-body {
    min-height: 200px;
    max-height: 280px;
  }

  .message-avatar {
    width: 60px;
    height: 60px;
  }

  .chat-input-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Hero brain - centered on mobile, background layer */
  .hero-brain {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 90vw);
    opacity: 0.6;
    filter: saturate(1.1);
    z-index: 0;
    pointer-events: none;
  }
  
  /* Ensure hero content is above brain and clickable */
  .hero-text,
  .hero-card {
    position: relative;
    z-index: 10;
    pointer-events: auto;
  }
  
  .hero-card .btn,
  .hero-card a {
    position: relative;
    z-index: 11;
    pointer-events: auto !important;
    cursor: pointer;
  }
  
  .hero-card {
    isolation: isolate;
  }

  /* Section heads centered on mobile */
  .section-head {
    text-align: center;
  }

  .section-head .eyebrow,
  .section-head h2,
  .section-head .section-subhead {
    margin-left: auto;
    margin-right: auto;
  }

  /* Cookie banner mobile */
  .cookie-banner {
    padding: 16px;
  }

  .cookie-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .cookie-banner-actions .btn {
    width: 100%;
  }

  .cookie-modal-content {
    max-height: 90vh;
  }

  .cookie-modal-footer {
    flex-direction: column;
  }

  .cookie-modal-footer .btn {
    width: 100%;
  }
}

/* Small phones optimization */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  h2 {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

  .container {
    width: min(1200px, 96vw);
  }

  .section {
    padding: 40px 0;
  }

  .hero {
    padding: 50px 0 20px;
  }

  .hero-brain {
    width: min(500px, 85vw);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  
  .hero-text,
  .hero-card {
    z-index: 10;
    pointer-events: auto;
  }
  
  .hero-card .btn,
  .hero-card a {
    z-index: 11;
    pointer-events: auto !important;
    cursor: pointer;
  }
  
  .hero-card {
    isolation: isolate;
  }

  /* Smaller turbines on small screens */
  .with-dot .turbo-circle {
    --turbo-size: 48px;
    --blades-size: 56px;
  }

  /* Reduce spacing */
  .grid {
    gap: 12px;
  }

  .faq {
    gap: 12px;
  }

  .faq details {
    padding: 14px 16px;
  }

  .faq summary {
    font-size: 15px;
  }

  .faq p {
    padding-left: 28px;
  }

  /* Chat adjustments */
  .message-avatar {
    width: 50px;
    height: 50px;
  }

  .message {
    font-size: 14px;
  }

  /* Just logic text smaller */
  .just-logic {
    font-size: clamp(26px, 7vw, 42px);
    padding: 0;
    margin: 0 0 14px;
  }

  .services-tagline {
    font-size: clamp(20px, 5vw, 30px);
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav {
    flex-wrap: wrap;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 60px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .carousel-track {
    animation-duration: 18s;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 60px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 780px) {
  .logo-carousel {
    min-height: 230px;
    aspect-ratio: 1 / 0.9;
  }

  .logo-card {
    width: 108px;
    height: 108px;
  }
}

@media (max-width: 600px) {
  .logo-carousel {
    min-height: 210px;
    aspect-ratio: 1 / 1;
  }

  .logo-card {
    width: 102px;
    height: 102px;
  }
}

@media (max-width: 540px) {
  .three-carousels {
    min-height: 0;
  }

  .logo-carousel {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================
   Cookie Consent Banner & Modal
   ============================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--panel);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  padding: 20px;
  animation: slideUp 0.4s ease-out;
}

.cookie-banner[hidden] {
  display: none;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  align-items: center;
}

@media (min-width: 900px) {
  .cookie-banner-inner {
    grid-template-columns: 1fr auto auto;
    gap: 24px;
  }
}

.cookie-banner-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--subtext);
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner-actions .btn {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 40px;
}

.cookie-privacy-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.cookie-privacy-link:hover {
  color: var(--gold);
}

/* Cookie Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: modalSlide 0.35s ease-out;
}

@keyframes modalSlide {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--stroke);
}

.cookie-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.cookie-modal-close {
  background: none;
  border: none;
  color: var(--subtext);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.cookie-modal-close:hover {
  background: var(--nav-hover-bg);
  color: var(--text);
}

.cookie-modal-body {
  padding: 20px;
}

.cookie-modal-body > p {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--subtext);
}

.cookie-category {
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--stroke-dark);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.cookie-category:hover {
  border-color: var(--stroke);
}

.cookie-category:last-child {
  margin-bottom: 0;
}

.cookie-category-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.cookie-category-info h4 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.cookie-category-info p {
  margin: 0;
  font-size: 13px;
  color: var(--subtext);
  line-height: 1.5;
}

/* Toggle Switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--stroke);
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cookie-toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  background: linear-gradient(135deg, var(--accent), var(--gold));
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(22px);
}

.cookie-toggle.disabled .cookie-toggle-slider {
  background: rgba(79, 70, 229, 0.4);
  cursor: not-allowed;
}

.cookie-toggle.disabled input:checked + .cookie-toggle-slider {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.6), rgba(201, 162, 39, 0.6));
}

.cookie-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--stroke);
}

.cookie-modal-footer .btn {
  flex: 1;
  min-width: 140px;
}

/* Footer Cookie Settings Button */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-legal a {
  color: var(--accent);
  font-size: 14px;
}

.footer-cookie-btn {
  background: none;
  border: none;
  color: var(--subtext);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.2s ease;
}

.footer-cookie-btn:hover {
  color: var(--accent);
}

/* Light theme adjustments */
:root[data-theme="light"] .cookie-banner {
  background: var(--card-light);
  border-top-color: var(--stroke);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .cookie-modal-content {
  background: var(--card-light);
}

:root[data-theme="light"] .cookie-category {
  background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="light"] .cookie-modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .cookie-banner {
    padding: 16px;
  }

  .cookie-banner-actions {
    flex-direction: column;
  }

  .cookie-banner-actions .btn {
    width: 100%;
  }

  .cookie-modal-content {
    max-height: 90vh;
  }

  .cookie-modal-footer {
    flex-direction: column;
  }

  .cookie-modal-footer .btn {
    width: 100%;
  }
}

/* ============================================
   Chat Typing Indicator
   ============================================ */

.typing-indicator .message-text {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
}

.typing-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat input disabled state */
.chat-support input:disabled,
.chat-support button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}