/* ============================================================
   Novagenixai — Warm Editorial Minimal
   Fonts: Fraunces (display) + Inter (body)
   Themes: light (warm paper) / dark (deep ink) via data-theme
   ============================================================ */

:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Light theme (default) — warm paper */
  --bg: #faf6f0;
  --bg-raised: #ffffff;
  --bg-sunken: #f1ebe2;
  --text: #211d2e;
  --text-soft: #5d5870;
  --line: #e3dccf;
  --accent: #5b21b6;
  --accent-soft: #ede9fe;
  --accent-contrast: #ffffff;
  --amber: #b45309;
  --orb-a: #c4b5fd;
  --orb-b: #fcd34d;
  --shadow: 0 10px 30px rgba(33, 29, 46, 0.08);
}

[data-theme="dark"] {
  --bg: #0f0d18;
  --bg-raised: #181527;
  --bg-sunken: #0a0812;
  --text: #edeaf6;
  --text-soft: #a49fc0;
  --line: #2a2640;
  --accent: #a78bfa;
  --accent-soft: #251f3f;
  --accent-contrast: #16112b;
  --amber: #fbbf24;
  --orb-a: #4c1d95;
  --orb-b: #92400e;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Author `display:` rules (e.g. .form-success { display: grid }) would
   otherwise beat the browser's default [hidden] { display: none }. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; }

p { max-width: 65ch; }

a { color: var(--accent); }

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

.container {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.15rem;
  color: var(--text-soft);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 4px;
  background: linear-gradient(135deg, var(--accent), var(--amber));
  animation: brand-pulse 4s ease-in-out infinite;
}

@keyframes brand-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* Default nav link — soft colour, no decoration. */
.site-nav a,
.site-nav a:link,
.site-nav a:visited {
  color: var(--text-soft);
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border: 0;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hover/focus slightly brightens so the user knows it's interactive. */
.site-nav a:hover,
.site-nav a:active,
.site-nav a:focus {
  color: var(--text);
  background: transparent;
}

/* Current/active page gets the accent colour + semibold so the visitor
   always knows which page they are on. */
.site-nav a[aria-current="page"],
.site-nav a.active,
.site-nav a.current {
  color: var(--accent);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
}

/* Mouse/touch clicks leave no lingering ring; keyboard users still get the
   global :focus-visible outline for accessibility. */
.site-nav a:focus:not(:focus-visible) { outline: none; }

.site-nav a.nav-cta {
  color: var(--accent);
  font-weight: 600;
}

/* Login / Sign up live in the header-actions on desktop. The same two links
   are duplicated inside .site-nav (class .nav-auth) so they appear in the
   hamburger drop-down on smaller screens; only one set is visible at a time. */
.site-nav a.nav-auth { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-login {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.header-login:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.btn-sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-signup { margin-right: 0.2rem; }

.theme-toggle {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text);
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.3s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Inline SVG icons (no icon font / unicode glyphs, so nothing can render as
   garbled text). Both icons sit in the same cell; only one is visible. */
.theme-toggle svg {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
  display: block;
}

/* Light theme shows the moon ("switch to dark"), dark theme shows the sun.
   Selectors include `.theme-toggle` so they outrank `.theme-toggle svg`
   above — a bare `.icon-sun` rule lost that fight and both icons showed. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle:hover { color: var(--amber); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--bg-raised);
}

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

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .lead {
  margin-top: 1.2rem;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}

.hero-note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* Signature visual anchor: soft gradient orb */
.hero-orb {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--orb-a), var(--orb-b) 70%, transparent 72%);
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
  animation: orb-drift 14s ease-in-out infinite alternate;
}

@keyframes orb-drift {
  from { transform: translateX(-56%) scale(1); }
  to   { transform: translateX(-44%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
  .story-art { animation: none; }
  .story-art[class*="story-enter-"] { opacity: 1; transform: none; }
  .story-enter-pricing .spl-1,
  .story-enter-pricing .spl-2,
  .story-enter-pricing .spl-3,
  .story-enter-pricing .spl-4,
  .story-enter-pricing .spl-5,
  .story-enter-pricing .spl-6,
  .story-enter-pricing .spl-7,
  .story-enter-pricing .spl-8,
  .story-enter-pricing .spl-9 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .aside-art { animation: none; }
  .hero-art { animation: none; }
  .gpu-compute-illustration { animation: none; }
  .brand-mark { animation: none; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .team-card:hover .team-avatar img { transform: none; filter: none; }
  .trust-bar-item:hover .trust-bar-icon { transform: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }

.section-alt {
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
}

.section-intro {
  margin-top: 1rem;
  color: var(--text-soft);
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease-out;
}

.card.visible {
  opacity: 1;
  transform: translateY(0);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card.visible:hover {
  transform: translateY(-4px);
}

.card-icon { font-size: 1.8rem; }

.card p { color: var(--text-soft); font-size: 0.95rem; }

.card-link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.card-link:hover { text-decoration: underline; }

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  counter-reset: step;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--text-soft); font-size: 0.95rem; }

/* ---------- Values ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}

.value {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.value.visible {
  opacity: 1;
  transform: translateY(0);
}
.value h3 { margin-bottom: 0.4rem; }
.value p { color: var(--text-soft); font-size: 0.95rem; }

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.team-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.team-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--line);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.team-card:hover .team-avatar img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.3));
}

.team-card h3 { margin-bottom: 0.25rem; }

.team-role {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--brand-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.team-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--accent-soft);
  border-block: 1px solid var(--line);
}

.cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
  background: var(--bg-sunken);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer-brand p {
  margin-top: 0.8rem;
  color: var(--text-soft);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
}

.footer-links h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  margin-bottom: 0.8rem;
}

.footer-links a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  padding-block: 0.25rem;
}

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

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 1.2rem;
  font-size: 0.82rem;
  color: var(--text-soft);
}

.footer-address {
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.page-hero .lead { margin-top: 1rem; }

/* ---------- Product card grid (products page) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.product-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.6s ease-out;
  /* Staggered entrance via custom property */
  animation: product-card-enter 0.5s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}

@keyframes product-card-enter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scroll-entry animation — JS Observer adds .visible or CSS fallback via animation */
.product-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(33, 29, 46, 0.12);
}

.product-card.visible:hover {
  transform: translateY(-4px);
}

.product-card-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 0.2rem;
  background: var(--bg-sunken);
  aspect-ratio: 400 / 280;
  object-fit: contain;
  /* Gentle continuous float animation — alive but subtle */
  animation: product-img-float 5s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
  position: relative;
}

/* Image glow on card hover — parent hover affects child */
.product-card:hover .product-card-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
          drop-shadow(0 0 32px rgba(14, 165, 233, 0.25))
          drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  animation: product-img-hover-glow 2.5s ease-in-out infinite;
}

/* ── Product card image scroll-entry animations (9 unique motions) ── */

/* 1 — WriteAI: slide left → right (typewriter, text scroll feel) */
.story-enter-card-1 {
  opacity: 0;
  transform: translateX(-60px);
}
.story-enter-card-1.visible {
  animation: story-enter-card-1 0.7s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-1 {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 2 — CanvasStudio: scale bounce (paint-color pop, like pricing-plans) */
.story-enter-card-2 {
  opacity: 0;
  transform: scale(0.85);
}
.story-enter-card-2.visible {
  animation: story-enter-card-2 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-2 {
  from  { opacity: 0; transform: scale(0.85); }
  60%   { transform: scale(1.04); }
  to    { opacity: 1; transform: scale(1); }
}

/* 3 — VoiceAI: slide up + wave (sound-wave rise) */
.story-enter-card-3 {
  opacity: 0;
  transform: translateY(30px);
}
.story-enter-card-3.visible {
  animation: story-enter-card-3 0.8s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-3 {
  from  { opacity: 0; transform: translateY(30px); }
  70%   { transform: translateY(-5px); }
  to    { opacity: 1; transform: translateY(0); }
}

/* 4 — CodeAI: slide right → left (code terminal scroll) */
.story-enter-card-4 {
  opacity: 0;
  transform: translateX(50px);
}
.story-enter-card-4.visible {
  animation: story-enter-card-4 0.7s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-4 {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 5 — DataAI: 3D Y-axis flip (data viz card flip) */
.story-enter-card-5 {
  opacity: 0;
  transform: perspective(600px) rotateY(90deg) scale(0.8);
}
.story-enter-card-5.visible {
  animation: story-enter-card-5 0.75s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-5 {
  from { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.8); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0deg) scale(1); }
}

/* 6 — LegalAI: big pulse scale (gavel strike, authoritative) */
.story-enter-card-6 {
  opacity: 0;
  transform: scale(0.7);
}
.story-enter-card-6.visible {
  animation: story-enter-card-6 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-6 {
  from { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* 7 — ChatAI: blur + fade (chat bubble appearing) */
.story-enter-card-7 {
  opacity: 0;
  filter: blur(8px);
}
.story-enter-card-7.visible {
  animation: story-enter-card-7 0.7s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-7 {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 8 — SEOAI: zoom-in (magnifying glass) */
.story-enter-card-8 {
  opacity: 0;
  transform: scale(0.6);
}
.story-enter-card-8.visible {
  animation: story-enter-card-8 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-8 {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* 9 — VideoAI: slide bottom → top (play-bar rise, cinematic) */
.story-enter-card-9 {
  opacity: 0;
  transform: translateY(50px);
}
.story-enter-card-9.visible {
  animation: story-enter-card-9 0.7s ease-out forwards;
  animation-delay: calc((var(--card-index, 0) - 1) * 80ms);
}
@keyframes story-enter-card-9 {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .product-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .product-card-img {
    animation: none !important;
  }
  .story-enter-card-1,
  .story-enter-card-1.visible,
  .story-enter-card-2,
  .story-enter-card-2.visible,
  .story-enter-card-3,
  .story-enter-card-3.visible,
  .story-enter-card-4,
  .story-enter-card-4.visible,
  .story-enter-card-5,
  .story-enter-card-5.visible,
  .story-enter-card-6,
  .story-enter-card-6.visible,
  .story-enter-card-7,
  .story-enter-card-7.visible,
  .story-enter-card-8,
  .story-enter-card-8.visible,
  .story-enter-card-9,
  .story-enter-card-9.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .product-card.visible:hover,
  .product-card:hover {
    transform: none;
  }
  .story-art:hover {
    transform: none;
    animation: none;
    filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  }
  .team-art-row .story-art {
    animation: none !important;
  }

  /* Story-art entry animations — disable and show fully */
  .story-art[class*="story-enter-"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  }
  .story-enter-pricing .spl-1,
  .story-enter-pricing .spl-2,
  .story-enter-pricing .spl-3,
  .story-enter-pricing .spl-4,
  .story-enter-pricing .spl-5,
  .story-enter-pricing .spl-6,
  .story-enter-pricing .spl-7,
  .story-enter-pricing .spl-8,
  .story-enter-pricing .spl-9 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@keyframes product-img-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.015);
  }
}

@keyframes product-img-hover-glow {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
            drop-shadow(0 0 32px rgba(14, 165, 233, 0.25))
            drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  }
  33% {
    filter: drop-shadow(0 0 22px rgba(14, 165, 233, 0.5))
            drop-shadow(0 0 36px rgba(250, 204, 21, 0.3))
            drop-shadow(0 0 10px rgba(139, 92, 246, 0.25));
  }
  66% {
    filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.45))
            drop-shadow(0 0 34px rgba(139, 92, 246, 0.3))
            drop-shadow(0 0 10px rgba(14, 165, 233, 0.3));
  }
}

.product-card .eyebrow {
  margin-bottom: 0;
}

.product-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.product-card .tagline {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin: 0;
}

.product-card .price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.product-card .price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-soft);
}

.product-card .feature-list {
  flex: 1;
  margin-top: 0;
}

.product-card .btn {
  align-self: flex-start;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Illustrations (custom SVG artwork) ---------- */
.hero-art {
  margin-top: 3rem;
  width: min(640px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(33, 29, 46, 0.14));
}

.product-art {
  width: 100%;
  height: auto;
}

.story-art {
  display: block;
  width: min(640px, 100%);
  height: auto;
  margin: 2.5rem auto 0;
  filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Glowing hover effect on story-art illustrations (pricing page, about page, etc.) */
.story-art:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
          drop-shadow(0 0 32px rgba(14, 165, 233, 0.25))
          drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  animation: story-art-hover-glow 2.5s ease-in-out infinite;
}

@keyframes story-art-hover-glow {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
            drop-shadow(0 0 32px rgba(14, 165, 233, 0.25))
            drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  }
  33% {
    filter: drop-shadow(0 0 22px rgba(14, 165, 233, 0.5))
            drop-shadow(0 0 36px rgba(250, 204, 21, 0.3))
            drop-shadow(0 0 10px rgba(139, 92, 246, 0.25));
  }
  66% {
    filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.45))
            drop-shadow(0 0 34px rgba(139, 92, 246, 0.3))
            drop-shadow(0 0 10px rgba(14, 165, 233, 0.3));
  }
}

/* Team-art image gentle floating animation (about page) */
@keyframes team-art-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.01);
  }
}

/* ── Story-art scroll-entry animations ── */

/* 1. Index — idea-journey: slide right + fade (idea travelling along its path) */
.story-enter-idea {
  opacity: 0;
  transform: translateX(-40px);
}
.story-enter-idea.visible {
  animation: story-enter-idea 0.7s ease-out forwards;
}
@keyframes story-enter-idea {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. Pricing — pricing-plans: container is always visible; children drive entry. */
.story-enter-pricing {
  opacity: 1;
}
.story-enter-pricing.visible {
  /* no parent animation; .spl-N children handle staggered entry */
}

/* Spl-* child-element scroll-entry animations inside the pricing SVG
   Each spl-N is a visual group inside the inline SVG.
   Staggered with 80ms delays from spl-1 (delay 0) through spl-9 (delay 640ms). */
.story-enter-pricing .spl-1 { opacity: 0; transform: scale(0.8); transform-origin: 320px 170px; }
.story-enter-pricing .spl-2 { opacity: 0; transform: translateX(-40px); }
.story-enter-pricing .spl-3 { opacity: 0; transform: scale(0.6); transform-origin: 327px 160px; }
.story-enter-pricing .spl-4 { opacity: 0; transform: translateX(40px); }
.story-enter-pricing .spl-5 { opacity: 0; }
.story-enter-pricing .spl-6 { opacity: 0; transform: translateY(30px); }
.story-enter-pricing .spl-7 { opacity: 0; transform: scale(0.5); transform-origin: 320px 160px; }
.story-enter-pricing .spl-8 { opacity: 0; transform: rotate(-30deg); transform-origin: 320px 160px; }
.story-enter-pricing .spl-9 { opacity: 0; transform: translateY(20px); }

.story-enter-pricing.visible .spl-1 {
  animation: story-spl-1 0.8s ease-out forwards;
  animation-delay: 0ms;
}
.story-enter-pricing.visible .spl-2 {
  animation: story-spl-2 0.7s ease-out forwards;
  animation-delay: 80ms;
}
.story-enter-pricing.visible .spl-3 {
  animation: story-spl-3 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 160ms;
}
.story-enter-pricing.visible .spl-4 {
  animation: story-spl-4 0.7s ease-out forwards;
  animation-delay: 240ms;
}
.story-enter-pricing.visible .spl-5 {
  animation: story-spl-5 0.6s ease-out forwards;
  animation-delay: 320ms;
}
.story-enter-pricing.visible .spl-6 {
  animation: story-spl-6 0.7s ease-out forwards;
  animation-delay: 400ms;
}
.story-enter-pricing.visible .spl-7 {
  animation: story-spl-7 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 480ms;
}
.story-enter-pricing.visible .spl-8 {
  animation: story-spl-8 0.65s ease-out forwards;
  animation-delay: 560ms;
}
.story-enter-pricing.visible .spl-9 {
  animation: story-spl-9 0.6s ease-out forwards;
  animation-delay: 640ms;
}

@keyframes story-spl-1 {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes story-spl-2 {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes story-spl-3 {
  from { opacity: 0; transform: scale(0.6); }
  70%  { transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes story-spl-4 {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes story-spl-5 {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes story-spl-6 {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes story-spl-7 {
  from { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes story-spl-8 {
  from { opacity: 0; transform: rotate(-30deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}
@keyframes story-spl-9 {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. About — team-desk (team-art-row): gentle rise (building a studio) */
.story-enter-team {
  opacity: 0;
  transform: translateY(30px);
}
.story-enter-team.visible {
  animation: story-enter-team 0.6s ease-out forwards;
}
@keyframes story-enter-team {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Products — gpu-server: slide up + blue glow pulse (server power-on) */
.story-enter-gpu {
  opacity: 0;
  transform: translateY(20px);
}
.story-enter-gpu.visible {
  animation: story-enter-gpu 0.8s ease-out forwards;
}
@keyframes story-enter-gpu {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  }
  70% {
    filter: drop-shadow(0 0 30px rgba(14, 165, 233, 0.45))
            drop-shadow(0 0 50px rgba(14, 165, 233, 0.2))
            drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  }
}

/* 5. Products bottom — team-desk: fade + zoom (artist story reveal) */
.story-enter-fadezoom {
  opacity: 0;
  transform: scale(0.92);
}
.story-enter-fadezoom.visible {
  animation: story-enter-fadezoom 0.7s ease-out forwards;
}
@keyframes story-enter-fadezoom {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* In dark theme, the GPU power-on glow should use the dark-appropriate filter */
[data-theme="dark"] .story-enter-gpu.visible {
  animation: story-enter-gpu 0.8s ease-out forwards;
}
[data-theme="dark"] .story-enter-gpu {
  filter: brightness(0.9) saturate(1.05) drop-shadow(0 14px 34px rgba(0, 0, 0, 0.5));
}

/* 5. Product sections (product-detail) — fade-up with a soft bounce for section entry */
.story-enter-section {
  opacity: 0;
  transform: translateY(24px);
}
.story-enter-section.visible {
  animation: story-enter-section 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes story-enter-section {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Team stats row */
.team-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 380px;
  width: 100%;
}
.team-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  justify-content: center;
  min-height: 100px;
}
.team-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}
.team-stat-label {
  font-size: 0.8rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Story-art row: image + stats side-by-side on desktop, stacked on mobile */
.team-art-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: center;
}
.team-art-row .story-art {
  width: min(400px, 100%);
  margin: 0 auto;
  margin-top: 0;
  flex-shrink: 0;
  object-fit: contain;
}
.team-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  width: 100%;
  max-width: 400px;
}
.team-art-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}
.team-art-right p {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 380px;
  width: 100%;
  text-align: center;
}

/* -------- Team-art row: image + stats side-by-side, centered; paragraphs below -------- */
@media (min-width: 1024px) {
  .team-art-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  .story-art:not([class*="story-enter-"]),
  .aside-art,
  .hero-art,
  .gpu-compute-illustration {
    animation: team-art-float 6s ease-in-out infinite;
    will-change: transform;
  }

  /* Entry-animated story-art elements get the idle float AFTER their entry completes.
     The .visible class animation fills forwards and then gets cleaned up via JS
     animationend event, at which point this rule applies naturally. */
  .story-art[class*="story-enter-"].visible {
    /* Keep entry animation running; JS removes inline state after animationend */
  }

  .team-art-row .story-art {
    width: min(380px, 100%);
    margin: 0;
    flex-shrink: 0;
  }

  .team-stats {
    width: auto;
    max-width: 320px;
    margin: 0;
  }

  .team-art-right {
    flex-basis: 100%;
    align-items: center;
  }

  .team-art-right p {
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
  }
}

/* Two-column bottom row: server image + side content */
.gpu-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

@media (max-width: 768px) {
  .gpu-bottom-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.gpu-bottom-row .story-art {
  margin-top: 0;
  width: 100%;
  max-width: 640px;
}

/* Left panel: mirrors right panel with heading + image + spec chips */
.gpu-left-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

/* Spec chips grid — 2×2 key-value badges below the server image */
.gpu-spec-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  width: 100%;
  max-width: 440px;
  margin-top: 0.4rem;
}

.gpu-chip {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gpu-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.gpu-chip-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.gpu-chip-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.gpu-chip-value {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

/* Constrain left panel width to match right panel visually */
.gpu-left-panel .story-art {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* Right-side panel: heading + illustration + feature cards */
.gpu-side-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

/* GPU compute SVG illustration */
.gpu-compute-illustration {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-top: 0.2rem;
  filter: drop-shadow(0 12px 28px rgba(33, 29, 46, 0.12));
  border-radius: 12px;
  background: var(--bg-raised);
  padding: 0.75rem;
  border: 1px solid var(--line);
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gpu-compute-illustration:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* Feature cards — 3-column grid matching section design language */
.gpu-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  width: 100%;
  max-width: 440px;
  margin-top: 0.6rem;
}

.gpu-feature-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gpu-feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.gpu-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--accent-soft);
  border-radius: 12px;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.gpu-feature-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.gpu-feature-detail {
  font-size: 0.72rem;
  color: var(--text-soft);
  line-height: 1.4;
}

@media (max-width: 500px) {
  .gpu-feature-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .gpu-feature-card {
    flex-direction: row;
    text-align: left;
    padding: 0.75rem 1rem;
    gap: 0.8rem;
  }
  .gpu-feature-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}

.aside-art {
  width: min(320px, 100%);
  height: auto;
  margin-inline: auto;
}

/* Staggered scroll-entry animation for individual mail icons inside the SVG
   Uses the same product-card-enter style as pricing cards — fade-up + scale-in */
@keyframes mail-icon-enter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Continuous idle animations for each mail icon — paused until .visible */
.mail-icon-letter,
.mail-icon-env {
  animation: none !important;
  transform: none !important;
}
.mail-icon-letter,
.mail-icon-env,
.mail-icon-plane,
.mail-icon-chat {
  filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.08));
}
.mail-icon-plane {
  animation: mail-icon-enter 0.5s ease-out forwards,
             plane-thermal 3.6s ease-in-out infinite;
  animation-play-state: paused, paused;
  animation-delay: 160ms, 160ms;
  animation-fill-mode: forwards, none;
  transform-origin: 395px 91px; /* roughly center of the plane group */
}
.mail-icon-flight {
  /* Flight trail with dash-flow, opacity pulsing, and stroke-width variation
     for a pro, living-trail feel */
  animation: flight-trail-pro 2.8s ease-in-out infinite;
  animation-play-state: paused;
  will-change: stroke-dashoffset, opacity;
}
.mail-icon-chat {
  animation: mail-icon-enter 0.5s ease-out forwards,
             chat-breathe 3.6s ease-in-out infinite;
  animation-play-state: paused, paused;
  animation-delay: 240ms, 240ms;
  animation-fill-mode: forwards, none;
  transform-origin: 101px 82px; /* center of chat bubble */
}
.mail-icon-spark {
  animation: mail-icon-enter 0.5s ease-out forwards,
             spark-orbit 3s ease-in-out infinite;
  animation-play-state: paused, paused;
  animation-delay: 320ms, 0s;
  animation-fill-mode: forwards, none;
}
/* Stagger spark orbits so each moves independently */
.mail-icon-spark:nth-of-type(1) { animation-delay: 320ms, 0s; }
.mail-icon-spark:nth-of-type(2) { animation-delay: 320ms, 0.8s; }
.mail-icon-spark:nth-of-type(3) { animation-delay: 320ms, 1.6s; }

/* Play animations once the element has scrolled into view */
.mail-icon-letter.visible,
.mail-icon-env.visible,
.mail-icon-plane.visible,
.mail-icon-chat.visible,
.mail-icon-spark.visible {
  animation-play-state: running, running;
}
/* Flight trail has only one animation so single play-state value */
.mail-icon-flight.visible {
  animation-play-state: running;
}

@keyframes letter-peek {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  15%      { transform: translateY(-8px) rotate(-3deg); }
  30%      { transform: translateY(-4px) rotate(2deg); }
  45%      { transform: translateY(-10px) rotate(-1deg); }
  60%      { transform: translateY(-2px) rotate(1deg); }
  75%      { transform: translateY(-7px) rotate(-2deg); }
}

@keyframes env-bounce {
  0%, 100% { transform: scale(1) translateY(0); }
  10%      { transform: scale(1.04, 0.96) translateY(-2px); }
  20%      { transform: scale(0.97, 1.03) translateY(1px); }
  30%      { transform: scale(1.02, 0.98) translateY(-1px); }
  45%      { transform: scale(1) translateY(0); }
}

@keyframes plane-thermal {
  /* Paper plane caught in a gentle thermal — smooth figure-8 loop with
     banking rotation, completely distinct from letter-peek's vertical bob */
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  12%      { transform: translateX(5px) translateY(-8px) rotate(-5deg); }   /* swoop up-right (ascent into thermal) */
  25%      { transform: translateX(10px) translateY(-2px) rotate(2deg); }   /* peak — crossing right */
  37%      { transform: translateX(14px) translateY(4px) rotate(7deg); }    /* swoop down-right (dropping into turn) */
  50%      { transform: translateX(6px) translateY(8px) rotate(3deg); }     /* bottom — curving leftward */
  62%      { transform: translateX(-4px) translateY(6px) rotate(-4deg); }   /* cross up-left (bottom of 8) */
  75%      { transform: translateX(-10px) translateY(-4px) rotate(-7deg); } /* swoop up-left (back of loop) */
  88%      { transform: translateX(-4px) translateY(-6px) rotate(-3deg); }  /* settle toward center */
}

@keyframes flight-trail-pro {
  /* Multi-phase flight trail: dashes rush forward with a breathing pulse effect.
     Stroke-dashoffset moves the dash pattern along the Bézier curve;
     opacity + stroke-width variation creates a dynamic "engine trail" feel. */
  0%, 100% {
    stroke-dashoffset: 0;
    opacity: 0.4;
  }
  10% {
    stroke-dashoffset: -8;
    opacity: 0.8;
  }
  25% {
    stroke-dashoffset: -18;
    opacity: 1;
  }
  40% {
    stroke-dashoffset: -24;
    opacity: 0.7;
  }
  55% {
    stroke-dashoffset: -20;
    opacity: 0.9;
  }
  70% {
    stroke-dashoffset: -28;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: -12;
    opacity: 0.6;
  }
}

@keyframes chat-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  20%      { transform: scale(1.05); opacity: 0.85; }
  40%      { transform: scale(0.97); opacity: 1; }
  55%      { transform: scale(1.03); opacity: 0.9; }
  70%      { transform: scale(1); opacity: 1; }
}

@keyframes spark-orbit {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  15%      { transform: scale(1.4) rotate(25deg); opacity: 0.6; }
  30%      { transform: scale(0.8) rotate(-15deg); opacity: 1; }
  50%      { transform: scale(1.25) rotate(10deg); opacity: 0.7; }
  70%      { transform: scale(1) rotate(-5deg); opacity: 1; }
}

/* Hover glow color cycle for mail icons — matches product-card-img hover */
@keyframes mail-icon-hover-glow {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
            drop-shadow(0 0 32px rgba(14, 165, 233, 0.25))
            drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  }
  33% {
    filter: drop-shadow(0 0 22px rgba(14, 165, 233, 0.5))
            drop-shadow(0 0 36px rgba(250, 204, 21, 0.3))
            drop-shadow(0 0 10px rgba(139, 92, 246, 0.25));
  }
  66% {
    filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.45))
            drop-shadow(0 0 34px rgba(139, 92, 246, 0.3))
            drop-shadow(0 0 10px rgba(14, 165, 233, 0.3));
  }
}

/* In dark theme, soften the white cards inside the artwork slightly
   so they sit comfortably against the dark background.
   hero-art is kept bright so the illustration remains visible. */
[data-theme="dark"] .hero-art {
  filter: brightness(1) drop-shadow(0 14px 34px rgba(0, 0, 0, 0.5));
}
[data-theme="dark"] .story-art:not([class*="story-enter-"]),
[data-theme="dark"] .aside-art,
[data-theme="dark"] .gpu-compute-illustration {
  filter: brightness(0.9) saturate(1.05) drop-shadow(0 14px 34px rgba(0, 0, 0, 0.5));
}

/* Entry-animated story-art in dark mode — the animation keyframes define their own filter */
[data-theme="dark"] .story-art[class*="story-enter-"] {
  /* Leave filter to the animation keyframes; base brightness/saturation handled separately */
}

/* In dark theme, the hover glow should still shine through the brightness filter. */
[data-theme="dark"] .story-art:hover {
  filter: brightness(1) saturate(1.1) drop-shadow(0 0 18px rgba(139, 92, 246, 0.5))
          drop-shadow(0 0 32px rgba(14, 165, 233, 0.35))
          drop-shadow(0 0 8px rgba(250, 204, 21, 0.4));
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}

.price-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}

.price-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.price-card .btn { margin-top: auto; text-align: center; }
.price-card .feature-list { margin-bottom: 1.5rem; }

.price-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  position: relative;
}

.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.price {
  font-family: var(--font-display);
  color: var(--text-soft);
}

.price .amount {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text);
}

.price-note { font-size: 0.88rem; color: var(--text-soft); }

.pricing-fineprint {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
  max-width: none;
}

/* ---------- FAQ ---------- */
.faq-list {
  margin-top: 2rem;
  display: grid;
  gap: 0.8rem;
  max-width: 760px;
}

.faq-list details {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
}

.faq-list summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

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

.faq-list summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p {
  margin-top: 0.8rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ---------- Contact page ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-form {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  display: grid;
  gap: 1.2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.form-field { display: grid; gap: 0.35rem; }

.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-field [aria-invalid="true"] {
  border-color: #dc2626;
}

[data-theme="dark"] .form-field [aria-invalid="true"] {
  border-color: #f87171;
}

.field-error {
  font-size: 0.82rem;
  color: #b91c1c;
  min-height: 1.1em;
  margin: 0;
}

[data-theme="dark"] .field-error { color: #fca5a5; }

.form-privacy {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: 0;
}

.contact-form .btn { justify-self: start; }

.form-success {
  background: var(--bg-raised);
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.form-success:focus { outline: none; }

.contact-aside {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  display: grid;
  gap: 0.8rem;
}

.contact-aside h2 { font-size: 1.2rem; }
.contact-aside p { font-size: 0.95rem; color: var(--text-soft); }
.contact-aside strong { color: var(--text); }
.aside-note { font-size: 0.85rem !important; }

/* Success panels / account card hold two CTAs side by side, left-aligned
   (the hero variant is centred); they wrap on small screens. */
.form-success .hero-actions,
.account-actions {
  justify-content: flex-start;
  margin-top: 0.4rem;
}

/* ---------- Account page ---------- */
.account-details {
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.account-details > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg);
}

.account-details > div + div { border-top: 1px solid var(--line); }

.account-details dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
}

.account-details dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.account-actions { margin-top: 1.6rem; }

.account-danger { margin-top: 1.4rem; }

/* A button that reads like an inline link (used for "delete account"). */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:hover { color: var(--text); }

/* ---------- Small phones (480px and below) ---------- */
@media (max-width: 480px) {
  .account-details > div { grid-template-columns: 1fr; gap: 0.2rem; }

  /* Header — reduce padding and font sizes */
  .header-inner { padding-block: 0.6rem; gap: 0.5rem; }
  .brand { font-size: 1rem; }
  .site-nav { padding: 0.8rem 1rem 1.2rem; }
  .site-nav a { font-size: 0.95rem; padding-block: 0.5rem; }
  .nav-toggle { padding: 6px; }
  .theme-toggle { width: 36px; height: 36px; }

  /* Hero — hide the massive orb on small screens to save GPU & prevent overflow */
  .hero-orb { opacity: 0.2; width: 300px; height: 300px; top: -80px; }
  .hero { padding-block: 3rem; }

  /* CTA band — less padding on small screens */
  .cta-inner { padding-block: 2.5rem; }

  /* Footer — single column links on small phones */
  .footer-links { grid-template-columns: 1fr; gap: 1.2rem; }
  .footer-inner { gap: 1.5rem; padding-bottom: 1.5rem; }

  /* Legal pages — give some side padding */
  .legal-content { padding-inline: 0.2rem; }
  .pricing-fineprint { font-size: 0.85rem; }

  /* Buttons — prevent overflow on small screens */
  .btn { font-size: 0.9rem; padding: 0.65rem 1.2rem; }
  .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

  /* Auth cards — tighter */
  .auth-card { padding: 1.4rem 1rem; }
  .auth-aside { padding: 0 0.3rem; }

  /* FAQ — tighter padding */
  .faq-list details { padding: 0.9rem 1rem; }

  /* Pricing cards — prevent overflow on very narrow screens */
  .pricing-grid { grid-template-columns: 1fr; }

  /* Page hero SVGs — ensure they don't overflow */
  .story-art, .hero-art { width: 100%; height: auto; }

  /* Section padding — save vertical space */
  .section { padding-block: 2.5rem; }
  .section-alt { padding-block: 2.5rem; }
  .page-hero { padding-block: 2.5rem 1.2rem; }
}

/* ---------- Extra small phones (380px and below) ---------- */
@media (max-width: 380px) {
  .brand { font-size: 0.9rem; }
  .brand-mark { width: 10px; height: 10px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }
  .site-nav a { font-size: 0.88rem; }
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ---------- Touch devices — disable hover lift and 3D transforms ---------- */
@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; box-shadow: none; }
  .btn:hover { transform: none; }
  .tech-card:hover { transform: none; box-shadow: var(--shadow); }
  .tech-card-front,
  .tech-card-mid,
  .tech-card-back { transform: none; }
  .tech-depth { perspective: none; }
  .product-card:hover { transform: none; }
  .gpu-compare-card:hover { transform: none; }
  .team-card:hover .team-avatar img { transform: none; filter: none; }
  .trust-bar-item:hover .trust-bar-icon { transform: none; }
  /* Disable mail icon hover glow on touch devices */
  .mail-icon-letter:hover,
  .mail-icon-env:hover,
  .mail-icon-plane:hover,
  .mail-icon-chat:hover {
    transform: scale(1) !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ---------- Tablet improvements (481px–900px) ---------- */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .auth-layout { grid-template-columns: 1fr; gap: 2rem; }
  .auth-aside { padding: 0 0.5rem; }

  /* On very narrow tablets, the header signup btn still takes too much room */
  .header-signup { display: none; }
}

/* ---------- Mid-range — tablet product grid (2 columns) ---------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mid-range header (800px–1024px) — signup disappears earlier ---------- */
@media (max-width: 860px) {
  .header-signup { display: none; }
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-content {
  max-width: 760px;
}

.legal-content h2 {
  font-size: 1.35rem;
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p {
  color: var(--text-soft);
  margin-top: 0.6rem;
}

.legal-content ul {
  margin: 0.8rem 0 0 1.2rem;
  padding: 0;
  color: var(--text-soft);
  display: grid;
  gap: 0.45rem;
}

.legal-content strong { color: var(--text); }

/* ---------- Story (about page) ---------- */
.story p {
  margin-top: 1.2rem;
  color: var(--text-soft);
  font-size: 1.05rem;
}

.story h2 { margin-bottom: 0.5rem; }

/* ---------- Auth pages (login, signup) ---------- */
.auth-section {
  position: relative;
  overflow: hidden;
}

/* Same signature orb as the home hero, tucked behind the card. */
.auth-orb {
  position: absolute;
  top: -260px;
  left: 18%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--orb-a), var(--orb-b) 70%, transparent 72%);
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.auth-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: var(--shadow);
}

.auth-title { font-size: clamp(1.9rem, 4vw, 2.5rem); }

.auth-sub {
  margin-top: 0.8rem;
  color: var(--text-soft);
}

.auth-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.8rem;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.field-link {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.field-hint {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: 0;
}

/* Password input with a "Show/Hide" text button inside the field. */
.password-wrap { position: relative; }

.password-wrap input { padding-right: 4.4rem; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.pw-toggle:hover { background: var(--accent-soft); }

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
}

.check-field input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* Checkboxes don't have a border to colour, so an invalid one gets a ring. */
.check-field input[aria-invalid="true"] {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
}

.auth-success { margin-top: 1.8rem; }

.auth-switch {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-soft);
  text-align: center;
}

.auth-aside {
  padding: 2.5rem 0 0 1rem;
}

.auth-aside h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.2rem;
}

.auth-aside .aside-note {
  margin-top: 1.6rem;
  color: var(--text-soft);
}

/* ---------- Responsive ---------- */
/* Six links ("Privacy Policy", "Terms & Conditions" are long) don't fit on one
   row below ~1024px, and the middle links (Contact) got squeezed out of view.
   So the hamburger menu now takes over from 1024px down, and every link —
   Contact included — is listed in the drop-down. Desktop (1025px+) keeps the
   full horizontal row. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .site-nav { gap: 1.1rem; }
  .site-nav a { font-size: 0.9rem; }
  .header-login { padding-inline: 0.5rem; font-size: 0.9rem; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  /* Below the desktop breakpoint "Log in" moves into the drop-down menu;
     the Sign up button stays in the header while there is room for it. */
  .header-login { display: none; }
  .site-nav a.nav-auth { display: block; }
  .site-nav a.nav-auth:first-of-type { margin-top: 0.4rem; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem 1.5rem;
    gap: 0.4rem;
    display: none;
  }

  .site-nav.open { display: flex; }

  .site-nav a {
    padding-block: 0.6rem;
    font-size: 1.05rem;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Tech depth: CSS-only 3D card grid ---------- */
.tech-depth {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  perspective: 1000px;
  margin-top: 2.5rem;
}

.tech-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.4s ease,
              opacity 0.5s ease-out;
}
.tech-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Default subtle rotate for 3D depth */
.tech-card-front {
  transform: rotateY(-2deg) translateZ(0);
}

.tech-card-mid {
  transform: rotateY(0deg) translateZ(30px);
}

.tech-card-back {
  transform: rotateY(2deg) translateZ(0);
}

/* Hover lift — subtle on each card */
.tech-card:hover {
  transform: translateY(-6px) rotateY(0deg) translateZ(40px);
  box-shadow: 0 20px 50px rgba(33, 29, 46, 0.15);
}

[data-theme="dark"] .tech-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.tech-icon {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.tech-card h3 {
  font-size: 1.1rem;
  margin: 0;
}

.tech-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tech-card {
    transition: none;
  }

  .tech-card-front,
  .tech-card-mid,
  .tech-card-back {
    transform: none;
  }

  .tech-card:hover {
    transform: none;
  }

  /* Scroll-entry animations: all cards immediately visible */
  .product-card,
  .card,
  .price-card,
  .team-card,
  .value,
  .gpu-compare-card,
  .gpu-spec-card,
  .gpu-stat,
  .mail-icon-letter,
  .mail-icon-env,
  .mail-icon-plane,
  .mail-icon-flight,
  .mail-icon-chat,
  .mail-icon-spark {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .product-card:hover,
  .card:hover {
    transform: translateY(-4px);
  }

  /* Image float animation paused + entry animations disabled */
  .product-card-img {
    animation: none;
  }
  .story-enter-card-1,
  .story-enter-card-1.visible,
  .story-enter-card-2,
  .story-enter-card-2.visible,
  .story-enter-card-3,
  .story-enter-card-3.visible,
  .story-enter-card-4,
  .story-enter-card-4.visible,
  .story-enter-card-5,
  .story-enter-card-5.visible,
  .story-enter-card-6,
  .story-enter-card-6.visible,
  .story-enter-card-7,
  .story-enter-card-7.visible,
  .story-enter-card-8,
  .story-enter-card-8.visible,
  .story-enter-card-9,
  .story-enter-card-9.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  /* Pricing SVG spl-* child element entry animations disabled */
  .story-enter-pricing .spl-1,
  .story-enter-pricing .spl-2,
  .story-enter-pricing .spl-3,
  .story-enter-pricing .spl-4,
  .story-enter-pricing .spl-5,
  .story-enter-pricing .spl-6,
  .story-enter-pricing .spl-7,
  .story-enter-pricing .spl-8,
  .story-enter-pricing .spl-9 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  /* Hover effects disabled for mail icons */
  .mail-icon-letter:hover,
  .mail-icon-env:hover,
  .mail-icon-plane:hover,
  .mail-icon-chat:hover {
    transform: scale(1) !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ============================================================
   GPU INFRASTRUCTURE SECTION
   Used on index.html, products.html, about.html
   ============================================================ */

/* --- GPU analogy: CPU vs GPU visual comparison --- */
.gpu-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.gpu-compare-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(25px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.5s ease-out;
}
.gpu-compare-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.gpu-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.gpu-compare-icon {
  font-size: 2.6rem;
  line-height: 1;
  display: flex;
  justify-content: center;
}

/* Animated Transit Track for Car & Long Bullet Train */
.gpu-transit-track {
  width: 100%;
  max-width: 250px;
  height: 60px;
  margin: 0 auto 1.1rem;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gpu-transit-track.car-track {
  background: #f7f3ea;
  border: 1.5px solid #e7ded0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.gpu-transit-track.train-track {
  background: #f6f0ff;
  border: 1.5px solid #e5d7fd;
  box-shadow: inset 0 2px 4px rgba(124, 58, 237, 0.05), 0 0 12px rgba(124, 58, 237, 0.08);
}

[data-theme="dark"] .gpu-transit-track.car-track {
  background: #221f1c;
  border-color: #38332c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .gpu-transit-track.train-track {
  background: #231936;
  border-color: #492a80;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 16px rgba(124, 58, 237, 0.2);
}

/* Road surface under car - FIXED, STATIONARY */
.transit-surface.road-surface {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: repeating-linear-gradient(90deg, #c4b9a6 0, #c4b9a6 10px, transparent 10px, transparent 20px);
}

[data-theme="dark"] .transit-surface.road-surface {
  background: repeating-linear-gradient(90deg, #6b5f4c 0, #6b5f4c 10px, transparent 10px, transparent 20px);
}

/* High-speed magnetic rail track under train - FIXED, STATIONARY */
.transit-surface.rail-surface {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}

.transit-surface.rail-surface::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(90deg, #c4b5fd 0, #c4b5fd 3px, transparent 3px, transparent 12px);
}

[data-theme="dark"] .transit-surface.rail-surface::after {
  background: repeating-linear-gradient(90deg, #7c3aed 0, #7c3aed 3px, transparent 3px, transparent 12px);
}

/* 1. RED CAR - FULL BODY MOVEMENT RIGHT TO LEFT */
.transit-vehicle.car-vehicle {
  position: absolute;
  bottom: 5px;
  left: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  animation: carMoveRightToLeft 4.5s linear infinite !important;
  will-change: transform;
}

.car-svg {
  transform: none; /* Faces LEFT naturally */
}

@keyframes carMoveRightToLeft {
  0% {
    transform: translateX(255px);
  }
  100% {
    transform: translateX(-135px);
  }
}

/* Secondary subtle suspension bounce */
.car-chassis-group {
  animation: carBounce 0.28s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes carBounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1.2px) rotate(0.2deg); }
  100% { transform: translateY(0.4px) rotate(-0.1deg); }
}

.smoke-trail {
  font-size: 1.1rem;
  line-height: 1;
  animation: smokeBillow 0.55s ease-out infinite;
  display: inline-block;
}

@keyframes smokeBillow {
  0% { opacity: 0.8; transform: scale(0.6) translateX(0); }
  50% { opacity: 0.4; transform: scale(1.1) translateX(4px); }
  100% { opacity: 0; transform: scale(1.3) translateX(8px); }
}

/* 2. PURPLE TRAIN - FULL TRAIN MOVEMENT RIGHT TO LEFT */
.transit-vehicle.train-vehicle {
  position: absolute;
  bottom: 5px;
  left: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: trainMoveRightToLeft 6.0s linear infinite !important;
  will-change: transform;
}

.train-svg {
  transform: none; /* Faces LEFT naturally */
}

@keyframes trainMoveRightToLeft {
  0% {
    transform: translateX(255px);
  }
  100% {
    transform: translateX(-220px);
  }
}

/* Secondary subtle aerodynamic hum */
.train-chassis-group {
  animation: trainHum 0.14s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes trainHum {
  0% { transform: translateY(0) skewX(0deg); }
  50% { transform: translateY(-0.6px) skewX(0.2deg); }
  100% { transform: translateY(0.2px) skewX(0deg); }
}

.train-svg circle {
  animation: trainWheelGlide 0.12s ease-in-out infinite alternate;
}

@keyframes trainWheelGlide {
  0% { transform: translateY(0); }
  100% { transform: translateY(-0.4px); }
}

.speed-trail {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
  animation: speedSpark 0.16s ease-in-out infinite alternate;
}

@keyframes speedSpark {
  0% { opacity: 0.3; transform: scale(0.8) translateX(0); }
  100% { opacity: 1; transform: scale(1.2) translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-trail,
  .smoke-trail {
    animation: none;
  }
}

.gpu-compare-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
}

.gpu-compare-card .gpu-compare-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.gpu-compare-card .gpu-compare-label {
  font-size: 0.85rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.gpu-compare-card p {
  color: var(--text-soft);
  font-size: 0.92rem;
  max-width: 38ch;
  margin-inline: auto;
}

.gpu-compare-card.gpu-highlight {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  position: relative;
}

.gpu-compare-card.gpu-highlight::before {
  content: "★ Our Engine";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.28rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-body);
}

/* --- GPU stat boxes --- */
.gpu-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}

.gpu-stat {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.gpu-stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.gpu-stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.gpu-stat-label {
  font-size: 0.85rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.gpu-stat-detail {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 0.2rem;
}

/* --- GPU spec list card --- */
.gpu-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.gpu-spec-card {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gpu-spec-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gpu-spec-card:hover {
  border-color: var(--accent);
}
.gpu-spec-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.gpu-spec-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.gpu-spec-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gpu-spec-card h3 .spec-badge {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.gpu-spec-card .spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.gpu-spec-card .spec-row:last-child {
  border-bottom: none;
}

.gpu-spec-card .spec-key {
  color: var(--text-soft);
  font-weight: 500;
}

.gpu-spec-card .spec-val {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* --- GPU tool-to-GPU mapping --- */
.gpu-tool-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.gpu-tool-item {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gpu-tool-item:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}
.gpu-tool-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gpu-tool-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.gpu-tool-icon {
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: 12px;
  flex-shrink: 0;
}

.gpu-tool-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gpu-tool-info strong {
  font-size: 0.95rem;
  color: var(--text);
}

.gpu-tool-info span {
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* --- GPU flow explainer --- */
.gpu-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.gpu-flow-step {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}

.gpu-flow-step .step-num {
  margin-bottom: 0;
}

.gpu-flow-step h3 { font-size: 1.1rem; }

.gpu-flow-step p {
  color: var(--text-soft);
  font-size: 0.92rem;
}

/* --- GPU section intro (callout block) --- */
.gpu-callout {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 1.5rem 1.8rem;
  margin-top: 2rem;
}

.gpu-callout p {
  color: var(--text);
  font-size: 0.95rem;
  max-width: none;
}

.gpu-callout strong { color: var(--accent); }

/* --- GPU architecture diagram (visual) --- */
.gpu-arch {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.gpu-arch-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 1.5rem;
  background: var(--bg-sunken);
  border-radius: 12px;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gpu-arch-block:hover,
.gpu-arch-block:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gpu-arch-block:active {
  transform: scale(0.98);
}

.gpu-arch-block .arch-icon {
  font-size: 1.8rem;
}

.gpu-arch-block .arch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gpu-arch-block .arch-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.gpu-arch-arrow {
  font-size: 1.4rem;
  color: var(--text-soft);
  display: grid;
  place-items: center;
  padding: 0 0.3rem;
}

/* --- GPU architecture detail panel --- */
.gpu-arch-detail {
  display: none;
  margin-top: 1rem;
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  animation: detailFadeIn 0.3s ease;
}

.gpu-arch-detail.active {
  display: block;
}

@keyframes detailFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.detail-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
  color: var(--text);
}

.detail-text {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text-soft);
}

.detail-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-soft);
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.detail-close:hover,
.detail-close:focus-visible {
  background: var(--bg-sunken);
  color: var(--text);
}

/* Active block highlight */
.gpu-arch-block.active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent-soft) !important;
}

/* GPU badge pill interactive button (clickable badge) */
.gpu-badge-pill {
  cursor: pointer;
  font-family: inherit;
  transition: outline 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gpu-badge-pill:hover {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--bg-raised) !important;
}
.gpu-badge-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gpu-badge-pill.active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--bg-raised) !important;
}

/* --- Inline detail panel (opens below clicked button's section) --- */
.inline-detail {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  position: relative;
  animation: detailFadeIn 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.inline-detail .detail-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
  color: var(--text);
}

.inline-detail .detail-text {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  padding-right: 1.8rem;
  color: var(--text-soft);
}

.inline-detail .inline-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-soft);
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.inline-detail .inline-close:hover,
.inline-detail .inline-close:focus-visible {
  background: var(--bg-sunken);
  color: var(--text);
}

.gpu-specs:has(.inline-detail),
.gpu-tool-map:has(.inline-detail),
.gpu-arch:has(.inline-detail),
.gpu-badge-map:has(.inline-detail) {
  margin-bottom: 0;
}

/* --- Responsive GPU sections --- */
@media (max-width: 700px) {
  .gpu-comparison {
    grid-template-columns: 1fr;
  }

  .gpu-arch {
    flex-direction: column;
    gap: 0.6rem;
  }

  .gpu-arch-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .gpu-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }

  .gpu-stat-number {
    font-size: 1.7rem;
  }

  .gpu-specs {
    grid-template-columns: 1fr;
  }

  .gpu-tool-map {
    grid-template-columns: 1fr;
  }

  .gpu-flow {
    grid-template-columns: 1fr;
  }

  .team-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- GPU Deployment Regions ---------- */
.gpu-regions {
  margin-top: 3rem;
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 2rem 1.8rem;
}

.gpu-regions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
}

.gpu-region-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gpu-region-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.gpu-region-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.gpu-region-city {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.gpu-region-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag-live {
  background: #d1fae5;
  color: #065f46;
}
.tag-coming {
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  opacity: 0.9;
}

.gpu-region-latency {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 500;
}

[data-theme="dark"] .tag-live {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme="dark"] .tag-coming {
  background: var(--bg-sunken);
  border-color: var(--accent);
  color: var(--accent);
}

/* Dark theme overrides for coming-soon card */
[data-theme="dark"] .card-coming {
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-sunken) 100%);
}
[data-theme="dark"] .card-coming:hover {
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.15), var(--shadow);
}
[data-theme="dark"] .card-coming::before {
  background: radial-gradient(ellipse at 50% 0%, var(--accent) 0%, transparent 70%);
  opacity: 0.06;
}

/* Enhanced "Coming Soon" region card — dashed border + subtle glow */
.card-coming {
  border: 1.5px dashed var(--accent);
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--accent-soft) 100%);
  position: relative;
  overflow: hidden;
}
.card-coming::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, var(--accent) 0%, transparent 70%);
  opacity: 0.04;
  pointer-events: none;
}
.card-coming:hover {
  border-color: var(--accent);
  border-style: solid;
  box-shadow: 0 0 20px rgba(91, 33, 182, 0.12), var(--shadow);
}

/* Pulse animation for "Coming Soon" badge */
.tag-coming-pulse {
  animation: tagPulse 2s ease-in-out infinite;
}
@keyframes tagPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Progress bar for upcoming region readiness */
.gpu-region-progress {
  width: 100%;
  max-width: 100px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 0.15rem;
}
.gpu-region-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--amber));
  transition: width 0.6s ease;
}

@media (max-width: 640px) {
  .gpu-regions-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .gpu-regions-grid {
    grid-template-columns: 1fr;
  }
/* ---------- Trust/assurance bar ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem 2rem;
  margin-top: 2.5rem;
  padding: 1.4rem 2rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-soft);
  font-weight: 500;
}

.trust-bar-accent {
  color: var(--accent);
  font-weight: 600;
}

.trust-bar-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.trust-bar-item:hover .trust-bar-icon {
  transform: scale(1.25) rotate(-4deg);
}

/* ---------- GPU-powered badge (for auth aside columns) ---------- */
.gpu-powered-badge {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.4;
}

.gpu-powered-badge-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.gpu-powered-badge strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Staggered in-view animation ---------- */
[data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

[data-stagger].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Transition prose block ---------- */
.transition-prose {
  max-width: 65ch;
  margin: 1.8rem auto 1rem;
  text-align: center;
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1.02rem;
}

.transition-prose strong {
  color: var(--text);
}
}