/* ═══════════════════════════════════════════════════════
   ETERNAL TECHNOLOGIES — DESIGN SYSTEM v2
   Aesthetic: Modern tech, deep navy, teal & violet
   Typography: Plus Jakarta Sans · Inter · JetBrains Mono
   ═══════════════════════════════════════════════════════ */

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

:root {
  --base-900: #0a1628;
  --base-800: #0f1d33;
  --base-700: #152540;
  --base-600: #1c2f4f;
  --stroke:   rgba(255, 255, 255, 0.06);
  --stroke-h: rgba(255, 255, 255, 0.10);

  --accent:    #00c2b8;
  --accent-l:  #00e0d4;
  --accent-g:  rgba(0, 194, 184, 0.12);
  --accent-s:  rgba(0, 194, 184, 0.06);
  --secondary: #8b7cf6;
  --secondary-g: rgba(139, 124, 246, 0.12);

  --text-1: #e8edf5;
  --text-2: #94a3c4;
  --text-3: #7889ad;

  --sig-g: #34d399;
  --sig-a: #fbbf24;
  --sig-r: #f87171;
  --sig-c: #60a5fa;

  --cat-eng: #00c2b8;
  --cat-eng-g: rgba(0,194,184,0.10);
  --cat-cyber: #8b7cf6;
  --cat-cyber-g: rgba(139,124,246,0.10);
  --cat-product: #f59e0b;
  --cat-product-g: rgba(245,158,11,0.10);

  --f-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', 'Menlo', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
}

[data-theme="light"] {
  --base-900: #f8fafc;
  --base-800: #f1f5f9;
  --base-700: #e2e8f0;
  --base-600: #cbd5e1;
  --stroke:   rgba(0, 0, 0, 0.06);
  --stroke-h: rgba(0, 0, 0, 0.10);
  --accent:    #0d9e96;
  --accent-l:  #0bb5ac;
  --accent-g:  rgba(13, 158, 150, 0.10);
  --accent-s:  rgba(13, 158, 150, 0.05);
  --secondary: #6f5ed3;
  --secondary-g: rgba(111, 94, 211, 0.10);
  --text-1: #0f1d33;
  --text-2: #475569;
  --text-3: #64748b;
  --cat-eng: #0d9e96;
  --cat-eng-g: rgba(13,158,150,0.08);
  --cat-cyber: #6f5ed3;
  --cat-cyber-g: rgba(111,94,211,0.08);
  --cat-product: #d97706;
  --cat-product-g: rgba(217,119,6,0.08);
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--base-600) var(--base-900);
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  background: var(--base-900);
  color: var(--text-1);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--base-900);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

::selection { background: var(--accent); color: var(--base-900); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ═══════════ CURSOR GLOW ═══════════ */
.cursor-glow {
  position: fixed;
  width: 500px; height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(0,194,184,0.06) 0%, transparent 70%);
  mix-blend-mode: screen;
  transform: translate3d(-500px, -500px, 0);
  will-change: transform;
  contain: strict;
}

[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle, rgba(13,158,150,0.04) 0%, transparent 70%);
}

/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 22, 40, 0.8);
  border-bottom: 1px solid var(--stroke);
  transition: background 0.3s var(--ease);
}
[data-theme="light"] .nav { background: rgba(248, 250, 252, 0.85); }

.nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.nav__logo { width: 32px; height: 32px; flex-shrink: 0; }
.logo-img { width: 32px; height: 32px; border-radius: 6px; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav__name { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.nav__suffix { font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; }

.nav__center {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav__link {
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s var(--ease);
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--f-body);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--text-1); }
.nav__link--dropdown { display: flex; align-items: center; gap: 0.3rem; }
.nav__link--dropdown svg { transition: transform 0.2s var(--ease); }

/* Nav Dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 260px;
  background: var(--base-700);
  border: 1px solid var(--stroke-h);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
[data-theme="light"] .nav__dropdown-menu {
  background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown:hover .nav__link--dropdown svg,
.nav__dropdown.is-open .nav__link--dropdown svg { transform: rotate(180deg); }
.nav__dropdown-link {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-1);
  transition: background 0.15s var(--ease);
}
.nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { background: var(--accent-g); }
.nav__dropdown-link[data-cat="eng"]:hover,
.nav__dropdown-link[data-cat="eng"]:focus-visible { background: var(--cat-eng-g); }
.nav__dropdown-link[data-cat="cyber"]:hover,
.nav__dropdown-link[data-cat="cyber"]:focus-visible { background: var(--cat-cyber-g); }
.nav__dropdown-link[data-cat="product"]:hover,
.nav__dropdown-link[data-cat="product"]:focus-visible { background: var(--cat-product-g); }
.nav__dropdown-link span {
  font-size: 0.7rem;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 0.1rem;
}
.nav__dropdown-label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.5rem 0.75rem 0.2rem;
}
.nav__dropdown-label:not(:first-child) {
  margin-top: 0.25rem;
  border-top: 1px solid var(--stroke);
  padding-top: 0.5rem;
}

/* Nav Actions */
.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.theme-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-g); }
.theme-toggle__sun { display: block; }
.theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text-2);
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.nav__burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.active span:nth-child(2) { opacity: 0; }
.nav__burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Nav */
.nav__mobile {
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--base-800);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  visibility: hidden;
}
[data-theme="light"] .nav__mobile { background: var(--base-800); }
.nav__mobile.active { transform: translateX(0); visibility: visible; }
.nav__mobile-group {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.2rem 0 0.4rem;
}
.nav__mobile-group:first-child { padding-top: 0; }
.nav__mobile-link {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--stroke);
  transition: color 0.15s;
}
.nav__mobile-link:hover { color: var(--accent); }
.nav__mobile-link--cta { color: var(--accent); border-bottom: none; margin-top: 0.5rem; }

/* === LANG SWITCHER === */
.lang-switcher{position:relative}
.lang-switcher__toggle{display:flex;align-items:center;gap:.4rem;background:none;border:1px solid var(--border);border-radius:var(--radius, 8px);padding:.4rem .65rem;color:var(--text-2);cursor:pointer;font-size:.8rem;font-family:var(--f-body);transition:border-color .25s var(--ease),color .25s,background .25s}
.lang-switcher__toggle:hover,.lang-switcher.is-open .lang-switcher__toggle{border-color:var(--accent);color:var(--text-1);background:rgba(var(--accent-rgb,0,194,184),.06)}
.lang-switcher__flag{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
[data-theme="light"] .lang-switcher__flag{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-switcher__code{font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.lang-switcher__toggle svg{transition:transform .25s var(--ease);opacity:.5}
.lang-switcher.is-open .lang-switcher__toggle svg{transform:rotate(180deg)}
.lang-switcher__menu{position:absolute;top:calc(100% + .6rem);right:0;min-width:170px;background:var(--bg-2,#141b2d);border:1px solid var(--stroke-h,rgba(255,255,255,.08));border-radius:var(--radius-lg,12px);box-shadow:0 16px 48px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:1000;padding:.4rem;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[data-theme="light"] .lang-switcher__menu{background:#fff;box-shadow:0 16px 48px rgba(0,0,0,.1);border-color:rgba(0,0,0,.08)}
.lang-switcher:hover .lang-switcher__menu,.lang-switcher.is-open .lang-switcher__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-switcher__item{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;color:var(--text-2);text-decoration:none;font-size:.82rem;border-radius:var(--radius,8px);transition:background .15s,color .15s}
.lang-switcher__item:hover{background:rgba(255,255,255,.06);color:var(--text-1)}
[data-theme="light"] .lang-switcher__item:hover{background:rgba(0,0,0,.04)}
.lang-switcher__item--active{color:var(--accent);font-weight:600;background:rgba(var(--accent-rgb,0,194,184),.08)}
.lang-switcher__item--active:hover{background:rgba(var(--accent-rgb,0,194,184),.12)}
.lang-switcher__check{margin-left:auto;opacity:0;width:14px;height:14px;flex-shrink:0}
.lang-switcher__item--active .lang-switcher__check{opacity:1}
.lang-switcher__item .lang-switcher__flag{width:18px;height:18px}
.lang-switcher__item span{flex:1}

/* Mobile language links in mobile menu */
.nav__mobile-langs{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.25rem 1.5rem;border-top:1px solid var(--border);margin-top:auto}
.nav__mobile-lang{display:flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border:1px solid var(--border);border-radius:var(--radius, 8px);color:var(--text-2);text-decoration:none;font-size:.8rem;transition:border-color .2s,color .2s,background .2s}
.nav__mobile-lang:hover{border-color:var(--accent);color:var(--text-1);background:rgba(var(--accent-rgb,0,194,184),.05)}
.nav__mobile-lang--active{border-color:var(--accent);color:var(--accent);font-weight:600;background:rgba(var(--accent-rgb,0,194,184),.08)}
.nav__mobile-lang img{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
[data-theme="light"] .nav__mobile-lang img{box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--base-900);
}
.btn--primary:hover { box-shadow: 0 4px 24px rgba(0,194,184,0.3); }

.btn--outline {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--stroke-h);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 6rem;
  overflow: hidden;
}

/* ── Aurora mesh background ──
   Three-blob system, all GPU-composited (transform + opacity only).
   Blob 1 (::before): teal,   top-left anchor,      18 s drift.
   Blob 2 (::after):  violet, bottom-right anchor,  22 s drift.
   Blob 3 (central):  teal,   background-position,  28 s shift.
*/
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  /* Central blob (blob 3) layered over the base colour */
  background:
    radial-gradient(ellipse 55% 45% at 50% 52%,
      rgba(0, 194, 184, 0.04) 0%,
      transparent 65%
    ),
    var(--base-900);
  background-size: 200% 200%, auto;
  animation: aurora-core 28s ease-in-out infinite alternate;
}

/* Shared pseudo-element base */
.hero__bg::before,
.hero__bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Blob 1 — teal, anchored top-left, drifts toward bottom-right */
.hero__bg::before {
  width: 75%;
  height: 75%;
  top: -15%;
  left: -20%;
  background: radial-gradient(ellipse at center,
    rgba(0, 194, 184, 0.13) 0%,
    rgba(0, 194, 184, 0.05) 40%,
    transparent 70%
  );
  animation: aurora-blob-1 18s ease-in-out infinite alternate;
}

/* Blob 2 — violet, anchored bottom-right, drifts toward top-left */
.hero__bg::after {
  width: 70%;
  height: 70%;
  bottom: -20%;
  right: -15%;
  background: radial-gradient(ellipse at center,
    rgba(139, 124, 246, 0.11) 0%,
    rgba(139, 124, 246, 0.04) 40%,
    transparent 70%
  );
  animation: aurora-blob-2 22s ease-in-out infinite alternate;
}

/* ── Keyframes (GPU-safe: only transform + opacity) ── */
@keyframes aurora-blob-1 {
  0%   { transform: translate(0%,    0%)    scale(1);    opacity: 1; }
  25%  { transform: translate(12%,   8%)    scale(1.08); opacity: 0.85; }
  50%  { transform: translate(22%,  18%)    scale(0.95); opacity: 0.95; }
  75%  { transform: translate(10%,  28%)    scale(1.12); opacity: 0.80; }
  100% { transform: translate(28%,  14%)    scale(1.05); opacity: 0.90; }
}

@keyframes aurora-blob-2 {
  0%   { transform: translate(0%,    0%)    scale(1);    opacity: 1; }
  25%  { transform: translate(-14%, -10%)   scale(1.06); opacity: 0.80; }
  50%  { transform: translate(-8%,  -22%)   scale(0.92); opacity: 0.90; }
  75%  { transform: translate(-20%, -14%)   scale(1.10); opacity: 0.85; }
  100% { transform: translate(-24%,  -6%)   scale(1.03); opacity: 0.75; }
}

/* Core blob: animate background-position to gently shift the centre gradient */
@keyframes aurora-core {
  0%   { background-position: 50% 52%; }
  33%  { background-position: 44% 58%; }
  66%  { background-position: 56% 44%; }
  100% { background-position: 50% 52%; }
}

/* ── Light theme overrides — softer intensities ── */
[data-theme="light"] .hero__bg {
  background:
    radial-gradient(ellipse 55% 45% at 50% 52%,
      rgba(13, 158, 150, 0.035) 0%,
      transparent 65%
    ),
    var(--base-900);
  background-size: 200% 200%, auto;
  animation: aurora-core 28s ease-in-out infinite alternate;
}

[data-theme="light"] .hero__bg::before {
  background: radial-gradient(ellipse at center,
    rgba(13, 158, 150, 0.09) 0%,
    rgba(13, 158, 150, 0.03) 40%,
    transparent 70%
  );
}

[data-theme="light"] .hero__bg::after {
  background: radial-gradient(ellipse at center,
    rgba(111, 94, 211, 0.07) 0%,
    rgba(111, 94, 211, 0.025) 40%,
    transparent 70%
  );
}

/* ── Reduce motion: freeze animations for accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .hero__bg::before,
  .hero__bg::after {
    animation: none;
  }
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  text-align: center;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.hero__title-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: slideUp 0.6s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.12s);
}
.hero__title-line--accent { color: var(--accent); }

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

.hero__sub {
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(24px);
  animation: slideUp 0.6s var(--ease) forwards;
  animation-delay: calc(var(--d, 3) * 0.12s);
}
.hero__sub-line {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--text-2);
  margin: 0;
}
.hero__sub-line--accent { color: var(--accent); font-weight: 500; margin-top: 0.5rem; }

.hero__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(24px);
  animation: slideUp 0.6s var(--ease) forwards;
  animation-delay: calc(var(--d, 4) * 0.12s);
}

/* ═══════════ STATUS BAR ═══════════ */
.status-bar {
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: var(--base-800);
  padding: 0.75rem 0;
}
.status-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-3);
}
.status-bar__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sig-g);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══════════ HOVER MICRO-INTERACTIONS ═══════════ */
.status-bar__track { position: relative; overflow: hidden; height: 1.2em; flex: 1; text-align: center; }
.status-bar__item {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  white-space: nowrap;
}
.status-bar__item.active { opacity: 1; }

/* ═══════════ STATS ═══════════ */
.stats { padding: 4rem 0; }
.stats__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stats__item { text-align: center; }
.stats__number {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stats__label {
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.4;
}

/* ═══════════ PHILOSOPHY ═══════════ */
.philosophy {
  padding: 5rem 0;
  position: relative;
}
.philosophy__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.philosophy__quote {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: 2rem;
}
.philosophy__quote em { color: var(--accent); font-style: normal; }
.philosophy__sep {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  margin: 0 auto 2rem;
  border-radius: 1px;
}
.philosophy__points { text-align: left; display: flex; flex-direction: column; gap: 1.25rem; }
.philosophy__point { display: flex; gap: 1rem; align-items: flex-start; }
.philosophy__point-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 0.55rem;
}
.philosophy__point p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
}
.philosophy__point strong { color: var(--text-1); }
.philosophy__point--closing { padding-left: calc(6px + 1rem); }
.philosophy__point--closing p { color: var(--text-3); font-style: italic; }

/* ═══════════ SECTION HEADS ═══════════ */
.section-head { margin-bottom: 1.5rem; }
.section-head__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.section-head__tag-line {
  width: 24px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.section-head__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.section-head__title em { color: var(--accent); font-style: normal; }

/* ═══════════ EXPERTISE GRID ═══════════ */
.expertise {
  padding: 5rem 0;
  background: var(--base-800);
}
.expertise__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.expertise__header { margin-bottom: 3rem; }
.expertise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Exp Card */
.exp-card {
  position: relative;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
  overflow: hidden;
}
.exp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-color: var(--stroke-h);
}
.exp-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.exp-card:hover .exp-card__accent { opacity: 1; }
.exp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.exp-card__icon {
  width: 32px; height: 32px;
  color: var(--accent);
}
.exp-card__num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text-3);
}
.exp-card__sub {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.exp-card__title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}
.exp-card__desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 0.75rem;
  flex: 1;
}
.exp-card__caps {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}
.exp-card__caps li {
  font-size: 0.72rem;
  color: var(--text-3);
  padding-left: 0.75rem;
  position: relative;
}
.exp-card__caps li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}
.exp-card__footer { margin-top: auto; }
.exp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.2s var(--ease);
}
.exp-card__link:hover { gap: 0.6rem; }

/* ═══════════ ABOUT ═══════════ */
.about {
  padding: 5rem 0;
  position: relative;
  background: var(--base-800);
}
.about__structure {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.about__title { margin-bottom: 1.5rem; }
.about__sep {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  margin-bottom: 2.5rem;
  border-radius: 1px;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.about__text p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.about__text strong { color: var(--text-1); }
.about__values { display: flex; flex-direction: column; gap: 1.5rem; }
.about__value {
  padding: 1.25rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s;
}
.about__value:hover { border-color: var(--stroke-h); }
.about__value-num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--accent);
  margin-bottom: 0.35rem;
  display: block;
}
.about__value-title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.about__value-desc {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ═══════════ CTA / CONTACT ═══════════ */
.cta {
  padding: 5rem 0;
  position: relative;
}
.cta__inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.cta__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.cta__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.cta__title em { color: var(--accent); font-style: normal; }
.cta__desc {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.cta__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cta__pgp {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), margin 0.3s;
  margin: 0;
}
.cta__pgp.is-visible { max-height: 80px; margin-bottom: 1rem; }
.cta__pgp-inner {
  padding: 0.75rem 1rem;
  background: var(--base-800);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cta__pgp-label { color: var(--text-3); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; }
.cta__pgp code { color: var(--accent); }
.cta__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.cta__divider {
  width: 100%;
  height: 1px;
  background: var(--stroke);
  margin-bottom: 2rem;
}

/* Contact Form */
.contact-form { text-align: left; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.contact-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.contact-form__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
}
.contact-form__hint {
  font-size: 0.65rem;
  color: var(--text-3);
  font-weight: 400;
}
.contact-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.contact-form__tags-cat {
  width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #34d399);
  margin-top: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-form__tags-cat:first-child {
  margin-top: 0;
}
.contact-form__tag {
  cursor: pointer;
  display: inline-flex;
}
.contact-form__tag input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.contact-form__tag span {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  font-family: var(--f-body);
  font-size: 0.75rem;
  color: var(--text-2);
  transition: all 0.2s var(--ease);
  user-select: none;
}
.contact-form__tag span:hover {
  border-color: var(--accent);
  color: var(--text-1);
}
.contact-form__tag input:checked + span {
  background: var(--accent-g);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
[data-theme="light"] .contact-form__tag span { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .contact-form__tag span:hover { border-color: #0e8a82; color: #1e293b; }
[data-theme="light"] .contact-form__tag input:checked + span { background: rgba(0,150,140,0.08); border-color: #0e8a82; color: #0e8a82; }
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--base-800);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--text-1);
  font-family: var(--f-body);
  font-size: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
[data-theme="light"] .contact-form__input,
[data-theme="light"] .contact-form__select,
[data-theme="light"] .contact-form__textarea { background: #fff; }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-g);
}
.contact-form__textarea {
  min-height: 120px;
  resize: vertical;
  margin-bottom: 1rem;
}
.contact-form__submit { width: 100%; justify-content: center; }
.contact-form__status {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  text-align: center;
  min-height: 1.5em;
}
.contact-form__status--success { color: var(--sig-g); }
.contact-form__status--error { color: var(--sig-r); }

/* ═══════════ FOOTER ═══════════ */
.footer {
  border-top: 1px solid var(--stroke);
  background: var(--base-800);
  padding: 3rem 0 1.5rem;
}
.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.footer__name { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; }
.footer__suffix { font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.footer__tagline { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; }
.footer__col-title {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  display: block;
}
.footer__link {
  display: block;
  font-size: 0.82rem;
  color: var(--text-2);
  padding: 0.2rem 0;
  transition: color 0.15s;
}
.footer__link:hover { color: var(--accent); }
.footer__detail {
  display: block;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}
.footer__pgp { font-family: var(--f-mono); font-size: 0.65rem; }
.footer__legal-bar {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 1rem;
}
.footer__legal-link {
  font-size: 0.72rem;
  color: var(--text-3);
  transition: color 0.15s;
}
.footer__legal-link:hover { color: var(--text-2); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-3);
}
.footer__identity { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.05em; }

/* ═══════════ SUB PAGES ═══════════ */
.sub-page { padding: 3rem 0; }
.sub-page--hero { padding: 8rem 0 3rem; }
.sub-page--alt { background: var(--base-800); }
.sub-page__inner { max-width: 900px; margin: 0 auto; padding: 0 2rem; }
.sub-page__inner--wide { max-width: 1100px; }
.sub-page__inner--centered { text-align: center; }
.sub-page__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.sub-page__subtitle {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.sub-page__desc {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 1.5rem;
}
.sub-page__desc strong { color: var(--text-1); }
.sub-page__h2 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.sub-page__intro {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.sub-page__intro--narrow { max-width: 500px; margin-left: auto; margin-right: auto; }
.sub-page__content { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }

/* ═══════════ TILE SYSTEM (unified sub-page cards) ═══════════ */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.tile {
  position: relative;
  padding: 1.75rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--_cat, var(--accent)), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--_cat, var(--accent)) 25%, transparent);
}
.tile:hover::before { opacity: 1; }
[data-theme="light"] .tile { background: #fff; }
.tile__num {
  position: absolute;
  top: 1.25rem; left: 1.75rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--_cat, var(--accent));
  letter-spacing: 0.05em;
}
.tile__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}
.tile__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Steps (replaces timeline + stepper) */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.75rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  counter-increment: step;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--_cat, var(--accent)), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--_cat, var(--accent)) 25%, transparent);
}
.step:hover::before { opacity: 1; }
[data-theme="light"] .step { background: #fff; }
.step__num {
  position: absolute;
  top: 1.25rem; left: 1.75rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--_cat, var(--accent));
  letter-spacing: 0.05em;
}
.step__num::after { content: counter(step, decimal-leading-zero); }
.step__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}
.step__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Callout (replaces stat-callout) */
.callout {
  border-left: 3px solid var(--_cat, var(--accent));
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
}
.callout__text {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-1);
}
.callout__text em {
  color: var(--_cat, var(--accent));
  font-style: normal;
}

/* Notice (replaces cb-restricted-notice) */
.notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  background: var(--accent-g);
  border: 1px solid rgba(0,194,184,0.15);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--accent);
}

/* Access list (replaces cb-eligible) */
.access-list {
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.access-list__title {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.access-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.access-list__item {
  font-size: 0.82rem;
  color: var(--text-2);
}

/* Warn (replaces disclaimer) */
.warn {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--sig-a);
  border-radius: var(--radius);
}
.warn__text {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.55;
}
.warn__label { color: var(--sig-a); }

.section-cta { text-align: center; margin-top: 2rem; }

/* ═══════════ LEGAL CONTENT ═══════════ */
.legal-content h2 {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}
.legal-content h2:first-child { margin-top: 1rem; }
.legal-content p { font-size: 0.85rem; color: var(--text-2); line-height: 1.7; margin-bottom: 0.75rem; }
.legal-content ul { margin-bottom: 0.75rem; padding-left: 1.25rem; }
.legal-content li {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 0.25rem;
  list-style: disc;
}
.legal-content a { color: var(--accent); }

/* ═══════════ ARTICLES (blog tile styling) ═══════════ */
.articles { display: flex; flex-direction: column; gap: 2rem; }
.article {
  position: relative;
  padding: 2rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.article::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.article:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 25%, transparent);
}
.article:hover::before { opacity: 1; }
[data-theme="light"] .article { background: #fff; }
.article__header { margin-bottom: 1.25rem; }
.article__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.article__date { font-size: 0.72rem; color: var(--text-3); }
.article__tag {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article__title {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}
.article__body p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.article__body p:last-child { margin-bottom: 0; }
.article__body strong { color: var(--text-1); }

/* ═══════════ FAQ ═══════════ */
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
  background: transparent;
}
.faq-item:hover {
  border-color: var(--stroke-h);
  background: rgba(255,255,255,0.015);
}
.faq-item.open {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 8%, transparent);
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .faq-item { background: #fff; }
[data-theme="light"] .faq-item.open { background: #f8fffe; }
.faq-heading { margin: 0; }
.faq-question {
  width: 100%;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-1);
  text-align: left;
  transition: color 0.2s var(--ease);
}
.faq-question:hover { color: var(--accent); }
.faq-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.35s var(--ease), color 0.2s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p {
  overflow: hidden;
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.75;
  padding: 0 1.5rem 0;
  opacity: 0;
  transition: opacity 0.3s var(--ease), padding 0.35s var(--ease);
}
.faq-item.open .faq-answer > p {
  padding: 0 1.5rem 1.5rem;
  opacity: 1;
}
.faq-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-family: var(--f-mono);
  font-size: 0.65rem; font-weight: 700; margin-right: 0.6rem;
  flex-shrink: 0;
}
.faq-count {
  font-family: var(--f-mono); font-size: 0.65rem;
  color: var(--text-3); letter-spacing: 0.04em;
  margin-top: 0.75rem;
}

/* ═══════════ 404 ═══════════ */
.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 4rem;
}
.error-page__tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.error-page__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.error-page__desc {
  font-size: 0.92rem;
  color: var(--text-2);
  max-width: 500px;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* ═══════════ COOKIE BANNER ═══════════ */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  background: var(--base-700);
  border: 1px solid var(--stroke-h);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  max-width: 500px;
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  transition: transform 0.4s var(--ease);
}
[data-theme="light"] .cookie-banner {
  background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.cookie-banner.visible { transform: translateX(-50%) translateY(0); }
.cookie-banner__text { font-size: 0.78rem; color: var(--text-2); flex: 1; line-height: 1.5; }
.cookie-banner__text a { color: var(--accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-banner__btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  transition: opacity 0.15s;
}
.cookie-banner__btn:hover { opacity: 0.85; }
.cookie-banner__btn--accept { background: var(--accent); color: var(--base-900); }
.cookie-banner__btn--refuse { background: var(--base-600); color: var(--text-2); }

/* ═══════════ BACK TO TOP ═══════════ */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 999;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), color 0.15s;
  pointer-events: none;
}
.back-to-top--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { color: var(--accent); }

/* ═══════════ BENTO GRID ═══════════ */
.bento {
  padding: 5rem 0;
  background: var(--base-800);
}
.bento__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.bento__header {
  margin-bottom: 2.5rem;
}
.bento__header .section-head__tag { color: var(--accent); }
.bento__header .section-head__tag-line { background: var(--accent); }
.bento__domain-label {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 2rem 0 1rem;
}
.bento__domain-label:first-of-type { margin-top: 0; }
.bento__domain-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bento__domain-dot--eng { background: var(--cat-eng); }
.bento__domain-dot--cyber { background: var(--cat-cyber); }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}

/* Tetris — eng grid (2 tiles: wide + narrow) */
.bento__grid--eng {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "a b"
    "a c";
}
.bento__grid--eng .bento__tile:nth-child(1) { grid-area: a; }
.bento__grid--eng .bento__tile:nth-child(2) { grid-area: b; }
.bento__grid--eng .bento__tile:nth-child(3) { grid-area: c; }

/* Tetris — cyber grid (6 tiles, asymmetric) */
.bento__grid--cyber {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "a a b c"
    "d e e c"
    "d f f f";
}
.bento__grid--cyber .bento__tile:nth-child(1) { grid-area: a; }
.bento__grid--cyber .bento__tile:nth-child(2) { grid-area: b; }
.bento__grid--cyber .bento__tile:nth-child(3) { grid-area: c; }
.bento__grid--cyber .bento__tile:nth-child(4) { grid-area: d; }
.bento__grid--cyber .bento__tile:nth-child(5) { grid-area: e; }
.bento__grid--cyber .bento__tile:nth-child(6) { grid-area: f; }

/* Base tile */
.bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  padding-top: 3rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* Accent bar (top gradient, hidden by default) */
.bento__tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--_cat), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: 3;
}

/* Background image layer — revealed on hover */
.bento__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--_bg, transparent) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 85%);
  pointer-events: none;
}

/* Content above bg */
.bento__tile > * { position: relative; z-index: 1; }

/* Category colors */
.bento__tile--eng  { --_cat: var(--cat-eng); --_cat-g: var(--cat-eng-g); }
.bento__tile--cyber { --_cat: var(--cat-cyber); --_cat-g: var(--cat-cyber-g); }

/* Hover */
.bento__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--_cat) 25%, transparent);
  border-color: color-mix(in srgb, var(--_cat) 30%, var(--stroke));
}
.bento__tile:hover::before { opacity: 1; }
.bento__tile:hover::after { opacity: 0.45; }

/* Number */
.bento__tile-num {
  position: absolute;
  top: 1.25rem; left: 1.75rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  letter-spacing: 0.05em;
  z-index: 2;
}

/* Icon */
.bento__tile-icon {
  width: 32px; height: 32px;
  color: var(--_cat);
  margin-bottom: 0.75rem;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.bento__tile:hover .bento__tile-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--_cat) 50%, transparent));
}

/* Title */
.bento__tile-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

/* Sub */
.bento__tile-sub {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* Arrow */
.bento__tile-arrow {
  position: absolute;
  top: 1.25rem; right: 1.75rem;
  color: var(--_cat);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 2;
}
.bento__tile:hover .bento__tile-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Light theme */
[data-theme="light"] .bento { background: var(--base-800); }
[data-theme="light"] .bento__tile { background: var(--base-700); }
[data-theme="light"] .bento__tile:hover::after { opacity: 0.15; }
@media (prefers-reduced-motion: reduce) {
  .bento__tile::after { display: none; }
}

/* ── Bento responsive ── */
@media (max-width: 1024px) {
  .bento__grid,
  .bento__grid--eng {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "a b"
      "c c";
    grid-auto-rows: minmax(180px, auto);
  }
  .bento__grid--cyber {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
}
@media (max-width: 768px) {
  .bento__grid,
  .bento__grid--eng,
  .bento__grid--cyber {
    grid-template-columns: 1fr;
    grid-template-areas: none !important;
    grid-auto-rows: auto;
  }
  .bento__grid--eng .bento__tile:nth-child(1),
  .bento__grid--eng .bento__tile:nth-child(2),
  .bento__grid--eng .bento__tile:nth-child(3),
  .bento__grid--cyber .bento__tile:nth-child(1),
  .bento__grid--cyber .bento__tile:nth-child(2),
  .bento__grid--cyber .bento__tile:nth-child(3),
  .bento__grid--cyber .bento__tile:nth-child(4),
  .bento__grid--cyber .bento__tile:nth-child(5),
  .bento__grid--cyber .bento__tile:nth-child(6) { grid-area: auto; }
  .bento__tile { min-height: 160px; }
}
@media (max-width: 480px) {
  .bento { padding: 3rem 0; }
  .bento__inner { padding: 0 1.25rem; }
  .bento__tile { padding: 1.25rem; min-height: 140px; }
  .bento__tile-num { top: 1rem; left: 1.25rem; }
  .bento__tile-arrow { top: 1rem; right: 1.25rem; }
}

/* ═══════════ WHY SECTION ═══════════ */
.why-section {
  padding: 5rem 0;
  position: relative;
}
.why-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.why-section__left { position: sticky; top: 6rem; }
.why-section__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.why-section__eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.why-section__headline {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.why-section__headline em { color: var(--accent); font-style: normal; }
.why-section__desc {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 420px;
}
.why-list {
  display: flex;
  flex-direction: column;
}
.why-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--stroke);
}
.why-item:last-child { border-bottom: none; }
.why-item__title {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 140px;
}
.why-item__title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.6rem;
  vertical-align: middle;
}
.why-item__desc {
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.4;
}

/* ═══════════ CATEGORY COLOR INHERITANCE ═══════════ */
.sub-page--hero ~ .sub-page { --_cat: var(--cat-product); --_cat-g: var(--cat-product-g); }
.sub-page--hero-eng ~ .sub-page { --_cat: var(--cat-eng); --_cat-g: var(--cat-eng-g); }
.sub-page--hero-cyber ~ .sub-page { --_cat: var(--cat-cyber); --_cat-g: var(--cat-cyber-g); }

/* ═══════════ SUB PAGE HERO VARIANTS ═══════════ */
.sub-page--hero-eng {
  background: linear-gradient(180deg, rgba(0,194,184,0.04) 0%, transparent 60%), var(--base-900);
}
.sub-page--hero-eng .sub-page__subtitle { color: var(--cat-eng); }
.sub-page--hero-cyber {
  background: linear-gradient(180deg, rgba(139,124,246,0.04) 0%, transparent 60%), var(--base-900);
}
.sub-page--hero-cyber .sub-page__subtitle { color: var(--cat-cyber); }
.sub-page--hero-cyber .section-head__tag { color: var(--cat-cyber); }
.sub-page--hero-cyber .section-head__tag-line { background: var(--cat-cyber); }
.sub-page--hero-product {
  background: linear-gradient(180deg, rgba(245,158,11,0.04) 0%, transparent 60%), var(--base-900);
}
.sub-page--hero-product .sub-page__subtitle { color: var(--cat-product); }


/* ═══════════ CURSOR GLOW VARIANTS ═══════════ */
.cursor-glow--cyber {
  background: radial-gradient(circle, rgba(139,124,246,0.06) 0%, transparent 70%);
}
.cursor-glow--product {
  background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 70%);
}
[data-theme="light"] .cursor-glow--cyber {
  background: radial-gradient(circle, rgba(111,94,211,0.04) 0%, transparent 70%);
}
[data-theme="light"] .cursor-glow--product {
  background: radial-gradient(circle, rgba(217,119,6,0.03) 0%, transparent 70%);
}

/* ═══════════ MOBILE NAV CATEGORY DOTS ═══════════ */
.nav__mobile-link[data-cat]::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.nav__mobile-link[data-cat="eng"]::before { background: var(--cat-eng); }
.nav__mobile-link[data-cat="cyber"]::before { background: var(--cat-cyber); }
.nav__mobile-link[data-cat="product"]::before { background: var(--cat-product); }

/* ═══════════ REVEALS ═══════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════ SUB-PAGE HERO GLOW ═══════════ */
.sub-page--hero {
  position: relative;
  overflow: hidden;
}
.sub-page__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--_cat, var(--accent-g)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: subGlowPulse 6s ease-in-out infinite;
}
.sub-page--hero .sub-page__inner {
  position: relative;
  z-index: 1;
}
@keyframes subGlowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.9; transform: translateX(-50%) scale(1.15); }
}

/* ═══════════ SUB-PAGE SECTION SEPARATOR ═══════════ */
.sub-page__sep {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--_cat, var(--accent)), transparent);
  margin-bottom: 2rem;
  border-radius: 1px;
}

/* ═══════════ SUB-PAGE CTA END GLOW ═══════════ */
.sub-page--cta-end {
  position: relative;
  overflow: hidden;
}
.sub-page--cta-end .sub-page__glow {
  top: auto;
  bottom: -30%;
}

/* ═══════════ ACCESS-LIST HOVER ═══════════ */
.access-list__item {
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.access-list__item:hover {
  background: var(--accent-s);
  color: var(--text-1);
}

/* ═══════════ MOCKUP (product pages) ═══════════ */
.mockup {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base-800);
}
.mockup__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  background: var(--base-700);
  border-bottom: 1px solid var(--stroke);
}
.mockup__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stroke-h);
}
.mockup__title {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-left: auto;
}
.mockup__body--feed {
  padding: 0;
}
.mockup__feed-item {
  display: grid;
  grid-template-columns: 70px 40px 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--stroke);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-2);
  transition: background 0.3s var(--ease);
}
.mockup__feed-item:hover {
  background: rgba(255,255,255,0.02);
}
.mockup__feed-item:last-of-type {
  border-bottom: none;
}
.mockup__feed-time {
  color: var(--text-3);
  letter-spacing: 0.05em;
}
.mockup__feed-zone {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.mockup__feed-text {
  color: var(--text-2);
  font-family: var(--f-body);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup__feed-sev {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.mockup__feed-sev--critical {
  color: var(--sig-r);
  border: 1px solid var(--sig-r);
}
.mockup__feed-sev--high {
  color: var(--sig-a);
  border: 1px solid var(--sig-a);
}
.mockup__feed-sev--medium {
  color: var(--text-3);
  border: 1px solid var(--stroke-h);
}
.mockup__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--stroke);
  font-family: var(--f-mono);
  font-size: 0.55rem;
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.mockup__status { color: var(--sig-g); }
@media (max-width: 768px) {
  .mockup__feed-item {
    grid-template-columns: 60px 1fr auto;
  }
  .mockup__feed-zone { display: none; }
  .mockup__feed-text { font-size: 0.7rem; }
}

/* ═══════════ SUBTLE VISUAL ENHANCEMENTS ═══════════ */

/* 1. Animated Gradient Border on Section Head Tag Line */
@keyframes shimmer-gradient {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.section-head__tag-line {
  background-size: 200% 100%;
  animation: shimmer-gradient 3s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.section-head__tag-line:hover {
  opacity: 0.8;
}


/* ═══════════ SPLIT LAYOUT ═══════════ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split--60 { grid-template-columns: 3fr 2fr; }
.split--reverse > :first-child { order: 2; }
.split--reverse > :last-child  { order: 1; }
.split__title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.split__text {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}
.split__text + .split__text { margin-top: 0.75rem; }

/* ═══════════ METRICS ROW ═══════════ */
.metrics {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  flex-wrap: wrap;
}
.metrics--no-border { border: none; padding: 0; }
.metrics__item {
  text-align: center;
  min-width: 120px;
}
.metrics__value {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--_cat, var(--accent));
  line-height: 1.1;
}
.metrics__label {
  font-size: 0.75rem;
  color: var(--text-2);
  margin-top: 0.35rem;
  letter-spacing: 0.02em;
}

/* ═══════════ PROCESS FLOW ═══════════ */
.process {
  display: flex;
  gap: 0;
  counter-reset: proc;
  position: relative;
}
.process__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 1rem;
  counter-increment: proc;
}
.process__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--_cat, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--_cat, var(--accent));
  background: var(--base-900);
  position: relative;
  z-index: 1;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  flex-shrink: 0;
}
.process__circle::after { content: counter(proc); }
[data-theme="light"] .process__circle { background: var(--base-900); }
.process__step:hover .process__circle {
  background: var(--_cat, var(--accent));
  color: var(--base-900);
}
.process__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 2px;
  background: var(--stroke);
  z-index: 0;
}
.process__title {
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}
.process__text {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 200px;
}

/* ═══════════ HIGHLIGHT BANNER ═══════════ */
.highlight {
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--_cat, var(--accent)) 8%, transparent), transparent 70%), var(--base-800);
  border: 1px solid var(--stroke);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--_cat, var(--accent)) 5%, transparent), transparent 60%);
  pointer-events: none;
}
.highlight__value {
  font-family: var(--f-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  color: var(--_cat, var(--accent));
  line-height: 1;
  position: relative;
}
.highlight__text {
  font-size: 1rem;
  color: var(--text-2);
  margin-top: 0.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
}
[data-theme="light"] .highlight { background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--_cat, var(--accent)) 6%, transparent), transparent 70%), #fff; }

/* ═══════════ ICON GRID ═══════════ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.icon-grid__item {
  padding: 1rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.45;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.icon-grid__item:hover {
  transform: translateY(-3px);
  border-color: var(--_cat, var(--accent));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--_cat, var(--accent)) 15%, transparent);
}
.icon-grid__label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 0.15rem;
}
[data-theme="light"] .icon-grid__item { background: #fff; }

/* ═══════════ COMPARE PANELS ═══════════ */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.compare__panel {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: var(--base-700);
  transition: transform 0.3s var(--ease);
}
.compare__panel:hover { transform: translateY(-2px); }
.compare__panel--before { opacity: 0.85; }
.compare__panel--after {
  border-color: color-mix(in srgb, var(--_cat, var(--accent)) 40%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--_cat, var(--accent)) 8%, transparent);
}
.compare__tag {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.compare__tag-dot { width: 6px; height: 6px; border-radius: 50%; }
.compare__panel--before .compare__tag { color: var(--sig-r); }
.compare__panel--before .compare__tag-dot { background: var(--sig-r); }
.compare__panel--after .compare__tag { color: var(--_cat, var(--accent)); }
.compare__panel--after .compare__tag-dot { background: var(--_cat, var(--accent)); }
.compare__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.compare__list li { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; padding-left: 1.2rem; position: relative; }
.compare__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; }
.compare__panel--before .compare__list li::before { background: var(--sig-r); }
.compare__panel--after .compare__list li::before { background: var(--_cat, var(--accent)); }
[data-theme="light"] .compare__panel { background: #fff; }

/* ═══════════ EMAIL MOCKUP ═══════════ */
.email-mockup {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base-800);
}
.email-mockup__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.7rem 1rem;
  background: var(--base-700);
  border-bottom: 1px solid var(--stroke);
}
.email-mockup__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-h); }
.email-mockup__bar-title { font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-3); letter-spacing: 0.1em; margin-left: auto; }
.email-mockup__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--stroke); font-size: 0.78rem; color: var(--text-2); line-height: 1.8; }
.email-mockup__header strong { color: var(--text-1); }
.email-mockup__body { padding: 1.5rem 1.25rem; }
.email-mockup__body p { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; margin-bottom: 1rem; }
.email-mockup__cta { display: inline-block; padding: 0.6rem 1.5rem; background: var(--sig-r); color: #fff; border-radius: var(--radius); font-size: 0.82rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; }
.email-mockup__badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--radius); font-family: var(--f-mono); font-size: 0.6rem; color: var(--sig-r); letter-spacing: 0.05em; margin-right: 0.4rem; margin-bottom: 0.4rem; }
.email-mockup__footer { padding: 0.6rem 1.25rem; border-top: 1px solid var(--stroke); font-family: var(--f-mono); font-size: 0.55rem; color: var(--text-3); letter-spacing: 0.08em; text-align: center; }
[data-theme="light"] .email-mockup { background: #f8fafc; }
[data-theme="light"] .email-mockup__bar { background: #e2e8f0; }

/* ═══════════ GRADIENT TEXT ═══════════ */
.text-gradient {
  background: linear-gradient(135deg, var(--_cat, var(--accent)), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════ GLASS CARD ═══════════ */
.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  border-color: color-mix(in srgb, var(--_cat, var(--accent)) 25%, transparent);
}
[data-theme="light"] .glass {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .glass:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* ═══════════ FEATURE ROW (alternating big sections) ═══════════ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2.5rem 0;
}
.feature-row:nth-child(even) > :first-child { order: 2; }
.feature-row:nth-child(even) > :last-child  { order: 1; }
.feature-row__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-row__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--_cat, var(--accent)) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.feature-row__tag {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--_cat, var(--accent));
  margin-bottom: 0.75rem;
}
.feature-row__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.feature-row__desc {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ═══════════ STAT CARD (glowing) ═══════════ */
.stat-card {
  position: relative;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--base-700);
  border: 1px solid var(--stroke);
  text-align: center;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--_cat, var(--accent)) 6%, transparent), transparent 60%);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--_cat, var(--accent)) 15%, transparent);
}
.stat-card__value {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--_cat, var(--accent));
  line-height: 1;
  position: relative;
}
.stat-card__label {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-top: 0.5rem;
  position: relative;
}
[data-theme="light"] .stat-card { background: #fff; }

/* ═══════════ STAT CARDS GRID ═══════════ */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* ═══════════ VERTICAL TIMELINE ═══════════ */
.timeline-v {
  position: relative;
  padding-left: 2rem;
}
.timeline-v::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--_cat, var(--accent)), transparent);
}
.timeline-v__item {
  position: relative;
  padding: 0 0 2.5rem 1.5rem;
}
.timeline-v__item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--_cat, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--_cat, var(--accent)) 40%, transparent);
}
.timeline-v__item:last-child { padding-bottom: 0; }
.timeline-v__date {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--_cat, var(--accent));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.timeline-v__title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.timeline-v__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ═══════════ PILL TAGS ═══════════ */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--stroke);
  color: var(--text-2);
  background: var(--base-700);
  transition: all 0.3s var(--ease);
}
.tag:hover { border-color: var(--_cat, var(--accent)); color: var(--_cat, var(--accent)); }
.tag--active { border-color: var(--_cat, var(--accent)); color: var(--_cat, var(--accent)); background: color-mix(in srgb, var(--_cat, var(--accent)) 8%, transparent); }
[data-theme="light"] .tag { background: #fff; }

/* ═══════════ MARQUEE ═══════════ */
.marquee {
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}
.marquee__item {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee__item--accent { color: var(--_cat, var(--accent)); }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════ QUOTE XL ═══════════ */
.quote-xl {
  position: relative;
  padding: 2rem 2.5rem;
  max-width: 700px;
  margin: 0 auto;
}
.quote-xl::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  left: 0;
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--_cat, var(--accent)) 20%, transparent);
  pointer-events: none;
}
.quote-xl__text {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-1);
}
.quote-xl__cite {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 1rem;
  display: block;
}

/* ═══════════ GLOW DIVIDER ═══════════ */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--_cat, var(--accent)), transparent);
  margin: 3rem 0;
  opacity: 0.3;
}

/* ═══════════ FLOATING ANIMATION ═══════════ */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float { animation: float-gentle 4s ease-in-out infinite; }
.float--delay { animation-delay: 2s; }

/* ═══════════ BENTO PAGE GRID ═══════════ */
.bento-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.bento-page__item {
  position: relative;
  padding: 1.75rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bento-page__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--_cat, var(--accent)), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.bento-page__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--_cat, var(--accent)) 15%, transparent);
  border-color: color-mix(in srgb, var(--_cat, var(--accent)) 20%, transparent);
}
.bento-page__item:hover::before { opacity: 1; }
.bento-page__item--span2 { grid-column: span 2; }
.bento-page__item--span-row { grid-row: span 2; }
.bento-page__item--featured {
  background: radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--_cat, var(--accent)) 6%, transparent), transparent 70%), var(--base-700);
}
.bento-page__num {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--_cat, var(--accent));
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.bento-page__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.bento-page__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}
[data-theme="light"] .bento-page__item { background: #fff; }
[data-theme="light"] .bento-page__item--featured { background: radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--_cat, var(--accent)) 4%, transparent), transparent 70%), #fff; }

/* ═══════════ PERSONA / USE CASE CARD ═══════════ */
.persona-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.persona-card {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.persona-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--_cat, var(--accent)), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--_cat, var(--accent)) 12%, transparent);
}
.persona-card:hover::after { opacity: 1; }
.persona-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--_cat, var(--accent)) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--_cat, var(--accent));
  font-size: 1.1rem;
}
.persona-card__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.persona-card__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}
[data-theme="light"] .persona-card { background: #fff; }

/* ═══════════ MAGAZINE ARTICLE CARD ═══════════ */
.magazine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.magazine-card {
  position: relative;
  padding: 2rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.magazine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.magazine-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  background: radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--_cat, var(--accent)) 5%, transparent), transparent 70%), var(--base-700);
}
.magazine-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.magazine-card__date { font-family: var(--f-mono); font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.05em; }
.magazine-card__tag { font-family: var(--f-mono); font-size: 0.55rem; color: var(--_cat, var(--accent)); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border: 1px solid color-mix(in srgb, var(--_cat, var(--accent)) 30%, transparent); border-radius: 100px; }
.magazine-card__title {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.magazine-card--featured .magazine-card__title { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
.magazine-card__excerpt {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.65;
}
.magazine-card__read {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--_cat, var(--accent));
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: gap 0.3s var(--ease);
}
.magazine-card__read:hover { gap: 0.8rem; }
[data-theme="light"] .magazine-card { background: #fff; }
[data-theme="light"] .magazine-card--featured { background: radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--_cat, var(--accent)) 3%, transparent), transparent 70%), #fff; }

/* ═══════════ SPEC LINE ═══════════ */
.spec-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--stroke);
  font-size: 0.85rem;
}
.spec-line:last-child { border-bottom: none; }
.spec-line__label { color: var(--text-2); }
.spec-line__value { font-family: var(--f-mono); font-weight: 600; color: var(--_cat, var(--accent)); font-size: 0.8rem; }

/* ═══════════ BIG HERO (oversized for impact) ═══════════ */
.sub-page--hero-big { padding: 10rem 0 4rem; }
.sub-page--hero-big .sub-page__title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
}

/* ═══════════ REVEAL VARIANTS ═══════════ */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .expertise__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .why-section__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-section__left { position: static; }
  .why-item { flex-direction: column; gap: 0.2rem; }
  .why-item__title { min-width: auto; }
}

@media (max-width: 768px) {
  .nav__center { display: none; }
  .nav__burger { display: flex; }
  .lang-switcher { display: none; }

  .hero { min-height: 85vh; padding: 7rem 1.5rem 4rem; }
  .hero__title { font-size: clamp(1.8rem, 7vw, 2.8rem); }

  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .expertise__grid { grid-template-columns: 1fr; }
  .tiles, .steps { grid-template-columns: 1fr; }
  .access-list__grid { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse > :first-child { order: unset; }
  .split--reverse > :last-child  { order: unset; }
  .metrics { gap: 1.5rem; }
  .metrics__item { min-width: calc(50% - 1.5rem); }
  .process { flex-direction: column; align-items: center; gap: 1.5rem; }
  .process__step { flex-direction: row; text-align: left; gap: 1rem; padding: 0; }
  .process__text { max-width: none; }
  .process__step:not(:last-child)::after {
    top: 52px; left: 24px;
    width: 2px; height: calc(100% + 1.5rem - 4px);
  }
  .compare { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 2rem; }
  .feature-row:nth-child(even) > :first-child { order: unset; }
  .feature-row:nth-child(even) > :last-child  { order: unset; }
  .feature-row__visual { aspect-ratio: 16/9; }
  .bento-page { grid-template-columns: 1fr; }
  .bento-page__item--span2 { grid-column: span 1; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .persona-cards { grid-template-columns: 1fr; }
  .magazine-grid { grid-template-columns: 1fr; }
  .magazine-card--featured { grid-template-columns: 1fr; }
  .sub-page--hero-big { padding: 7rem 0 3rem; }

  .contact-form__row { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .footer__legal-bar { flex-wrap: wrap; gap: 1rem; }

  .cookie-banner {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    bottom: 1rem;
  }
}

@media (max-width: 480px) {
  html { font-size: 16px; }
  .stats__inner { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .metrics { flex-direction: column; gap: 1.25rem; }
  .metrics__item { min-width: auto; }
  .why-item__title { font-size: 0.85rem; min-width: auto; }
}

/* ═══════════ THEME TRANSITION (View Transitions API) ═══════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 9999;
  animation: vt-expand .5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes vt-expand {
  from { clip-path: circle(0px at var(--vt-cx, 50%) var(--vt-cy, 50%)); }
  to   { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-cx, 50%) var(--vt-cy, 50%)); }
}

/* ═══════════════════════════════════════════════════════
   PAGE-SPECIFIC ANIMATIONS & DECORATIONS
   ═══════════════════════════════════════════════════════ */

/* ─── Keyframes ─── */
@keyframes coin-float {
  0%   { transform: translateY(0) rotateY(0deg) rotateX(10deg); }
  50%  { transform: translateY(-18px) rotateY(180deg) rotateX(-5deg); }
  100% { transform: translateY(0) rotateY(360deg) rotateX(10deg); }
}
@keyframes radar-ping {
  0%   { transform: scale(0.3); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes terminal-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes shield-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--_accent, var(--accent))); }
  50%      { filter: drop-shadow(0 0 18px var(--_accent, var(--accent))); }
}
@keyframes node-connect {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
@keyframes gradient-morph {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes parallax-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, calc(var(--drift, -30px)), 0); }
}
@keyframes stat-bar-fill {
  from { width: 0; }
  to   { width: var(--bar-w, 100%); }
}
@keyframes slide-in-left {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes count-up-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 20px var(--_accent, var(--accent)); }
}

/* ─── Scroll Progress Bar ─── */
.scroll-progress {
  position: fixed; top: 64px; left: 0; right: 0;
  height: 2px; z-index: 999;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 0;
  background: var(--_accent, var(--accent));
  transition: width 0.1s linear;
  will-change: width;
}

/* ─── Page Decoration Container ─── */
.page-decor {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.page-decor__item {
  position: absolute;
  will-change: transform;
}
.sub-page--hero { position: relative; }
.sub-page--hero > .sub-page__inner { position: relative; z-index: 1; }

/* ─── Typed Text Component ─── */
.typed-text { font-family: var(--f-mono); }
.typed-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--_accent, var(--accent));
  margin-left: 2px; vertical-align: text-bottom;
  animation: terminal-cursor 0.8s step-end infinite;
}

/* ─── Floating Coins (Crypto) ─── */
/* ─── Crypto: Hero Decoration ─── */
.crypto-hero-deco {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.crypto-hero-deco__coin {
  position: absolute;
  opacity: 0.18;
  animation: crypto-coin-float var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes crypto-coin-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.crypto-coins {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.crypto-coins__coin {
  position: absolute;
  animation: coin-float var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.18;
  will-change: transform;
}

/* ─── Radar (Casus Belli) ─── */
.radar-container {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.radar-container svg { opacity: 0.12; }
.radar-ring {
  animation: radar-ping 3s ease-out infinite;
  transform-origin: center;
}
.radar-ring:nth-child(2) { animation-delay: 1s; }
.radar-ring:nth-child(3) { animation-delay: 2s; }

/* ─── Network Graph (OpenCrime) ─── */
.network-graph {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.network-graph svg { opacity: 0.15; }
.network-graph__edge {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: node-connect 2s ease-out forwards;
}
.network-graph__node {
  animation: shield-pulse 3s ease-in-out infinite;
}


/* ─── Warning Stripes (Phishing) ─── */
.warning-stripes {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  opacity: 0.04;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    var(--sig-r) 20px,
    var(--sig-r) 22px
  );
}

/* ═══════════ HERO PAGE SCOPING ═══════════ */

/* Crypto — Gold */
[data-page="crypto"] { --_accent: #f59e0b; --_accent-g: rgba(245,158,11,0.12); }
[data-page="crypto"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.12) 0%, transparent 65%);
}
[data-page="crypto"] .text-gradient {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Casus Belli — Amber intelligence */
[data-page="casus-belli"] { --_accent: #d4a017; --_accent-g: rgba(212,160,23,0.12); }
[data-page="casus-belli"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(212,160,23,0.10) 0%, transparent 65%);
}
[data-page="casus-belli"] .text-gradient {
  background: linear-gradient(135deg, #d4a017, #b8860b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* OpenCrime — Matrix Green */
[data-page="opencrime"] { --_accent: #22c55e; --_accent-g: rgba(34,197,94,0.12); --oc-green: #22c55e; --oc-green-dim: rgba(34,197,94,0.12); }
[data-page="opencrime"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,0.12) 0%, transparent 60%);
}
[data-page="opencrime"] .text-gradient {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════ Smartphone Sécurisé — Unique Page ═══════ */
[data-page="smartphone"] { --_accent: #34d399; --_accent-g: rgba(52,211,153,0.10); }
[data-page="smartphone"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.08) 0%, transparent 65%);
}
/* Phone deco in hero */
.phone-deco {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.phone-deco svg { opacity: 0.07; }

/* ── Scroll-driven story ── */
.story {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  max-width: 64rem;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}
.story__phone-col {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
}
.story__phone {
  position: sticky;
  top: calc(50vh - 200px);
  width: 200px;
  height: 400px;
  border: 2px solid var(--stroke);
  border-radius: 28px;
  background: var(--bg-2);
  padding: 12px;
  transition: border-color 0.6s ease;
  overflow: visible;
}
.story__phone-notch {
  width: 50%;
  height: 4px;
  background: var(--stroke);
  border-radius: 2px;
  margin: 0 auto 10px;
}
.story__phone-screen {
  border-radius: 18px;
  background: var(--bg-1);
  height: calc(100% - 18px);
  padding: 0.75rem;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--text-3);
  transition: background 0.6s, color 0.4s;
}
.story__screen-state {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.story__screen-state.is-active {
  display: block;
  opacity: 1;
}
/* ─── Scanline overlay ─── */
.story__scanline {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 2; opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
  );
  transition: opacity 0.6s;
}
.story__phone[data-state="seized"] .story__scanline,
.story__phone[data-state="pressure"] .story__scanline,
.story__phone[data-state="cable"] .story__scanline { opacity: 1; }

/* ─── Screen: idle (lock screen) ─── */
.scr-lock { text-align: center; padding-top: 0.75rem; }
.scr-lock__time {
  font-size: 1.6rem; font-weight: 300;
  letter-spacing: 0.05em; line-height: 1;
}
.scr-lock__date { font-size: 0.45rem; color: var(--text-3); margin-top: 0.2rem; }
.scr-lock__carrier {
  display: flex; align-items: center; justify-content: center; gap: 0.2rem;
  font-size: 0.4rem; color: var(--text-3); margin-top: 0.5rem;
}
.scr-lock__signal {
  display: inline-flex; align-items: flex-end; gap: 1px; height: 8px;
}
.scr-lock__signal span {
  display: block; width: 2px; background: var(--text-3); border-radius: 1px;
}
.scr-lock__signal span:nth-child(1) { height: 3px; }
.scr-lock__signal span:nth-child(2) { height: 5px; }
.scr-lock__signal span:nth-child(3) { height: 7px; }
.scr-lock__signal span:nth-child(4) { height: 8px; opacity: 0.3; }
.scr-lock__icon { margin-top: 1.8rem; opacity: 0.5; }
.scr-lock__hint { font-size: 0.45rem; color: var(--text-3); margin-top: 0.5rem; }
.scr-lock__dots {
  display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.5rem;
}
.scr-lock__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--text-3); background: transparent;
}
.scr-lock__dots--filling span {
  background: var(--text-2);
  animation: dot-fill 0.15s ease forwards;
}
.scr-lock__dots--filling span:nth-child(1) { animation-delay: 0s; }
.scr-lock__dots--filling span:nth-child(2) { animation-delay: 0.2s; }
.scr-lock__dots--filling span:nth-child(3) { animation-delay: 0.4s; }
.scr-lock__dots--filling span:nth-child(4) { animation-delay: 0.6s; }
.scr-lock__dots--filling span:nth-child(5) { animation-delay: 0.8s; }
.scr-lock__dots--filling span:nth-child(6) { animation-delay: 1s; }

/* ─── Screen: seized — device seized, failed PIN attempts ─── */
.scr-seized { text-align: center; padding-top: 0.5rem; }
.scr-seized__icon { margin: 0.5rem 0 0.3rem; }
.scr-seized__label {
  font-size: 0.55rem; font-weight: 700; color: #f87171;
  letter-spacing: 0.1em; text-transform: uppercase;
  animation: blink-text 1.2s step-end infinite;
}
@keyframes blink-text { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.scr-seized__sub {
  font-size: 0.4rem; color: rgba(248,113,113,0.7); margin-top: 0.3rem;
}
.scr-seized__dots {
  display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.5rem;
}
.scr-seized__dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--text-3); background: transparent;
}
.scr-seized__dot--fail {
  background: #f87171; border-color: #f87171;
  animation: dot-shake 0.4s ease;
  animation-delay: calc(var(--i) * 0.3s);
}
@keyframes dot-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ─── Screen: pressure — locked with countdown ─── */
.scr-pressure { text-align: center; padding-top: 0.5rem; }
.scr-pressure__icon { margin: 0.5rem 0 0.3rem; }
.scr-pressure__label {
  font-size: 0.5rem; font-weight: 700; color: #f59e0b;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.scr-pressure__timer {
  font-size: 0.42rem; color: rgba(245,158,11,0.8); margin-top: 0.4rem;
}
.scr-pressure__countdown {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700;
  color: #f59e0b; font-size: 0.5rem;
  animation: countdown-pulse 1s ease infinite;
}
.scr-pressure__attempts {
  font-size: 0.4rem; color: var(--text-3); margin-top: 0.3rem;
  letter-spacing: 0.04em;
}

/* ─── Screen: duress — PIN entry with stealth unlock ─── */
.scr-duress { text-align: center; padding-top: 0.5rem; }
.scr-duress__flash {
  font-size: 0.45rem; font-weight: 700; color: #34d399;
  margin-top: 0.6rem; letter-spacing: 0.06em;
  opacity: 0; animation: duress-flash 0.8s ease 1.2s forwards;
}
@keyframes duress-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 1; }
}
.scr-duress__stealth {
  font-size: 0.35rem; color: rgba(52,211,153,0.25); margin-top: 0.4rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
}

/* ─── Screen: wipe — split facade + terminal ─── */
.scr-wipe {
  display: flex; flex-direction: column;
  height: 100%; position: relative; overflow: hidden;
}
.scr-wipe__facade {
  padding: 0.5rem 0.3rem; flex: 0 0 auto;
}
.scr-wipe__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem; justify-items: center; padding: 0.3rem;
}
.scr-wipe__app { opacity: 0.4; }
.scr-wipe__terminal {
  background: rgba(0,0,0,0.85); padding: 0.3rem 0.4rem;
  flex: 1; text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  animation: terminal-slide-up 0.6s ease 0.3s both;
}
.scr-wipe__line {
  font-size: 0.34rem; color: rgba(52,211,153,0.7); line-height: 1.7;
  opacity: 0; animation: type-line 0.3s ease forwards;
}
.scr-wipe__line:nth-child(1) { animation-delay: 0.5s; }
.scr-wipe__line:nth-child(2) { animation-delay: 1.0s; }
.scr-wipe__line:nth-child(3) { animation-delay: 1.5s; }
.scr-wipe__line:nth-child(4) { animation-delay: 2.0s; }
.scr-wipe__line:nth-child(5) { animation-delay: 2.5s; }
.scr-wipe__line:nth-child(6) { animation-delay: 3.0s; }
.scr-wipe__line:nth-child(7) { animation-delay: 3.5s; }
.scr-wipe__line--ok { color: #34d399; font-weight: 700; }
.scr-wipe__progress-inline {
  display: inline-block; width: 3.5em; height: 0.5em;
  background: linear-gradient(to right, #34d399 82%, rgba(52,211,153,0.2) 82%);
  border-radius: 2px; vertical-align: middle; margin: 0 0.15em;
}

/* ─── Screen: cable — USB port blocked ─── */
.scr-cable { text-align: center; padding-top: 0.75rem; }
.scr-cable__notif { margin-bottom: 0.6rem; }
.scr-cable__usb-icon { margin-bottom: 0.3rem; }
.scr-cable__label {
  font-size: 0.45rem; font-weight: 700; color: #f87171;
  letter-spacing: 0.06em; text-transform: uppercase;
  animation: notif-slide 0.4s ease;
}
@keyframes notif-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.scr-cable__block {
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
  font-size: 0.42rem; font-weight: 700; color: #34d399;
  letter-spacing: 0.05em; margin-top: 0.3rem;
  padding: 0.3rem 0.4rem;
  background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.15);
  border-radius: 6px;
}
.scr-cable__mode {
  font-size: 0.38rem; color: var(--text-3); margin-top: 0.35rem;
}
.scr-cable__status {
  font-size: 0.44rem; font-weight: 700; color: #34d399;
  letter-spacing: 0.06em; margin-top: 0.5rem;
  text-transform: uppercase;
}

/* ─── Screen: safe — forensic analysis terminal ─── */
.scr-safe {
  text-align: left; padding: 0.5rem 0.4rem;
  font-family: 'IBM Plex Mono', monospace;
}
.scr-safe__title {
  font-size: 0.45rem; font-weight: 700; color: #34d399;
  letter-spacing: 0.08em; text-align: center; margin-bottom: 0.2rem;
}
.scr-safe__sep {
  border: none; border-top: 1px solid rgba(52,211,153,0.3);
  margin: 0.2rem 0;
}
.scr-safe__results { margin: 0.3rem 0; }
.scr-safe__line {
  font-size: 0.38rem; color: #34d399; padding: 0.08rem 0;
  line-height: 1.6; white-space: pre;
}
.scr-safe__line span { font-weight: 700; }
.scr-safe__verdict {
  font-size: 0.44rem; font-weight: 700; color: #34d399;
  text-align: center; margin-top: 0.2rem;
  letter-spacing: 0.06em;
}
.scr-safe__crypto {
  font-size: 0.36rem; color: rgba(52,211,153,0.6);
  text-align: center; margin-top: 0.3rem; line-height: 1.6;
}

/* ─── Screen: victory — lock screen with shield ─── */
.scr-victory { text-align: center; padding-top: 0.5rem; }
.scr-victory__shield {
  margin: 0.8rem 0 0.3rem;
  animation: shield-appear 0.6s ease;
}
@keyframes shield-appear {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.scr-victory__integrity {
  font-size: 0.4rem; color: #34d399; margin-top: 0.5rem;
  letter-spacing: 0.06em; font-weight: 600;
}

/* ─── Phone border color per state ─── */
.story__phone[data-state="idle"] { border-color: var(--stroke); }
.story__phone[data-state="seized"] {
  border-color: rgba(248,113,113,0.5);
  box-shadow: 0 0 30px rgba(248,113,113,0.1), 0 0 60px rgba(248,113,113,0.04);
}
.story__phone[data-state="pressure"] {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 30px rgba(245,158,11,0.1), 0 0 60px rgba(245,158,11,0.04);
}
.story__phone[data-state="duress"] { border-color: var(--stroke); }
.story__phone[data-state="wipe"] {
  border-color: rgba(52,211,153,0.5);
  box-shadow: 0 0 30px rgba(52,211,153,0.08);
}
.story__phone[data-state="cable"] {
  border-color: rgba(248,113,113,0.3);
  box-shadow: 0 0 25px rgba(248,113,113,0.05);
}
.story__phone[data-state="safe"] {
  border-color: #34d399;
  box-shadow: 0 0 40px rgba(52,211,153,0.12), 0 0 80px rgba(52,211,153,0.05);
}
.story__phone[data-state="victory"] {
  border-color: #34d399;
  box-shadow: 0 0 50px rgba(52,211,153,0.15);
}

/* ─── USB-C Cable Plug — Realistic ─── */
.story__cable-plug {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 80px));
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

/* USB-C metal connector */
.story__cable-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* The metal tip (the part that goes in) */
.story__cable-tip {
  width: 14px;
  height: 8px;
  background: linear-gradient(180deg, #d4d4d8 0%, #a1a1aa 40%, #71717a 100%);
  border-radius: 2px 2px 0 0;
  border: 1px solid #52525b;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 -1px 3px rgba(0,0,0,0.3);
}

/* The tongue inside the connector */
.story__cable-tongue {
  width: 8px;
  height: 3px;
  background: linear-gradient(180deg, #e4e4e7, #a1a1aa);
  border-radius: 1px;
  margin-top: -4px;
  position: relative;
  z-index: 2;
}

/* Metal housing around connector */
.story__cable-housing {
  width: 18px;
  height: 12px;
  background: linear-gradient(180deg, #a1a1aa 0%, #78716c 30%, #a1a1aa 50%, #78716c 100%);
  border-radius: 0 0 3px 3px;
  border: 1px solid #52525b;
  border-top: none;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 2px 4px rgba(0,0,0,0.4),
    -1px 0 0 rgba(255,255,255,0.1),
    1px 0 0 rgba(255,255,255,0.1);
}

/* Strain relief (rubber transition) */
.story__cable-strain {
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #44403c 0%, #1c1917 100%);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* The cable cord */
.story__cable-cord {
  width: 7px;
  height: 120px;
  background: linear-gradient(90deg, #1c1917 0%, #292524 35%, #44403c 50%, #292524 65%, #1c1917 100%);
  border-radius: 0 0 4px 4px;
  position: relative;
  box-shadow: -1px 0 2px rgba(0,0,0,0.3), 1px 0 2px rgba(0,0,0,0.3);
}

/* Inner cord highlight (rubber sheen) */
.story__cable-cord-inner {
  position: absolute;
  top: 0;
  left: 2px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0.06) 100%
  );
  border-radius: 1px;
}

/* ─ Cable animation states ─ */

/* Phase 1: slide up and plug in — stops at port (only tip enters) */
[data-state="cable"] .story__cable-plug {
  opacity: 1;
  transform: translateX(-50%) translateY(calc(100% - 8px));
  animation: cable-plug-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             cable-reject 0.5s ease 1.2s 1;
}

@keyframes cable-plug-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(calc(100% + 80px)); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(calc(100% - 8px)); }
}

/* Phase 2: shake rejection */
@keyframes cable-reject {
  0%, 100% { transform: translateX(-50%) translateY(calc(100% - 8px)); }
  10% { transform: translateX(-50%) translateY(calc(100% - 10px)) translateX(-4px); }
  20% { transform: translateX(-50%) translateY(calc(100% - 8px)) translateX(4px); }
  30% { transform: translateX(-50%) translateY(calc(100% - 9px)) translateX(-3px); }
  40% { transform: translateX(-50%) translateY(calc(100% - 8px)) translateX(3px); }
  50% { transform: translateX(-50%) translateY(calc(100% - 9px)) translateX(-2px); }
  60% { transform: translateX(-50%) translateY(calc(100% - 8px)) translateX(2px); }
  80% { transform: translateX(-50%) translateY(calc(100% - 8px)) translateX(-1px); }
}

/* Phase 3: red glow on connector = BLOCKED */
@keyframes cable-blocked-glow {
  0%   { box-shadow: 0 -4px 8px rgba(248,113,113,0); }
  50%  { box-shadow: 0 -4px 16px rgba(248,113,113,0.7), 0 -2px 8px rgba(248,113,113,0.4); }
  100% { box-shadow: 0 -4px 8px rgba(248,113,113,0); }
}

[data-state="cable"] .story__cable-tip {
  animation: cable-blocked-glow 0.8s ease 1.8s 3;
}

/* Light theme */
[data-theme="light"] .story__cable-tip {
  background: linear-gradient(180deg, #e4e4e7 0%, #d4d4d8 40%, #a1a1aa 100%);
}
[data-theme="light"] .story__cable-housing {
  background: linear-gradient(180deg, #d4d4d8 0%, #a1a1aa 30%, #d4d4d8 50%, #a1a1aa 100%);
}
[data-theme="light"] .story__cable-strain {
  background: linear-gradient(180deg, #57534e 0%, #292524 100%);
}
[data-theme="light"] .story__cable-cord {
  background: linear-gradient(90deg, #292524 0%, #44403c 35%, #57534e 50%, #44403c 65%, #292524 100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .story__cable-plug {
    transition: opacity 0.3s ease;
  }
  [data-state="cable"] .story__cable-plug {
    transform: translateX(-50%) translateY(calc(100% - 8px));
    animation: none;
  }
  [data-state="cable"] .story__cable-tip {
    animation: none;
    box-shadow: 0 -4px 12px rgba(248,113,113,0.5);
  }
}

/* Responsive */
@media (max-width: 480px) {
  .story__cable-connector { transform: scale(0.85); }
  .story__cable-cord { height: 80px; }
}

/* ─── Phone screen animations ─── */
@keyframes dot-fill {
  to { background: var(--text-1); }
}
@keyframes terminal-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes type-line {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes countdown-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes fade-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ─── Scene pivot variant ─── */
.story__scene--pivot .story__scene-title { color: var(--text-1); }
.story__scene--pivot .story__scene-num { color: #34d399; }

/* Story scenes */
.story__scenes {
  display: flex;
  flex-direction: column;
}
.story__scene {
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 2rem 2rem 2rem 3rem;
  position: relative;
}
.story__scene-content {
  opacity: 0.15;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.story__scene.is-active .story__scene-content {
  opacity: 1;
  transform: translateY(0);
}
.story__scene-num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.75rem;
}
.story__scene-title {
  font-family: var(--f-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.story__scene-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 32rem;
}
/* Scene color variants */
.story__scene--tension .story__scene-title { color: #f87171; }
.story__scene--tension .story__scene-num { color: #f87171; }
.story__scene--danger .story__scene-title { color: #ef4444; }
.story__scene--danger .story__scene-num { color: #ef4444; }
.story__scene--safe .story__scene-title { color: #34d399; }
.story__scene--safe .story__scene-num { color: #34d399; }

/* Vertical connector line between scenes */
.story__scenes::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--stroke) 10%,
    rgba(248,113,113,0.3) 45%,
    rgba(248,113,113,0.5) 60%,
    rgba(52,211,153,0.5) 80%,
    transparent 100%
  );
}
.story__scenes { position: relative; }

/* ── Protection layers (unique layout, NOT bento) ── */
.layers {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 0;
}
.layers__spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--_accent, #34d399) 20%, var(--_accent, #34d399) 80%, transparent);
  transform: translateX(-50%);
  opacity: 0.3;
}
.layer {
  position: relative;
  width: 44%;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--stroke);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, transform 0.3s;
}
.layer:hover {
  border-color: rgba(52,211,153,0.3);
  transform: translateY(-2px);
}
.layer--left { margin-right: auto; }
.layer--right { margin-left: auto; }
/* Connector dot on spine */
.layer::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--_accent, #34d399);
  opacity: 0.5;
  transform: translateY(-50%);
}
.layer--left::after { right: -6%; left: auto; }
.layer--right::after { left: -6%; right: auto; }
.layer__num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: #34d399;
  display: block;
  margin-bottom: 0.5rem;
}
.layer__title {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.layer__text {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Service steps (vertical timeline — legacy) ── */
.svc-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 42rem;
  margin: 2rem auto 0;
  position: relative;
}
.svc-steps::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--_accent, #34d399), transparent);
  opacity: 0.25;
}
.svc-step {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
  position: relative;
}
.svc-step__marker {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  position: relative;
  z-index: 1;
}
.svc-step__body { flex: 1; padding-top: 0.5rem; }
.svc-step__title {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.svc-step__text {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Supply chain (vertical linked) ── */
.chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 44rem;
  margin: 2.5rem auto 0;
}
.chain__link {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--bg-2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.chain__link:hover {
  border-color: var(--_accent, #34d399);
  box-shadow: 0 0 24px rgba(52,211,153,0.08);
}
.chain__ring {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--_accent, #34d399);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_accent, #34d399);
  background: var(--bg-1);
}
.chain__content { flex: 1; min-width: 0; }
.chain__title {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.chain__text {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
/* Mini-steps inside each chain link */
.chain__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--stroke);
}
.chain__mini {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-family: var(--f-mono);
  color: var(--text-1);
  letter-spacing: 0.01em;
  padding: 0.25rem 0;
}
.chain__mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--_accent, #34d399);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(52,211,153,0.3);
}
[data-theme="light"] .chain__mini-dot {
  background: #059669;
  box-shadow: 0 0 6px rgba(5,150,105,0.2);
}
/* Connector between links */
.chain__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 48px;
  position: relative;
}
.chain__connector-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, var(--_accent, #34d399), var(--_accent, #34d399));
  opacity: 0.3;
}
.chain__connector-lock {
  flex-shrink: 0;
  margin: 4px 0;
  opacity: 0.5;
}
/* Guarantee bar */
.chain__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--_accent, #34d399);
  border-radius: 10px;
  background: rgba(52,211,153,0.04);
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.chain__guarantee svg { flex-shrink: 0; margin-top: 2px; }
.chain__guarantee p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
/* Light theme */
[data-theme="light"] .chain__link {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .chain__link:hover {
  box-shadow: 0 4px 20px rgba(5,150,105,0.08);
}
[data-theme="light"] .chain__ring { background: #fff; }
[data-theme="light"] .chain__guarantee {
  background: rgba(5,150,105,0.04);
  border-color: #059669;
}
@media (max-width: 768px) {
  .chain__link { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.25rem; }
  .chain__ring { width: 48px; height: 48px; }
  .chain__ring svg { width: 24px; height: 24px; }
  .chain__connector { height: 36px; }
}

/* Android badge */
.android-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem; border-radius: 2rem;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.15);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--text-2);
  margin-top: 1rem;
}
.android-badge svg { flex-shrink: 0; }

/* ── Smartphone responsive ── */
@media (max-width: 768px) {
  .story { grid-template-columns: 1fr; }
  .story__phone-col {
    position: relative;
    padding: 2rem 0 0;
    justify-content: center;
  }
  .story__phone {
    position: relative;
    top: auto;
    width: 160px;
    height: 320px;
    margin: 0 auto 1rem;
  }
  .story__scene { min-height: 40vh; padding: 1.5rem 1rem 1.5rem 1.5rem; }
  .story__scenes::before { left: -0.5rem; }
  .layers__spine { display: none; }
  .layer { width: 100%; }
  .layer::after { display: none; }
  .svc-steps::before { left: 20px; }
  .svc-step__marker { width: 40px; height: 40px; font-size: 0.75rem; }
}

/* Phishing — Red */
[data-page="phishing"] { --_accent: #f87171; --_accent-g: rgba(248,113,113,0.12); }
[data-page="phishing"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(248,113,113,0.10) 0%, transparent 65%);
}
[data-page="phishing"] .text-gradient {
  background: linear-gradient(135deg, #f87171, #ef4444);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Phishing: Dual email side-by-side ── */
.phish-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.phish-dual__col { min-width: 0; }
.phish-dual__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--_accent, #f87171);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.phish-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  opacity: 0.7;
}
@media (max-width: 768px) {
  .phish-dual { grid-template-columns: 1fr; }
}

/* ── Phishing: Time-to-click clock ── */
.ttc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}
.ttc__clock {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.ttc__ring { position: absolute; inset: 0; }
.ttc__ring svg { width: 100%; height: 100%; }
.ttc__ring-fill {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ttc.in .ttc__ring-fill,
.in .ttc__ring-fill {
  stroke-dashoffset: 30;
}
.ttc__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--_accent, #f87171);
}
.ttc__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ttc__detail {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.ttc__detail-val {
  font-family: var(--f-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
  min-width: 3.5rem;
}
.ttc__detail-lbl {
  font-size: 0.82rem;
  color: var(--text-2);
}
@media (max-width: 768px) {
  .ttc { flex-direction: column; gap: 1.5rem; }
  .ttc__clock { width: 120px; height: 120px; }
}

/* ── Phishing: Attack vector grid ── */
.attack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.attack-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.attack-card:hover {
  border-color: var(--_accent, #f87171);
  transform: translateY(-2px);
}
.attack-card--main {
  grid-column: 1 / -1;
  border-color: rgba(248,113,113,0.25);
  background: rgba(248,113,113,0.03);
}
.attack-card__icon {
  color: var(--_accent, #f87171);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.attack-card__title {
  font-family: var(--f-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.attack-card__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}
.attack-card__stat {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--_accent, #f87171);
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 4px;
  background: rgba(248,113,113,0.05);
}
@media (max-width: 768px) {
  .attack-grid { grid-template-columns: 1fr; }
  .attack-card--main { grid-column: auto; }
}

/* ── Phishing: Heatmap bars ── */
.heatmap-item__bar {
  height: 4px;
  background: var(--stroke);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}
.heatmap-item--critical .heatmap-item__bar div { height: 100%; background: #f87171; border-radius: 2px; }
.heatmap-item--high .heatmap-item__bar div { height: 100%; background: #fbbf24; border-radius: 2px; }
.heatmap-item--medium .heatmap-item__bar div { height: 100%; background: #fb923c; border-radius: 2px; }
.heatmap-item--low .heatmap-item__bar div { height: 100%; background: #34d399; border-radius: 2px; }

/* ── Phishing: 3 phases colored ── */
.phish-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.phish-phase {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.phish-phase__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.phish-phase__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.phish-phase__num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.phish-phase__title {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  font-weight: 600;
}
.phish-phase__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .phish-phases { grid-template-columns: 1fr; }
}

/* ── Phishing: Deliverables ── */
.deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.deliv-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 1.5rem;
  border-top: 3px solid var(--_accent, #f87171);
  transition: transform 0.3s ease;
}
.deliv-card:hover { transform: translateY(-3px); }
.deliv-card__icon {
  color: var(--_accent, #f87171);
  margin-bottom: 1rem;
  opacity: 0.7;
}
.deliv-card__title {
  font-family: var(--f-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.deliv-card__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
}
[data-theme="light"] .attack-card { background: #fff; }
[data-theme="light"] .attack-card--main { background: rgba(220,38,38,0.02); }
[data-theme="light"] .phish-phase { background: #fff; }
[data-theme="light"] .deliv-card { background: #fff; }
@media (max-width: 768px) {
  .deliv-grid { grid-template-columns: 1fr; }
}

/* RGPD — Violet */
[data-page="rgpd"] { --_accent: #8b7cf6; --_accent-g: rgba(139,124,246,0.12); }
[data-page="rgpd"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(139,124,246,0.10) 0%, transparent 65%);
}
[data-page="rgpd"] .text-gradient {
  background: linear-gradient(135deg, #8b7cf6, #6d5ed3);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Solutions — Teal */
[data-page="solutions"] { --_accent: #00c2b8; --_accent-g: rgba(0,194,184,0.12); }

/* Transition — Green sovereignty */
[data-page="transition"] { --_accent: #34d399; --_accent-g: rgba(52,211,153,0.12); }
[data-page="transition"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.10) 0%, transparent 65%);
}
[data-page="transition"] .text-gradient {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Transition numérique — sky blue */
[data-page="transition-numerique"] { --_accent: #0ea5e9; --_accent-g: rgba(14,165,233,0.12); }
[data-page="transition-numerique"] .sub-page__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.10) 0%, transparent 65%);
}
[data-page="transition-numerique"] .text-gradient {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════
   ANALYSES / BRIEFING PAGE — Intel dashboard
   Accent: Amber-red intel #f59e0b / #f87171
   All classes prefixed brief-
   ═══════════════════════════════════════════════ */
[data-page="analyses"] { --_accent: #fbbf24; }

/* ─── Live status indicator ─── */
.brief-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--text-3);
  letter-spacing: 0.04em; margin-top: 1rem;
}
.brief-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52,211,153,0.5);
  animation: brief-pulse 2s ease-in-out infinite;
}
@keyframes brief-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
  50% { opacity: 0.5; box-shadow: 0 0 12px rgba(52,211,153,0.8); }
}

/* ─── Section blocks ─── */
.brief-section { margin-bottom: 2.5rem; }
.brief-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--stroke);
}
.brief-section__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 700;
  color: var(--text-1);
}
.brief-section__icon { color: var(--_accent); flex-shrink: 0; }
.brief-section__count {
  font-family: var(--f-mono); font-size: 0.65rem; color: var(--text-3);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ─── Threat feed ─── */
.brief-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.brief-feed__item {
  padding: 1.25rem; border-radius: var(--radius);
  background: var(--base-700); border: 1px solid var(--stroke);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.brief-feed__item:hover {
  border-color: var(--stroke-h);
  background: var(--base-600);
}
.brief-feed__top {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.brief-feed__date {
  font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-3);
  letter-spacing: 0.04em;
}
.brief-feed__group {
  font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-2);
  letter-spacing: 0.04em; font-weight: 600;
}
.brief-feed__title {
  font-family: var(--f-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text-1); margin-bottom: 0.4rem; line-height: 1.4;
}
.brief-feed__desc {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.6;
  margin-bottom: 0.6rem;
}
.brief-feed__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ─── Severity badges ─── */
.brief-sev {
  font-family: var(--f-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.brief-sev::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
}
.brief-sev--crit { color: #f87171; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); }
.brief-sev--crit::before { background: #f87171; }
.brief-sev--high { color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.25); }
.brief-sev--high::before { background: #fbbf24; }
.brief-sev--med { color: #60a5fa; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.25); }
.brief-sev--med::before { background: #60a5fa; }

/* ─── Tags ─── */
.brief-tag {
  font-family: var(--f-mono); font-size: 0.55rem;
  color: var(--text-3); letter-spacing: 0.05em;
  padding: 0.12rem 0.4rem; border-radius: 4px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.02);
}

/* ─── Coming soon placeholder ─── */
.brief-coming {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem;
  border: 1px dashed var(--stroke); border-radius: var(--radius);
  background: rgba(255,255,255,0.015);
}
.brief-coming__icon { color: var(--text-3); margin-bottom: 0.75rem; }
.brief-coming__text {
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.brief-coming__desc {
  font-size: 0.78rem; color: var(--text-3); line-height: 1.5;
  max-width: 400px;
}
[data-theme="light"] .brief-coming { background: rgba(0,0,0,0.02); }

/* ─── Geopolitical zones ─── */
.brief-zones { display: flex; flex-direction: column; gap: 0.75rem; }
.brief-zone {
  padding: 1.25rem; border-radius: var(--radius);
  background: var(--base-700); border: 1px solid var(--stroke);
  border-left: 3px solid var(--zone-color, var(--text-3));
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.brief-zone:hover {
  border-color: var(--stroke-h);
  border-left-color: var(--zone-color, var(--text-3));
  background: var(--base-600);
}
.brief-zone__head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.brief-zone__level {
  font-family: var(--f-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.brief-zone__name {
  font-family: var(--f-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text-1);
}
.brief-zone__desc {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.6;
  margin-bottom: 0.5rem;
}
.brief-zone__src {
  font-family: var(--f-mono); font-size: 0.55rem; color: var(--text-3);
  letter-spacing: 0.04em;
}

/* ─── Travel risk table ─── */
.brief-travel {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.brief-travel__row {
  display: grid; grid-template-columns: 2rem 1fr auto 2fr;
  align-items: center; gap: 0.75rem;
  padding: 0.7rem 1rem; border-radius: var(--radius-sm);
  background: var(--base-700); border: none;
  transition: background 0.2s var(--ease);
}
.brief-travel__row:hover { background: var(--base-600); }
.brief-travel__flag {
  width: 20px; height: 20px; object-fit: cover;
  border-radius: 50%; flex-shrink: 0;
}
.brief-travel__country {
  font-family: var(--f-display); font-size: 0.82rem; font-weight: 600;
  color: var(--text-1);
}
.brief-travel__level {
  font-family: var(--f-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border-radius: 100px; text-align: center;
}
.brief-travel--extreme .brief-travel__level {
  color: #f87171; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25);
}
.brief-travel--high .brief-travel__level {
  color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.25);
}
.brief-travel--mod .brief-travel__level {
  color: #60a5fa; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.25);
}
.brief-travel--low .brief-travel__level {
  color: #34d399; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.25);
}
.brief-travel__reason {
  font-size: 0.72rem; color: var(--text-3); line-height: 1.4;
}

.brief-disclaimer {
  font-size: 0.68rem; color: var(--text-3); line-height: 1.5;
  margin-top: 1.25rem; font-style: italic;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  border: 1px dashed var(--stroke);
  background: rgba(255,255,255,0.015);
}

/* ─── Light theme ─── */
[data-theme="light"] .brief-feed__item,
[data-theme="light"] .brief-zone,
[data-theme="light"] .brief-travel__row { background: #fff; }
[data-theme="light"] .brief-feed__item:hover,
[data-theme="light"] .brief-zone:hover,
[data-theme="light"] .brief-travel__row:hover { background: #f8f9fc; }
[data-theme="light"] .brief-tag { background: rgba(0,0,0,0.03); }
[data-theme="light"] .brief-disclaimer { background: rgba(0,0,0,0.02); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .brief-section__head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .brief-travel__row { grid-template-columns: 2rem 1fr auto; gap: 0.5rem; }
  .brief-travel__reason { grid-column: 1 / -1; padding-left: 2.75rem; margin-top: -0.25rem; }
}
@media (max-width: 480px) {
  .brief-feed__top { gap: 0.4rem; }
  .brief-zone { padding: 1rem; }
  .brief-travel__row { padding: 0.6rem 0.75rem; }
}

/* FAQ — teal */
[data-page="faq"] { --_accent: #00c2b8; }

/* ═══════════ PAGE-SPECIFIC COMPONENTS ═══════════ */

/* ═══════════════════════════════════════════════
   SOLUTIONS PAGE — Unique IDE/Dev aesthetic
   Accent: Teal #00c2b8
   All classes prefixed sol-
   ═══════════════════════════════════════════════ */

/* ─── Hero: Code-style typed title ─── */
.sol-typed {
  display: inline;
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.sol-typed__kw {
  color: #c792ea;
  font-weight: 600;
}
.sol-typed__punc {
  color: var(--text-3);
  font-weight: 300;
}
.sol-typed__arg {
  color: #f78c6c;
  font-style: italic;
}
[data-theme="light"] .sol-typed__kw { color: #7c3aed; }
[data-theme="light"] .sol-typed__punc { color: #64748b; }
[data-theme="light"] .sol-typed__arg { color: #c2410c; }

/* ─── Approach: Terminal mockup ─── */
.sol-approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.sol-approach__terminal {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.4);
}
.sol-approach__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sol-approach__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.sol-approach__dot:first-child { background: #ff5f57; }
.sol-approach__dot:nth-child(2) { background: #ffbd2e; }
.sol-approach__dot:nth-child(3) { background: #28c840; }
.sol-approach__title {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-left: auto;
}
.sol-approach__body {
  padding: 1.25rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.8;
}
.sol-approach__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.sol-approach__prompt {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.sol-approach__cmd { color: var(--text-1); }
.sol-approach__output {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-left: 2px solid rgba(0,194,184,0.15);
  margin: 0.5rem 0;
}
.sol-approach__comment {
  color: #546e7a;
  font-style: italic;
  margin-bottom: 0.35rem;
}
.sol-approach__key {
  color: #82aaff;
  display: inline;
  min-width: 100px;
}
.sol-approach__val {
  color: var(--text-2);
  display: inline;
}
.sol-approach__val--green {
  color: #22c55e;
  font-weight: 600;
}
.sol-approach__cursor {
  color: var(--accent);
  animation: sol-blink 1s step-end infinite;
}
@keyframes sol-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

[data-theme="light"] .sol-approach__terminal {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .sol-approach__bar {
  background: rgba(0,0,0,0.03);
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-approach__dot { background: rgba(0,0,0,0.1); }
[data-theme="light"] .sol-approach__dot:first-child { background: #ff5f57; }
[data-theme="light"] .sol-approach__dot:nth-child(2) { background: #ffbd2e; }
[data-theme="light"] .sol-approach__dot:nth-child(3) { background: #28c840; }
[data-theme="light"] .sol-approach__cmd { color: var(--base-900); }
[data-theme="light"] .sol-approach__comment { color: #90a4ae; }
[data-theme="light"] .sol-approach__key { color: #1565c0; }
[data-theme="light"] .sol-approach__output { border-left-color: rgba(13,158,150,0.2); }

/* ─── Approach: Principle cards ─── */
.sol-approach__principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.sol-approach__principle {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s, transform 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.sol-approach__principle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.sol-approach__principle:hover {
  border-color: rgba(0,194,184,0.2);
  transform: translateY(-2px);
}
.sol-approach__principle:hover::before { opacity: 1; }
.sol-approach__principle-icon {
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.sol-approach__principle-title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sol-approach__principle-text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.65;
}

[data-theme="light"] .sol-approach__principle {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-approach__principle:hover {
  border-color: rgba(13,158,150,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* ─── Timeline: Parcours client ─── */
.sol-timeline {
  position: relative;
  padding: 1rem 0;
  margin-top: 2rem;
}
.sol-timeline__track {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(0,194,184,0.1));
}
.sol-timeline__step {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  position: relative;
}
.sol-timeline__node {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--base-800);
  border: 2px solid rgba(0,194,184,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sol-timeline__step:hover .sol-timeline__node {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,194,184,0.15);
}
.sol-timeline__num {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.sol-timeline__content {
  flex: 1;
  padding-top: 0.25rem;
}
.sol-timeline__label {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  opacity: 0.8;
}
.sol-timeline__title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sol-timeline__text {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 540px;
}

[data-theme="light"] .sol-timeline__node {
  background: #fff;
  border-color: rgba(13,158,150,0.3);
}
[data-theme="light"] .sol-timeline__step:hover .sol-timeline__node {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(13,158,150,0.1);
}
[data-theme="light"] .sol-timeline__track {
  background: linear-gradient(180deg, var(--accent), rgba(13,158,150,0.08));
}

/* ─── Stack technique: Grouped chips with fill bars ─── */
.sol-tech {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.sol-tech__group {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.sol-tech__group-title {
  margin-bottom: 1rem;
}
.sol-tech__group-tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(0,194,184,0.08);
  border: 1px solid rgba(0,194,184,0.15);
}
.sol-tech__chips {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sol-tech__chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  transition: border-color 0.3s, background 0.3s, transform 0.2s;
  cursor: default;
}
.sol-tech__chip:hover {
  border-color: rgba(0,194,184,0.2);
  background: rgba(255,255,255,0.05);
  transform: translateX(4px);
}
.sol-tech__chip-name {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 110px;
  flex-shrink: 0;
}
.sol-tech__chip-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.sol-tech__chip-fill {
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, var(--accent), rgba(0,194,184,0.4));
  border-radius: 2px;
  transition: width 1s var(--ease);
}
.sol-tech__chip[data-level="primary"] .sol-tech__chip-name {
  color: var(--text-1);
}
.sol-tech__chip[data-level="secondary"] .sol-tech__chip-name {
  color: var(--text-2);
}

[data-theme="light"] .sol-tech__group {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-tech__group-tag {
  background: rgba(13,158,150,0.06);
  border-color: rgba(13,158,150,0.15);
}
[data-theme="light"] .sol-tech__chip {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .sol-tech__chip:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(13,158,150,0.2);
}
[data-theme="light"] .sol-tech__chip-bar {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-tech__chip-fill {
  background: linear-gradient(90deg, var(--accent), rgba(13,158,150,0.3));
}

/* ─── Showcase: Product cards with mini-mockups ─── */
.sol-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.sol-showcase__card {
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.sol-showcase__card:hover {
  border-color: rgba(0,194,184,0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
a.sol-showcase__card { cursor: pointer; }
.sol-showcase__header { margin-bottom: 1rem; }
.sol-showcase__status {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(0,194,184,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,194,184,0.2);
}
.sol-showcase__mockup { margin-bottom: 1.25rem; }
.sol-showcase__screen {
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
}
.sol-showcase__screen-bar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
}
.sol-showcase__screen-bar span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.sol-showcase__screen-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 80px;
}
.sol-showcase__screen-line {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}
.sol-showcase__screen-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.sol-showcase__screen-block {
  flex: 1;
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.sol-showcase__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sol-showcase__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}
.sol-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.sol-showcase__tags span {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-3);
}

[data-theme="light"] .sol-showcase__card {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-showcase__card:hover {
  border-color: rgba(13,158,150,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-showcase__screen {
  background: #f1f5f9;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-showcase__screen-bar {
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .sol-showcase__screen-bar span { background: rgba(0,0,0,0.1); }
[data-theme="light"] .sol-showcase__screen-line { background: rgba(0,0,0,0.06); }
[data-theme="light"] .sol-showcase__screen-block {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-showcase__tags span {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* ─── Engagements: Metric cards ─── */
.sol-engage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.sol-engage__card {
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: border-color 0.3s, transform 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.sol-engage__card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
  transform-origin: left;
}
.sol-engage__card:hover {
  border-color: rgba(0,194,184,0.2);
  transform: translateY(-3px);
}
.sol-engage__card:hover::after {
  transform: scaleX(1);
}
.sol-engage__metric { margin-bottom: 1rem; }
.sol-engage__metric-value {
  font-family: var(--f-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.sol-engage__metric-unit {
  font-size: 1.1rem;
  font-weight: 400;
  opacity: 0.7;
}
.sol-engage__title {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sol-engage__text {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.6;
}

[data-theme="light"] .sol-engage__card {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-engage__card:hover {
  border-color: rgba(13,158,150,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* ─── CTA: Code block ─── */
.sol-cta { margin-bottom: 2rem; }
.sol-cta__code {
  display: inline-block;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  line-height: 1.8;
  text-align: left;
}
.sol-cta__comment {
  display: block;
  color: #546e7a;
  font-style: italic;
}
.sol-cta__line {
  display: block;
  color: var(--text-1);
}

[data-theme="light"] .sol-cta__code {
  background: #f1f5f9;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .sol-cta__comment { color: #90a4ae; }

/* ─── Solutions page: Responsive ─── */
@media (max-width: 768px) {
  .sol-approach { grid-template-columns: 1fr; }
  .sol-approach__principles { grid-template-columns: 1fr; }
  .sol-timeline__track { left: 18px; }
  .sol-timeline__node { width: 38px; height: 38px; }
  .sol-timeline__num { font-size: 0.65rem; }
  .sol-timeline__step { gap: 1.25rem; padding: 1rem 0; }
  .sol-tech { grid-template-columns: 1fr; }
  .sol-showcase { grid-template-columns: 1fr; }
  .sol-engage { grid-template-columns: repeat(2, 1fr); }
  .sol-cta__code { font-size: 0.72rem; padding: 0.75rem 1rem; }
}

@media (max-width: 480px) {
  .sol-engage { grid-template-columns: 1fr; }
  .sol-timeline__step { gap: 1rem; }
  .sol-timeline__content { padding-top: 0; }
  .sol-tech__chip-name { min-width: 80px; font-size: 0.72rem; }
}

/* ─── Solutions: prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .sol-approach__cursor { animation: none; opacity: 1; }
  .sol-approach__principle:hover { transform: none; }
  .sol-showcase__card:hover { transform: none; }
  .sol-engage__card:hover { transform: none; }
  .sol-engage__card::after { transition: none; }
  .sol-tech__chip:hover { transform: none; }
  .sol-tech__chip-fill { transition: none; }
}

/* ─── Smartphone: Wipe Terminal ─── */
.wipe-terminal {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.95);
  height: 0; overflow: hidden;
  transition: height 0.8s ease-out;
  z-index: 10;
  padding: 0.4rem;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.15rem;
}
.is-active .wipe-terminal { height: 55%; }

.wipe-terminal__line {
  font-family: var(--f-mono, monospace);
  font-size: 0.38rem;
  color: #34d399;
  white-space: nowrap;
  opacity: 0;
  animation: wipeLineIn 0.3s ease-out forwards;
}
.wipe-terminal__line:nth-child(1) { animation-delay: 0.5s; }
.wipe-terminal__line:nth-child(2) { animation-delay: 1.0s; }
.wipe-terminal__line:nth-child(3) { animation-delay: 1.5s; }
.wipe-terminal__line:nth-child(4) { animation-delay: 2.0s; }
.wipe-terminal__line:nth-child(5) { animation-delay: 2.5s; }
.wipe-terminal__line:nth-child(6) { animation-delay: 3.0s; }
.wipe-terminal__line:nth-child(7) { animation-delay: 3.5s; }
@keyframes wipeLineIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wipe-terminal__line--ok {
  color: #34d399;
  font-weight: bold;
}

.wipe-terminal__progress {
  width: 100%; height: 3px;
  background: rgba(52,211,153,0.2);
  border-radius: 2px;
  margin-top: 0.2rem;
  overflow: hidden;
}
.wipe-terminal__progress .screen-progress-bar {
  height: 100%;
  background: #34d399;
  width: 0%;
  animation: wipeProgressFill 2s ease-out 1.5s forwards;
}
@keyframes wipeProgressFill {
  from { width: 0%; }
  to   { width: 100%; }
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  padding: 0.3rem;
}
.app-grid__icon {
  width: 20px; height: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.app-grid__icon:nth-child(1)  { background: rgba(99,102,241,0.25); }
.app-grid__icon:nth-child(2)  { background: rgba(52,211,153,0.2); }
.app-grid__icon:nth-child(3)  { background: rgba(245,158,11,0.2); }
.app-grid__icon:nth-child(4)  { background: rgba(239,68,68,0.18); }
.app-grid__icon:nth-child(5)  { background: rgba(168,85,247,0.2); }
.app-grid__icon:nth-child(6)  { background: rgba(14,165,233,0.2); }
.app-grid__icon:nth-child(7)  { background: rgba(234,179,8,0.18); }
.app-grid__icon:nth-child(8)  { background: rgba(236,72,153,0.18); }
.app-grid__icon:nth-child(9)  { background: rgba(34,197,94,0.2); }
.app-grid__icon:nth-child(10) { background: rgba(249,115,22,0.2); }
.app-grid__icon:nth-child(11) { background: rgba(99,102,241,0.15); }
.app-grid__icon:nth-child(12) { background: rgba(139,92,246,0.18); }

/* ─── Crypto: Notice Banner ─── */
.crypto-notice {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02));
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-lg);
  border-left: 4px solid #f59e0b;
}
.crypto-notice__shield {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,158,11,0.08);
  color: #f59e0b;
}
.crypto-notice__title {
  font-family: var(--f-display); font-size: 1.1rem;
  font-weight: 700; color: var(--text-1); margin-bottom: 0.4rem;
}
.crypto-notice__text {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.6;
  margin-bottom: 0.75rem;
}
.crypto-notice__badges {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.crypto-notice__badge {
  display: inline-flex; padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.15);
  font-family: var(--f-mono); font-size: 0.6rem;
  color: #f59e0b; letter-spacing: 0.04em;
}
[data-theme="light"] .crypto-notice { background: linear-gradient(135deg, rgba(217,119,6,0.04), rgba(217,119,6,0.01)); border-color: rgba(217,119,6,0.15); }
[data-theme="light"] .crypto-notice__shield { background: rgba(217,119,6,0.06); color: #d97706; }
[data-theme="light"] .crypto-notice__badge { background: rgba(217,119,6,0.05); color: #d97706; border-color: rgba(217,119,6,0.12); }

/* ─── Crypto: Incident Cards ─── */
.crypto-incidents {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin: 1.5rem 0;
}
.crypto-incident {
  padding: 1.25rem; border-radius: var(--radius-lg);
  background: var(--base-700); border: 1px solid var(--stroke);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.crypto-incident::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f59e0b, rgba(245,158,11,0.2));
}
.crypto-incident:hover { transform: translateY(-3px); border-color: rgba(245,158,11,0.25); }
.crypto-incident--xl {
  grid-column: 1 / -1;
  padding: 1.75rem;
  border-color: rgba(248,113,113,0.2);
  background: linear-gradient(135deg, var(--base-700) 0%, rgba(248,113,113,0.03) 100%);
}
.crypto-incident--xl::before {
  background: linear-gradient(90deg, #f87171, rgba(248,113,113,0.2));
}
.crypto-incident__amount {
  font-family: var(--f-display); font-weight: 700;
  line-height: 1; margin-bottom: 0.3rem;
  font-size: 1.8rem; color: #f59e0b;
}
.crypto-incident--xl .crypto-incident__amount {
  font-size: 2.5rem; color: #f87171;
}
.crypto-incident__name {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 600; color: var(--text-1);
}
.crypto-incident__year {
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-3); letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.crypto-incident__cause {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.5;
}
[data-theme="light"] .crypto-incident { background: #fff; }
[data-theme="light"] .crypto-incident--xl { background: linear-gradient(135deg, #fff 0%, rgba(248,113,113,0.02) 100%); }
[data-theme="light"] .crypto-incident__amount { color: #d97706; }
[data-theme="light"] .crypto-incident--xl .crypto-incident__amount { color: #dc2626; }

/* ─── Crypto: Stats Row ─── */
.crypto-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 1.5rem;
}
.crypto-stat {
  text-align: center; padding: 1.25rem;
  background: var(--base-700); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease);
}
.crypto-stat:hover { transform: translateY(-3px); }
.crypto-stat__val {
  display: block; font-family: var(--f-display);
  font-size: 1.5rem; font-weight: 700; color: #f59e0b;
  line-height: 1.1;
}
.crypto-stat__lbl {
  display: block; font-size: 0.72rem; color: var(--text-3);
  margin-top: 0.3rem;
}
[data-theme="light"] .crypto-stat { background: #fff; }
[data-theme="light"] .crypto-stat__val { color: #d97706; }

/* ─── Crypto: Custody Layers ─── */
.crypto-layers {
  position: relative; margin: 1.5rem 0;
}
.crypto-layer {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--base-700); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.crypto-layer:hover { transform: translateX(4px); border-color: rgba(245,158,11,0.3); }
.crypto-layer__marker {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,158,11,0.08);
  color: #f59e0b;
}
.crypto-layer__body { flex: 1; }
.crypto-layer__head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.crypto-layer__title {
  font-family: var(--f-display); font-size: 1.05rem;
  font-weight: 600; color: var(--text-1);
}
.crypto-layer__risk {
  display: inline-flex; padding: 0.15rem 0.5rem;
  border-radius: 100px; font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 0.06em; font-weight: 600;
}
.crypto-layer__risk--high {
  background: rgba(248,113,113,0.12); color: #f87171;
  border: 1px solid rgba(248,113,113,0.2);
}
.crypto-layer__risk--medium {
  background: rgba(251,191,36,0.1); color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.18);
}
.crypto-layer__risk--low {
  background: rgba(52,211,153,0.1); color: #34d399;
  border: 1px solid rgba(52,211,153,0.18);
}
.crypto-layer__risk--none {
  background: rgba(99,102,241,0.1); color: #818cf8;
  border: 1px solid rgba(99,102,241,0.18);
}
.crypto-layer__text {
  font-size: 0.8rem; color: var(--text-2); line-height: 1.5;
}
.crypto-layer__arrow {
  display: flex; justify-content: center; padding: 0.4rem 0;
  color: rgba(245,158,11,0.3);
}
[data-theme="light"] .crypto-layer { background: #fff; }
[data-theme="light"] .crypto-layer__marker { background: rgba(217,119,6,0.06); color: #d97706; }

/* ─── Crypto: Services Grid ─── */
.crypto-services {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 1.5rem 0;
}
.crypto-svc {
  padding: 1.25rem; border-radius: var(--radius-lg);
  background: var(--base-700); border: 1px solid var(--stroke);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.crypto-svc:hover { transform: translateY(-3px); border-color: rgba(245,158,11,0.25); }
.crypto-svc--main {
  grid-column: 1 / -1;
  border-color: rgba(245,158,11,0.15);
  background: linear-gradient(135deg, var(--base-700) 0%, rgba(245,158,11,0.03) 100%);
}
.crypto-svc__icon {
  width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center;
  border-radius: 8px; margin-bottom: 0.75rem;
  background: rgba(245,158,11,0.08); color: #f59e0b;
}
.crypto-svc__title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 600; color: var(--text-1); margin-bottom: 0.35rem;
}
.crypto-svc__text {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.5;
}
[data-theme="light"] .crypto-svc { background: #fff; }
[data-theme="light"] .crypto-svc--main { background: linear-gradient(135deg, #fff 0%, rgba(217,119,6,0.03) 100%); }
[data-theme="light"] .crypto-svc__icon { background: rgba(217,119,6,0.06); color: #d97706; }

/* ─── Crypto: Gear Cards ─── */
.crypto-gear {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin: 1.5rem 0;
}
.crypto-gear__card {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--base-700); border: 1px solid var(--stroke);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.crypto-gear__card:hover { transform: translateY(-3px); border-color: rgba(245,158,11,0.25); }
.crypto-gear__card--featured {
  grid-column: 1 / -1;
  border-color: rgba(245,158,11,0.15);
  background: linear-gradient(135deg, var(--base-700) 0%, rgba(245,158,11,0.04) 100%);
}
.crypto-gear__icon {
  width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center;
  border-radius: 8px; margin-bottom: 0.75rem;
  background: rgba(245,158,11,0.08); color: #f59e0b;
}
.crypto-gear__title {
  font-family: var(--f-display); font-size: 1.05rem;
  font-weight: 600; color: var(--text-1); margin-bottom: 0.35rem;
}
.crypto-gear__text {
  font-size: 0.8rem; color: var(--text-2); line-height: 1.55;
}
.crypto-gear__specs {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem;
}
.crypto-gear__spec {
  display: inline-flex; padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.15);
  font-family: var(--f-mono); font-size: 0.6rem;
  color: #f59e0b; letter-spacing: 0.04em;
}
[data-theme="light"] .crypto-gear__card { background: #fff; }
[data-theme="light"] .crypto-gear__card--featured { background: linear-gradient(135deg, #fff 0%, rgba(217,119,6,0.03) 100%); }
[data-theme="light"] .crypto-gear__icon { background: rgba(217,119,6,0.06); color: #d97706; }
[data-theme="light"] .crypto-gear__spec { background: rgba(217,119,6,0.05); color: #d97706; border-color: rgba(217,119,6,0.12); }

/* ─── Crypto: OPSEC List ─── */
.crypto-opsec {
  display: flex; flex-direction: column; gap: 0;
  margin: 1.5rem 0; position: relative;
}
.crypto-opsec::before {
  content: ''; position: absolute;
  left: 22px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, rgba(245,158,11,0.3), rgba(245,158,11,0.05));
}
.crypto-opsec__item {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--stroke);
  transition: background 0.3s var(--ease);
}
.crypto-opsec__item:last-child { border-bottom: none; }
.crypto-opsec__item:hover { background: rgba(245,158,11,0.02); }
.crypto-opsec__num {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.15);
  font-family: var(--f-mono); font-size: 0.7rem;
  font-weight: 700; color: #f59e0b;
  position: relative; z-index: 1;
}
.crypto-opsec__body { flex: 1; }
.crypto-opsec__title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 600; color: var(--text-1); margin-bottom: 0.25rem;
}
.crypto-opsec__text {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.55;
}
[data-theme="light"] .crypto-opsec__num { background: rgba(217,119,6,0.06); color: #d97706; border-color: rgba(217,119,6,0.12); }
[data-theme="light"] .crypto-opsec::before { background: linear-gradient(to bottom, rgba(217,119,6,0.2), rgba(217,119,6,0.03)); }

/* ─── Crypto: Accompagnement Track ─── */
.crypto-accomp {
  margin: 1.5rem 0;
}
.crypto-accomp__track {
  display: flex; flex-direction: column;
  gap: 0; position: relative;
}
.crypto-accomp__step {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem;
  background: var(--base-700); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.crypto-accomp__step:hover { transform: translateX(4px); border-color: rgba(245,158,11,0.3); }
.crypto-accomp__marker {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,158,11,0.08); color: #f59e0b;
}
.crypto-accomp__line {
  width: 1px; height: 24px; margin-left: 20px;
  background: linear-gradient(to bottom, rgba(245,158,11,0.3), rgba(245,158,11,0.1));
  flex-shrink: 0;
}
.crypto-accomp__title {
  font-family: var(--f-display); font-size: 1.05rem;
  font-weight: 600; color: var(--text-1); margin-bottom: 0.25rem;
}
.crypto-accomp__text {
  font-size: 0.8rem; color: var(--text-2); line-height: 1.55;
}
[data-theme="light"] .crypto-accomp__step { background: #fff; }
[data-theme="light"] .crypto-accomp__marker { background: rgba(217,119,6,0.06); color: #d97706; }
[data-theme="light"] .crypto-accomp__line { background: linear-gradient(to bottom, rgba(217,119,6,0.2), rgba(217,119,6,0.06)); }

/* ═══════════════════════════════════════════════════════
   CASUS BELLI — Intelligence Command Center
   Accent: Amber #d4a017 | Unique page identity
   ═══════════════════════════════════════════════════════ */

/* ─── Casus: Hero Status Indicator ─── */
.casus-hero-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: #d4a017; letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.casus-hero-status__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d4a017;
  animation: casus-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(212,160,23,0.5);
}
.casus-hero-status__text { white-space: nowrap; }

/* ─── Casus: Hero Metrics Bar ─── */
.casus-hero-metrics {
  display: flex; align-items: center; gap: 0;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(212,160,23,0.04);
  border: 1px solid rgba(212,160,23,0.12);
  border-radius: var(--radius-lg);
}
.casus-hero-metric {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; gap: 0.15rem;
}
.casus-hero-metric__val {
  font-family: var(--f-mono); font-size: 1.3rem;
  font-weight: 700; color: #d4a017;
  letter-spacing: -0.02em;
}
.casus-hero-metric__lbl {
  font-family: var(--f-mono); font-size: 0.58rem;
  color: var(--text-3); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.casus-hero-metric__sep {
  width: 1px; height: 28px;
  background: rgba(212,160,23,0.15);
  flex-shrink: 0;
}

/* ─── Casus: Section Headers ─── */
.casus-section-head { margin-bottom: 1.5rem; }
.casus-section-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 0.58rem;
  color: #d4a017; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}

/* ─── Casus: Pipeline — Data flow ─── */
.casus-pipeline {
  display: flex; align-items: center;
  gap: 0; overflow-x: auto;
  padding: 1.5rem 0;
  scrollbar-width: thin;
}
.casus-pipeline__node {
  flex: 1; min-width: 140px;
  padding: 1.25rem 1rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.casus-pipeline__node:hover {
  border-color: rgba(212,160,23,0.3);
  box-shadow: 0 0 20px rgba(212,160,23,0.06);
}
.casus-pipeline__node--core {
  border-color: rgba(212,160,23,0.25);
  background: linear-gradient(135deg, var(--base-700), rgba(212,160,23,0.04));
}
.casus-pipeline__node--core::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4a017, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.casus-pipeline__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin: 0 auto 0.6rem;
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: 50%;
}
.casus-pipeline__label {
  display: block;
  font-family: var(--f-mono); font-size: 0.7rem;
  color: #d4a017; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
.casus-pipeline__sub {
  display: block;
  font-size: 0.72rem; color: var(--text-2);
  margin-top: 0.2rem;
}
.casus-pipeline__proto {
  display: block;
  font-family: var(--f-mono); font-size: 0.55rem;
  color: var(--text-3); letter-spacing: 0.04em;
  margin-top: 0.4rem;
  opacity: 0.7;
}
.casus-pipeline__connector {
  display: flex; align-items: center;
  padding: 0 0.25rem;
  flex-shrink: 0;
}
.casus-pipeline__connector svg {
  opacity: 0.6;
}

/* ─── Casus: Sources — Intelligence feeds ─── */
.casus-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.casus-source {
  padding: 1.25rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.casus-source:hover {
  border-color: rgba(212,160,23,0.25);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.casus-source--featured {
  grid-column: 1 / -1;
  border-color: rgba(212,160,23,0.15);
  background: linear-gradient(135deg, var(--base-700), rgba(212,160,23,0.03));
}
.casus-source__header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.casus-source__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.casus-source__meta { flex: 1; }
.casus-source__title {
  font-family: var(--f-display); font-size: 0.95rem;
  font-weight: 700; color: var(--text-1);
}
.casus-source__method {
  font-family: var(--f-mono); font-size: 0.58rem;
  color: var(--text-3); letter-spacing: 0.04em;
}
.casus-source__priority {
  font-family: var(--f-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.casus-source__priority--critical {
  color: #f87171; border: 1px solid rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.08);
}
.casus-source__priority--high {
  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3);
  background: rgba(251,191,36,0.08);
}
.casus-source__priority--medium {
  color: #fb923c; border: 1px solid rgba(251,146,60,0.3);
  background: rgba(251,146,60,0.08);
}
.casus-source__desc {
  font-size: 0.82rem; color: var(--text-2);
  line-height: 1.65; margin-bottom: 0.75rem;
}
.casus-source__channels {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.casus-source__channel {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--text-3); letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--stroke);
  border-radius: 100px;
}
.casus-source__channel--active {
  color: #d4a017;
  border-color: rgba(212,160,23,0.2);
  background: rgba(212,160,23,0.06);
}

/* ─── Casus: Zones géopolitiques ─── */
.casus-zones {
  display: flex; flex-direction: column;
  gap: 0.75rem;
}
.casus-zone {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.casus-zone:hover {
  border-color: rgba(212,160,23,0.2);
  transform: translateX(4px);
}
.casus-zone__indicator {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.35rem;
  min-width: 48px;
}
.casus-zone__dot {
  width: 10px; height: 10px; border-radius: 50%;
  position: relative;
}
.casus-zone__dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  animation: casus-ping 3s ease-out infinite;
}
.casus-zone__dot--critical {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248,113,113,0.5);
}
.casus-zone__dot--critical::after {
  border: 1px solid rgba(248,113,113,0.4);
}
.casus-zone__dot--high {
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.casus-zone__dot--high::after {
  border: 1px solid rgba(251,191,36,0.4);
}
.casus-zone__dot--medium {
  background: #fb923c;
  box-shadow: 0 0 6px rgba(251,146,60,0.4);
}
.casus-zone__dot--medium::after {
  border: 1px solid rgba(251,146,60,0.3);
}
.casus-zone__code {
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-3); letter-spacing: 0.1em;
  font-weight: 600;
}
.casus-zone__content { min-width: 0; }
.casus-zone__title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 700; color: var(--text-1);
  margin-bottom: 0.2rem;
}
.casus-zone__desc {
  font-size: 0.78rem; color: var(--text-2);
  line-height: 1.6;
}
.casus-zone__status {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 0.25rem;
  flex-shrink: 0;
}
.casus-zone__sev {
  font-family: var(--f-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}
.casus-zone__sev--critical {
  color: #f87171; border: 1px solid rgba(248,113,113,0.3);
}
.casus-zone__sev--high {
  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3);
}
.casus-zone__sev--medium {
  color: #fb923c; border: 1px solid rgba(251,146,60,0.3);
}
.casus-zone__feeds {
  font-family: var(--f-mono); font-size: 0.55rem;
  color: var(--text-3); letter-spacing: 0.04em;
}

/* ─── Casus: Scheduling Priorities ─── */
.casus-priorities {
  display: flex; flex-direction: column;
  gap: 0.6rem; margin-top: 0.5rem;
}
.casus-prio {
  display: grid;
  grid-template-columns: 4px 1fr 1fr;
  gap: 0 1rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease);
}
.casus-prio:hover {
  border-color: rgba(212,160,23,0.2);
}
.casus-prio__bar {
  width: 4px; height: 100%;
  border-radius: 4px;
  grid-row: 1;
}
.casus-prio--critical .casus-prio__bar { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.4); }
.casus-prio--high .casus-prio__bar { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.3); }
.casus-prio--medium .casus-prio__bar { background: #fb923c; }
.casus-prio--low .casus-prio__bar { background: var(--text-3); opacity: 0.4; }
.casus-prio__content {
  display: flex; align-items: center; gap: 0.75rem;
}
.casus-prio__level {
  font-family: var(--f-mono); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.08em;
  min-width: 70px;
}
.casus-prio--critical .casus-prio__level { color: #f87171; }
.casus-prio--high .casus-prio__level { color: #fbbf24; }
.casus-prio--medium .casus-prio__level { color: #fb923c; }
.casus-prio--low .casus-prio__level { color: var(--text-3); }
.casus-prio__interval {
  font-family: var(--f-mono); font-size: 0.75rem;
  color: var(--text-1); font-weight: 600;
}
.casus-prio__sources {
  font-size: 0.78rem; color: var(--text-2);
  text-align: right;
}

/* ─── Casus: Terminal Mockup ─── */
.casus-terminal {
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base-800);
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
.casus-terminal__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(212,160,23,0.04);
  border-bottom: 1px solid rgba(212,160,23,0.1);
}
.casus-terminal__dots {
  display: flex; gap: 5px;
}
.casus-terminal__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stroke-h);
}
.casus-terminal__title {
  font-family: var(--f-mono); font-size: 0.58rem;
  color: #d4a017; letter-spacing: 0.12em;
  flex: 1;
}
.casus-terminal__live {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--f-mono); font-size: 0.55rem;
  color: #34d399; letter-spacing: 0.1em;
}
.casus-terminal__live svg {
  animation: casus-pulse 1.5s ease-in-out infinite;
}
.casus-terminal__body { padding: 0; }
.casus-terminal__row {
  display: grid;
  grid-template-columns: 70px 40px 1fr auto;
  gap: 0.8rem; align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(212,160,23,0.06);
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--text-2);
  transition: background 0.3s var(--ease);
}
.casus-terminal__row:hover {
  background: rgba(212,160,23,0.03);
}
.casus-terminal__row:last-child { border-bottom: none; }
.casus-terminal__time {
  color: var(--text-3); letter-spacing: 0.05em;
}
.casus-terminal__zone {
  color: #d4a017; font-weight: 700;
  letter-spacing: 0.1em;
}
.casus-terminal__msg {
  font-family: var(--f-body); font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.casus-terminal__sev {
  font-size: 0.5rem; letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm); font-weight: 600;
}
.casus-terminal__sev--critical {
  color: #f87171; border: 1px solid rgba(248,113,113,0.3);
}
.casus-terminal__sev--high {
  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3);
}
.casus-terminal__sev--medium {
  color: var(--text-3); border: 1px solid var(--stroke-h);
}
.casus-terminal__footer {
  display: flex; justify-content: space-between;
  align-items: center; padding: 0.55rem 1rem;
  border-top: 1px solid rgba(212,160,23,0.1);
  font-family: var(--f-mono); font-size: 0.52rem;
  color: var(--text-3); letter-spacing: 0.1em;
}

/* ─── Casus: Stack / Technologies ─── */
.casus-stack {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin: 0.5rem 0 1rem;
}
.casus-tech {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--text-2); letter-spacing: 0.02em;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.casus-tech:hover {
  border-color: rgba(212,160,23,0.3);
  color: #d4a017;
  transform: translateY(-2px);
}
.casus-tech svg { flex-shrink: 0; }

/* ─── Casus: Quote ─── */
.casus-quote {
  position: relative;
  text-align: center;
  padding: 2rem;
}
.casus-quote__mark {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.casus-quote__text {
  font-family: var(--f-display); font-size: 1.35rem;
  font-weight: 600; color: var(--text-1);
  line-height: 1.6; max-width: 600px;
  margin: 1rem auto 0.75rem;
  font-style: italic;
}
.casus-quote__cite {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: #d4a017; letter-spacing: 0.08em;
  font-style: normal;
}

/* ─── Casus: CTA ─── */
.casus-cta { text-align: center; }
.casus-cta__tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: #d4a017; letter-spacing: 0.14em;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: 100px;
  margin-bottom: 1rem;
}
.casus-cta__text {
  font-size: 0.92rem; color: var(--text-2);
  line-height: 1.65; max-width: 500px;
  margin: 0 auto 1.5rem;
}

/* ─── Casus: Animations ─── */
@keyframes casus-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes casus-ping {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── Casus: Light Theme ─── */
[data-theme="light"] .casus-hero-status {
  background: rgba(184,134,11,0.06);
  border-color: rgba(184,134,11,0.2);
  color: #b8860b;
}
[data-theme="light"] .casus-hero-status__dot { background: #b8860b; box-shadow: 0 0 6px rgba(184,134,11,0.4); }
[data-theme="light"] .casus-hero-metrics {
  background: rgba(184,134,11,0.03);
  border-color: rgba(184,134,11,0.1);
}
[data-theme="light"] .casus-hero-metric__val { color: #b8860b; }
[data-theme="light"] .casus-hero-metric__sep { background: rgba(184,134,11,0.12); }
[data-theme="light"] .casus-section-tag {
  color: #b8860b;
  border-color: rgba(184,134,11,0.2);
}
[data-theme="light"] .casus-pipeline__node { background: #fff; }
[data-theme="light"] .casus-pipeline__node--core {
  background: linear-gradient(135deg, #fff, rgba(184,134,11,0.03));
}
[data-theme="light"] .casus-pipeline__icon {
  background: rgba(184,134,11,0.06);
  border-color: rgba(184,134,11,0.12);
}
[data-theme="light"] .casus-pipeline__label { color: #b8860b; }
[data-theme="light"] .casus-source { background: #fff; }
[data-theme="light"] .casus-source--featured {
  background: linear-gradient(135deg, #fff, rgba(184,134,11,0.02));
}
[data-theme="light"] .casus-source__icon {
  background: rgba(184,134,11,0.06);
  border-color: rgba(184,134,11,0.1);
}
[data-theme="light"] .casus-source__icon svg { fill: #b8860b; }
[data-theme="light"] .casus-source__channel--active {
  color: #b8860b;
  border-color: rgba(184,134,11,0.18);
  background: rgba(184,134,11,0.04);
}
[data-theme="light"] .casus-zone { background: #fff; }
[data-theme="light"] .casus-prio { background: #fff; }
[data-theme="light"] .casus-terminal {
  background: #f8fafc;
  border-color: rgba(184,134,11,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
[data-theme="light"] .casus-terminal__bar {
  background: rgba(184,134,11,0.03);
  border-color: rgba(184,134,11,0.08);
}
[data-theme="light"] .casus-terminal__title { color: #b8860b; }
[data-theme="light"] .casus-terminal__row {
  border-bottom-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .casus-terminal__row:hover {
  background: rgba(184,134,11,0.02);
}
[data-theme="light"] .casus-terminal__zone { color: #b8860b; }
[data-theme="light"] .casus-terminal__footer {
  border-top-color: rgba(184,134,11,0.08);
}
[data-theme="light"] .casus-tech { background: #fff; }
[data-theme="light"] .casus-tech:hover { color: #b8860b; border-color: rgba(184,134,11,0.25); }
[data-theme="light"] .casus-quote__mark path { fill: #b8860b; }
[data-theme="light"] .casus-quote__cite { color: #b8860b; }
[data-theme="light"] .casus-cta__tag {
  color: #b8860b;
  border-color: rgba(184,134,11,0.2);
}

/* ─── Casus: Responsive 768px ─── */
@media (max-width: 768px) {
  .casus-hero-metrics {
    flex-wrap: wrap; gap: 0.5rem;
    padding: 0.75rem;
  }
  .casus-hero-metric { min-width: calc(50% - 1rem); }
  .casus-hero-metric__sep { display: none; }
  .casus-pipeline {
    flex-direction: column;
    align-items: stretch;
  }
  .casus-pipeline__connector {
    justify-content: center;
    padding: 0.25rem 0;
    transform: rotate(90deg);
  }
  .casus-pipeline__node { min-width: 0; }
  .casus-sources {
    grid-template-columns: 1fr;
  }
  .casus-source--featured { grid-column: auto; }
  .casus-zone {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .casus-zone__indicator {
    flex-direction: row; gap: 0.5rem;
  }
  .casus-zone__status {
    flex-direction: row; align-items: center;
    gap: 0.75rem;
  }
  .casus-prio {
    grid-template-columns: 4px 1fr;
    gap: 0.25rem 0.75rem;
  }
  .casus-prio__sources {
    grid-column: 2; text-align: left;
    font-size: 0.72rem;
  }
  .casus-terminal__row {
    grid-template-columns: 60px 1fr auto;
  }
  .casus-terminal__zone { display: none; }
  .casus-terminal__msg { font-size: 0.7rem; }
  .casus-terminal__footer {
    font-size: 0.48rem; gap: 0.5rem;
  }
  .casus-quote__text { font-size: 1.1rem; }
}

/* ─── Casus: Responsive 480px ─── */
@media (max-width: 480px) {
  .casus-hero-metrics {
    flex-direction: column; gap: 0.5rem;
  }
  .casus-hero-metric {
    flex-direction: row; gap: 0.5rem;
    min-width: 100%;
  }
  .casus-hero-metric__val { font-size: 1.1rem; }
  .casus-pipeline__node { padding: 1rem 0.75rem; }
  .casus-pipeline__label { font-size: 0.62rem; }
  .casus-pipeline__proto { display: none; }
  .casus-source__channels { gap: 0.3rem; }
  .casus-source__channel { font-size: 0.55rem; }
  .casus-zone__desc { font-size: 0.72rem; }
  .casus-prio__interval { font-size: 0.68rem; }
  .casus-prio__sources { font-size: 0.65rem; }
  .casus-terminal__footer { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
  .casus-tech { font-size: 0.62rem; padding: 0.4rem 0.7rem; }
  .casus-quote__text { font-size: 0.95rem; }
}

/* ─── Casus: prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .casus-hero-status__dot,
  .casus-terminal__live svg,
  .casus-zone__dot::after {
    animation: none;
  }
  .casus-zone:hover { transform: none; }
  .casus-tech:hover { transform: none; }
}

/* ─── Terminus: Kill Switch Demo ─── */
.kill-switch-demo {
  text-align: center; padding: 2rem;
  background: var(--base-700); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
}
.kill-switch-demo__countdown {
  font-family: var(--f-mono); font-size: 3rem;
  font-weight: 700; color: #f87171;
  letter-spacing: 0.1em;
}
.kill-switch-demo__label {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--text-3); letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 0.5rem;
}
[data-theme="light"] .kill-switch-demo { background: #fff; }

/* ─── Terminus: Forensic Compare ─── */
.forensic-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin: 2rem 0;
}
.forensic-compare__panel {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--base-700); border: 1px solid var(--stroke);
}
.forensic-compare__panel--real { border-color: rgba(34,211,153,0.2); }
.forensic-compare__panel--fake { border-color: rgba(248,113,113,0.2); }
.forensic-compare__title {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.forensic-compare__panel--real .forensic-compare__title { color: #34d399; }
.forensic-compare__panel--fake .forensic-compare__title { color: #f87171; }
.forensic-compare__item {
  font-size: 0.82rem; color: var(--text-2);
  padding: 0.4rem 0; border-bottom: 1px solid var(--stroke);
}
.forensic-compare__item:last-child { border-bottom: none; }
[data-theme="light"] .forensic-compare__panel { background: #fff; }

/* ─── Phishing: Stat Bars ─── */
.stat-bars { margin: 1.5rem 0; }
.stat-bar {
  margin-bottom: 1rem;
}
.stat-bar__header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.35rem;
}
.stat-bar__label {
  font-size: 0.82rem; color: var(--text-2);
}
.stat-bar__value {
  font-family: var(--f-mono); font-size: 0.75rem;
  color: var(--_accent, var(--accent));
}
.stat-bar__track {
  height: 6px; background: var(--base-600);
  border-radius: 3px; overflow: hidden;
}
.stat-bar__fill {
  height: 100%; border-radius: 3px;
  background: var(--_accent, var(--accent));
  width: 0;
  transition: width 1.2s var(--ease);
}
.stat-bar__fill.in { width: var(--bar-w, 0%); }

/* ─── Phishing: Heatmap Mockup ─── */
.heatmap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem; margin: 1.5rem 0;
}
.heatmap-item {
  padding: 1rem; border-radius: var(--radius);
  text-align: center;
  background: var(--base-700); border: 1px solid var(--stroke);
  transition: transform 0.3s var(--ease);
}
.heatmap-item:hover { transform: translateY(-2px); }
.heatmap-item__dept {
  font-size: 0.78rem; color: var(--text-2); margin-bottom: 0.3rem;
}
.heatmap-item__pct {
  font-family: var(--f-display); font-size: 1.8rem;
  font-weight: 700; line-height: 1;
}
.heatmap-item--critical .heatmap-item__pct { color: #f87171; }
.heatmap-item--high .heatmap-item__pct { color: #fbbf24; }
.heatmap-item--medium .heatmap-item__pct { color: #fb923c; }
.heatmap-item--low .heatmap-item__pct { color: #34d399; }
[data-theme="light"] .heatmap-item { background: #fff; }


/* ─── Transition: Before/After ─── */
.before-after {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin: 2rem 0;
}
.before-after__panel {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--base-700); border: 1px solid var(--stroke);
}
.before-after__panel--before { border-top: 3px solid #f87171; }
.before-after__panel--after { border-top: 3px solid #34d399; }
.before-after__title {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.before-after__panel--before .before-after__title { color: #f87171; }
.before-after__panel--after .before-after__title { color: #34d399; }
.before-after__item {
  font-size: 0.82rem; color: var(--text-2);
  padding: 0.5rem 0; border-bottom: 1px solid var(--stroke);
  display: flex; align-items: center; gap: 0.5rem;
}
.before-after__item:last-child { border-bottom: none; }
[data-theme="light"] .before-after__panel { background: #fff; }

/* ─── Transition: Sovereignty Badges ─── */
.sovereignty-badges {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center; margin: 1.5rem 0;
}
.sovereignty-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.72rem;
  color: #34d399; letter-spacing: 0.04em;
}
[data-theme="light"] .sovereignty-badge { background: rgba(52,211,153,0.05); }

/* ─── Solutions: Code Brackets ─── */
.code-brackets {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.code-brackets svg { opacity: 0.06; }

/* ─── FAQ: Search Input ─── */
.faq-search {
  max-width: 540px; margin: 0 auto 2rem;
  position: relative;
}
.faq-search__input {
  width: 100%; padding: 0.85rem 1.25rem 0.85rem 3rem;
  background: var(--base-700); border: 1px solid var(--stroke);
  border-radius: 100px; color: var(--text-1);
  font-family: var(--f-body); font-size: 0.88rem;
  outline: none; transition: border-color 0.2s var(--ease);
}
.faq-search__input:focus { border-color: var(--accent); }
.faq-search__input::placeholder { color: var(--text-3); }
.faq-search__icon {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%); color: var(--text-3);
  pointer-events: none;
}
[data-theme="light"] .faq-search__input { background: #fff; }

/* ─── FAQ: Popular Badge ─── */
.faq-popular {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.5rem; border-radius: 100px;
  background: rgba(0,194,184,0.1); color: var(--accent);
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: 0.5rem; vertical-align: middle;
}

/* ─── Analyses: Reading Time ─── */
.reading-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--f-mono); font-size: 0.65rem;
  color: var(--text-3); letter-spacing: 0.04em;
}

/* ─── Scheduling Priority Table ─── */
.priority-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  font-size: 0.82rem;
}
.priority-table th, .priority-table td {
  padding: 0.6rem 1rem; text-align: left;
  border-bottom: 1px solid var(--stroke);
}
.priority-table th {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: var(--text-3); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.priority-table td { color: var(--text-2); }
.priority-table .priority--critical { color: #f87171; font-weight: 600; }
.priority-table .priority--high { color: #fbbf24; font-weight: 600; }
.priority-table .priority--medium { color: #fb923c; }
.priority-table .priority--low { color: var(--text-3); }

/* ─── RGPD: Hero Decoration ─── */
.rgpd-hero-deco {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rgpd-hero-deco__shield { opacity: 1; }
.rgpd-hero-deco__art {
  position: absolute;
  font-family: var(--f-mono); font-size: 0.65rem;
  color: #8b7cf6; opacity: 0.12;
  letter-spacing: 0.05em;
  animation: rgpd-art-float 6s ease-in-out infinite alternate;
}
.rgpd-hero-deco__art:nth-child(2) { animation-delay: -1s; }
.rgpd-hero-deco__art:nth-child(3) { animation-delay: -2s; }
.rgpd-hero-deco__art:nth-child(4) { animation-delay: -3s; }
.rgpd-hero-deco__art:nth-child(5) { animation-delay: -4s; }
.rgpd-hero-deco__art:nth-child(6) { animation-delay: -5s; }
@keyframes rgpd-art-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* ─── RGPD: Premium Badge ─── */
.rgpd-premium {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(139,124,246,0.12), rgba(139,124,246,0.04));
  border: 1px solid rgba(139,124,246,0.25);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.7rem;
  color: #a78bfa; letter-spacing: 0.06em; text-transform: uppercase;
}
.rgpd-premium::before {
  content: '\2605'; font-size: 0.85rem;
}
[data-theme="light"] .rgpd-premium {
  background: linear-gradient(135deg, rgba(109,94,211,0.08), rgba(109,94,211,0.02));
  border-color: rgba(109,94,211,0.2); color: #6d5ed3;
}

/* ─── RGPD: CNIL Letter Mockup ─── */
.rgpd-letter {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--base-700);
}
.rgpd-letter__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(139,124,246,0.06);
  border-bottom: 1px solid var(--stroke);
}
.rgpd-letter__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--base-500);
}
.rgpd-letter__dot:first-child { background: #f87171; }
.rgpd-letter__dot:nth-child(2) { background: #fbbf24; }
.rgpd-letter__dot:nth-child(3) { background: #34d399; }
.rgpd-letter__bar-title {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-3); letter-spacing: 0.1em;
}
.rgpd-letter__head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--stroke);
}
.rgpd-letter__logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(139,124,246,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #8b7cf6; flex-shrink: 0;
}
.rgpd-letter__org {
  font-family: var(--f-display); font-size: 0.85rem;
  font-weight: 700; color: var(--text-1);
  letter-spacing: 0.02em;
}
.rgpd-letter__ref {
  font-family: var(--f-mono); font-size: 0.65rem;
  color: var(--text-3); margin-top: 0.15rem;
}
.rgpd-letter__body {
  padding: 1.5rem;
}
.rgpd-letter__intro-text {
  font-size: 0.85rem; color: var(--text-2);
  line-height: 1.6; margin-bottom: 1rem;
}
.rgpd-letter__line {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem; color: var(--text-2); line-height: 1.5;
}
.rgpd-letter__line:last-of-type { border-bottom: none; }
.rgpd-letter__badge {
  display: inline-flex; padding: 0.15rem 0.5rem;
  border-radius: 3px; flex-shrink: 0;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.2);
  color: #f87171; font-family: var(--f-mono);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.06em;
}
.rgpd-letter__verdict {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 2px solid rgba(248,113,113,0.2);
  text-align: center;
}
.rgpd-letter__verdict-label {
  display: block; font-size: 0.78rem;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.04em; font-family: var(--f-mono);
  margin-bottom: 0.5rem;
}
.rgpd-letter__verdict-amount {
  display: block; font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  color: #f87171; line-height: 1;
}
.rgpd-letter__verdict-note {
  display: block; font-size: 0.7rem; color: var(--text-3);
  font-family: var(--f-mono); margin-top: 0.4rem;
  letter-spacing: 0.03em;
}
[data-theme="light"] .rgpd-letter { background: #fff; }
[data-theme="light"] .rgpd-letter__bar { background: rgba(109,94,211,0.04); }
[data-theme="light"] .rgpd-letter__line { border-bottom-color: rgba(0,0,0,0.05); }

/* ─── RGPD: Fine Scoreboard ─── */
.rgpd-scores {
  display: grid; gap: 0.75rem; margin: 1.5rem 0;
}
.rgpd-score {
  display: grid; grid-template-columns: 120px 1fr 80px;
  align-items: center; gap: 1rem;
}
.rgpd-score__who {
  font-family: var(--f-body); font-size: 0.82rem;
  color: var(--text-2); font-weight: 500; text-align: right;
}
.rgpd-score__track {
  height: 28px; border-radius: var(--radius);
  background: var(--base-700); overflow: hidden;
  border: 1px solid var(--stroke);
}
.rgpd-score__fill {
  height: 100%; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(139,124,246,0.3), #8b7cf6);
  width: var(--w, 0%);
  transition: width 1.2s var(--ease);
}
.rgpd-score__val {
  font-family: var(--f-display); font-size: 1.1rem;
  font-weight: 700; color: #8b7cf6;
}
.rgpd-score:first-child .rgpd-score__fill {
  background: linear-gradient(90deg, rgba(248,113,113,0.3), #f87171);
}
.rgpd-score:first-child .rgpd-score__val { color: #f87171; }
[data-theme="light"] .rgpd-score__track { background: #f1f5f9; }
[data-theme="light"] .rgpd-score__val { color: #6d5ed3; }
[data-theme="light"] .rgpd-score:first-child .rgpd-score__val { color: #dc2626; }

/* ─── RGPD: Fine Total ─── */
.rgpd-total {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1rem 1.5rem; margin-top: 0.75rem;
  border-radius: var(--radius);
  background: rgba(139,124,246,0.06);
  border: 1px solid rgba(139,124,246,0.15);
}
.rgpd-total__val {
  font-family: var(--f-display); font-size: 1.4rem;
  font-weight: 700; color: #8b7cf6;
}
.rgpd-total__lbl {
  font-size: 0.78rem; color: var(--text-3);
}
[data-theme="light"] .rgpd-total {
  background: rgba(109,94,211,0.04);
  border-color: rgba(109,94,211,0.12);
}
[data-theme="light"] .rgpd-total__val { color: #6d5ed3; }

/* ─── RGPD: Audit Dashboard ─── */
.rgpd-audit {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--base-700);
}
.rgpd-audit__header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--stroke);
}
.rgpd-audit__hdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--base-500);
}
.rgpd-audit__hdot--red { background: #f87171; }
.rgpd-audit__hdot--amber { background: #fbbf24; }
.rgpd-audit__hdot--green { background: #34d399; }
.rgpd-audit__header-title {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-3); letter-spacing: 0.1em;
}
.rgpd-check {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s var(--ease);
}
.rgpd-check:hover { background: rgba(255,255,255,0.02); }
.rgpd-check:last-of-type { border-bottom: none; }
.rgpd-check__status {
  display: inline-flex; padding: 0.2rem 0.55rem;
  border-radius: 3px; flex-shrink: 0; margin-top: 0.1rem;
  font-family: var(--f-mono); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.08em;
}
.rgpd-check--fail .rgpd-check__status {
  background: rgba(248,113,113,0.12); color: #f87171;
  border: 1px solid rgba(248,113,113,0.2);
}
.rgpd-check--warn .rgpd-check__status {
  background: rgba(251,191,36,0.1); color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.18);
}
.rgpd-check--pass .rgpd-check__status {
  background: rgba(52,211,153,0.1); color: #34d399;
  border: 1px solid rgba(52,211,153,0.18);
}
.rgpd-check__content {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.rgpd-check__label {
  font-size: 0.85rem; color: var(--text-1); font-weight: 500;
}
.rgpd-check__detail {
  font-size: 0.75rem; color: var(--text-3); line-height: 1.4;
}
.rgpd-audit__footer {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(248,113,113,0.04);
  border-top: 1px solid rgba(248,113,113,0.15);
}
.rgpd-audit__score-label {
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--text-3); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rgpd-audit__score-val {
  font-family: var(--f-display); font-size: 1.6rem;
  font-weight: 700; color: #f87171; line-height: 1;
}
.rgpd-audit__score-verdict {
  font-family: var(--f-mono); font-size: 0.62rem;
  color: #f87171; letter-spacing: 0.04em;
  margin-left: auto;
}
[data-theme="light"] .rgpd-audit { background: #fff; }
[data-theme="light"] .rgpd-audit__header { background: rgba(0,0,0,0.03); }
[data-theme="light"] .rgpd-check { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .rgpd-check:hover { background: rgba(0,0,0,0.01); }
[data-theme="light"] .rgpd-audit__footer { background: rgba(248,113,113,0.03); }

/* ─── RGPD: Protocol Timeline ─── */
.rgpd-protocol {
  position: relative; margin: 1.5rem 0;
  padding-left: 3rem;
}
.rgpd-protocol::before {
  content: ''; position: absolute;
  left: 1.15rem; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, rgba(139,124,246,0.3), rgba(139,124,246,0.05));
}
.rgpd-step {
  position: relative; padding-bottom: 2rem;
}
.rgpd-step:last-child { padding-bottom: 0; }
.rgpd-step__marker {
  position: absolute; left: -3rem; top: 0;
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--base-800);
  border: 2px solid rgba(139,124,246,0.3);
  font-family: var(--f-mono); font-size: 0.7rem;
  color: #a78bfa; font-weight: 700;
  z-index: 1;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.rgpd-step:hover .rgpd-step__marker {
  border-color: #8b7cf6;
  background: rgba(139,124,246,0.1);
}
.rgpd-step__body {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--base-700);
  border: 1px solid var(--stroke);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rgpd-step:hover .rgpd-step__body {
  border-color: rgba(139,124,246,0.25);
  transform: translateX(4px);
}
.rgpd-step__ref {
  display: inline-block;
  padding: 0.2rem 0.55rem; border-radius: 4px;
  background: rgba(139,124,246,0.08);
  border: 1px solid rgba(139,124,246,0.15);
  font-family: var(--f-mono); font-size: 0.62rem;
  color: #a78bfa; letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.rgpd-step__title {
  font-family: var(--f-display); font-size: 1.15rem;
  font-weight: 600; color: var(--text-1); margin-bottom: 0.4rem;
}
.rgpd-step__text {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.6;
  margin-bottom: 0.6rem;
}
.rgpd-step__output {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: 4px;
  background: rgba(139,124,246,0.06);
  border: 1px solid rgba(139,124,246,0.1);
  font-family: var(--f-mono); font-size: 0.65rem;
  color: #a78bfa; letter-spacing: 0.02em;
}
[data-theme="light"] .rgpd-step__marker { background: #fff; border-color: rgba(109,94,211,0.25); color: #6d5ed3; }
[data-theme="light"] .rgpd-step:hover .rgpd-step__marker { background: rgba(109,94,211,0.06); border-color: #6d5ed3; }
[data-theme="light"] .rgpd-step__body { background: #fff; }
[data-theme="light"] .rgpd-step:hover .rgpd-step__body { border-color: rgba(109,94,211,0.2); }
[data-theme="light"] .rgpd-step__ref { background: rgba(109,94,211,0.06); color: #6d5ed3; border-color: rgba(109,94,211,0.12); }
[data-theme="light"] .rgpd-step__output { background: rgba(109,94,211,0.04); color: #6d5ed3; border-color: rgba(109,94,211,0.1); }
[data-theme="light"] .rgpd-protocol::before { background: linear-gradient(to bottom, rgba(109,94,211,0.2), rgba(109,94,211,0.03)); }

/* ═══════════ OPENCRIME — Unique Investigation Page ═══════════ */

/* ─── OC Hero ─── */
.oc-hero-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #22c55e; font-weight: 600;
  padding: 0.35rem 0.8rem;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 100px;
}
.oc-title-main {
  color: var(--text-1);
}
.oc-title-accent {
  color: #22c55e;
}
.oc-hero-notice {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--text-3);
  padding: 0.5rem 1rem;
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.1);
  border-radius: var(--radius);
}

/* ─── OC Case Study (Investigation Dossier) ─── */
.oc-case {
  padding: 0; border-radius: var(--radius-lg);
  background: var(--base-700);
  border: 1px solid rgba(34,197,94,0.12);
  position: relative; overflow: hidden;
}
.oc-case::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #4ade80, #22c55e);
}
.oc-case__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.75rem;
  background: rgba(34,197,94,0.03);
  border-bottom: 1px solid rgba(34,197,94,0.08);
}
.oc-case__stamp {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #22c55e; font-weight: 600;
}
.oc-case__classification {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #f87171; font-weight: 700;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-sm);
}
.oc-case__title-row {
  padding: 1.5rem 1.75rem 0;
}
.oc-case__title {
  font-family: var(--f-display); font-size: 1.5rem;
  font-weight: 700; margin-bottom: 0.35rem;
}
.oc-case__type {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--text-3); letter-spacing: 0.04em;
}
.oc-case__narrative {
  padding: 1.5rem 1.75rem;
}
.oc-case__timeline {
  position: relative;
  padding-left: 2rem;
}
.oc-case__timeline::before {
  content: '';
  position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, #22c55e, rgba(34,197,94,0.15));
}
.oc-case__event {
  position: relative;
  padding: 0.6rem 0 0.6rem 1rem;
}
.oc-case__event::before {
  content: '';
  position: absolute; left: -2rem; top: 0.9rem;
  width: 8px; height: 8px;
  background: #22c55e; border-radius: 50%;
  box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.oc-case__event-date {
  font-family: var(--f-mono); font-size: 0.65rem;
  color: #22c55e; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: 0.2rem;
}
.oc-case__event-text {
  font-size: 0.85rem; color: var(--text-2); line-height: 1.6;
}
.oc-case__event-text strong {
  color: var(--text-1);
}
.oc-case__evidence {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(34,197,94,0.08);
}
.oc-case__evidence-item {
  padding: 1.25rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(34,197,94,0.06);
  transition: background 0.3s var(--ease);
}
.oc-case__evidence-item:last-child { border-right: none; }
.oc-case__evidence-item:hover {
  background: rgba(34,197,94,0.04);
}
.oc-case__evidence-val {
  display: block;
  font-family: var(--f-mono); font-size: 1.3rem;
  font-weight: 800; color: #22c55e;
  letter-spacing: -0.02em;
}
.oc-case__evidence-label {
  display: block; margin-top: 0.25rem;
  font-size: 0.68rem; color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ─── OC Pipeline (Terminal style) ─── */
.oc-pipeline {
  display: flex; flex-direction: column;
  gap: 0;
}
.oc-pipeline__step {
  padding: 1.5rem;
  background: var(--base-700);
  border: 1px solid rgba(34,197,94,0.1);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.oc-pipeline__step:hover {
  border-color: rgba(34,197,94,0.25);
  box-shadow: 0 0 20px rgba(34,197,94,0.05);
}
.oc-pipeline__head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-family: var(--f-mono); font-size: 0.72rem;
}
.oc-pipeline__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 50%;
  color: #22c55e; font-weight: 700; font-size: 0.65rem;
}
.oc-pipeline__prompt {
  color: var(--text-3);
}
.oc-pipeline__cmd {
  color: #22c55e; font-weight: 600;
}
.oc-pipeline__title {
  font-family: var(--f-display); font-size: 1.1rem;
  font-weight: 700; margin-bottom: 0.5rem;
}
.oc-pipeline__text {
  font-size: 0.85rem; color: var(--text-2); line-height: 1.6;
  margin-bottom: 0.75rem;
}
.oc-pipeline__output {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: rgba(34,197,94,0.7);
  padding: 0.5rem 0.75rem;
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.08);
  border-radius: var(--radius-sm);
  overflow-x: auto; white-space: nowrap;
}
.oc-pipeline__output-arrow {
  color: #22c55e; font-weight: 700;
  margin-right: 0.3rem;
}
.oc-pipeline__connector {
  display: flex; justify-content: center;
  padding: 0.35rem 0;
  color: rgba(34,197,94,0.3);
}

/* ─── OC Modules Grid ─── */
.oc-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.oc-module {
  padding: 1.5rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.oc-module::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: #22c55e; opacity: 0.3;
  transition: opacity 0.3s var(--ease);
}
.oc-module:hover {
  border-color: rgba(34,197,94,0.2);
  transform: translateY(-2px);
}
.oc-module:hover::before { opacity: 0.7; }
.oc-module__header {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin-bottom: 1rem;
}
.oc-module__icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: var(--radius);
}
.oc-module__title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 700;
}
.oc-module__badge {
  display: inline-block;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: #22c55e; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  margin-top: 0.15rem;
}
.oc-module__desc {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.6;
}
.oc-module__sources {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.oc-module__source {
  padding: 0.2rem 0.5rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  color: #22c55e; letter-spacing: 0.02em;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.12);
  border-radius: var(--radius-sm);
}
.oc-module__chains {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.oc-module__chain {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--stroke);
}
.oc-module__chain:last-child { border-bottom: none; }
.oc-module__chain-name {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: #22c55e; font-weight: 700;
  min-width: 70px;
}
.oc-module__chain-detail {
  font-size: 0.78rem; color: var(--text-2);
}
.oc-module__targets {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.75rem;
}
.oc-module__targets span {
  padding: 0.2rem 0.5rem;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-3);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

/* ─── OC Terminal (API mockup) ─── */
.oc-terminal {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(34,197,94,0.15);
  background: #0a0f0a;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.oc-terminal__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(34,197,94,0.06);
  border-bottom: 1px solid rgba(34,197,94,0.1);
}
.oc-terminal__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.oc-terminal__dot:nth-child(1) { background: #f87171; }
.oc-terminal__dot:nth-child(2) { background: #fbbf24; }
.oc-terminal__dot:nth-child(3) { background: #22c55e; }
.oc-terminal__bar-title {
  flex: 1; text-align: center;
  font-family: var(--f-mono); font-size: 0.65rem;
  color: rgba(34,197,94,0.5); letter-spacing: 0.06em;
}
.oc-terminal__body {
  padding: 1.5rem;
  font-family: var(--f-mono); font-size: 0.72rem;
  line-height: 1.6;
}
.oc-terminal__line {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.oc-terminal__line::-webkit-scrollbar { display: none; }
.oc-terminal__prompt {
  color: #22c55e; font-weight: 700;
}
.oc-terminal__input {
  color: #d1fae5;
}
.oc-terminal__line--response {
  padding-left: 1rem;
  margin-top: 0.2rem;
}
.oc-terminal__json {
  color: rgba(34,197,94,0.6);
  font-size: 0.68rem;
}

/* ─── OC API Info ─── */
.oc-api-info {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-top: 1.5rem;
}
.oc-api-info__item {
  padding: 1.25rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
}
.oc-api-info__title {
  font-family: var(--f-display); font-size: 0.95rem;
  font-weight: 700; margin-bottom: 0.5rem;
}
.oc-api-info__text {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.6;
}
.oc-api-info__mitre {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.5rem;
}
.oc-api-info__mitre-tag {
  padding: 0.3rem 0.65rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  color: #22c55e; letter-spacing: 0.03em;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.12);
  border-radius: var(--radius-sm);
}

/* ─── OC Stats ─── */
.oc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 2rem;
}
.oc-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.oc-stat::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: #22c55e; opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.oc-stat:hover { border-color: rgba(34,197,94,0.2); }
.oc-stat:hover::after { opacity: 0.5; }
.oc-stat__val {
  display: block;
  font-family: var(--f-mono); font-size: 1.8rem;
  font-weight: 800; color: #22c55e;
  letter-spacing: -0.02em;
}
.oc-stat__label {
  display: block; margin-top: 0.3rem;
  font-size: 0.75rem; color: var(--text-3);
}

/* ─── OC Stack Badges ─── */
.oc-stack {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
}
.oc-stack__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--text-2); letter-spacing: 0.02em;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.oc-stack__badge:hover {
  border-color: rgba(34,197,94,0.25);
  color: #22c55e;
  transform: translateY(-2px);
}

/* ─── OC CTA ─── */
.oc-cta-text {
  font-size: 0.92rem; color: var(--text-2);
  max-width: 36rem; margin: 0 auto 1.5rem;
  text-align: center; line-height: 1.7;
}
.oc-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--f-display); font-size: 0.88rem;
  font-weight: 600; color: #0a0f0a;
  background: #22c55e;
  border: none; border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.oc-cta-btn:hover {
  background: #4ade80;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(34,197,94,0.3);
}

/* ─── OC Light Theme ─── */
[data-theme="light"] .oc-hero-tag {
  background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.15); color: #16a34a;
}
[data-theme="light"] .oc-title-accent { color: #16a34a; }
[data-theme="light"] .oc-hero-notice {
  background: rgba(22,163,74,0.04); border-color: rgba(22,163,74,0.12); color: #4b5563;
}
[data-theme="light"] .oc-case {
  background: #fff; border-color: rgba(22,163,74,0.12);
}
[data-theme="light"] .oc-case__header {
  background: rgba(22,163,74,0.03); border-color: rgba(22,163,74,0.08);
}
[data-theme="light"] .oc-case__stamp { color: #16a34a; }
[data-theme="light"] .oc-case__classification { color: #dc2626; border-color: rgba(220,38,38,0.2); }
[data-theme="light"] .oc-case__event-date { color: #16a34a; }
[data-theme="light"] .oc-case__event::before { background: #16a34a; box-shadow: 0 0 6px rgba(22,163,74,0.3); }
[data-theme="light"] .oc-case__event-text { color: #4b5563; }
[data-theme="light"] .oc-case__event-text strong { color: #1f2937; }
[data-theme="light"] .oc-case__timeline::before { background: linear-gradient(to bottom, #16a34a, rgba(22,163,74,0.15)); }
[data-theme="light"] .oc-case__evidence { border-color: rgba(22,163,74,0.08); }
[data-theme="light"] .oc-case__evidence-item { border-color: rgba(22,163,74,0.06); }
[data-theme="light"] .oc-case__evidence-item:hover { background: rgba(22,163,74,0.03); }
[data-theme="light"] .oc-case__evidence-val { color: #16a34a; }
[data-theme="light"] .oc-case__evidence-label { color: #6b7280; }
[data-theme="light"] .oc-pipeline__step { background: #fff; border-color: rgba(22,163,74,0.1); }
[data-theme="light"] .oc-pipeline__step:hover { border-color: rgba(22,163,74,0.25); box-shadow: 0 2px 12px rgba(22,163,74,0.06); }
[data-theme="light"] .oc-pipeline__num { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.2); color: #16a34a; }
[data-theme="light"] .oc-pipeline__cmd { color: #16a34a; }
[data-theme="light"] .oc-pipeline__output { color: rgba(22,163,74,0.7); background: rgba(22,163,74,0.04); border-color: rgba(22,163,74,0.08); }
[data-theme="light"] .oc-pipeline__output-arrow { color: #16a34a; }
[data-theme="light"] .oc-pipeline__connector { color: rgba(22,163,74,0.25); }
[data-theme="light"] .oc-module { background: #fff; }
[data-theme="light"] .oc-module::before { background: #16a34a; }
[data-theme="light"] .oc-module:hover { border-color: rgba(22,163,74,0.2); }
[data-theme="light"] .oc-module__icon { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.12); }
[data-theme="light"] .oc-module__badge { color: #16a34a; }
[data-theme="light"] .oc-module__desc { color: #4b5563; }
[data-theme="light"] .oc-module__source { color: #16a34a; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.1); }
[data-theme="light"] .oc-module__chain-name { color: #16a34a; }
[data-theme="light"] .oc-module__chain-detail { color: #4b5563; }
[data-theme="light"] .oc-module__targets span { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); color: #6b7280; }
[data-theme="light"] .oc-terminal {
  background: #0f1a0f; border-color: rgba(22,163,74,0.2);
}
[data-theme="light"] .oc-api-info__item { background: #fff; }
[data-theme="light"] .oc-api-info__text { color: #4b5563; }
[data-theme="light"] .oc-api-info__mitre-tag { color: #16a34a; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.1); }
[data-theme="light"] .oc-stat { background: #fff; }
[data-theme="light"] .oc-stat__val { color: #16a34a; }
[data-theme="light"] .oc-stat__label { color: #6b7280; }
[data-theme="light"] .oc-stat::after { background: #16a34a; }
[data-theme="light"] .oc-stack__badge { background: #fff; }
[data-theme="light"] .oc-stack__badge:hover { color: #16a34a; border-color: rgba(22,163,74,0.25); }
[data-theme="light"] .oc-cta-text { color: #4b5563; }
[data-theme="light"] .oc-cta-btn { background: #16a34a; color: #fff; }
[data-theme="light"] .oc-cta-btn:hover { background: #15803d; box-shadow: 0 4px 16px rgba(22,163,74,0.2); }

/* ─── OC Responsive 768px ─── */
@media (max-width: 768px) {
  .oc-case__evidence {
    grid-template-columns: repeat(3, 1fr);
  }
  .oc-modules {
    grid-template-columns: 1fr;
  }
  .oc-api-info {
    grid-template-columns: 1fr;
  }
  .oc-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .oc-terminal__body {
    padding: 1rem;
    font-size: 0.65rem;
  }
  .oc-case__header {
    flex-direction: column; gap: 0.5rem;
    align-items: flex-start;
  }
  .oc-pipeline__head {
    flex-wrap: wrap;
  }
}

/* ─── OC Responsive 480px ─── */
@media (max-width: 480px) {
  .oc-case__evidence {
    grid-template-columns: repeat(2, 1fr);
  }
  .oc-case__evidence-val {
    font-size: 1rem;
  }
  .oc-case__title {
    font-size: 1.2rem;
  }
  .oc-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .oc-stat__val {
    font-size: 1.4rem;
  }
  .oc-pipeline__output {
    font-size: 0.58rem;
  }
  .oc-terminal__body {
    padding: 0.75rem;
    font-size: 0.58rem;
  }
  .oc-terminal__bar-title {
    display: none;
  }
  .oc-stack__badge {
    padding: 0.35rem 0.65rem;
    font-size: 0.65rem;
  }
  .oc-module__chain {
    flex-direction: column; gap: 0.15rem;
  }
  .oc-module__chain-name { min-width: 0; }
}

/* ─── OC prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .oc-module:hover { transform: none; }
  .oc-pipeline__step:hover { box-shadow: none; }
  .oc-stack__badge:hover { transform: none; }
  .oc-cta-btn:hover { transform: none; box-shadow: none; }
  .oc-stat:hover { transform: none; }
}

/* ═══════════ PAGE-SPECIFIC RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .crypto-incidents { grid-template-columns: 1fr; }
  .crypto-stats { grid-template-columns: 1fr; }
  .crypto-services { grid-template-columns: repeat(2, 1fr); }
  .crypto-svc--main { grid-column: 1 / -1; }
  .crypto-notice { flex-direction: column; }
  .crypto-gear { grid-template-columns: 1fr; }
  .crypto-gear__card--featured { grid-column: 1; }
  .forensic-compare { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .pipeline-flow { flex-direction: column; }
  .pipeline-flow__step:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pipeline-flow__step:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .pipeline-flow__arrow { transform: rotate(90deg); justify-content: center; }
  .rgpd-score { grid-template-columns: 80px 1fr 60px; gap: 0.5rem; }
  .rgpd-score__who { font-size: 0.72rem; }
  .rgpd-score__val { font-size: 0.9rem; }
  .rgpd-letter__head { flex-direction: column; text-align: center; }
  .rgpd-check { flex-direction: column; gap: 0.4rem; }
  .rgpd-audit__footer { flex-direction: column; text-align: center; }
  .rgpd-audit__score-verdict { margin-left: 0; }
  .rgpd-protocol { padding-left: 2.5rem; }
  .rgpd-step__marker { left: -2.5rem; width: 2rem; height: 2rem; font-size: 0.6rem; }
  .crypto-hero-deco__coin { opacity: 0.08; }
  .crypto-coins__coin { opacity: 0.10; }
}

@media (max-width: 480px) {
  .heatmap-grid { grid-template-columns: 1fr 1fr; }
  .sovereignty-badges { gap: 0.5rem; }
  .stack-badges { gap: 0.35rem; }
  .rgpd-score { grid-template-columns: 60px 1fr 50px; }
  .rgpd-hero-deco__art { display: none; }
  .crypto-services { grid-template-columns: 1fr; }
  .crypto-opsec__item { gap: 0.75rem; }
  .crypto-accomp__step { padding: 1rem; gap: 0.75rem; }
}

/* ═══════════ LIGHT THEME PAGE OVERRIDES ═══════════ */
[data-theme="light"][data-page="crypto"] { --_accent: #d97706; }
[data-theme="light"][data-page="casus-belli"] { --_accent: #b8860b; }
[data-theme="light"][data-page="opencrime"] { --_accent: #16a34a; }
[data-theme="light"][data-page="smartphone"] { --_accent: #059669; }
[data-theme="light"] .story__phone { background: #f8fafc; border-color: #d1d5db; }
[data-theme="light"] .story__phone-screen { background: #fff; }
[data-theme="light"] .scr-lock__signal span { background: #94a3b8; }
[data-theme="light"] .scr-seized__title { color: #dc2626; }
[data-theme="light"] .scr-seized__dots span { color: #dc2626; }
[data-theme="light"] .scr-seized__sub { color: rgba(220,38,38,0.5); }
[data-theme="light"] .scr-pressure__title { color: #d97706; }
[data-theme="light"] .scr-pressure__timer { color: #d97706; }
[data-theme="light"] .scr-pressure__attempts { color: rgba(217,119,6,0.6); }
[data-theme="light"] .scr-pressure__glow { box-shadow: inset 0 0 20px rgba(217,119,6,0.04); }
[data-theme="light"] .scr-duress__label { color: rgba(5,150,105,0.4); }
[data-theme="light"] .scr-wipe__app { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .scr-wipe__terminal { background: rgba(15,23,42,0.95); }
[data-theme="light"] .scr-cable__title { color: #374151; }
[data-theme="light"] .scr-cable__badge { background: rgba(5,150,105,0.06); color: #059669; }
[data-theme="light"] .scr-cable__card { border-color: rgba(5,150,105,0.15); }
[data-theme="light"] .scr-cable__card-title { color: #374151; }
[data-theme="light"] .scr-cable__card-text { color: #6b7280; }
[data-theme="light"] .scr-safe__line { color: #059669; }
[data-theme="light"] .scr-safe__hr { border-color: rgba(5,150,105,0.2); }
[data-theme="light"] .scr-safe__result { color: #059669; }
[data-theme="light"] .scr-victory__title { color: #059669; }
[data-theme="light"] .scr-victory__sub { color: #6b7280; }
[data-theme="light"] .scr-victory__aura { box-shadow: inset 0 0 30px rgba(5,150,105,0.04); }
[data-theme="light"] .story__phone[data-state="seized"] { border-color: rgba(220,38,38,0.4); box-shadow: 0 0 30px rgba(220,38,38,0.06); }
[data-theme="light"] .story__phone[data-state="pressure"] { border-color: rgba(217,119,6,0.4); box-shadow: 0 0 30px rgba(217,119,6,0.06); }
[data-theme="light"] .story__phone[data-state="safe"] { border-color: #059669; box-shadow: 0 0 40px rgba(5,150,105,0.08); }
[data-theme="light"] .story__phone[data-state="victory"] { border-color: rgba(5,150,105,0.5); box-shadow: 0 0 30px rgba(5,150,105,0.05); }
[data-theme="light"] .layer { background: #fff; }
[data-theme="light"] .svc-step__marker { background: rgba(5,150,105,0.06); }
[data-theme="light"][data-page="phishing"] { --_accent: #dc2626; }
[data-theme="light"][data-page="rgpd"] { --_accent: #6d5ed3; }
[data-theme="light"][data-page="transition"] { --_accent: #059669; }
[data-theme="light"][data-page="transition-numerique"] { --_accent: #0284c7; }

/* ═══════════ TRANSITION NUMERIQUE — Unique Page (tnum-) ═══════════ */

/* ─── Hero decoration ─── */
.tnum-hero-deco { pointer-events: none; }
.tnum-orbit--1 { animation: tnum-spin 60s linear infinite; transform-origin: 220px 170px; }
.tnum-orbit--2 { animation: tnum-spin 45s linear infinite reverse; transform-origin: 220px 170px; }
.tnum-orbit--3 { animation: tnum-spin 30s linear infinite; transform-origin: 220px 170px; }
@keyframes tnum-spin { to { transform: rotate(360deg); } }

/* ─── Maturity gauge (tnum-maturity) ─── */
.tnum-maturity { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2.5rem; }
.tnum-maturity__level {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.tnum-maturity__level:hover {
  border-color: rgba(14,165,233,0.25); background: rgba(14,165,233,0.04);
  transform: translateX(4px);
}
.tnum-maturity__level--target {
  border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.06);
}
.tnum-maturity__bar {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06);
  overflow: hidden; margin-top: 0.65rem; position: relative;
}
.tnum-maturity__fill {
  height: 100%; border-radius: 3px; width: var(--fill, 0%);
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
.tnum-maturity__fill::after {
  content: ''; position: absolute; right: 0; top: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px rgba(14,165,233,0.5);
}
.tnum-maturity__info { display: flex; flex-direction: column; gap: 0.35rem; }
.tnum-maturity__header { display: flex; align-items: center; gap: 0.75rem; }
.tnum-maturity__num {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: #0ea5e9; opacity: 0.7;
}
.tnum-maturity__title {
  font-family: var(--f-head); font-size: 1.05rem; margin: 0; color: var(--text-1);
}
.tnum-maturity__desc {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin: 0;
}

/* ─── Pillars (tnum-pillars, tnum-pillar) ─── */
.tnum-pillars {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem;
}
.tnum-pillar {
  padding: 2rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.tnum-pillar:hover {
  border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.04);
  transform: translateY(-3px);
}
.tnum-pillar__line {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
  opacity: 0; transition: opacity 0.4s;
}
.tnum-pillar:hover .tnum-pillar__line { opacity: 1; }
.tnum-pillar__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.15);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.tnum-pillar__content { display: flex; flex-direction: column; gap: 0.5rem; }
.tnum-pillar__title {
  font-family: var(--f-head); font-size: 1.15rem; margin: 0; color: var(--text-1);
}
.tnum-pillar__text {
  font-size: 0.85rem; color: var(--text-2); line-height: 1.65; margin: 0;
}
.tnum-pillar__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
}
.tnum-pillar__tags span {
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.15);
  color: #38bdf8;
}

/* ─── Tools grid (tnum-tools, tnum-tool) ─── */
.tnum-tools {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem;
}
.tnum-tool {
  padding: 1.75rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  text-align: center; transition: border-color 0.3s, background 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.tnum-tool::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
  opacity: 0; transition: opacity 0.3s;
}
.tnum-tool:hover::before { opacity: 1; }
.tnum-tool:hover {
  border-color: rgba(14,165,233,0.25); background: rgba(14,165,233,0.04);
  transform: translateY(-2px);
}
.tnum-tool__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(14,165,233,0.06); border: 1px solid rgba(14,165,233,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.tnum-tool__category {
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #0ea5e9; margin-bottom: 0.4rem;
}
.tnum-tool__name {
  font-family: var(--f-head); font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--text-1);
}
.tnum-tool__desc {
  font-size: 0.8rem; color: var(--text-2); line-height: 1.6; margin: 0;
}

/* ─── ROI gauges (tnum-roi) ─── */
.tnum-roi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem;
}
.tnum-roi__metric { text-align: center; }
.tnum-roi__gauge {
  position: relative; width: 120px; height: 120px; margin: 0 auto 1rem;
}
.tnum-roi__svg { width: 100%; height: 100%; }
.tnum-roi__circle {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1);
}
.tnum-roi__value {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--f-head); font-size: 1.6rem; font-weight: 600;
  color: var(--text-1); line-height: 1;
}
.tnum-roi__value--small { font-size: 1.35rem; }
.tnum-roi__unit {
  font-size: 0.65em; font-weight: 400; color: #0ea5e9; margin-left: 1px;
}
.tnum-roi__label {
  font-family: var(--f-head); font-size: 0.95rem; color: var(--text-1); margin: 0 0 0.35rem;
}
.tnum-roi__detail {
  font-size: 0.78rem; color: var(--text-3); line-height: 1.5; margin: 0;
}

/* ─── Timeline (tnum-timeline) ─── */
.tnum-timeline {
  position: relative; margin-top: 2.5rem; padding-left: 2.5rem;
}
.tnum-timeline__track {
  position: absolute; left: 9px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, #0ea5e9, rgba(14,165,233,0.15));
}
.tnum-timeline__step {
  position: relative; display: flex; gap: 1.5rem; padding-bottom: 2.5rem;
}
.tnum-timeline__step:last-child { padding-bottom: 0; }
.tnum-timeline__node {
  position: absolute; left: -2.5rem; top: 0.25rem;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-1, #0b1120); z-index: 1;
}
.tnum-timeline__card {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  flex: 1; transition: border-color 0.3s, background 0.3s;
}
.tnum-timeline__card:hover {
  border-color: rgba(14,165,233,0.2); background: rgba(14,165,233,0.03);
}
.tnum-timeline__phase {
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #0ea5e9;
}
.tnum-timeline__title {
  font-family: var(--f-head); font-size: 1.1rem; margin: 0.35rem 0 0.5rem; color: var(--text-1);
}
.tnum-timeline__text {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.65; margin: 0;
}
.tnum-timeline__duration {
  display: inline-block; margin-top: 0.75rem;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  background: rgba(14,165,233,0.08); color: #38bdf8;
  border: 1px solid rgba(14,165,233,0.15);
}

/* ─── Versus comparison (tnum-versus) ─── */
.tnum-versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem;
  margin-top: 2rem; align-items: start;
}
.tnum-versus__col {
  padding: 2rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.tnum-versus__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-2);
  padding: 0.35rem 0.8rem; border-radius: 100px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1.25rem;
}
.tnum-versus__badge--active {
  color: #0ea5e9;
  background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.2);
}
.tnum-versus__list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem;
}
.tnum-versus__list li {
  font-size: 0.85rem; color: var(--text-2); line-height: 1.55;
  padding-left: 1.25rem; position: relative;
}
.tnum-versus__list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(14,165,233,0.5);
}
.tnum-versus__focus {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem; color: var(--text-3);
}
.tnum-versus__focus strong { color: var(--text-1); }
.tnum-versus__divider {
  display: flex; align-items: center; justify-content: center;
  padding-top: 3rem;
}
.tnum-versus__divider span {
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.15em;
  color: #0ea5e9; opacity: 0.5;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(14,165,233,0.2);
  display: flex; align-items: center; justify-content: center;
}

/* ─── Quote (tnum-quote) ─── */
.tnum-quote {
  padding: 3rem 2.5rem; border-radius: var(--radius-lg);
  background: rgba(14,165,233,0.03); border: 1px solid rgba(14,165,233,0.1);
  position: relative; text-align: center; max-width: 720px; margin: 0 auto;
}
.tnum-quote__mark {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--bg-1, #0b1120); padding: 0 1rem;
}
.tnum-quote__text {
  font-family: var(--f-head); font-size: 1.25rem; color: var(--text-1);
  line-height: 1.7; margin: 0 0 1rem; font-style: italic;
}
.tnum-quote__cite {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: #0ea5e9; opacity: 0.6; margin: 0;
}

/* ─── tnum LIGHT THEME overrides ─── */
[data-theme="light"] .tnum-maturity__level {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tnum-maturity__level:hover {
  background: rgba(14,165,233,0.04); border-color: rgba(14,165,233,0.2);
}
[data-theme="light"] .tnum-maturity__level--target {
  background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.2);
}
[data-theme="light"] .tnum-maturity__bar { background: rgba(0,0,0,0.06); }
[data-theme="light"] .tnum-maturity__title { color: #1e293b; }
[data-theme="light"] .tnum-maturity__desc { color: #64748b; }
[data-theme="light"] .tnum-pillar {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tnum-pillar:hover {
  background: rgba(14,165,233,0.04); border-color: rgba(14,165,233,0.2);
}
[data-theme="light"] .tnum-pillar__icon {
  background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.12);
}
[data-theme="light"] .tnum-pillar__title { color: #1e293b; }
[data-theme="light"] .tnum-pillar__text { color: #64748b; }
[data-theme="light"] .tnum-pillar__tags span {
  background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.12);
  color: #0284c7;
}
[data-theme="light"] .tnum-tool {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tnum-tool:hover {
  background: rgba(14,165,233,0.04); border-color: rgba(14,165,233,0.2);
}
[data-theme="light"] .tnum-tool__icon {
  background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.1);
}
[data-theme="light"] .tnum-tool__category { color: #0284c7; }
[data-theme="light"] .tnum-tool__name { color: #1e293b; }
[data-theme="light"] .tnum-tool__desc { color: #64748b; }
[data-theme="light"] .tnum-roi__value { color: #1e293b; }
[data-theme="light"] .tnum-roi__unit { color: #0284c7; }
[data-theme="light"] .tnum-roi__label { color: #1e293b; }
[data-theme="light"] .tnum-roi__detail { color: #94a3b8; }
[data-theme="light"] .tnum-timeline__track {
  background: linear-gradient(to bottom, #0284c7, rgba(2,132,199,0.15));
}
[data-theme="light"] .tnum-timeline__node { background: #fff; }
[data-theme="light"] .tnum-timeline__card {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tnum-timeline__card:hover {
  background: rgba(14,165,233,0.04); border-color: rgba(14,165,233,0.15);
}
[data-theme="light"] .tnum-timeline__phase { color: #0284c7; }
[data-theme="light"] .tnum-timeline__title { color: #1e293b; }
[data-theme="light"] .tnum-timeline__text { color: #64748b; }
[data-theme="light"] .tnum-timeline__duration {
  background: rgba(14,165,233,0.06); color: #0284c7;
  border-color: rgba(14,165,233,0.12);
}
[data-theme="light"] .tnum-versus__col {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .tnum-versus__badge {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .tnum-versus__badge--active {
  background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.15);
  color: #0284c7;
}
[data-theme="light"] .tnum-versus__list li { color: #64748b; }
[data-theme="light"] .tnum-versus__list li::before { background: rgba(2,132,199,0.5); }
[data-theme="light"] .tnum-versus__focus { border-color: rgba(0,0,0,0.06); color: #94a3b8; }
[data-theme="light"] .tnum-versus__focus strong { color: #1e293b; }
[data-theme="light"] .tnum-versus__divider span {
  color: #0284c7; border-color: rgba(2,132,199,0.2);
}
[data-theme="light"] .tnum-quote {
  background: rgba(14,165,233,0.03); border-color: rgba(14,165,233,0.1);
}
[data-theme="light"] .tnum-quote__mark { background: #fff; }
[data-theme="light"] .tnum-quote__text { color: #1e293b; }
[data-theme="light"] .tnum-quote__cite { color: #0284c7; }

/* ─── tnum RESPONSIVE 768px ─── */
@media (max-width: 768px) {
  .tnum-maturity__level { grid-template-columns: 1fr; gap: 0.75rem; }
  .tnum-maturity__bar { order: 2; }
  .tnum-pillars { grid-template-columns: 1fr; }
  .tnum-tools { grid-template-columns: repeat(2, 1fr); }
  .tnum-roi { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .tnum-versus { grid-template-columns: 1fr; gap: 1rem; }
  .tnum-versus__divider { padding-top: 0; }
  .tnum-versus__divider span {
    width: 28px; height: 28px; font-size: 0.65rem;
  }
  .tnum-timeline { padding-left: 2rem; }
  .tnum-timeline__node { left: -2rem; }
  .tnum-quote { padding: 2rem 1.5rem; }
  .tnum-quote__text { font-size: 1.1rem; }
}

/* ─── tnum RESPONSIVE 480px ─── */
@media (max-width: 480px) {
  .tnum-tools { grid-template-columns: 1fr; }
  .tnum-roi { grid-template-columns: 1fr; }
  .tnum-roi__gauge { width: 100px; height: 100px; }
  .tnum-roi__value { font-size: 1.3rem; }
  .tnum-timeline { padding-left: 1.5rem; }
  .tnum-timeline__node { left: -1.5rem; }
  .tnum-timeline__card { padding: 1.25rem; }
  .tnum-pillar { padding: 1.5rem; }
  .tnum-quote__text { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   TRANSITION TECHNOLOGIQUE — Unique page styles (trans-)
   Green sovereignty aesthetic, terminal/open-source vibe
   ═══════════════════════════════════════════════════════ */

/* ─── Hero Terminal Decoration ─── */
.trans-hero { position: relative; overflow: hidden; }
.trans-hero__terminal {
  position: absolute; top: 50%; right: 5%; transform: translateY(-50%);
  width: 380px; max-width: 35vw;
  background: rgba(10,22,40,0.85);
  border: 1px solid rgba(52,211,153,0.15);
  border-radius: var(--radius-lg);
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--text-2); overflow: hidden;
  backdrop-filter: blur(12px);
  z-index: 0;
  box-shadow: 0 0 40px rgba(52,211,153,0.06);
  animation: trans-termFade 1.5s var(--ease) forwards;
  opacity: 0;
}
@keyframes trans-termFade {
  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.trans-hero__term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(52,211,153,0.06);
  border-bottom: 1px solid rgba(52,211,153,0.1);
}
.trans-hero__term-dot { width: 8px; height: 8px; border-radius: 50%; }
.trans-hero__term-title {
  margin-left: auto;
  font-size: 0.62rem; color: rgba(52,211,153,0.5);
  letter-spacing: 0.05em;
}
.trans-hero__term-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.trans-hero__term-line {
  display: block; line-height: 1.6; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trans-hero__term-line--out { color: var(--text-3); padding-left: 1rem; }
.trans-hero__term-prompt { color: #34d399; margin-right: 0.5em; font-weight: 600; }
.trans-hero__term-cursor .typed-cursor {
  animation: trans-blink 1s step-end infinite;
  color: #34d399;
}
@keyframes trans-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

[data-theme="light"] .trans-hero__terminal {
  background: rgba(255,255,255,0.92);
  border-color: rgba(5,150,105,0.2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .trans-hero__term-bar { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.1); }
[data-theme="light"] .trans-hero__term-title { color: rgba(5,150,105,0.6); }
[data-theme="light"] .trans-hero__term-line { color: #374151; }
[data-theme="light"] .trans-hero__term-line--out { color: #6b7280; }
[data-theme="light"] .trans-hero__term-prompt { color: #059669; }
[data-theme="light"] .trans-hero__term-cursor .typed-cursor { color: #059669; }

/* ─── Sovereignty Badges ─── */
.trans-badges {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.trans-badge {
  text-align: center; padding: 1.5rem 1rem;
  background: var(--base-700);
  border: 1px solid rgba(52,211,153,0.12);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.trans-badge:hover {
  transform: translateY(-4px);
  border-color: rgba(52,211,153,0.3);
  box-shadow: 0 8px 30px rgba(52,211,153,0.08);
}
.trans-badge__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.15);
}
.trans-badge__label {
  font-family: var(--f-display); font-weight: 700;
  font-size: 0.9rem; color: var(--text-1); margin-bottom: 0.3rem;
}
.trans-badge__sub {
  font-size: 0.75rem; color: var(--text-3); line-height: 1.4;
}

[data-theme="light"] .trans-badge { background: #fff; border-color: rgba(5,150,105,0.12); }
[data-theme="light"] .trans-badge:hover { border-color: rgba(5,150,105,0.3); box-shadow: 0 8px 30px rgba(5,150,105,0.06); }
[data-theme="light"] .trans-badge__icon { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.12); }
[data-theme="light"] .trans-badge__label { color: #1e293b; }
[data-theme="light"] .trans-badge__sub { color: #6b7280; }

/* ─── Before/After Comparison Table ─── */
.trans-compare {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base-700);
}
.trans-compare__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0;
  border-bottom: 1px solid var(--stroke);
  transition: background 0.2s var(--ease);
}
.trans-compare__row:last-child { border-bottom: none; }
.trans-compare__row:hover { background: rgba(52,211,153,0.03); }
.trans-compare__before,
.trans-compare__after {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.82rem; color: var(--text-2);
}
.trans-compare__before span,
.trans-compare__after span { line-height: 1.3; }
.trans-compare__before { color: var(--text-3); }
.trans-compare__after { color: #34d399; font-weight: 500; }
.trans-compare__arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.5rem;
  opacity: 0.6;
}

[data-theme="light"] .trans-compare { background: #fff; }
[data-theme="light"] .trans-compare__row:hover { background: rgba(5,150,105,0.02); }
[data-theme="light"] .trans-compare__before { color: #9ca3af; }
[data-theme="light"] .trans-compare__after { color: #059669; }

/* ─── ROI Section ─── */
.trans-roi {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  align-items: start; margin-top: 1.5rem;
}
.trans-roi__col {
  padding: 1.5rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
}
.trans-roi__col--prop { border-top: 3px solid #f87171; }
.trans-roi__col--oss { border-top: 3px solid #34d399; }
.trans-roi__header {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2); margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--stroke);
}
.trans-roi__line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0;
  font-size: 0.8rem; color: var(--text-2);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.trans-roi__line:last-of-type { border-bottom: none; }
.trans-roi__cost {
  font-family: var(--f-mono); font-size: 0.78rem;
  color: var(--text-3); white-space: nowrap;
}
.trans-roi__cost--green { color: #34d399; }
.trans-roi__total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0; margin-top: 0.25rem;
  border-top: 1px solid var(--stroke);
  font-size: 0.82rem; font-weight: 600; color: var(--text-1);
}
.trans-roi__amount { font-family: var(--f-mono); font-size: 0.95rem; font-weight: 700; }
.trans-roi__amount--red { color: #f87171; }
.trans-roi__amount--green { color: #34d399; }

.trans-roi__vs {
  display: flex; align-items: center; justify-content: center;
  padding: 0 1rem; align-self: center;
}
.trans-roi__vs-circle {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--base-800);
  border: 2px solid var(--stroke);
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--text-3); letter-spacing: 0.1em; font-weight: 700;
}

.trans-roi__savings {
  margin-top: 1.5rem;
  text-align: center;
}
.trans-roi__savings-inner {
  display: inline-block;
  padding: 1.25rem 2.5rem;
  background: rgba(52,211,153,0.06);
  border: 2px solid rgba(52,211,153,0.2);
  border-radius: var(--radius-lg);
}
.trans-roi__savings-label {
  font-family: var(--f-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin-bottom: 0.3rem;
}
.trans-roi__savings-value {
  font-family: var(--f-display); font-size: 2.2rem;
  font-weight: 800; color: #34d399;
  line-height: 1.1;
}
.trans-roi__savings-pct {
  font-size: 0.82rem; color: #34d399; margin-top: 0.3rem;
  opacity: 0.8;
}

[data-theme="light"] .trans-roi__col { background: #fff; }
[data-theme="light"] .trans-roi__line { border-color: rgba(0,0,0,0.04); }
[data-theme="light"] .trans-roi__cost { color: #9ca3af; }
[data-theme="light"] .trans-roi__cost--green { color: #059669; }
[data-theme="light"] .trans-roi__amount--red { color: #dc2626; }
[data-theme="light"] .trans-roi__amount--green { color: #059669; }
[data-theme="light"] .trans-roi__vs-circle { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .trans-roi__savings-inner { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.15); }
[data-theme="light"] .trans-roi__savings-value { color: #059669; }
[data-theme="light"] .trans-roi__savings-pct { color: #059669; }

/* ─── Case Study ─── */
.trans-case {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-top: 1.5rem;
}
.trans-case__results { grid-column: 1 / -1; }
.trans-case__context,
.trans-case__timeline,
.trans-case__results {
  padding: 1.5rem;
  background: var(--base-700);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
}
.trans-case__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-size: 0.95rem;
  font-weight: 700; color: var(--text-1);
  margin-bottom: 1rem;
}
.trans-case__list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.trans-case__list li {
  font-size: 0.8rem; color: var(--text-2);
  padding-left: 1rem; position: relative; line-height: 1.5;
}
.trans-case__list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px; border-radius: 50%;
  background: #34d399;
}
.trans-case__phases { display: flex; flex-direction: column; gap: 0; }
.trans-case__phase {
  display: flex; gap: 1rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--stroke);
}
.trans-case__phase:last-child { border-bottom: none; }
.trans-case__week {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: #34d399; white-space: nowrap;
  min-width: 50px; font-weight: 600;
  padding-top: 2px;
}
.trans-case__phase-title {
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-1); margin-bottom: 0.15rem;
}
.trans-case__phase-text {
  font-size: 0.78rem; color: var(--text-3); line-height: 1.4;
}
.trans-case__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.trans-case__metric {
  text-align: center; padding: 1rem 0.5rem;
  background: rgba(52,211,153,0.04);
  border: 1px solid rgba(52,211,153,0.1);
  border-radius: var(--radius);
}
.trans-case__metric-val {
  display: block;
  font-family: var(--f-display); font-size: 1.8rem;
  font-weight: 800; color: #34d399; line-height: 1;
}
.trans-case__metric-label {
  display: block;
  font-size: 0.72rem; color: var(--text-3);
  margin-top: 0.3rem; line-height: 1.3;
}

[data-theme="light"] .trans-case__context,
[data-theme="light"] .trans-case__timeline,
[data-theme="light"] .trans-case__results { background: #fff; }
[data-theme="light"] .trans-case__title { color: #1e293b; }
[data-theme="light"] .trans-case__list li { color: #4b5563; }
[data-theme="light"] .trans-case__list li::before { background: #059669; }
[data-theme="light"] .trans-case__week { color: #059669; }
[data-theme="light"] .trans-case__phase-title { color: #1e293b; }
[data-theme="light"] .trans-case__phase-text { color: #6b7280; }
[data-theme="light"] .trans-case__metric { background: rgba(5,150,105,0.03); border-color: rgba(5,150,105,0.1); }
[data-theme="light"] .trans-case__metric-val { color: #059669; }
[data-theme="light"] .trans-case__metric-label { color: #6b7280; }

/* ─── Transition Steps (Accompagnement) ─── */
.trans-steps {
  display: flex; flex-direction: column; gap: 0;
  position: relative; margin-top: 1.5rem;
}
.trans-step {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0; position: relative;
}
.trans-step__num {
  grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(52,211,153,0.1);
  border: 2px solid rgba(52,211,153,0.3);
  font-family: var(--f-mono); font-size: 0.72rem;
  font-weight: 700; color: #34d399;
  z-index: 2; position: relative;
}
.trans-step__connector {
  position: absolute; left: 19px; top: 40px;
  width: 2px; height: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(52,211,153,0.3), rgba(52,211,153,0.05));
}
.trans-step__content {
  padding: 0 0 2rem 1.5rem;
}
.trans-step__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: rgba(52,211,153,0.06);
  margin-bottom: 0.5rem;
}
.trans-step__title {
  font-family: var(--f-display); font-size: 1.05rem;
  font-weight: 700; color: var(--text-1);
  margin-bottom: 0.3rem;
}
.trans-step__text {
  font-size: 0.82rem; color: var(--text-2);
  line-height: 1.6; max-width: 540px;
}
.trans-step__output {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.6rem;
  font-family: var(--f-mono); font-size: 0.68rem;
  color: #34d399; letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  background: rgba(52,211,153,0.06);
  border-radius: 100px;
  border: 1px solid rgba(52,211,153,0.12);
}
.trans-step__output-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #34d399;
}

[data-theme="light"] .trans-step__num { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.25); color: #059669; }
[data-theme="light"] .trans-step__connector { background: linear-gradient(180deg, rgba(5,150,105,0.25), rgba(5,150,105,0.05)); }
[data-theme="light"] .trans-step__icon { background: rgba(5,150,105,0.05); }
[data-theme="light"] .trans-step__title { color: #1e293b; }
[data-theme="light"] .trans-step__text { color: #4b5563; }
[data-theme="light"] .trans-step__output { color: #059669; background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.1); }
[data-theme="light"] .trans-step__output-dot { background: #059669; }

/* ─── Transition Quote ─── */
.trans-quote {
  position: relative;
  padding: 2.5rem;
  border-left: 3px solid rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.03);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.trans-quote__mark {
  position: absolute; top: 1rem; left: 1.5rem;
  opacity: 0.4;
}
.trans-quote__text {
  font-family: var(--f-display); font-size: 1.15rem;
  font-weight: 500; color: var(--text-1);
  line-height: 1.7; font-style: italic;
}
.trans-quote__cite {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: #34d399; margin-top: 1rem;
  letter-spacing: 0.04em;
}

[data-theme="light"] .trans-quote { border-color: rgba(5,150,105,0.25); background: rgba(5,150,105,0.02); }
[data-theme="light"] .trans-quote__text { color: #1e293b; }
[data-theme="light"] .trans-quote__cite { color: #059669; }

/* ─── Transition Responsive 768px ─── */
@media (max-width: 768px) {
  .trans-hero__terminal { display: none; }
  .trans-badges { grid-template-columns: repeat(2, 1fr); }
  .trans-compare__row { grid-template-columns: 1fr; gap: 0; }
  .trans-compare__before,
  .trans-compare__after { padding: 0.7rem 1rem; }
  .trans-compare__arrow {
    padding: 0.2rem 1rem; justify-content: flex-start;
  }
  .trans-compare__arrow svg { transform: rotate(90deg); width: 18px; height: 18px; }
  .trans-roi { grid-template-columns: 1fr; gap: 1rem; }
  .trans-roi__vs { padding: 0.5rem 0; }
  .trans-roi__vs-circle { width: 36px; height: 36px; font-size: 0.6rem; }
  .trans-case { grid-template-columns: 1fr; }
  .trans-case__results { grid-column: auto; }
  .trans-case__metrics { grid-template-columns: repeat(2, 1fr); }
  .trans-step { grid-template-columns: auto 1fr; }
  .trans-quote { padding: 1.5rem; }
  .trans-quote__text { font-size: 1rem; }
}

/* ─── Transition Responsive 480px ─── */
@media (max-width: 480px) {
  .trans-badges { grid-template-columns: 1fr; }
  .trans-case__metrics { grid-template-columns: 1fr; }
  .trans-roi__col { padding: 1rem; }
  .trans-roi__savings-inner { padding: 1rem 1.5rem; }
  .trans-roi__savings-value { font-size: 1.6rem; }
  .trans-quote__text { font-size: 0.92rem; }
}


/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__title-line { opacity: 1; transform: none; }
  .hero__sub, .hero__actions { opacity: 1; transform: none; }
  .reveal-up, .reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .float { animation: none; }
  .cursor-glow { display: none; }
  .crypto-coins, .crypto-hero-deco__coin, .radar-container, .network-graph, .phone-deco,
  .code-brackets, .warning-stripes, .rgpd-hero-deco__art, .tnum-hero-deco { display: none; }
  .tnum-orbit--1, .tnum-orbit--2, .tnum-orbit--3 { animation: none; }
  .story__scene-content { opacity: 1; transform: none; }
  .story__scanline { display: none; }
  /* Phone screen states — disable all animations */
  .scr-seized__dots span { animation: none; }
  .scr-pressure__timer { animation: none; }
  .scr-pressure__glow { animation: none; }
  .scr-duress__dots span { animation: none; background: var(--text-1); }
  .scr-duress__flash { animation: none; display: none; }
  .scr-duress__label { animation: none; opacity: 1; }
  .scr-wipe__terminal { animation: none; transform: translateY(0); }
  .scr-wipe__line { opacity: 1; animation: none; }
  .scr-wipe__progress-bar { animation: none; width: 100%; }
  .scr-safe__line { opacity: 1; animation: none; }
  .scr-safe__hr { opacity: 1; animation: none; }
  .scr-safe__result { opacity: 1; animation: none; }
  .scr-victory__icon { animation: none; opacity: 1; }
  .scr-victory__aura { animation: none; }
  .scroll-progress { display: none; }
  .typed-cursor { animation: none; }
  .stat-bar__fill { transition: none; width: var(--bar-w, 0%) !important; }
  .trans-hero__terminal { animation: none; opacity: 1; transform: translateY(-50%); }
  .trans-hero__term-cursor .typed-cursor { animation: none; }
  .trans-badge { transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ─── Partner link (Tulpar) ─── */
.bento__partner-link {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim, #5a5a66);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
  margin-left: 0.5rem;
  letter-spacing: 0.02em;
}
.bento__partner-link:hover {
  opacity: 1;
  color: var(--accent, #818cf8);
}
.nav__dropdown-partner {
  display: block;
  padding: 0.4rem 1rem 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #5a5a66);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   DOLUN.AI — AI ENGINE SHOWCASE STYLES
   ═══════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.ai-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ai-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ai-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--bg, #0a1628) 80%);
  z-index: 1;
  pointer-events: none;
}
.ai-hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(129,140,248,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,140,248,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}
.ai-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
}
.ai-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent, #818cf8);
  border: 1px solid rgba(129,140,248,0.2);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  margin-bottom: 2rem;
  animation: badgeFade 1s ease-out 0.2s both;
}
.ai-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(129,140,248,0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(129,140,248,0); }
}
@keyframes badgeFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ai-hero__title {
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 300;
  line-height: 1;
  margin: 0 0 1rem;
  animation: titleReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}
.ai-hero__name {
  color: var(--text-bright, #ededef);
}
.ai-hero__dot {
  background: linear-gradient(135deg, #818cf8, #a78bfa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@keyframes titleReveal {
  from { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.ai-hero__tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-default, #94949e);
  line-height: 1.6;
  margin: 0 0 2.5rem;
  animation: fadeUp 1s ease-out 0.7s both;
}
.ai-hero__tagline a {
  color: var(--accent, #818cf8);
  text-decoration: none;
  border-bottom: 1px solid rgba(129,140,248,0.3);
  transition: border-color 0.2s;
}
.ai-hero__tagline a:hover { border-color: #818cf8; }

/* Terminal */
.ai-hero__terminal {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid rgba(129,140,248,0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeUp 1s ease-out 0.9s both;
}
.ai-hero__terminal-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ai-hero__terminal-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.ai-hero__terminal-bar span:first-child { background: rgba(255,99,71,0.5); }
.ai-hero__terminal-bar span:nth-child(2) { background: rgba(255,193,7,0.4); }
.ai-hero__terminal-bar span:last-child { background: rgba(76,175,80,0.4); }
.ai-hero__terminal-body {
  padding: 1rem 1.2rem;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.85rem;
  color: var(--text-bright, #ededef);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}
.ai-hero__prompt {
  color: #818cf8;
  margin-right: 0.5rem;
  user-select: none;
}
.ai-hero__typed { white-space: nowrap; }
.ai-hero__cursor {
  color: #818cf8;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

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

.ai-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-dim, #5a5a66);
  animation: scrollBounce 2s ease-in-out infinite 2s;
  text-decoration: none;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ─── Sections ─── */
.ai-section {
  padding: 6rem 2rem;
  position: relative;
}
.ai-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ai-tag {
  display: inline-block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent, #818cf8);
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(129,140,248,0.15);
  border-radius: 4px;
}
.ai-heading {
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--text-bright, #ededef);
  line-height: 1.2;
  margin: 0 0 3rem;
}

/* ─── About ─── */
.ai-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ai-about__text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-default, #94949e);
  margin: 0 0 1.5rem;
}
.ai-about__text p:last-child { margin: 0; }

/* Orbit */
.ai-about__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-orbit {
  position: relative;
  width: 320px;
  height: 320px;
}
.ai-orbit__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(129,140,248,0.08);
}
.ai-orbit__ring--1 { inset: 0; animation: orbitSpin 20s linear infinite; border-color: rgba(129,140,248,0.12); }
.ai-orbit__ring--2 { inset: 40px; animation: orbitSpin 15s linear infinite reverse; border-style: dashed; }
.ai-orbit__ring--3 { inset: 80px; animation: orbitSpin 25s linear infinite; border-style: dotted; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.ai-orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-bright, #ededef);
  background: rgba(129,140,248,0.06);
  border: 1px solid rgba(129,140,248,0.15);
  border-radius: 50%;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(129,140,248,0.1), inset 0 0 20px rgba(129,140,248,0.05);
  animation: corePulse 3s ease-in-out infinite;
}
.ai-orbit__core span { color: var(--accent, #818cf8); }
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 40px rgba(129,140,248,0.1), inset 0 0 20px rgba(129,140,248,0.05); }
  50% { box-shadow: 0 0 60px rgba(129,140,248,0.2), inset 0 0 30px rgba(129,140,248,0.1); }
}

.ai-orbit__node {
  position: absolute;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--accent, #818cf8);
  background: rgba(129,140,248,0.08);
  border: 1px solid rgba(129,140,248,0.15);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}
.ai-orbit__node--1 { top: -5px; left: 50%; transform: translateX(-50%); animation: nodeFloat 4s ease-in-out infinite; }
.ai-orbit__node--2 { right: -10px; top: 50%; transform: translateY(-50%); animation: nodeFloat 4s ease-in-out infinite 1s; }
.ai-orbit__node--3 { bottom: -5px; left: 50%; transform: translateX(-50%); animation: nodeFloat 4s ease-in-out infinite 2s; }
.ai-orbit__node--4 { left: -15px; top: 50%; transform: translateY(-50%); animation: nodeFloat 4s ease-in-out infinite 3s; }
@keyframes nodeFloat {
  0%, 100% { opacity: 0.7; } 50% { opacity: 1; }
}

/* ─── Capabilities ─── */
.ai-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ai-cap {
  padding: 2rem;
  border: 1px solid rgba(129,140,248,0.06);
  border-radius: 12px;
  background: rgba(129,140,248,0.02);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s;
}
.ai-cap:hover {
  transform: translateY(-4px);
  border-color: rgba(129,140,248,0.15);
  box-shadow: 0 8px 40px rgba(129,140,248,0.08);
}
.ai-cap__icon {
  width: 40px; height: 40px;
  color: var(--accent, #818cf8);
  margin-bottom: 1.2rem;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.ai-cap:hover .ai-cap__icon { opacity: 1; }
.ai-cap__icon svg { width: 100%; height: 100%; }
.ai-cap__title {
  font-family: var(--f-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-bright, #ededef);
  margin: 0 0 0.6rem;
}
.ai-cap__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-default, #94949e);
  margin: 0;
}

/* ─── Pipeline / Flow ─── */
.ai-flow__pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.ai-flow__step {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  padding: 2rem;
  border: 1px solid rgba(129,140,248,0.08);
  border-radius: 12px;
  background: rgba(129,140,248,0.02);
  text-align: center;
}
.ai-flow__step--core {
  border-color: rgba(129,140,248,0.2);
  background: rgba(129,140,248,0.05);
  box-shadow: 0 0 30px rgba(129,140,248,0.06);
}
.ai-flow__step-icon {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  color: var(--accent, #818cf8);
}
.ai-flow__step-icon svg { width: 100%; height: 100%; }
.ai-flow__step-icon--core {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(129,140,248,0.2);
  background: rgba(129,140,248,0.08);
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: 1.1rem;
  color: var(--text-bright, #ededef);
  animation: corePulse 3s ease-in-out infinite;
}
.ai-flow__step h4 {
  font-family: var(--f-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright, #ededef);
  margin: 0 0 0.5rem;
}
.ai-flow__step p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim, #5a5a66);
  margin: 0;
}
.ai-flow__connector {
  display: flex;
  align-items: center;
  width: 60px;
  position: relative;
  flex-shrink: 0;
}
.ai-flow__connector-line {
  width: 100%;
  height: 1px;
  background: rgba(129,140,248,0.15);
}
.ai-flow__connector-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 10px rgba(129,140,248,0.5);
  animation: pulseFly 2s ease-in-out infinite;
}
@keyframes pulseFly {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

/* ─── Metrics ─── */
.ai-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.ai-metric {
  padding: 2rem 1rem;
}
.ai-metric__val {
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--text-bright, #ededef);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.ai-metric__unit {
  font-size: 0.5em;
  color: var(--accent, #818cf8);
}
.ai-metric__label {
  font-size: 0.85rem;
  color: var(--text-dim, #5a5a66);
  letter-spacing: 0.02em;
}

/* ─── CTA ─── */
.ai-cta {
  text-align: center;
  padding: 4rem 2rem 6rem;
}
.ai-cta__text {
  font-family: var(--f-serif, 'Cormorant', serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--text-default, #94949e);
  margin: 0 0 2rem;
  font-style: italic;
}
.ai-cta__btn {
  font-size: 1rem;
  padding: 0.8rem 2rem;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .ai-about__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ai-about__visual { order: -1; }
  .ai-orbit { width: 240px; height: 240px; }
  .ai-caps__grid { grid-template-columns: 1fr; }
  .ai-flow__pipeline { flex-direction: column; align-items: center; }
  .ai-flow__connector { width: auto; height: 40px; flex-direction: column; }
  .ai-flow__connector-line { width: 1px; height: 100%; }
  .ai-flow__connector-pulse { animation-name: pulseFlyV; }
  @keyframes pulseFlyV {
    0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; }
  }
  .ai-flow__step { max-width: 100%; }
  .ai-metrics__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ai-metrics__grid { grid-template-columns: 1fr; }
}