/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* ---- */

/* ============================================================
   Brain diagram — Neurus core + vertical spokes
   ============================================================ */
.brain-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
}
@media (min-width: 1024px) {
  .brain-diagram { grid-template-columns: 340px 1fr; gap: 40px; align-items: stretch; padding: 36px; }
}
.brain-core {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent) inset,
    0 30px 80px -40px color-mix(in srgb, var(--accent) 35%, transparent);
  min-height: 240px;
  overflow: hidden;
}
.brain-core::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 80% at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, black, transparent 75%);
}
.brain-core-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.brain-tag {
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--lime);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.brain-spokes {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .brain-spokes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .brain-spokes { grid-template-columns: 1fr 1fr; gap: 14px; } }
.brain-spoke {
  display: block; padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.brain-spoke:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), rgba(255,255,255,0));
}
.brain-spoke-featured {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset, 0 30px 80px -40px color-mix(in srgb, var(--accent) 30%, transparent);
}
.brain-spoke-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--lime);
}
.brain-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ============================================================
   Capabilities bento — 4-card grid + 1 featured (on-premise)
   ============================================================ */
.capabilities-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .capabilities-bento { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .capabilities-bento {
    grid-template-columns: 1fr 1fr 1.15fr;
    grid-template-rows: auto auto;
  }
  .capabilities-bento > .cap-card-featured {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}
.cap-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.cap-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), rgba(255,255,255,0));
}
.cap-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cap-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.16em; color: var(--bone-500); }
.cap-num-lime { color: var(--lime); font-weight: 500; }
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--bone-300);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.cap-card:hover .cap-icon {
  color: var(--lime);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.cap-title {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500; font-size: 19px;
  letter-spacing: -0.015em; line-height: 1.2;
  margin-bottom: 8px;
}
.cap-desc { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; flex: 1; }
.cap-foot {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cap-chip {
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--bone-300);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
}
.cap-chip-lime {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--lime);
}

/* Featured card (03 · on-premise) */
.cap-card-featured {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background:
    radial-gradient(110% 80% at 80% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset,
    0 30px 80px -40px color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 28px 28px 22px;
}
.cap-card-featured:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset,
    0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cap-card-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 80% at 80% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 80% 0%, black, transparent 75%);
}
.cap-card-featured > * { position: relative; z-index: 1; }
.cap-featured-icon {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  margin: 6px auto 20px;
  color: var(--lime);
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 35%, transparent));
  animation: capShieldPulse 4s ease-in-out infinite;
}
.cap-featured-icon svg { width: 100%; height: 100%; }
@keyframes capShieldPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 25%, transparent)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 32px color-mix(in srgb, var(--accent) 55%, transparent)); }
}
.cap-title-featured {
  font-size: 28px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--accent) 80%, white) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.cap-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: 22px 0 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.cap-metric { background: rgba(10,10,10,0.55); padding: 14px 10px; text-align: center; }
.cap-metric-val {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500; font-size: 26px;
  letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #b8b8b8 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cap-metric-lbl {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-400);
}
[data-theme="light"] .cap-metric { background: rgba(255,255,255,0.7); }
[data-theme="light"] .cap-card-bg {
  background-image:
    linear-gradient(to right, rgba(15,15,17,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,15,17,0.04) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) {
  .cap-featured-icon { animation: none; }
}

/* ============================================================
   Contact modal
   ============================================================ */
.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.contact-modal.open { display: flex; }
.contact-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,6,6,0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: contactFadeIn 200ms ease both;
}
.contact-dialog {
  position: relative;
  width: 100%; max-width: 640px;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 18px;
  padding: 32px 28px 24px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.7), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
  animation: contactSlideIn 280ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes contactFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes contactSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.contact-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.contact-close:hover { color: var(--lime); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.contact-head { padding-right: 40px; margin-bottom: 22px; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 540px) { .contact-row { grid-template-columns: 1fr 1fr; } }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-400);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  font: inherit; font-size: 14px;
  transition: border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.contact-form textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-foot {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (min-width: 540px) { .contact-foot { flex-direction: row; align-items: center; justify-content: space-between; } }
.contact-fineprint { font-size: 11px; color: var(--bone-500); line-height: 1.5; max-width: 38ch; }
.contact-submit { white-space: nowrap; }
.contact-submit[disabled] { opacity: 0.55; pointer-events: none; }
.contact-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.5;
  padding: 0;
  color: var(--bone-300);
  min-height: 0;
}
.contact-status.is-error   { color: #f87171; padding-top: 8px; }
.contact-status.is-success { color: var(--lime); padding-top: 8px; }

[data-theme="light"] .contact-dialog { background: var(--bg-card); }
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form select,
[data-theme="light"] .contact-form textarea {
  background: rgba(15,15,17,0.03);
  border-color: var(--line-strong);
}

/* Verticals: highlighted card (E-commerce) */
.vertical-featured {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset,
    0 30px 80px -40px color-mix(in srgb, var(--accent) 30%, transparent);
}
.vertical-featured:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset,
    0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

/* ============================================================
   IURCO + Neurus — landing styles
   Theme tokens, dark + light, editorial type
   ============================================================ */

:root, [data-theme="dark"] {
  /* ---------- Accent system (tweakable) ---------- */
  --accent: #facc15;            /* default: mostaza */
  --accent-dim: #ca8a04;
  --accent-ink: #1c1917;        /* text on solid accent fill */

  --bg: #0c0c0d;
  --bg-soft: #0f0f10;
  --bg-elev: #131314;
  --bg-card: #161617;
  --bg-card-soft: rgba(255,255,255,0.018);
  --ink: #fafafa;
  --ink-2: #a3a3a3;
  --ink-3: #6e6e6e;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-dashed: rgba(255,255,255,0.10);
  --lime: var(--accent);
  --lime-dim: var(--accent-dim);
  --lime-ink: var(--accent-ink);
  --lime-glow: color-mix(in srgb, var(--accent) 45%, transparent);
  --lime-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --grid-color: rgba(255, 255, 255, 0.020);
  --ambient-tint: color-mix(in srgb, var(--accent) 5%, transparent);
  --shadow-card: 0 60px 120px -40px rgba(0,0,0,0.55);
  --chip-bg: rgba(255,255,255,0.025);
  --hover-bg: rgba(255,255,255,0.04);
  --selection-bg: color-mix(in srgb, var(--accent) 30%, transparent);
  --bone-200: #e5e5e5;
  --bone-300: #a3a3a3;
  --bone-400: #737373;
  --bone-500: #525252;
}

[data-theme="light"] {
  --bg: #f5f3ec;
  --bg-soft: #efece2;
  --bg-elev: #faf8f1;
  --bg-card: #ffffff;
  --bg-card-soft: rgba(0,0,0,0.018);
  --ink: #0e0f10;
  --ink-2: #4a4a4a;
  --ink-3: #6e6e6e;
  --line: rgba(15, 15, 17, 0.10);
  --line-strong: rgba(15, 15, 17, 0.18);
  --line-dashed: rgba(15,15,17,0.16);
  --accent-ink: #1c1917;
  --grid-color: rgba(15, 15, 17, 0.05);
  --shadow-card: 0 40px 80px -50px rgba(15,15,17,0.25);
  --chip-bg: rgba(15,15,17,0.025);
  --hover-bg: rgba(15,15,17,0.035);
  --bone-200: #2a2a2a;
  --bone-300: #4a4a4a;
  --bone-400: #6e6e6e;
  --bone-500: #8b8b8b;
}

/* ---------- Palette presets (Tweaks panel sets [data-accent] on <html>) ---------- */
[data-accent="mostaza"] { --accent: #facc15; --accent-dim: #ca8a04; --accent-ink: #1c1917; }
[data-accent="lime"]    { --accent: #22c55e; --accent-dim: #16a34a; --accent-ink: #052e16; }
[data-accent="ember"]   { --accent: #fb923c; --accent-dim: #ea580c; --accent-ink: #1c1209; }
[data-accent="cobalt"]  { --accent: #60a5fa; --accent-dim: #2563eb; --accent-ink: #0c1224; }
[data-accent="rose"]    { --accent: #f472b6; --accent-dim: #db2777; --accent-ink: #1c0c14; }
[data-accent="silver"]  { --accent: #d4d4d4; --accent-dim: #a3a3a3; --accent-ink: #0f0f10; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { background: var(--bg); color: var(--ink); transition: background .35s ease, color .35s ease; }

/* ---------- Backgrounds ---------- */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 64px 64px;
}
.bg-grid-tight {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.mask-radial { mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); }
.mask-fade-b { mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.mask-fade-t { mask-image: linear-gradient(to top, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%); }

/* ---------- Typography ---------- */
body { font-family: 'Space Grotesk', system-ui, sans-serif; }
.h-display { font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.04em; line-height: 0.92; font-variation-settings: 'wdth' 100, 'opsz' 96; padding-bottom: 0.12em; }
.h-display-tight { letter-spacing: -0.05em; }
.h-display-cond { font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif; font-variation-settings: 'wdth' 75, 'opsz' 96; letter-spacing: -0.025em; font-weight: 500; }
.h-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.t-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'ss01','ss02'; }
.t-serif { font-family: 'Fraunces', 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 300; font-variation-settings: 'SOFT' 100, 'opsz' 144; }
.t-serif-bold { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 100, 'opsz' 144; }

/* Better number rendering */
.tab-nums { font-variant-numeric: tabular-nums lining-nums; }

/* Subtle text gradient for hero */
.text-grad {
  background: linear-gradient(180deg, #ffffff 0%, #9a9a9a 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-lime {
  background: linear-gradient(180deg, #6ee7a3 0%, var(--accent) 60%, #0e4d31 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lime tag */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(255,255,255,0.02);
}
.tag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 12px var(--lime-glow); }
.tag.tag-lime { color: var(--lime); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--lime-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 14px;
  border-radius: 8px; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--lime); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.25); }
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--line-strong); }
.card-hover-lime:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset, 0 30px 80px -40px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- Sovereignty diagram (hero) ---------- */
.sovereignty-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(110% 50% at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, #0a0a0a 100%);
  box-shadow: 0 80px 160px -60px rgba(0,0,0,0.7);
}
.sovereignty-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 100% at 50% 0%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black, transparent 80%);
}
.zone-cloud {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
.cloud-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 8px 10px; text-align: center;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--ink-2);
  background: rgba(255,255,255,0.015);
  letter-spacing: 0.02em;
}
.firewall {
  position: relative;
  height: 1px; margin: 14px 24px 6px;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--accent) 55%, transparent) 0 8px, transparent 8px 14px);
}
.firewall::before, .firewall::after {
  content:''; position: absolute; top: -3px; width: 7px; height: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px;
  background: #0a0a0a;
}
.firewall::before { left: -3px; }
.firewall::after  { right: -3px; }
.firewall-x {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #0a0a0a; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--lime);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.firewall-label {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-400);
  white-space: nowrap;
}
.zone-prem {
  background:
    radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
  margin-top: 22px;
}
.server-card {
  margin-top: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), rgba(34,197,94,0.0));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px; padding: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 4%, transparent) inset, 0 30px 60px -30px color-mix(in srgb, var(--accent) 35%, transparent);
}
.server-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--lime); color: var(--accent-ink);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.prem-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 8px 10px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  color: #b4f0c5;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* corner ticks */
.corner-ticks::before,
.corner-ticks::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border-color: rgba(255,255,255,0.25); border-style: solid; border-width: 0;
  pointer-events: none;
}
.corner-ticks::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.corner-ticks::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Section divider rule ---------- */
.rule { height: 1px; background: linear-gradient(to right, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); }

/* ---------- Pulse dot ---------- */
.pulse {
  position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--lime);
  box-shadow: 0 0 12px var(--lime-glow);
}
.pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid var(--lime);
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(.6); opacity: .9; } 80% { transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Hero metric ---------- */
.metric-num {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui;
  font-weight: 400; font-size: clamp(64px, 10vw, 132px);
  letter-spacing: -0.06em; line-height: 0.9;
  font-variation-settings: 'wdth' 80, 'opsz' 96;
  background: linear-gradient(180deg, #ffffff 0%, #6b6b6b 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Compare table (legacy) ---------- */
.compare-row td { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.compare-row th { padding: 14px 18px; text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; }

/* ---------- Model card ---------- */
.model-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.model-sigil {
  position: relative;
  height: 110px;
  background:
    radial-gradient(120% 100% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.model-sigil::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 80% at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, black, transparent 75%);
  pointer-events: none;
}
.model-sigil svg { width: 96px; height: 96px; position: relative; z-index: 1; }
.model-id {
  position: absolute; left: 16px; top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-500);
}
.model-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.model-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.model-vendor { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bone-400); letter-spacing: 0.06em; margin-top: 4px; }
.model-stats { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 16px; }
.model-stats dt { color: var(--bone-500); }
.model-stats dd { color: var(--bone-100); }
.model-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); flex: 1; }

.tag-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15); color: var(--bone-200);
  white-space: nowrap;
}
.tag-chip-lime { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--lime); background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Size scale */
.size-scale {
  position: relative;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,0.10);
}
.size-scale::before {
  content: 'tamaño (B parámetros)';
  position: absolute; left: 0; top: -1px; transform: translateY(-50%);
  background: #0a0a0a; padding: 0 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-500);
}
.size-bar {
  position: relative;
  height: 4px; border-radius: 999px; background: rgba(255,255,255,0.06);
}
.size-bar::after {
  content: ''; position: absolute;
  left: var(--lo); right: calc(100% - var(--hi));
  top: 0; bottom: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 95%, transparent));
  border-radius: 999px;
}
.size-dot {
  position: absolute; top: 18px;
  left: var(--x); transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 3px #0a0a0a;
  margin-top: -2.5px;
}
.size-labels {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; color: var(--bone-500);
}
.cost-row {
  display: grid; align-items: center;
  grid-template-columns: 140px 1fr 120px;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.cost-row:first-of-type { border-top: 0; }
.cost-row-lime { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
@media (min-width: 1024px) {
  .cost-row { grid-template-columns: 200px 1fr 180px; gap: 20px; padding: 22px 0; }
}
.cost-label .cost-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.cost-label .cost-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-500); margin-top: 4px; }

.cost-track { position: relative; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); overflow: visible; }
.cost-bar {
  position: absolute; top: 4px; bottom: 4px;
  left: var(--lo); right: calc(100% - var(--hi));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.02em;
}
.cost-bar-cloud {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 6px, rgba(255,255,255,0.10) 6px 12px);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink-2);
}
.cost-bar-prem {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 95%, transparent), color-mix(in srgb, var(--accent) 55%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent-ink);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 25%, transparent);
  min-width: 32px;
}
.cost-tick { white-space: nowrap; }
.cost-bar-prem .cost-tick { display: none; }

.cost-savings {
  position: absolute; left: calc(var(--hi) + 12px); top: 50%; transform: translateY(-50%);
  font-size: 11px; letter-spacing: 0.04em; color: var(--bone-300);
  white-space: nowrap;
}

.cost-value {
  text-align: right;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}

/* ---------- Pain cards (problema) ---------- */
.pain-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pain-art {
  position: relative;
  height: 130px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(140% 80% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  overflow: hidden;
}
.pain-art svg { display: block; width: 100%; height: 100%; }
.pain-card:hover .pain-art { background:
    radial-gradient(140% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)); }

/* --- Pain SVG animations --- */
.pa-svg { overflow: visible; }

/* PAIN 01 — leaking packets travel right + LED blinks */
.pa-packets rect {
  opacity: 0;
  animation: leak 3.6s linear infinite;
}
.pa-packets rect:nth-child(1) { animation-delay: 0.0s; }
.pa-packets rect:nth-child(2) { animation-delay: 0.3s; }
.pa-packets rect:nth-child(3) { animation-delay: 0.6s; }
.pa-packets rect:nth-child(4) { animation-delay: 0.9s; }
.pa-packets rect:nth-child(5) { animation-delay: 1.2s; }
.pa-packets rect:nth-child(6) { animation-delay: 1.5s; }
@keyframes leak {
  0%   { transform: translateX(-40px); opacity: 0; }
  10%  { opacity: 0.95; }
  85%  { opacity: 0.1; }
  100% { transform: translateX(60px); opacity: 0; }
}
.pa-blink { animation: blinkLed 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes blinkLed { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.25; } }

/* PAIN 02 — bars grow from baseline (origin: bottom via transform-origin), trend draws */
.pa-bars rect {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: growBar 3s cubic-bezier(.2,.7,.2,1) infinite;
}
.pa-bars rect:nth-child(1) { animation-delay: 0.00s; }
.pa-bars rect:nth-child(2) { animation-delay: 0.10s; }
.pa-bars rect:nth-child(3) { animation-delay: 0.20s; }
.pa-bars rect:nth-child(4) { animation-delay: 0.30s; }
.pa-bars rect:nth-child(5) { animation-delay: 0.40s; }
.pa-bars rect:nth-child(6) { animation-delay: 0.50s; }
.pa-bars rect:nth-child(7) { animation-delay: 0.60s; }
.pa-bars rect:nth-child(8) { animation-delay: 0.70s; }
@keyframes growBar {
  0%   { transform: scaleY(0); opacity: .2; }
  35%  { transform: scaleY(1); opacity: 1; }
  85%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

.pa-trend { animation: drawTrend 3s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes drawTrend {
  0%   { stroke-dashoffset: 100; opacity: .3; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* PAIN 03 — latency pulses move along the wire */
.pa-pulses circle {
  animation: latencyPulse 2.2s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.pa-pulses circle:nth-child(1) { animation-delay: 0.0s; }
.pa-pulses circle:nth-child(2) { animation-delay: 0.18s; }
.pa-pulses circle:nth-child(3) { animation-delay: 0.36s; }
.pa-pulses circle:nth-child(4) { animation-delay: 0.54s; }
.pa-pulses circle:nth-child(5) { animation-delay: 0.72s; }
@keyframes latencyPulse {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 0.95; transform: scale(1); }
  60%  { opacity: 0.35; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.7); }
}
.pa-globe { animation: globeSpin 14s linear infinite; transform-origin: 80px 60px; transform-box: fill-box; }
@keyframes globeSpin { from { opacity: 1 } 50% { opacity: 0.5 } to { opacity: 1 } }

/* PAIN 04 — stamps fade-in cascading + HIPAA pulse */
.pa-stamps rect, .pa-stamps text {
  animation: stampIn 4s ease-in-out infinite;
  opacity: 0;
  transform-box: fill-box;
}
.pa-stamps g rect:nth-of-type(1), .pa-stamps g text:nth-of-type(1) { animation-delay: 0.0s; }
.pa-stamps g rect:nth-of-type(2), .pa-stamps g text:nth-of-type(2) { animation-delay: 0.25s; }
.pa-stamps g rect:nth-of-type(3), .pa-stamps g text:nth-of-type(3) { animation-delay: 0.50s; }
.pa-stamps g rect:nth-of-type(4), .pa-stamps g text:nth-of-type(4) { animation-delay: 0.75s; }
.pa-stamps g rect:nth-of-type(5), .pa-stamps g text:nth-of-type(5) { animation-delay: 1.00s; }
@keyframes stampIn {
  0%   { opacity: 0; transform: translateY(2px); }
  20%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-packets rect, .pa-bars rect, .pa-trend, .pa-pulses circle, .pa-globe, .pa-stamps rect, .pa-stamps text, .pa-blink { animation: none !important; opacity: 1; }
}

/* ============================================================
   SOVEREIGNTY CARD (hero) — ambient animations
   ============================================================ */
.sovereignty-card .cloud-chip { animation: chipFlicker 4.5s ease-in-out infinite; }
.sovereignty-card .cloud-chip:nth-child(1) { animation-delay: 0s; }
.sovereignty-card .cloud-chip:nth-child(2) { animation-delay: 0.6s; }
.sovereignty-card .cloud-chip:nth-child(3) { animation-delay: 1.2s; }
@keyframes chipFlicker { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.sovereignty-card .firewall { background-size: 22px 100%; animation: firewallFlow 3s linear infinite; }
@keyframes firewallFlow {
  from { background-position: 0 0; }
  to { background-position: 22px 0; }
}

.sovereignty-card .firewall-x { animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); transform: translate(-50%,-50%) scale(1); }
  50%      { box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 60%, transparent); transform: translate(-50%,-50%) scale(1.08); }
}

.sovereignty-card .server-card { animation: serverBreathe 4s ease-in-out infinite; }
@keyframes serverBreathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 4%, transparent) inset, 0 30px 60px -30px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset, 0 30px 60px -30px color-mix(in srgb, var(--accent) 55%, transparent); }
}

.sovereignty-card .prem-chip {
  opacity: 0; animation: chipPop 4.5s ease-in-out infinite;
}
.sovereignty-card .prem-chip:nth-child(1) { animation-delay: 0.4s; }
.sovereignty-card .prem-chip:nth-child(2) { animation-delay: 0.7s; }
.sovereignty-card .prem-chip:nth-child(3) { animation-delay: 1.0s; }
@keyframes chipPop {
  0%   { opacity: 0; transform: translateY(4px); }
  18%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0.35; transform: translateY(0); }
}

/* outgoing-arrow dotted path: animate dash flow */
.sovereignty-card svg path[stroke-dasharray] { stroke-dashoffset: 0; animation: dashFlow 1.2s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -10; } }

/* ============================================================
   COST CHART — bars fill in when section is in view
   ============================================================ */
.cost-bar { transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cost-in .cost-bar { transform: scaleX(1); }
.cost-in .cost-row:nth-of-type(1) .cost-bar { transition-delay: 0.10s; }
.cost-in .cost-row:nth-of-type(2) .cost-bar { transition-delay: 0.25s; }
.cost-in .cost-row:nth-of-type(3) .cost-bar { transition-delay: 0.40s; }
.cost-savings { opacity: 0; transition: opacity .8s ease 1.4s; }
.cost-in .cost-savings { opacity: 1; }

/* Annual callouts count-up effect: subtle "in" pop */
.cost-in .font-display.tab-nums { animation: numPop .9s cubic-bezier(.2,.7,.2,1) 1.2s both; }
@keyframes numPop {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cost-bar { transform: scaleX(1) !important; transition: none !important; }
}

/* ============================================================
   MODEL SIGILS — gentle continuous motion per family
   ============================================================ */
.model-sigil svg {
  animation: sigilBreathe 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, filter;
}
@keyframes sigilBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(34,197,94,0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 35%, transparent)); }
}

/* Gemma — concentric rings ripple outward */
.model-card:nth-of-type(1) .model-sigil svg circle:nth-child(n+2) {
  transform-origin: 40px 40px;
  transform-box: view-box;
  animation: gemmaRing 4s ease-out infinite;
}
.model-card:nth-of-type(1) .model-sigil svg circle:nth-child(2) { animation-delay: 0s; }
.model-card:nth-of-type(1) .model-sigil svg circle:nth-child(3) { animation-delay: .25s; }
.model-card:nth-of-type(1) .model-sigil svg circle:nth-child(4) { animation-delay: .50s; }
.model-card:nth-of-type(1) .model-sigil svg circle:nth-child(5) { animation-delay: .75s; }
@keyframes gemmaRing {
  0%   { stroke-opacity: 0; transform: scale(.85); }
  30%  { stroke-opacity: .55; }
  100% { stroke-opacity: 0; transform: scale(1.05); }
}

/* Phi — central column oscillates, orbits drift */
.model-card:nth-of-type(2) .model-sigil svg path[d="M40 14v52"] {
  animation: phiBeam 3.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: view-box;
}
.model-card:nth-of-type(2) .model-sigil svg ellipse:first-of-type { animation: phiSpinH 6s linear infinite; transform-origin: 40px 40px; transform-box: view-box; }
.model-card:nth-of-type(2) .model-sigil svg ellipse:last-of-type { animation: phiSpinV 7s linear infinite reverse; transform-origin: 40px 40px; transform-box: view-box; }
@keyframes phiBeam { 0%,100% { opacity: .85; } 50% { opacity: 1; transform: scaleY(1.04); } }
@keyframes phiSpinH { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes phiSpinV { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Qwen — diagonals slide, center rect pulses */
.model-card:nth-of-type(3) .model-sigil svg path:nth-of-type(2) {
  stroke-dasharray: 60;
  animation: qwenDash 3.5s linear infinite;
}
@keyframes qwenDash { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -60; } }
.model-card:nth-of-type(3) .model-sigil svg rect:not(:first-of-type) {
  transform-origin: 40px 40px;
  transform-box: view-box;
  animation: qwenCore 2.6s ease-in-out infinite;
}
@keyframes qwenCore { 0%,100% { transform: scale(1); stroke-opacity: 1; } 50% { transform: scale(1.18); stroke-opacity: .6; } }

/* Mistral — waves drift right */
.model-card:nth-of-type(4) .model-sigil svg path {
  stroke-dasharray: 6 6;
  animation: mistralFlow 3.5s linear infinite;
}
.model-card:nth-of-type(4) .model-sigil svg path:nth-of-type(2) { animation-delay: .3s; }
.model-card:nth-of-type(4) .model-sigil svg path:nth-of-type(3) { animation-delay: .6s; }
@keyframes mistralFlow { to { stroke-dashoffset: -24; } }

/* Llama — horizon line oscillates */
.model-card:nth-of-type(5) .model-sigil svg path:nth-of-type(2) {
  animation: llamaWave 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: view-box;
}
@keyframes llamaWave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.model-card:nth-of-type(5) .model-sigil svg circle {
  animation: llamaPulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.model-card:nth-of-type(5) .model-sigil svg circle:last-of-type { animation-delay: 1.1s; }
@keyframes llamaPulse { 0%,100% { opacity: .9; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

/* SmolLM3 — nested rectangles pulse outward */
.model-card:nth-of-type(6) .model-sigil svg rect {
  transform-origin: 40px 40px;
  transform-box: view-box;
  animation: smolNest 3.2s ease-in-out infinite;
}
.model-card:nth-of-type(6) .model-sigil svg rect:nth-of-type(2) { animation-delay: .25s; }
.model-card:nth-of-type(6) .model-sigil svg rect:nth-of-type(3) { animation-delay: .5s; }
@keyframes smolNest {
  0%,100% { transform: scale(1); opacity: .9; }
  50%     { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .model-sigil svg, .model-sigil svg *, .sovereignty-card * { animation: none !important; }
}
.arch-stack { position: relative; display: grid; gap: 12px; }
.arch-stack::before {
  content: ''; position: absolute; left: 28px; top: 30px; bottom: 30px;
  width: 1px; background: linear-gradient(to bottom,
    transparent 0%, rgba(255,255,255,0.12) 8%, rgba(255,255,255,0.12) 92%, transparent 100%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .arch-stack::before { left: 36px; }
}
.arch-layer {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; gap: 0;
}
@media (min-width: 768px) {
  .arch-layer { grid-template-columns: 84px 1fr; }
}
.arch-rail {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 20px;
}
.arch-rail-dot {
  width: 13px; height: 13px; border-radius: 999px;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,0.20);
  display: block; position: relative; z-index: 1;
}
.arch-rail-dot::after {
  content:''; position: absolute; inset: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.20);
}
.arch-rail-dot-lime {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.arch-rail-dot-lime::after { background: var(--lime); }
.arch-rail-label {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-500);
}

.arch-layer-card {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .25s ease;
}
.arch-layer-card:hover { border-color: var(--line-strong); }
.arch-layer-card-lime {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), rgba(34,197,94,0)),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent) inset, 0 30px 80px -40px color-mix(in srgb, var(--accent) 30%, transparent);
}
.arch-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--bone-200);
}
.arch-icon svg { width: 20px; height: 20px; }
.arch-icon-lime { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--lime); }

.arch-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--line-strong); color: var(--bone-200);
  background: rgba(255,255,255,0.015);
}
.arch-chip-lime { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--lime); background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* legacy .layer classes (kept for safety) */
.layer { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border: 1px solid var(--line); border-radius: 12px; }
.layer-lime { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), rgba(34,197,94,0)); }

/* ---------- Verticals cards ---------- */
.vbox {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--lime);
}
.vlist { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.vlist li { position: relative; padding-left: 22px; }
.vlist li::before {
  content: '→';
  position: absolute; left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace;
  color: var(--lime); font-size: 13px;
}

/* ---------- Verticals pills (legacy) ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 14px; transition: all .2s ease; }
.pill:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--lime); }
.pill .pdot { width: 4px; height: 4px; border-radius: 99px; background: var(--ink-3); }
.pill:hover .pdot { background: var(--lime); }

/* ---------- Marquee track ---------- */
.marquee { display: flex; gap: 48px; animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---------- Nav scrolled ---------- */
.nav-scrolled { background: rgba(10,10,10,0.72); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }

/* Mobile menu panel — fondo sólido para que no se superponga con el contenido */
.mobile-nav-panel {
  background: rgba(8,8,9,0.96);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6);
  margin: 0 -24px; /* compensa el padding del contenedor para que cubra todo el ancho */
  padding: 8px 16px 16px;
}

/* Focus styles */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }

/* (Tweaks panel CSS removed — dev-only design tool) */

/* ============================================================
   ACCENT — Tailwind utility + SVG remap (uses var(--accent))
   ============================================================ */
.text-lime, .text-lime-300, .text-lime-400, .text-lime-500, .text-lime-600 { color: var(--accent) !important; }
.bg-lime { background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.border-lime { border-color: var(--accent) !important; }
.from-lime\/\[0\.04\], .from-lime\/\[0\.05\], .from-lime\/\[0\.06\], .from-lime\/\[0\.08\], .from-lime\/\[0\.10\] {
  --tw-gradient-from: color-mix(in srgb, var(--accent) 7%, transparent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--accent) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-lime\/\[0\.03\], .via-lime\/\[0\.015\], .via-lime\/\[0\.06\] {
  --tw-gradient-via-position: ;
  --tw-gradient-to: color-mix(in srgb, var(--accent) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--accent) 3%, transparent) var(--tw-gradient-via-position, 50%), var(--tw-gradient-to) !important;
}

/* opacity variants of bg-lime/border-lime */
.bg-lime\/5, .bg-lime\/\[0\.04\], .bg-lime\/\[0\.05\], .bg-lime\/\[0\.06\], .bg-lime\/\[0\.07\], .bg-lime\/\[0\.08\], .bg-lime\/\[0\.10\] {
  background-color: color-mix(in srgb, var(--accent) 7%, transparent) !important;
}
.border-lime\/15, .border-lime\/20, .border-lime\/25 { border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.border-lime\/30, .border-lime\/35 { border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; }
.border-lime\/40, .border-lime\/45 { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.selection\:bg-lime\/30::selection { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }

/* SVGs that use currentColor inherit from this anchor */
.model-sigil svg,
.pa-svg,
.vbox > svg,
.arch-icon svg {
  color: var(--accent);
}
/* SVGs with mixed stroke-opacity rely on `color` already (currentColor + stroke-opacity). */

/* linearGradient stops referencing accent */
#costGrad stop { stop-color: var(--accent); }

/* selection on body */
body::selection, body *::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); }

/* ============================================================
   SOFTENED TOKENS — less geek, more editorial
   ============================================================ */
.h-eyebrow {
  /* Display font instead of monospace, gentler tracking */
  font-family: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.h-eyebrow .text-lime { color: var(--lime); }

/* slight calm on the ambient grid */
.bg-grid { background-image:
  linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
  linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}

/* ============================================================
   LIGHT MODE — utility class + component overrides
   ============================================================ */
[data-theme="light"] body { background: var(--bg); color: var(--ink); }
[data-theme="light"] ::selection { background: var(--selection-bg); color: var(--ink); }

/* Surface backgrounds (Tailwind utilities used in HTML) */
[data-theme="light"] .bg-ink-950 { background-color: var(--bg-soft) !important; }
[data-theme="light"] .bg-ink-900 { background-color: var(--bg-card) !important; }
[data-theme="light"] .bg-ink-800 { background-color: var(--bg-elev) !important; }
[data-theme="light"] .bg-ink-700 { background-color: var(--bg-card-soft) !important; }
[data-theme="light"] .bg-ink-800\/40 { background-color: rgba(15,15,17,0.04) !important; }
[data-theme="light"] .bg-ink-900\/95 { background-color: rgba(245,243,236,0.95) !important; }
[data-theme="light"] .bg-black\/40 { background-color: rgba(15,15,17,0.05) !important; }

/* Text colors */
[data-theme="light"] .text-bone-50,
[data-theme="light"] .text-bone-100 { color: var(--ink) !important; }
[data-theme="light"] .text-bone-200 { color: #1c1c1c !important; }
[data-theme="light"] .text-bone-300 { color: #4a4a4a !important; }
[data-theme="light"] .text-bone-400 { color: #6e6e6e !important; }
[data-theme="light"] .text-bone-500 { color: #8b8b8b !important; }

/* Lime in light mode = darker green; keep accent legible */
[data-theme="light"] .text-lime { color: var(--lime) !important; }
[data-theme="light"] .bg-lime { background-color: var(--lime) !important; color: #f0fdf4 !important; }
[data-theme="light"] .text-red-400\/80 { color: #b91c1c !important; }

/* Translucent white bgs → translucent ink */
[data-theme="light"] [class*="bg-white\\/\\["],
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 { background-color: rgba(15,15,17,0.05) !important; }

/* Borders */
[data-theme="light"] .border-white\/5  { border-color: rgba(15,15,17,0.06) !important; }
[data-theme="light"] .border-white\/10 { border-color: rgba(15,15,17,0.10) !important; }
[data-theme="light"] .border-white\/15 { border-color: rgba(15,15,17,0.14) !important; }
[data-theme="light"] .border-white\/20 { border-color: rgba(15,15,17,0.18) !important; }
[data-theme="light"] .border-white\/25 { border-color: rgba(15,15,17,0.22) !important; }

/* Lime variants */
[data-theme="light"] .bg-lime\/5,
[data-theme="light"] [class*="bg-lime\\/\\["] { background-color: color-mix(in srgb, var(--accent) 8%, transparent) !important; }
[data-theme="light"] .border-lime\/30,
[data-theme="light"] .border-lime\/35,
[data-theme="light"] .border-lime\/40 { border-color: color-mix(in srgb, var(--accent) 42%, transparent) !important; }

/* Buttons */
[data-theme="light"] .btn-primary { background: var(--lime); color: #ffffff; }
[data-theme="light"] .btn-primary:hover { background: var(--lime-dim); }
[data-theme="light"] .btn-ghost { color: var(--ink); border-color: var(--line-strong); }
[data-theme="light"] .btn-ghost:hover { background: var(--hover-bg); border-color: rgba(15,15,17,0.28); }

/* Cards */
[data-theme="light"] .card { background: var(--bg-card); border-color: var(--line); }
[data-theme="light"] .card-hover-lime:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset, 0 30px 80px -40px color-mix(in srgb, var(--accent) 22%, transparent); }


/* Sovereignty diagram */
[data-theme="light"] .sovereignty-card {
  background:
    radial-gradient(110% 50% at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border-color: var(--line);
  box-shadow: 0 50px 100px -50px rgba(15,15,17,0.25);
}
[data-theme="light"] .sovereignty-card::before {
  background-image:
    linear-gradient(to right, rgba(15,15,17,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,15,17,0.05) 1px, transparent 1px);
}
[data-theme="light"] .cloud-chip { border-color: rgba(15,15,17,0.12); background: rgba(15,15,17,0.02); color: var(--ink-3); }
[data-theme="light"] .firewall::before, [data-theme="light"] .firewall::after { background: var(--bg-card); }
[data-theme="light"] .firewall-x { background: var(--bg-card); }
[data-theme="light"] .server-card { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), rgba(21,128,61,0)); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
[data-theme="light"] .server-mark { color: #ffffff; }
[data-theme="light"] .prem-chip { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--lime-dim); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }

/* Cost chart */
[data-theme="light"] .cost-track { background: rgba(15,15,17,0.03); border-color: var(--line); }
[data-theme="light"] .cost-bar-cloud {
  background: repeating-linear-gradient(135deg, rgba(15,15,17,0.04) 0 6px, rgba(15,15,17,0.10) 6px 12px);
  border-color: var(--line);
  color: var(--ink-2);
}
[data-theme="light"] .cost-bar-prem { color: #ffffff; }
[data-theme="light"] .cost-row { border-top-color: var(--line); }

/* Models */
[data-theme="light"] .model-sigil {
  background:
    radial-gradient(120% 100% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(15,15,17,0.018), rgba(15,15,17,0));
}
[data-theme="light"] .model-sigil::before {
  background-image:
    linear-gradient(to right, rgba(15,15,17,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,15,17,0.05) 1px, transparent 1px);
}
[data-theme="light"] .model-sigil svg path,
[data-theme="light"] .model-sigil svg circle,
[data-theme="light"] .model-sigil svg ellipse,
[data-theme="light"] .model-sigil svg rect { stroke-opacity: 0.65; }
[data-theme="light"] .tag-chip { border-color: var(--line-strong); color: var(--ink-2); }
[data-theme="light"] .tag-chip-lime { color: var(--lime); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
[data-theme="light"] .size-bar { background: rgba(15,15,17,0.08); }
[data-theme="light"] .size-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 38%, transparent), 0 0 0 3px var(--bg-card); }
[data-theme="light"] .size-scale::before { background: var(--bg-card); }
[data-theme="light"] .size-scale { border-top-color: var(--line-dashed); }

/* Architecture */
[data-theme="light"] .arch-stack::before { background: linear-gradient(to bottom, transparent 0%, rgba(15,15,17,0.14) 8%, rgba(15,15,17,0.14) 92%, transparent 100%); }
[data-theme="light"] .arch-rail-dot { background: var(--bg-card); border-color: rgba(15,15,17,0.25); }
[data-theme="light"] .arch-rail-dot::after { background: rgba(15,15,17,0.25); }
[data-theme="light"] .arch-layer-card { background: var(--bg-card); }
[data-theme="light"] .arch-icon { background: var(--bg-card); color: var(--ink-2); }
[data-theme="light"] .arch-chip { background: var(--bg-card); color: var(--ink-2); border-color: var(--line-strong); }

/* Pain */
[data-theme="light"] .pain-art {
  background:
    radial-gradient(140% 80% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(15,15,17,0.018), rgba(15,15,17,0));
}
[data-theme="light"] .pain-art svg text { fill: rgba(15,15,17,0.45) !important; }
[data-theme="light"] .pain-art svg [stroke="rgba(255,255,255,0.5)"] { stroke: rgba(15,15,17,0.55) !important; }
[data-theme="light"] .pain-art svg [stroke*="rgba(255,255,255"] { stroke: rgba(15,15,17,0.25) !important; }
[data-theme="light"] .pain-art svg [fill="rgba(255,255,255"] { fill: rgba(15,15,17,0.25) !important; }

/* Pills */
[data-theme="light"] .pill { color: var(--ink); border-color: var(--line-strong); }
[data-theme="light"] .pill:hover { color: var(--lime); border-color: color-mix(in srgb, var(--accent) 52%, transparent); }

/* Nav scrolled */
[data-theme="light"] .nav-scrolled { background: rgba(245,243,236,0.80); border-bottom-color: var(--line); }

/* Text gradients */
[data-theme="light"] .text-grad { background: linear-gradient(180deg, var(--ink) 0%, #5a5a5a 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .metric-num { background: linear-gradient(180deg, var(--ink) 0%, #6e6e6e 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tag */
[data-theme="light"] .tag { background: rgba(15,15,17,0.025); color: var(--ink-2); border-color: var(--line-strong); }
[data-theme="light"] .tag.tag-lime { background: var(--lime-soft); color: var(--lime); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
[data-theme="light"] .corner-ticks::before, [data-theme="light"] .corner-ticks::after { border-color: rgba(15,15,17,0.30); }

/* Hover bg */
[data-theme="light"] .hover\:bg-ink-800:hover { background-color: var(--hover-bg) !important; }

/* Selection global */
[data-theme="light"] .selection\:bg-lime\/30 ::selection { background: var(--selection-bg); }

/* ============================================================
   THEME / LANG TOGGLES UI
   ============================================================ */
.theme-toggle, .lang-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--chip-bg);
  padding: 3px;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink-2);
  gap: 0;
}
.theme-toggle button, .lang-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  min-width: 28px; height: 22px;
  font: inherit;
}
.theme-toggle button[aria-pressed="true"],
.lang-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.theme-toggle button:hover, .lang-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"]:hover { color: var(--bg); }
.theme-toggle svg { width: 13px; height: 13px; }

/* Color transitions for theme swap */
body, .card, .arch-layer-card, .brain-core, .brain-spoke,
.sovereignty-card, .model-sigil, .pain-art, .nav-scrolled, .tag, .btn-ghost, .btn-primary,
.cost-track, .cost-bar-cloud, .cost-bar-prem, .pill {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}