:root { 
    --bg: #0d1117; 
    --card: #161b22; 
    --primary: #58a6ff; 
    --text: #8b949e; 
    --white: #c9d1d9; 
}
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    background-color: var(--bg); 
    color: var(--text); 
    font-family: 'Inter', -apple-system, system-ui, sans-serif; 
    line-height: 1.6;
    display: block; 
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.nav { padding: 24px 0; border-bottom: 1px solid #30363d; background: rgba(13,17,23,0.8); backdrop-filter: blur(10px); }
.nav .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 800; font-size: 1.4rem; color: #f0f6fc; letter-spacing: -0.5px; }
.logo span { color: var(--primary); }
.status-tag { font-size: 11px; font-weight: 600; color: #3fb950; background: rgba(46,160,67,0.1); padding: 4px 12px; border: 1px solid rgba(46,160,67,0.3); border-radius: 20px; }

.hero { padding: 100px 0 60px; text-align: center; }
.hero h1 { font-size: clamp(2.5rem, 8vw, 4rem); color: #f0f6fc; margin-bottom: 24px; line-height: 1.1; font-weight: 800; }
.hero .accent { color: var(--primary); }
.hero p { max-width: 650px; margin: 0 auto 40px; font-size: 1.25rem; color: var(--text); }

.btns { display: flex; justify-content: center; gap: 16px; }
.btn-p { background: var(--primary); color: #0d1117; text-decoration: none; padding: 14px 32px; border-radius: 6px; font-weight: 600; transition: 0.2s; }
.btn-p:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-s { border: 1px solid #30363d; color: #f0f6fc; text-decoration: none; padding: 14px 32px; border-radius: 6px; font-weight: 600; transition: 0.2s; }
.btn-s:hover { background: #30363d; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.f-card { background: var(--card); padding: 40px; border-radius: 12px; border: 1px solid #30363d; transition: 0.3s; }
.f-card:hover { border-color: var(--primary); transform: translateY(-5px); }
.f-card h3 { color: #f0f6fc; margin-bottom: 16px; font-size: 1.5rem; }
.f-card p { font-size: 1rem; color: var(--text); }

footer { text-align: center; padding: 80px 0 40px; font-size: 0.85rem; color: #484f58; border-top: 1px solid #30363d; margin-top: 80px; }