/* ═══════════════════════════════════════════════════════════════════════════
   olivrr.dev — Design System v2.1
   Stack: HTML, CSS, JS, PHP | Shared Hosting Compatible
   ═══════════════════════════════════════════════════════════════════════════ */

/* REWORK: [Subagent 5] — Migrated from Google Fonts CDN to locally-hosted fonts */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
    --color-bg-primary:   #07070e;
    --color-bg-secondary: #0d0d16;
    --color-bg-tertiary:  #14141f;
    --color-bg-elevated:  #1a1a28;
    --color-accent:       #4a7cf7;
    --color-accent-light: #7aa3ff;
    --color-accent-dim:   #3b5fc9;
    --color-accent-muted: rgba(74,124,247,0.10);
    --color-accent-border: rgba(74,124,247,0.22);
    --gradient-accent:      linear-gradient(135deg, #3b5fc9 0%, #4a7cf7 50%, #6b8fff 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(74,124,247,0.10) 0%, rgba(107,150,255,0.06) 100%);
    --color-text-primary:   #eeeef5;
    --color-text-secondary: rgba(238,238,245,0.62);
    --color-text-tertiary:  rgba(238,238,245,0.38);
    --color-text-accent:    var(--color-accent-light);
    --glass-bg:           rgba(255,255,255,0.022);
    --glass-bg-hover:     rgba(255,255,255,0.048);
    --glass-bg-strong:    rgba(255,255,255,0.06);
    --glass-border:       rgba(255,255,255,0.065);
    --glass-border-hover: rgba(255,255,255,0.12);
    --glass-border-accent: rgba(74,124,247,0.28);
    --glass-blur:         40px;
    --glass-shine:        linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 50%, transparent 100%);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.40);
    --shadow-md:  0 8px 28px rgba(0,0,0,0.50);
    --shadow-lg:  0 24px 60px rgba(0,0,0,0.60);
    --glow-blue:  0 0 40px rgba(74,124,247,0.18);
    --glow-blue-strong: 0 0 70px rgba(74,124,247,0.32);
    --font-display: 'Inter', -apple-system, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
    --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8rem);
    --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 0.95rem);
    --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.1rem);
    --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.25rem);
    --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
    --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2rem);
    --text-3xl:  clamp(1.875rem, 1.5rem  + 1.875vw, 2.5rem);
    --text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.5rem);
    --text-5xl:  clamp(3rem,     2rem    + 5vw,    5rem);
    --text-6xl:  clamp(3.5rem,   2.25rem + 6vw,    6.5rem);
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 100px;
    --transition-fast:   0.15s ease;
    --transition-base:   0.28s cubic-bezier(0.4,0,0.2,1);
    --transition-slow:   0.5s cubic-bezier(0.4,0,0.2,1);
    --transition-spring: 0.6s cubic-bezier(0.16,1,0.3,1);
    --z-base:    1;
    --z-sticky:  200;
    --z-fixed:   300;
    --z-modal:   500;
    --z-overlay: 9000;

    /* REWORK: [Subagent 4] — button consistency vars */
    --btn-radius: var(--radius-xl);
    --btn-transition: all var(--transition-spring);
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { max-width:100vw; overflow-x:hidden; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(74,124,247,0.25); color: var(--color-text-primary); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── LOADING SCREEN ─────────────────────────────────────────────────────── */
.loading-screen {
    position: fixed; inset: 0;
    background: var(--color-bg-primary);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loading-logo { font-size:1.5rem; font-weight:800; letter-spacing:-0.04em; animation: loadingPulse 1.2s ease-in-out infinite; }
@keyframes loadingPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* ─── PAGE TRANSITION ────────────────────────────────────────────────────── */
.page-transition {
    position: fixed; inset: 0;
    background: var(--color-bg-primary);
    z-index: 88888;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0.35s;
}
.page-transition.active { opacity:1; visibility:visible; pointer-events:all; }

/* ─── BACKGROUND ─────────────────────────────────────────────────────────── */
.bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: -2;
    background-image:
        linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}
.bg-ambient { position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bg-ambient::before {
    content:''; position:fixed; top:15%; right:-8%;
    width:600px; height:600px;
    background: radial-gradient(circle, rgba(74,124,247,0.08) 0%, rgba(74,124,247,0.02) 40%, transparent 70%);
    border-radius:50%; filter:blur(80px);
}
.bg-ambient::after {
    content:''; position:fixed; bottom:5%; left:-8%;
    width:500px; height:500px;
    background: radial-gradient(circle, rgba(107,150,255,0.05) 0%, rgba(107,150,255,0.015) 40%, transparent 70%);
    border-radius:50%; filter:blur(100px);
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.container    { width:100%; max-width:1300px; margin:0 auto; padding:0 var(--space-lg); }
.container-sm { max-width:820px; }
.container-md { max-width:1060px; }
.container-lg { max-width:1500px; }
.section    { padding: var(--space-5xl) 0; }
.section-sm { padding: var(--space-3xl) 0; }
.section-alt { background: linear-gradient(180deg, rgba(13,13,22,0.5) 0%, transparent 100%); }

/* ─── NAVIGATION ─────────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: var(--space-lg); left: 50%; transform: translateX(-50%);
    z-index: var(--z-fixed);
    width: calc(100% - var(--space-xl) * 2); max-width: 1020px;
    transition: top 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
                max-width 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
                width 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nav.scrolled { top:0; max-width:100%; width:100%; }
.nav-inner {
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 20px;
    background: rgba(7,7,14,0.65);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.5);
    position: relative; overflow: hidden;
    transition: border-radius 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
                padding 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
                background 0.4s ease;
}
.nav-inner::before {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
    pointer-events:none; border-radius:inherit;
}
.nav.scrolled .nav-inner {
    border-radius:0; padding:13px 3rem;
    border-left:none; border-right:none; border-top:none;
    background: rgba(7,7,14,0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 30px rgba(0,0,0,0.55);
}
.nav-logo { font-size:1.2rem; font-weight:700; letter-spacing:-0.5px; display:flex; align-items:center; gap:4px; color:var(--color-text-primary); transition:opacity var(--transition-base); }
.nav-logo:hover { opacity:0.85; }
.nav-logo .logo-olivrr { color:var(--color-text-primary); }
.nav-logo .logo-dot    { color:var(--color-accent); }
.nav-logo .logo-dev    { color:var(--color-accent-light); font-weight:500; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link {
    padding:9px 16px; font-size:var(--text-sm); font-weight:500;
    color:var(--color-text-secondary); border-radius:var(--radius-full);
    transition: color var(--transition-base), background var(--transition-base);
}
.nav-link:hover { color:var(--color-text-primary); background:var(--glass-bg); }
.nav-link.active { color:var(--color-accent-light); background:var(--color-accent-muted); }
.lang-toggle { display:flex; align-items:center; gap:2px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-full); padding:3px; }
.lang-btn { padding:5px 11px; font-size:var(--text-xs); font-weight:600; color:var(--color-text-secondary); border-radius:var(--radius-full); transition:all var(--transition-base); letter-spacing:0.05em; text-transform:uppercase; }
.lang-btn.active { background:var(--gradient-accent); color:#fff; box-shadow:0 2px 10px rgba(74,124,247,0.35); }
.lang-btn:hover:not(.active) { color:var(--color-text-primary); }
.nav-cta { margin-left:var(--space-sm); }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:9px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); z-index:calc(var(--z-fixed) + 10); position:relative; transition:background var(--transition-base); }
.nav-toggle:hover { background:var(--glass-bg-hover); }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--color-text-primary); transition:var(--transition-base); transform-origin:center; }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.nav-mobile { position:fixed; inset:0; width:100vw; height:100dvh; background:rgba(7,7,14,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-md); z-index:99999; opacity:0; visibility:hidden; transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0.35s; pointer-events:none; }
.nav-mobile.active { opacity:1; visibility:visible; pointer-events:auto; }
.nav-mobile .nav-link { padding:var(--space-md) var(--space-2xl); text-align:center; font-size:var(--text-xl); font-weight:500; color:var(--color-text-secondary); width:100%; max-width:280px; border-radius:var(--radius-lg); }
.nav-mobile .nav-link:hover,.nav-mobile .nav-link.active { background:var(--glass-bg-hover); color:var(--color-text-primary); }
.nav-mobile .nav-link.active { color:var(--color-accent-light); }
.nav-mobile .mobile-lang { display:flex; gap:var(--space-md); margin-top:var(--space-xl); }
@media (max-width:900px) {
    .nav { width:calc(100% - var(--space-lg)*2); top:var(--space-md); }
    .nav.scrolled { top:0; width:100%; }
    .nav-inner { padding:12px 16px; }
    .nav.scrolled .nav-inner { padding:12px 20px; }
    .nav-links,.nav-cta { display:none; }
    .nav-toggle { display:flex; }
    .lang-toggle { display:none; }
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
@keyframes heroIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroInRight { from{opacity:0;transform:translateX(40px) scale(0.96)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes heroOrbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.06)} }
.hero { position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse 55% 65% at 72% 38%, rgba(74,124,247,0.14) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 15% 70%, rgba(99,102,241,0.06) 0%, transparent 55%), var(--color-bg-primary); }
.hero-orb-a { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(74,124,247,0.11) 0%,transparent 70%); filter:blur(60px); top:-100px; right:5%; pointer-events:none; z-index:0; animation:heroOrbFloat 12s ease-in-out infinite; }
.hero-orb-b { position:absolute; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,0.09) 0%,transparent 70%); filter:blur(50px); bottom:0; left:10%; pointer-events:none; z-index:0; animation:heroOrbFloat 16s ease-in-out infinite reverse; }
.hero-inner { position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:calc(90px + var(--space-4xl)) var(--space-xl) var(--space-5xl); display:grid; grid-template-columns:1fr 460px; gap:var(--space-5xl); align-items:center; }
.hero-content { position:relative; }
.hero-title { font-size:clamp(2.6rem,4.5vw,4rem); font-weight:800; letter-spacing:-0.04em; line-height:1.07; margin-bottom:var(--space-xl); animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.hero-title[data-animate] { animation:none; opacity:1; transform:none; }
.hero-subtitle { font-size:var(--text-lg); color:var(--color-text-secondary); line-height:1.7; margin-bottom:var(--space-2xl); max-width:540px; opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.hero-actions { display:flex; gap:var(--space-md); flex-wrap:wrap; opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.hero-tags { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-2xl); opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.hero-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-full); font-size:var(--text-xs); font-family:var(--font-mono); color:var(--color-text-tertiary); letter-spacing:0.02em; transition:var(--transition-base); }
.hero-tag:hover { border-color:var(--glass-border-accent); color:var(--color-accent-light); background:var(--color-accent-muted); }
.hero-visual { position:relative; animation:heroInRight 1s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hv-browser { background:rgba(14,14,22,0.9); border:1px solid rgba(74,124,247,0.2); border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.04),0 0 80px rgba(74,124,247,0.12); backdrop-filter:blur(30px); }
.hv-bar-line { padding:11px 16px; background:rgba(255,255,255,0.022); border-bottom:1px solid rgba(255,255,255,0.055); display:flex; align-items:center; gap:6px; }
.hv-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.hv-url-pill { margin-left:10px; font-family:var(--font-mono); font-size:0.71rem; color:var(--color-text-tertiary); background:rgba(255,255,255,0.045); padding:3px 12px; border-radius:var(--radius-full); border:1px solid rgba(255,255,255,0.065); }
.hv-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.hv-fake-nav { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:rgba(255,255,255,0.026); border:1px solid rgba(255,255,255,0.045); border-radius:var(--radius-md); }
.hv-fake-logo { width:55px; height:16px; background:rgba(74,124,247,0.28); border-radius:4px; }
.hv-fake-links { display:flex; gap:6px; }
.hv-fake-link { width:30px; height:16px; background:rgba(255,255,255,0.055); border-radius:4px; }
.hv-fake-link-cta { width:52px; height:16px; background:rgba(74,124,247,0.32); border-radius:4px; }
.hv-hero-block { padding:16px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.hv-skel { height:10px; border-radius:5px; background:rgba(255,255,255,0.065); }
.hv-skel-xl  { height:20px; width:75%; background:rgba(255,255,255,0.11); }
.hv-skel-lg  { height:13px; width:60%; }
.hv-skel-sm  { width:45%; }
.hv-skel-btn { height:28px; width:110px; background:rgba(74,124,247,0.32); border-radius:var(--radius-lg); margin-top:6px; }
.hv-cards-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hv-mini-card { height:64px; border-radius:var(--radius-md); background:rgba(255,255,255,0.036); border:1px solid rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.hv-mini-card::after { content:''; position:absolute; bottom:8px; left:10px; width:40%; height:6px; background:rgba(255,255,255,0.065); border-radius:3px; }
.hv-mini-card-accent { background:rgba(74,124,247,0.09); border-color:rgba(74,124,247,0.22); }
.hv-mini-card-accent::after { background:rgba(74,124,247,0.28); }
.hv-activity { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,255,255,0.022); border:1px solid rgba(255,255,255,0.044); border-radius:var(--radius-md); }
.hv-avatar { width:26px; height:26px; border-radius:50%; background:rgba(74,124,247,0.28); flex-shrink:0; }
.hv-activity-lines { flex:1; display:flex; flex-direction:column; gap:4px; }
.hv-line-a { height:7px; width:60%; background:rgba(255,255,255,0.095); border-radius:4px; }
.hv-line-b { height:6px; width:40%; background:rgba(255,255,255,0.048); border-radius:4px; }
.hv-status-dot { width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 8px rgba(16,185,129,0.5); animation:dotPulse 2.2s ease-in-out infinite; }
.hv-chip { position:absolute; display:flex; align-items:center; gap:7px; padding:8px 14px; background:rgba(10,10,18,0.96); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-full); font-size:0.74rem; font-weight:500; color:var(--color-text-secondary); box-shadow:0 8px 28px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.04); white-space:nowrap; z-index:10; }
.hv-chip-dot { width:8px; height:8px; border-radius:50%; background:#10b981; animation:dotPulse 2.2s ease-in-out infinite; flex-shrink:0; }
.hv-chip-icon { color:var(--color-accent-light); font-size:0.9rem; }
.hv-chip-1 { bottom:-16px; left:-24px; animation:heroIn 0.6s ease 1.05s both; }
.hv-chip-2 { top:-16px; right:-16px; animation:heroIn 0.6s ease 1.25s both; }
@media (max-width:1060px) {
    .hero-inner { grid-template-columns:1fr; padding-top:calc(90px + var(--space-3xl)); text-align:center; }
    .hero-visual { display:none; }
    .hero-actions { justify-content:center; }
    .hero-tags    { justify-content:center; }
    .hero-subtitle { max-width:600px; margin-left:auto; margin-right:auto; }
}
@media (max-width:560px) {
    .container { padding:0 16px; }
    .hero-inner { padding:calc(82px + var(--space-2xl)) 16px var(--space-3xl); gap:var(--space-2xl); }
    .hero-title { font-size:clamp(2.15rem,12vw,3rem); margin-bottom:var(--space-lg); }
    .hero-subtitle { font-size:1rem; line-height:1.65; margin-bottom:var(--space-xl); }
    .hero-actions { gap:12px; }
    .hero-actions .btn { width:100%; }
    .hero-tags { margin-top:var(--space-xl); gap:8px; }
    .hero-tag { padding:6px 12px; }
    .hero-available { margin-bottom:var(--space-lg); }
}

/* ─── BUTTONS v2.1 ───────────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--space-sm); padding:14px 28px;
    font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
    border-radius:var(--btn-radius); /* REWORK: [Subagent 4] */
    transition: var(--btn-transition); /* REWORK: [Subagent 4] */
    white-space:nowrap; cursor:pointer; position:relative; overflow:hidden; letter-spacing:0.01em;
}
.btn-sm { padding:10px 20px; font-size:var(--text-xs); }
.btn-lg { padding:18px 36px; font-size:var(--text-base); }

/* Primary */
.btn-primary {
    background: var(--gradient-accent); color:#fff;
    box-shadow: 0 4px 20px rgba(74,124,247,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 60%); opacity:0; transition:opacity var(--transition-base); border-radius:inherit; }
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 36px rgba(74,124,247,0.45),0 0 0 1px rgba(74,124,247,0.3),inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-primary:hover::before { opacity:1; }
.btn-primary:active { transform:translateY(-1px) scale(1); transition-duration:0.1s; }

/* Secondary (liquid glass) */
.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border); color:var(--color-text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 16px rgba(0,0,0,0.25);
}
.btn-secondary::before { content:''; position:absolute; inset:0; background:var(--glass-shine); opacity:0; transition:opacity var(--transition-base); border-radius:inherit; }
.btn-secondary:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateY(-3px) scale(1.01); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 8px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(74,124,247,0.15); color:var(--color-accent-light); }
.btn-secondary:hover::before { opacity:1; }
.btn-secondary:active { transform:translateY(-1px) scale(1); transition-duration:0.1s; }

/* Ghost */
.btn-ghost { padding:10px 4px; color:var(--color-accent-light); position:relative; font-weight:500; transition:color var(--transition-base); }
.btn-ghost::after { content:''; position:absolute; bottom:6px; left:4px; right:4px; height:1px; background:var(--color-accent-light); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-spring); }
.btn-ghost:hover { color:var(--color-text-primary); }
.btn-ghost:hover::after { transform:scaleX(1); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.15; letter-spacing:-0.025em; color:var(--color-text-primary); }
.heading-display { font-size:var(--text-6xl); font-weight:800; line-height:1.0; letter-spacing:-0.04em; }
.heading-1 { font-size:var(--text-5xl); font-weight:700; }
.heading-2 { font-size:var(--text-4xl); font-weight:700; }
.heading-3 { font-size:var(--text-3xl); }
.heading-4 { font-size:var(--text-2xl); }
.text-gradient { background:linear-gradient(135deg, #60a5fa 0%, #818cf8 30%, #a78bfa 60%, #7aa3ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-warm { background:linear-gradient(135deg, #4a7cf7 0%, #a78bfa 50%, #f472b6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-muted  { color:var(--color-text-secondary); }
.text-accent { color:var(--color-accent-light); }
.overline { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-accent); }
.lead { font-size:var(--text-lg); line-height:1.75; color:var(--color-text-secondary); }
.code-tag { font-family:var(--font-mono); font-size:0.82em; padding:3px 8px; background:var(--color-accent-muted); border:1px solid var(--color-accent-border); border-radius:var(--radius-sm); color:var(--color-accent-light); white-space:nowrap; transition:var(--transition-base); }
.code-tag:hover { background:rgba(74,124,247,0.18); }

/* ─── CARDS (liquid glass) ───────────────────────────────────────────────── */
.card {
    position:relative; padding:var(--space-2xl);
    background: linear-gradient(160deg,rgba(22,22,34,0.80) 0%,rgba(7,7,14,0.90) 100%);
    border:1px solid var(--glass-border); border-radius:var(--radius-2xl); overflow:hidden;
    transition: transform var(--transition-spring), border-color var(--transition-base), box-shadow var(--transition-slow);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); opacity:0; transition:opacity var(--transition-base); }
.card::after  { content:''; position:absolute; inset:0; background:var(--glass-shine); opacity:0; transition:opacity var(--transition-base); pointer-events:none; border-radius:inherit; }
.card:hover { transform:translateY(-8px); border-color:var(--glass-border-accent); box-shadow:var(--shadow-lg),var(--glow-blue),inset 0 1px 0 rgba(255,255,255,0.08); }
.card:hover::before { opacity:1; }
.card:hover::after  { opacity:1; }
.card-accent { background:linear-gradient(160deg,rgba(74,124,247,0.06) 0%,rgba(7,7,14,0.94) 50%); border-color:var(--glass-border-accent); }

/* ─── SECTION HEADER ─────────────────────────────────────────────────────── */
.section-header { margin-bottom:var(--space-3xl); }
.section-header.centered { text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
.section-label { display:inline-flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-md); }
.section-label::before { content:''; width:20px; height:1px; background:var(--color-accent); display:inline-block; }

/* ─── SERVICES GRID ──────────────────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xl); }
.service-icon { width:52px; height:52px; background:var(--gradient-accent-soft); border:1px solid var(--color-accent-border); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-lg); color:var(--color-accent-light); transition:transform var(--transition-spring),box-shadow var(--transition-base); }
.card:hover .service-icon { transform:scale(1.08) rotate(-2deg); box-shadow:0 4px 20px rgba(74,124,247,0.25); }
.service-tech { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-lg); }
@media (max-width:768px) { .services-grid { grid-template-columns:1fr; } }

/* ─── PROCESS STEPS (fixed horizontal line) ──────────────────────────────── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xl); position:relative; }
.process-grid::before {
    content:''; position:absolute;
    top:20px;
    left:calc(12.5% + 20px); right:calc(12.5% + 20px);
    height:1px;
    background: linear-gradient(90deg, rgba(74,124,247,0.4), rgba(107,150,255,0.6), rgba(107,150,255,0.6), rgba(74,124,247,0.4));
    z-index:0; pointer-events:none;
}
.process-step { text-align:center; padding:var(--space-xl) var(--space-lg); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); position:relative; z-index:1; transition:transform var(--transition-spring),border-color var(--transition-base),box-shadow var(--transition-slow); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.process-step:hover { border-color:var(--glass-border-accent); transform:translateY(-6px); box-shadow:var(--shadow-md),var(--glow-blue); }
.process-number { font-size:var(--text-sm); font-family:var(--font-mono); font-weight:500; color:var(--color-accent); width:40px; height:40px; border:1px solid var(--color-accent-border); border-radius:50%; background:var(--color-bg-primary); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-lg); position:relative; z-index:2; transition:background var(--transition-base),box-shadow var(--transition-base); }
.process-step:hover .process-number { background:var(--color-accent-muted); box-shadow:0 0 16px rgba(74,124,247,0.4); }
@media (max-width:900px) { .process-grid { grid-template-columns:repeat(2,1fr); } .process-grid::before { display:none; } }
@media (max-width:560px) { .process-grid { grid-template-columns:1fr; } }

/* ─── MARQUEE (JS-driven infinite scroll + right-expand) ─────────────────── */
.marquee-wrapper { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); cursor:default; padding:var(--space-lg) 0 var(--space-2xl); }
.marquee-track { display:flex; gap:var(--space-xl); width:max-content; will-change:transform; }
.marquee-card { flex-shrink:0; width:280px; display:flex; align-items:stretch; overflow:hidden; background:rgba(14,14,22,0.85); border:1px solid var(--glass-border); border-radius:var(--radius-xl); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); cursor:pointer; transition:width 0.5s cubic-bezier(0.4,0,0.2,1),border-color var(--transition-base),box-shadow var(--transition-slow),transform var(--transition-spring); position:relative; }
.marquee-card::before { content:''; position:absolute; inset:0; background:var(--glass-shine); opacity:0; transition:opacity var(--transition-base); pointer-events:none; border-radius:inherit; z-index:1; }
.marquee-card.is-active { width:510px; border-color:var(--glass-border-accent); transform:translateY(-8px); box-shadow:var(--shadow-lg),var(--glow-blue); }
.marquee-card.is-active::before { opacity:1; }
.marquee-card-main { flex-shrink:0; width:280px; display:flex; flex-direction:column; }
.marquee-card-img-placeholder { flex-shrink:0; width:280px; height:180px; background:linear-gradient(135deg,var(--color-bg-secondary),var(--color-bg-tertiary)); display:flex; align-items:center; justify-content:center; color:var(--color-text-tertiary); font-family:var(--font-mono); font-size:var(--text-xs); }
.marquee-card-img { flex-shrink:0; width:280px; height:180px; object-fit:cover; }
.marquee-card-body { padding:var(--space-lg) var(--space-xl); flex:1; position:relative; z-index:2; }
.marquee-card-title { font-size:var(--text-base); font-weight:600; margin-bottom:var(--space-sm); transition:color var(--transition-base); }
.marquee-card.is-active .marquee-card-title { color:var(--color-accent-light); }
.marquee-card-tech { display:flex; flex-wrap:wrap; gap:6px; }
.marquee-card-details { flex-shrink:0; width:230px; padding:var(--space-xl); opacity:0; transform:translateX(14px); pointer-events:none; display:flex; flex-direction:column; justify-content:center; gap:var(--space-lg); border-left:1px solid var(--glass-border); position:relative; z-index:2; transition:opacity 0.32s ease,transform 0.42s cubic-bezier(0.22,1,0.36,1); }
.marquee-card.is-active .marquee-card-details { opacity:1; transform:translateX(0); pointer-events:auto; transition-delay:0.07s; }
.marquee-card-desc { font-size:var(--text-xs); color:var(--color-text-secondary); line-height:1.65; }

/* ─── PRICING CARDS ───────────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); align-items:start; }
.pricing-card { padding:var(--space-2xl); background:linear-gradient(160deg,rgba(22,22,34,0.88) 0%,rgba(7,7,14,0.94) 100%); border:1px solid var(--glass-border); border-radius:var(--radius-2xl); position:relative; overflow:hidden; transition:transform var(--transition-spring),border-color var(--transition-base),box-shadow var(--transition-slow); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); opacity:0; transition:opacity var(--transition-base); }
.pricing-card::after  { content:''; position:absolute; inset:0; background:var(--glass-shine); opacity:0; transition:opacity var(--transition-base); pointer-events:none; border-radius:inherit; }
.pricing-card:hover { transform:translateY(-10px) scale(1.01); border-color:var(--glass-border-accent); box-shadow:var(--shadow-lg),0 0 50px rgba(74,124,247,0.12); }
.pricing-card:hover::before { opacity:1; }
.pricing-card:hover::after  { opacity:1; }
.pricing-card.featured { background:linear-gradient(160deg,rgba(74,124,247,0.09) 0%,rgba(7,7,14,0.94) 60%); border-color:var(--glass-border-accent); box-shadow:var(--glow-blue); }
.pricing-card.featured:hover { box-shadow:var(--shadow-lg),var(--glow-blue-strong); transform:translateY(-12px) scale(1.02); }
.pricing-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--gradient-accent); color:#fff; padding:4px 16px; border-radius:0 0 var(--radius-md) var(--radius-md); font-size:var(--text-xs); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; box-shadow:0 4px 16px rgba(74,124,247,0.35); }
.pricing-name { font-size:var(--text-sm); font-family:var(--font-mono); color:var(--color-accent); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:var(--space-sm); }
.pricing-price { font-size:var(--text-4xl); font-weight:800; letter-spacing:-0.03em; line-height:1; margin-bottom:var(--space-sm); }
.pricing-price span { font-size:var(--text-lg); font-weight:500; color:var(--color-text-secondary); letter-spacing:0; }
.pricing-desc { font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-xl); min-height:3em; }
.pricing-divider { width:100%; height:1px; background:var(--glass-border); margin:var(--space-xl) 0; }
.pricing-features { display:flex; flex-direction:column; gap:var(--space-md); margin-bottom:var(--space-2xl); }
.pricing-feature { display:flex; align-items:flex-start; gap:var(--space-sm); font-size:var(--text-sm); color:var(--color-text-secondary); }
.pricing-feature .check { flex-shrink:0; width:18px; height:18px; background:var(--color-accent-muted); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; color:var(--color-accent-light); }
.pricing-feature.disabled { color:var(--color-text-tertiary); }
.pricing-feature.disabled .check { background:rgba(255,255,255,0.03); color:var(--color-text-tertiary); }
@media (max-width:900px) { .pricing-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
@media (max-width:768px) {
    .pricing-grid {
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:minmax(286px,84vw);
        gap:var(--space-lg);
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        max-width:none;
        margin:0 -18px;
        padding:6px 18px 14px;
    }
    .pricing-grid::-webkit-scrollbar { display:none; }
    .pricing-card { scroll-snap-align:start; min-height:100%; padding:var(--space-xl); }
    .pricing-card:hover,.pricing-card.featured:hover { transform:none; }
    .pricing-price { font-size:clamp(2.25rem,9vw,3rem); }
    .pricing-desc { min-height:auto; margin-bottom:var(--space-lg); }
    .pricing-features { gap:12px; margin-bottom:var(--space-xl); }
}

/* ─── FAQ (smooth accordion) ─────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:var(--space-sm); max-width:760px; margin:0 auto; }
.faq-item { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); overflow:hidden; transition:border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-slow); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.faq-item:hover { border-color:rgba(74,124,247,0.15); background:var(--glass-bg-hover); }
.faq-item.open { border-color:var(--glass-border-accent); background:rgba(74,124,247,0.03); box-shadow:0 8px 30px rgba(0,0,0,0.25),0 0 0 1px rgba(74,124,247,0.08); }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:var(--space-lg) var(--space-xl); font-size:var(--text-base); font-weight:600; color:var(--color-text-primary); text-align:left; gap:var(--space-lg); transition:color var(--transition-base); }
.faq-item.open .faq-question { color:var(--color-accent-light); }
.faq-icon { flex-shrink:0; width:28px; height:28px; background:var(--color-accent-muted); border:1px solid var(--color-accent-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-accent-light); transition:transform var(--transition-spring),background var(--transition-base),color var(--transition-base),box-shadow var(--transition-base); }
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--color-accent); color:#fff; border-color:var(--color-accent); box-shadow:0 4px 16px rgba(74,124,247,0.4); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.35s ease; opacity:0; }
.faq-item.open .faq-answer { max-height:600px; opacity:1; }
.faq-answer-inner { padding:0 var(--space-xl) var(--space-xl); color:var(--color-text-secondary); font-size:var(--text-sm); line-height:1.8; transform:translateY(-6px); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.faq-item.open .faq-answer-inner { transform:translateY(0); }

/* ─── CONTACT FORM ───────────────────────────────────────────────────────── */
.form-tabs { display:flex; gap:var(--space-sm); margin-bottom:var(--space-xl); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:4px; }
.form-tab { flex:1; padding:10px 20px; font-size:var(--text-sm); font-weight:600; color:var(--color-text-secondary); border-radius:var(--radius-lg); transition:all var(--transition-base); text-align:center; }
.form-tab.active { background:var(--gradient-accent); color:#fff; box-shadow:0 4px 16px rgba(74,124,247,0.3); }
.form-tab:hover:not(.active) { color:var(--color-text-primary); background:var(--glass-bg-hover); }
.form-panel { display:none; }
.form-panel.active { display:block; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); }
.form-group { display:flex; flex-direction:column; gap:var(--space-sm); }
.form-group.full { grid-column:1 / -1; }
.form-label { font-size:var(--text-xs); font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.08em; }
.form-input,.form-select,.form-textarea { width:100%; padding:13px 16px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); color:var(--color-text-primary); font-family:var(--font-body); font-size:var(--text-sm); transition:border-color var(--transition-base),box-shadow var(--transition-base),background var(--transition-base); appearance:none; -webkit-appearance:none; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(74,124,247,0.12); background:var(--glass-bg-hover); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--color-text-tertiary); }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.form-textarea { resize:vertical; min-height:120px; }
.form-honeypot { display:none; }
.form-submit-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-lg); }
.form-note { font-size:var(--text-xs); color:var(--color-text-tertiary); }
.form-message { padding:var(--space-md) var(--space-lg); border-radius:var(--radius-lg); font-size:var(--text-sm); font-weight:500; display:none; margin-top:var(--space-md); }
.form-message.success { display:block; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:#6ee7b7; }
.form-message.error   { display:block; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); color:#fca5a5; }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } .form-submit-row { flex-direction:column; align-items:stretch; } }

/* ─── CTA SECTION ─────────────────────────────────────────────────────────── */
.cta-section { position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(74,124,247,0.07) 0%,rgba(7,7,14,0) 60%); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.cta-section::before { content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:300px; background:radial-gradient(ellipse at center,rgba(74,124,247,0.1) 0%,transparent 70%); pointer-events:none; }

/* ─── PRIVACY / COOKIE NOTICE ───────────────────────────────────────────── */
.site-notice {
    position:fixed;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    width:min(calc(100% - 24px),780px);
    z-index:var(--z-fixed);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-lg);
    padding:14px 16px;
    background:rgba(8,10,18,0.94);
    border:1px solid var(--glass-border-accent);
    border-radius:var(--radius-xl);
    box-shadow:0 18px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(74,124,247,0.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.site-notice-text { font-size:var(--text-xs); color:var(--color-text-secondary); line-height:1.65; }
.site-notice-text strong { color:var(--color-text-primary); }
.site-notice-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.site-notice-link { font-size:var(--text-xs); color:var(--color-accent-light); }
.site-notice-dismiss {
    flex-shrink:0;
    min-height:42px;
    padding:10px 16px;
    border-radius:var(--radius-lg);
    background:var(--gradient-accent);
    color:#fff;
    font-size:var(--text-xs);
    font-weight:600;
    box-shadow:0 4px 18px rgba(74,124,247,0.24);
}
@media (max-width:640px) {
    .site-notice {
        bottom:12px;
        width:min(calc(100% - 16px),780px);
        flex-direction:column;
        gap:var(--space-md);
        padding:14px;
    }
    .site-notice-dismiss { width:100%; }
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer { padding:var(--space-3xl) 0 var(--space-xl); border-top:1px solid var(--glass-border); background:var(--color-bg-secondary); }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-3xl); margin-bottom:var(--space-3xl); }
.footer-brand p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.7; margin-top:var(--space-md); max-width:280px; }
.footer-brand .footer-logo { font-size:1.15rem; font-weight:700; letter-spacing:-0.5px; }
.footer-logo .logo-dot { color:var(--color-accent); }
.footer-logo .logo-dev { color:var(--color-accent-light); font-weight:500; }
.footer-col h4 { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-text-tertiary); margin-bottom:var(--space-lg); }
.footer-links { display:flex; flex-direction:column; gap:var(--space-sm); }
.footer-link { font-size:var(--text-sm); color:var(--color-text-secondary); transition:color var(--transition-fast),transform var(--transition-base); display:inline-block; }
.footer-link:hover { color:var(--color-accent-light); transform:translateX(3px); }
.footer-bottom { padding-top:var(--space-xl); border-top:1px solid var(--glass-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md); }
.footer-copy { font-size:var(--text-xs); color:var(--color-text-tertiary); }
.footer-olivrr-link { font-size:var(--text-xs); color:var(--color-text-tertiary); transition:color var(--transition-fast); }
.footer-olivrr-link:hover { color:var(--color-text-secondary); }
@media (max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; gap:var(--space-2xl); } .footer-brand { grid-column:1 / -1; } }
@media (max-width:560px) { .footer-inner { grid-template-columns:1fr; } }
@media (max-width:560px) {
    .footer-inner { gap:var(--space-xl); margin-bottom:var(--space-2xl); }
    .footer-bottom { justify-content:center; text-align:center; }
    .footer-copy { text-align:center; }
    .cta-section .btn-lg { width:100%; }
}

/* ─── SCROLL ANIMATIONS ───────────────────────────────────────────────────── */
.fade-in-up { opacity:0; transform:translateY(44px); transition:opacity 0.75s cubic-bezier(0.16,1,0.3,1),transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.scale-in   { opacity:0; transform:scale(0.92); transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.fade-in-up.visible,.scale-in.visible { opacity:1; transform:none; }
.stagger-1 { transition-delay:0.12s; }
.stagger-2 { transition-delay:0.22s; }
.stagger-3 { transition-delay:0.32s; }
.stagger-4 { transition-delay:0.44s; }
.fade-in-left  { opacity:0; transform:translateX(-36px); transition:opacity 0.75s ease,transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.fade-in-right { opacity:0; transform:translateX(36px);  transition:opacity 0.75s ease,transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.blur-in       { opacity:0; filter:blur(12px); transform:scale(1.03); transition:opacity 0.85s ease,filter 0.85s ease,transform 0.85s ease; }
.fade-in-left.visible,.fade-in-right.visible,.blur-in.visible { opacity:1; transform:none; filter:none; }

/* ─── PROJECTS GRID ───────────────────────────────────────────────────────── */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
.project-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-2xl); overflow:hidden; transition:transform var(--transition-spring),border-color var(--transition-base),box-shadow var(--transition-slow); backdrop-filter:blur(16px); }
.project-card:hover { border-color:var(--glass-border-accent); transform:translateY(-8px); box-shadow:var(--shadow-lg),var(--glow-blue); }
.project-thumb { width:100%; height:200px; background:linear-gradient(135deg,var(--color-bg-secondary),var(--color-bg-tertiary)); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.project-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.project-card:hover .project-thumb img { transform:scale(1.04); }
.project-thumb-label { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-tertiary); }
.project-body { padding:var(--space-xl); }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-md); }
.project-title { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-sm); }
.project-desc  { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.7; margin-bottom:var(--space-lg); }
.project-links { display:flex; gap:var(--space-md); flex-wrap:wrap; }
@media (max-width:1000px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .projects-grid { grid-template-columns:1fr; } }

/* ─── SECTION SEPARATOR ───────────────────────────────────────────────────── */
.section-sep { position:relative; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(74,124,247,0.22) 30%,rgba(107,150,255,0.45) 50%,rgba(74,124,247,0.22) 70%,transparent 100%); overflow:visible; margin:0; border:none; }
.section-sep::after { content:''; position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:400px; height:50px; background:radial-gradient(ellipse at center,rgba(74,124,247,0.12) 0%,transparent 70%); filter:blur(12px); pointer-events:none; }

/* ─── HERO "AVAILABLE" BADGE ──────────────────────────────────────────────── */
.hero-available { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; background:rgba(16,185,129,0.07); border:1px solid rgba(16,185,129,0.18); border-radius:var(--radius-full); font-size:var(--text-xs); color:rgba(110,231,183,0.85); margin-bottom:var(--space-xl); opacity:0; transform:translateY(10px); transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.hero-available-dot { width:7px; height:7px; background:#10b981; border-radius:50%; flex-shrink:0; animation:dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }

/* ─── STATS STRIP ─────────────────────────────────────────────────────────── */
.stats-strip { padding:var(--space-3xl) 0; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); background:linear-gradient(180deg,transparent,rgba(13,13,22,0.5) 50%,transparent); }
.stats-row { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.stat-item { flex:1; min-width:130px; text-align:center; padding:var(--space-md) var(--space-2xl); position:relative; }
.stat-item + .stat-item::before { content:''; position:absolute; left:0; top:20%; height:60%; width:1px; background:var(--glass-border); }
.stat-number { display:block; font-size:var(--text-3xl); font-weight:800; letter-spacing:-0.03em; background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { display:block; font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:var(--space-xs); text-transform:uppercase; letter-spacing:0.08em; }
@media (max-width:560px) {
    .stats-strip { padding:var(--space-2xl) 0; }
    .stats-row { display:grid; grid-template-columns:1fr 1fr; gap:0; }
    .stat-item { min-width:0; padding:var(--space-lg) var(--space-md); }
    .stat-item + .stat-item::before { display:none; }
    .stat-item:nth-child(2n+2)::before { content:''; display:block; left:0; top:18%; height:64%; width:1px; }
    .stat-item:nth-child(n+3) { border-top:1px solid var(--glass-border); }
    .stat-number { font-size:clamp(1.9rem,9vw,2.4rem); }
}

/* ─── B2B VALUE CARDS ─────────────────────────────────────────────────────── */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
.value-card { padding:var(--space-2xl); background:rgba(14,14,22,0.80); border:1px solid var(--glass-border); border-radius:var(--radius-2xl); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:relative; overflow:hidden; transition:transform var(--transition-spring),border-color var(--transition-base),box-shadow var(--transition-slow); }
.value-card::before { content:''; position:absolute; inset:0; background:var(--glass-shine); opacity:0; transition:opacity var(--transition-base); pointer-events:none; border-radius:inherit; }
.value-card:hover { transform:translateY(-6px); border-color:var(--glass-border-accent); box-shadow:var(--shadow-md),var(--glow-blue); }
.value-card:hover::before { opacity:1; }
.value-icon  { font-size:2rem; margin-bottom:var(--space-lg); display:block; filter:drop-shadow(0 0 12px rgba(74,124,247,0.4)); }
.value-title { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-sm); }
.value-desc  { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.75; }
.value-detail { margin-top:var(--space-md); font-size:var(--text-xs); color:var(--color-accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; }
@media (max-width:900px) { .value-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .value-grid { grid-template-columns:1fr; } }

/* ─── OLIVRR MEDIA BANNER ─────────────────────────────────────────────────── */
.media-banner { padding:var(--space-3xl); background:linear-gradient(135deg,rgba(74,124,247,0.08) 0%,rgba(99,102,241,0.05) 50%,rgba(7,7,14,0) 100%); border:1px solid var(--glass-border-accent); border-radius:var(--radius-2xl); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-2xl); position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 60px rgba(74,124,247,0.06); }
.media-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:250px; height:250px; background:radial-gradient(circle,rgba(74,124,247,0.1) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.media-banner-label { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:var(--space-sm); }
.media-banner h3 { font-size:var(--text-2xl); font-weight:700; margin-bottom:var(--space-sm); }
.media-banner p  { color:var(--color-text-secondary); font-size:var(--text-sm); line-height:1.7; max-width:520px; }
.media-banner-actions { display:flex; flex-direction:column; gap:var(--space-sm); flex-shrink:0; }
@media (max-width:768px) { .media-banner { grid-template-columns:1fr; text-align:center; } .media-banner p { max-width:100%; } .media-banner-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; } }

/* ─── PAGE HERO (subpages) ───────────────────────────────────────────────── */
.page-hero { padding:calc(110px + var(--space-4xl)) 0 var(--space-4xl); position:relative; overflow:hidden; text-align:center; }
.page-hero::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:400px; background:radial-gradient(ellipse at top,rgba(74,124,247,0.12) 0%,transparent 65%); pointer-events:none; }
.page-hero .overline  { margin-bottom:var(--space-md); }
.page-hero .heading-2 { max-width:700px; margin:0 auto var(--space-lg); }
.page-hero .lead      { max-width:600px; margin:0 auto; }

/* ─── LEISTUNGEN SERVICE DETAIL ──────────────────────────────────────────── */
.service-detail { padding:var(--space-4xl) 0; border-bottom:1px solid var(--glass-border); scroll-margin-top:104px; }
.service-detail:last-of-type { border-bottom:none; }
.service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4xl); align-items:center; }
.service-detail-grid.reverse { direction:rtl; }
.service-detail-grid.reverse > * { direction:ltr; }
.service-detail-visual { background:linear-gradient(135deg,rgba(14,14,22,0.7),rgba(7,7,14,0.85)); border:1px solid rgba(74,124,247,0.14); border-radius:var(--radius-2xl); padding:var(--space-2xl); min-height:360px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-tertiary); line-height:1.8; overflow:hidden; position:relative; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 20px 60px rgba(0,0,0,0.4); transition:transform var(--transition-spring),box-shadow var(--transition-slow); }
.service-detail-visual:hover { transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 30px 80px rgba(0,0,0,0.5),0 0 40px rgba(74,124,247,0.1); }
.code-block { background:rgba(7,7,14,0.8); border:1px solid rgba(74,124,247,0.1); border-radius:var(--radius-lg); padding:var(--space-xl); font-family:var(--font-mono); font-size:0.8rem; line-height:1.7; color:var(--color-text-secondary); overflow:hidden; max-width:100%; position:relative; z-index:1; }
.code-line-num { color:var(--color-text-tertiary); margin-right:1.5em; user-select:none; }
.code-keyword  { color:#93c5fd; }
.code-string   { color:#86efac; }
.code-fn       { color:var(--color-accent-light); }
.code-comment  { color:var(--color-text-tertiary); font-style:italic; }
.tech-stack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); margin-top:var(--space-xl); }
.tech-item { padding:var(--space-md) var(--space-lg); background:var(--color-accent-muted); border:1px solid var(--color-accent-border); border-radius:var(--radius-lg); text-align:center; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-light); transition:background var(--transition-base),transform var(--transition-spring); }
.tech-item:hover { background:rgba(74,124,247,0.2); transform:translateY(-2px); }
@media (max-width:900px) { .service-detail-grid,.service-detail-grid.reverse { grid-template-columns:1fr; direction:ltr; } .tech-stack-grid { grid-template-columns:repeat(2,1fr); } }

/* ─── PRICING FULL PAGE ───────────────────────────────────────────────────── */
.compare-table { width:100%; border-collapse:collapse; margin-top:var(--space-3xl); }
.compare-table thead th { padding:var(--space-lg) var(--space-xl); text-align:center; font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); border-bottom:1px solid var(--glass-border); white-space:nowrap; }
.compare-table thead th:first-child { text-align:left; color:var(--color-text-secondary); font-weight:400; font-size:var(--text-xs); }
.compare-table thead th.featured-col { background:var(--color-accent-muted); border-color:var(--color-accent-border); color:var(--color-accent-light); }
.compare-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); transition:background var(--transition-fast); }
.compare-table tbody tr:hover { background:rgba(255,255,255,0.02); }
.compare-table tbody td { padding:var(--space-md) var(--space-xl); text-align:center; font-size:var(--text-sm); color:var(--color-text-secondary); }
.compare-table tbody td:first-child { text-align:left; font-size:var(--text-sm); color:var(--color-text-primary); }
.compare-table tbody td.featured-col { background:rgba(74,124,247,0.04); }
.check-icon   { color:var(--color-accent-light); font-size:1.1rem; }
.cross-icon   { color:var(--color-text-tertiary); font-size:1.1rem; }
.partial-icon { color:rgba(245,158,11,0.9); font-size:var(--text-xs); font-family:var(--font-mono); }
.pricing-faq-header { margin:var(--space-5xl) 0 var(--space-3xl); }

/* ─── GLASS PANEL (reusable) ─────────────────────────────────────────────── */
.glass-panel { background:rgba(14,14,22,0.7); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--glass-border); border-radius:var(--radius-2xl); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 20px 60px rgba(0,0,0,0.4); position:relative; overflow:hidden; }
.glass-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,transparent 100%); pointer-events:none; }

/* ─── MOBILE PERFORMANCE ─────────────────────────────────────────────────── */
@media (max-width:768px) {
    .bg-ambient::before,.bg-ambient::after { filter:none; }
    .nav-inner,.card,.pricing-card,.faq-item { backdrop-filter:none; -webkit-backdrop-filter:none; }
    .card { background:rgba(22,22,34,0.95); }
    .section { padding:var(--space-3xl) 0; }
    .section-sm { padding:var(--space-2xl) 0; }
    .section-header { margin-bottom:var(--space-2xl); }
    .section-header .lead { margin-top:var(--space-md); }
    .card:hover,.process-step:hover { transform:none; }
    .pricing-card:hover { transform:translateY(-4px); }
    .value-grid { gap:var(--space-lg); }
    .value-card { padding:var(--space-xl); }
    .media-banner { padding:var(--space-xl); gap:var(--space-lg); }
    .faq-question { padding:var(--space-md) var(--space-lg); font-size:0.95rem; gap:var(--space-md); }
    .faq-answer-inner { padding:0 var(--space-lg) var(--space-lg); line-height:1.7; }
    .monthly-teaser { padding:var(--space-lg); gap:var(--space-md); align-items:flex-start; }
}

@media (max-width:900px) { .compare-table { display:none; } }

/* ─── ADDON CARDS (pricing page) ─────────────────────────────────────────── */
.addon-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--space-md); }
.addon-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-xl); transition:border-color var(--transition-base),transform var(--transition-spring); }
.addon-card:hover { border-color:var(--color-accent-border); transform:translateY(-3px); }
.addon-price { font-size:var(--text-lg); font-weight:700; color:var(--color-accent-light); font-family:var(--font-mono); margin-top:var(--space-sm); }

/* ─── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--color-bg-primary); }
::-webkit-scrollbar-thumb { background:rgba(74,124,247,0.4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--color-accent); }

/* ─── WORD-BY-WORD HERO ANIMATION ───────────────────────────────────────── */
.word { display:inline-block; overflow:hidden; vertical-align:bottom; }
.word-inner { display:inline-block; opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1),filter 0.55s ease; }
.word-inner.revealed { opacity:1; transform:translateY(0); filter:blur(0); }
/* gradient text inside word-wrap: background-clip must be on the direct parent of the text node */
.text-gradient .word-inner { background:linear-gradient(135deg,#60a5fa 0%,#818cf8 30%,#a78bfa 60%,#7aa3ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* JS-controlled hero element reveals */
.hero-available.revealed,.hero-subtitle.revealed,.hero-actions.revealed,.casual-cta.revealed,.hero-tags.revealed { opacity:1; transform:translateY(0); }

/* ─── LOGO STRIP (tech stack marquee) ───────────────────────────────────── */
.logo-strip { padding:var(--space-xl) 0; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); overflow:hidden; }
.logo-strip-fade { display:flex; overflow:hidden; width:min(calc(100% - 48px),1180px); margin:0 auto; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); touch-action:pan-y; }
.logo-strip-fade.is-dragging { cursor:grabbing; }
.logo-strip-track { --logo-gap:clamp(42px,4vw,78px); display:flex; align-items:center; gap:var(--logo-gap); width:max-content; min-width:100%; padding-right:var(--logo-gap); flex-shrink:0; will-change:transform; }
.logo-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-width:clamp(116px,8vw,150px); flex-shrink:0; cursor:default; padding:8px 0; }
.logo-item img { height:clamp(36px,2.8vw,48px); width:auto; max-width:clamp(110px,9vw,156px); object-fit:contain; filter:brightness(0) invert(1) grayscale(1) drop-shadow(0 0 0 rgba(255,255,255,0)); opacity:0.24; transition:opacity 0.28s ease,transform 0.28s ease,filter 0.28s ease; display:block; pointer-events:none; -webkit-user-drag:none; user-drag:none; }
.logo-item:hover img { opacity:1; transform:translateY(-1px); filter:brightness(0) invert(1) grayscale(0.2) drop-shadow(0 0 16px rgba(255,255,255,0.22)); }
.logo-item.logo-item-color img { filter:grayscale(1) saturate(0.1) brightness(0.7) drop-shadow(0 0 0 rgba(255,255,255,0)); opacity:0.32; }
.logo-item.logo-item-color:hover img { opacity:1; filter:grayscale(0) saturate(1.18) brightness(1.14) contrast(1.04) drop-shadow(0 0 18px rgba(255,255,255,0.2)); }
.logo-item.logo-item-tailwind img { height:clamp(44px,3.3vw,56px); max-width:clamp(128px,10vw,176px); }
.logo-item-name { font-size:0.62rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-text-tertiary); opacity:0.44; transition:opacity 0.28s ease,color 0.28s ease; white-space:nowrap; }
.logo-item:hover .logo-item-name { opacity:1; color:var(--color-text-secondary); }
@media (max-width:900px) {
    .logo-strip-fade { width:min(calc(100% - 32px),1180px); }
    .logo-strip-track { --logo-gap:clamp(30px,6vw,52px); }
    .logo-item { min-width:100px; gap:7px; }
    .logo-item img { height:34px; max-width:120px; }
    .logo-item.logo-item-tailwind img { height:40px; max-width:136px; }
}

/* ─── SCROLL PROGRESS (left side) ───────────────────────────────────────── */
.scroll-progress { position:fixed; left:0; top:0; bottom:0; width:3px; z-index:var(--z-sticky); pointer-events:none; background:rgba(255,255,255,0.035); }
.scroll-progress-fill { width:100%; height:0%; background:var(--gradient-accent); border-radius:0 2px 2px 0; }

/* ─── SECTION ANCHORS NAV (leistungen) ───────────────────────────────────── */
.section-anchors { border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:sticky; top:0; z-index:var(--z-sticky); }
.section-anchors-inner { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0; }
.section-anchors-inner::-webkit-scrollbar { display:none; }
.section-anchor-link { padding:12px 20px; font-size:var(--text-sm); white-space:nowrap; color:var(--color-text-secondary); border-radius:var(--radius-md); transition:color var(--transition-fast),background var(--transition-fast); }
.section-anchor-link:hover,.section-anchor-link.active { color:var(--color-accent-light); background:var(--color-accent-muted); }

/* ─── PRICING TOGGLE ─────────────────────────────────────────────────────── */
.pricing-toggle { display:inline-flex; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-full); padding:4px; gap:2px; margin-bottom:var(--space-3xl); }
.pricing-toggle-btn { padding:10px 28px; font-size:var(--text-sm); font-weight:600; color:var(--color-text-secondary); border-radius:var(--radius-full); transition:all var(--transition-base); white-space:nowrap; }
.pricing-toggle-btn.active { background:var(--gradient-accent); color:#fff; box-shadow:0 4px 16px rgba(74,124,247,0.3); }
.pricing-toggle-btn:hover:not(.active) { color:var(--color-text-primary); background:var(--glass-bg-hover); }

/* ─── PRICE SLIDER ───────────────────────────────────────────────────────── */
.abo-slider-wrap { margin-bottom:var(--space-xl); }
.abo-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,0.1); outline:none; cursor:pointer; }
.abo-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--gradient-accent); cursor:pointer; box-shadow:0 0 0 4px rgba(74,124,247,0.2),0 4px 12px rgba(74,124,247,0.4); transition:box-shadow var(--transition-base),transform var(--transition-base); }
.abo-slider::-webkit-slider-thumb:hover { box-shadow:0 0 0 6px rgba(74,124,247,0.25),0 4px 16px rgba(74,124,247,0.5); transform:scale(1.1); }
.abo-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--gradient-accent); cursor:pointer; border:none; box-shadow:0 4px 12px rgba(74,124,247,0.4); }
.abo-slider-track-labels { display:flex; justify-content:space-between; margin-top:var(--space-sm); }
.abo-slider-track-labels span { font-size:var(--text-xs); color:var(--color-text-tertiary); font-family:var(--font-mono); }
.abo-slider-hint { font-size:var(--text-xs); color:var(--color-text-tertiary); text-align:center; margin-top:var(--space-sm); }
.abo-feature-list li.locked { opacity:0.3; pointer-events:none; }
.abo-feature-list li.locked .abo-check { background:rgba(255,255,255,0.04); color:var(--color-text-tertiary); }
.abo-feature-list li { transition:opacity 0.3s ease; }

/* ─── CASUAL CTA (Keine Ahnung button) ───────────────────────────────────── */
.casual-cta { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-xl); font-size:var(--text-sm); color:var(--color-text-secondary); opacity:0; transform:translateY(18px); transition:all var(--transition-spring); cursor:pointer; text-decoration:none; }
.casual-cta:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); color:var(--color-text-primary); transform:translateY(-2px); }
.casual-cta-icon { width:32px; height:32px; background:var(--color-accent-muted); border:1px solid var(--color-accent-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-accent-light); flex-shrink:0; }

/* ─── PERSONAL BADGE ─────────────────────────────────────────────────────── */
.personal-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; background:rgba(74,124,247,0.06); border:1px solid rgba(74,124,247,0.15); border-radius:var(--radius-full); font-size:var(--text-xs); color:var(--color-text-secondary); margin-bottom:var(--space-lg); }
.personal-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--color-accent-light); flex-shrink:0; }

/* ─── MONATSABO ───────────────────────────────────────────────────────────── */
.abo-layout { display:grid; grid-template-columns:360px 1fr; gap:var(--space-2xl); align-items:start; margin-top:var(--space-3xl); }
.abo-main-card { background:linear-gradient(160deg,rgba(74,124,247,0.10) 0%,rgba(7,7,14,0.96) 70%); border:1px solid var(--glass-border-accent); border-radius:var(--radius-2xl); padding:var(--space-2xl); position:relative; overflow:hidden; box-shadow:var(--glow-blue),var(--shadow-lg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.abo-main-card::before { content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px; background:radial-gradient(circle,rgba(74,124,247,0.14) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.abo-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; background:var(--gradient-accent); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700; color:#fff; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:var(--space-xl); box-shadow:0 4px 16px rgba(74,124,247,0.3); }
.abo-price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:var(--space-sm); }
.abo-price-from { font-size:var(--text-base); color:var(--color-text-secondary); }
.abo-price-num-clip { overflow:hidden; display:inline-block; vertical-align:bottom; }
.abo-price-num { font-size:var(--text-5xl); font-weight:800; letter-spacing:-0.04em; line-height:1; background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; }
.abo-price-num.price-from-right { animation:priceFromRight 0.28s cubic-bezier(0.16,1,0.3,1) both; }
.abo-price-num.price-from-left  { animation:priceFromLeft  0.28s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes priceFromRight { from { transform:translateX(38px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes priceFromLeft  { from { transform:translateX(-38px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.abo-price-period { font-size:var(--text-xl); font-weight:400; color:var(--color-text-secondary); }
.abo-price-note { font-size:var(--text-xs); color:var(--color-text-tertiary); font-family:var(--font-mono); margin-bottom:var(--space-xl); }
.abo-feature-list { display:flex; flex-direction:column; gap:var(--space-sm); margin-bottom:var(--space-2xl); list-style:none; }
.abo-feature-list li { display:flex; align-items:flex-start; gap:10px; font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.55; }
.abo-feature-list li .abo-check { flex-shrink:0; width:18px; height:18px; background:var(--color-accent-muted); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-accent-light); margin-top:1px; }
.abo-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-content:start; }
.abo-info-card { padding:var(--space-xl); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:border-color var(--transition-base),background var(--transition-base),transform var(--transition-spring); }
.abo-info-card:hover { border-color:var(--glass-border-accent); background:var(--glass-bg-hover); transform:translateY(-4px); }
.abo-info-icon { font-size:1.6rem; display:block; margin-bottom:var(--space-md); filter:drop-shadow(0 0 10px rgba(74,124,247,0.35)); }
.abo-info-card h3 { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-sm); }
.abo-info-card p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.7; }
@media (max-width:1060px) { .abo-layout { grid-template-columns:1fr; } }
@media (max-width:640px)  { .abo-info-grid { grid-template-columns:1fr; } }

/* ─── UTILITY ────────────────────────────────────────────────────────────── */
.text-center { text-align:center; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.gap-sm       { gap:var(--space-sm); }
.gap-md       { gap:var(--space-md); }
.gap-lg       { gap:var(--space-lg); }
.mt-sm  { margin-top:var(--space-sm); }
.mt-md  { margin-top:var(--space-md); }
.mt-lg  { margin-top:var(--space-lg); }
.mt-xl  { margin-top:var(--space-xl); }
.mt-2xl { margin-top:var(--space-2xl); }
.mt-3xl { margin-top:var(--space-3xl); }
.mt-4xl { margin-top:var(--space-4xl); }
.mt-5xl { margin-top:var(--space-5xl); }
.w-full { width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ─── SERVICE SIDE NAV (leistungen only) ──────────────────────────────────── */
.service-side-nav { position:fixed; left:clamp(8px,1.5vw,24px); top:50%; transform:translateY(-50%); z-index:var(--z-sticky); display:flex; flex-direction:column; gap:10px; padding:var(--space-lg) 0; pointer-events:auto; }
.service-side-link { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--color-text-tertiary); padding:4px 10px 4px 12px; border-left:2px solid transparent; transition:color 0.3s cubic-bezier(0.16,1,0.3,1),border-color 0.3s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-origin:left center; white-space:nowrap; }
.service-side-link:hover { color:var(--color-text-secondary); border-left-color:rgba(74,124,247,0.35); }
.service-side-link.near { transform:scale(1.09); color:var(--color-text-secondary); }
.service-side-link.active { color:var(--color-text-primary); border-left-color:var(--color-accent-light); transform:scale(1.25); }
.service-side-num { font-family:var(--font-mono); font-size:0.6rem; color:inherit; opacity:0.5; flex-shrink:0; line-height:1.4; transition:opacity 0.3s; }
.service-side-text { font-size:var(--text-xs); font-weight:500; line-height:1.3; transition:font-weight 0.25s; }
.service-side-link.active .service-side-num { opacity:0.85; }
.service-side-link.active .service-side-text { font-weight:700; }
@media (max-width:1320px) { .service-side-nav { display:none; } }

/* ─── PRICING TOGGLE PANELS ───────────────────────────────────────────────── */
#pricing-once-panel.hidden,#pricing-addons-panel.hidden,#monatsabo.panel-hidden { display:none; }

/* ─── PRICING CARD STAIRCASE ──────────────────────────────────────────────── */
.pricing-full-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); align-items:stretch; margin-top:var(--space-3xl); }
@media (max-width:1100px) { .pricing-full-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .pricing-full-grid { grid-template-columns:1fr; } }

/* ─── CUSTOM PRICING CARD ─────────────────────────────────────────────────── */
.pricing-card.pricing-custom { border-style:dashed; border-color:rgba(74,124,247,0.28); background:linear-gradient(160deg,rgba(74,124,247,0.05) 0%,rgba(7,7,14,0.97) 100%); }
.pricing-card.pricing-custom .pricing-price { background:none; -webkit-text-fill-color:var(--color-text-secondary); font-size:var(--text-xl); font-weight:600; }

/* ─── MONTHLY TEASER (index.html pricing section) ─────────────────────────── */
.monthly-teaser { display:flex; align-items:center; gap:var(--space-xl); justify-content:space-between; padding:var(--space-lg) var(--space-2xl); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); margin-top:var(--space-2xl); }
.monthly-teaser-text { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.55; }
.monthly-teaser-text strong { color:var(--color-text-primary); font-weight:600; }
.monthly-teaser-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.65rem; color:var(--color-accent-light); background:var(--color-accent-muted); border:1px solid var(--color-accent-border); border-radius:var(--radius-full); padding:3px 10px; margin-bottom:var(--space-sm); text-transform:uppercase; letter-spacing:0.08em; }
.monthly-teaser-link { flex-shrink:0; font-size:var(--text-sm); font-weight:600; color:var(--color-accent-light); border:1px solid var(--color-accent-border); border-radius:var(--radius-full); padding:8px 20px; transition:all var(--transition-spring); white-space:nowrap; }
.monthly-teaser-link:hover { background:var(--color-accent-muted); border-color:var(--color-accent); }
@media (max-width:640px) { .monthly-teaser { flex-direction:column; align-items:flex-start; } }

/* ─── MEDIA CROSSPROMO — olivrr.de blend ──────────────────────────────────── */
:root { --color-media-orange:#f97316; --color-media-orange-muted:rgba(249,115,22,0.07); --color-media-orange-border:rgba(249,115,22,0.22); }
.media-crosspromo-section { background:linear-gradient(180deg,transparent 0%,rgba(249,115,22,0.025) 50%,transparent 100%); }
.media-banner.orange-theme { background:linear-gradient(135deg,rgba(74,124,247,0.07) 0%,rgba(249,115,22,0.08) 65%,rgba(249,115,22,0.03) 100%); border-color:var(--color-media-orange-border); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 0 60px rgba(249,115,22,0.06); }
.media-banner.orange-theme::before { background:radial-gradient(circle,rgba(249,115,22,0.12) 0%,transparent 70%); }
.media-banner.orange-theme .media-banner-label { color:var(--color-media-orange); }
.media-banner.orange-theme .btn-primary { background:linear-gradient(135deg,#ea6c10,#f97316); box-shadow:0 4px 16px rgba(249,115,22,0.35); border-color:transparent; }
.media-banner.orange-theme .btn-primary:hover { background:linear-gradient(135deg,#d45e0a,#ea6c10); box-shadow:0 6px 24px rgba(249,115,22,0.45); transform:translateY(-2px); }
/* Video card in kontakt */
.contact-info-card.media-card { border-color:var(--color-media-orange-border); background:linear-gradient(160deg,rgba(249,115,22,0.06) 0%,rgba(7,7,14,0.97) 100%); }
.contact-info-card.media-card h3 { color:var(--color-text-primary); }
.contact-info-card.media-card .btn-ghost { color:var(--color-media-orange); border:1px solid var(--color-media-orange-border); border-radius:var(--radius-full); padding:8px 18px; }
.contact-info-card.media-card .btn-ghost:hover { background:var(--color-media-orange-muted); border-color:var(--color-media-orange); color:var(--color-media-orange); }

/* ─── CONTACT WIZARD ──────────────────────────────────────────────────────── */
.wizard-progress { display:flex; align-items:flex-start; justify-content:center; gap:0; margin-bottom:var(--space-3xl); }
.wizard-step-ind { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; min-width:52px; }
.wizard-step-bubble { width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; color:var(--color-text-tertiary); font-family:var(--font-mono); transition:all 0.4s cubic-bezier(0.16,1,0.3,1); }
.wizard-step-lbl { font-size:0.6rem; font-family:var(--font-mono); color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; transition:color 0.3s; }
.wizard-step-ind.active .wizard-step-bubble { border-color:var(--color-accent); background:var(--color-accent-muted); color:var(--color-accent-light); box-shadow:0 0 20px rgba(74,124,247,0.3); transform:scale(1.12); }
.wizard-step-ind.active .wizard-step-lbl { color:var(--color-accent-light); }
.wizard-step-ind.done .wizard-step-bubble { border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
.wizard-step-ind.done .wizard-step-lbl { color:var(--color-text-secondary); }
.wizard-progress-track { flex:1; height:2px; background:rgba(255,255,255,0.07); position:relative; overflow:hidden; align-self:center; margin-bottom:28px; min-width:16px; }
.wizard-progress-fill { position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light)); transition:width 0.5s cubic-bezier(0.16,1,0.3,1); }
.wizard-step { display:none; }
.wizard-step.active { display:block; animation:wizardSlideIn 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.wizard-step.active.going-back { animation:wizardSlideBack 0.35s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes wizardSlideIn   { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes wizardSlideBack { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
.wizard-title { font-size:var(--text-xl); font-weight:700; margin-bottom:var(--space-sm); }
.wizard-subtitle { font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-2xl); line-height:1.6; }
.wizard-choices { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.wizard-choice { padding:var(--space-lg) var(--space-xl); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-xl); cursor:pointer; text-align:left; transition:all var(--transition-spring); position:relative; display:flex; flex-direction:column; }
.wizard-choice:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateY(-3px); }
.wizard-choice.recommended { border-color:var(--color-accent-border); background:linear-gradient(160deg,rgba(74,124,247,0.09),rgba(7,7,14,0.95)); }
.wizard-choice.selected { background:var(--color-accent-muted); border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent); }
.wizard-choice-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-lg); background:var(--color-accent-muted); border:1px solid var(--color-accent-border); color:var(--color-accent-light); margin-bottom:var(--space-md); flex-shrink:0; transition:background var(--transition-base); }
.wizard-choice.selected .wizard-choice-icon { background:rgba(74,124,247,0.2); }
.wizard-choice-label { font-size:var(--text-sm); font-weight:700; color:var(--color-text-primary); display:block; margin-bottom:3px; }
.wizard-choice-desc { font-size:var(--text-xs); color:var(--color-text-secondary); line-height:1.5; }
.wizard-recommended-badge { position:absolute; top:-10px; right:14px; background:var(--gradient-accent); color:#fff; font-size:0.6rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.wizard-back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--color-text-tertiary); background:none; border:none; cursor:pointer; padding:0; margin-bottom:var(--space-xl); transition:color var(--transition-base); }
.wizard-back-btn:hover { color:var(--color-text-secondary); }
.step1-variant { display:none; }
.step1-variant.active { display:block; }
@media (max-width:520px) { .wizard-choices { grid-template-columns:1fr; } .wizard-step-lbl { display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   REWORK: [Subagent 1] — Mobile UX Overhaul
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Nav hamburger — minimum 44×44px tap target */
@media (max-width: 900px) {
    /* REWORK: [Subagent 1] — Ensure nav toggle meets 44×44px minimum tap target */
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
}

/* 2. Form inputs — prevent iOS auto-zoom (triggers when font-size < 16px) */
/* REWORK: [Subagent 1] — .form-input uses var(--text-sm) ≈ 14px; override to 16px on mobile */
@media (max-width: 768px) {
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* 3. Site-notice dismiss — ensure 44px tap target on mobile */
/* REWORK: [Subagent 1] — Dismiss button had min-height 42px; bump to 44px */
@media (max-width: 640px) {
    .site-notice-dismiss {
        min-height: 44px;
    }
}

/* REWORK: [Subagent 5] — Entrance animations via IntersectionObserver */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
  }
  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover transitions for interactive elements (150ms) */
/* REWORK: [Subagent 5] — Ensure hover transitions on all interactive elements */
a:not([class]) {
  transition: color 150ms ease-out, opacity 150ms ease-out;
}