/* ===== RESET & BASE ===== */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg-deep: #070a15;
            --bg-primary: #0b0f1e;
            --bg-card: rgba(255,255,255,0.04);
            --bg-card-hover: rgba(255,255,255,0.07);
            --border: rgba(255,255,255,0.08);
            --border-bright: rgba(255,255,255,0.15);
            --text-primary: #f0f4f8;
            --text-secondary: #8892a4;
            --text-muted: #5a6478;
            --accent: #6366f1;
            --accent-glow: rgba(99,102,241,0.4);
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --radio-color: #ef4444;
            --micro-color: #f97316;
            --ir-color: #eab308;
            --visible-start: #ef4444;
            --visible-end: #8b5cf6;
            --uv-color: #a855f7;
            --xray-color: #3b82f6;
            --gamma-color: #06b6d4;
            --radius: 16px;
            --radius-sm: 10px;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: var(--bg-deep);
            color: var(--text-primary);
            line-height: 1.75;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-deep); }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

        /* ===== NAVIGATION ===== */
        nav {
            position: sticky; top: 64px; left: 0; right: 0; z-index: 10;
            background: rgba(7,10,21,0.85);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            transition: all 0.3s;
        }
        nav.scrolled { background: rgba(7,10,21,0.95); box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
        .nav-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 24px; height: 60px;
        }
        .nav-brand { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
        .nav-brand span { font-size: 1.3rem; }
        .nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
        .nav-links a {
            color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; font-weight: 500;
            padding: 6px 12px; border-radius: 8px; transition: all 0.2s; white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: rgba(255,255,255,0.08); }

        /* ===== HERO ===== */
        .hero {
            padding: 120px 24px 60px; text-align: center; position: relative; overflow: hidden;
            background: linear-gradient(180deg, rgba(99,102,241,0.08) 0%, transparent 60%);
        }
        .hero canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; }
        .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
        .hero h1 {
            font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.15;
            background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #818cf8 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            margin-bottom: 16px;
        }
        .hero p { font-size: 1.15rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
            padding: 8px 20px; border-radius: 100px; font-size: 0.85rem; color: #a5b4fc;
        }
        .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse-dot 2s infinite; }
        @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

        /* ===== LAYOUT ===== */
        .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
        section { padding: 60px 0; }

        /* ===== CARDS ===== */
        .card {
            background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 36px; margin-bottom: 28px; transition: all 0.3s;
        }
        .card:hover { border-color: var(--border-bright); background: var(--bg-card-hover); }
        .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .card-icon {
            width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; flex-shrink: 0;
        }
        .card-header h3 { font-size: 1.3rem; font-weight: 700; }

        /* ===== SECTION HEADERS ===== */
        .section-header { margin-bottom: 40px; }
        .section-header .label {
            font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
            color: #818cf8; margin-bottom: 8px;
        }
        .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
        .section-header p { color: var(--text-secondary); font-size: 1.05rem; max-width: 700px; }

        /* ===== LEARNING OUTCOMES ===== */
        .outcomes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
        .outcome-item {
            display: flex; align-items: flex-start; gap: 12px;
            background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15);
            border-radius: var(--radius-sm); padding: 16px; transition: all 0.3s;
        }
        .outcome-item:hover { background: rgba(34,197,94,0.1); transform: translateY(-2px); }
        .outcome-check { color: var(--success); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

        /* ===== SPECTRUM EXPLORER ===== */
        .spectrum-bar-wrap { margin: 32px 0 16px; }
        .spectrum-bar {
            display: flex; height: 80px; border-radius: 12px; overflow: hidden; cursor: pointer;
            box-shadow: 0 0 30px rgba(0,0,0,0.3);
        }
        .spectrum-segment {
            flex: 1; display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.9);
            transition: all 0.3s; position: relative; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .spectrum-segment:hover, .spectrum-segment.active { flex: 1.8; font-size: 0.85rem; }
        .spectrum-segment.active { box-shadow: inset 0 0 30px rgba(255,255,255,0.2); }
        .seg-radio { background: linear-gradient(135deg, #dc2626, #ef4444); }
        .seg-micro { background: linear-gradient(135deg, #ea580c, #f97316); }
        .seg-ir { background: linear-gradient(135deg, #ca8a04, #eab308); }
        .seg-visible { background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #8b5cf6); }
        .seg-uv { background: linear-gradient(135deg, #7c3aed, #a855f7); }
        .seg-xray { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .seg-gamma { background: linear-gradient(135deg, #0891b2, #06b6d4); }

        .spectrum-arrows {
            display: flex; justify-content: space-between; padding: 8px 4px;
            font-size: 0.78rem; color: var(--text-muted);
        }

        .spectrum-info-panel {
            background: var(--bg-card); border: 1px solid var(--border-bright);
            border-radius: var(--radius-sm); padding: 24px; margin-top: 16px;
            display: none; animation: fadeSlideIn 0.3s ease;
        }
        .spectrum-info-panel.visible { display: block; }
        @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
        .info-item { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 14px; }
        .info-item .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
        .info-item .value { font-weight: 600; font-size: 1rem; }

        /* ===== WAVE SIMULATOR ===== */
        .sim-canvas-wrap {
            background: rgba(0,0,0,0.3); border: 1px solid var(--border);
            border-radius: var(--radius-sm); overflow: hidden; position: relative;
        }
        #waveCanvas { display: block; width: 100%; height: 320px; }
        .sim-controls {
            display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;
        }
        .control-group { display: flex; flex-direction: column; gap: 6px; }
        .control-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); display: flex; justify-content: space-between; }
        .control-group label span { color: #818cf8; }
        input[type="range"] {
            -webkit-appearance: none; width: 100%; height: 6px;
            background: rgba(255,255,255,0.1); border-radius: 3px; outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 20px; height: 20px;
            background: #6366f1; border-radius: 50%; cursor: pointer;
            box-shadow: 0 0 10px var(--accent-glow);
        }
        .sim-stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px;
        }
        .stat-box {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: 10px; padding: 14px; text-align: center;
        }
        .stat-box .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
        .stat-box .stat-value { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
        .sim-btns { display: flex; gap: 10px; margin-top: 16px; }

        /* ===== FORMULA ===== */
        .formula-card {
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1));
            border: 1px solid rgba(99,102,241,0.25);
            border-radius: var(--radius-sm); padding: 24px; text-align: center; margin: 24px 0;
        }
        .formula-card .formula { font-size: 1.6rem; font-weight: 700; color: #a5b4fc; margin-bottom: 6px; }
        .formula-card .formula-desc { font-size: 0.9rem; color: var(--text-secondary); }

        /* ===== CALCULATOR ===== */
        .calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
        .calc-inputs { display: flex; flex-direction: column; gap: 16px; }
        .input-group { display: flex; flex-direction: column; gap: 6px; }
        .input-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
        .input-row { display: flex; gap: 8px; }
        .input-row input {
            flex: 1; background: rgba(255,255,255,0.06); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 14px; color: var(--text-primary);
            font-family: inherit; font-size: 1rem; outline: none; transition: all 0.2s;
        }
        .input-row input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
        .input-row select {
            background: rgba(255,255,255,0.06); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 12px; color: var(--text-primary);
            font-family: inherit; font-size: 0.9rem; outline: none; cursor: pointer;
        }
        .input-row select option { background: #1a1d3a; color: #fff; }
        .calc-result {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 24px; min-height: 200px;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center;
        }
        .calc-result .result-value { font-size: 2rem; font-weight: 800; margin: 8px 0; }
        .calc-result .result-region { font-size: 1rem; padding: 6px 16px; border-radius: 100px; margin-top: 8px; }
        .calc-result .result-detail { font-size: 0.85rem; color: var(--text-secondary); margin-top: 12px; }

        /* ===== BUTTONS ===== */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 10px 24px; border-radius: 10px; font-family: inherit; font-weight: 600;
            font-size: 0.9rem; cursor: pointer; transition: all 0.2s; border: none;
        }
        .btn-primary { background: #6366f1; color: #fff; }
        .btn-primary:hover { background: #4f46e5; transform: translateY(-1px); box-shadow: 0 4px 15px var(--accent-glow); }
        .btn-secondary { background: rgba(255,255,255,0.08); color: var(--text-primary); border: 1px solid var(--border); }
        .btn-secondary:hover { background: rgba(255,255,255,0.12); }
        .btn-sm { padding: 8px 16px; font-size: 0.82rem; }

        /* ===== USES & DANGERS CARDS ===== */
        .uses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
        .use-card {
            border-radius: var(--radius-sm); padding: 20px; border: 1px solid;
            transition: all 0.3s;
        }
        .use-card:hover { transform: translateY(-3px); }
        .use-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .use-card ul { padding-left: 20px; }
        .use-card li { font-size: 0.92rem; margin-bottom: 4px; color: var(--text-secondary); }

        .use-card.radio-card    { background: rgba(239,68,68,0.06);   border-color: rgba(239,68,68,0.2);  }
        .use-card.radio-card h4 { color: #fca5a5; }
        .use-card.micro-card    { background: rgba(249,115,22,0.06);  border-color: rgba(249,115,22,0.2); }
        .use-card.micro-card h4 { color: #fdba74; }
        .use-card.ir-card       { background: rgba(234,179,8,0.06);   border-color: rgba(234,179,8,0.2);  }
        .use-card.ir-card h4    { color: #fde047; }
        .use-card.vis-card      { background: rgba(34,197,94,0.06);   border-color: rgba(34,197,94,0.2);  }
        .use-card.vis-card h4   { color: #86efac; }
        .use-card.uv-card       { background: rgba(168,85,247,0.06);  border-color: rgba(168,85,247,0.2); }
        .use-card.uv-card h4    { color: #c4b5fd; }
        .use-card.xray-card     { background: rgba(59,130,246,0.06);  border-color: rgba(59,130,246,0.2); }
        .use-card.xray-card h4  { color: #93c5fd; }
        .use-card.gamma-card    { background: rgba(6,182,212,0.06);   border-color: rgba(6,182,212,0.2);  }
        .use-card.gamma-card h4 { color: #67e8f9; }

        /* ===== DANGERS ===== */
        .danger-card {
            background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.15);
            border-radius: var(--radius-sm); padding: 20px; margin-bottom: 16px;
        }
        .danger-card h4 { color: #fca5a5; font-size: 1.05rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .danger-card .effect { background: rgba(239,68,68,0.08); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
        .danger-card .effect strong { color: #fca5a5; }
        .danger-card .protection { background: rgba(34,197,94,0.06); border-radius: 8px; padding: 12px; }
        .danger-card .protection strong { color: #86efac; }
        .danger-card ul { padding-left: 20px; margin-top: 6px; }
        .danger-card li { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 4px; }

        /* ===== QUIZ ===== */
        .quiz-progress { display: flex; gap: 6px; margin-bottom: 24px; }
        .quiz-progress .pip {
            flex: 1; height: 4px; border-radius: 2px;
            background: rgba(255,255,255,0.1); transition: all 0.3s;
        }
        .quiz-progress .pip.answered { background: #6366f1; }
        .quiz-progress .pip.correct { background: #22c55e; }
        .quiz-progress .pip.wrong { background: #ef4444; }
        .quiz-question {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 20px; margin-bottom: 16px;
            transition: all 0.3s;
        }
        .quiz-question.correct { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.05); }
        .quiz-question.wrong { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.05); }
        .quiz-question p { font-weight: 600; margin-bottom: 12px; }
        .quiz-option {
            display: flex; align-items: center; gap: 10px; padding: 8px 12px;
            border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-bottom: 4px;
        }
        .quiz-option:hover { background: rgba(255,255,255,0.05); }
        .quiz-option input[type="radio"] {
            accent-color: #6366f1; width: 16px; height: 16px; cursor: pointer;
        }
        .quiz-option label { cursor: pointer; font-size: 0.95rem; }
        .quiz-feedback {
            margin-top: 10px; padding: 10px 14px; border-radius: 8px;
            font-size: 0.88rem; display: none;
        }
        .quiz-feedback.show { display: block; animation: fadeSlideIn 0.3s; }
        .quiz-feedback.correct-fb { background: rgba(34,197,94,0.1); color: #86efac; }
        .quiz-feedback.wrong-fb { background: rgba(239,68,68,0.1); color: #fca5a5; }
        .quiz-results {
            text-align: center; padding: 32px; border-radius: var(--radius-sm);
            background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
            display: none;
        }
        .quiz-results.show { display: block; animation: fadeSlideIn 0.5s; }
        .quiz-score { font-size: 3rem; font-weight: 800; color: #a5b4fc; }
        .quiz-score-label { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 16px; }

        /* ===== KEY CONCEPT ===== */
        .key-concept {
            background: rgba(99,102,241,0.06); border-left: 4px solid #6366f1;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            padding: 16px 20px; margin: 16px 0; font-size: 0.95rem;
        }

        /* ===== FOOTER ===== */
        footer {
            text-align: center; padding: 40px 24px; border-top: 1px solid var(--border);
            color: var(--text-muted); font-size: 0.85rem;
        }

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

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero { padding: 100px 16px 40px; }
            .container { padding: 0 16px; }
            .card { padding: 24px; }
            .sim-controls { grid-template-columns: 1fr; }
            .calc-layout { grid-template-columns: 1fr; }
            .uses-grid { grid-template-columns: 1fr; }
            .outcomes-grid { grid-template-columns: 1fr; }
            .shield-material { font-size: 0.6rem; }
            .shield-material .mat-icon { font-size: 1.2rem; }
        }