/* Glacias AI v3 — closer to original, with video hero */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #ffffff;
  --bg-2: #f5f8fa;
  --bg-3: #eaf2f6;
  --ink: #0c1e2a;
  --ink-2: #2a4658;
  --ink-soft: #5e7d8f;
  --ice: #cfe4ec;
  --ice-deep: #6ea5b8;
  --accent: #facc15;
  --accent-2: #fde047;
  --accent-ink: #1f6f8b;
  --line: rgba(12, 30, 42, 0.1);
  --line-soft: rgba(12, 30, 42, 0.05);

  /* Brandmark colors (logo update 2026-04-30) */
  --brand-ai: #F5C84B;          /* dot + "AI" suffix */
  --brand-peak: #5FA3C7;        /* inner peak of the triangle, on all surfaces */

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Brand wordmark: Glacias.AI — single typeface, dot + suffix carry the brand color */
.brand-wordmark {
  font-family: var(--sans); font-weight: 500;
  letter-spacing: -0.02em;
}
.brand-wordmark .brand-dot,
.brand-wordmark .brand-ai {
  color: var(--brand-ai);
  letter-spacing: 0.12em;
}
.brand-wordmark .brand-ai { margin-left: -0.04em; }

body[data-theme="dark"] {
  --bg: #04101a;
  --bg-2: #07182a;
  --bg-3: #0c2236;
  --ink: #eaf6ff;
  --ink-2: #b8d6e8;
  --ink-soft: #6f93ad;
  --line: rgba(158, 216, 238, 0.14);
  --line-soft: rgba(158, 216, 238, 0.07);
  --accent: #ffd84d;
  --accent-2: #fff0a8;
  --accent-ink: #9ed8ee;
}

.hover-card {
  transition: background 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
  position: relative;
  cursor: default;
}
.hover-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(250, 204, 21, 0.18) 100%);
  transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.hover-card:hover::before { height: 100%; }
.hover-card:hover { transform: translateY(-4px); }
.hover-card > * { position: relative; z-index: 1; }

.hover-card.on-dark::before {
  background: linear-gradient(180deg, transparent 0%, rgba(253, 224, 71, 0.16) 100%);
}

.hover-accent {
  transition: color 0.3s ease, transform 0.4s ease;
}
.hover-card:hover .hover-accent {
  color: var(--accent);
}

* { box-sizing: border-box; }
html {
  /* clip prevents horizontal scrollbars without breaking position:fixed children
     (overflow:hidden on html/body is a known cause of fixed-nav bugs on mobile WebKit) */
  overflow-x: clip;
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: currentColor; border-radius: 50%;
  display: inline-block;
}

.display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.h-xl { font-weight: 500; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -0.025em; max-width: 26ch; text-wrap: balance; }
.display { max-width: 18ch; text-wrap: balance; }
.h-xl em, .h-l em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.h-l { font-weight: 500; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; }
.body-l { font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--ink-2); text-wrap: pretty; }
.body { font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--ink-2); text-wrap: pretty; }
.caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.num-track { font-family: var(--sans); font-feature-settings: "tnum"; font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: all 0.2s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--light-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--light-ghost:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

section { padding: 120px 0; position: relative; }
@media (max-width: 720px) { section { padding: 80px 0; } }

.section-head {
  display: block;
  margin-bottom: 64px;
  max-width: 880px;
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin: 0 0 24px; }
.section-head .lede {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
@media (max-width: 900px) { .section-head { margin-bottom: 48px; } }

@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  animation: pulse 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ============================================================
   v3 -> WordPress port: classes that replace inline React styles
   ============================================================ */

/* hide-mobile helper from index.html */
@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
}

/* Site nav (replaces React NavV3 inline styles) */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
  color: #fff;
}
#site-nav.is-scrolled {
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
  color: var(--ink);
}
#site-nav .nav-row {
  display: flex; align-items: center; justify-content: space-between;
}
#site-nav .nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 500; letter-spacing: -0.02em;
  color: inherit;
}
#site-nav .nav-logo .accent { color: var(--accent); }
#site-nav .nav-links {
  display: flex; align-items: center; gap: 32px;
  font-size: 14px;
  list-style: none; margin: 0; padding: 0;
}
#site-nav .nav-links a { opacity: 0.85; color: inherit; }
#site-nav .nav-tools { display: flex; align-items: center; gap: 16px; }
#site-nav .nav-lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: inherit;
}
#site-nav .nav-lang a { color: inherit; opacity: 0.5; text-decoration: none; }
#site-nav .nav-lang .sep { opacity: 0.4; }

/* Light variant of CTA when on hero */
#site-nav:not(.is-scrolled) .btn { background: #fff; color: var(--ink); border-color: #fff; }
#site-nav:not(.is-scrolled) .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Hero ============================================================ */
.v3-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  background: #04101a;
}
.v3-hero .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  transform: scale(1.05);
  will-change: transform;
}
.v3-hero .hero-bg img,
.v3-hero .hero-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v3-hero .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,16,26,0.5) 0%, rgba(4,16,26,0.2) 30%, rgba(4,16,26,0.4) 70%, rgba(4,16,26,0.85) 100%);
}
.v3-hero .hero-spacer { position: relative; z-index: 5; padding-top: 140px; }
.v3-hero .hero-spacer-inner { height: 1.2em; }
.v3-hero .hero-headline {
  position: relative; z-index: 5;
  padding: 60px 0;
}
.v3-hero h1 { margin: 0; color: #fff; max-width: 14ch; }
.v3-hero .hero-body {
  margin-top: 32px; max-width: 52ch; color: rgba(255,255,255,0.85);
  animation-delay: 0.2s;
}
.v3-hero .hero-body strong { color: #fff; font-weight: 500; }
.v3-hero .hero-cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.v3-hero .hero-bottom {
  position: relative; z-index: 5; padding-bottom: 48px;
}
.v3-hero .hero-bottom-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  flex-wrap: wrap; gap: 16px;
}
.v3-hero .hero-bottom-inner .caption { color: rgba(255,255,255,0.75); }
.v3-hero .hero-bottom-inner .scroll-arrow {
  display: inline-flex; align-items: center; gap: 10px;
}

/* Stats grid ====================================================== */
.v3-stats {
  padding-top: 60px; padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.v3-stats .stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.v3-stats .stat { padding: 12px 28px; border-left: 1px solid var(--line); }
.v3-stats .stat:first-child { border-left: none; }
.v3-stats .stat .num {
  font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.025em; color: var(--ink);
}
.v3-stats .stat .label { margin-top: 12px; font-size: 14px; font-weight: 500; }
.v3-stats .stat .detail { margin-top: 4px; font-size: 10px; }

/* Founder ========================================================= */
.v3-founder .founder-grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px;
}
.v3-founder .founder-photo {
  aspect-ratio: 4/5; border-radius: 4px; position: relative; overflow: hidden;
}
.v3-founder .founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-founder .founder-name { margin-top: 20px; font-size: 22px; font-weight: 500; }
.v3-founder .founder-role { margin-top: 6px; }
.v3-founder h2 { margin: 0 0 24px; }
.v3-founder .founder-quote {
  font-size: 20px; line-height: 1.45; color: var(--ink-2); margin: 0;
  padding-left: 16px; border-left: 2px solid var(--accent); max-width: 52ch;
}
.v3-founder .founder-quote em { color: var(--accent); font-style: italic; }
.v3-founder .founder-body { margin-top: 40px; }
.v3-founder .founder-body p { margin: 0; max-width: 64ch; }
.v3-founder .founder-body strong { color: var(--ink); font-weight: 500; }
.v3-founder .founder-meta {
  display: flex; gap: 48px; margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.v3-founder .founder-meta .item { font-size: 14px; font-weight: 500; margin-top: 6px; }

/* Pillars ========================================================= */
.v3-pillars {
  background: var(--ink); color: #fff;
}
.v3-pillars .pillars-head .lede {
  color: rgba(255,255,255,0.85);
}
.v3-pillars .pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.v3-pillars .pillar {
  padding: 40px 28px;
  border-right: 1px solid rgba(255,255,255,0.15);
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.v3-pillars .pillar:last-child { border-right: none; }
.v3-pillars .pillar .pillar-top {
  display: flex; justify-content: space-between; margin-bottom: 60px;
}
.v3-pillars .pillar .pillar-num { font-size: 56px; color: rgba(255,255,255,0.4); }
.v3-pillars .pillar .pillar-tag { color: var(--accent); }
.v3-pillars .pillar h3 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 40px); }
.v3-pillars .pillar p { color: rgba(255,255,255,0.75); }
.v3-pillars .pillar .points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.v3-pillars .pillar .points span {
  font-family: var(--mono); font-size: 10px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Inventory ======================================================= */
.v3-inv .inv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.v3-inv .inv-card {
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
.v3-inv .inv-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3); }
.v3-inv .inv-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.v3-inv .inv-card .body {
  padding: 28px; display: flex; flex-direction: column; gap: 16px; flex: 1;
}
.v3-inv .inv-card .row {
  display: flex; justify-content: space-between; align-items: center;
}
.v3-inv .inv-card .tag { color: var(--accent-ink); }
.v3-inv .inv-card .num { font-size: 18px; color: var(--ink-soft); }
.v3-inv .inv-card h3 { font-size: 26px; font-weight: 500; margin: 0; letter-spacing: -0.02em; }
.v3-inv .inv-card p { margin: 0; font-size: 14px; }
.v3-inv .inv-card .stats {
  display: flex; gap: 24px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.v3-inv .inv-card .stats .v { font-size: 20px; color: var(--ink); }
.v3-inv .inv-card .stats .l { font-size: 9px; margin-top: 4px; }

/* Solutions ======================================================= */
.v3-solutions { background: var(--bg-2); }
.v3-solutions .tabs {
  display: flex; border-bottom: 1px solid var(--line); margin-bottom: 48px;
  overflow-x: auto;
}
.v3-solutions .tab {
  background: none; border: none;
  padding: 20px 32px 20px 0; margin-right: 32px;
  font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink-soft); opacity: 0.4;
  cursor: pointer; position: relative; white-space: nowrap;
  font-family: inherit;
}
.v3-solutions .tab.is-active { color: var(--ink); opacity: 1; }
.v3-solutions .tab.is-active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 32px;
  height: 2px; background: var(--accent);
}
.v3-solutions .panel { display: none; }
.v3-solutions .panel.is-active { display: block; }
.v3-solutions .panel .lead { max-width: 72ch; }
.v3-solutions .panel .lead .tag { color: var(--accent); }
.v3-solutions .panel .lead h3 {
  margin: 20px 0 0;
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 500; letter-spacing: -0.02em;
}
.v3-solutions .panel .lead .tagline { margin-top: 24px; }
.v3-solutions .panel .lead .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.v3-solutions .panel .lead .meta span {
  font-family: var(--mono); font-size: 10px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px;
}
.v3-solutions .panel .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px;
}
.v3-solutions .panel .how p { margin-top: 20px; line-height: 1.7; }
.v3-solutions .panel .outcome p {
  margin-top: 20px; font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--ink);
}
.v3-solutions .panel .booked-row {
  margin-top: 28px; padding: 16px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between;
}
.v3-solutions .panel .booked-row .v {
  font-size: 14px; font-weight: 500; color: var(--accent);
}

/* AI Section ====================================================== */
.v3-ai .ai-grid {
  display: grid; grid-template-columns: 0.7fr 1.6fr; gap: 64px; align-items: stretch;
}
.v3-ai .ai-image {
  max-width: 280px; aspect-ratio: 4/5;
  border-radius: 4px; overflow: hidden;
}
.v3-ai .ai-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-ai .ai-intro { margin: 0 0 24px; max-width: 52ch; }
.v3-ai .ai-list { margin-top: 16px; }
.v3-ai .ai-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 24px;
  padding: 20px 16px; border-top: 1px solid var(--line);
}
.v3-ai .ai-row .num { color: var(--accent-ink); }
.v3-ai .ai-row h4 { margin: 0; font-size: 17px; font-weight: 500; }
.v3-ai .ai-row p { margin: 8px 0 0; font-size: 14px; }

/* Brandmark variant: dark surface, oversized two-tone logo (white outer + ice-blue peak)
   on the left, the five feature rows stepping inward to mirror the right flank
   of the triangle. Feature 01 sits at the apex, 05 at the base.
   We mark the section with a class via PHP so we don't depend on :has() support. */
.v3-ai.is-brandmark { background: var(--ink); color: #fff; }
.v3-ai.is-brandmark .section-head .lede { color: rgba(255,255,255,0.85); }
.v3-ai.is-brandmark .section-head h2 { color: #fff; }

/* Asymmetric layout: text block dictates the height, the SVG sizes itself to
   match. Grid uses align-items: center so the right column centers vertically
   if it ever ends up shorter than the SVG, but the brandmark cell is forced
   to align-self: stretch so the SVG can fill the full height. */
.v3-ai .ai-grid--brandmark {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}
.v3-ai .ai-brandmark {
  align-self: stretch;
  position: relative;
  color: #fff;                                  /* drives the outer triangle (currentColor) */
  display: block;
}
/* Height-driven sizing: SVG fills the cell height, width follows from the
   triangle's tight viewBox aspect (18:16). transform-origin: top anchors the
   apex at the cell's top edge — i.e. flush with the line above item 01 — and
   scale grows the triangle downward and sideways without moving that anchor. */
.v3-ai .ai-brandmark svg {
  height: 100%;
  width: auto;
  aspect-ratio: 18 / 16;
  display: block;
  transform: scale(1.3);
  transform-origin: top center;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.45));
}

/* Intro paragraph: pulled out of the grid, sits above as a full-width block */
.v3-ai.is-brandmark > .container > .ai-intro {
  color: rgba(255,255,255,0.85);
  margin: 0 0 40px;
  max-width: 80ch;
}

/* Compact rows so the section height stays sane. h4 is on its own line,
   the description sits inline with reduced padding. */
.v3-ai .ai-list--slope {
  margin-top: 0; position: relative;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.v3-ai .ai-list--slope .ai-row {
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 12px 16px;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  transition: margin 0.4s ease;
}
.v3-ai .ai-list--slope .ai-row h4 { font-size: 15px; }
.v3-ai .ai-list--slope .ai-row p { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.v3-ai .ai-list--slope .ai-row:last-child { border-bottom: none; }

/* Slope steps — class-based, mirrors the right flank of the triangle.
   Step values increase progressively so the rows form a visible diagonal. */
.v3-ai .ai-list--slope .slope-step-0 { margin-left: 0 !important; }
.v3-ai .ai-list--slope .slope-step-1 { margin-left: clamp(24px, 5vw, 72px)  !important; }
.v3-ai .ai-list--slope .slope-step-2 { margin-left: clamp(48px, 10vw, 144px) !important; }
.v3-ai .ai-list--slope .slope-step-3 { margin-left: clamp(72px, 15vw, 216px) !important; }
.v3-ai .ai-list--slope .slope-step-4 { margin-left: clamp(96px, 20vw, 288px) !important; }

/* Dark variant text colors (no :has() — fall back to a marker class on the row list) */
.v3-ai .ai-list--slope .ai-row .num { color: var(--brand-peak); }
.v3-ai .ai-list--slope .ai-row h4  { color: #fff; }
.v3-ai .ai-list--slope .ai-row p   { color: rgba(255,255,255,0.72); }

/* Owned ad server + SSP extension — base of the iceberg, full-width row =====
   Grid layout becomes 2 cols × 2 rows: brandmark + slope list on row 1,
   stack spans both columns on row 2. */
.v3-ai .ai-grid--brandmark {
  grid-template-columns: clamp(220px, 22vw, 280px) 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  row-gap: 36px;
  column-gap: 32px;
}
.v3-ai .ai-grid--brandmark > .ai-brandmark { grid-column: 1; grid-row: 1; }
.v3-ai .ai-grid--brandmark > .ai-list--slope { grid-column: 2; grid-row: 1; }
.v3-ai .ai-grid--brandmark > .v3-ai-stack {
  grid-column: 1 / -1; grid-row: 2;
  text-align: left;
}
.v3-ai .ai-grid--brandmark > .ai-brandmark {
  align-self: start;
  width: 100%;
  height: auto;
}
.v3-ai .ai-grid--brandmark > .ai-brandmark svg {
  width: 100%;
  height: auto;
  transform: none;
}
.v3-ai .ai-stack-statement {
  text-align: left;
  margin: 0 0 22px;
  max-width: 80ch;
}
.v3-ai .ai-stack-eyebrow { margin: 0 0 10px; }
.v3-ai .ai-stack-headline {
  font-size: 20px; line-height: 1.45; font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.v3-ai .ai-stack-headline .ai-stack-strong {
  color: #fff; font-weight: 500;
}
.v3-ai .ai-stack-body {
  margin-top: 12px;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  max-width: 80ch;
}
.v3-ai .ai-stack-ssps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.v3-ai .ssp-caption {
  margin: 0;
  color: var(--accent);
  text-align: left;
  flex-shrink: 0;
}
.v3-ai .ssp-logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: 28px;
  flex: 1 1 auto;
}
.v3-ai .ssp-logos li { display: inline-flex; }
.v3-ai .ssp-mark {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  transition: color 200ms ease;
}
.v3-ai .ssp-logos li:hover .ssp-mark { color: rgba(255,255,255,0.95); }

@media (max-width: 900px) {
  .v3-ai .ai-stack-ssps { flex-direction: column; align-items: flex-start; gap: 14px; }
  .v3-ai .ssp-logos { flex-wrap: wrap; gap: 10px 18px; }
}
@media (max-width: 700px) {
  .v3-ai .ai-grid--brandmark { row-gap: 28px; }
  .v3-ai .ai-stack-headline { font-size: 17px; }
}

/* Process / Networks (grid of 4 cards) ============================ */
.v3-process { background: var(--bg-2); }
.v3-process-grid, .v3-networks-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.v3-process-grid .step,
.v3-networks-grid .block {
  padding: 32px 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.v3-process-grid .step:last-child,
.v3-networks-grid .block:last-child { border-right: none; }
.v3-process-grid .step .num,
.v3-networks-grid .block .num {
  font-size: 44px; color: var(--accent-ink); opacity: 0.7;
}
.v3-process-grid .step h4,
.v3-networks-grid .block h4 {
  margin: 24px 0 12px; font-size: 18px; font-weight: 500; line-height: 1.2;
}
.v3-process-grid .step p,
.v3-networks-grid .block p { margin: 0; font-size: 14px; }
.v3-process-grid .step .step-tag {
  margin-top: 20px; font-size: 9px; color: var(--accent);
}
.v3-process .compliance-row {
  margin-top: 48px;
  display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  align-items: center;
}
.v3-process .compliance-row .item { display: flex; gap: 12px; align-items: center; }
.v3-process .compliance-row .item .t { font-size: 13px; font-weight: 500; }
.v3-process .compliance-row .item .d { font-size: 9px; margin-top: 2px; }

/* Networks ======================================================== */
.v3-networks { background: var(--bg-2); }
.v3-networks-grid .block { min-height: 280px; }

/* Case Study ====================================================== */
.v3-case .case-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: stretch;
}
.v3-case .case-grid .body p { margin: 0; max-width: 60ch; }
.v3-case .case-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.v3-case .case-stats .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.v3-case .case-stats .stat:first-child { padding-left: 0; border-left: none; }
.v3-case .case-stats .v {
  font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--ink); letter-spacing: -0.025em;
}
.v3-case .case-stats .l { margin-top: 10px; }
.v3-case .case-img {
  border-radius: 4px; overflow: hidden; min-height: 320px;
}
.v3-case .case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Related ========================================================= */
.v3-related { background: var(--bg-2); }
.v3-related .related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.v3-related .card {
  display: block; padding: 32px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--ink); text-decoration: none;
  min-height: 240px;
}
.v3-related .card .num { font-size: 32px; color: var(--accent-ink); opacity: 0.6; }
.v3-related .card h3 {
  margin: 20px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.v3-related .card p { margin: 0; font-size: 14px; }
.v3-related .card .more { display: inline-block; margin-top: 20px; color: var(--accent-ink); }

/* CTA ============================================================= */
.v3-cta {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.v3-cta .cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.4;
}
.v3-cta .cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,16,26,0.7) 0%, rgba(4,16,26,0.9) 100%);
}
.v3-cta .cta-content {
  position: relative; z-index: 2; text-align: center; padding: 60px 32px;
}
.v3-cta .cta-content .eyebrow { justify-content: center; }
.v3-cta .cta-content h2 { margin: 32px auto 0; max-width: 14ch; color: #fff; }
.v3-cta .cta-content h2 em { color: var(--accent); font-style: italic; font-weight: 300; }
.v3-cta .cta-content p {
  max-width: 60ch; margin: 36px auto 0; color: rgba(255,255,255,0.85);
}
.v3-cta .cta-actions {
  margin-top: 40px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* Site footer (replaces React FooterV3) =========================== */
#site-footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 32px;
}
#site-footer .footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 48px;
}
#site-footer .footer-brand a {
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
#site-footer .footer-brand .name {
  font-size: 19px; font-weight: 500; letter-spacing: -0.02em;
}
#site-footer .footer-brand .name .accent { color: var(--accent); }
#site-footer .footer-brand p { margin-top: 24px; max-width: 36ch; }
#site-footer .col .heading { display: block; margin-bottom: 16px; }
#site-footer .col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
#site-footer .col ul a { font-size: 13px; color: inherit; }
#site-footer .footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}

/* Legal page (page.php) =========================================== */
.v3-legal-hero {
  background: var(--ink); color: #fff;
  padding: 180px 0 80px;
}
.v3-legal-hero .eyebrow { color: var(--accent); }
.v3-legal-hero h1 {
  margin: 24px 0 0; font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.025em;
  max-width: 24ch; color: #fff;
}
.v3-legal-main { padding: 80px 0 120px; }
.v3-legal-content {
  max-width: 800px; font-size: 16px; line-height: 1.65; color: var(--ink-2);
}
.v3-legal-content h2 {
  font-size: 24px; font-weight: 500; color: var(--ink);
  margin: 48px 0 16px; letter-spacing: -0.01em;
}
.v3-legal-content h3 {
  font-size: 18px; font-weight: 500; color: var(--ink);
  margin: 32px 0 12px;
}
.v3-legal-content p { margin: 0 0 16px; }
.v3-legal-content ul, .v3-legal-content ol { margin: 0 0 16px 20px; padding: 0; }
.v3-legal-content li { margin-bottom: 8px; }
.v3-legal-content a { color: var(--accent-ink); text-decoration: underline; }
.v3-legal-content strong { color: var(--ink); font-weight: 500; }
.v3-legal-content dl {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 24px; row-gap: 8px; max-width: 64ch; margin: 0 0 16px;
}
.v3-legal-content dt { font-weight: 500; color: var(--ink); }
.v3-legal-content dd { margin: 0; color: var(--ink-2); }
.v3-legal-content section { padding: 32px 0; border-top: 1px solid var(--line); }
.v3-legal-content section:first-child { padding-top: 0; border-top: none; }
.v3-legal-content .btn { color: #fff; text-decoration: none; }

/* Mobile breakpoints (from index.html inline media queries) */
@media (max-width: 1024px) {
  .v3-pillars .pillars-grid { grid-template-columns: 1fr; }
  .v3-pillars .pillar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .v3-process-grid, .v3-networks-grid { grid-template-columns: 1fr 1fr; }
  .v3-ai .ai-grid,
  .v3-founder .founder-grid,
  .v3-solutions .panel .grid,
  .v3-related .related-grid,
  .v3-case .case-grid { grid-template-columns: 1fr; gap: 40px; }
  .v3-case .case-stats { gap: 16px; }
  #site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .v3-process .compliance-row { grid-template-columns: 1fr; }
  .v3-inv .inv-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Tablet: same asymmetric, height-driven sizing carries over from desktop */
  .v3-ai .ai-grid--brandmark {
    grid-template-columns: auto 1fr;
    gap: 32px;
  }
  .v3-ai .ai-list--slope .slope-step-1 { margin-left: 24px !important; }
  .v3-ai .ai-list--slope .slope-step-2 { margin-left: 48px !important; }
  .v3-ai .ai-list--slope .slope-step-3 { margin-left: 72px !important; }
  .v3-ai .ai-list--slope .slope-step-4 { margin-left: 96px !important; }
}
@media (max-width: 720px) {
  /* Mobile: stack brandmark above slope, fixed SVG size, no scale */
  .v3-ai .ai-grid--brandmark { grid-template-columns: 1fr; gap: 24px; }
  .v3-ai .ai-brandmark { align-self: auto; }
  .v3-ai .ai-brandmark svg {
    width: 180px; height: auto;
    aspect-ratio: auto;
    transform: none;
    margin: 0 auto;
  }
  .v3-ai .ai-list--slope .ai-row { padding: 12px 12px; }
  .v3-ai .ai-list--slope .slope-step-1 { margin-left: 12px !important; }
  .v3-ai .ai-list--slope .slope-step-2 { margin-left: 24px !important; }
  .v3-ai .ai-list--slope .slope-step-3 { margin-left: 36px !important; }
  .v3-ai .ai-list--slope .slope-step-4 { margin-left: 48px !important; }
}
@media (max-width: 720px) {
  #site-footer .footer-grid,
  .v3-case .case-stats { grid-template-columns: 1fr; }
  .v3-case .case-stats .stat {
    padding-left: 0; border-left: none;
    padding-top: 16px; border-top: 1px solid var(--line);
  }
  .v3-case .case-stats .stat:first-child { padding-top: 0; border-top: none; }
  #site-nav .nav-row { gap: 12px; }

  /* Process and Networks: collapse to single column on mobile (cards too narrow at 2 cols) */
  .v3-process-grid, .v3-networks-grid { grid-template-columns: 1fr; }
  .v3-process-grid .step,
  .v3-networks-grid .block { min-height: auto; border-right: none; }

  /* Founder photo: don't dominate the viewport at 1-column layout */
  .v3-founder .founder-photo { max-width: 220px; }

  /* AI image: center it instead of left-anchored orphan */
  .v3-ai .ai-image { max-width: 200px; margin: 0 auto; }

  /* Legal hero: less top-padding when nav is fixed */
  .v3-legal-hero { padding: 120px 0 60px; }

  /* Stats: keep 4 columns even on mobile, scale numbers down */
  .v3-stats { padding-top: 40px; padding-bottom: 40px; }
  .v3-stats .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .v3-stats .stat { padding: 8px 6px; border-left-color: var(--line); }
  .v3-stats .stat:first-child { border-left: none; }
  .v3-stats .stat .num { font-size: clamp(22px, 8vw, 40px); }
  .v3-stats .stat .label {
    font-size: 10px; line-height: 1.25; margin-top: 6px;
    word-break: break-word; -webkit-hyphens: auto; hyphens: auto;
  }
  .v3-stats .stat .detail { display: none; }

  /* Solutions tabs: pill-style row, no horizontal scroll, equal widths */
  .v3-solutions .tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; overflow: visible; border-bottom: none;
    margin-bottom: 32px; padding: 4px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  }
  .v3-solutions .tab {
    margin: 0; padding: 10px 8px;
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    color: var(--ink-soft); opacity: 1;
    border-radius: 999px;
    text-align: center;
  }
  .v3-solutions .tab.is-active {
    background: var(--ink); color: #fff;
  }
  .v3-solutions .tab.is-active::after { display: none; }
  .v3-solutions .panel .lead h3 { font-size: 32px; }
  .v3-solutions .panel .grid { margin-top: 32px; }
}

@media (max-width: 480px) {
  /* Tighten nav so DE "Kontakt aufnehmen" + lang switch + logo fit at 375px */
  #site-nav .btn { padding: 12px 16px; font-size: 13px; }
  #site-nav .nav-lang { font-size: 10px; }
  #site-nav .nav-tools { gap: 10px; }
}

/* ============================================================
   Cookie Consent — custom CMP, v3 design language
   ============================================================ */
.cc-root[hidden] { display: none; }
.cc-root { font-family: var(--sans); }

/* Banner — bottom-right card, dark navy with ice border */
.cc-banner {
  position: fixed;
  z-index: 9990;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  background: linear-gradient(180deg, #07182a 0%, #04101a 100%);
  color: #eaf6ff;
  border: 1px solid rgba(158, 216, 238, 0.18);
  border-radius: 14px;
  box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: cc-slide-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cc-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cc-banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-peak) 30%, var(--brand-ai) 70%, transparent 100%);
  opacity: 0.7;
}
.cc-banner-inner { padding: 22px 22px 18px; }

.cc-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.cc-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(234, 246, 255, 0.78);
}
.cc-meta {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(158, 216, 238, 0.65);
}
.cc-meta a {
  color: var(--brand-ai);
  border-bottom: 1px solid rgba(245, 200, 75, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.cc-meta a:hover { border-bottom-color: var(--brand-ai); }

.cc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Buttons */
.cc-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.cc-btn:focus-visible {
  outline: 2px solid var(--brand-ai);
  outline-offset: 2px;
}
.cc-btn-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.cc-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cc-btn-ghost {
  border-color: rgba(158, 216, 238, 0.28);
  color: rgba(234, 246, 255, 0.92);
}
.cc-btn-ghost:hover {
  border-color: rgba(158, 216, 238, 0.55);
  background: rgba(158, 216, 238, 0.08);
}
.cc-btn-text {
  color: rgba(234, 246, 255, 0.78);
  padding-left: 8px;
  padding-right: 8px;
}
.cc-btn-text:hover { color: var(--brand-ai); }

/* Modal */
.cc-modal[hidden] { display: none; }
.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 16, 26, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cc-fade-in 0.2s ease both;
}
@keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } }

.cc-modal-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, #07182a 0%, #04101a 100%);
  color: #eaf6ff;
  border: 1px solid rgba(158, 216, 238, 0.18);
  border-radius: 16px;
  padding: 28px 28px 22px;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.7);
  animation: cc-slide-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cc-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(158, 216, 238, 0.18);
  border-radius: 50%;
  color: rgba(234, 246, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.cc-modal-close:hover { color: var(--brand-ai); border-color: rgba(245, 200, 75, 0.5); }

.cc-modal-inner .cc-title { font-size: 18px; margin-bottom: 10px; }
.cc-modal-inner .cc-body { font-size: 13px; margin-bottom: 22px; }

/* Categories */
.cc-cats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.cc-cat {
  border: 1px solid rgba(158, 216, 238, 0.14);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(158, 216, 238, 0.03);
}
.cc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cc-cat-title {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.cc-cat-state {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cc-cat-state--locked { color: rgba(158, 216, 238, 0.55); }
.cc-cat-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(234, 246, 255, 0.7);
}

/* Toggle */
.cc-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: rgba(158, 216, 238, 0.18);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.cc-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cc-toggle input:checked ~ .cc-toggle-track {
  background: var(--accent);
}
.cc-toggle input:checked ~ .cc-toggle-track .cc-toggle-thumb {
  transform: translateX(16px);
  background: var(--ink);
}
.cc-toggle input:focus-visible ~ .cc-toggle-track {
  box-shadow: 0 0 0 2px var(--brand-ai);
}

.cc-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Footer "Manage preferences" link */
.cc-manage-link {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.cc-manage-link:hover { color: var(--accent); }

/* Mobile */
@media (max-width: 560px) {
  .cc-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 12px;
  }
  .cc-banner-inner { padding: 18px 18px 16px; }
  .cc-title { font-size: 14px; }
  .cc-body { font-size: 12.5px; }
  .cc-banner-actions { gap: 6px; }
  .cc-btn { padding: 9px 12px; font-size: 12.5px; flex: 1 1 auto; }
  .cc-btn-text { flex: 0 0 auto; }
  .cc-modal { padding: 12px; }
  .cc-modal-inner { padding: 22px 18px 18px; max-height: calc(100vh - 24px); }
}