:root,[data-theme=dark]{--bg-primary:#060609;--bg-secondary:#0d0d14;--bg-card:#12121a;--bg-card-hover:#181824;--bg-card-featured:linear-gradient(180deg, #171726 0%, #11111a 100%);--bg-glass:#12121ad9;--bg-glass-subtle:#0d0d14b3;--bg-input:#0b0b10;--bg-badge:#6366f11f;--bg-subtle:#ffffff08;--bg-subtle-hover:#ffffff0f;--bg-code:#0a0a10;--border-subtle:#ffffff14;--border-hover:#ffffff2e;--border-accent:#6366f159;--border-featured:#6366f166;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-indigo:#6366f1;--accent-cyan:#06b6d4;--accent-gradient:linear-gradient(135deg, #6366f1, #06b6d4);--accent-gradient-hover:linear-gradient(135deg, #4f46e5, #0891b2);--accent-glow:#6366f129;--grid-line:#ffffff05;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.18s cubic-bezier(.16, 1, .3, 1);--transition-normal:.28s cubic-bezier(.16, 1, .3, 1);--transition-slow:.45s cubic-bezier(.16, 1, .3, 1);--shadow-sm:0 4px 12px #00000059;--shadow-md:0 10px 30px #00000073;--shadow-card:0 14px 40px -10px #0000008c;--shadow-glow:0 0 35px #6366f12e}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#eef2f6;--bg-card:#fff;--bg-card-hover:#f8fafc;--bg-card-featured:linear-gradient(180deg, #fff 0%, #f5f7ff 100%);--bg-glass:#ffffffe0;--bg-glass-subtle:#f8fafccc;--bg-input:#fff;--bg-badge:#4f46e514;--bg-subtle:#f1f5f9;--bg-subtle-hover:#e2e8f0;--bg-code:#0f172a;--border-subtle:#0f172a14;--border-hover:#0f172a2e;--border-accent:#4f46e559;--border-featured:#4f46e54d;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--accent-indigo:#4f46e5;--accent-cyan:#0284c7;--accent-gradient:linear-gradient(135deg, #4f46e5, #0284c7);--accent-gradient-hover:linear-gradient(135deg, #4338ca, #0369a1);--grid-line:#0f172a0a;--shadow-sm:0 4px 12px #0f172a0a;--shadow-md:0 10px 30px #0f172a0f;--shadow-card:0 14px 40px -10px #0f172a14;--shadow-glow:0 0 35px #4f46e51f}*,:before,:after{box-sizing:border-box;transition:background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-fast);margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;line-height:1.6;position:relative;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#3f3f46}::-webkit-scrollbar-thumb:hover{background:#71717a}[data-theme=light] ::-webkit-scrollbar-thumb{background:#cbd5e1}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#94a3b8}::selection{color:#fff;background:#6366f14d}.bg-ambient{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.bg-ambient-grid{background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);background-size:56px 56px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 30%,#000 40%,#0000 80%);mask-image:radial-gradient(at 50% 30%,#000 40%,#0000 80%)}.bg-ambient-glow-1{filter:blur(80px);opacity:.8;background:radial-gradient(circle,#6366f11f 0%,#06b6d40a 45%,#0000 70%);width:700px;height:500px;position:absolute;top:-15%;left:50%;transform:translate(-50%)}[data-theme=light] .bg-ambient-glow-1{background:radial-gradient(circle,#4f46e514 0%,#0284c70a 45%,#0000 70%)}.bg-ambient-glow-2{filter:blur(90px);background:radial-gradient(circle,#06b6d412 0%,#0000 65%);width:500px;height:500px;position:absolute;top:45%;right:-10%}.bg-ambient-glow-3{filter:blur(100px);background:radial-gradient(circle,#6366f114 0%,#0000 65%);width:550px;height:550px;position:absolute;bottom:5%;left:-10%}.app-container{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.section-container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}.section-padding{padding-top:6rem;padding-bottom:6rem}@media (width<=768px){.section-padding{padding-top:4rem;padding-bottom:4rem}}.text-gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:inline-block}.section-header{text-align:center;max-width:680px;margin:0 auto 3.5rem}.section-tag{border-radius:var(--radius-full);background:var(--bg-badge);border:1px solid var(--border-accent);color:var(--accent-indigo);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.35rem .9rem;font-size:.8125rem;font-weight:600;display:inline-flex}.section-tag-dot{background:var(--accent-cyan);width:6px;height:6px;box-shadow:0 0 8px var(--accent-cyan);border-radius:50%}.section-title{letter-spacing:-.025em;color:var(--text-primary);margin-bottom:1rem;font-size:clamp(2rem,4vw,2.75rem);font-weight:700;line-height:1.2}.section-subtitle{color:var(--text-secondary);font-size:1.0625rem;line-height:1.6}.card-base{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);box-shadow:var(--shadow-sm);padding:2rem;position:relative;overflow:hidden}.card-base:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card);transform:translateY(-2px)}.card-glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal)}.card-glass:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card), 0 0 20px #6366f114;transform:translateY(-2px)}.btn-primary{border-radius:var(--radius-full);background:var(--accent-gradient);letter-spacing:-.01em;cursor:pointer;transition:transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);border:none;justify-content:center;align-items:center;gap:.625rem;padding:.85rem 1.75rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 4px 18px #6366f147;color:#fff!important}.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 8px 24px #6366f16b}.btn-primary:active{transform:translateY(0)}.btn-secondary{border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-primary);letter-spacing:-.01em;border:1px solid var(--border-subtle);cursor:pointer;box-shadow:var(--shadow-sm);transition:background var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);justify-content:center;align-items:center;gap:.625rem;padding:.85rem 1.75rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-secondary:hover{border-color:var(--border-hover);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.badge-learning{border-radius:var(--radius-full);color:#0284c7;letter-spacing:.02em;white-space:nowrap;background:#06b6d41f;border:1px solid #06b6d44d;align-items:center;gap:.35rem;padding:.2rem .55rem;font-size:.6875rem;font-weight:600;display:inline-flex}[data-theme=dark] .badge-learning{color:#38bdf8;background:#06b6d41f;border-color:#06b6d447}.badge-learning-dot{background:#0284c7;border-radius:50%;width:5px;height:5px;animation:2s ease-in-out infinite pulse-dot}[data-theme=dark] .badge-learning-dot{background:#38bdf8}@keyframes pulse-dot{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}.theme-toggle-btn{background:var(--bg-card);border:1px solid var(--border-subtle);width:38px;height:38px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.theme-toggle-btn:hover{border-color:var(--border-hover);color:var(--accent-indigo);transform:scale(1.05)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:3px}.font-mono{font-family:var(--font-mono)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
