/* Legion — Rajdhani military red/black theme */
:root {
    --red: #DC2626;
    --red-bright: #EF4444;
    --red-dark: #991B1B;
    --red-glow: rgba(220,38,38,0.3);
    --silver: #C0C0C0;
    --accent: #DC2626;
    --accent-hover: #EF4444;
    --bg: #080808;
    --bg2: #0e0808;
    --surface: rgba(220,38,38,0.04);
    --surface-hover: rgba(220,38,38,0.08);
    --border: rgba(220,38,38,0.12);
    --border-hover: rgba(220,38,38,0.3);
    --text: #eee8e8;
    --text2: rgba(238,232,232,0.55);
    --text3: rgba(238,232,232,0.28);
}

.page-bg {
    background:
        linear-gradient(135deg, rgba(220,38,38,0.06) 0%, transparent 50%),
        linear-gradient(180deg, #120808 0%, #0c0606 20%, var(--bg) 50%);
}

/* ── Header ── */
header { position: relative; }

/* Red accent line at top */
header::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--red);
    box-shadow: 0 0 12px var(--red-glow);
}

.logo-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    color: var(--red);
    letter-spacing: 6px;
    border-bottom: 2px solid var(--red-dark);
}

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

h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(26px, 6vw, 44px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
}
h1 .hl { color: var(--red-bright); }

.subtitle { font-size: 15px; max-width: 440px; }

/* ── Sections ── */
.section-tag {
    font-family: 'Rajdhani', sans-serif;
    color: var(--red);
    letter-spacing: 3px;
}
h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(20px, 4.5vw, 28px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.section-desc { font-size: 14px; }

/* ── Alert ── */
.alert {
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.15);
    border-left: 3px solid var(--red);
    border-radius: 4px;
}
.alert h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    color: var(--red-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Button ── */
.btn-big {
    background: var(--red);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.btn-big:hover {
    background: var(--red-bright);
    box-shadow: 0 0 24px var(--red-glow), 0 4px 16px rgba(0,0,0,0.4);
}

/* ── Tabs ── */
.tabs { border-radius: 4px; }
.tab {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tab.active { background: rgba(220,38,38,0.08); color: var(--red-bright); }

/* ── Steps ── */
.step { border-radius: 4px; position: relative; }
.step:hover { border-color: var(--border-hover); }
.step-n {
    border-radius: 4px;
    background: var(--red);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
}
.step h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.step a { color: var(--red-bright); }
.step-arrow {
    background: rgba(220,38,38,0.06);
    color: var(--red-bright) !important;
    border-radius: 4px;
}
.step-arrow:hover { background: rgba(220,38,38,0.12); }

.remark { border-radius: 4px; }
.remark strong {
    color: var(--red);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
}

/* ── VPN grid ── */
.vpn-card { border-radius: 4px; }
.vpn-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}
.badge {
    font-family: 'Rajdhani', sans-serif;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.badge-free { background: rgba(220,38,38,0.1); color: #FCA5A5; border: 1px solid rgba(220,38,38,0.2); }
.vpn-link { color: var(--red-bright); }

.vpn-bot-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
}
.vpn-bot-btn {
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

/* ── Contacts ── */
.contact-item { border-radius: 4px; }

/* ── Divider ── */
.sep::before {
    left: 25%; right: 25%;
    background: linear-gradient(90deg, transparent, var(--red-dark), transparent);
}
.sep span { color: var(--red-dark); }

/* ── Footer ── */
.footer-logo {
    font-family: 'Rajdhani', sans-serif;
    color: var(--red-dark);
}

/* ── Toast ── */
.toast {
    background: var(--red);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
}

/* ── Responsive: Phone ── */
@media (max-width: 520px) {
    header::before { width: 40px; height: 2px; }
    .logo-text { font-size: 16px; letter-spacing: 4px; }
    h1 { font-size: 24px; }
    .subtitle { font-size: 13px; }
    .section-tag { font-size: 11px; letter-spacing: 2px; }
    h2 { font-size: 20px; }
    .section-desc { font-size: 13px; }
    .btn-big { font-size: 16px; letter-spacing: 2px; }
    .tabs { border-radius: 3px; }
    .step-n { border-radius: 3px; }
    .step h3 { font-size: 14px; }
    .step p { font-size: 13px; }
    .vpn-name { font-size: 14px; }
    .vpn-desc { font-size: 12px; margin-bottom: 8px; }
    .footer-logo { font-size: 11px; letter-spacing: 3px; }
}

/* ── Responsive: Small phone ── */
@media (max-width: 360px) {
    .logo-text { font-size: 14px; letter-spacing: 3px; }
    h1 { font-size: 21px; }
    .subtitle { font-size: 12px; }
    .btn-big { font-size: 14px; letter-spacing: 1px; }
}