/* =============================================
   SPECTRUM GLOW V3.1 — HermeticWisdom.org
   Gedeeld stylesheet
   ============================================= */

/* --- Custom Properties --- */
:root {
    /* Achtergronden */
    --bg: #0f172a;
    --bg2: #1e293b;
    --bg3: #334155;

    /* Hoofdkleuren */
    --amber: #fbbf24;
    --amber-glow: rgba(251, 191, 36, 0.4);
    --blue: #3b82f6;
    --blue-glow: rgba(59, 130, 246, 0.4);
    --purple: #8b5cf6;
    --purple-glow: rgba(139, 92, 246, 0.4);
    --cyan: #22d3ee;
    --pink: #ec4899;
    --gold: #f59e0b;
    --green: #22c55e;
    --orange: #f97316;

    /* Tekst */
    --t1: #f1f5f9;
    --t2: #94a3b8;
    --t3: #64748b;

    /* Gradiënten */
    --gs: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    --gg: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);

    /* Spacing */
    --xs: 0.25rem;
    --sm: 0.5rem;
    --md: 1rem;
    --lg: 1.5rem;
    --xl: 2rem;
    --2xl: 3rem;
    --3xl: 4rem;

    /* Border radius */
    --r1: 8px;
    --r2: 12px;
    --r3: 20px;
    --r4: 30px;

    /* Aliassen (gebruikt in sommige pagina's) */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --gradient-spectrum: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --gp: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --amber-g: rgba(251, 191, 36, 0.35);
    --blue-g: rgba(59, 130, 246, 0.35);
    --purple-g: rgba(139, 92, 246, 0.35);
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;
    --sp-3xl: 4rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 30px;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
}

/* --- Reset & Body --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--t1);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* --- Spectrum Gradient Animatie --- */
@keyframes spectrumMove {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #22d3ee, #3b82f6);
    background-size: 300% 100%;
    animation: spectrumMove 5s linear infinite;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--md);
}

/* Logo */
.logo {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--gs);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: var(--sm);
    flex-shrink: 0;
}

.logo-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px var(--amber-glow));
    -webkit-text-fill-color: var(--amber);
}

/* Navigatie */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sm);
    padding: 0.35rem 0.9rem;
    color: var(--t2);
    text-decoration: none;
    border-radius: var(--r1);
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--t1);
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Header rechter gedeelte */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sm);
    flex-shrink: 0;
}

.lang-switch {
    font-size: 0.82rem;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.lang-switch a {
    color: var(--t3);
    text-decoration: none;
    transition: color 0.2s;
}

.lang-switch a:hover,
.lang-switch .active {
    color: var(--t1);
}

.search-input {
    padding: 0.35rem 0.75rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--r1);
    color: var(--t1);
    font-size: 0.82rem;
    width: 140px;
    outline: none;
    transition: border-color 0.3s;
}

.search-input::placeholder {
    color: var(--t3);
}

.search-input:focus {
    border-color: var(--blue);
}

.btn-donate {
    padding: 0.4rem 1rem;
    background: var(--gg);
    color: #0f172a;
    text-decoration: none;
    border-radius: var(--r1);
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-donate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.35);
}

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--t1);
    border-radius: 2px;
    transition: all 0.3s;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--bg2);
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    margin-top: 0;
}

.footer-top {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--2xl) var(--xl);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: var(--2xl);
}

.footer-brand .ft-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: var(--md);
    background: var(--gs);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand .ft-logo .fi {
    font-size: 1.4rem;
    -webkit-text-fill-color: var(--amber);
    filter: drop-shadow(0 0 6px var(--amber-glow));
}

.footer-brand .ft-desc {
    font-size: 0.88rem;
    color: var(--t2);
    line-height: 1.7;
    margin-bottom: var(--md);
}

.footer-brand .ft-tagline {
    font-size: 0.85rem;
    color: var(--t3);
    font-style: italic;
    margin-bottom: var(--lg);
}

.btn-kofi {
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
    padding: 0.5rem 1.25rem;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--amber);
    text-decoration: none;
    border-radius: var(--r2);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-kofi:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: var(--amber);
    transform: translateY(-2px);
}

/* Footer navigatie */
.footer-nav h4,
.footer-newsletter h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--amber);
    margin-bottom: var(--md);
}

.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sm);
}

.footer-nav a {
    color: var(--t2);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--t1);
}

/* Footer nieuwsbrief */
.footer-newsletter p {
    font-size: 0.88rem;
    color: var(--t2);
    margin-bottom: var(--md);
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--sm);
}

.newsletter-form input[type="email"] {
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--r1);
    color: var(--t1);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.3s;
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--t3);
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--blue);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--sm);
    font-size: 0.78rem;
    color: var(--t3);
    cursor: pointer;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--amber);
}

.checkbox-label a {
    color: var(--amber);
    text-decoration: underline;
}

.btn-submit {
    padding: 0.5rem 1.25rem;
    background: var(--gs);
    color: white;
    border: none;
    border-radius: var(--r1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    align-self: flex-start;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

/* Footer onderste balk */
.footer-bottom {
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    background: rgba(15, 23, 42, 0.5);
}

.footer-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--md) var(--xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sm);
    font-size: 0.8rem;
    color: var(--t3);
}

.footer-bottom-inner .ft-tagline-bottom {
    font-style: italic;
    opacity: 0.7;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: var(--md);
    flex-wrap: wrap;
}

.footer-bottom-right a {
    color: var(--t3);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom-right a:hover {
    color: var(--amber);
}

.footer-bottom-right .lang-switch-footer {
    font-size: 0.8rem;
}

/* =============================================
   COOKIE BANNER
   ============================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(30, 41, 59, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(251, 191, 36, 0.2);
    padding: var(--lg) var(--xl);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.cookie-inner h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--sm);
    color: var(--t1);
}

.cookie-inner > p {
    font-size: 0.88rem;
    color: var(--t2);
    margin-bottom: var(--md);
    line-height: 1.6;
}

.cookie-inner > p a {
    color: var(--amber);
    text-decoration: underline;
}

.cookie-toggles {
    display: flex;
    gap: var(--lg);
    margin-bottom: var(--lg);
    flex-wrap: wrap;
}

.cookie-toggle {
    display: flex;
    align-items: center;
    gap: var(--sm);
    font-size: 0.88rem;
    color: var(--t2);
}

.cookie-toggle input[type="checkbox"] {
    accent-color: var(--amber);
    width: 18px;
    height: 18px;
}

.cookie-buttons {
    display: flex;
    gap: var(--sm);
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--r1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.cookie-btn-accept {
    background: var(--gg);
    color: #0f172a;
}

.cookie-btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(251, 191, 36, 0.3);
}

.cookie-btn-save {
    background: rgba(59, 130, 246, 0.15);
    color: var(--t1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.cookie-btn-save:hover {
    background: rgba(59, 130, 246, 0.25);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--t3);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.cookie-btn-reject:hover {
    color: var(--t2);
    border-color: rgba(100, 116, 139, 0.5);
}

/* =============================================
   MAIN CONTENT
   ============================================= */
main {
    min-height: 60vh;
}

/* --- Utility --- */
.section {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--2xl) var(--xl);
}

.sec-header {
    text-align: center;
    margin-bottom: var(--xl);
}

.sec-header h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: var(--sm);
}

.sec-header p {
    color: var(--t2);
    font-size: 1.05rem;
    max-width: 650px;
    margin: 0 auto;
}

.gradient-text {
    background: var(--gs);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(30, 20, 50, 0.9) 50%, rgba(15, 23, 42, 1) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    padding: var(--3xl) var(--xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.hero-symbol {
    font-size: 5rem;
    margin-bottom: var(--md);
    filter: drop-shadow(0 0 30px var(--amber-glow));
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--md);
}

.hero-sub {
    font-size: 1.15rem;
    color: var(--t2);
    max-width: 650px;
    margin: 0 auto var(--xl);
    line-height: 1.8;
}

.hero-btns {
    display: flex;
    gap: var(--md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero {
    padding: 0.9rem 2.2rem;
    background: var(--gs);
    color: white;
    text-decoration: none;
    border-radius: var(--r2);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
}

.btn-outline {
    padding: 0.9rem 2rem;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.4);
    color: var(--t1);
    text-decoration: none;
    border-radius: var(--r2);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
}

.btn-outline:hover {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.1);
}

/* --- Kaarten --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lg);
}

.card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--r3);
    padding: var(--xl);
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.card:hover {
    border-color: rgba(139, 92, 246, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.1);
}

.card-icon {
    font-size: 2.2rem;
    margin-bottom: var(--md);
}

.card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--sm);
    color: var(--t1);
}

.card p {
    font-size: 0.9rem;
    color: var(--t2);
    line-height: 1.6;
}

/* --- Artikel kaarten --- */
.article-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--r3);
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    border-color: rgba(251, 191, 36, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(251, 191, 36, 0.08);
}

.article-card-banner {
    height: 5px;
    background: var(--gs);
}

.article-card-body {
    padding: var(--lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: var(--r4);
    background: rgba(251, 191, 36, 0.15);
    color: var(--amber);
    align-self: flex-start;
    margin-bottom: var(--sm);
}

.article-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--sm);
    color: var(--t1);
    line-height: 1.4;
}

.article-card p {
    font-size: 0.88rem;
    color: var(--t2);
    line-height: 1.6;
    flex: 1;
}

.article-card-meta {
    margin-top: var(--md);
    font-size: 0.78rem;
    color: var(--t3);
    display: flex;
    gap: var(--md);
}

/* --- Citaat --- */
.quote-section {
    background: rgba(251, 191, 36, 0.04);
    border-top: 1px solid rgba(251, 191, 36, 0.1);
    border-bottom: 1px solid rgba(251, 191, 36, 0.1);
    padding: var(--2xl) var(--xl);
    text-align: center;
}

.quote-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.quote-inner::before {
    content: '\201C';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;
    color: var(--amber);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

.quote-inner blockquote {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--t1);
    line-height: 1.8;
    margin-bottom: var(--md);
}

.quote-inner cite {
    font-size: 0.9rem;
    color: var(--amber);
    font-style: normal;
    font-weight: 600;
}

/* --- Donatie sectie --- */
.donate-section {
    padding: var(--xl) var(--xl);
    text-align: center;
}

.donate-inner {
    max-width: 600px;
    margin: 0 auto;
}

.donate-inner h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--sm);
    color: var(--t1);
}

.donate-inner p {
    font-size: 0.92rem;
    color: var(--t2);
    margin-bottom: var(--md);
    line-height: 1.6;
}

/* --- Formulieren --- */
.form-group {
    margin-bottom: var(--md);
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: var(--xs);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--r1);
    color: var(--t1);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--blue);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--t3);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-success {
    display: none;
    padding: var(--md);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--r2);
    color: var(--green);
    font-size: 0.92rem;
    text-align: center;
}

/* --- Pagina content (privacy, cookies, impressum) --- */
.page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--2xl) var(--xl);
}

.page-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: var(--md);
    background: linear-gradient(135deg, var(--t1) 0%, var(--amber) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--t1);
    margin: var(--2xl) 0 var(--md);
    padding-bottom: var(--sm);
    border-bottom: 2px solid rgba(251, 191, 36, 0.2);
    position: relative;
}

.page-content h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--amber);
}

.page-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--amber);
    margin: var(--xl) 0 var(--sm);
}

.page-content p {
    color: var(--t2);
    margin-bottom: var(--md);
    font-size: 1rem;
    line-height: 1.8;
}

.page-content ul,
.page-content ol {
    margin: var(--sm) 0 var(--md) var(--xl);
    color: var(--t2);
    font-size: 1rem;
    line-height: 1.8;
}

.page-content li {
    margin-bottom: var(--xs);
}

.page-content strong {
    color: var(--t1);
}

.page-content a {
    color: var(--amber);
    text-decoration: underline;
}

.page-content .update-date {
    font-size: 0.85rem;
    color: var(--t3);
    font-style: italic;
    margin-top: var(--2xl);
    padding-top: var(--md);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

/* --- Course hero --- */
.course-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(30, 20, 50, 0.9) 50%, rgba(15, 23, 42, 1) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    padding: var(--3xl) var(--xl);
    position: relative;
    overflow: hidden;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--blue);
    padding: 0.25rem 1rem;
    border-radius: var(--r4);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--lg);
}

.course-sub {
    font-size: 1.15rem;
    color: var(--t2);
    max-width: 700px;
    margin: 0 auto var(--xl);
    line-height: 1.8;
    text-align: center;
}

.course-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--t2);
    margin-bottom: var(--xl);
}

/* --- Talen tabs & grid --- */
.talen-tabs {
    display: flex;
    gap: var(--sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--lg);
}

.ttab {
    padding: var(--xs) var(--md);
    border-radius: var(--r4);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--t2);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
}

.ttab.active, .ttab:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--blue);
    color: var(--t1);
}

.talen-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sm);
    transition: all 0.3s;
}

.talen-grid.extended {
    grid-template-columns: repeat(7, 1fr);
}

.taal-pill {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--r2);
    padding: var(--lg) var(--sm);
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.taal-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.08);
}

.taal-pill.extra {
    border-color: rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, rgba(30, 41, 59, 1), rgba(30, 41, 59, 0.7));
}

.taal-pill.extra:hover { border-color: rgba(139, 92, 246, 0.5); }

.taal-pill .tnr {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.taal-pill .tico { font-size: 1.8rem; margin-bottom: var(--sm); }
.taal-pill .tname { font-size: 0.82rem; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.taal-pill .tsub { font-size: 0.72rem; color: var(--t3); line-height: 1.4; }

.taal-pill .tbadge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--r4);
    background: rgba(139, 92, 246, 0.2);
    color: var(--purple);
    margin-top: 4px;
}

/* --- Filter tabs --- */
.filter-tabs { display: flex; gap: var(--sm); flex-wrap: wrap; }

.ftab {
    padding: var(--xs) var(--md);
    border-radius: var(--r4);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--t2);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
}

.ftab.active, .ftab:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--blue);
    color: var(--t1);
}

/* --- Modules wrap --- */
.modules-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--xl) var(--3xl);
}

.mod-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--xl);
    flex-wrap: wrap;
    gap: var(--md);
}

.mod-head h2 { font-size: 1.8rem; font-weight: 700; }

/* --- Module body columns --- */
.mod-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--xl);
    margin-bottom: var(--lg);
}

.col-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--md);
}

.oef-list { display: flex; flex-direction: column; gap: var(--sm); }

.oef {
    display: flex;
    align-items: flex-start;
    gap: var(--sm);
    font-size: 0.87rem;
    color: var(--t2);
    line-height: 1.5;
}

.oef::before {
    content: '✦';
    color: var(--amber);
    flex-shrink: 0;
    font-size: 0.65rem;
    margin-top: 5px;
}

/* --- Module extra tag kleuren --- */
.tag-c { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.tag-a { background: rgba(139, 92, 246, 0.15); color: var(--purple); }
.tag-e { background: rgba(236, 72, 153, 0.15); color: var(--pink); }

/* --- Tempo sectie --- */
.tempo-sec {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--2xl) var(--xl);
}

.tempo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lg);
    margin-top: var(--xl);
}

.tempo-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--r3);
    padding: var(--xl);
    text-align: center;
    transition: all 0.3s;
}

.tempo-card:hover { border-color: rgba(251, 191, 36, 0.3); transform: translateY(-3px); }
.tempo-card .ticon { font-size: 1.8rem; margin-bottom: var(--sm); }
.tempo-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.tempo-card .tduur { font-size: 0.85rem; color: var(--amber); font-weight: 600; margin-bottom: var(--md); }
.tempo-card p { font-size: 0.87rem; color: var(--t3); line-height: 1.6; }

/* --- Breadcrumb (alt classes) --- */
.breadcrumb-bar {
    background: var(--bg2);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    padding: 0.4rem 0;
}

.breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--t3);
}

.breadcrumb a {
    color: var(--t3);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover { color: var(--amber); }

/* --- Breadcrumb --- */
.bc-bar {
    background: var(--bg2);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    padding: 0.4rem 0;
}

.bc {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--t3);
}

.bc a {
    color: var(--t3);
    text-decoration: none;
    transition: color 0.2s;
}

.bc a:hover { color: var(--amber); }

/* --- Hero varianten --- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--purple);
    padding: 0.25rem 1rem;
    border-radius: var(--r4);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--lg);
}

.hero h1 em {
    font-style: normal;
    background: var(--gs);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--t2);
    margin-bottom: var(--xl);
}

.stat {
    display: flex;
    align-items: center;
    gap: var(--sm);
    font-size: 0.9rem;
    color: var(--t2);
}

.stat strong { color: var(--t1); }
.hero-stats strong { color: var(--t1); }

/* --- Cursussen grid & kaarten --- */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.course-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--r3);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    border-color: rgba(139, 92, 246, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.1);
}

.course-card.available { border-color: rgba(251, 191, 36, 0.2); }
.course-card.available:hover { border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 12px 35px rgba(251, 191, 36, 0.1); }

.cc-banner { height: 6px; width: 100%; }
.cc-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.cc-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cc-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--r4); }
.badge-live { background: rgba(34, 197, 94, 0.15); color: var(--green); }
.badge-soon { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
.badge-plan { background: rgba(100, 116, 139, 0.15); color: var(--t3); }
.cc-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.cc-body h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--t1); }
.cc-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s; }
.cc-body h3 a:hover { color: var(--amber); }
.cc-desc { font-size: 0.88rem; color: var(--t2); line-height: 1.6; margin-bottom: 1rem; flex: 1; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--t3); margin-bottom: 1rem; }
.cc-meta span { display: flex; align-items: center; gap: 0.3rem; }
.cc-actions { display: flex; gap: 0.5rem; margin-top: auto; }

/* --- Button varianten --- */
.btn-start {
    padding: 0.5rem 1.25rem;
    background: var(--gs);
    color: white;
    border-radius: var(--r2);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

.btn-outline-sm {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--t2);
    border-radius: var(--r2);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-outline-sm:hover { border-color: var(--blue); color: var(--t1); background: rgba(59, 130, 246, 0.08); }

.btn-disabled {
    padding: 0.5rem 1.25rem;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.15);
    color: var(--t3);
    border-radius: var(--r2);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: default;
}

.btn-prev {
    padding: var(--sm) var(--lg);
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--t2);
    border-radius: var(--r2);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
}

.btn-prev:hover { border-color: var(--blue); color: var(--t1); }

/* --- Module accordion --- */
.modules-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mod-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--r3);
    overflow: hidden;
    transition: all 0.3s;
}

.mod-card:hover { border-color: rgba(59, 130, 246, 0.25); }
.mod-card.open { border-color: rgba(251, 191, 36, 0.25); box-shadow: 0 6px 25px rgba(251, 191, 36, 0.06); }

.mod-hdr {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 2rem;
    cursor: pointer;
    user-select: none;
}

.mod-hdr:hover { background: rgba(255, 255, 255, 0.02); }

.mod-nr {
    width: 52px;
    height: 52px;
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.mod-info h3 { font-size: 1.05rem; font-weight: 700; color: var(--t1); margin-bottom: 2px; line-height: 1.3; }
.mod-info .mod-tl { font-size: 0.85rem; color: var(--t3); font-style: italic; }

.mod-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.mtag { font-size: 0.72rem; padding: 2px 10px; border-radius: var(--r4); font-weight: 600; white-space: nowrap; }
.tag-b { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
.tag-t { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.tag-i { background: rgba(34, 197, 94, 0.15); color: var(--green); }

.chevron { color: var(--t3); font-size: 1rem; transition: transform 0.3s; flex-shrink: 0; }
.mod-card.open .chevron { transform: rotate(180deg); }

.mod-body { display: none; padding: 1rem 2rem 1.5rem; border-top: 1px solid rgba(59, 130, 246, 0.08); }
.mod-card.open .mod-body { display: block; }

.les-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

.les {
    display: flex;
    text-decoration: none;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: var(--r1);
    transition: all 0.2s;
    color: var(--t2);
}

.les:hover { background: rgba(59, 130, 246, 0.08); color: var(--t1); }
.les-ic { font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; }
.les-txt { font-size: 0.87rem; line-height: 1.5; }
.les-txt strong { color: var(--t1); }
.les-time { font-size: 0.75rem; color: var(--t3); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

.mod-footer {
    border-top: 1px solid rgba(59, 130, 246, 0.08);
    padding-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.dur { font-size: 0.8rem; color: var(--t3); margin-left: auto; }

/* Module kleuren */
.c-0 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05)); color: var(--amber); }
.c-1 { background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.05)); color: var(--cyan); }
.c-2 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05)); color: var(--amber); }
.c-3 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); color: var(--purple); }
.c-4 { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05)); color: var(--orange); }
.c-5 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); color: var(--blue); }
.c-6 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1)); color: var(--purple); }
.c-7 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05)); color: var(--amber); }
.c-8 { background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.05)); color: var(--cyan); }
.c-9 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1)); color: var(--purple); }
.c-i { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); color: var(--green); }
.c-s { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(139, 92, 246, 0.1)); color: var(--amber); }
.c-10 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.1)); color: var(--pink); }
.c-11 { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.1)); color: var(--cyan); }
.c-12 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.1)); color: var(--gold); }
.c-13 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(251, 191, 36, 0.1)); color: var(--green); }

/* --- Les pagina stijlen --- */
.les-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1a1535 60%, #0f172a 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    padding: 3rem 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.les-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(251, 191, 36, 0.08) 0%, transparent 60%);
}

.les-hero-inner { max-width: 1000px; margin: 0 auto; position: relative; }

.mod-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--amber);
    padding: 0.25rem 1rem;
    border-radius: var(--r4);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.les-num { font-size: 0.85rem; font-weight: 700; color: var(--amber); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; }

.les-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.les-hero h1 .hl {
    background: var(--gg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.les-intro { font-size: 1.08rem; color: var(--t2); max-width: 720px; line-height: 1.8; margin-bottom: 1.5rem; }
.les-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.82rem; color: var(--t3); }
.meta-i { display: flex; align-items: center; gap: 0.35rem; }

/* Les layout */
.page-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
    align-items: start;
}

.les-content { min-width: 0; }

.les-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t1);
    margin: var(--2xl) 0 var(--md);
    padding-bottom: var(--sm);
    border-bottom: 2px solid rgba(251, 191, 36, 0.2);
    position: relative;
}

.les-content h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--amber);
}

.les-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--amber); margin: var(--xl) 0 var(--sm); }
.les-content p { color: var(--t2); margin-bottom: var(--md); font-size: 1rem; line-height: 1.8; }
.les-content p strong { color: var(--t1); }
.les-content ul, .les-content ol { margin: var(--sm) 0 var(--md) var(--xl); color: var(--t2); font-size: 1rem; line-height: 1.8; }
.les-content li { margin-bottom: var(--xs); }

/* Les sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sb-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--r3);
    padding: 1.25rem;
}

.sb-card.sticky-top {
    position: sticky;
    top: 80px;
}

.sb-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--t3);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.les-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--r1);
    text-decoration: none;
    font-size: 0.83rem;
    color: var(--t2);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.les-link:hover {
    color: var(--t1);
    background: rgba(59, 130, 246, 0.08);
}

.les-link.current {
    color: var(--amber);
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
    font-weight: 600;
}

.les-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Progress bar */
.progress-wrap { margin: 0.75rem 0; }

.progress-bar {
    height: 6px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gg);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-lbl {
    font-size: 0.72rem;
    color: var(--t3);
    margin-top: 0.35rem;
    display: flex;
    justify-content: space-between;
}

/* Concept pills */
.concept-pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--r4);
    font-size: 0.75rem;
    color: var(--purple);
    margin: 0.2rem;
    transition: all 0.2s;
}

.concept-pill:hover { background: rgba(139, 92, 246, 0.25); }

/* Sister course link */
.sister-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--r1);
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--purple);
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 0.75rem;
}

.sister-link:hover { background: rgba(139, 92, 246, 0.2); }

/* Bottom navigation (prev/next) */
.bnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--md);
    margin-top: var(--2xl);
    padding-top: var(--xl);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    flex-wrap: wrap;
}

.bnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--r2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.3s;
}

.bnav-prev {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--t2);
}

.bnav-prev:hover { background: rgba(59, 130, 246, 0.2); color: var(--t1); }

.bnav-next {
    background: var(--gs);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bnav-next:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5); }

.bnav-center { font-size: 0.8rem; color: var(--t3); text-align: center; }
.bnav-center span { color: var(--amber); font-weight: 700; }

/* Legacy sidebar aliases */
.les-sidebar { position: sticky; top: 80px; }

.sidebar-card {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--r3);
    padding: var(--lg);
    margin-bottom: var(--md);
}

.sidebar-card h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--amber);
    margin-bottom: var(--md);
}

.sidebar-card ul { list-style: none; }
.sidebar-card li { margin-bottom: var(--sm); }
.sidebar-card a { color: var(--t2); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.sidebar-card a:hover { color: var(--t1); }

/* Les navigatie (vorige/volgende) */
.les-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--md);
    margin-top: var(--2xl);
    padding-top: var(--xl);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    flex-wrap: wrap;
}

.les-nav a {
    padding: var(--sm) var(--lg);
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--t2);
    border-radius: var(--r2);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: var(--sm);
}

.les-nav a:hover { border-color: var(--blue); color: var(--t1); background: rgba(59, 130, 246, 0.08); }

/* --- Artikel/blog stijlen --- */
.article-hero {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, transparent 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    padding: var(--3xl) var(--xl) var(--2xl);
    position: relative;
    overflow: hidden;
}

.article-hero-inner { max-width: 800px; margin: 0 auto; }

.hero-tags { display: flex; flex-wrap: wrap; gap: var(--sm); margin-bottom: var(--lg); }

.hero-tag {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tag-categorie { background: rgba(251, 191, 36, 0.15); color: var(--amber); border: 1px solid rgba(251, 191, 36, 0.3); }
.tag-thema { background: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.3); }
.tag-niveau { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.2); }

.article-hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--lg);
    background: linear-gradient(135deg, var(--t1) 0%, var(--amber) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-hero .subtitle {
    font-size: 1.2rem;
    color: var(--t2);
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: var(--xl);
}

.article-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lg);
    align-items: center;
    padding-top: var(--lg);
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    font-size: 0.875rem;
    color: var(--t3);
}

.meta-item { display: flex; align-items: center; gap: var(--xs); }

.main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--2xl) var(--xl);
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--2xl);
    align-items: start;
}

.article-body { min-width: 0; }

.article-body h2 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--t1);
    margin: var(--2xl) 0 var(--md);
    padding-bottom: var(--sm);
    border-bottom: 2px solid rgba(251, 191, 36, 0.2);
    position: relative;
}

.article-body h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--amber);
}

.article-body h3 { font-size: 1.25rem; font-weight: 600; color: var(--amber); margin: var(--xl) 0 var(--md); }
.article-body p { color: var(--t2); margin-bottom: var(--lg); font-size: 1.05rem; line-height: 1.8; }
.article-body p strong { color: var(--t1); font-weight: 600; }
.article-body ul, .article-body ol { margin: var(--md) 0 var(--lg) var(--xl); color: var(--t2); font-size: 1.05rem; line-height: 1.8; }
.article-body li { margin-bottom: var(--sm); }

/* Hermetisch citaat blok */
.hermetic-quote {
    margin: var(--2xl) 0;
    padding: var(--xl) var(--xl) var(--xl) var(--2xl);
    background: rgba(251, 191, 36, 0.04);
    border-left: 4px solid var(--amber);
    border-radius: 0 var(--r2) var(--r2) 0;
    position: relative;
}

.hermetic-quote::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 16px;
    font-size: 5rem;
    color: var(--amber);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

.hermetic-quote p { font-style: italic; font-size: 1.15rem; color: var(--t1); margin-bottom: var(--sm); }
.hermetic-quote cite { font-size: 0.875rem; color: var(--t3); font-style: normal; }

/* Discovery card */
.discovery-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--r2);
    padding: var(--xl);
    margin: var(--xl) 0;
    position: relative;
    overflow: hidden;
}

.discovery-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gs);
}

.discovery-card .discovery-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--blue);
    margin-bottom: var(--sm);
}

.discovery-card h3 { font-size: 1.2rem; color: var(--t1); margin: 0 0 var(--md); }

/* --- CTA secties --- */
.cta-sec, .final-cta {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.04));
    border-top: 1px solid rgba(59, 130, 246, 0.12);
    padding: 3rem 2rem;
    text-align: center;
}

.cta-inner, .fcta-inner { max-width: 700px; margin: 0 auto; }
.cta-sec h2, .final-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 0.75rem; }
.cta-sec p, .final-cta p { color: var(--t2); font-size: 1.05rem; margin-bottom: var(--xl); line-height: 1.7; }

/* --- Learn sectie --- */
.learn-sec {
    background: var(--bg2);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    padding: 3rem 2rem;
}

.learn-inner { max-width: 1400px; margin: 0 auto; }

.learn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.learn-item { display: flex; align-items: flex-start; gap: 1rem; }

.lchk {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ltxt h4 { font-size: 0.97rem; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.ltxt p { font-size: 0.85rem; color: var(--t3); line-height: 1.5; margin: 0; }

/* --- Visualisatie / Canvas wrapper --- */
.viz-wrapper {
    background: var(--bg2);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--r3);
    overflow: hidden;
    margin: 2rem 0;
}

.viz-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.viz-title { font-size: 0.85rem; font-weight: 700; color: var(--t1); }
.viz-sub { font-size: 0.75rem; color: var(--t3); }

.viz-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.viz-btn {
    padding: 0.3rem 0.8rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--r1);
    color: var(--purple);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}

.viz-btn:hover, .viz-btn.active {
    background: rgba(139, 92, 246, 0.3);
    color: var(--t1);
}

canvas {
    display: block;
    width: 100%;
    height: 420px;
}

/* --- Wave demo --- */
.wave-demo {
    background: var(--bg2);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--r3);
    overflow: hidden;
    margin: 1.5rem 0;
}

.wave-header {
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wave-title { font-size: 0.85rem; font-weight: 700; color: var(--t1); }

.wave-ctrls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wave-ctrl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--t2);
}

.wave-ctrl label { white-space: nowrap; }
.wave-ctrl input[type="range"] { width: 80px; accent-color: var(--amber); }
.wave-ctrl span { color: var(--amber); font-weight: 700; min-width: 40px; font-size: 0.8rem; }

#waveCanvas { width: 100%; height: 160px; display: block; }

/* --- Insight kaarten --- */
.insight-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.ins-card {
    background: linear-gradient(135deg, var(--bg2), rgba(30, 41, 59, 0.5));
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: var(--r3);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s;
}

.ins-card:hover {
    border-color: rgba(139, 92, 246, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
}

.ins-ic { font-size: 2rem; margin-bottom: 0.6rem; }
.ins-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--t1); margin-bottom: 0.4rem; }
.ins-card p { font-size: 0.82rem; color: var(--t3); line-height: 1.5; margin: 0; }

/* --- Exercise box --- */
.ex-box {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--r3);
    padding: 1.5rem;
    margin: 2rem 0;
}

.ex-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--green);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ex-box h3 { font-size: 1rem; font-weight: 700; color: var(--t1); margin-bottom: 0.75rem; }

.ex-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ex-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--t2);
}

.ex-list li::before {
    content: '→';
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* --- Bottom navigatie (alt) --- */
.bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- Placeholder pagina --- */
.placeholder-page {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--3xl) var(--xl);
    text-align: center;
}

.placeholder-page .placeholder-icon { font-size: 4rem; margin-bottom: var(--md); }
.placeholder-page h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: var(--md); }
.placeholder-page p { color: var(--t2); font-size: 1.1rem; line-height: 1.7; margin-bottom: var(--lg); }

/* =============================================
   RESPONSIVE
   ============================================= */

/* Tablet */
@media (max-width: 1200px) {
    .talen-grid, .talen-grid.extended { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1100px) {
    .learn-grid { grid-template-columns: repeat(2, 1fr); }
    .main-wrapper { grid-template-columns: 1fr; }
    .page-wrap { grid-template-columns: 1fr; }
    .mod-cols { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--xl);
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobiel */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(59, 130, 246, 0.15);
        padding: var(--md);
        flex-direction: column;
        gap: var(--xs);
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        padding: 0.6rem var(--md);
    }

    .header-actions {
        display: none;
    }

    .nav-menu.open ~ .header-actions,
    .header-actions.mobile-visible {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0 var(--md) var(--md);
        background: rgba(15, 23, 42, 0.97);
    }

    .hero {
        padding: var(--2xl) var(--md);
    }

    .hero h1 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .cards-grid, .courses-grid {
        grid-template-columns: 1fr;
    }

    .learn-grid, .tempo-grid { grid-template-columns: 1fr; }
    .talen-grid, .talen-grid.extended { grid-template-columns: repeat(3, 1fr); }

    .mod-hdr { padding: 1rem; }
    .mod-right .mtag { display: none; }

    .les-hero { padding: 2rem 1rem 1.5rem; }
    .article-hero { padding: var(--2xl) var(--md); }
    .article-hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }

    .les-sidebar { position: static; }
    .sidebar { order: -1; }
    .sb-card.sticky-top { position: static; }

    .footer-top {
        grid-template-columns: 1fr;
        padding: var(--xl) var(--md);
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sm);
    }

    .footer-bottom-right {
        justify-content: center;
    }

    .section,
    .page-content {
        padding-left: var(--md);
        padding-right: var(--md);
    }

    .cookie-banner {
        padding: var(--md);
    }

    .cookie-toggles {
        flex-direction: column;
        gap: var(--sm);
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 0.75rem var(--md);
    }

    .hero-btns {
        flex-direction: column;
        align-items: center;
    }

    .cookie-buttons {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}

/* =============================================
   PAGE-SPECIFIC COMPONENT STYLES
   Extracted from old site pages
   ============================================= */

@keyframes spectrumMove {
0% { background-position: 0% 0; }
100% { background-position: 300% 0; }
}

.article-hero::before {
content: '𓂀';
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
font-size: 12rem;
opacity: 0.04;
pointer-events: none;
line-height: 1;
}

.hero-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--space-xl);
}

.tag-categorie {
background: rgba(251, 191, 36, 0.15);
color: var(--amber);
border: 1px solid rgba(251, 191, 36, 0.3);
}

.article-hero .subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
line-height: 1.6;
max-width: 700px;
margin-bottom: var(--space-xl);
}

.article-meta-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
align-items: center;
padding-top: var(--space-lg);
border-top: 1px solid rgba(59, 130, 246, 0.15);
font-size: var(--text-sm);
color: var(--text-muted);
}

.meta-item {
display: flex;
align-items: center;
gap: var(--space-xs);
}

.article-body {
min-width: 0;
}

.article-body h2::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: var(--amber);
}

.article-body h3 {
font-size: 1.25rem;
font-weight: var(--font-semibold);
color: var(--amber);
margin: var(--space-xl) 0 var(--space-md);
}

.hermetic-quote::before {
content: '"';
position: absolute;
top: -20px;
left: 16px;
font-size: 5rem;
color: var(--amber);
opacity: 0.2;
font-family: Georgia, serif;
line-height: 1;
}

.hermetic-quote p {
font-style: italic;
font-size: 1.15rem;
color: var(--text-primary);
margin-bottom: var(--space-sm) !important;
}

.discovery-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-spectrum);
}

.discovery-card .discovery-label {
font-size: var(--text-xs);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--blue);
margin-bottom: var(--space-sm);
}

.discovery-card h3 {
font-size: 1.2rem;
color: var(--text-primary) !important;
margin: 0 0 var(--space-md) !important;
}

.discovery-card p {
font-size: 0.95rem;
margin-bottom: var(--space-sm) !important;
}

.discovery-card .discovery-where {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
padding: var(--space-xs) var(--space-md);
border-radius: 20px;
font-size: var(--text-sm);
color: var(--blue);
margin-top: var(--space-sm);
text-decoration: none;
transition: all 0.3s;
}

.discovery-card .discovery-where:hover {
background: rgba(59, 130, 246, 0.2);
color: var(--text-primary);
}

.key-insight {
background: rgba(251, 191, 36, 0.06);
border: 1px solid rgba(251, 191, 36, 0.25);
border-left: 4px solid var(--amber);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-xl);
margin: var(--space-xl) 0;
}

.key-insight .insight-label {
font-size: var(--text-xs);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--amber);
margin-bottom: var(--space-sm);
}

.key-insight p {
color: var(--text-primary) !important;
font-size: 1.05rem;
font-style: italic;
margin-bottom: 0 !important;
}

.sources-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-xl) 0;
font-size: 0.95rem;
}

.sources-table thead tr {
background: rgba(251, 191, 36, 0.1);
}

.sources-table th {
padding: var(--space-sm) var(--space-md);
text-align: left;
color: var(--amber);
font-weight: var(--font-semibold);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.sources-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-secondary);
border-bottom: 1px solid rgba(59, 130, 246, 0.08);
vertical-align: top;
}

.sources-table tr:hover td {
background: rgba(59, 130, 246, 0.04);
color: var(--text-primary);
}

.sources-table .source-title {
color: var(--text-primary);
font-weight: var(--font-medium);
}

.sources-table .badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
}

.badge-gratis {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}

.badge-boek {
background: rgba(139, 92, 246, 0.15);
color: var(--purple);
}

.badge-academisch {
background: rgba(59, 130, 246, 0.15);
color: var(--blue);
}

.contemplation-card {
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: var(--radius-md);
padding: var(--space-xl);
margin: var(--space-2xl) 0;
}

.contemplation-card .contemplation-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}

.contemplation-card .contemplation-icon {
width: 48px;
height: 48px;
background: rgba(139, 92, 246, 0.15);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}

.contemplation-card .contemplation-title {
font-size: 1.1rem;
font-weight: var(--font-semibold);
color: var(--purple);
}

.contemplation-card .contemplation-time {
font-size: var(--text-xs);
color: var(--text-muted);
}

.contemplation-card p {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: var(--space-md) !important;
}

.article-cta {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
margin-top: var(--space-2xl);
text-align: center;
position: relative;
overflow: hidden;
}

.article-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-warm);
}

.article-cta h3 {
font-size: 1.4rem;
color: var(--text-primary);
margin-bottom: var(--space-md);
}

.article-cta p {
color: var(--text-secondary);
margin-bottom: var(--space-xl);
font-size: 1rem;
}

.cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}

.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: var(--gradient-spectrum);
color: white;
text-decoration: none;
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
font-size: 0.95rem;
transition: all 0.3s ease;
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
background: transparent;
color: var(--amber);
text-decoration: none;
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
font-size: 0.95rem;
border: 1px solid rgba(251, 191, 36, 0.4);
transition: all 0.3s ease;
}

.btn-secondary:hover {
background: rgba(251, 191, 36, 0.1);
border-color: var(--amber);
}

.article-sidebar {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

.sidebar-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--amber);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}

.toc-nav {
display: flex;
flex-direction: column;
gap: 2px;
}

.toc-link {
display: block;
padding: var(--space-sm) var(--space-md);
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-sm);
border-left: 2px solid transparent;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
transition: all 0.3s ease;
line-height: 1.4;
}

.toc-link:hover {
color: var(--text-primary);
background: rgba(59, 130, 246, 0.06);
padding-left: var(--space-lg);
}

.toc-link.active {
color: var(--amber);
border-left-color: var(--amber);
background: rgba(251, 191, 36, 0.08);
font-weight: var(--font-medium);
}

.toc-link[data-level="3"] {
padding-left: var(--space-xl);
font-size: var(--text-xs);
}

.share-buttons {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}

.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
border: 1px solid rgba(59, 130, 246, 0.15);
background: rgba(30, 41, 59, 0.6);
color: var(--text-secondary);
cursor: pointer;
}

.share-btn:hover {
transform: translateY(-2px);
background: var(--bg-tertiary);
color: var(--text-primary);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.share-copy.copied {
color: #22c55e;
border-color: rgba(34, 197, 94, 0.4);
}

.sage-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
text-align: center;
}

.sage-icon-box {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: var(--radius-md);
}

.sage-name {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
}

.sage-epithet {
font-size: var(--text-sm);
color: var(--text-muted);
font-style: italic;
}

.sage-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--amber);
text-decoration: none;
font-size: var(--text-sm);
font-weight: var(--font-medium);
padding: var(--space-xs) var(--space-md);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 20px;
margin-top: var(--space-sm);
transition: all 0.3s;
}

.sage-link:hover {
background: rgba(251, 191, 36, 0.1);
}

.related-item {
display: flex;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid rgba(59, 130, 246, 0.08);
text-decoration: none;
transition: all 0.3s;
}

.related-item:last-child { border-bottom: none; }

.related-item:hover .related-title { color: var(--amber); }

.related-emoji { font-size: 1.5rem; flex-shrink: 0; }

.related-title {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.4;
transition: color 0.3s;
}

.copyright {
color: var(--text-muted);
font-size: 0.85rem;
}

.tagline {
color: var(--text-secondary);
font-size: 0.85rem;
font-style: italic;
}

@media (max-width: 1100px) {
.main-wrapper {
grid-template-columns: 1fr;
}
.article-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}

@media (max-width: 768px) {
.nav-menu { display: none; }
.article-hero h1 { font-size: 1.9rem; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
.article-hero h1 { font-size: 1.6rem; }
}

.tag-amber { background: rgba(251,191,36,0.12); color: var(--amber); border: 1px solid rgba(251,191,36,0.25); }

.tag-purple { background: rgba(139,92,246,0.12); color: var(--purple); border: 1px solid rgba(139,92,246,0.25); }

.tag-blue { background: rgba(59,130,246,0.12); color: var(--blue); border: 1px solid rgba(59,130,246,0.25); }

.article-hero .dedication {
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
margin-bottom: var(--space-xl);
}

.opening-question {
background: rgba(139, 92, 246, 0.06);
border: 1px solid rgba(139, 92, 246, 0.25);
border-left: 4px solid var(--purple);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
margin: var(--space-xl) 0;
position: relative;
}

.opening-question::before {
content: '?';
position: absolute;
top: -15px; left: 16px;
font-size: 4rem;
color: var(--purple);
opacity: 0.15;
font-family: Georgia, serif;
line-height: 1;
}

.opening-question p {
font-style: italic;
font-size: 1.15rem;
color: var(--text-primary) !important;
margin-bottom: 0 !important;
font-weight: var(--font-medium);
}

.comparison-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-xl) 0;
font-size: 0.95rem;
overflow: hidden;
border-radius: var(--radius-md);
}

.comparison-table thead tr { background: rgba(139, 92, 246, 0.12); }

.comparison-table th {
padding: var(--space-md);
text-align: left;
color: var(--purple);
font-weight: var(--font-semibold);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.comparison-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-secondary);
border-bottom: 1px solid rgba(59, 130, 246, 0.07);
vertical-align: top;
line-height: 1.5;
}

.comparison-table tr:hover td { background: rgba(59, 130, 246, 0.04); color: var(--text-primary); }

.comparison-table .trad-name { color: var(--text-primary); font-weight: var(--font-semibold); }

.pardes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin: var(--space-xl) 0;
}

.pardes-card {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(59, 130, 246, 0.12);
border-radius: var(--radius-md);
padding: var(--space-lg);
position: relative;
overflow: hidden;
}

.pardes-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}

.pardes-p::before { background: var(--blue); }

.pardes-r::before { background: var(--amber); }

.pardes-d::before { background: var(--green); }

.pardes-s::before { background: var(--purple); }

.pardes-letter {
font-size: 2rem;
font-weight: var(--font-bold);
line-height: 1;
margin-bottom: var(--space-xs);
}

.pardes-p .pardes-letter { color: var(--blue); }

.pardes-r .pardes-letter { color: var(--amber); }

.pardes-d .pardes-letter { color: var(--green); }

.pardes-s .pardes-letter { color: var(--purple); }

.pardes-name {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}

.pardes-desc {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: var(--font-semibold);
margin-bottom: var(--space-sm);
}

.pardes-example {
font-size: 0.85rem;
color: var(--text-muted);
font-style: italic;
line-height: 1.5;
padding: var(--space-sm);
background: rgba(0,0,0,0.2);
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
}

.pardes-for {
font-size: var(--text-xs);
color: var(--text-muted);
}

.parable-box {
background: rgba(34, 211, 238, 0.04);
border: 1px solid rgba(34, 211, 238, 0.18);
border-radius: var(--radius-md);
padding: var(--space-xl);
margin: var(--space-xl) 0;
text-align: center;
}

.parable-box .parable-icon { font-size: 3rem; margin-bottom: var(--space-md); }

.parable-box blockquote {
font-style: italic;
font-size: 1.1rem;
color: var(--text-primary);
line-height: 1.7;
max-width: 640px;
margin: 0 auto;
}

.rules-list {
list-style: none;
margin: var(--space-lg) 0 !important;
padding: 0 !important;
}

.rules-list li {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
background: rgba(30, 41, 59, 0.5);
border: 1px solid rgba(59, 130, 246, 0.1);
border-radius: var(--radius-md);
margin-bottom: var(--space-md) !important;
align-items: flex-start;
}

.rule-number {
width: 36px;
height: 36px;
background: var(--gradient-spectrum);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: 0.9rem;
color: white;
flex-shrink: 0;
}

.rule-content { flex: 1; }

.rule-title { font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); font-size: 1rem; }

.rule-body { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }

.objection-card {
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(59, 130, 246, 0.1);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-bottom: var(--space-md);
}

.objection-q {
font-style: italic;
color: var(--text-muted);
font-size: 0.95rem;
margin-bottom: var(--space-sm);
padding-bottom: var(--space-sm);
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.objection-q::before { content: '❝ '; color: var(--purple); }

.objection-a {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.7;
margin: 0 !important;
}

.strengths-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-xl) 0;
font-size: 0.9rem;
}

.strengths-table thead tr { background: rgba(34, 211, 238, 0.08); }

.strengths-table th {
padding: var(--space-sm) var(--space-md);
text-align: left;
color: var(--cyan);
font-weight: var(--font-semibold);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(34, 211, 238, 0.15);
}

.strengths-table td {
padding: var(--space-sm) var(--space-md);
color: var(--text-secondary);
border-bottom: 1px solid rgba(59, 130, 246, 0.07);
vertical-align: top;
line-height: 1.5;
}

.strengths-table tr:hover td { background: rgba(34, 211, 238, 0.03); }

.strengths-table .trad-name { color: var(--text-primary); font-weight: var(--font-semibold); }

.timeline {
list-style: none;
padding: 0;
margin: var(--space-xl) 0 !important;
position: relative;
}

.timeline::before {
content: '';
position: absolute;
left: 20px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--purple), var(--blue), var(--cyan));
opacity: 0.3;
}

.timeline-item {
display: flex;
gap: var(--space-lg);
padding: var(--space-md) 0;
padding-left: var(--space-md);
margin-bottom: var(--space-sm) !important;
}

.timeline-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gradient-spectrum);
flex-shrink: 0;
margin-top: 5px;
box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.timeline-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }

.timeline-text strong { color: var(--text-primary); }

.closing-statement {
background: linear-gradient(135deg, rgba(30,41,59,0.8) 0%, rgba(15,23,42,0.95) 100%);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
margin: var(--space-2xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}

.closing-statement::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-spectrum);
}

.closing-statement p {
font-size: 1.3rem;
font-style: italic;
color: var(--text-primary) !important;
line-height: 1.6;
margin-bottom: var(--space-md) !important;
}

.closing-statement .closing-sub {
font-size: 1rem !important;
color: var(--text-secondary) !important;
}

.dedication-block {
text-align: center;
padding: var(--space-xl) 0;
border-top: 1px solid rgba(59, 130, 246, 0.1);
margin-top: var(--space-xl);
}

.dedication-block p {
font-style: italic;
color: var(--text-muted) !important;
font-size: 0.95rem !important;
margin-bottom: var(--space-xs) !important;
}

.author-info { display: flex; flex-direction: column; gap: var(--space-sm); }

.author-icon-box {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
background: rgba(139,92,246,0.1);
border: 1px solid rgba(139,92,246,0.2);
border-radius: var(--radius-md);
}

.author-name { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); }

.author-bio { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

.tag-cursus  { background: rgba(244, 63, 94, 0.12); color: var(--rose);   border: 1px solid var(--rose-border); }

.article-body p em { color: var(--text-primary); font-style: italic; }

.article-body ul {
margin: var(--space-md) 0 var(--space-lg) var(--space-xl);
color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8;
}

.opening-quote {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.06), rgba(168, 85, 247, 0.06));
border: 1px solid rgba(244, 63, 94, 0.25);
border-left: 4px solid var(--rose);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
margin-bottom: var(--space-xl);
position: relative;
}

.opening-quote::before {
content: '"';
position: absolute; top: -15px; left: 16px;
font-size: 5rem; color: var(--rose); opacity: 0.2;
font-family: Georgia, serif; line-height: 1;
}

.opening-quote p {
font-style: italic; font-size: 1.1rem !important;
color: var(--text-primary) !important;
margin-bottom: var(--space-xs) !important;
}

.opening-quote cite { font-size: var(--text-sm); color: var(--text-muted); font-style: normal; }

.story-card {
background: rgba(30, 41, 59, 0.55);
border: 1px solid rgba(244, 63, 94, 0.15);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin: var(--space-xl) 0;
position: relative;
overflow: hidden;
}

.story-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--gradient-rose);
}

.story-card-header {
display: flex; align-items: flex-start; gap: var(--space-md);
margin-bottom: var(--space-lg);
}

.story-emoji {
font-size: 2.2rem; flex-shrink: 0;
width: 56px; height: 56px;
background: var(--rose-soft);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
}

.story-meta { flex: 1; }

.story-label {
font-size: var(--text-xs); font-weight: var(--font-bold);
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--rose); margin-bottom: var(--space-xs);
}

.story-card h3 {
font-size: 1.3rem !important; color: var(--text-primary) !important;
margin: 0 !important; line-height: 1.3;
}

.story-card p {
font-size: 1rem; color: var(--text-secondary);
margin-bottom: var(--space-md) !important; line-height: 1.8;
}

.story-card p em { color: var(--text-primary); font-style: italic; }

.story-card .lesson-box {
background: rgba(244, 63, 94, 0.06);
border-left: 3px solid var(--rose);
padding: var(--space-md) var(--space-lg);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-top: var(--space-md);
}

.story-card .lesson-box .lesson-label {
font-size: var(--text-xs); font-weight: var(--font-bold);
text-transform: uppercase; letter-spacing: 1px;
color: var(--rose); margin-bottom: var(--space-xs);
}

.story-card .lesson-box p {
font-size: 0.95rem !important;
color: var(--text-secondary) !important;
margin-bottom: 0 !important;
font-style: italic;
}

.yt-link {
display: inline-flex; align-items: center; gap: var(--space-sm);
background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25);
color: #f87171; text-decoration: none; padding: var(--space-xs) var(--space-md);
border-radius: 20px; font-size: var(--text-sm); font-weight: var(--font-medium);
margin: var(--space-sm) 0 var(--space-md); transition: all 0.3s;
display: inline-flex;
}

.yt-link:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

.section-divider {
display: flex; align-items: center; gap: var(--space-lg);
margin: var(--space-2xl) 0;
}

.section-divider .divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.3), transparent);
}

.section-divider .divider-icon {
font-size: 1.5rem; color: var(--rose); opacity: 0.6;
}

.wall-question {
background: rgba(244, 63, 94, 0.05);
border: 1px solid rgba(244, 63, 94, 0.2);
border-radius: var(--radius-md);
padding: var(--space-xl);
margin: var(--space-xl) 0;
}

.wall-question .wq-label {
font-size: var(--text-xs); font-weight: var(--font-bold);
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--rose); margin-bottom: var(--space-md);
}

.wall-question p {
font-style: italic; font-size: 1.05rem !important;
color: var(--text-primary) !important;
margin-bottom: var(--space-sm) !important;
line-height: 1.7;
}

.key-statement {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.07), rgba(168, 85, 247, 0.07));
border: 1px solid rgba(244, 63, 94, 0.2);
border-radius: var(--radius-md);
padding: var(--space-xl);
margin: var(--space-xl) 0;
text-align: center;
}

.key-statement p {
font-size: 1.15rem !important; font-weight: var(--font-semibold);
color: var(--text-primary) !important;
margin-bottom: 0 !important; line-height: 1.6;
}

.synthesis-block {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(244, 63, 94, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
margin: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}

.synthesis-block::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--gradient-rose);
}

.synthesis-block h3 {
color: var(--rose) !important;
margin-top: 0 !important;
}

.synthesis-block p {
font-size: 1.05rem; color: var(--text-secondary);
margin-bottom: var(--space-md) !important;
}

.contemplation-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }

.contemplation-icon {
width: 48px; height: 48px;
background: var(--rose-soft);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; flex-shrink: 0;
}

.contemplation-title { font-size: 1.1rem; font-weight: var(--font-semibold); color: var(--rose); }

.contemplation-time { font-size: var(--text-xs); color: var(--text-muted); }

.contemplation-card p em { color: var(--text-primary); }

.stories-card {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(168, 85, 247, 0.06));
border: 1px solid rgba(244, 63, 94, 0.2);
border-radius: var(--radius-md);
padding: var(--space-lg);
}

.stories-card-title {
font-size: var(--text-sm); font-weight: var(--font-semibold);
text-transform: uppercase; letter-spacing: 1px; color: var(--rose);
margin-bottom: var(--space-md);
}

.story-dot-item {
display: flex; align-items: center; gap: var(--space-sm);
padding: var(--space-xs) 0;
font-size: var(--text-sm); color: var(--text-secondary);
border-bottom: 1px solid rgba(244, 63, 94, 0.06);
}

.story-dot-item:last-child { border-bottom: none; }

.story-dot-item .dot { font-size: 1.1rem; flex-shrink: 0; }

.hero{background:linear-gradient(135deg,rgba(15,23,42,1) 0%,rgba(30,20,50,.9) 50%,rgba(15,23,42,1) 100%);border-bottom:1px solid rgba(139,92,246,.15);padding:4rem 2rem;position:relative;overflow:hidden}

.hero::before{content:'🌊';position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:14rem;opacity:.05;pointer-events:none}

.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15;margin-bottom:1.5rem;max-width:900px}

.hero h1 em{font-style:normal;background:var(--gs);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-sub{font-size:1.15rem;color:var(--t2);max-width:680px;margin-bottom:2rem;line-height:1.8}

.hero-stats{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem}

.stat{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--t2)}.stat strong{color:var(--t1)}

.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}

.btn-hero{padding:1rem 2.5rem;background:var(--gs);color:white;text-decoration:none;border-radius:var(--r2);font-weight:700;font-size:1.05rem;transition:all .3s;display:inline-flex;align-items:center;gap:.5rem}

.btn-hero:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(139,92,246,.4)}

.btn-outline{padding:1rem 2rem;background:transparent;border:2px solid rgba(59,130,246,.4);color:var(--t1);text-decoration:none;border-radius:var(--r2);font-weight:600;font-size:1rem;transition:all .3s}

.btn-outline:hover{border-color:var(--blue);background:rgba(59,130,246,.1)}

.section{max-width:1400px;margin:0 auto;padding:3rem 2rem}

.sec-header{text-align:center;margin-bottom:2rem}

.sec-header h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-bottom:.75rem}

.sec-header p{color:var(--t2);font-size:1.05rem;max-width:650px;margin:0 auto}

.mod-card{background:var(--bg2);border:1px solid rgba(59,130,246,.1);border-radius:var(--r3);overflow:hidden;transition:all .3s}

.mod-card:hover{border-color:rgba(59,130,246,.25)}

.mod-hdr:hover{background:rgba(255,255,255,.02)}

.mod-info h3{font-size:1.05rem;font-weight:700;color:var(--t1);margin-bottom:2px;line-height:1.3}

.les:hover{background:rgba(59,130,246,.08);color:var(--t1)}

.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.35)}

.dur{font-size:.8rem;color:var(--t3);margin-left:auto}

.learn-inner{max-width:1400px;margin:0 auto}

.learn-item{display:flex;align-items:flex-start;gap:1rem}

.ltxt h4{font-size:.97rem;font-weight:600;color:var(--t1);margin-bottom:4px}

.final-cta{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(139,92,246,.04));border-top:1px solid rgba(59,130,246,.12);padding:3rem 2rem;text-align:center}

.fcta-inner{max-width:700px;margin:0 auto}

.final-cta h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-bottom:1rem}

.final-cta p{color:var(--t2);font-size:1.05rem;margin-bottom:2rem;line-height:1.7}

@media(max-width:1100px){.learn-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:768px){
.learn-grid{grid-template-columns:1fr}
.hero,.section,.learn-sec,.final-cta{padding-left:1rem;padding-right:1rem}
.mod-hdr{padding:1rem}
.mod-right .mtag{display:none}
.ft-inner{grid-template-columns:1fr}
}

.lesson-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.les-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(251,191,36,.08) 0%,transparent 60%)}

.les-hero-inner{max-width:1000px;margin:0 auto;position:relative}

.les-num{font-size:.85rem;font-weight:700;color:var(--amber);letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem}

.les-hero h1 .hl{background:var(--gg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.les-intro{font-size:1.08rem;color:var(--t2);max-width:720px;line-height:1.8;margin-bottom:1.5rem}

.article h2{font-size:1.5rem;font-weight:800;margin:2.5rem 0 1rem;color:var(--t1);display:flex;align-items:center;gap:.75rem;padding-bottom:.6rem;border-bottom:1px solid rgba(251,191,36,.2)}

.article h2 .ic{width:34px;height:34px;border-radius:var(--r1);background:rgba(251,191,36,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}

.article h3{font-size:1.15rem;font-weight:700;margin:1.75rem 0 .6rem;color:var(--amber)}

.article p{margin-bottom:1rem;color:var(--t2);font-size:1rem;line-height:1.8}

.article p strong{color:var(--t1)}

.article ul,.article ol{margin:0 0 1rem 1.5rem;color:var(--t2)}

.article li{margin-bottom:.5rem;line-height:1.7}

.pq{border-left:3px solid var(--amber);padding:1rem 1.5rem;margin:1.5rem 0;background:rgba(251,191,36,.05);border-radius:0 var(--r2) var(--r2) 0}

.pq p{font-size:1.05rem;font-style:italic;color:var(--t1) !important;margin:0;line-height:1.7}

.pq cite{display:block;margin-top:.5rem;font-size:.8rem;color:var(--amber);font-style:normal}

.comparison-table td:first-child{color:var(--t1);font-weight:600}

.comparison-table tr:last-child td{border-bottom:none}

.table-wrap{overflow-x:auto;margin:1.5rem 0}

.key-question{border-left:3px solid var(--amber);padding:1.25rem 1.5rem;margin:2rem 0;background:rgba(251,191,36,.06);border-radius:0 var(--r2) var(--r2) 0}

.key-question .kq-icon{font-size:1.2rem;margin-bottom:.5rem}

.key-question p{color:var(--t1);font-weight:600;font-size:1rem;margin:0;line-height:1.7}

.key-question .kq-sub{color:var(--t2);font-weight:400;font-size:.92rem;margin-top:.5rem}

.contemplation-card .cc-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--purple);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}

.contemplation-card h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.75rem}

.contemplation-card p:last-child{margin-bottom:0}

.bottom-nav{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(59,130,246,.15);flex-wrap:wrap;gap:1rem}

.bnav-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.5rem;border-radius:var(--r2);text-decoration:none;font-weight:600;font-size:.92rem;transition:all .3s}

.bnav-prev{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);color:var(--t2)}

.bnav-prev:hover{background:rgba(59,130,246,.2);color:var(--t1)}

.bnav-next:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,.5)}

.sb-card{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r3);padding:1.25rem}

.sb-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}

.les-link{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:var(--r1);text-decoration:none;font-size:.83rem;color:var(--t2);transition:all .2s;border:1px solid transparent}

.les-link:hover{color:var(--t1);background:rgba(59,130,246,.08)}

.les-link.current{color:var(--amber);background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2);font-weight:600}

.les-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}

.progress-wrap{margin:.75rem 0}

.progress-fill{height:100%;background:var(--gg);border-radius:3px;transition:width .5s ease}

.progress-lbl{font-size:.72rem;color:var(--t3);margin-top:.35rem;display:flex;justify-content:space-between}

.concept-pill{display:inline-block;padding:.25rem .7rem;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);border-radius:var(--r4);font-size:.75rem;color:var(--purple);margin:.2rem;transition:all .2s}

.concept-pill:hover{background:rgba(139,92,246,.25)}

.sister-link:hover{background:rgba(139,92,246,.2)}

.c-spectrum{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.15),rgba(236,72,153,.1));color:var(--purple)}

.c-amber{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.05));color:var(--amber)}

.c-blue{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.05));color:var(--blue)}

.c-purple{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(139,92,246,.05));color:var(--purple)}

.c-orange{background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(249,115,22,.05));color:var(--orange)}

.c-cyan{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(34,211,238,.05));color:var(--cyan)}

.c-green{background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.05));color:var(--green)}

.system-card{background:var(--bg2);border:1px solid rgba(139,92,246,.15);border-radius:var(--r2);padding:1.25rem;margin-bottom:.75rem}

.system-card h4{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}

.system-card p{font-size:.92rem;color:var(--t2);margin:0;line-height:1.7}

.letter-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}

.letter-table th{background:rgba(251,191,36,.15);color:var(--amber);font-weight:700;padding:.5rem .75rem;text-align:center;border-bottom:1px solid rgba(251,191,36,.25)}

.letter-table td{padding:.5rem .75rem;text-align:center;border-bottom:1px solid rgba(59,130,246,.08);color:var(--t2);font-size:.95rem}

.lp-card{background:var(--bg2);border:1px solid rgba(251,191,36,.15);border-radius:var(--r2);padding:1.25rem;margin-bottom:.75rem}

.lp-card h4{font-size:1.05rem;font-weight:700;color:var(--amber);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}

.lp-card .lp-num{width:36px;height:36px;border-radius:50%;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:var(--amber);flex-shrink:0}

.lp-card p{font-size:.92rem;color:var(--t2);margin:0 0 .4rem;line-height:1.7}

.lp-card .lp-detail{font-size:.85rem;color:var(--t3);line-height:1.6}

.lp-card .lp-detail strong{color:var(--t2)}

.lp-master{border-color:rgba(139,92,246,.3);background:linear-gradient(135deg,var(--bg2),rgba(139,92,246,.05))}

.lp-master h4{color:var(--purple)}

.lp-master .lp-num{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.3);color:var(--purple)}

.calc-box{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);border-radius:var(--r2);padding:1.5rem;margin:1.5rem 0}

.calc-box h4{font-size:1rem;font-weight:700;color:var(--amber);margin-bottom:.75rem}

.calc-step{font-size:.95rem;color:var(--t2);margin-bottom:.5rem;line-height:1.7}

.calc-step strong{color:var(--t1)}

.calc-result{font-size:1.1rem;font-weight:700;color:var(--amber);margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(251,191,36,.15)}

.letter-table td.vowel{color:var(--amber);font-weight:700}

.letter-table td.consonant{color:var(--blue);font-weight:600}

.calc-sub{font-size:.85rem;color:var(--t3);margin-top:.5rem}

.name-card{background:var(--bg2);border:1px solid rgba(251,191,36,.15);border-radius:var(--r2);padding:1.25rem;margin-bottom:.75rem}

.name-card h4{font-size:1.05rem;font-weight:700;color:var(--amber);margin-bottom:.5rem}

.name-card p{font-size:.92rem;color:var(--t2);margin:0 0 .4rem;line-height:1.7}

.master-card{background:linear-gradient(135deg,var(--bg2),rgba(139,92,246,.05));border:1px solid rgba(139,92,246,.25);border-radius:var(--r2);padding:1.25rem;margin-bottom:.75rem}

.master-card h4{font-size:1.1rem;font-weight:700;color:var(--purple);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}

.master-card .m-num{width:40px;height:40px;border-radius:50%;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:var(--purple);flex-shrink:0}

.master-card p{font-size:.92rem;color:var(--t2);margin:0 0 .4rem;line-height:1.7}

.karma-card{background:var(--bg2);border:1px solid rgba(249,115,22,.2);border-radius:var(--r2);padding:1.25rem;margin-bottom:.75rem}

.karma-card h4{font-size:1rem;font-weight:700;color:var(--orange);margin-bottom:.5rem}

.karma-card p{font-size:.92rem;color:var(--t2);margin:0 0 .4rem;line-height:1.7}

.cycle-card{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r2);padding:1rem;margin-bottom:.5rem;display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start}

.cycle-num{width:44px;height:44px;border-radius:50%;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:var(--amber);flex-shrink:0}

.cycle-card h4{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:.3rem}

.cycle-card p{font-size:.88rem;color:var(--t2);margin:0;line-height:1.6}

.type-card{border:1px solid rgba(34,211,238,.2);border-radius:var(--r2);padding:1.25rem;margin:1rem 0;background:rgba(34,211,238,.03)}

.type-card h4{font-size:1.05rem;font-weight:700;color:var(--cyan);margin-bottom:.5rem}

.type-card .type-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem;font-size:.82rem}

.type-card .type-stats span{background:rgba(34,211,238,.1);padding:.2rem .6rem;border-radius:var(--r4);color:var(--t2)}

.type-card p{color:var(--t2);font-size:.92rem;line-height:1.7;margin-bottom:.5rem}

.type-card p:last-child{margin-bottom:0}

.course-card{background:var(--bg2);border:1px solid rgba(59,130,246,.12);border-radius:var(--r3);overflow:hidden;transition:all .3s;display:flex;flex-direction:column}

.course-card:hover{border-color:rgba(139,92,246,.35);transform:translateY(-4px);box-shadow:0 12px 35px rgba(139,92,246,.1)}

.course-card.available{border-color:rgba(251,191,36,.2)}

.btn-outline-sm{padding:.5rem 1.25rem;background:transparent;border:1px solid rgba(59,130,246,.3);color:var(--t2);border-radius:var(--r2);font-size:.85rem;font-weight:500;text-decoration:none;transition:all .3s}

.btn-outline-sm:hover{border-color:var(--blue);color:var(--t1);background:rgba(59,130,246,.08)}

.cta-sec{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(139,92,246,.04));border-top:1px solid rgba(59,130,246,.12);padding:3rem 2rem;text-align:center}

.cta-inner{max-width:600px;margin:0 auto}

.cta-sec h2{font-size:1.5rem;font-weight:700;margin-bottom:.75rem}

.cta-sec p{color:var(--t2);font-size:1rem;margin-bottom:1.5rem;line-height:1.7}

.course-hero{background:linear-gradient(135deg,rgba(15,23,42,1) 0%,rgba(30,41,59,.9) 100%);border-bottom:1px solid rgba(59,130,246,.15);padding:var(--sp-3xl) var(--sp-xl);position:relative;overflow:hidden}

.course-hero::before{content:'🌀';position:absolute;right:6%;top:50%;transform:translateY(-50%);font-size:14rem;opacity:.05;pointer-events:none}

.course-badge{display:inline-flex;align-items:center;gap:var(--sp-sm);background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:var(--blue);padding:var(--sp-xs) var(--sp-md);border-radius:var(--r-xl);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-lg)}

.course-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15;margin-bottom:var(--sp-lg);max-width:900px}

.course-hero h1 em{font-style:normal;background:var(--gradient-spectrum);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.course-sub{font-size:1.15rem;color:var(--text-secondary);max-width:680px;margin-bottom:var(--sp-2xl);line-height:1.8}

.course-stats{display:flex;flex-wrap:wrap;gap:var(--sp-xl);margin-bottom:var(--sp-2xl)}

.talen-tabs{display:flex;gap:var(--sp-sm);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-lg)}

.ttab{padding:var(--sp-xs) var(--sp-md);border-radius:var(--r-xl);border:1px solid rgba(59,130,246,.25);color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .3s;background:transparent}

.ttab.active,.ttab:hover{background:rgba(59,130,246,.12);border-color:var(--blue);color:var(--text-primary)}

.talen-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-sm);transition:all .3s}

.talen-grid.extended{grid-template-columns:repeat(7,1fr)}

.taal-pill{background:var(--bg-secondary);border:1px solid rgba(59,130,246,.12);border-radius:var(--r-md);padding:var(--sp-lg) var(--sp-sm);text-align:center;transition:all .3s;cursor:pointer}

.taal-pill:hover{transform:translateY(-4px);border-color:rgba(251,191,36,.4);box-shadow:0 10px 30px rgba(251,191,36,.08)}

.taal-pill.extra{border-color:rgba(139,92,246,.2);background:linear-gradient(135deg,rgba(30,41,59,1),rgba(30,41,59,.7))}

.taal-pill.extra:hover{border-color:rgba(139,92,246,.5)}

.taal-pill .tico{font-size:1.8rem;margin-bottom:var(--sp-sm)}

.modules-wrap{max-width:1400px;margin:0 auto;padding:0 var(--sp-xl) var(--sp-3xl)}

.mod-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-xl);flex-wrap:wrap;gap:var(--sp-md)}

.mod-head h2{font-size:1.8rem;font-weight:700}

.filter-tabs{display:flex;gap:var(--sp-sm);flex-wrap:wrap}

.ftab.active,.ftab:hover{background:rgba(59,130,246,.15);border-color:var(--blue);color:var(--text-primary)}

.tag-c{background:rgba(59,130,246,.15);color:var(--blue)}

.col-title{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-md)}

.oef-list{display:flex;flex-direction:column;gap:var(--sp-sm)}

.oef::before{content:'✦';color:var(--amber);flex-shrink:0;font-size:.65rem;margin-top:5px}

.btn-prev{padding:var(--sp-sm) var(--sp-lg);background:transparent;border:1px solid rgba(59,130,246,.25);color:var(--text-secondary);border-radius:var(--r-md);font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:var(--sp-sm)}

.btn-prev:hover{border-color:var(--blue);color:var(--text-primary)}

.tempo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);margin-top:var(--sp-xl)}

.tempo-card{background:var(--bg-secondary);border:1px solid rgba(59,130,246,.1);border-radius:var(--r-lg);padding:var(--sp-xl);text-align:center;transition:all .3s}

.tempo-card:hover{border-color:rgba(251,191,36,.3);transform:translateY(-3px)}

@media(max-width:1200px){.talen-grid{grid-template-columns:repeat(5,1fr)}}

.article a{color:var(--cyan);text-decoration:underline}

.kc{background:var(--bg2);border:1px solid rgba(59,130,246,.25);border-radius:var(--r2);padding:1.25rem 1.5rem;margin:1.5rem 0}

.kc-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--cyan);margin-bottom:.5rem}

.kc h4{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.35rem}

.kc p{color:var(--t2);font-size:.92rem;margin:0;line-height:1.6}

.spectrum-scale{background:var(--bg2);border:1px solid rgba(139,92,246,.2);border-radius:var(--r3);padding:1.5rem;margin:1.5rem 0}

.ss-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:1rem}

.ss-bar{height:28px;border-radius:var(--r4);background:linear-gradient(90deg,#ef4444 0%,#f97316 14%,#eab308 28%,#22c55e 42%,#3b82f6 57%,#6366f1 71%,#8b5cf6 85%,#ec4899 100%);margin-bottom:.75rem;box-shadow:0 0 20px rgba(139,92,246,.3)}

.ss-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--t3)}

.ss-row{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-top:1rem}

.ss-item{text-align:center;padding:.5rem .25rem;background:rgba(255,255,255,.03);border-radius:var(--r1)}

.ss-item .dot{width:28px;height:28px;border-radius:50%;margin:0 auto .4rem}

.ss-item .lbl{font-size:.7rem;color:var(--t2);font-weight:600}

.ss-item .hz{font-size:.62rem;color:var(--t3)}

.sci-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}

.sci-card{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r2);padding:1.25rem;transition:all .3s}

.sci-card:hover{border-color:rgba(59,130,246,.4);transform:translateY(-2px)}

.sci-card .sci-ic{font-size:1.8rem;margin-bottom:.5rem}

.sci-card h4{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:.35rem}

.sci-card p{font-size:.85rem;color:var(--t2);line-height:1.5;margin:0}

.vlakken{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}

.vlakken th{background:rgba(139,92,246,.15);color:var(--purple);font-weight:700;padding:.7rem 1rem;text-align:left;border-bottom:1px solid rgba(139,92,246,.25)}

.vlakken td{padding:.65rem 1rem;border-bottom:1px solid rgba(59,130,246,.08);color:var(--t2)}

.vlakken td:first-child{color:var(--t1);font-weight:600}

.vlakken tr:last-child td{border-bottom:none}

.vlakken tr:hover td{background:rgba(59,130,246,.04)}

.viz-header{padding:1rem 1.5rem;border-bottom:1px solid rgba(139,92,246,.15);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}

.viz-title{font-size:.85rem;font-weight:700;color:var(--t1)}

.viz-btn:hover,.viz-btn.active{background:rgba(139,92,246,.3);color:var(--t1)}

canvas{display:block;width:100%;height:420px}

.wave-demo{background:var(--bg2);border:1px solid rgba(59,130,246,.2);border-radius:var(--r3);overflow:hidden;margin:1.5rem 0}

.wave-header{padding:.9rem 1.5rem;border-bottom:1px solid rgba(59,130,246,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}

.wave-title{font-size:.85rem;font-weight:700;color:var(--t1)}

.wave-ctrl{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--t2)}

.wave-ctrl label{white-space:nowrap}

.wave-ctrl input[type=range]{width:80px;accent-color:var(--amber)}

.ins-card{background:linear-gradient(135deg,var(--bg2),rgba(30,41,59,.5));border:1px solid rgba(139,92,246,.18);border-radius:var(--r3);padding:1.25rem;text-align:center;transition:all .3s}

.ins-card:hover{border-color:rgba(139,92,246,.45);transform:translateY(-3px);box-shadow:0 10px 30px rgba(139,92,246,.15)}

.ins-ic{font-size:2rem;margin-bottom:.6rem}

.ex-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--green);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}

.ex-box h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.75rem}

.ex-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--t2)}

.ex-list li::before{content:'→';color:var(--green);font-weight:700;flex-shrink:0;margin-top:.05rem}

.les-link.done{color:var(--green)}

.nb{padding:.35rem .85rem;border-radius:var(--r1);text-decoration:none;font-size:.8rem;font-weight:600;border:1px solid rgba(59,130,246,.25);color:var(--t2);transition:all .25s;white-space:nowrap}

.nb:hover{color:var(--t1);background:rgba(59,130,246,.12)}

.nb.prev{background:rgba(59,130,246,.08)}

.nb.active{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4);color:var(--amber)}

.nb.next{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);color:var(--purple)}

.lang-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem}

.lang-tab{padding:.5rem 1.1rem;border-radius:var(--r4);border:1px solid;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .25s;background:transparent}

.lang-tab[data-l="1"]{border-color:var(--c1);color:var(--c1)}

.lang-tab[data-l="2"]{border-color:var(--c2);color:var(--c2)}

.lang-tab[data-l="3"]{border-color:var(--c3);color:var(--c3)}

.lang-tab[data-l="4"]{border-color:var(--c4);color:var(--c4)}

.lang-tab[data-l="5"]{border-color:var(--c5);color:var(--c5)}

.lang-tab[data-l="6"]{border-color:var(--c6);color:var(--c6)}

.lang-tab[data-l="7"]{border-color:rgba(241,245,249,.3);color:var(--c7)}

.lang-tab[data-l="8"]{border-color:rgba(34,197,94,.4);color:var(--c8)}

.lang-tab[data-l="9"]{border-color:rgba(34,211,238,.4);color:var(--c9)}

.lang-tab[data-l="10"]{border-color:rgba(251,191,36,.4);color:var(--c10)}

.lang-tab[data-l="11"]{border-color:rgba(236,72,153,.4);color:var(--c11)}

.lang-tab[data-l="12"]{border-color:rgba(139,92,246,.4);color:var(--c12)}

.lang-tab[data-l="13"]{border-color:rgba(59,130,246,.4);color:var(--c13)}

.lang-tab.active,.lang-tab:hover{filter:brightness(1.1)}

.lang-tab[data-l="1"].active{background:rgba(245,158,11,.15)}

.lang-tab[data-l="2"].active{background:rgba(6,182,212,.15)}

.lang-tab[data-l="3"].active{background:rgba(139,92,246,.15)}

.lang-tab[data-l="4"].active{background:rgba(236,72,153,.15)}

.lang-tab[data-l="5"].active{background:rgba(34,197,94,.15)}

.lang-tab[data-l="6"].active{background:rgba(59,130,246,.15)}

.lang-tab[data-l="7"].active{background:rgba(241,245,249,.08)}

.lang-tab[data-l="8"].active{background:rgba(74,222,128,.15)}

.lang-tab[data-l="9"].active{background:rgba(245,158,11,.15)}

.lang-tab[data-l="10"].active{background:rgba(244,114,182,.15)}

.lang-tab[data-l="11"].active{background:rgba(34,211,238,.15)}

.lang-tab[data-l="12"].active{background:rgba(251,146,60,.15)}

.lang-tab[data-l="13"].active{background:rgba(134,239,172,.15)}

.lang-panel{display:none;animation:fadeIn .35s ease}

.lang-panel.show{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.lang-info{background:var(--bg2);border-radius:var(--r3);padding:1.5rem;border-left:4px solid var(--lc,var(--amber))}

.lang-title{font-size:1.4rem;font-weight:800;color:var(--lc,var(--amber));margin-bottom:.25rem}

.lang-sub{font-size:.8rem;color:var(--t3);font-style:italic;margin-bottom:1rem}

.lang-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}

.lg2-item{background:rgba(255,255,255,.03);border-radius:var(--r1);padding:.6rem .8rem}

.lg2-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--t3);margin-bottom:.2rem}

.lg2-val{font-size:.88rem;color:var(--t2)}

.lg2-val strong{color:var(--t1)}

.lang-examples{margin-top:.75rem}

.lang-examples .ex-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--lc,var(--amber));margin-bottom:.5rem}

.lang-examples ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}

.lang-examples li{font-size:.87rem;color:var(--t2);display:flex;align-items:flex-start;gap:.5rem}

.lang-examples li::before{content:'◆';font-size:.5rem;color:var(--lc,var(--amber));flex-shrink:0;margin-top:.35rem}

.lang-viz{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r3);overflow:hidden;display:flex;flex-direction:column}

.lang-viz-hdr{padding:.75rem 1rem;border-bottom:1px solid rgba(59,130,246,.1);font-size:.75rem;font-weight:700;color:var(--t2)}

.lang-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:280px;position:relative;overflow:hidden}

.lang-canvas-wrap canvas{width:100%;height:auto;display:block;max-height:280px}

.matrix-wrap{background:var(--bg2);border:1px solid rgba(139,92,246,.2);border-radius:var(--r3);overflow:hidden;margin:2rem 0}

.matrix-hdr{padding:1rem 1.5rem;border-bottom:1px solid rgba(139,92,246,.15);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}

.matrix-title{font-size:.9rem;font-weight:700;color:var(--t1)}

.matrix-sub{font-size:.75rem;color:var(--t3)}

.matrix-scroll{overflow-x:auto;padding:1rem}

table.corr{width:100%;border-collapse:collapse;font-size:.8rem;min-width:650px}

table.corr th{background:rgba(139,92,246,.15);color:var(--purple);font-weight:700;padding:.65rem .9rem;text-align:left;border-bottom:1px solid rgba(139,92,246,.2);white-space:nowrap}

table.corr td{padding:.6rem .9rem;border-bottom:1px solid rgba(59,130,246,.07);color:var(--t2);transition:all .2s;cursor:pointer}

table.corr td:first-child{color:var(--amber);font-weight:800;font-size:.95rem}

table.corr tr:last-child td{border-bottom:none}

table.corr tr:hover td{background:rgba(139,92,246,.08);color:var(--t1)}

table.corr tr:hover td:first-child{color:var(--t1)}

.corr-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.4rem;vertical-align:middle}

.full-viz{background:var(--bg2);border:1px solid rgba(59,130,246,.2);border-radius:var(--r3);overflow:hidden;margin:2rem 0}

.full-viz-hdr{padding:1rem 1.5rem;border-bottom:1px solid rgba(59,130,246,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}

.fvh-title{font-size:.88rem;font-weight:700;color:var(--t1)}

.fvh-sub{font-size:.73rem;color:var(--t3)}

.viz-btns{display:flex;gap:.4rem;flex-wrap:wrap}

.vbtn{padding:.3rem .8rem;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);border-radius:var(--r1);color:var(--purple);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .25s}

.vbtn:hover,.vbtn.active{background:rgba(139,92,246,.3);color:var(--t1)}

#mainViz{display:block;width:100%;height:420px}

.why7{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1.5rem 0}

.w7-card{background:var(--bg2);border:1px solid rgba(59,130,246,.12);border-radius:var(--r2);padding:1rem;text-align:center;transition:all .3s}

.w7-card:hover{border-color:rgba(251,191,36,.3);transform:translateY(-2px)}

.w7-ic{font-size:1.6rem;margin-bottom:.4rem}

.w7-card h4{font-size:.8rem;font-weight:700;color:var(--t1);margin-bottom:.3rem}

.w7-card p{font-size:.75rem;color:var(--t3);line-height:1.4;margin:0}

.principe-wrap{display:flex;flex-direction:column;gap:2.5rem;margin:2rem 0}

.pc{border-radius:var(--r3);overflow:hidden;border:1px solid var(--pc-border)}

.pc-header{display:grid;grid-template-columns:72px 1fr;gap:1.5rem;align-items:center;padding:1.5rem;cursor:pointer;transition:background .25s}

.pc-header:hover{background:rgba(255,255,255,.02)}

.pc-num{width:64px;height:64px;border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;flex-shrink:0;border:2px solid}

.pc-num .num-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:.1rem}

.pc-info{}

.pc-principe{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:.2rem}

.pc-title{font-size:1.2rem;font-weight:800;color:var(--t1);margin-bottom:.25rem}

.pc-axiom{font-size:.95rem;font-style:italic;color:var(--t2)}

.pc-body{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;padding:0 1.5rem 1.5rem;border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem}

.pc-text p{color:var(--t2);font-size:.95rem;line-height:1.8;margin-bottom:.75rem}

.pc-text p:last-child{margin-bottom:0}

.pc-text strong{color:var(--t1)}

.pc-daily{background:rgba(255,255,255,.03);border-radius:var(--r2);padding:1rem}

.pc-daily-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.6rem}

.pc-daily ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}

.pc-daily li{font-size:.83rem;color:var(--t2);display:flex;align-items:flex-start;gap:.5rem;line-height:1.4}

.pc-daily li::before{content:'→';font-weight:700;flex-shrink:0;margin-top:.05rem}

.pc-canvas-wrap{border-radius:var(--r2);overflow:hidden;background:rgba(15,23,42,.8)}

.pc-canvas-wrap canvas{display:block;width:100%;height:200px}

.pc1{--pc-border:rgba(251,191,36,.25);background:linear-gradient(135deg,rgba(251,191,36,.05),rgba(15,23,42,0))}

.pc1 .pc-num{background:rgba(251,191,36,.12);color:#fbbf24;border-color:#fbbf24}

.pc1 .pc-principe{color:#fbbf24}

.pc1 .pc-daily-label{color:#fbbf24}

.pc1 .pc-daily li::before{color:#fbbf24}

.pc2{--pc-border:rgba(6,182,212,.25);background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(15,23,42,0))}

.pc2 .pc-num{background:rgba(6,182,212,.12);color:#06b6d4;border-color:#06b6d4}

.pc2 .pc-principe{color:#06b6d4}

.pc2 .pc-daily-label{color:#06b6d4}

.pc2 .pc-daily li::before{color:#06b6d4}

.pc3{--pc-border:rgba(139,92,246,.25);background:linear-gradient(135deg,rgba(139,92,246,.05),rgba(15,23,42,0))}

.pc3 .pc-num{background:rgba(139,92,246,.12);color:#8b5cf6;border-color:#8b5cf6}

.pc3 .pc-principe{color:#8b5cf6}

.pc3 .pc-daily-label{color:#8b5cf6}

.pc3 .pc-daily li::before{color:#8b5cf6}

.pc4{--pc-border:rgba(236,72,153,.25);background:linear-gradient(135deg,rgba(236,72,153,.05),rgba(15,23,42,0))}

.pc4 .pc-num{background:rgba(236,72,153,.12);color:#ec4899;border-color:#ec4899}

.pc4 .pc-principe{color:#ec4899}

.pc4 .pc-daily-label{color:#ec4899}

.pc4 .pc-daily li::before{color:#ec4899}

.pc5{--pc-border:rgba(59,130,246,.25);background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(15,23,42,0))}

.pc5 .pc-num{background:rgba(59,130,246,.12);color:#3b82f6;border-color:#3b82f6}

.pc5 .pc-principe{color:#3b82f6}

.pc5 .pc-daily-label{color:#3b82f6}

.pc5 .pc-daily li::before{color:#3b82f6}

.pc6{--pc-border:rgba(249,115,22,.25);background:linear-gradient(135deg,rgba(249,115,22,.05),rgba(15,23,42,0))}

.pc6 .pc-num{background:rgba(249,115,22,.12);color:#f97316;border-color:#f97316}

.pc6 .pc-principe{color:#f97316}

.pc6 .pc-daily-label{color:#f97316}

.pc6 .pc-daily li::before{color:#f97316}

.pc7{--pc-border:rgba(34,197,94,.25);background:linear-gradient(135deg,rgba(34,197,94,.05),rgba(15,23,42,0))}

.pc7 .pc-num{background:rgba(34,197,94,.12);color:#22c55e;border-color:#22c55e}

.pc7 .pc-principe{color:#22c55e}

.pc7 .pc-daily-label{color:#22c55e}

.pc7 .pc-daily li::before{color:#22c55e}

.p-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:1.5rem 0}

.ps-item{background:var(--bg2);border:1px solid rgba(59,130,246,.12);border-radius:var(--r2);padding:.75rem .5rem;text-align:center;cursor:pointer;transition:all .25s}

.ps-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}

.ps-num{font-size:1.2rem;font-weight:900;margin-bottom:.2rem}

.ps-name{font-size:.68rem;font-weight:700;color:var(--t2);line-height:1.2}

.mod-complete{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(34,197,94,.04));border:1px solid rgba(34,197,94,.35);border-radius:var(--r3);padding:2rem;margin:2.5rem 0;text-align:center}

.mc-icon{font-size:2.5rem;margin-bottom:.75rem}

.mod-complete h3{font-size:1.3rem;font-weight:800;color:var(--green);margin-bottom:.5rem}

.mod-complete p{color:var(--t2);max-width:500px;margin:0 auto 1.25rem;font-size:.95rem;line-height:1.7}

.btn-next-module{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 2rem;background:var(--gs);color:white;text-decoration:none;border-radius:var(--r2);font-weight:700;font-size:.95rem;transition:all .3s;box-shadow:0 4px 15px rgba(139,92,246,.3)}

.btn-next-module:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,.5)}

.toc-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

.tetractys{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem;margin:1.5rem 0;background:var(--bg2);border:1px solid rgba(251,191,36,.25);border-radius:var(--r3)}

.tetractys-row{display:flex;gap:1.2rem;justify-content:center}

.tetractys-dot{width:22px;height:22px;border-radius:50%;background:var(--gg);box-shadow:0 0 12px rgba(251,191,36,.4)}

.tetractys-label{font-size:.78rem;color:var(--t3);margin-top:.5rem;text-align:center}

.num-card{background:var(--bg2);border:1px solid rgba(139,92,246,.18);border-radius:var(--r2);padding:1.25rem;margin:1rem 0;transition:all .3s}

.num-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-1px)}

.num-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}

.num-symbol{width:42px;height:42px;border-radius:50%;background:var(--gp);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:white;flex-shrink:0}

.num-header h4{font-size:1rem;font-weight:700;color:var(--t1)}

.num-card p{font-size:.88rem;color:var(--t2);line-height:1.6;margin:0}

.magic-grid{display:inline-grid;gap:2px;margin:1.5rem auto;background:rgba(251,191,36,.2);border:2px solid rgba(251,191,36,.4);border-radius:var(--r2);padding:2px;justify-content:center}

.magic-grid.g3{grid-template-columns:repeat(3,60px)}

.magic-cell{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bg2);font-size:1.3rem;font-weight:800;color:var(--amber);transition:all .3s}

.magic-cell:hover{background:rgba(251,191,36,.12)}

.magic-sum{font-size:.85rem;color:var(--t3);text-align:center;margin-top:.5rem}

.article h2:first-child{margin-top:0}

.article a:hover{color:var(--amber);border-bottom-color:var(--amber)}

.kc ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}

.kc li{font-size:.92rem;color:var(--t2);display:flex;align-items:flex-start;gap:.5rem;line-height:1.5}

.kc li::before{content:'>';color:var(--cyan);font-weight:700;flex-shrink:0}

.vlakken .hl-row td{background:rgba(251,191,36,.08);color:var(--amber);font-weight:600}

.tetractys .row{display:flex;justify-content:center;gap:1.2rem;margin:.4rem 0}

.tetractys .dot{width:28px;height:28px;border-radius:50%;background:var(--gg);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#0f172a}

.tetractys .label{font-size:.75rem;color:var(--t3);margin-top:.75rem}

.num-big{font-size:2.5rem;font-weight:900;background:var(--gg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;min-width:50px;text-align:center}

.num-title{font-size:1.15rem;font-weight:700;color:var(--amber)}

.num-sub{font-size:.85rem;color:var(--t3);margin-top:.15rem}

.lo-shu{display:grid;grid-template-columns:repeat(3,60px);gap:4px;margin:1rem auto;width:max-content}

.lo-shu span{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid rgba(139,92,246,.3);border-radius:var(--r1);font-size:1.3rem;font-weight:800;color:var(--purple)}

.lo-shu span.center{background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.4);color:var(--amber)}

.lang{font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r1);text-decoration:none;color:var(--t3)}

.lang.active{background:rgba(251,191,36,.15);color:var(--amber);border:1px solid rgba(251,191,36,.3)}

.article h4{font-size:.95rem;font-weight:700;margin:1.25rem 0 .4rem;color:var(--t1)}

.geo-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}

.geo-table th{background:rgba(139,92,246,.1);color:var(--purple);font-weight:700;text-align:left;padding:.6rem .8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}

.geo-table td{padding:.5rem .8rem;border-bottom:1px solid rgba(139,92,246,.06);color:var(--t2)}

.geo-table tr:hover td{background:rgba(139,92,246,.03)}

.kb-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}

.kb-list li{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);color:var(--purple);font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:var(--r4)}

.mod-parts{list-style:none;padding:0;margin:1rem 0}

.mod-parts li{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 0;border-bottom:1px solid rgba(139,92,246,.08);font-size:.95rem;color:var(--t2)}

.mod-parts li strong{color:var(--t1)}

.part-label{background:rgba(139,92,246,.12);color:var(--purple);font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:var(--r4);flex-shrink:0;margin-top:.15rem}

.solfeggio-player{background:var(--bg2);border:1px solid rgba(34,211,238,.2);border-radius:var(--r3);padding:1.5rem;margin:1.5rem 0}

.solfeggio-player h4{color:var(--cyan);margin-bottom:1rem;font-size:1rem}

.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}

.sol-btn{background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.2);border-radius:var(--r2);padding:.75rem;text-align:center;cursor:pointer;transition:all .3s}

.sol-btn:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4);transform:translateY(-2px)}

.sol-btn.playing{background:rgba(34,211,238,.2);border-color:var(--cyan);box-shadow:0 0 20px rgba(34,211,238,.2)}

.sol-hz{font-size:1.3rem;font-weight:800;color:var(--cyan)}

.sol-name{font-size:.78rem;color:var(--t2);margin-top:.2rem}

.sol-stars{font-size:.75rem;color:var(--amber);margin-top:.3rem}

.sol-status{font-size:.68rem;color:var(--t3);margin-top:.15rem}

.viz-btn:hover{background:rgba(139,92,246,.15);border-color:var(--purple);color:var(--t1)}

.timeline li{position:relative;padding:0 0 1.5rem 40px}

.timeline li:last-child{padding-bottom:0}

.timeline .tl-dot{position:absolute;left:7px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--purple);border:3px solid var(--bg)}

.timeline .tl-year{font-size:.75rem;font-weight:700;color:var(--purple);letter-spacing:1px;text-transform:uppercase}

.timeline .tl-name{font-size:1rem;font-weight:700;color:var(--t1);margin:.2rem 0}

.timeline .tl-desc{font-size:.9rem;color:var(--t2);line-height:1.7}

.kernles-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);color:var(--amber);padding:.15rem .7rem;border-radius:var(--r4);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-left:.5rem}

.wat-leer{margin-top:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}

.wl-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:var(--t2)}

.wl-item::before{content:'✦';color:var(--blue);flex-shrink:0;font-size:.7rem;margin-top:4px}

.vis-wrap{border-radius:var(--r2);overflow:hidden;background:rgba(15,23,42,.8);border:1px solid rgba(59,130,246,.15);margin:1.5rem 0}

.vis-wrap canvas{display:block;width:100%;height:auto}

.vis-title{padding:.6rem 1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--blue);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(59,130,246,.1)}

.vis-controls{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem 1rem;border-top:1px solid rgba(59,130,246,.1)}

.vis-btn{padding:.3rem .8rem;border-radius:var(--r1);border:1px solid rgba(59,130,246,.25);background:transparent;color:var(--t2);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .25s}

.vis-btn:hover,.vis-btn.active{background:rgba(59,130,246,.15);border-color:var(--blue);color:var(--t1)}

.vis-btn.gold{border-color:rgba(251,191,36,.3)}.vis-btn.gold:hover,.vis-btn.gold.active{background:rgba(251,191,36,.15);border-color:var(--amber);color:var(--amber)}

.shape-info{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r2);padding:1rem 1.25rem;margin-top:.75rem;display:none}

.shape-info.show{display:block}

.shape-info h4{color:var(--blue);margin:0 0 .4rem;font-size:1rem}

.shape-info p{font-size:.9rem;margin-bottom:.5rem}

.slider-row{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem}

.slider-row label{font-size:.8rem;color:var(--t3);white-space:nowrap}

.slider-row input[type=range]{flex:1;accent-color:var(--blue)}

.slider-val{font-size:.8rem;color:var(--blue);font-weight:700;min-width:3rem;text-align:center}

.ex-level{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:var(--r4);display:inline-block;margin-bottom:.5rem}

.ex-quick{background:rgba(251,191,36,.12);color:var(--amber)}

.ex-begin{background:rgba(34,197,94,.12);color:var(--green)}

.ex-adv{background:rgba(139,92,246,.12);color:var(--purple)}

.mandala-opts{display:flex;gap:1rem;flex-wrap:wrap;padding:.75rem 1rem;align-items:center}

.mandala-opts label{font-size:.8rem;color:var(--t3)}

.mandala-opts select,.mandala-opts input[type=color]{padding:.3rem .5rem;border-radius:var(--r1);border:1px solid rgba(59,130,246,.25);background:var(--bg);color:var(--t1);font-size:.8rem}

.hero-desc{font-size:1.05rem;color:var(--t2);max-width:650px;line-height:1.8;margin-bottom:1.5rem}

.sec-title{font-size:1.4rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(139,92,246,.15)}

.sec-title .ic{width:34px;height:34px;border-radius:var(--r1);background:rgba(139,92,246,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}

.sec-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--purple);margin-bottom:.75rem}

.les-grid{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}

.les-card{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;background:var(--bg2);border:1px solid rgba(59,130,246,.1);border-radius:var(--r2);text-decoration:none;color:var(--t2);transition:all .25s}

.les-card:hover{border-color:rgba(139,92,246,.35);background:rgba(30,41,59,.8);transform:translateX(4px)}

.les-card.kern{border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.04)}

.les-card.kern:hover{border-color:rgba(251,191,36,.5)}

.les-info h4{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:2px}

.les-info p{font-size:.83rem;color:var(--t3);line-height:1.5;margin:0}

.les-info .kern-badge{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:var(--r4);background:rgba(251,191,36,.2);color:var(--amber);margin-left:.5rem}

.hero-canvas-wrap{width:100%;height:320px;position:relative}

.hero-canvas-wrap canvas{display:block;width:100%;height:100%}

.pq::after{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--pqc,var(--amber));box-shadow:0 0 12px var(--pqc,var(--amber))}

.vis-info{display:none;padding:.75rem 1rem;background:var(--bg2);border-top:1px solid rgba(251,191,36,.1);font-size:.88rem;color:var(--t2);line-height:1.6}

.vis-info.show{display:block}

.vis-info h4{color:var(--amber);margin:0 0 .3rem;font-size:.95rem}

.color-tiles{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem 1rem}

.color-tile{width:40px;height:40px;border-radius:var(--r1);cursor:pointer;transition:all .25s;border:2px solid transparent}

.color-tile:hover,.color-tile.active{transform:scale(1.15);border-color:white;box-shadow:0 0 15px currentColor}

.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.5rem 0}

.term-card{background:var(--bg2);border:1px solid rgba(251,191,36,.12);border-radius:var(--r2);padding:1rem}

.term-card h4{color:var(--amber);font-size:.9rem;margin:0 0 .3rem}

.term-card p{font-size:.85rem;color:var(--t2);margin:0;line-height:1.6}

.main-wrap{max-width:800px;margin:0 auto;padding:2rem}

.quiz-card{background:var(--bg2);border:1px solid rgba(34,197,94,.12);border-radius:var(--r2);padding:1.5rem;margin-bottom:1rem;transition:all .3s}

.quiz-card:hover{border-color:rgba(34,197,94,.25)}

.q-num{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);margin-bottom:.4rem}

.q-text{font-size:1rem;font-weight:600;color:var(--t1);margin-bottom:.75rem}

.q-options{display:flex;gap:.5rem;flex-wrap:wrap}

.q-opt{width:48px;height:48px;border-radius:50%;border:2px solid var(--bg3);background:var(--bg);color:var(--t2);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}

.q-opt:hover{border-color:var(--green);color:var(--green)}

.q-opt.selected{border-color:var(--green);background:rgba(34,197,94,.15);color:var(--green)}

.q-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--t3);margin-top:.3rem;padding:0 .5rem}

.btn-calc{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,var(--green),#16a34a);color:white;border-radius:var(--r2);font-size:1rem;font-weight:700;border:none;cursor:pointer;transition:all .3s;width:100%;justify-content:center;margin-top:1rem}

.btn-calc:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.35)}

#results{display:none;margin-top:2rem}

.res-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;text-align:center}

.top3{display:grid;gap:1rem;margin-bottom:2rem}

.top-card{background:var(--bg2);border-radius:var(--r2);padding:1.5rem;border:1px solid rgba(34,197,94,.12);transition:all .3s}

.top-card.winner{border-color:var(--green);box-shadow:0 8px 30px rgba(34,197,94,.12)}

.top-header{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}

.top-rank{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;flex-shrink:0}

.rank-1{background:rgba(34,197,94,.15);color:var(--green)}

.rank-2{background:rgba(59,130,246,.15);color:var(--blue)}

.rank-3{background:rgba(139,92,246,.15);color:var(--purple)}

.top-name{font-size:1.15rem;font-weight:700;color:var(--t1)}

.top-score{font-size:.85rem;color:var(--t2)}

.score-bar{height:6px;background:var(--bg3);border-radius:3px;margin:.75rem 0;overflow:hidden}

.score-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .6s ease}

.profile-section{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(34,197,94,.1)}

.profile-row{margin-bottom:.75rem}

.profile-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);margin-bottom:.2rem}

.profile-val{font-size:.9rem;color:var(--t2);line-height:1.7}

.input-card{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r3);padding:2rem;margin-bottom:2rem}

.input-card h2{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;color:var(--blue)}

.form-group{margin-bottom:1.25rem}

.form-group label{display:block;font-size:.9rem;font-weight:600;color:var(--t2);margin-bottom:.4rem}

.form-group select{width:100%;padding:.65rem 1rem;background:var(--bg);border:1px solid var(--bg3);border-radius:var(--r1);color:var(--t1);font-size:1rem;font-family:inherit}

.form-group select:focus{outline:none;border-color:var(--blue)}

.date-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}

.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}

.result-card{background:var(--bg2);border-radius:var(--r2);padding:1.5rem;border:1px solid rgba(59,130,246,.1);transition:all .3s}

.result-card:hover{border-color:rgba(59,130,246,.3)}

.card-emoji{font-size:3rem;margin-bottom:.75rem}

.card-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);margin-bottom:.4rem}

.card-title{font-size:1.3rem;font-weight:700;color:var(--t1);margin-bottom:.4rem}

.card-detail{font-size:.9rem;color:var(--t2);line-height:1.7}

.card-tag{display:inline-block;padding:2px 10px;border-radius:var(--r4);font-size:.75rem;font-weight:600;margin-top:.5rem;background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.2)}

.disclaimer{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:var(--r2);padding:1.25rem 1.5rem;margin-bottom:2rem;font-size:.9rem;color:var(--t2);line-height:1.7}

.disclaimer strong{color:var(--amber)}

.prompt-text{text-align:center;font-size:1.2rem;font-weight:600;color:var(--t2);margin-bottom:2rem}

.types-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-bottom:2rem}

.type-card:hover{border-color:rgba(34,211,238,.4);transform:translateY(-4px)}

.type-card.active{border-color:var(--cyan);box-shadow:0 8px 30px rgba(34,211,238,.15)}

.type-emoji{font-size:2.5rem;margin-bottom:.75rem}

.type-name{font-size:1.15rem;font-weight:700;color:var(--t1);margin-bottom:.25rem}

.type-pct{font-size:.8rem;color:var(--cyan);font-weight:600}

.type-expand{display:none;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgba(34,211,238,.15)}

.type-card.active .type-expand{display:block}

.expand-row{margin-bottom:.75rem}

.expand-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--cyan);margin-bottom:.2rem}

.expand-val{font-size:.9rem;color:var(--t2);line-height:1.7}

.expand-tips{margin-top:1rem;padding:1rem;background:rgba(34,211,238,.05);border-radius:var(--r1);border:1px solid rgba(34,211,238,.1)}

.expand-tips h4{font-size:.85rem;font-weight:700;color:var(--cyan);margin-bottom:.4rem}

.expand-tips ul{padding-left:1.2rem;font-size:.85rem;color:var(--t2)}

.expand-tips li{margin-bottom:.3rem}

.external-note{text-align:center;padding:2rem;background:var(--bg2);border-radius:var(--r2);border:1px solid rgba(139,92,246,.15);margin-top:2rem}

.external-note p{color:var(--t2);font-size:.95rem;line-height:1.7}

.external-note strong{color:var(--t1)}

.external-site{color:var(--cyan);font-weight:600}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}

.tool-card{background:var(--bg2);border:1px solid rgba(59,130,246,.12);border-radius:var(--r3);overflow:hidden;transition:all .35s;display:flex;flex-direction:column}

.tool-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(139,92,246,.15)}

.tool-card[data-color="cyan"]:hover{border-color:rgba(34,211,238,.5);box-shadow:0 16px 40px rgba(34,211,238,.15)}

.tool-card[data-color="purple"]:hover{border-color:rgba(139,92,246,.5);box-shadow:0 16px 40px rgba(139,92,246,.15)}

.tool-card[data-color="amber"]:hover{border-color:rgba(251,191,36,.5);box-shadow:0 16px 40px rgba(251,191,36,.15)}

.tool-card[data-color="blue"]:hover{border-color:rgba(59,130,246,.5);box-shadow:0 16px 40px rgba(59,130,246,.15)}

.tool-card[data-color="green"]:hover{border-color:rgba(34,197,94,.5);box-shadow:0 16px 40px rgba(34,197,94,.15)}

.tc-border{height:4px;width:100%}

.tc-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}

.tc-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}

.tc-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:var(--r4)}

.tc-icon{font-size:3rem;margin-bottom:1rem}

.tc-body h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem;color:var(--t1)}

.tc-desc{font-size:.88rem;color:var(--t2);line-height:1.7;margin-bottom:1.25rem;flex:1}

.btn-tool{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.5rem;background:var(--gs);color:white;border-radius:var(--r2);font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s;border:none;cursor:pointer}

.btn-tool:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.35)}

.form-group input,.form-group select{width:100%;padding:.65rem 1rem;background:var(--bg);border:1px solid var(--bg3);border-radius:var(--r1);color:var(--t1);font-size:1rem;font-family:inherit;transition:border-color .2s}

.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--amber)}

.result-num{font-size:3rem;font-weight:800;background:var(--gg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}

.result-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--amber);margin-top:.5rem;margin-bottom:.5rem}

.result-name{font-size:1.1rem;font-weight:700;color:var(--t1);margin-bottom:.4rem}

.result-desc{font-size:.88rem;color:var(--t2);line-height:1.7}

.badge-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}

.master-badge{padding:.4rem 1rem;border-radius:var(--r4);font-size:.8rem;font-weight:700;background:rgba(139,92,246,.15);color:var(--purple);border:1px solid rgba(139,92,246,.3)}

.karmic-badge{padding:.4rem 1rem;border-radius:var(--r4);font-size:.8rem;font-weight:700;background:rgba(236,72,153,.15);color:var(--pink);border:1px solid rgba(236,72,153,.3)}

.py-hero{background:var(--bg2);border:1px solid rgba(139,92,246,.2);border-radius:var(--r3);padding:2rem;text-align:center;margin-bottom:2rem}

.py-num{font-size:5rem;font-weight:800;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}

.py-label{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--purple);margin:.75rem 0 .5rem}

.py-title{font-size:1.3rem;font-weight:700;color:var(--t1);margin-bottom:.75rem}

.py-desc{font-size:.95rem;color:var(--t2);line-height:1.8;max-width:600px;margin:0 auto}

.timeline-section{margin-bottom:2rem}

.timeline-title{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:var(--t1)}

.tl-item{flex:1;min-width:90px;text-align:center;position:relative;padding:1rem .5rem}

.tl-item::before{content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:var(--bg3);z-index:0}

.tl-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;margin:0 auto .5rem;position:relative;z-index:1;border:2px solid var(--bg3);background:var(--bg);color:var(--t2);transition:all .3s}

.tl-item.current .tl-dot{border-color:var(--purple);background:rgba(139,92,246,.15);color:var(--purple);box-shadow:0 0 15px rgba(139,92,246,.3)}

.tl-item.past .tl-dot{border-color:var(--t3);background:var(--bg3);color:var(--t2)}

.tl-year{font-size:.75rem;color:var(--t3);font-weight:600}

.tl-item.current .tl-year{color:var(--purple)}

.months-title{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:var(--t1)}

.months-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}

.month-card{background:var(--bg2);border:1px solid rgba(139,92,246,.1);border-radius:var(--r2);padding:1rem;transition:all .3s}

.month-card:hover{border-color:rgba(139,92,246,.3)}

.month-name{font-size:.85rem;font-weight:700;color:var(--purple);margin-bottom:.25rem}

.month-num{font-size:1.8rem;font-weight:800;color:var(--t1);line-height:1}

.month-meaning{font-size:.82rem;color:var(--t2);margin-top:.4rem;line-height:1.6}

.tool-card[data-color="pink"]:hover{border-color:rgba(236,72,153,.5);box-shadow:0 16px 40px rgba(236,72,153,.15)}

.tool-card[data-color="spectrum"]:hover{border-color:rgba(139,92,246,.5);box-shadow:0 16px 40px rgba(139,92,246,.12),0 16px 40px rgba(236,72,153,.08)}

@keyframes cymPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

@keyframes geoRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@keyframes chakraGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(34,197,94,.3))}50%{filter:drop-shadow(0 0 8px rgba(34,197,94,.6))}}

.cym-outer{animation:cymPulse 2s ease-in-out infinite;transform-origin:center}

.geo-spin{animation:geoRotate 30s linear infinite;transform-origin:center}

.chakra-glow{animation:chakraGlow 2.5s ease-in-out infinite}

.suggest-sec{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(139,92,246,.04));border-top:1px solid rgba(59,130,246,.12);padding:3rem 2rem;text-align:center}

.suggest-inner{max-width:600px;margin:0 auto}

.suggest-icon{font-size:3rem;margin-bottom:1rem}

.suggest-sec h3{font-size:1.5rem;font-weight:700;margin-bottom:.75rem}

.suggest-sec p{color:var(--t2);font-size:1rem;margin-bottom:1.5rem;line-height:1.7}

.btn-suggest{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.5rem;border:1px solid rgba(59,130,246,.3);color:var(--t2);border-radius:var(--r2);font-size:.85rem;font-weight:500;text-decoration:none;transition:all .3s}

.btn-suggest:hover{border-color:var(--blue);color:var(--t1);background:rgba(59,130,246,.08)}

.tech-badges{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

.tech-badge{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 12px;border-radius:var(--r4);background:rgba(34,211,238,.1);color:var(--cyan);border:1px solid rgba(34,211,238,.25)}

.compat-warn{display:none;max-width:700px;margin:1rem auto;padding:1rem 1.5rem;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--r2);color:#fca5a5;text-align:center;font-size:.9rem}

.main-grid{display:grid;grid-template-columns:58% 42%;gap:2rem;align-items:start}

.canvas-wrap{position:relative;background:#0a0f1e;border-radius:16px;border:1px solid rgba(34,211,238,.3);box-shadow:0 0 40px rgba(34,211,238,.08);overflow:hidden}

.canvas-wrap canvas{width:100%;height:auto;display:block}

.canvas-overlay{position:absolute;top:12px;right:16px;text-align:right;pointer-events:none}

.canvas-freq{font-size:1.4rem;font-weight:800;font-family:'Segoe UI',monospace;text-shadow:0 0 20px currentColor}

.canvas-name{font-size:.75rem;color:var(--t2);margin-top:2px}

.canvas-nm{position:absolute;bottom:12px;left:16px;font-size:.7rem;color:rgba(148,163,184,.4);pointer-events:none;font-family:monospace}

.canvas-wrap.playing{animation:canvasPulse 2s ease-in-out infinite}

@keyframes canvasPulse{0%,100%{box-shadow:0 0 40px rgba(34,211,238,.08)}50%{box-shadow:0 0 60px rgba(34,211,238,.18)}}

.ctrl-panel{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r3);padding:1.5rem;position:sticky;top:80px}

.ctrl-section{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(59,130,246,.08)}

.ctrl-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}

.ctrl-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}

.freq-display{text-align:center;margin-bottom:.75rem}

.freq-num{font-size:3rem;font-weight:900;font-family:'Segoe UI',monospace;line-height:1;transition:color .3s}

.freq-unit{font-size:1rem;color:var(--t3);font-weight:400;margin-left:.25rem}

.freq-name-display{font-size:.85rem;color:var(--t2);margin-top:.25rem}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer}

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.4);cursor:pointer;margin-top:-7px}

input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.4);cursor:pointer}

input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px}

input[type=range]::-moz-range-track{height:6px;border-radius:3px}

#freqSlider{background:linear-gradient(90deg,var(--cyan),var(--purple))}

#volSlider{background:linear-gradient(90deg,var(--bg3),var(--green))}

#beatSlider{background:linear-gradient(90deg,var(--blue),var(--purple))}

.slider-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t3);margin-top:.25rem}

.wave-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}

.wave-btn{background:var(--bg3);border:1px solid rgba(59,130,246,.15);border-radius:var(--r1);padding:.4rem .25rem;cursor:pointer;text-align:center;transition:all .25s;color:var(--t2);font-size:.7rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.2rem}

.wave-btn:hover{border-color:rgba(34,211,238,.4);color:var(--t1)}

.wave-btn.active{background:rgba(34,211,238,.15);border-color:var(--cyan);color:var(--cyan)}

.wave-btn svg{width:40px;height:20px}

.wave-btn svg path{stroke:currentColor;fill:none;stroke-width:2}

.toggle-row{display:flex;align-items:center;justify-content:space-between}

.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}

.toggle-switch input{opacity:0;width:0;height:0}

.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg3);border-radius:24px;transition:.3s;border:1px solid rgba(59,130,246,.2)}

.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;background:var(--t3);border-radius:50%;transition:.3s}

.toggle-switch input:checked+.toggle-slider{background:rgba(34,211,238,.25);border-color:var(--cyan)}

.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--cyan)}

.bin-panel{display:none;margin-top:.75rem;padding:.75rem;background:rgba(139,92,246,.05);border:1px solid rgba(139,92,246,.15);border-radius:var(--r2)}

.bin-panel.show{display:block}

.brainwave-badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 10px;border-radius:var(--r4);margin-top:.35rem}

.dur-btns{display:flex;gap:.35rem;flex-wrap:wrap}

.dur-btn{padding:.3rem .65rem;background:var(--bg3);border:1px solid rgba(59,130,246,.15);border-radius:var(--r1);cursor:pointer;color:var(--t2);font-size:.75rem;font-weight:600;transition:all .25s}

.dur-btn:hover{border-color:rgba(34,211,238,.4);color:var(--t1)}

.dur-btn.active{background:rgba(34,211,238,.15);border-color:var(--cyan);color:var(--cyan)}

.countdown{font-size:.8rem;color:var(--amber);font-weight:700;margin-top:.35rem;font-family:monospace;display:none}

.play-btn{width:100%;padding:.85rem;border:none;border-radius:var(--r2);font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;color:#fff;background:var(--gs);letter-spacing:.5px}

.play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,.35)}

.play-btn.playing{animation:playPulse 1.5s ease-in-out infinite}

@keyframes playPulse{0%,100%{box-shadow:0 4px 15px rgba(139,92,246,.2)}50%{box-shadow:0 4px 30px rgba(139,92,246,.5)}}

.vol-label{font-size:.8rem;color:var(--t2);text-align:right;font-weight:600}

.solf-section{max-width:1400px;margin:0 auto;padding:0 2rem 2rem}

.solf-header{text-align:center;margin-bottom:1.5rem}

.solf-header h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:700;margin-bottom:.4rem}

.solf-header p{color:var(--t2);font-size:.95rem}

.solf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.solf-btn{background:var(--bg2);border:2px solid transparent;border-radius:var(--r2);padding:1.25rem 1rem;cursor:pointer;text-align:center;transition:all .3s;position:relative;overflow:hidden}

.solf-btn:hover{transform:translateY(-3px)}

.solf-btn .sf-hz{font-size:1.8rem;font-weight:900;font-family:'Segoe UI',monospace;line-height:1}

.solf-btn .sf-unit{font-size:.75rem;font-weight:400;opacity:.6}

.solf-btn .sf-name{font-size:.8rem;margin-top:.35rem;font-weight:600}

.solf-btn.active{border-width:2px}

.solf-btn.active::after{content:'\2713';position:absolute;top:8px;right:10px;font-size:.85rem;font-weight:700}

.solf-extra{margin-top:1rem}

.solf-extra summary{cursor:pointer;color:var(--t2);font-size:.9rem;font-weight:600;padding:.5rem 0;transition:color .2s}

.solf-extra summary:hover{color:var(--t1)}

.solf-extra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-top:.75rem}

.solf-sm{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r1);padding:.75rem;cursor:pointer;text-align:center;transition:all .3s}

.solf-sm:hover{border-color:rgba(34,211,238,.4);transform:translateY(-2px)}

.solf-sm .sf-hz{font-size:1.2rem;font-weight:800}

.solf-sm .sf-name{font-size:.7rem;margin-top:.2rem;color:var(--t2)}

.freq-info{max-width:1400px;margin:0 auto;padding:0 2rem 2rem}

.info-card{background:var(--bg2);border:1px solid rgba(59,130,246,.15);border-radius:var(--r3);padding:1.5rem;transition:border-color .3s}

.info-card h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}

.info-desc{color:var(--t2);font-size:.92rem;line-height:1.7;margin-bottom:1rem}

.info-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}

.meta-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:.15rem}

.meta-val{font-size:.9rem;font-weight:600;color:var(--t1)}

.about-sec{max-width:1400px;margin:0 auto;padding:0 2rem 2rem}

.about-card{background:var(--bg2);border:1px solid rgba(59,130,246,.1);border-radius:var(--r3);padding:2rem}

.about-card h2{font-size:1.3rem;font-weight:700;margin-bottom:1rem}

.about-card p{color:var(--t2);font-size:.9rem;line-height:1.8;margin-bottom:.75rem}

.about-card blockquote{border-left:3px solid var(--amber);padding-left:1rem;margin:1rem 0;font-style:italic;color:var(--amber);font-size:.95rem}

.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--t2);text-decoration:none;font-size:.9rem;font-weight:600;margin-top:1rem;transition:color .2s}

.back-link:hover{color:var(--amber)}

@media(max-width:900px){
.main-grid{grid-template-columns:1fr}
.ctrl-panel{position:static}
.solf-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
.main-wrap,.solf-section,.freq-info,.about-sec{padding-left:1rem;padding-right:1rem}
.hero{padding-left:1rem;padding-right:1rem}
.solf-grid{grid-template-columns:1fr 1fr}
.ft-inner{grid-template-columns:1fr;padding:1.5rem 1rem}
.wave-btns{grid-template-columns:repeat(4,1fr);gap:.35rem}
.freq-num{font-size:2.4rem}
.info-meta{grid-template-columns:repeat(2,1fr)}
}

/* --- Remaining missing component styles --- */

/* Article cards (blog sidebar) */
.ac-banner { height: 5px; background: var(--gs); }
.ac-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.ac-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.ac-desc { font-size: 0.82rem; color: var(--t2); line-height: 1.5; flex: 1; }
.ac-meta { font-size: 0.72rem; color: var(--t3); margin-top: 0.75rem; }
.ac-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--r4); background: rgba(251, 191, 36, 0.15); color: var(--amber); display: inline-block; margin-bottom: 0.5rem; }
.ac-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ac-actions { display: flex; gap: 0.5rem; margin-top: auto; }

/* Completion certificate */
.completion-certificate { border: 2px solid rgba(251, 191, 36, 0.3); border-radius: var(--r3); padding: 2.5rem; margin: 2rem 0; text-align: center; background: linear-gradient(135deg, rgba(251, 191, 36, 0.04) 0%, rgba(139, 92, 246, 0.04) 50%, rgba(236, 72, 153, 0.04) 100%); position: relative; }
.completion-banner { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(251, 191, 36, 0.15) 100%); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: var(--r3); padding: 2rem; margin: 2.5rem 0; text-align: center; }
.cert-trophy { font-size: 3.5rem; margin-bottom: 1rem; display: block; }
.cert-title { font-size: 1.1rem; font-weight: 700; color: var(--t1); margin-bottom: 0.25rem; }
.cert-name { font-size: 1.5rem; font-weight: 800; background: var(--gg); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; display: block; }
.cb-icon { font-size: 3rem; margin-bottom: 0.75rem; display: block; }

/* CTA sister course */
.cta-sister { display: block; margin: 2rem 0; padding: 2rem; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: var(--r3); text-decoration: none; text-align: center; transition: all 0.3s; }
.cta-sister:hover { border-color: rgba(139, 92, 246, 0.5); transform: translateY(-3px); }
.cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; background: var(--gs); color: white; border-radius: var(--r2); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.3s; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35); }
.cta-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

/* Table of contents card */
.toc-card { background: var(--bg2); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: var(--r3); padding: 1.25rem; margin: 1.5rem 0; }

/* Toolkit card actions */
.tc-actions { display: flex; gap: 0.5rem; margin-top: auto; }
.tc-cat { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--r4); background: rgba(139, 92, 246, 0.15); color: var(--purple); }
.tc-icon-box { width: 80px; height: 80px; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 3rem; }
.tc-icon { font-size: 3rem; margin-bottom: 1rem; }

/* Contact page (already has pageCSS but add base classes) */
.contact-wrapper { max-width: 650px; margin: 0 auto; padding: var(--2xl) var(--xl); }
.contact-intro { color: var(--t2); font-size: 1rem; margin-bottom: var(--xl); line-height: 1.7; }
.contact-note { font-size: 0.85rem; color: var(--t3); margin-top: var(--lg); text-align: center; }

/* Toolkit button */
.btn-tool { padding: 0.5rem 1.25rem; background: var(--gs); color: white; border-radius: var(--r2); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-tool:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35); }