:root {
    --bg-base: #161718;
    --bg-subtle: #181b1c;
    --surface-1: #1d1f20;
    --surface-2: #252728;
    --surface-3: #2c2e30;
    --surface-4: #3b3d3f;
    --accent: #33ff00;
    --accent-hover: #2be600;
    --bg-main: var(--bg-base);
    --bg-surface: var(--surface-1);
    --bg-card: var(--surface-2);
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --secondary: var(--surface-3);
    --border: #2c2e30;
    --radius: 4px;
}
body { background: var(--bg-base); }
body > header { height: 76px; padding: 0 2rem; background: rgba(22,23,24,.96); border-bottom: 1px solid var(--border); }
.header-logo { gap: .75rem; }
.header-logo > a { display: flex; align-items: center; }
.header-logo img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.header-logo span { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.header-actions { gap: .75rem; }
.header-actions .btn-primary,.header-actions .btn-secondary { border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; }
.hamburger { display: none !important; }
body > .dropdown-menu { display: none !important; }
.mandatory-header-burger-nav { margin-left: .25rem; }
.mandatory-header-burger__button { border-color: var(--border) !important; background: var(--surface-2) !important; }
.mandatory-header-burger__button span { background: #fff !important; }
.mandatory-header-burger__panel { top: 76px !important; right: 0 !important; width: min(360px,92vw) !important; background: #151718 !important; border: 1px solid var(--border) !important; border-radius: 0 0 0 14px !important; box-shadow: 0 24px 54px rgba(0,0,0,.42) !important; }
.mandatory-header-burger__panel a { color: #fff !important; }
.mandatory-header-burger__panel a:hover { color: var(--accent) !important; background: var(--surface-2) !important; }
.hero { min-height: 620px; gap: clamp(28px,5vw,72px); padding: 64px max(24px,calc((100vw - 1200px)/2)); background: radial-gradient(circle at 75% 30%,rgba(51,255,0,.13),transparent 36%),#0e1011; border-bottom: 1px solid #292c2d; }
.hero-content { max-width: 650px; }
.hero h1 { font-size: clamp(2.5rem,5vw,4.8rem); line-height: .96; letter-spacing: -.045em; }
.hero-intro { max-width: 62ch; color: #b7bdb9; }
.hero-visual { width: min(520px,100%); }
.hero-visual img { width: 100%; min-height: 370px; object-fit: cover; border-radius: 24px; border: 1px solid #343738; box-shadow: 0 30px 70px rgba(0,0,0,.38); }
.offer-box { background: #202324; border: 1px solid #343738; border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: none; }
.offer-subtitle { color: var(--accent); }
.offer-code { color: #000; background: var(--accent); border-radius: 4px; }
.toc-nav { background: rgba(13,15,15,.96); border-color: #292c2d; }
.toc-list { width: min(100% - 40px,1200px); margin: 0 auto; }
main.container { width: min(100% - 40px,1200px); padding-top: 52px; }
main.container > section,.content-section { background: var(--surface-1); border: 1px solid #2c2f30; border-radius: 20px; padding: clamp(22px,4vw,42px); margin-bottom: 24px; }
.answer-box,.info-card,.step-card,.faq-item { background: var(--surface-2) !important; border-color: #36393a !important; border-radius: 14px !important; box-shadow: none !important; }
table { background: var(--surface-1); }
th { background: #202324 !important; color: var(--accent) !important; }
td { border-color: #343738 !important; }
.site-footer { margin-top: 0; background: #0d0f0f; border-top: 1px solid #292c2d; }
.footer-nav a { color: #fff; }
.site-guide-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; max-width: 980px; margin: 0 auto 26px; padding-bottom: 24px; border-bottom: 1px solid #292c2d; }
.site-guide-links a { color: #fff; font-weight: 700; }
.site-guide-links a:hover { color: var(--accent); }
@media (max-width:850px) { body > header { height:66px; padding:0 14px; } .header-logo img { width:38px; height:38px; } .header-actions > .btn-primary,.header-actions > .btn-secondary { display:none; } .mandatory-header-burger__panel { top:66px !important; } .hero { min-height:auto; padding:38px 20px 48px; } .hero-visual { order:-1; } .hero-visual img { min-height:0; aspect-ratio:16/9; } }
@media (max-width:560px) { .hero h1 { font-size:clamp(2.25rem,13vw,3.5rem); } main.container,.toc-list { width:min(100% - 28px,1200px); } main.container > section,.content-section { padding:20px 17px; border-radius:16px; } }