/* Dobryy Aptekar — Merriweather warm wood theme */
:root {
    --wood: #8B6914;
    --wood-light: #B8942A;
    --amber: #D4A037;
    --warm: #F5DEB3;
    --accent: #D4A037;
    --accent-hover: #B8942A;
    --bg: #110c06;
    --bg2: #1a1208;
    --surface: rgba(139,105,20,0.05);
    --surface-hover: rgba(139,105,20,0.1);
    --border: rgba(139,105,20,0.15);
    --border-hover: rgba(139,105,20,0.28);
    --text: #d4c8b0;
    --text2: rgba(212,200,176,0.6);
    --text3: rgba(212,200,176,0.3);
}

.page-bg {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(139,105,20,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 30% 10%, rgba(212,160,55,0.03) 0%, transparent 50%),
        linear-gradient(180deg, #1a1208 0%, #110c06 40%);
}

/* ── Header ── */
header { padding: 52px 0 32px; }

.logo-text {
    font-family: 'Merriweather', serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--amber);
    letter-spacing: 4px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(212,160,55,0.3);
}

.header-body { padding-top: 22px; }

h1 {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    line-height: 1.25;
}
h1 .hl { color: var(--amber); }

.subtitle { font-size: 15px; line-height: 1.7; }

/* ── Sections ── */
.section-tag {
    font-family: 'Merriweather', serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--wood-light);
    letter-spacing: 3px;
}
h2 {
    font-family: 'Merriweather', serif;
    font-weight: 900;
}

/* ── Alert ── */
.alert {
    background: rgba(212,160,55,0.05);
    border: 1px solid rgba(212,160,55,0.12);
    border-left: 3px solid var(--amber);
    border-radius: 6px;
}
.alert h3 { color: var(--amber); }

/* ── Button ── */
.btn-big {
    background: linear-gradient(135deg, #8B6914, #6B4F0E);
    color: var(--warm);
    border: 1px solid rgba(139,105,20,0.3);
    font-family: inherit;
}
.btn-big:hover {
    background: linear-gradient(135deg, #B8942A, #8B6914);
    box-shadow: 0 6px 20px rgba(139,105,20,0.2);
}

/* ── Tabs ── */
.tabs { border-radius: 6px; }
.tab.active { background: rgba(139,105,20,0.08); color: var(--amber); }

/* ── Steps ── */
.step:hover { border-color: var(--border-hover); }
.step-n {
    border-radius: 6px;
    background: rgba(139,105,20,0.15);
    border: 1px solid rgba(139,105,20,0.25);
    color: var(--amber);
    font-family: 'Merriweather', serif;
    font-weight: 900;
}
.step a { color: var(--amber); }
.step-arrow {
    background: rgba(139,105,20,0.06);
    color: var(--amber) !important;
}
.step-arrow:hover { background: rgba(139,105,20,0.12); }

.remark { border-radius: 6px; }
.remark strong { color: var(--wood-light); }

/* ── VPN grid ── */
.badge-free { background: rgba(139,105,20,0.1); color: var(--amber); border: 1px solid rgba(139,105,20,0.2); }
.badge-bot { background: rgba(255,255,255,0.04); }
.vpn-link { color: var(--amber); }

.vpn-bot-label {
    font-family: 'Merriweather', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}
.vpn-bot-btn { font-family: inherit; }

/* ── Divider ── */
.sep { margin: 36px 0; }
.sep::before {
    left: 15%; right: 15%;
    background: linear-gradient(90deg, transparent, rgba(139,105,20,0.2), transparent);
}
.sep span {
    padding: 0 16px;
    font-size: 16px;
    letter-spacing: 8px;
    background: var(--bg);
}

/* ── Footer ── */
.footer-logo {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 4px;
}

/* ── Toast ── */
.toast {
    background: var(--wood);
    color: var(--warm);
}

/* ── Responsive: Tablet ── */
@media (max-width: 768px) {
    header { padding: 44px 0 28px; }
}

/* ── Responsive: Phone ── */
@media (max-width: 520px) {
    .logo-text { font-size: 13px; letter-spacing: 3px; }
    h1 { font-size: 22px; line-height: 1.25; }
    .section-tag { font-size: 11px; letter-spacing: 2px; }
    h2 { font-size: 19px; }
    .tabs { border-radius: 5px; }
    .step-n { border-radius: 5px; }
    .sep span { font-size: 14px; letter-spacing: 6px; }
    .footer-logo { font-size: 11px; letter-spacing: 3px; }
}

/* ── Responsive: Small phone ── */
@media (max-width: 360px) {
    h1 { font-size: 19px; }
}