/* ============================================================
   Internovas Ltd — global stylesheet (light SaaS theme)
   Palette: white base, royal-blue primary, green for money,
   deep-navy footer. Class names kept from v1 for page reuse
   (.btn-gold = primary button, --gold aliases the primary).
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f7fc;
  --ink: #0e1b33;
  --text: #1c2a44;
  --text-dim: #57647c;
  --line: #e5eaf3;
  --primary: #2b59ff;
  --primary-dark: #1d41c9;
  --primary-soft: #ecf1ff;
  --money: #0ea06d;
  --money-soft: #e7f7f0;
  --navy: #0c1630;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(14, 27, 51, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 27, 51, 0.14);
  --maxw: 1160px;
  --font-head: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  /* v1 aliases still referenced by inline styles */
  --gold: var(--primary);
  --gold-2: var(--primary);
  --silver: #57647c;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.22; color: var(--ink); overflow-wrap: break-word; }
/* long German compound words hyphenate cleanly instead of overflowing */
.hero h1, .page-hero h1 { hyphens: auto; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Header row spans the full width so the multilingual nav has room; JS decides
   per language whether the horizontal nav fits (see .nav-ok below). */
.site-header .container { max-width: none; padding: 0 28px; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
.brand img { width: 40px; height: 40px; }
.brand-name {
  font-family: var(--font-head); font-size: 1.22rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.brand-name span { color: var(--primary); }

/* Nav links are collapsed into the hamburger dropdown by DEFAULT. JS measures
   the row and adds .nav-ok to the header only when the inline horizontal nav
   actually fits, so no language ever overflows and the switcher never crams. */
.nav-links {
  display: none; position: absolute; top: 72px; left: 0; right: 0;
  flex-direction: column; align-items: flex-start; gap: 18px; list-style: none;
  background: #ffffff; padding: 22px 28px; border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.nav-links.open { display: flex; }
.nav-links a {
  color: var(--text-dim); font-size: 0.95rem; font-weight: 500;
  transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

.site-header.nav-ok .nav-links,
.site-header.measuring .nav-links {
  display: flex; position: static; flex-direction: row; align-items: center;
  gap: 15px; background: none; padding: 0; border: 0; box-shadow: none;
}
.site-header.nav-ok .nav-links a,
.site-header.measuring .nav-links a { font-size: 0.88rem; }
.site-header.measuring .nav-links { visibility: hidden; }
.site-header.nav-ok .nav-toggle,
.site-header.measuring .nav-toggle { display: none; }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ---------- Language switcher ---------- */
.lang-switch { position: relative; flex-shrink: 0; }
.flag {
  width: 21px; height: 15px; border-radius: 3px; display: block; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid #cfd9ec; border-radius: 10px;
  padding: 8px 11px; font-family: var(--font-head); font-size: 0.85rem;
  font-weight: 600; color: var(--ink); cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.lang-btn:hover { border-color: var(--primary); color: var(--primary); }
.lang-btn .chev { width: 13px; height: 13px; stroke: currentColor; fill: none; transition: transform 0.2s; }
.lang-switch.open .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 190px; max-width: calc(100vw - 32px); background: #ffffff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; list-style: none; display: none;
}
.lang-switch.open .lang-menu { display: block; }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  padding: 9px 12px; border-radius: 8px; font-size: 0.92rem; font-weight: 500;
  color: var(--text); white-space: nowrap;
}
.lang-menu a:hover { background: var(--primary-soft); color: var(--primary); }
.lang-menu a.active { color: var(--primary); font-weight: 600; }

.btn {
  display: inline-block; padding: 12px 26px; border-radius: 12px;
  font-family: var(--font-head); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.02em; transition: all 0.22s; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, #3b6bff, #2246e0);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(43, 89, 255, 0.28);
}
.btn-gold:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.btn-ghost {
  border-color: #cfd9ec; color: var(--ink);
  background: #ffffff;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-lg { padding: 15px 34px; font-size: 1rem; border-radius: 14px; }

.nav-toggle {
  display: block; background: none; border: none; color: var(--ink);
  font-size: 1.7rem; cursor: pointer; line-height: 1;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 84px 0 96px;
  background:
    radial-gradient(700px 420px at 90% -10%, rgba(43, 89, 255, 0.10), transparent 65%),
    radial-gradient(600px 380px at -10% 110%, rgba(14, 160, 109, 0.08), transparent 60%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-block; font-size: 0.76rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--primary); font-weight: 700;
  border: 1px solid #d6e0ff; border-radius: 999px; padding: 7px 16px;
  margin-bottom: 24px; background: #ffffff;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #2b59ff, #7a3bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
  font-size: 1.12rem; color: var(--text-dim); max-width: 560px; margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

.fact-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; font-size: 0.85rem; font-weight: 500; color: var(--text);
  box-shadow: 0 3px 10px rgba(14, 27, 51, 0.05);
}
.chip strong { color: var(--money); font-weight: 700; }

/* ---------- Dashboard mockup ---------- */
.dash-wrap { position: relative; }
.dash {
  background: #ffffff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dash-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcff;
}
.dash-dots { display: flex; gap: 6px; }
.dash-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dash-dots i:nth-child(1) { background: #ff5f57; }
.dash-dots i:nth-child(2) { background: #febc2e; }
.dash-dots i:nth-child(3) { background: #28c840; }
.dash-url {
  flex: 1; text-align: center; font-size: 0.72rem; color: var(--text-dim);
  background: #eef2f9; border-radius: 8px; padding: 5px 12px; max-width: 300px;
  margin: 0 auto;
}
.dash-body { display: grid; grid-template-columns: 128px 1fr; }
.dash-side {
  border-right: 1px solid var(--line); background: #fbfcff; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.dash-side .ds-item {
  font-size: 0.72rem; font-weight: 600; color: var(--text-dim);
  padding: 7px 10px; border-radius: 8px; display: flex; align-items: center; gap: 7px;
}
.dash-side .ds-item.on { background: var(--primary-soft); color: var(--primary); }
.dash-side .ds-item svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.dash-main { padding: 16px; display: grid; gap: 14px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff;
}
.kpi .k-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; }
.kpi .k-value { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-top: 2px; }
.kpi .k-delta { font-size: 0.68rem; font-weight: 700; color: var(--money); }
.kpi .k-delta.blue { color: var(--primary); }
.dash-chart {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 6px; background: #fff;
}
.dash-chart .c-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dash-chart .c-title { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.dash-chart .c-sub { font-size: 0.66rem; color: var(--text-dim); }
.dash-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.dash-rows .dr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-size: 0.74rem; border-top: 1px solid var(--line);
}
.dash-rows .dr:first-child { border-top: 0; background: #fbfcff; font-weight: 700; color: var(--text-dim); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-rows .dr .amt { font-weight: 700; color: var(--ink); }
.badge-paid {
  background: var(--money-soft); color: var(--money); font-size: 0.64rem;
  font-weight: 700; border-radius: 999px; padding: 3px 9px;
}
.dash-note { text-align: right; font-size: 0.68rem; color: #9aa5b8; margin-top: 8px; }

.float-card {
  position: absolute; background: #ffffff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; z-index: 2;
}
.float-card .fc-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--money-soft);
}
.float-card .fc-icon svg { width: 17px; height: 17px; stroke: var(--money); }
.float-card .fc-t { font-size: 0.72rem; color: var(--text-dim); line-height: 1.3; }
.float-card .fc-v { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.fc-1 { top: -20px; right: -14px; }
.fc-2 { bottom: -18px; left: -18px; }

/* ---------- Trust strip ---------- */
.trust-strip { border-block: 1px solid var(--line); background: var(--bg-soft); }
.trust-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px;
  padding: 22px 0; align-items: center;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-size: 0.92rem; font-weight: 500;
}
.trust-item svg { width: 19px; height: 19px; stroke: var(--primary); flex-shrink: 0; }

/* ---------- Sections ---------- */
.section { padding: 92px 0; }
.section.alt { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); font-weight: 700; display: block; margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-bottom: 16px; letter-spacing: -0.01em; }
.section-head p { color: var(--text-dim); font-size: 1.05rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 4px 14px rgba(14, 27, 51, 0.04);
}
.card:hover { border-color: #c9d7ff; transform: translateY(-3px); box-shadow: var(--shadow); }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: var(--primary-soft);
}
.card .icon svg { width: 22px; height: 22px; stroke: var(--primary); }
.card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.card p { color: var(--text-dim); font-size: 0.95rem; }
.card .card-link { display: inline-block; margin-top: 16px; font-size: 0.88rem; font-weight: 600; }

/* ---------- Commission table ---------- */
.tier-table {
  width: 100%; border-collapse: collapse; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow);
}
.tier-table th, .tier-table td {
  padding: 16px 22px; text-align: left; font-size: 0.98rem;
}
.tier-table thead th {
  background: var(--primary-soft); color: var(--primary-dark);
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tier-table tbody tr { border-top: 1px solid var(--line); }
.tier-table tbody tr:hover { background: #fafbff; }
.tier-table .pct { font-family: var(--font-head); font-weight: 700; color: var(--money); font-size: 1.12rem; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  position: relative; padding: 30px 26px 26px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #ffffff; box-shadow: 0 4px 14px rgba(14, 27, 51, 0.04);
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-head); font-size: 2.2rem; font-weight: 700;
  color: #d9e3ff; display: block; margin-bottom: 12px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 0.93rem; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-dim); }
.checklist li svg { width: 20px; height: 20px; stroke: var(--money); flex-shrink: 0; margin-top: 3px; }
.checklist li strong { color: var(--ink); }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
/* let grid/flex children shrink so wide content (code blocks, mockups) scrolls
   inside its own box instead of stretching the page on small screens */
.split > *, .hero-grid > *, .dash-wrap, .code-card { min-width: 0; max-width: 100%; }

/* ---------- Photos ---------- */
.photo {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-stack { position: relative; }
.photo-stack .photo-main { border-radius: 18px; }
.photo-stack .float-card { max-width: 260px; }

.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.person {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 4px 14px rgba(14, 27, 51, 0.04);
  transition: transform 0.25s, box-shadow 0.25s;
}
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.person img { width: 100%; height: 300px; object-fit: cover; object-position: center 30%; }
.person .p-body { padding: 20px 22px; }
.person h3 { font-size: 1.05rem; margin-bottom: 6px; }
.person p { color: var(--text-dim); font-size: 0.9rem; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center; padding: 84px 24px;
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(122, 59, 255, 0.25), transparent 70%),
    linear-gradient(135deg, #1d41c9, #2b59ff);
}
.cta-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 14px; color: #ffffff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0 auto 32px; }
.cta-band .btn-gold { background: #ffffff; color: var(--primary-dark); box-shadow: 0 10px 26px rgba(10, 20, 60, 0.3); }
.cta-band .btn-gold:hover { color: var(--primary-dark); }
.cta-band .btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #ffffff; background: transparent; }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 76px 0 58px;
  background:
    radial-gradient(700px 360px at 85% -30%, rgba(43, 89, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 16px; letter-spacing: -0.015em; }
.page-hero p { color: var(--text-dim); max-width: 640px; font-size: 1.08rem; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 800px; }
.prose h2 { font-size: 1.35rem; margin: 44px 0 14px; color: var(--ink); }
.prose h3 { font-size: 1.08rem; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--text-dim); margin-bottom: 12px; font-size: 0.98rem; }
.prose ul, .prose ol { padding-left: 24px; margin-bottom: 16px; }
.prose strong { color: var(--ink); }
.placeholder {
  color: #b3261e; background: #fdecea;
  padding: 1px 7px; border-radius: 6px; font-family: monospace; font-size: 0.88em;
}

.imprint-table { width: 100%; border-collapse: collapse; max-width: 800px; background: #fff; }
.imprint-table th, .imprint-table td {
  padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line);
  font-size: 0.97rem; vertical-align: top;
}
.imprint-table th { color: var(--ink); font-family: var(--font-head); font-weight: 600; width: 260px; }
.imprint-table td { color: var(--text-dim); }

/* ---------- Contact ---------- */
.contact-card {
  background: #ffffff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px; box-shadow: 0 4px 14px rgba(14, 27, 51, 0.04);
}
.contact-card h3 { margin-bottom: 8px; }
.contact-card p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 18px; }

/* ---------- Forms (join / login) ---------- */
.form-card {
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 34px; box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-row.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card label {
  display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink);
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card select,
.form-card textarea {
  width: 100%; margin-top: 7px; padding: 12px 14px;
  border: 1px solid #cfd9ec; border-radius: 10px;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text);
  background: #fbfcff; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43, 89, 255, 0.14); background: #fff;
}
.form-card textarea { resize: vertical; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.form-consent input { margin-top: 4px; accent-color: var(--primary); }
.form-consent span { font-size: 0.88rem; color: var(--text-dim); }
.form-status { margin-top: 14px; font-size: 0.92rem; min-height: 1.4em; color: var(--text-dim); }
.form-status.ok { color: var(--money); font-weight: 600; }
.form-status.err { color: #b3261e; font-weight: 500; }

/* ---------- Partner stories (bubbles) ---------- */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.story { display: flex; flex-direction: column; }
.bubble {
  position: relative; background: #ffffff; border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 4px 14px rgba(14, 27, 51, 0.05);
  flex: 1;
}
.bubble::after {
  content: ""; position: absolute; left: 34px; bottom: -11px;
  width: 20px; height: 20px; background: #ffffff;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg) skew(8deg, 8deg);
}
.bubble p { color: var(--text-dim); font-size: 0.93rem; }
.bubble .metric {
  display: inline-block; background: var(--money-soft); color: var(--money);
  font-weight: 700; font-size: 0.8rem; border-radius: 999px; padding: 4px 12px;
  margin-bottom: 12px;
}
.story-who { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-left: 12px; }
.story-who img {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 2px solid #ffffff; box-shadow: 0 3px 10px rgba(14, 27, 51, 0.16);
}
.story-who .sw-role { font-weight: 600; color: var(--ink); font-size: 0.9rem; line-height: 1.3; }
.story-who .sw-geo { color: var(--text-dim); font-size: 0.8rem; }
.stories-note { text-align: center; color: #9aa5b8; font-size: 0.78rem; margin-top: 30px; }

/* ---------- Avatar stack ---------- */
.avatar-stack { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.avatar-stack .avatars { display: flex; }
.avatar-stack img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid #ffffff; box-shadow: 0 3px 8px rgba(14, 27, 51, 0.18);
  margin-left: -10px;
}
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack span { font-size: 0.85rem; color: var(--text-dim); }
.avatar-stack strong { color: var(--ink); }

/* ---------- Photo strip ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photo-strip .photo { max-height: 240px; }
.photo-strip .photo img { height: 240px; }

/* ---------- Animations ---------- */
@keyframes floaty { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.float-card { animation: floaty 5.5s ease-in-out infinite alternate; }
.fc-2 { animation-delay: -2.75s; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.line-draw { stroke-dasharray: 620; stroke-dashoffset: 620; animation: drawline 2.2s ease-out 0.5s forwards; }
@keyframes areafade { from { opacity: 0; } to { opacity: 1; } }
.area-fade { opacity: 0; animation: areafade 1.4s ease-out 1.4s forwards; }
@keyframes barfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.b-fill { transform-origin: left center; animation: barfill 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s backwards; }
.photo img, .person img { transition: transform 0.6s ease; }
.photo:hover img, .person:hover img { transform: scale(1.04); }
.photo, .person { overflow: hidden; }
html.js .grid .reveal:nth-child(2), html.js .stories .reveal:nth-child(2), html.js .steps .reveal:nth-child(2) { transition-delay: 0.1s; }
html.js .grid .reveal:nth-child(3), html.js .stories .reveal:nth-child(3), html.js .steps .reveal:nth-child(3) { transition-delay: 0.2s; }
html.js .grid .reveal:nth-child(4) { transition-delay: 0.1s; }
html.js .grid .reveal:nth-child(5) { transition-delay: 0.2s; }
html.js .grid .reveal:nth-child(6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .float-card, .line-draw, .area-fade, .b-fill { animation: none; }
  .line-draw { stroke-dashoffset: 0; }
  .area-fade { opacity: 1; }
}

/* ---------- Developer / code panels ---------- */
.code-card {
  background: #0d1526; border: 1px solid #22304d; border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow-lg); font-size: 0.82rem;
}
.code-card .cc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #101b33; border-bottom: 1px solid #22304d;
  color: #8fa3c8; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.code-card pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.8rem; line-height: 1.7; color: #dbe4f5;
}
.code-card .tk-c { color: #6b7fa8; }   /* comment */
.code-card .tk-k { color: #7fa0ff; }   /* key / verb */
.code-card .tk-s { color: #7ddfb1; }   /* string */
.code-card .tk-n { color: #f0c674; }   /* number */
.beta-pill {
  display: inline-block; background: #fff4e0; color: #9a6b15;
  border: 1px solid #f0dcae; border-radius: 999px; padding: 4px 12px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; vertical-align: middle;
}

/* ---------- Mini stat bars (mockups) ---------- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-row .b-label { width: 46px; font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }
.bar-row .b-track { flex: 1; height: 10px; border-radius: 999px; background: #edf1f9; overflow: hidden; }
.bar-row .b-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b6bff, #7a3bff); }
.bar-row .b-val { width: 52px; text-align: right; font-size: 0.72rem; font-weight: 700; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: #c4cde0;
  padding: 60px 0 34px; font-size: 0.9rem;
}
.site-footer .brand-name { color: #ffffff; }
.site-footer .brand-name span { color: #7fa0ff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-grid h4 {
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #7fa0ff; margin-bottom: 16px;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: #c4cde0; }
.footer-grid a:hover { color: #ffffff; }
.footer-about p { color: #9daac4; margin-top: 14px; max-width: 320px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #9daac4; font-size: 0.84rem;
}
.age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #7fa0ff; color: #ffffff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
}

/* ---------- Reveal animation ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .split, .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .steps, .people-grid, .stories { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .fc-1 { right: 0; }
  .fc-2 { left: 0; }
}
@media (max-width: 680px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .nav-cta .btn-ghost { display: none; }
  .nav { gap: 10px; }
  .nav-cta { gap: 8px; }
  .lang-btn { padding: 8px 9px; }
  .lang-menu { right: 0; }
  .hero { padding: 56px 0 72px; }
  .section { padding: 64px 0; }
  .imprint-table th { width: 40%; }
  .tier-table th, .tier-table td { padding: 13px 12px; font-size: 0.9rem; }
  .tier-table th, .tier-table td, .imprint-table th, .imprint-table td { overflow-wrap: anywhere; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .person img { height: auto; aspect-ratio: 16 / 10; }
  .form-row.cols-2 { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .photo-strip { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  /* keep the logo mark but drop the wordmark so the CTA, language switcher
     and menu button all fit on narrow phones in every language. The switcher
     collapses to just the flag. */
  .brand-name { display: none; }
  .nav-cta .btn-gold { padding: 10px 15px; font-size: 0.82rem; }
  .lang-btn { padding: 8px; gap: 0; }
  .lang-btn .lang-cur, .lang-btn .chev { display: none; }
}