/* ==========================================================================
   Datazonia — company website stylesheet
   Built from the Datazonia Design System tokens (light + emerald, flat,
   hairline borders, no shadows). Fonts are self-hosted — the site makes
   zero external requests.
   ========================================================================== */

/* ---- Self-hosted webfonts (SIL OFL) — Plus Jakarta Sans variable ---- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/PlusJakartaSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/PlusJakartaSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/PlusJakartaSans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design-system tokens ---- */
:root {
  color-scheme: light;

  /* Brand / accent (emerald) */
  --green-600: #1FA268;
  --green-700: #167A4A;
  --green-800: #14563E;
  --green-tint: #E7F5ED;

  /* Ink / text */
  --ink-900: #14241C;
  --ink-600: #5E726A;
  --ink-400: #8A988F;
  --ink-300: #A6B2AB;

  /* Signature dark surfaces */
  --surface-dark: #11201A;
  --surface-dark-alt: #14563E;

  /* Surfaces & canvas */
  --canvas: #F7F5F0;
  --surface-card: #FFFFFF;

  /* Lines */
  --border-row: #EEF2EF;
  --border-card: #E6EBE7;
  --border-section: #D9E2DC;

  /* Signature gradient — open green, settle calm */
  --gradient-signature: linear-gradient(180deg, #DCEDE4 0%, #EBF4EE 55%, #F2F8F4 100%);

  /* Semantic aliases */
  --accent: var(--green-600);
  --accent-strong: var(--green-700);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-label: var(--ink-300);
  --text-on-dark: #F4F8F5;

  /* Type */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num-features: "tnum" 1, "lnum" 1;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* Radius & lines */
  --radius-card: 10px;
  --radius-chip: 8px;
  --radius-pill: 9999px;
  --border-width: 1px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---- Type helpers ---- */
.overline {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
.figure { font-feature-settings: var(--num-features); }

/* ---- Header ---- */
.site-header {
  border-bottom: var(--border-width) solid var(--border-section);
  background: var(--canvas);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4);
  flex-wrap: wrap;
}
.site-header .logo img { height: 26px; display: block; }
.site-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.site-nav a:hover { color: var(--accent-strong); text-decoration: none; }

/* ---- Hero ---- */
.hero { background: var(--gradient-signature); border-bottom: var(--border-width) solid var(--border-section); }
.hero .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface-card); border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: 13px; font-weight: 600; color: var(--accent-strong);
  margin-bottom: var(--space-6);
}
.hero-chip .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--accent); }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 21ch;
}
.hero .lede {
  margin-top: var(--space-6);
  font-size: 18px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}
.hero-actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Buttons ---- */
.btn {
  display: inline-block; border-radius: var(--radius-chip);
  padding: 12px 22px; font-size: 15px; font-weight: 600;
  border: var(--border-width) solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--surface-card); color: var(--accent-strong); border-color: var(--border-section); }
.btn-secondary:hover { border-color: var(--accent); }

/* ---- Sections ---- */
.section { padding: var(--space-24) 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section-head h2 { font-size: 30px; line-height: 1.25; margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-4); color: var(--text-secondary); }

/* ---- Cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-8);
}
.card .icon-chip {
  width: 40px; height: 40px; border-radius: var(--radius-chip);
  background: var(--green-tint); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.card h3 { font-size: 18px; line-height: 1.35; }
.card p { margin-top: var(--space-3); font-size: 15px; color: var(--text-secondary); }

/* ---- Silo map (measurement architecture) ---- */
.silo-map { margin-bottom: var(--space-12); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-card); }
.silo-cap, .silo-base { padding: var(--space-4) var(--space-6); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.silo-cap { background: var(--surface-dark); color: var(--text-on-dark); }
.silo-base { background: var(--green-tint); color: var(--accent-strong); border-top: var(--border-width) solid var(--border-card); }
.silo-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.silo { padding: var(--space-6); border-left: var(--border-width) solid var(--border-row); }
.silo:first-child { border-left: 0; }
.silo-name { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: var(--space-3); }
.lens { font-size: 14.5px; color: var(--text-secondary); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border-row); }
.lens:first-of-type { border-top: 0; }

/* ---- Who it's for ---- */
.fit { background: var(--surface-card); border-top: var(--border-width) solid var(--border-section); border-bottom: var(--border-width) solid var(--border-section); }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.pain { background: var(--canvas); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-8); }
.pain-q { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-primary); }
.pain-a { margin-top: var(--space-4); font-size: 15px; color: var(--text-secondary); }

/* ---- How it works ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.step { background: var(--surface-card); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-8); }
.step-num { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: var(--accent-strong); margin-bottom: var(--space-3); }
.step h3 { font-size: 18px; }
.step p { margin-top: var(--space-3); font-size: 15px; color: var(--text-secondary); }
.pull { margin-top: var(--space-12); background: var(--green-tint); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-8); font-size: 17px; line-height: 1.6; color: var(--ink-900); max-width: 76ch; }

/* ---- Read-only band ---- */
.readonly { background: var(--surface-card); border-top: var(--border-width) solid var(--border-section); border-bottom: var(--border-width) solid var(--border-section); }
.readonly-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.readonly-list li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-6);
  background: var(--canvas); border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-card); font-size: 15px; color: var(--text-secondary);
}
.readonly-list .tick { color: var(--accent-strong); font-weight: 700; flex: none; }
.readonly-list strong { color: var(--text-primary); font-weight: 600; }

/* ---- Security band (signature dark) ---- */
.security { background: var(--surface-dark); color: var(--text-on-dark); }
.security .overline { color: #7FC7A4; }
.security .section-head h2 { color: #FFFFFF; }
.security .section-head p { color: #B9CCC0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat {
  border: 1px solid rgba(244, 248, 245, 0.16);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.stat .value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; font-feature-settings: var(--num-features); }
.stat .label { margin-top: var(--space-2); font-size: 13.5px; line-height: 1.5; color: #B9CCC0; }
.security .after { margin-top: var(--space-8); color: #B9CCC0; font-size: 15px; }
.security a { color: #8FD4B2; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.contact-card h3 { font-size: 16px; }
.contact-card .mail { display: inline-block; margin-top: var(--space-3); font-size: 17px; font-weight: 600; color: var(--accent-strong); }
.contact-card p { margin-top: var(--space-3); font-size: 14.5px; color: var(--text-secondary); }
.nowrap { white-space: nowrap; }
.contact-note { margin-top: var(--space-8); font-size: 14px; color: var(--text-muted); }

/* ---- Footer ---- */
.site-footer { border-top: var(--border-width) solid var(--border-section); padding: var(--space-12) 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.footer-row img { height: 20px; display: block; }
.footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); font-size: 14px; }
.footer-legal { margin-top: var(--space-8); font-size: 13px; line-height: 1.6; color: var(--text-muted); max-width: 76ch; }

/* ---- Document pages (privacy / legal) ---- */
.doc-header { background: var(--gradient-signature); border-bottom: var(--border-width) solid var(--border-section); }
.doc-header .container-narrow { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.doc-header h1 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--space-3); }
.doc-header .meta { margin-top: var(--space-4); font-size: 14px; color: var(--text-secondary); }
.doc-body { padding: var(--space-16) 0 var(--space-24); }
.doc-body h2 { font-size: 21px; margin: var(--space-12) 0 0; }
.doc-body h3 { font-size: 16.5px; margin: var(--space-8) 0 0; }
.doc-body p, .doc-body li { margin-top: var(--space-4); font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.doc-body ul { margin: 0; padding-left: 22px; }
.doc-body strong { color: var(--text-primary); }
.doc-body .callout {
  margin-top: var(--space-8);
  background: var(--green-tint);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.doc-body .callout p { margin-top: 0; color: var(--ink-900); }

/* ---- Definition rows (impressum) ---- */
.def-table { margin-top: var(--space-8); background: var(--surface-card); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; }
.def-row { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border-row); }
.def-row:first-child { border-top: 0; }
.def-row dt { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.def-row dd { margin: 0; font-size: 14.5px; color: var(--text-secondary); }
.pending { color: var(--text-muted); font-style: italic; }

/* ---- 404 ---- */
.notfound { min-height: 60vh; display: flex; align-items: center; }
.notfound .container { text-align: center; }
.notfound img { height: 40px; margin-bottom: var(--space-6); }
.notfound h1 { font-size: 40px; font-weight: 700; }
.notfound p { margin-top: var(--space-4); color: var(--text-secondary); }
.notfound .btn { margin-top: var(--space-8); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .stat-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .pains { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero .container { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .section { padding: var(--space-16) 0; }
  .card-grid, .contact-grid, .steps { grid-template-columns: 1fr; }
  .silo-cols { grid-template-columns: 1fr; }
  .silo { border-left: 0; border-top: var(--border-width) solid var(--border-row); }
  .silo:first-child { border-top: 0; }
  .def-row { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}