/* Meteor — Exo 2 space/orange theme */
:root {
    --accent: #E0772E;
    --accent-hover: #F59E4B;
    --bg: #0a1018;
    --bg2: #0e1824;
    --surface: rgba(224,119,46,0.04);
    --surface-hover: rgba(224,119,46,0.08);
    --border: rgba(224,119,46,0.1);
    --border-hover: rgba(224,119,46,0.22);
    --text: #dde4ed;
    --text2: rgba(221,228,237,0.6);
    --text3: rgba(221,228,237,0.3);
}

body { font-family: 'Exo 2', sans-serif; }

.page-bg {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(14,40,60,0.7) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 20%, rgba(224,119,46,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0e1824 0%, #0a1018 50%);
}

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

.logo-text {
    letter-spacing: 4px;
    border-bottom: 2px solid rgba(224,119,46,0.3);
}

/* ── Alert ── */
.alert {
    background: rgba(224,119,46,0.06);
    border: 1px solid rgba(224,119,46,0.12);
    border-left: 3px solid var(--accent);
}
.alert h3 { color: var(--accent-hover); }

/* ── Button ── */
.btn-big {
    background: linear-gradient(135deg, #E0772E, #C45E1A);
    font-family: inherit;
}
.btn-big:hover {
    background: linear-gradient(135deg, #F59E4B, #E0772E);
    box-shadow: 0 6px 20px rgba(224,119,46,0.25);
}

/* ── Tabs ── */
.tab.active { background: rgba(224,119,46,0.08); color: var(--accent-hover); }

/* ── Steps ── */
.step-n { color: #0a1018; }
.step a { color: var(--accent-hover); }
.step-arrow {
    background: rgba(224,119,46,0.06);
    color: var(--accent-hover) !important;
}
.step-arrow:hover { background: rgba(224,119,46,0.12); }

.remark strong { color: var(--accent-hover); }

/* ── VPN grid ── */
.badge-free { background: rgba(224,119,46,0.1); color: var(--accent-hover); border: 1px solid rgba(224,119,46,0.2); }
.vpn-link { color: var(--accent-hover); }
.vpn-bot-btn { font-family: inherit; }

/* ── Divider ── */
.sep span { letter-spacing: 6px; background: var(--bg); }

/* ── Responsive: Phone ── */
@media (max-width: 520px) {
    .logo-text { letter-spacing: 2px; }
}