/* ===== CryptaVault — Premium Design System ===== */
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: rgba(18, 18, 30, 0.6);
    --glass-bg: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.08);
    --glass-hover: rgba(255,255,255,0.08);
    --text-primary: #e8e8f0;
    --text-secondary: #8888a0;
    --text-muted: #55556a;
    --accent-cyan: #00F0FF;
    --accent-purple: #8B5CF6;
    --accent-pink: #EC4899;
    --accent-green: #10B981;
    --gradient-main: linear-gradient(135deg, #00F0FF, #8B5CF6);
    --gradient-warm: linear-gradient(135deg, #8B5CF6, #EC4899);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --font-main: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --shadow-glow: 0 0 30px rgba(0,240,255,0.15);
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ===== Animated Background ===== */
#matrixCanvas {
    position: fixed; top:0; left:0; width:100%; height:100%;
    z-index: 0; opacity: 0.07; pointer-events: none;
}
.bg-glow {
    position: fixed; border-radius: 50%; filter: blur(120px);
    pointer-events: none; z-index: 0; opacity: 0.4;
}
.bg-glow-1 { width:500px; height:500px; background: var(--accent-cyan); top:-200px; left:-100px; animation: floatGlow 15s ease-in-out infinite; }
.bg-glow-2 { width:400px; height:400px; background: var(--accent-purple); bottom:-150px; right:-100px; animation: floatGlow 20s ease-in-out infinite reverse; }
.bg-glow-3 { width:300px; height:300px; background: var(--accent-pink); top:50%; left:50%; transform:translate(-50%,-50%); animation: floatGlow 18s ease-in-out infinite 5s; }

@keyframes floatGlow {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(40px,-30px) scale(1.1); }
    66% { transform: translate(-20px,40px) scale(0.9); }
}

/* ===== Glass Card ===== */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: var(--transition);
}
.glass-card:hover {
    background: var(--glass-hover);
    border-color: rgba(255,255,255,0.12);
    box-shadow: var(--shadow-glow);
}

/* ===== Navigation ===== */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 40px;
    background: rgba(10,10,15,0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition);
}
.navbar.scrolled { padding: 10px 40px; background: rgba(10,10,15,0.95); }
.nav-brand { display:flex; align-items:center; gap:10px; }
.brand-icon { display:flex; }
.brand-text { font-size:1.2rem; font-weight:700; background: var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:8px; }
.nav-link {
    padding: 8px 16px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration:none;
    font-size: 0.9rem; font-weight:500; transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--text-primary); background: var(--glass-bg); }
.nav-link.active { color: var(--accent-cyan); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-toggle span { width:24px; height:2px; background: var(--text-primary); transition: var(--transition); }

/* ===== Hero Section ===== */
.hero {
    position: relative; z-index:1;
    min-height: 100vh; display:flex; align-items:center;
    padding: 120px 60px 80px;
    gap: 60px;
}
.hero-content { flex:1; max-width:600px; }
.hero-badge {
    display:inline-block; padding: 8px 18px;
    background: rgba(0,240,255,0.08); border: 1px solid rgba(0,240,255,0.2);
    border-radius: 50px; font-size:0.85rem; color: var(--accent-cyan);
    margin-bottom: 24px; animation: fadeInUp 0.8s ease;
}
.hero-title { font-size: clamp(2.5rem,5vw,4rem); font-weight:900; line-height:1.1; margin-bottom:20px; }
.title-line { display:block; animation: fadeInUp 0.8s ease backwards; }
.title-line:nth-child(2) { animation-delay: 0.2s; }
.gradient-text { background: var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-subtitle { font-size:1.1rem; color: var(--text-secondary); margin-bottom:32px; max-width:500px; animation: fadeInUp 0.8s ease 0.4s backwards; }
.hero-actions { display:flex; gap:16px; margin-bottom:48px; animation: fadeInUp 0.8s ease 0.6s backwards; }
.hero-visual { flex:1; display:flex; justify-content:center; align-items:center; animation: fadeIn 1.2s ease 0.5s backwards; }
.cipher-wheel-container { position:relative; width:400px; height:400px; }

/* ===== Buttons ===== */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding: 14px 28px; border-radius: var(--radius-md);
    font-family: var(--font-main); font-size:0.95rem; font-weight:600;
    cursor:pointer; transition: var(--transition); text-decoration:none; border:none;
    position:relative; overflow:hidden;
}
.btn-primary {
    background: var(--gradient-main); color: #000;
    box-shadow: 0 4px 20px rgba(0,240,255,0.25);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(0,240,255,0.35); }
.btn-ghost {
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: var(--glass-bg); border-color: var(--accent-cyan); }
.btn-full { width:100%; justify-content:center; }
.btn-vigenere { background: var(--gradient-warm); }

/* ===== Stats ===== */
.hero-stats { display:flex; gap:40px; animation: fadeInUp 0.8s ease 0.8s backwards; }
.stat-item { text-align:left; }
.stat-number { display:block; font-size:2rem; font-weight:800; color: var(--accent-cyan); font-family: var(--font-mono); }
.stat-label { font-size:0.8rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

/* ===== Section Common ===== */
.cipher-section { position:relative; z-index:1; padding: 100px 60px; }
.section-header { text-align:center; margin-bottom:60px; }
.section-badge {
    display:inline-block; font-family: var(--font-mono); font-size:0.85rem;
    color: var(--accent-cyan); padding: 6px 16px;
    background: rgba(0,240,255,0.06); border: 1px solid rgba(0,240,255,0.15);
    border-radius: 50px; margin-bottom:16px;
}
.section-title { font-size: clamp(2rem,4vw,3rem); font-weight:800; margin-bottom:16px; }
.section-desc { font-size:1.05rem; color: var(--text-secondary); max-width:600px; margin:0 auto; }

/* ===== Cipher Workspace ===== */
.cipher-workspace { display:grid; grid-template-columns: 1fr 1fr; gap:30px; max-width:1100px; margin:0 auto; }
.workspace-card { padding: 32px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.card-title { font-size:1.1rem; font-weight:600; }

/* ===== Mode Toggle ===== */
.mode-toggle {
    display:flex; background: rgba(0,0,0,0.3); border-radius: var(--radius-sm);
    padding:3px; border: 1px solid var(--glass-border);
}
.mode-btn {
    display:flex; align-items:center; gap:6px;
    padding: 8px 18px; border:none; border-radius: 6px;
    background:transparent; color: var(--text-secondary);
    font-family: var(--font-main); font-size:0.85rem; font-weight:500;
    cursor:pointer; transition: var(--transition);
}
.mode-btn.active { background: var(--gradient-main); color:#000; box-shadow: 0 4px 12px rgba(0,240,255,0.2); }
.mode-btn svg { width:14px; height:14px; }

/* ===== Extended Tabs ===== */
.card-tabs { display:flex; gap:10px; margin-bottom:24px; border-bottom: 1px solid var(--glass-border); padding-bottom:12px; }
.tab-btn {
    background:transparent; border:none; color: var(--text-secondary);
    font-family: var(--font-main); font-size:0.9rem; font-weight:600;
    padding: 8px 16px; cursor:pointer; border-radius:var(--radius-sm);
    transition: var(--transition);
}
.tab-btn.active { background: var(--glass-bg); color: var(--accent-cyan); }
.tab-btn:hover:not(.active) { color: var(--text-primary); }

/* ===== Inputs ===== */
.input-group { margin-bottom:20px; }
.input-label { display:block; font-size:0.85rem; font-weight:500; color: var(--text-secondary); margin-bottom:8px; }
.cipher-input, .keyword-input {
    width:100%; padding: 14px 16px;
    background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-family: var(--font-mono); font-size:0.95rem;
    resize: vertical; transition: var(--transition);
}
.cipher-input:focus, .keyword-input:focus {
    outline:none; border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0,240,255,0.1);
}
.char-count { text-align:right; font-size:0.75rem; color: var(--text-muted); margin-top:4px; }
.keyword-input-wrap { position:relative; }
.keyword-input { text-transform: uppercase; letter-spacing: 3px; }
.keyword-display {
    display:flex; gap:4px; margin-top:8px; min-height:32px; flex-wrap:wrap;
}
.key-letter {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:6px;
    background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3);
    font-family: var(--font-mono); font-size:0.8rem; font-weight:600;
    color: var(--accent-purple);
    animation: popIn 0.3s ease backwards;
}

/* ===== Shift Control ===== */
.shift-control { margin-bottom:24px; }
.shift-slider-wrap { display:flex; align-items:center; gap:12px; }
.shift-btn {
    width:36px; height:36px; border-radius:50%;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size:1.2rem;
    cursor:pointer; transition: var(--transition);
    display:flex; align-items:center; justify-content:center;
}
.shift-btn:hover { background: rgba(0,240,255,0.1); border-color: var(--accent-cyan); }
.shift-slider {
    flex:1; -webkit-appearance:none; height:6px;
    background: rgba(255,255,255,0.08); border-radius:3px; cursor:pointer;
}
.shift-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:22px; height:22px;
    border-radius:50%; background: var(--gradient-main);
    box-shadow: 0 0 12px rgba(0,240,255,0.4); cursor:pointer;
}
.shift-value {
    min-width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background: rgba(0,240,255,0.08); border: 1px solid rgba(0,240,255,0.2);
    border-radius: var(--radius-sm); font-family: var(--font-mono);
    font-size:1.1rem; font-weight:700; color: var(--accent-cyan);
}
.shift-labels { display:flex; justify-content:space-between; padding: 4px 48px 0 48px; font-size:0.7rem; color: var(--text-muted); }

/* ===== Results ===== */
.result-output {
    min-height:120px; padding:20px;
    background: rgba(0,0,0,0.2); border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    font-family: var(--font-mono); font-size:1rem;
    word-break: break-all; line-height:1.8;
    margin-bottom:20px;
}
.result-text { animation: fadeIn 0.5s ease; color: var(--accent-green); font-weight:600; letter-spacing:2px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100px; color: var(--text-muted); text-align:center; }
.empty-icon { font-size:2rem; margin-bottom:8px; }
.copy-btn {
    width:36px; height:36px; border-radius: var(--radius-sm);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-secondary); cursor:pointer; transition: var(--transition);
    display:flex; align-items:center; justify-content:center;
}
.copy-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.copy-btn.copied { color: var(--accent-green); border-color: var(--accent-green); }

/* ===== Step Visualization ===== */
.viz-title { font-size:0.9rem; font-weight:600; color: var(--text-secondary); margin-bottom:12px; }
.step-container { display:flex; flex-wrap:wrap; gap:6px; }
.step-letter {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 4px; border-radius:6px;
    background: rgba(0,240,255,0.05); border: 1px solid rgba(0,240,255,0.1);
    min-width:36px; animation: popIn 0.3s ease backwards;
}
.step-original { font-size:0.7rem; color: var(--text-muted); }
.step-arrow { font-size:0.6rem; color: var(--accent-cyan); }
.step-result { font-size:0.85rem; font-weight:700; color: var(--accent-cyan); font-family: var(--font-mono); }

/* ===== Visualizer ===== */
.visualizer-workspace { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:30px; }
.viz-wheel-card { padding:40px; display:flex; flex-direction:column; align-items:center; gap:30px; }
.cipher-wheel-container canvas { 
    width: 100%; height: 100%; 
    cursor: grab;
    transition: transform 0.3s ease;
    touch-action: none;
}
.cipher-wheel-container canvas:active { cursor: grabbing; }
.viz-controls { width:100%; max-width:500px; }
.viz-input-group { display:flex; gap:16px; margin-bottom:20px; }
.viz-text-input {
    flex:1; padding:12px 16px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: var(--font-mono);
    font-size:1.5rem; text-align:center; text-transform:uppercase;
}
.viz-text-input:focus { outline:none; border-color: var(--accent-cyan); }
.viz-shift-control { display:flex; align-items:center; gap:8px; }
.viz-shift-control label { font-size:0.85rem; color: var(--text-secondary); }
.viz-shift-input {
    width:60px; padding:12px 8px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--accent-cyan); font-family: var(--font-mono); font-size:1.2rem;
    text-align:center;
}
.viz-shift-input:focus { outline:none; border-color: var(--accent-cyan); }
.viz-result-display { display:flex; align-items:center; justify-content:center; gap:20px; }
.viz-letter-box {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:16px 24px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.viz-letter-box.result { border-color: rgba(0,240,255,0.3); background: rgba(0,240,255,0.05); }
.viz-letter-label { font-size:0.75rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.viz-letter { font-size:2.5rem; font-weight:800; font-family: var(--font-mono); }
.viz-letter-box.result .viz-letter { color: var(--accent-cyan); }
.viz-arrow { font-size:1.5rem; color: var(--accent-cyan); animation: pulse 2s ease infinite; }

/* ===== Alphabet Grid ===== */
.alphabet-strip { padding:30px; }
.alphabet-grid { display:grid; grid-template-columns: repeat(13, 1fr); gap:6px; }
.alpha-cell {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:8px 4px; border-radius:6px;
    background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border);
    transition: var(--transition);
}
.alpha-cell:hover { border-color: var(--accent-cyan); background: rgba(0,240,255,0.05); }
.alpha-cell.highlighted { border-color: var(--accent-cyan); background: rgba(0,240,255,0.1); box-shadow: 0 0 10px rgba(0,240,255,0.2); }
.alpha-original { font-size:0.75rem; color: var(--text-muted); }
.alpha-mapped { font-size:1rem; font-weight:700; color: var(--accent-cyan); font-family: var(--font-mono); }

/* ===== Timeline ===== */
.timeline { position:relative; max-width:800px; margin:0 auto; padding:20px 0; }
.timeline-line {
    position:absolute; left:50%; top:0; bottom:0; width:2px;
    background: linear-gradient(to bottom, transparent, var(--accent-cyan), var(--accent-purple), transparent);
}
.timeline-item {
    position:relative; width:50%; padding-right:50px; margin-bottom:40px;
    animation: fadeInUp 0.6s ease backwards;
}
.timeline-item.right { margin-left:50%; padding-right:0; padding-left:50px; }
.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.2s; }
.timeline-item:nth-child(4) { animation-delay: 0.3s; }
.timeline-item:nth-child(5) { animation-delay: 0.4s; }
.timeline-item:nth-child(6) { animation-delay: 0.5s; }
.timeline-item:nth-child(7) { animation-delay: 0.6s; }
.timeline-dot {
    position:absolute; top:20px; width:16px; height:16px;
    border-radius:50%; background: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0,240,255,0.5);
    z-index:1;
}
.timeline-item:not(.right) .timeline-dot { right:-8px; }
.timeline-item.right .timeline-dot { left:-8px; }
.timeline-card { padding:24px; }
.timeline-year {
    font-family: var(--font-mono); font-size:0.8rem; color: var(--accent-cyan);
    margin-bottom:8px; letter-spacing:1px;
}
.timeline-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:8px; }
.timeline-card p { font-size:0.9rem; color: var(--text-secondary); line-height:1.6; }

/* ===== Vigenere Table ===== */
.vigenere-mini-table { overflow-x:auto; }
.vig-table { border-collapse:collapse; font-family: var(--font-mono); font-size:0.7rem; }
.vig-table td, .vig-table th {
    width:26px; height:26px; text-align:center; border: 1px solid rgba(255,255,255,0.05);
}
.vig-table th { background: rgba(0,240,255,0.08); color: var(--accent-cyan); font-weight:600; }
.vig-table td { color: var(--text-muted); }
.vig-table td.highlight { background: rgba(139,92,246,0.15); color: var(--accent-purple); font-weight:700; }
.vig-table td.active-cell { background: rgba(0,240,255,0.2); color: var(--accent-cyan); font-weight:700; }

/* ===== Crypto Lab Styles ===== */
.lab-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap:30px; max-width:1100px; margin:0 auto; }
.lab-card { padding:32px; height:100%; }
.freq-chart { display:flex; align-items:flex-end; gap:4px; height:200px; padding-top:20px; border-bottom: 1px solid var(--glass-border); margin-bottom:10px; }
.freq-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.freq-bar { width:100%; background: var(--gradient-main); border-radius: 4px 4px 0 0; min-height:2px; transition: height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position:relative; }
.freq-bar:hover::after {
    content: attr(data-val); position:absolute; top:-25px; left:50%; transform:translateX(-50%);
    font-size:0.7rem; color: var(--accent-cyan); font-family:var(--font-mono);
}
.freq-label { font-size:0.7rem; color: var(--text-muted); margin-top:8px; font-family: var(--font-mono); }

.metric-group { display:flex; flex-direction:column; gap:20px; margin:24px 0; }
.metric-item { display:flex; flex-direction:column; gap:8px; }
.metric-label { font-size:0.85rem; color: var(--text-secondary); font-weight:500; }
.metric-value { font-size:1.2rem; font-weight:700; color: var(--accent-cyan); font-family: var(--font-mono); }
.metric-progress-wrap { height:6px; background: rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.metric-progress { height:100%; background: var(--gradient-main); transition: width 1s ease; }

.patterns { font-size:0.9rem; color: var(--text-secondary); line-height:1.6; max-height:150px; overflow-y:auto; padding-right:10px; }
.pattern-match { color: var(--accent-pink); font-weight:600; font-family: var(--font-mono); }

.mini-btn {
    padding:4px 12px; border: 1px solid var(--glass-border); background:transparent;
    color: var(--text-secondary); font-size:0.75rem; border-radius:4px; cursor:pointer;
}
.mini-btn.active { background: var(--accent-cyan); color:#000; border-color:var(--accent-cyan); }

/* ===== Footer ===== */
.footer {
    position:relative; z-index:1;
    border-top: 1px solid var(--glass-border);
    padding: 60px;
}
.footer-content { display:grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap:40px; max-width:1100px; margin: 0 auto 40px; }
.footer-brand .brand-text { font-size:1.3rem; font-weight:700; display:block; margin-bottom:12px; background: var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.footer-brand p { font-size:0.9rem; color: var(--text-secondary); }
.footer-links h4, .footer-disclaimer h4 { font-size:0.9rem; margin-bottom:12px; color: var(--text-primary); }
.footer-links a { display:block; color: var(--text-secondary); text-decoration:none; font-size:0.85rem; padding:4px 0; transition: var(--transition); }
.footer-links a:hover { color: var(--accent-cyan); }
.footer-disclaimer p { font-size:0.8rem; color: var(--text-secondary); line-height:1.6; }
.footer-bottom { text-align:center; padding-top:24px; border-top: 1px solid var(--glass-border); font-size:0.8rem; color: var(--text-muted); }

/* ===== Animations ===== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes popIn { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .hero { flex-direction:column; padding: 120px 24px 60px; text-align:center; }
    .hero-subtitle { margin:0 auto 32px; }
    .hero-actions { justify-content:center; }
    .hero-stats { justify-content:center; }
    .cipher-workspace { grid-template-columns:1fr; gap: 24px; }
    .cipher-section { padding: 40px 16px; }
    .navbar { padding: 12px 20px; }
    .nav-links { 
        display:none; position:absolute; top:100%; left:0; right:0; 
        flex-direction:column; background: rgba(10,10,15,0.98); 
        padding:16px; border-bottom: 1px solid var(--glass-border); 
        backdrop-filter: blur(20px);
    }
    .nav-links.open { display:flex; }
    .nav-toggle { display:flex; }
    .cipher-wheel-container { 
        width: 100%; 
        max-width: 320px; 
        height: auto; 
        aspect-ratio: 1/1; 
        margin: 0 auto 20px;
    }
    .timeline-line { left:20px; }
    .timeline-item, .timeline-item.right { width:100%; margin-left:0; padding-left:50px; padding-right:0; }
    .timeline-item:not(.right) .timeline-dot, .timeline-item.right .timeline-dot { left:12px; }
    .alphabet-grid { grid-template-columns: repeat(9,1fr); }
    .footer-content { grid-template-columns:1fr; text-align:center; }
    .footer { padding: 40px 20px; }
}

@media (max-width: 600px) {
    .hero-badge { font-size: 0.75rem; }
    .hero-title { font-size: 2rem; }
    .hero-stats { flex-direction:column; gap:16px; align-items:center; }
    .alphabet-grid { grid-template-columns: repeat(6,1fr); gap: 4px; }
    .viz-input-group { flex-direction:column; align-items: stretch; }
    .viz-input-box { width: 100%; }
    .step-letter { font-size: 0.8rem; padding: 10px; }
    .btn { padding: 12px 24px; width: 100%; }
    .hero-actions { flex-direction: column; }
    .lang-btn { width: 40px; height: 40px; }
    .freq-chart { height: 150px; }
}