/*! OKAYPLAY Design System v1.0 — 2026-03-31
 *  Single source of truth fuer Farben, Typografie, Spacing, Komponenten.
 *  Aendere eine Variable hier → Wirkung auf der gesamten Seite.
 *
 *  Einbindung: ueber den Partial partials.okp-design-system-css (wird direkt in die
 *  Seite geschrieben, die versionierte CSS-Datei liegt unter /css/).
 *  Danach seitenspezifische Overrides als Style-Block.
 */

/* ================================================================
   0. FONT IMPORTS
   ================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES — LIGHT MODE (Default)
   ================================================================ */
:root {
    /* — Backgrounds — */
    --okp-bg:              #fff;
    --okp-bg-hero:         #fff;
    --okp-bg-section-alt:  #fafafa;
    --okp-bg-section-dark: #1a1a1e;
    --okp-surface:         #f7f7f7;

    /* — Text — */
    --okp-text-primary:    #111;
    --okp-text-secondary:  #333;
    --okp-text-muted:      #666;
    --okp-text-faint:      #999;

    /* — Borders & Lines — */
    --okp-border-color:    #e5e5e5;
    --okp-border-width:    1px;
    --okp-line:            #e5e5e5;

    /* — Typography — */
    --okp-font-display:    'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --okp-font-body:       'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --okp-font-mono:       "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

    --okp-font-size-hero:  clamp(36px, 5.5vw, 64px);
    --okp-font-size-h1:    clamp(32px, 5vw, 56px);
    --okp-font-size-h2:    clamp(26px, 3.5vw, 40px);
    --okp-font-size-h3:    clamp(20px, 2.5vw, 28px);
    --okp-font-size-h4:    18px;
    --okp-font-size-h5:    16px;
    --okp-font-size-h6:    14px;
    --okp-font-size-body:  16px;
    --okp-font-size-small: 14px;
    --okp-font-size-xs:    12px;

    /* — Spacing (8px system) — */
    --okp-spacing-xxs:     4px;
    --okp-spacing-xs:      8px;
    --okp-spacing-sm:      16px;
    --okp-spacing-md:      24px;
    --okp-spacing-lg:      32px;
    --okp-spacing-xl:      48px;
    --okp-spacing-2xl:     64px;
    --okp-spacing-3xl:     80px;
    --okp-spacing-4xl:     96px;
    --okp-spacing-5xl:     120px;
    --okp-spacing-6xl:     160px;

    /* — Radii — */
    --okp-radius-sm:       0px;
    --okp-radius-md:       8px;
    --okp-radius-lg:       16px;
    --okp-radius-pill:     999px;

    /* — Shadows — */
    --okp-shadow-sm:       0 2px 8px rgba(0,0,0,0.04);
    --okp-shadow-md:       0 8px 24px rgba(0,0,0,0.08);
    --okp-shadow-lg:       0 20px 60px rgba(0,0,0,0.12);

    /* — Containers — */
    --okp-container-sm:    680px;
    --okp-container-md:    960px;
    --okp-container-lg:    1200px;

    /* — Buttons — */
    --okp-btn-bg:          #000;
    --okp-btn-color:       #fff;
    --okp-btn-radius:      999px;
    --okp-btn-secondary-bg: #fff;
    --okp-btn-secondary-color: #111;
    --okp-btn-secondary-border: #ddd;

    /* — Nav — */
    --okp-nav-height:      72px;
    --okp-nav-bg:          rgba(255,255,255,0.92);
    --okp-nav-blur:        blur(10px);

    /* — Selection — */
    --okp-selection-bg:    rgba(0,0,0,0.08);

    /* — Legacy aliases (so existing page-specific styles keep working) — */
    --bg:      var(--okp-bg);
    --fg:      var(--okp-text-primary);
    --t1:      var(--okp-text-primary);
    --t2:      var(--okp-text-secondary);
    --t3:      var(--okp-text-muted);
    --t4:      var(--okp-text-faint);
    --line:    var(--okp-line);
    --surface: var(--okp-surface);
    --border:  var(--okp-border-color);
}

/* ================================================================
   1b. DARK MODE
   ================================================================ */
html.dark-mode,
body.dark-mode,
[data-theme="dark"] {
    --okp-bg:              #1a1a1e;
    --okp-bg-hero:         #1a1a1e;
    --okp-bg-section-alt:  #242428;
    --okp-bg-section-dark: #111114;
    --okp-surface:         #242428;

    --okp-text-primary:    #f0f0f2;
    --okp-text-secondary:  #d4d4d8;
    --okp-text-muted:      #9a9aa0;
    --okp-text-faint:      #6a6a72;

    --okp-border-color:    #3a3a40;
    --okp-line:            #3a3a40;

    --okp-shadow-sm:       0 2px 8px rgba(0,0,0,0.2);
    --okp-shadow-md:       0 8px 24px rgba(0,0,0,0.3);
    --okp-shadow-lg:       0 20px 60px rgba(0,0,0,0.4);

    --okp-btn-bg:          #f0f0f2;
    --okp-btn-color:       #1a1a1e;
    --okp-btn-secondary-bg: transparent;
    --okp-btn-secondary-color: #d4d4d8;
    --okp-btn-secondary-border: #3a3a40;

    --okp-nav-bg:          rgba(26,26,30,0.92);

    --okp-selection-bg:    rgba(240,240,242,0.2);
}

/* Light-mode class override (localStorage-driven) */
.light-mode {
    --okp-bg:              #fff;
    --okp-bg-hero:         #fff;
    --okp-bg-section-alt:  #fafafa;
    --okp-bg-section-dark: #1a1a1e;
    --okp-surface:         #f7f7f7;

    --okp-text-primary:    #111;
    --okp-text-secondary:  #333;
    --okp-text-muted:      #666;
    --okp-text-faint:      #999;

    --okp-border-color:    #e5e5e5;
    --okp-line:            #e5e5e5;

    --okp-shadow-sm:       0 2px 8px rgba(0,0,0,0.04);
    --okp-shadow-md:       0 8px 24px rgba(0,0,0,0.08);
    --okp-shadow-lg:       0 20px 60px rgba(0,0,0,0.12);

    --okp-btn-bg:          #000;
    --okp-btn-color:       #fff;
    --okp-btn-secondary-bg: #fff;
    --okp-btn-secondary-color: #111;
    --okp-btn-secondary-border: #ddd;

    --okp-nav-bg:          rgba(255,255,255,0.92);

    --okp-selection-bg:    rgba(0,0,0,0.08);
}


/* ================================================================
   2. RESET / NORMALIZE
   ================================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--okp-bg);
}

body {
    font-family: var(--okp-font-body);
    font-size: var(--okp-font-size-body);
    color: var(--okp-text-primary);
    background: var(--okp-bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--okp-selection-bg);
}

a {
    color: inherit;
    text-decoration: none;
}

img, video {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--okp-font-display);
    color: var(--okp-text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 { font-size: var(--okp-font-size-h1); }
h2 { font-size: var(--okp-font-size-h2); margin-bottom: var(--okp-spacing-sm); }
h3 { font-size: var(--okp-font-size-h3); }
h4 { font-size: var(--okp-font-size-h4); }
h5 { font-size: var(--okp-font-size-h5); }
h6 { font-size: var(--okp-font-size-h6); }

p {
    font-size: var(--okp-font-size-body);
    color: var(--okp-text-muted);
    line-height: 1.7;
    margin-bottom: var(--okp-spacing-sm);
}
p:last-child { margin-bottom: 0; }

blockquote {
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--okp-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--okp-spacing-md);
}

cite {
    font-size: var(--okp-font-size-small);
    color: var(--okp-text-faint);
    font-style: normal;
}

code, pre {
    font-family: var(--okp-font-mono);
}

.section-label {
    font-size: var(--okp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--okp-text-faint);
    font-weight: 600;
    margin-bottom: var(--okp-spacing-sm);
}

.section-title {
    font-size: var(--okp-font-size-h2);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: var(--okp-spacing-sm);
    color: var(--okp-text-primary);
}


/* ================================================================
   4. BUTTONS
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--okp-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--okp-btn-bg);
    color: var(--okp-btn-color);
    padding: 16px 36px;
    border-radius: var(--okp-btn-radius);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: var(--okp-font-body);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--okp-shadow-md);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--okp-btn-secondary-bg);
    color: var(--okp-btn-secondary-color);
    padding: 16px 36px;
    border-radius: var(--okp-btn-radius);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border: 1.5px solid var(--okp-btn-secondary-border);
    cursor: pointer;
    font-family: var(--okp-font-body);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.btn-secondary:hover {
    border-color: var(--okp-text-muted);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--okp-text-faint);
    padding: 16px 12px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--okp-font-body);
    transition: color 0.2s;
}
.btn-ghost:hover {
    color: var(--okp-text-primary);
}

.btn-pill {
    border-radius: var(--okp-radius-pill);
}

.btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}


/* ================================================================
   5. SECTIONS
   ================================================================ */
.section {
    padding: var(--okp-spacing-5xl) var(--okp-spacing-xl);
}

.section--hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--okp-spacing-xl);
    position: relative;
    text-align: center;
    background: var(--okp-bg-hero);
}
.section--hero .hero-inner {
    max-width: var(--okp-container-sm);
    margin: 0 auto;
}
.section--hero h1 {
    font-size: var(--okp-font-size-hero);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: var(--okp-spacing-md);
}
.hero-sub {
    font-size: 18px;
    color: var(--okp-text-muted);
    line-height: 1.6;
    margin: 0 auto var(--okp-spacing-xl);
    max-width: 480px;
}
.hero-ctas {
    display: flex;
    gap: var(--okp-spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.section--alt {
    background: var(--okp-bg-section-alt);
}

.section--dark {
    background: var(--okp-bg-section-dark);
    color: #f0f0f2;
}
.section--dark h2,
.section--dark h3 { color: #f0f0f2; }
.section--dark p { color: #d4d4d8; }

.section--bordered {
    border-top: var(--okp-border-width) solid var(--okp-border-color);
}

.section h2 {
    font-size: var(--okp-font-size-h2);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: var(--okp-spacing-sm);
    color: var(--okp-text-primary);
}
.section p {
    font-size: var(--okp-font-size-body);
    line-height: 1.7;
    color: var(--okp-text-muted);
}


/* ================================================================
   6. CONTAINERS
   ================================================================ */
.container {
    max-width: var(--okp-container-md);
    margin: 0 auto;
    padding: 0 var(--okp-spacing-xl);
}
.container--sm {
    max-width: var(--okp-container-sm);
    margin: 0 auto;
    padding: 0 var(--okp-spacing-xl);
}
.container--lg {
    max-width: var(--okp-container-lg);
    margin: 0 auto;
    padding: 0 var(--okp-spacing-xl);
}


/* ================================================================
   7. GRID
   ================================================================ */
.grid {
    display: grid;
    gap: var(--okp-spacing-md);
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--okp-spacing-md);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--okp-spacing-md);
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--okp-spacing-md);
}

@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
}


/* ================================================================
   8. NAV
   ================================================================ */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--okp-nav-bg);
    backdrop-filter: var(--okp-nav-blur);
    -webkit-backdrop-filter: var(--okp-nav-blur);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    height: var(--okp-nav-height);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo img {
    height: 22px;
    width: auto;
}
.light-mode .nav-logo img {
    filter: invert(1);
}
.nav-logo span {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.12em;
    color: var(--okp-text-primary);
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}
.nav-links a {
    text-decoration: none;
    color: var(--okp-text-secondary);
    font-size: 15px;
    font-weight: 400;
    position: relative;
    padding: 0;
    background: none;
    border: none;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--okp-text-secondary);
    transition: width 0.3s ease;
}
.nav-links a:hover::after {
    width: 100%;
}
.nav-links a:hover {
    color: var(--okp-text-primary);
}

/* Nav CTA button (pill style) */
.nav-links .nav-btn-outline,
.nav-btn-outline {
    background: var(--okp-btn-bg);
    color: var(--okp-btn-color);
    padding: 10px 24px;
    border-radius: var(--okp-radius-pill);
    font-size: 14px;
    font-weight: 500;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}
.nav-links .nav-btn-outline::after {
    display: none;
}
.nav-links .nav-btn-outline:hover,
.nav-btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: var(--okp-shadow-md);
}

/* Theme toggle button */
.theme-btn {
    background: none;
    border: 1px solid var(--okp-border-color);
    border-radius: var(--okp-radius-pill);
    padding: 8px;
    cursor: pointer;
    color: var(--okp-text-muted);
    display: flex;
    align-items: center;
    transition: border-color 0.2s;
}
.theme-btn:hover {
    border-color: var(--okp-text-faint);
}
.theme-btn .icon-moon { display: block; }
.theme-btn .icon-sun  { display: none; }
.light-mode .theme-btn .icon-sun  { display: block; }
.light-mode .theme-btn .icon-moon { display: none; }

/* Text size toggle */
.text-size-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    background: transparent;
    border: 1px solid var(--okp-border-color);
    border-radius: var(--okp-radius-pill);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    color: var(--okp-text-secondary);
}
.text-size-toggle:hover {
    border-color: var(--okp-text-faint);
    color: var(--okp-text-primary);
}
.ts-label {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.5px;
    line-height: 1;
}
.ts-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}
.ts-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    background: var(--okp-text-primary);
    transition: all 0.2s;
}
.ts-dots i.off {
    background: var(--okp-text-faint);
    opacity: 0.3;
}

/* Burger / mobile controls */
.nav-right-mobile {
    display: none;
    gap: 8px;
    align-items: center;
}
.burger-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--okp-text-primary);
    transition: all 0.3s;
    border-radius: 2px;
}
.burger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; }
.burger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--okp-bg);
    z-index: 999;
    padding: 80px 24px 24px;
    flex-direction: column;
    gap: 12px;
    display: none;
}
.mobile-menu.open {
    display: flex !important;
    animation: menuSlide 0.25s ease;
}
@keyframes menuSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu a {
    font-size: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--okp-line);
    color: var(--okp-text-primary);
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--okp-text-muted); }
.mobile-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--okp-spacing-md);
}
.mobile-menu-buttons a {
    text-align: center;
    border-bottom: none;
}
.nav-btn {
    background: var(--okp-btn-bg);
    color: var(--okp-btn-color);
    padding: 10px 24px;
    border-radius: var(--okp-radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--okp-shadow-md);
}
.mobile-menu-buttons .nav-btn {
    background: var(--okp-btn-bg);
    color: var(--okp-btn-color);
    padding: 14px;
    border-radius: var(--okp-radius-pill);
    font-weight: 500;
}
.mobile-menu-buttons .nav-btn-outline {
    border: 1.5px solid var(--okp-border-color);
    color: var(--okp-text-secondary);
    padding: 14px;
    border-radius: var(--okp-radius-pill);
    background: transparent;
}


/* ================================================================
   9. FOOTER
   ================================================================ */
footer {
    border-top: var(--okp-border-width) solid var(--okp-border-color);
    padding: var(--okp-spacing-xl) var(--okp-spacing-xl) var(--okp-spacing-lg);
}
.footer-inner {
    max-width: var(--okp-container-sm);
    margin: 0 auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--okp-spacing-lg);
    margin-bottom: var(--okp-spacing-lg);
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-col-title {
    font-size: var(--okp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--okp-text-faint);
    font-weight: 600;
    margin-bottom: 4px;
}
.footer-col a {
    color: var(--okp-text-muted);
    text-decoration: none;
    font-size: var(--okp-font-size-small);
    transition: color 0.2s;
}
.footer-col a:hover {
    color: var(--okp-text-primary);
}
.footer-bottom {
    font-size: 13px;
    color: var(--okp-text-faint);
    border-top: var(--okp-border-width) solid var(--okp-border-color);
    padding-top: var(--okp-spacing-md);
    text-align: center;
}
.footer-links {
    display: flex;
    gap: var(--okp-spacing-md);
}
.footer-links a {
    color: var(--okp-text-faint);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--okp-text-primary);
}


/* ================================================================
   10. CARDS
   ================================================================ */
.card {
    padding: var(--okp-spacing-lg);
    border-radius: var(--okp-radius-lg);
    background: var(--okp-bg);
    transition: all 0.3s;
}
.card--bordered {
    border: var(--okp-border-width) solid var(--okp-border-color);
}
.card--elevated {
    box-shadow: var(--okp-shadow-sm);
}
.card--elevated:hover {
    box-shadow: var(--okp-shadow-md);
    transform: translateY(-4px);
}


/* ================================================================
   11. REVEAL ANIMATIONS
   ================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }

.reveal-delay-1 { transition-delay: 0.1s !important; }
.reveal-delay-2 { transition-delay: 0.2s !important; }
.reveal-delay-3 { transition-delay: 0.3s !important; }
.reveal-delay-4 { transition-delay: 0.4s !important; }
.reveal-delay-5 { transition-delay: 0.5s !important; }

/* Hero entrance */
.hero-enter {
    opacity: 0;
    transform: translateY(30px);
    animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-enter-d1 { animation-delay: 0.15s; }
.hero-enter-d2 { animation-delay: 0.3s; }
.hero-enter-d3 { animation-delay: 0.45s; }
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   12. SCROLL PROGRESS BAR
   ================================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--okp-text-primary);
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}


/* ================================================================
   13. PILL-PLAYER (OKAYPLAY branded)
   ================================================================ */
.okp-player {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #000;
    border-radius: 50px;
    padding: 6px 14px 6px 6px;
    cursor: default;
    user-select: none;
}
.okp-play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.okp-play-btn::before {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    background: url("/img/logo-white.png") center center / contain no-repeat;
}
.okp-play-btn > svg,
.okp-play-btn > img {
    display: none !important;
}
.okp-play-btn:hover {
    background: rgba(255,255,255,.2);
}
.okp-label {
    flex: 1;
    min-width: 0;
}
.okp-title {
    display: block;
    font-size: .78em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.okp-sub {
    display: block;
    font-size: .65em;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
}
.okp-wave-icon {
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
    display: flex;
}
.okp-player.is-playing .okp-wave-icon {
    color: #fff;
    animation: okpPulse 1.2s ease-in-out infinite;
}
@keyframes okpPulse {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}


/* ================================================================
   14. COOKIE BANNER
   ================================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--okp-surface);
    border-top: var(--okp-border-width) solid var(--okp-border-color);
    padding: var(--okp-spacing-sm) var(--okp-spacing-md);
}
.cookie-content {
    max-width: var(--okp-container-sm);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--okp-spacing-sm);
    flex-wrap: wrap;
}
.cookie-content p {
    font-size: 13px;
    color: var(--okp-text-muted);
    margin: 0;
}
.cookie-content p a {
    color: var(--okp-text-secondary);
    text-decoration: underline;
}
.cookie-btn {
    padding: 8px 20px;
    background: var(--okp-btn-bg);
    color: var(--okp-btn-color);
    border: none;
    border-radius: var(--okp-radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--okp-font-body);
}
.cookie-btn-ghost {
    padding: 8px 20px;
    background: transparent;
    color: var(--okp-text-muted);
    border: 1px solid var(--okp-border-color);
    border-radius: var(--okp-radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--okp-font-body);
}


/* ================================================================
   15. UTILITY CLASSES
   ================================================================ */

/* Text */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--okp-text-muted); }
.text-faint  { color: var(--okp-text-faint); }
.text-primary { color: var(--okp-text-primary); }

/* Font */
.font-display { font-family: var(--okp-font-display); }
.font-mono    { font-family: var(--okp-font-mono); }
.font-bold    { font-weight: 700; }
.font-light   { font-weight: 300; }

/* Margin Top (.mt-1 = 8px, .mt-2 = 16px, ...) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--okp-spacing-xs); }
.mt-2 { margin-top: var(--okp-spacing-sm); }
.mt-3 { margin-top: var(--okp-spacing-md); }
.mt-4 { margin-top: var(--okp-spacing-lg); }
.mt-5 { margin-top: var(--okp-spacing-xl); }
.mt-6 { margin-top: var(--okp-spacing-2xl); }
.mt-7 { margin-top: var(--okp-spacing-3xl); }
.mt-8 { margin-top: var(--okp-spacing-4xl); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--okp-spacing-xs); }
.mb-2 { margin-bottom: var(--okp-spacing-sm); }
.mb-3 { margin-bottom: var(--okp-spacing-md); }
.mb-4 { margin-bottom: var(--okp-spacing-lg); }
.mb-5 { margin-bottom: var(--okp-spacing-xl); }
.mb-6 { margin-bottom: var(--okp-spacing-2xl); }
.mb-7 { margin-bottom: var(--okp-spacing-3xl); }
.mb-8 { margin-bottom: var(--okp-spacing-4xl); }

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--okp-spacing-xs); }
.p-2  { padding: var(--okp-spacing-sm); }
.p-3  { padding: var(--okp-spacing-md); }
.p-4  { padding: var(--okp-spacing-lg); }

/* Display */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--okp-spacing-xs); }
.gap-2 { gap: var(--okp-spacing-sm); }
.gap-3 { gap: var(--okp-spacing-md); }
.gap-4 { gap: var(--okp-spacing-lg); }

/* Width */
.w-full { width: 100%; }
.max-w-sm { max-width: var(--okp-container-sm); margin-left: auto; margin-right: auto; }
.max-w-md { max-width: var(--okp-container-md); margin-left: auto; margin-right: auto; }
.max-w-lg { max-width: var(--okp-container-lg); margin-left: auto; margin-right: auto; }


/* ================================================================
   16. RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 768px) {
    /* Nav */
    nav { padding: 16px 24px; }
    .nav-links { display: none; }
    .nav-right-mobile { display: flex; }
    .burger-btn { display: flex; }

    /* Sections */
    .section { padding: var(--okp-spacing-3xl) var(--okp-spacing-md); }
    .section--hero { padding: 0 var(--okp-spacing-md); min-height: 90vh; }
    .section--hero h1 { font-size: clamp(30px, 7vw, 48px); }
    .hero-ctas { flex-direction: column; }
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Containers */
    .container, .container--sm, .container--lg { padding: 0 var(--okp-spacing-md); }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--okp-spacing-md); }
    footer { padding: var(--okp-spacing-lg) var(--okp-spacing-md) var(--okp-spacing-md); }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   17. TEXT SIZE ACCESSIBILITY (5 steps, controlled by JS)
   ================================================================ */
body.text-size-1 .section--hero h1,
body.text-size-1 .hero h1 { font-size: clamp(40px, 6.2vw, 72px); }
body.text-size-1 .hero-sub { font-size: 20px; }
body.text-size-1 .section-title,
body.text-size-1 section h2 { font-size: clamp(29px, 4vw, 45px); }
body.text-size-1 p, body.text-size-1 li { font-size: 17px; }

body.text-size-2 .section--hero h1,
body.text-size-2 .hero h1 { font-size: clamp(44px, 6.8vw, 80px); }
body.text-size-2 .hero-sub { font-size: 22px; }
body.text-size-2 .section-title,
body.text-size-2 section h2 { font-size: clamp(32px, 4.5vw, 50px); }
body.text-size-2 p, body.text-size-2 li { font-size: 18px; }

body.text-size-3 .section--hero h1,
body.text-size-3 .hero h1 { font-size: clamp(50px, 7.5vw, 90px); }
body.text-size-3 .hero-sub { font-size: 24px; }
body.text-size-3 .section-title,
body.text-size-3 section h2 { font-size: clamp(36px, 5vw, 56px); }
body.text-size-3 p, body.text-size-3 li { font-size: 20px; }

body.text-size-4 .section--hero h1,
body.text-size-4 .hero h1 { font-size: clamp(56px, 8.5vw, 100px); }
body.text-size-4 .hero-sub { font-size: 27px; }
body.text-size-4 .section-title,
body.text-size-4 section h2 { font-size: clamp(40px, 5.6vw, 64px); }
body.text-size-4 p, body.text-size-4 li { font-size: 22px; }

body[class*="text-size-"] p,
body[class*="text-size-"] li { line-height: 1.7; }
body.text-size-3 p, body.text-size-3 li,
body.text-size-4 p, body.text-size-4 li { line-height: 1.75; }


/* ================================================================
   18. DOT PATTERN & ACCENTS
   ================================================================ */
.dot-bg {
    background-image: radial-gradient(circle, var(--okp-border-color) 1px, transparent 1px);
    background-size: 24px 24px;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.dot-accent {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--okp-text-faint);
    border-radius: 50%;
    margin-right: 12px;
    animation: dotPulse 2s ease infinite;
}


/* ================================================================
   19. GLOW CARD EFFECT
   ================================================================ */
.glow-card {
    position: relative;
}
.glow-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: conic-gradient(from var(--glow-angle, 0deg), transparent 60%, rgba(255,255,255,0.08) 70%, transparent 80%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    pointer-events: none;
}
.light-mode .glow-card::after {
    background: conic-gradient(from var(--glow-angle, 0deg), transparent 60%, rgba(0,0,0,0.04) 70%, transparent 80%);
}
.glow-card:hover::after {
    opacity: 1;
    animation: glowSpin 3s linear infinite;
}
@property --glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes glowSpin {
    to { --glow-angle: 360deg; }
}


/* ================================================================
   20. FEATURE LIST
   ================================================================ */
.feature-list {
    margin-top: var(--okp-spacing-md);
    list-style: none;
    padding: 0;
}
.feature-list li {
    padding: var(--okp-spacing-sm) 0;
    border-bottom: var(--okp-border-width) solid var(--okp-border-color);
    font-size: 15px;
    color: var(--okp-text-secondary);
}
.feature-list li:last-child {
    border-bottom: none;
}