*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #0C1A2E; --navy-mid: #0F2340; --navy-light: #162C4A;
  --blue-intense: #1D4ED8; --blue-bright: #3B82F6; --blue-accent: #60A5FA;
  --white: #F0F6FF; --gray-mid: #7A9CBE; --gray-dark: #4A6A8A;
  --font-main: 'Sora', sans-serif; --font-mono: 'Source Code Pro', monospace;
}
html { scroll-behavior: smooth; }
body { background: var(--navy); color: var(--white); font-family: var(--font-main); font-size: 16px; line-height: 1.7; overflow-x: hidden; position: relative; }
.grid-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(29,78,216,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,216,0.08) 1px, transparent 1px); background-size: 48px 48px; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }

nav { position: sticky; top: 0; z-index: 100; background: rgba(12,26,46,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(29,78,216,0.25); }
.nav-inner { max-width: 900px; margin: 0 auto; padding: 0 2rem; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; color: var(--white); text-decoration: none; }
.nav-logo span { color: var(--blue-accent); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-size: 0.85rem; color: var(--gray-mid); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-main); font-size: 0.85rem; color: var(--gray-mid); background: none; border: none; padding: 0; cursor: pointer; transition: color 0.2s; }
.lang-btn:hover { color: var(--white); }
.lang-btn .flag { width: 16px; height: 11px; border-radius: 2px; flex-shrink: 0; }

.hero { padding: 7rem 0 5rem; text-align: center; }
.hero-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--blue-bright); letter-spacing: 0.12em; margin-bottom: 1.5rem; }
.hero-label::before { content: '// '; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--white); margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--blue-accent); }
.hero-sub { font-size: 1.05rem; color: var(--gray-mid); max-width: 580px; margin: 0 auto 2.5rem; line-height: 1.75; }
.btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; border-radius: 6px; font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; }
.btn-primary { background: var(--blue-intense); color: var(--white); border: 1px solid var(--blue-intense); }
.btn-primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
.btn-ghost { background: transparent; color: var(--blue-accent); border: 1px solid rgba(59,130,246,0.35); }
.btn-ghost:hover { border-color: var(--blue-bright); color: var(--white); }
.badge-strip { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(29,78,216,0.2); }
.badge { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-dark); background: rgba(22,44,74,0.7); border: 1px solid rgba(29,78,216,0.2); border-radius: 4px; padding: 0.3rem 0.75rem; }

.section-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-bright); letter-spacing: 0.1em; margin-bottom: 1rem; }
.section-label::before { content: '// '; }

.tabs-wrap { margin-top: 1.5rem; }
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid rgba(59,130,246,0.3); flex-wrap: wrap; }
.tab-btn { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-dark); background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.2s; margin-bottom: -1px; }
.tab-btn.active { color: var(--blue-accent); border-bottom-color: var(--blue-accent); }
.tab-btn:hover:not(.active) { color: var(--gray-mid); }
.tab-panel { display: none; background: var(--navy-mid); border: 1px solid rgba(59,130,246,0.25); border-top: none; border-radius: 0 0 8px 8px; padding: 1.5rem; overflow-x: auto; }
.tab-panel.active { display: block; }

pre { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75; color: var(--gray-mid); white-space: pre; }
.kw { color: var(--blue-accent); } .cm { color: var(--gray-dark); } .tag { color: #f9a8d4; }
.attr { color: var(--blue-bright); } .val { color: #86efac; } .type { color: #c4b5fd; }
.str { color: #86efac; }

.features { margin: 5rem 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.feature-card { background: var(--navy-light); border: 1px solid rgba(29,78,216,0.25); border-radius: 8px; padding: 1.5rem; transition: border-color 0.2s; }
.feature-card:hover { border-color: rgba(59,130,246,0.5); }
.feature-card.featured { background: var(--navy-mid); border-color: var(--blue-bright); }
.feature-icon { font-family: var(--font-mono); font-size: 0.75rem; color: var(--blue-bright); margin-bottom: 0.75rem; }
.feature-icon::before { content: '// '; }
.feature-card h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.875rem; color: var(--gray-mid); line-height: 1.65; }
.mono { font-family: var(--font-mono); font-size: 0.8em; color: var(--blue-accent); }

.components { margin: 5rem 0; }
.comp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.comp-item { background: var(--navy-light); border: 1px solid rgba(29,78,216,0.2); border-radius: 6px; padding: 1rem 1.25rem; }
.comp-name { font-family: var(--font-mono); font-size: 0.85rem; color: var(--blue-accent); font-weight: 500; margin-bottom: 0.4rem; }
.comp-desc { font-size: 0.8rem; color: var(--gray-mid); }

.requirements { margin: 5rem 0; }
.req-box { background: var(--navy-light); border: 1px solid rgba(29,78,216,0.2); border-radius: 8px; padding: 1.5rem 1.75rem; margin-top: 1.5rem; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.req-name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--blue-accent); margin-bottom: 0.25rem; }
.req-val { font-size: 0.82rem; color: var(--gray-mid); }
.req-opt { font-size: 0.72rem; color: var(--gray-dark); margin-top: 0.1rem; }

.install { margin: 5rem 0; }

.support { margin: 5rem 0; }
.support-box { background: var(--navy-light); border: 1px solid rgba(29,78,216,0.25); border-radius: 8px; padding: 2rem; margin-top: 1.5rem; text-align: center; }
.support-box p { font-size: 0.9rem; color: var(--gray-mid); margin-bottom: 1.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.support-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-coffee { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.4rem; border-radius: 6px; font-family: var(--font-main); font-size: 0.875rem; font-weight: 600; text-decoration: none; background: #FFDD00; color: #1a1a1a; border: 1px solid #FFDD00; transition: all 0.2s; }
.btn-coffee:hover { background: #f5d000; }
.btn-sponsors { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.4rem; border-radius: 6px; font-family: var(--font-main); font-size: 0.875rem; font-weight: 600; text-decoration: none; background: #EA4AAA; color: #fff; border: 1px solid #EA4AAA; transition: all 0.2s; }
.btn-sponsors:hover { background: #d93d99; }
.btn-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }

footer { border-top: 1px solid rgba(29,78,216,0.2); padding: 2.5rem 0; margin-top: 5rem; text-align: center; }
.footer-logo { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gray-mid); margin-bottom: 0.5rem; }
.footer-logo span { color: var(--blue-accent); }
.footer-links { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 0.4rem; }
.footer-links a { font-size: 0.8rem; color: var(--blue-accent); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { font-size: 0.78rem; color: var(--gray-dark); margin-top: 0.75rem; }
.footer-copy a { color: var(--gray-dark); text-decoration: none; }
.footer-copy a:hover { color: var(--blue-accent); }