*{margin:0;padding:0;box-sizing:border-box}:root[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-tertiary: #64748b;--accent: #38bdf8;--accent-hover: #0ea5e9;--border: #334155;--code-bg: #0f172a}:root[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #e2e8f0;--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--accent: #0ea5e9;--accent-hover: #0284c7;--border: #e2e8f0;--code-bg: #f1f5f9}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease}code{font-family:Fira Code,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{padding:20px 0;border-bottom:1px solid var(--border);position:sticky;top:0;background-color:var(--bg-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;gap:20px}.logo{font-size:24px;font-weight:700;color:var(--accent)}.nav{display:flex;gap:20px;align-items:center}.nav a{color:var(--text-secondary);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:5px}.nav a:hover{color:var(--accent)}.nav-icon{display:flex;align-items:center;padding:8px;border-radius:6px;transition:background-color .2s}.nav-icon:hover{background-color:var(--bg-secondary)}.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);padding:8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.theme-toggle:hover{background:var(--bg-tertiary);transform:scale(1.05)}.hero{padding:80px 0;text-align:center}.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}.badges img{height:20px}.hero h1{font-size:64px;font-weight:700;background:linear-gradient(135deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;animation:fadeInUp .6s ease}.hero p{font-size:20px;color:var(--text-secondary);margin-bottom:40px;animation:fadeInUp .6s ease .1s backwards}.hero-note{margin-top:20px!important;font-size:14px!important;opacity:.8;animation:fadeInUp .6s ease .3s backwards}.hero-note a{color:var(--accent);text-decoration:underline}.buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;animation:fadeInUp .6s ease .2s backwards}.btn{padding:14px 32px;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#38bdf8,#818cf8);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #38bdf84d}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-tertiary);transform:translateY(-2px)}.features{padding:80px 0;background:var(--bg-secondary)}.features h2{text-align:center;font-size:42px;margin-bottom:60px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}.feature-card{background:var(--bg-primary);padding:30px;border-radius:12px;border:1px solid var(--border);transition:all .3s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a;border-color:var(--accent)}.feature-icon{font-size:48px;margin-bottom:20px}.feature-card h3{font-size:24px;margin-bottom:12px;color:var(--accent)}.feature-card p{color:var(--text-secondary)}.demo{padding:80px 0}.demo h2{text-align:center;font-size:42px;margin-bottom:20px}.section-subtitle{text-align:center;margin-bottom:60px;font-size:16px;color:var(--text-secondary)}.section-subtitle a{color:var(--accent);text-decoration:underline}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin-bottom:60px}.demo-card{background:var(--bg-secondary);padding:30px;border-radius:12px;border:1px solid var(--border);transition:all .3s}.demo-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.demo-card h3{font-size:20px;margin-bottom:20px;color:var(--accent)}.timedown-display{font-size:48px;font-weight:700;font-family:Fira Code,monospace;text-align:center;margin:30px 0;color:var(--accent)}.timedown-units{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.timedown-unit{text-align:center}.timedown-unit-value{font-size:32px;font-weight:700;color:var(--accent)}.timedown-unit-label{font-size:12px;color:var(--text-tertiary);text-transform:uppercase;margin-top:5px}.demo-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.demo-btn{padding:10px 20px;font-size:14px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .2s}.demo-btn-start{background:#10b981;color:#fff}.demo-btn-pause{background:#f59e0b;color:#fff}.demo-btn-resume{background:#3b82f6;color:#fff}.demo-btn-reset{background:#6b7280;color:#fff}.demo-btn:hover{opacity:.9;transform:translateY(-2px)}.code-section{padding:80px 0;background:var(--bg-secondary)}.code-section h2{text-align:center;font-size:42px;margin-bottom:60px}.code-block{background:var(--code-bg);border:1px solid var(--border);border-radius:12px;padding:30px;margin-bottom:40px;overflow-x:auto;position:relative}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.code-block h3{color:var(--accent);font-size:20px;margin:0}.copy-btn{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);padding:8px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;transition:all .2s}.copy-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.code-block pre{margin:0;font-family:Fira Code,monospace;font-size:14px;line-height:1.6;color:var(--text-primary)}.code-block code{color:var(--text-primary)}.scroll-to-top{position:fixed;bottom:30px;right:30px;background:var(--accent);color:#fff;border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .3s;z-index:999;animation:fadeInUp .3s ease}.scroll-to-top:hover{transform:translateY(-5px);box-shadow:0 6px 20px #38bdf866}.footer{padding:60px 0 40px;text-align:center;border-top:1px solid var(--border);color:var(--text-tertiary)}.footer p{margin-bottom:10px}.footer a{color:var(--accent);text-decoration:none;transition:color .2s}.footer a:hover{text-decoration:underline;color:var(--accent-hover)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.hero h1{font-size:42px}.features h2,.demo h2,.code-section h2{font-size:32px}.timedown-display{font-size:36px}.timedown-units{grid-template-columns:repeat(2,1fr)}.nav{gap:10px}.nav a:not(.nav-icon){display:none}.header-content{gap:10px}.scroll-to-top{bottom:20px;right:20px;width:45px;height:45px}}@media (max-width: 480px){.hero h1{font-size:32px}.hero p{font-size:16px}.btn{padding:12px 24px;font-size:14px}.features-grid,.demo-grid{grid-template-columns:1fr}}