:root {
    --bg: #0b0f14;
    --surface: #121821;
    --text: #e6edf5;
    --muted: #9fb3c8;
    --primary: #4A90E2;
    --accent: #7bd389;
    --border: #1f2733;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1200px 800px at 10% 0%, #0b0f14, #0d141d 40%, #0b0f14 100%);
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.site-header { position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px); background: rgba(13,20,29,0.7); border-bottom: 1px solid var(--border); z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-logo { width: 28px; height: 28px; }
.brand-name { font-weight: 700; letter-spacing: 0.2px; }
.nav { display: none; gap: 18px; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav-toggle { display: inline-flex; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 8px 12px; border-radius: 8px; }

@media (min-width: 860px) {
    .nav { display: flex; }
    .nav-toggle { display: none; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 10px 30px rgba(74,144,226,0.3); }
.btn-secondary { background: #1a2330; color: var(--text); border: 1px solid var(--border); }
.btn-outline { border: 1px solid var(--border); color: var(--muted); padding: 8px 12px; border-radius: 10px; }

.hero { padding: 64px 0 24px; }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero h1 { font-size: 44px; line-height: 1.1; margin: 0 0 12px; }
.hero p { color: var(--muted); font-size: 18px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 16px; }
.hero-meta { display: flex; gap: 22px; margin-top: 14px; color: var(--muted); font-size: 14px; }

@media (min-width: 960px) {
    .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.overlay-preview { background: linear-gradient(180deg, #121821, #101620); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.tab-card { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid transparent; }
.tab-card + .tab-card { margin-top: 6px; }
.tab-card .favicon { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #4A90E2, #377fd0); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.tab-card .title { font-weight: 600; }
.tab-card .url { color: var(--muted); font-size: 13px; }
.tab-card.active { background: #0f1621; border-color: #223049; }
.tab-hint { margin-top: 12px; font-size: 13px; color: var(--muted); }

.features { padding: 48px 0; border-top: 1px solid var(--border); }
.features h2 { margin: 0 0 24px; }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.feature { background: #0f1621; border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.feature h3 { margin: 0 0 8px; }
.feature p { color: var(--muted); }

@media (min-width: 860px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.how { padding: 48px 0; border-top: 1px solid var(--border); }
.arch { display: grid; grid-template-columns: 1fr; gap: 18px; }
.arch-step { background: #0f1621; border: 1px solid var(--border); padding: 18px; border-radius: 16px; }
.arch-note { margin-top: 12px; color: var(--muted); }
@media (min-width: 860px) { .arch { grid-template-columns: repeat(3, 1fr); } }

.requirements { padding: 48px 0; border-top: 1px solid var(--border); }

.privacy { padding: 48px 0; border-top: 1px solid var(--border); }
.privacy-note { margin-top: 16px; color: var(--muted); }
.privacy-note a { color: var(--primary); text-decoration: none; font-weight: 600; }
.privacy-note a:hover { text-decoration: underline; }
.list { margin: 0; padding-left: 18px; color: var(--muted); }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; background: rgba(13,20,29,0.6); }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
.footer-links a { color: var(--muted); margin-right: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--text); }

.policy-hero { padding: 88px 0 24px; border-bottom: 1px solid var(--border); }
.policy-hero h1 { margin: 12px 0 8px; font-size: 42px; }
.policy-hero p { color: var(--muted); max-width: 720px; }
.policy-meta { color: var(--muted); font-size: 15px; }
.policy { padding: 48px 0 64px; }
.policy h2 { margin: 32px 0 12px; }
.policy h3 { margin: 24px 0 8px; }
.policy-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.policy-card { background: #0f1621; border: 1px solid var(--border); border-radius: 16px; padding: 18px; color: var(--muted); }
.policy-list { padding-left: 18px; color: var(--muted); }
.policy a { color: var(--primary); text-decoration: none; }
.policy a:hover { text-decoration: underline; }

@media (min-width: 860px) {
    .policy-grid { grid-template-columns: repeat(2, 1fr); }
}

code { background: #0f1621; color: var(--text); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); }