/* Veselyy Mandarin — Nunito playful orange/pink theme */
:root {
    --orange: #F5921B;
    --orange-light: #FFB347;
    --pink: #E8427C;
    --yellow: #FFD93D;
    --accent: #F5921B;
    --accent-hover: #FFB347;
    --bg: #1a0e08;
    --bg2: #221408;
    --surface: rgba(245,146,27,0.05);
    --surface-hover: rgba(245,146,27,0.1);
    --border: rgba(245,146,27,0.12);
    --border-hover: rgba(245,146,27,0.25);
    --text: #f0e6dc;
    --text2: rgba(240,230,220,0.6);
    --text3: rgba(240,230,220,0.3);
}

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

.page-bg {
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(245,146,27,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 80% 5%, rgba(232,66,124,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #221408 0%, #1a0e08 40%);
}

/* ── Header ── */
.logo-text {
    font-size: 16px;
    font-weight: 900;
    color: var(--orange);
    border-bottom: 3px solid var(--orange);
}

h1 {
    font-size: clamp(26px, 5.5vw, 40px);
    font-weight: 900;
}
h1 .hl { color: var(--orange); }

/* ── Sections ── */
.section-tag { font-weight: 800; color: var(--orange); }
h2 { font-size: clamp(21px, 4.5vw, 28px); font-weight: 900; }

/* ── Alert ── */
.alert {
    background: rgba(232,66,124,0.06);
    border: 1px solid rgba(232,66,124,0.12);
    border-left: 3px solid var(--pink);
    border-radius: 12px;
}
.alert h3 { color: var(--pink); }

/* ── Button ── */
.btn-big {
    background: linear-gradient(135deg, #F5921B, #E8427C);
    border-radius: 14px;
    font-weight: 800;
    font-family: inherit;
}
.btn-big:hover {
    background: linear-gradient(135deg, #FFB347, #F5921B);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245,146,27,0.25);
}

/* ── Tabs ── */
.tabs { border-radius: 12px; }
.tab { font-weight: 700; }
.tab.active { background: rgba(245,146,27,0.1); color: var(--orange); }

/* ── Steps ── */
.step { border-radius: 14px; }
.step:hover { border-color: var(--border-hover); }
.step-n {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    font-weight: 900;
    font-size: 16px;
}
.step a { color: var(--orange-light); }
.step-arrow {
    background: rgba(245,146,27,0.06);
    color: var(--orange) !important;
    border-radius: 8px;
    font-weight: 700;
}
.step-arrow:hover { background: rgba(245,146,27,0.12); }

.remark { border-radius: 12px; }
.remark strong { color: var(--orange); }

/* ── VPN grid ── */
.vpn-card { border-radius: 14px; }
.vpn-card:hover { transform: translateY(-2px); }
.badge { font-weight: 800; border-radius: 6px; }
.badge-free { background: rgba(245,146,27,0.1); color: var(--orange-light); border: 1px solid rgba(245,146,27,0.2); }
.vpn-link { color: var(--orange); font-weight: 700; }

.vpn-bot-label { font-weight: 700; }
.vpn-bot-btn { border-radius: 14px; font-family: inherit; }

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

/* ── Divider ── */
.sep::before {
    left: 15%; right: 15%;
    background: linear-gradient(90deg, transparent, rgba(245,146,27,0.2), transparent);
}
.sep span {
    font-size: 18px;
    letter-spacing: 8px;
    background: var(--bg);
}

/* ── Footer ── */
.footer-logo { font-weight: 800; }

/* ── Toast ── */
.toast {
    background: var(--orange);
    border-radius: 12px;
}

/* ── Responsive: Phone ── */
@media (max-width: 520px) {
    .logo-text { font-size: 13px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    .alert { border-radius: 10px; }
    .btn-big { border-radius: 10px; }
    .tabs { border-radius: 8px; }
    .step { border-radius: 10px; }
    .step-n { width: 30px; height: 30px; font-size: 14px; }
    .remark { border-radius: 8px; }
    .vpn-card { border-radius: 10px; }
    .vpn-bot-btn { border-radius: 10px; }
    .sep span { font-size: 15px; letter-spacing: 6px; }
    .contact-item { border-radius: 10px; }
    .toast { border-radius: 8px; }
}