@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/pjs-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/pjs-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/pjs-800.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}


/* ===== Bridge + Light (campaign · B) ===== */
:root, html[data-theme="light"] {
  --fx-bridge-indigo: #4F46E5;
  --fx-bg: #FAFBFF;
  --fx-surface: #FFFFFF;
  --fx-surface-elevated: #FFFFFF;
  --fx-ink: #12141A;
  --fx-ink-muted: #5C6478;
  --fx-accent: #FF5A36;
  --fx-accent-text: #FFFFFF;
  --fx-accent-soft: #FFE8E1;
  --fx-accent-2: #4F46E5;
  --fx-grad-a: #6366F1;
  --fx-grad-b: #FB7185;
  --fx-border: #E4E7F1;
  --fx-glow: rgba(99,102,241,.12);
  --fx-grid: rgba(18,20,26,.035);
  --fx-panel-secondary: #F0FDFA;
  --fx-ok: #059669;
  --fx-warn: #D97706;
  --fx-info: #4F46E5;
  --fx-chrome: #F4F6FB;
  --fx-shadow-card: 0 4px 24px rgba(79,70,229,.08);
  --fx-shadow-frame: 0 24px 64px rgba(18,20,26,.14);
  --fx-btn-shadow: 0 8px 20px rgba(255,90,54,.28);
  --fx-hero-energy: 1; /* used conceptually via classes */
}
/* ===== Dark (ops · D) ===== */
html[data-theme="dark"] {
  --fx-bg: #070B10;
  --fx-surface: #0E151C;
  --fx-surface-elevated: #141C26;
  --fx-ink: #E7EEF4;
  --fx-ink-muted: #8B98A5;
  --fx-accent: #2DD4BF;
  --fx-accent-text: #042F2E;
  --fx-accent-soft: rgba(45,212,191,.14);
  --fx-accent-2: #60A5FA;
  --fx-grad-a: #334155;
  --fx-grad-b: #1E293B;
  --fx-border: #1E2A36;
  --fx-glow: rgba(45,212,191,.14);
  --fx-grid: rgba(231,238,244,.045);
  --fx-panel-secondary: #0C1F1C;
  --fx-ok: #34D399;
  --fx-warn: #FBBF24;
  --fx-info: #60A5FA;
  --fx-chrome: #0A1118;
  --fx-shadow-card: 0 4px 28px rgba(0,0,0,.35);
  --fx-shadow-frame: 0 20px 50px rgba(0,0,0,.45);
  --fx-btn-shadow: 0 0 24px rgba(45,212,191,.2);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --fx-bg: #070B10;
    --fx-surface: #0E151C;
    --fx-surface-elevated: #141C26;
    --fx-ink: #E7EEF4;
    --fx-ink-muted: #8B98A5;
    --fx-accent: #2DD4BF;
    --fx-accent-text: #042F2E;
    --fx-accent-soft: rgba(45,212,191,.14);
    --fx-accent-2: #60A5FA;
    --fx-grad-a: #334155;
    --fx-grad-b: #1E293B;
    --fx-border: #1E2A36;
    --fx-glow: rgba(45,212,191,.14);
    --fx-grid: rgba(231,238,244,.045);
    --fx-panel-secondary: #0C1F1C;
    --fx-ok: #34D399;
    --fx-warn: #FBBF24;
    --fx-info: #60A5FA;
    --fx-chrome: #0A1118;
    --fx-shadow-card: 0 4px 28px rgba(0,0,0,.35);
    --fx-shadow-frame: 0 20px 50px rgba(0,0,0,.45);
    --fx-btn-shadow: 0 0 24px rgba(45,212,191,.2);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  background:var(--fx-bg);color:var(--fx-ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--fx-bridge-indigo,#4F46E5);outline-offset:2px}

/* Nav — shared anatomy */
.nav{
  position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--fx-bg) 82%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--fx-border);
}
.nav-inner{display:flex;align-items:center;gap:24px;width:100%;max-width:1120px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.03em}
.wm{display:inline-flex;align-items:baseline}
.wm-bold{font-weight:800;letter-spacing:-.035em}
.wm-ats{font-weight:600;letter-spacing:.02em;color:var(--fx-ink-muted);margin-left:0}
.brand svg{color:var(--fx-accent-2);flex-shrink:0}
html[data-theme="dark"] .brand svg{color:var(--fx-accent)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .brand svg{color:var(--fx-accent)}
}
.brand .mono-b{fill:#FFFFFF}
html[data-theme="dark"] .brand .mono-b{fill:#070B10}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .brand .mono-b{fill:#070B10}
}
.nav-links{display:flex;gap:20px;flex:1}
.nav-links > a{font-size:14px;font-weight:600;color:var(--fx-ink-muted)}
.nav-links > a:hover{color:var(--fx-ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-seg{
  display:inline-flex;border:1px solid var(--fx-border);border-radius:999px;
  overflow:hidden;background:var(--fx-surface);padding:3px;
}
.theme-seg button{
  appearance:none;border:0;background:transparent;color:var(--fx-ink-muted);
  font:inherit;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;cursor:pointer;
}
.theme-seg button[aria-pressed="true"]{
  background:var(--fx-accent-soft);color:var(--fx-accent);
}
html[data-theme="dark"] .theme-seg button[aria-pressed="true"]{color:var(--fx-accent)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;font-size:14px;font-weight:700;padding:12px 20px;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--fx-accent);color:var(--fx-accent-text);box-shadow:var(--fx-btn-shadow)}
.btn-secondary{background:var(--fx-surface);border-color:var(--fx-border);color:var(--fx-ink)}
.btn-sm{padding:10px 16px;font-size:13px}

/* Hero — same skeleton; mode effects differ */
.hero{position:relative;padding:52px 0 24px;overflow:hidden}
/* Light: coral/indigo blobs */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:72%;
  background:
    radial-gradient(ellipse 50% 60% at 18% 40%, color-mix(in srgb,var(--fx-grad-a) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 55% at 88% 18%, color-mix(in srgb,var(--fx-grad-b) 30%, transparent), transparent 70%);
  pointer-events:none;z-index:0;
}
/* Dark: grid + teal glow override */
html[data-theme="dark"] .hero::before{
  inset:0;height:auto;
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
html[data-theme="dark"] .hero::after{
  content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, var(--fx-glow), transparent 70%);
  top:-80px;right:6%;pointer-events:none;filter:blur(12px);z-index:0;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .hero::before{
    inset:0;height:auto;
    background-image:
      linear-gradient(var(--fx-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  }
  html:not([data-theme="light"]) .hero::after{
    content:"";position:absolute;width:480px;height:480px;border-radius:50%;
    background:radial-gradient(circle, var(--fx-glow), transparent 70%);
    top:-80px;right:6%;pointer-events:none;filter:blur(12px);z-index:0;
  }
}
.hero .wrap{position:relative;z-index:1}
.hero-top{text-align:center;max-width:780px;margin:0 auto 36px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--fx-surface);border:1px solid var(--fx-border);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;
  color:var(--fx-accent-2);margin-bottom:18px;box-shadow:var(--fx-shadow-card);
}
html[data-theme="dark"] .pill{
  color:var(--fx-accent);
  border-color:color-mix(in srgb,var(--fx-accent) 35%,var(--fx-border));
  background:color-mix(in srgb,var(--fx-accent) 8%,var(--fx-surface));
  border-radius:8px;font-family:"JetBrains Mono",monospace;font-weight:500;letter-spacing:.02em;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .pill{
    color:var(--fx-accent);
    border-color:color-mix(in srgb,var(--fx-accent) 35%,var(--fx-border));
    background:color-mix(in srgb,var(--fx-accent) 8%,var(--fx-surface));
    border-radius:8px;font-family:"JetBrains Mono",monospace;font-weight:500;letter-spacing:.02em;
  }
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--fx-accent);display:inline-block;box-shadow:0 0 8px var(--fx-accent)}
.hero h1{font-size:44px;line-height:1.12;letter-spacing:-.035em;font-weight:800;margin:0 0 16px}
html[data-theme="dark"] .hero h1{font-weight:700;letter-spacing:-.03em}
.hero .sub{color:var(--fx-ink-muted);font-size:17px;margin:0 auto 28px;max-width:54ch}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}

/* Product frame — shared anatomy; kanban + secundaire ops-strip */
.product-frame{
  background:var(--fx-surface);border-radius:20px;
  box-shadow:var(--fx-shadow-frame);border:1px solid var(--fx-border);
  overflow:hidden;max-width:980px;margin:0 auto;
}
html[data-theme="dark"] .product-frame{
  box-shadow:var(--fx-shadow-frame), 0 0 0 1px color-mix(in srgb,var(--fx-accent) 12%,transparent);
}
.pf-chrome{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--fx-border);background:var(--fx-chrome);
}
.pf-dots{display:flex;gap:6px}
.pf-dots span{width:10px;height:10px;border-radius:50%;background:var(--fx-border)}
.pf-tabs{display:flex;gap:6px;margin-left:8px;flex:1}
.pf-tabs span{
  font-size:12px;font-weight:600;color:var(--fx-ink-muted);
  padding:5px 10px;border-radius:8px;
}
.pf-tabs span.on{background:var(--fx-accent-soft);color:var(--fx-accent)}
.pf-live{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fx-accent-text);background:var(--fx-accent);padding:3px 8px;border-radius:6px;
}
.pf-kanban{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fx-grad-a) 6%,var(--fx-bg)),var(--fx-bg));
}
html[data-theme="dark"] .pf-kanban{
  background:var(--fx-bg);
}
.pf-kanban .col{
  background:color-mix(in srgb,var(--fx-surface) 90%,transparent);
  border:1px solid var(--fx-border);border-radius:16px;padding:12px;min-height:200px;
}
.pf-kanban h4{
  margin:0 0 12px;font-size:12px;font-weight:700;color:var(--fx-ink-muted);
  display:flex;justify-content:space-between;align-items:center;
}
.pf-kanban h4 em{
  font-style:normal;background:var(--fx-border);color:var(--fx-ink);
  padding:2px 7px;border-radius:999px;font-size:11px;
}
.card-k{
  background:var(--fx-surface);border:1px solid var(--fx-border);
  border-radius:12px;padding:12px;margin-bottom:10px;
  box-shadow:var(--fx-shadow-card);position:relative;
}
.card-k.accent{
  border-color:color-mix(in srgb,var(--fx-accent) 40%,var(--fx-border));
  background:color-mix(in srgb,var(--fx-accent-soft) 55%,var(--fx-surface));
}
.card-k.done{background:color-mix(in srgb,var(--fx-accent-2) 8%,var(--fx-surface))}
.card-k strong{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.card-k span{font-size:11px;color:var(--fx-ink-muted)}
.card-k .av{
  position:absolute;right:10px;bottom:10px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--fx-grad-a),var(--fx-grad-b));
  color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .card-k .av{
  background:color-mix(in srgb,var(--fx-accent) 35%,var(--fx-surface));
  color:var(--fx-accent);
}
.card-k .dot-status{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:middle;
}
.dot-g{background:var(--fx-ok)}.dot-y{background:var(--fx-warn)}.dot-b{background:var(--fx-info)}

/* Secundaire ops-strip onder kanban — D-energie, altijd aanwezig */
.pf-ops{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;
  background:var(--fx-border);border-top:1px solid var(--fx-border);
}
.pf-ops .panel{background:var(--fx-surface);padding:14px 16px;min-height:110px}
.pf-ops .panel.ai{background:var(--fx-panel-secondary)}
.pf-ops header{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fx-ink-muted);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.pf-ops header .sec{
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fx-accent);border:1px solid color-mix(in srgb,var(--fx-accent) 40%,transparent);
  padding:1px 6px;border-radius:4px;
}
.auto-list{list-style:none;margin:0;padding:0;font-size:12px}
.auto-list li{
  display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--fx-border);
}
.auto-list li:last-child{border-bottom:0}
.auto-list .ok{color:var(--fx-ok);font-family:"JetBrains Mono",monospace;font-size:10px}
.ai-note{margin:0 0 10px;font-size:12px;color:var(--fx-ink-muted)}
.ai-actions{display:flex;gap:8px}
.ai-actions span{
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;
  border:1px solid var(--fx-border);cursor:default;
}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-grid div{text-align:center;padding:8px 4px;border:1px solid var(--fx-border);border-radius:8px}
.m-grid strong{display:block;font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--fx-accent)}
.m-grid span{font-size:10px;color:var(--fx-ink-muted)}

.logos{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:28px 0;
  color:var(--fx-ink-muted);font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;opacity:.55;
}
.section{padding:72px 0}
.section.alt{background:color-mix(in srgb,var(--fx-accent-2) 4%,var(--fx-bg))}
html[data-theme="dark"] .section.alt{background:color-mix(in srgb,var(--fx-accent) 4%,var(--fx-bg))}
.section h2{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px;text-align:center}
html[data-theme="dark"] .section h2{font-weight:700}
.section .lead{color:var(--fx-ink-muted);text-align:center;max-width:48ch;margin:0 auto 36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--fx-surface);border:1px solid var(--fx-border);
  border-radius:16px;padding:28px;box-shadow:var(--fx-shadow-card);
}
.icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:16px;font-weight:800;
}
.icon.a{background:var(--fx-accent-soft);color:var(--fx-accent)}
.icon.b{background:color-mix(in srgb,var(--fx-accent-2) 14%,transparent);color:var(--fx-accent-2)}
.icon.c{background:#ECFDF5;color:#059669}
html[data-theme="dark"] .icon.c{background:#123028;color:#34D399}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .icon.c{background:#123028;color:#34D399}
}
.card h3{margin:0 0 8px;font-size:17px;font-weight:700}
.card p{margin:0;color:var(--fx-ink-muted);font-size:14px}
.note{font-size:13px;color:var(--fx-ink-muted);text-align:center;margin-top:20px}

.strip{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.strip-copy h2{text-align:left;font-size:28px}
.strip-copy .lead{text-align:left;margin:0 0 20px}
.blob-panel{
  border-radius:16px;padding:28px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--fx-grad-a) 20%,var(--fx-surface)),color-mix(in srgb,var(--fx-grad-b) 18%,var(--fx-surface)));
  border:1px solid var(--fx-border);min-height:220px;
}
html[data-theme="dark"] .blob-panel{
  background:var(--fx-surface-elevated);
  box-shadow:0 0 40px var(--fx-glow);
}
.blob-panel ul{margin:0;padding:0;list-style:none}
.blob-panel li{
  padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--fx-border) 80%,transparent);
  font-size:14px;font-weight:600;display:flex;justify-content:space-between;
}
.blob-panel li:last-child{border-bottom:0}
.blob-panel li span{color:var(--fx-ink-muted);font-weight:500;font-size:13px}

.cta-block{
  text-align:center;background:var(--fx-surface);border:1px solid var(--fx-border);
  border-radius:20px;padding:48px 28px;box-shadow:var(--fx-shadow-card);
}
html[data-theme="dark"] .cta-block{box-shadow:0 0 40px var(--fx-glow)}
.cta-block h2{margin:0 0 8px;text-align:center}
.cta-block p{color:var(--fx-ink-muted);margin:0 0 22px}

.footer{
  padding:40px 0;color:var(--fx-ink-muted);font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--fx-border);
}
.lock-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fx-ink-muted);
  border:1px solid var(--fx-border);border-radius:8px;padding:4px 10px;margin-bottom:12px;
}
@media(max-width:900px){
  .hero h1{font-size:32px}.nav-links{display:none}
  .pf-kanban,.pf-ops,.cards,.strip{grid-template-columns:1fr}
}

/* ===== Fase 4 shared page chrome ===== */
.nav-toggle{display:none;appearance:none;border:1px solid var(--fx-border);background:var(--fx-surface);border-radius:10px;padding:8px 10px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--fx-ink);margin:3px 0}
.page-hero{padding:56px 0 28px;position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:70%;
  background:
    radial-gradient(ellipse 50% 60% at 18% 40%, color-mix(in srgb,var(--fx-grad-a) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 55% at 88% 18%, color-mix(in srgb,var(--fx-grad-b) 24%, transparent), transparent 70%);
  pointer-events:none;z-index:0;
}
html[data-theme="dark"] .page-hero::before{
  inset:0;height:auto;
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 15%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 15%, transparent 70%);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .page-hero::before{
    inset:0;height:auto;
    background-image:
      linear-gradient(var(--fx-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 15%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 15%, transparent 70%);
  }
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-accent-2);margin:0 0 12px}
html[data-theme="dark"] .page-hero .eyebrow{color:var(--fx-accent)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .page-hero .eyebrow{color:var(--fx-accent)}
}
.page-hero h1{font-size:40px;line-height:1.14;letter-spacing:-.035em;font-weight:800;margin:0 0 14px;max-width:22ch}
html[data-theme="dark"] .page-hero h1{font-weight:700}
.page-hero .sub{color:var(--fx-ink-muted);font-size:17px;margin:0 0 24px;max-width:58ch}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--fx-ink-muted);margin-bottom:18px}
.breadcrumb a:hover{color:var(--fx-ink)}
.breadcrumb .sep{opacity:.5}
.prose{max-width:68ch}
.prose h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:36px 0 10px}
html[data-theme="dark"] .prose h2{font-weight:700}
.prose h3{font-size:18px;font-weight:700;margin:24px 0 8px}
.prose p,.prose li{color:var(--fx-ink-muted);font-size:15px}
.prose ul{padding-left:1.2em}
.prose a{color:var(--fx-accent-2);text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .prose a{color:var(--fx-accent)}
.list-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.list-cards a.card{display:block;transition:border-color .15s, transform .15s}
.list-cards a.card:hover{border-color:color-mix(in srgb,var(--fx-accent-2) 40%,var(--fx-border));transform:translateY(-2px)}
.list-cards .card .meta{font-size:12px;font-weight:700;color:var(--fx-accent-2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
html[data-theme="dark"] .list-cards .card .meta{color:var(--fx-accent)}
.form-card{
  background:var(--fx-surface);border:1px solid var(--fx-border);border-radius:16px;
  padding:28px;box-shadow:var(--fx-shadow-card);max-width:520px;
}
.form-card label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
.form-card .field{margin-bottom:16px}
.form-card input,.form-card select,.form-card textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--fx-border);
  background:var(--fx-bg);color:var(--fx-ink);font:inherit;font-size:14px;
}
.form-card textarea{min-height:110px;resize:vertical}
.form-card .hint{font-size:12px;color:var(--fx-ink-muted);margin-top:8px}
.form-alt{margin-top:20px;padding-top:16px;border-top:1px solid var(--fx-border);font-size:14px;color:var(--fx-ink-muted)}
.form-alt a{color:var(--fx-accent-2);font-weight:700;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .form-alt a{color:var(--fx-accent)}
.empty-state{
  text-align:center;padding:48px 24px;border:1px dashed var(--fx-border);border-radius:16px;
  background:var(--fx-surface);color:var(--fx-ink-muted);
}
.empty-state h2{margin:0 0 8px;font-size:22px;color:var(--fx-ink)}
.footer-nav{display:flex;flex-wrap:wrap;gap:16px}
.footer-nav a{color:var(--fx-ink-muted)}
.footer-nav a:hover{color:var(--fx-ink)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px;padding:48px 0 28px;border-top:1px solid var(--fx-border)}
.footer-grid h4{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-ink)}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin:0 0 8px}
.footer-grid a{font-size:14px;color:var(--fx-ink-muted)}
.footer-grid a:hover{color:var(--fx-ink)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0 40px;font-size:13px;color:var(--fx-ink-muted);border-top:1px solid var(--fx-border)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.feature-list{list-style:none;margin:0;padding:0}
.feature-list li{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--fx-border);font-size:14px;
}
.feature-list li:last-child{border-bottom:0}
.feature-list strong{display:block;font-size:15px;margin-bottom:2px;color:var(--fx-ink)}
.feature-list span{color:var(--fx-ink-muted)}
.feature-list .mark{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--fx-accent-soft);color:var(--fx-accent);font-weight:800;font-size:12px;margin-top:2px;
}
.seed-article{
  background:var(--fx-surface);border:1px solid var(--fx-border);border-radius:16px;padding:24px;
  box-shadow:var(--fx-shadow-card);
}
.seed-article time{font-size:12px;font-weight:700;color:var(--fx-ink-muted);text-transform:uppercase;letter-spacing:.04em}
.seed-article h3{margin:8px 0 8px;font-size:20px}
.seed-article p{margin:0;color:var(--fx-ink-muted);font-size:14px}
.nav-links > a[aria-current="page"]{color:var(--fx-ink)}
@media(max-width:900px){
  .page-hero h1{font-size:30px}
  .list-cards,.two-col,.footer-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex;flex-direction:column}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--fx-surface);border-bottom:1px solid var(--fx-border);
    padding:12px 28px 16px;box-shadow:var(--fx-shadow-card);
  }
  .nav-links.open{display:flex}
  .nav-links > a{padding:10px 0;border-bottom:1px solid var(--fx-border)}
  .nav-inner{position:relative}
}



/* ===== UX/i18n: language segment + responsive ===== */
/* Language chips match theme-seg quality */
.lang-seg{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--fx-ink-muted);
}
.lang-seg-label{
  display:none;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fx-ink-muted);
}
.lang-seg-track{
  display:inline-flex;border:1px solid var(--fx-border);border-radius:999px;
  overflow:hidden;background:var(--fx-surface);padding:3px;gap:0;
}
.lang-seg-track a{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--fx-ink-muted);
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:6px 10px;border-radius:999px;cursor:pointer;
  text-decoration:none;min-height:28px;min-width:36px;line-height:1;border-bottom:0 !important;
}
.lang-seg-track a:hover{color:var(--fx-ink);background:transparent}
.lang-seg-track a.is-current,
.lang-seg-track a[aria-current="true"]{
  background:var(--fx-accent-soft);color:var(--fx-accent);
  border-bottom:0 !important;
}
html[data-theme="dark"] .lang-seg-track a.is-current,
html[data-theme="dark"] .lang-seg-track a[aria-current="true"]{color:var(--fx-accent)}
.lang-seg-track a .lang-full{display:none}
.lang-seg-track a .lang-short{display:none}
.lang-seg-track a .lang-flag{
  display:inline-block;font-size:16px;line-height:1;
  font-style:normal;font-weight:400;letter-spacing:0;
}

.nav-desktop-tools{display:flex;align-items:center;gap:12px}
.nav-panel-extras{display:none}
.site-footer{margin-top:0}
.footer-credits{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0;line-height:1.4}
.footer-made{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.footer-made .eu-flag{font-size:15px;line-height:1;font-style:normal}
.footer-nav{align-items:center}
.footer-nav .lang-seg{margin-left:4px}
.footer-nav .lang-seg-label{display:none}
.footer-nav .lang-seg-track a{min-height:28px;min-width:34px;padding:5px 9px}
.footer-nav .lang-seg-track a .lang-flag{font-size:15px}

/* Desktop: panel extras never show */
@media (min-width:901px){
  .nav-panel-extras{display:none !important}
  .nav-toggle{display:none !important}
}

/* Tablet / mobile ≤900px: sticky header = logo + hamburger + Demo only */
@media (max-width:900px){
  .nav{height:auto;min-height:64px}
  .nav-inner{
    display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
    padding:10px 16px;position:relative;
  }
  .brand{flex:1;min-width:0;order:1}
  .nav-toggle{display:inline-flex;flex-direction:column;order:2}
  .nav-right{
    order:3;gap:8px;margin-left:0;
    /* only Demo CTA may remain visible in sticky header */
  }
  /* Hide ALL language + theme from sticky header (desktop-tools copy) */
  .nav-desktop-tools{
    display:none !important;
    visibility:hidden !important;
    position:absolute !important;
    width:0 !important;height:0 !important;overflow:hidden !important;
    pointer-events:none !important;margin:0 !important;padding:0 !important;
  }
  .nav-right > .lang-seg,
  .nav-right > .theme-seg{
    display:none !important;
  }

  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;gap:0;background:var(--fx-surface);
    border-bottom:1px solid var(--fx-border);
    padding:12px 16px 18px;box-shadow:var(--fx-shadow-card);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links > a{
    padding:12px 0;border-bottom:1px solid var(--fx-border);font-size:15px;
  }

  /* Theme + language ONLY inside open hamburger panel */
  .nav-panel-extras{
    display:flex;flex-direction:column;gap:16px;
    padding:16px 0 8px;margin-top:8px;
    border-top:1px solid var(--fx-border);
    width:100%;
  }
  .nav-panel-extras .lang-seg{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:8px;white-space:normal;
  }
  .nav-panel-extras .lang-seg-label{
    display:block;margin:0;
  }
  .nav-panel-extras .lang-seg-track{
    display:flex;width:100%;box-sizing:border-box;
  }
  .nav-panel-extras .lang-seg-track a{
    flex:1 1 0;min-height:44px;padding:10px 8px;font-size:13px;
  }
  .nav-panel-extras .lang-seg-track a .lang-short,
  .nav-panel-extras .lang-seg-track a .lang-full{display:none !important}
  .nav-panel-extras .lang-seg-track a .lang-flag{
    display:inline-block !important;font-size:20px;line-height:1;
  }

  .nav-panel-extras .theme-seg{
    display:flex;width:100%;align-self:stretch;box-sizing:border-box;
  }
  .nav-panel-extras .theme-seg button{
    flex:1 1 0;min-height:44px;padding:10px 8px;font-size:13px;
  }

  .wrap{padding:0 16px}
  .hero{padding:36px 0 16px;overflow-x:hidden}
  .hero h1,.page-hero h1{font-size:28px;max-width:none}
  .hero .sub,.page-hero .sub{font-size:15px}
  .product-frame{border-radius:14px;margin:0 -4px;max-width:100%}
  .pf-kanban{
    grid-template-columns:1fr 1fr !important;
    gap:8px;padding:10px;overflow-x:auto;
  }
  .pf-ops{grid-template-columns:1fr !important}
  .pf-tabs{overflow-x:auto;flex-wrap:nowrap}
  .cards,.list-cards,.two-col,.footer-grid,.strip{grid-template-columns:1fr !important}
  .form-card{max-width:100%;padding:20px 16px}
  .cta-block{padding:32px 18px}
  .section{padding:48px 0}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-nav{width:100%;gap:12px}
  .footer-nav .lang-seg{margin-left:0;margin-top:4px}
}

/* Narrow phones 375–430 */
@media (max-width:430px){
  .nav-inner{padding:10px 12px;gap:8px}
  .btn-sm{padding:9px 12px;font-size:12px}
  .pf-kanban{grid-template-columns:1fr !important}
  .pf-chrome{padding:10px 12px;gap:8px}
  .hero h1,.page-hero h1{font-size:26px;letter-spacing:-.03em}
  .m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logos{gap:14px;padding:20px 0;font-size:11px}
  .nav-panel-extras .lang-seg-track a{font-size:12px;padding:10px 4px}
  .nav-panel-extras .theme-seg button{font-size:12px;padding:10px 4px}
}

/* Overflow guards */
.product-frame,.pf-kanban,.form-card,.card,.cta-block{max-width:100%}
img,svg{max-width:100%;height:auto}
body{overflow-x:hidden}
.hero-cta .btn,.page-hero .hero-cta .btn{max-width:100%}

/* ===== Safari mobile hard-fix (t2154/t2155) ===== */
@media (max-width:900px){
  header.nav .nav-desktop-tools,
  header.nav .nav-right .lang-seg,
  header.nav .nav-right .theme-seg{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    width:0 !important;height:0 !important;overflow:hidden !important;
    position:absolute !important;left:-9999px !important;
  }
  /* Never let .nav-links a strip language chip chrome */
  .nav-links .lang-seg-track a,
  .nav-panel-extras .lang-seg-track a{
    display:inline-flex !important;
    text-decoration:none !important;
    border-bottom:0 !important;
    padding:10px 8px !important;
    min-height:44px !important;
    border-radius:999px !important;
  }
  .nav-panel-extras .lang-seg-label{display:block !important;margin-bottom:4px}
  .nav-panel-extras .lang-seg-track{display:flex !important;width:100% !important}
  .nav-panel-extras .lang-seg-track a .lang-short,
  .nav-panel-extras .lang-seg-track a .lang-full{display:none !important}
  .nav-panel-extras .lang-seg-track a .lang-flag,
  .nav-desktop-tools .lang-seg-track a .lang-flag{
    display:inline-block !important;font-size:20px;line-height:1;
  }
  .nav-desktop-tools .lang-seg-track a .lang-flag{font-size:16px}
}