/* ============================================================
   VALICENSE V6 — DESIGN TOKENS
   Merges V4 cinematic dark + V5 light/dark system
   ============================================================ */

/* Self-hosted fonts — ersetzt den Google-Fonts-@import.
   Grund: datenschutz.html:118/:154 + faq:912 sagen zu, dass KEINE Drittland-Uebermittlung
   stattfindet. Der dynamische Google-Fonts-Import hat bei jedem Seitenaufruf die Besucher-IP
   an Google LLC (USA) uebertragen - vor jeder Einwilligung. (LG Muenchen I, 20.01.2022,
   Az. 3 O 17493/20). Self-Hosting macht die bestehende Zusage wieder wahr.
   Subsets: latin + latin-ext (DE/EN). Erzeugt 2026-07-19. */

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-italic-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: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-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: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-italic-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: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-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;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* ===== BRAND TOKENS (theme-agnostic) ===== */
:root {
  /* Brand palette */
  --accent-light:    #7BA4D0;
  --accent-mid:      #2E5E99;
  --navy:            #0D2440;
  --silver:          #BFC5CE;
  --base-light:      #E7F0FA;

  /* V4 electric */
  --electric:        #3B82F6;
  --electric-2:      #60A5FA;

  /* Typography */
  --font-sans:   'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --fw-ultra:    900;

  /* Type scale */
  --fs-display: clamp(48px, 7vw, 96px);
  --fs-h2:      clamp(32px, 4.5vw, 60px);
  --fs-h3:      clamp(22px, 2.5vw, 32px);
  --fs-body-l:  clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  /* Line heights */
  --lh-display: 0.96;
  --lh-heading: 1.08;
  --lh-body:    1.6;

  /* Letter spacing */
  --ls-display: -0.044em;
  --ls-heading: -0.028em;
  --ls-eyebrow: 0.13em;

  /* Radii */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Layout */
  --container-max: 1320px;
  --container-x-desktop: 40px;
  --container-x-mobile: 20px;
  --section-y-desktop: 140px;
  --section-y-tablet: 100px;
  --section-y-mobile: 72px;

  /* Z-index */
  --z-story: 1;
  --z-sticky: 100;
  --z-modal: 200;
  --z-cursor: 9999;

  /* Animation */
  --dur-micro:  160ms;
  --dur-base:   280ms;
  --dur-slow:   500ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-luxe:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== DARK MODE (V4 cinematic — default) ===== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary:   #050A0F;
  --bg-alt:       #07101A;
  --bg-tinted:    #080F18;
  --bg-elevated:  #0B1622;
  --bg-surface:   #0D1E30;
  --bg-overlay:   rgba(11, 22, 34, 0.6);

  --text-primary:  #F0F4F8;
  --text-secondary:#B8C8D8;
  --text-muted:    #6A8099;
  --text-inverse:  #050A0F;

  /* Unified caption-blue accent — same #60A5FA across dark + light mode.
     Cascades to nav active states, link hovers, focus borders, etc.
     For dark-navy gradient stops (e.g. .stat-number) use --accent-mid. */
  --accent:        #60A5FA;
  --accent-hover:  #60A5FA;
  --signature:     linear-gradient(135deg, #3B82F6, #60A5FA);

  --border:        rgba(123, 164, 208, 0.10);
  --border-soft:   rgba(123, 164, 208, 0.06);
  --border-strong: rgba(123, 164, 208, 0.24);

  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 40px -12px rgba(0,0,0,0.6);
  --shadow-lg: 0 32px 80px -24px rgba(0,0,0,0.8);

  --cinematic: #050D1A;
  --glow-electric: 0 0 40px rgba(59,130,246,0.45), 0 8px 20px rgba(0,0,0,0.4);

  /* Pricing clouds */
  --cloud-color: rgba(255,255,255,0.06);
}

/* ===== LIGHT MODE (Apple-clean) ===== */
[data-theme="light"] {
  color-scheme: light;

  --bg-primary:   #FFFFFF;
  --bg-alt:       #F5F8FC;
  --bg-tinted:    #EEF3FA;
  --bg-elevated:  #E7F0FA;
  --bg-surface:   #DDE8F5;
  --bg-overlay:   rgba(231, 240, 250, 0.6);

  --text-primary:  #000000;        /* pure black — Apple-style crisp headline contrast */
  --text-secondary:#2E5E99;
  --text-muted:    #5A7A9A;
  --text-inverse:  #FFFFFF;

  /* Same caption-blue accent as dark mode (#60A5FA) for unified identity.
     The deep-navy #2E5E99 lives on as --text-secondary and --accent-mid
     for the few intentional dark-blue elements (e.g. .stat-number gradient). */
  --accent:        #60A5FA;
  --accent-hover:  #3B82F6;
  /* Same signature gradient as dark mode for unified electric blue identity */
  --signature:     linear-gradient(135deg, #3B82F6, #60A5FA);

  --border:        rgba(46, 94, 153, 0.12);
  --border-soft:   rgba(46, 94, 153, 0.06);
  --border-strong: rgba(46, 94, 153, 0.22);

  --shadow-sm: 0 4px 16px -4px rgba(13, 36, 64, 0.10);
  --shadow-md: 0 12px 40px -12px rgba(13, 36, 64, 0.14);
  --shadow-lg: 0 32px 80px -24px rgba(13, 36, 64, 0.18);

  --cinematic: #F0F5FB;
  --glow-electric: 0 0 30px rgba(46,94,153,0.25), 0 4px 12px rgba(13,36,64,0.1);

  --cloud-color: rgba(255,255,255,0.9);
}

/* ===== GLOBAL BASE ===== */
html[data-theme] body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  background: var(--bg-primary);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  letter-spacing: -0.011em;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--electric);
  color: #fff;
}

/* ===== UTILITY CLASSES ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-x-desktop);
}
@media (max-width: 640px) {
  .container { padding: 0 var(--container-x-mobile); }
}

.section {
  padding: var(--section-y-desktop) 0;
  position: relative;
}
@media (max-width: 1024px) { .section { padding: var(--section-y-tablet) 0; } }
@media (max-width: 720px)  { .section { padding: var(--section-y-mobile) 0; } }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--electric-2);
  font-weight: var(--fw-semibold);
  margin-bottom: 20px;
}
/* Light mode uses the SAME bright electric blue as dark mode for highlights */
.section-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  margin-bottom: 20px;
  max-width: 900px;
}

/* Accent spans — unified bright electric blue (matches buttons & hero) */
.section-title .it {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  background: none;
  color: var(--electric-2);
  -webkit-text-fill-color: var(--electric-2);
}
/* Light mode .it spans use the same electric-2 as dark mode (no override needed) */

.section-lead {
  font-size: var(--fs-body-l);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 680px;
  margin-bottom: 64px;
}

.section-header.center {
  text-align: center;
}
.section-header.center .section-title,
.section-header.center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }