/* === PAPA VPN — Full Premium Cosmic Theme === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg-deep: #000000;
    --bg-body: #050505;
    --bg-glass: rgba(18, 18, 20, 0.55);
    --bg-glass-hover: rgba(24, 24, 28, 0.7);
    --bg-glass-border: rgba(255, 255, 255, 0.08);
    --bg-glass-border-hover: rgba(255, 255, 255, 0.18);
    --bg-input: #0a0a0c;
    --bg-input-focus: #121216;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --accent: #ff2a2a;
    --accent-hover: #ff4d4d;
    --accent-gradient: linear-gradient(135deg, #ff2a2a, #cc0000, #ff4d4d);
    --accent-gradient-hover: linear-gradient(135deg, #ff4d4d, #e60000, #ff6666);
    --accent-dim: rgba(255, 42, 42, 0.08);
    --success: #10b981;
    --success-dim: rgba(16, 185, 129, 0.1);
    --radius: 24px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --transition: cubic-bezier(0.16, 1, 0.3, 1);
    --max-width: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .hero-title-main, .section-title, .auth-title, .dash-greeting {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ==================== AMBIENT BACKGROUND ==================== */
.ambient-bg {
    position: fixed; inset:0; z-index:0;
    pointer-events: none; overflow: hidden;
    background-color: var(--bg-deep);
}
.ambient-grid {
    position: absolute; inset:0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 60px 60px;
}
.ambient-particles { position:absolute; inset:0; z-index: 1; }
.ambient-glow {
    position:absolute; border-radius:50%; filter:blur(140px); opacity:0.35;
    animation: glowFloat 22s ease-in-out infinite;
}
.g1 { width:650px; height:650px; background:radial-gradient(circle, rgba(255,62,62,0.12) 0%, transparent 70%); top:-10%; left:-10%; }
.g2 { width:550px; height:550px; background:radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%); bottom:-5%; right:-5%; animation-delay:-7s; }
.g3 { width:450px; height:450px; background:radial-gradient(circle, rgba(255,62,62,0.06) 0%, transparent 70%); top:35%; left:45%; animation-delay:-14s; }

@keyframes glowFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    25% { transform: translate(60px,-60px) scale(1.15); }
    50% { transform: translate(-40px,40px) scale(0.9); }
    75% { transform: translate(50px,50px) scale(1.05); }
}

.ambient-lines {
    position:absolute; inset:0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 60px,
        rgba(255,62,62,0.015) 60px, rgba(255,62,62,0.015) 61px
    );
}

/* ==================== NAVBAR ==================== */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:20px 24px;
    background: rgba(3, 3, 3, 0.7);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(255, 255, 255, 0.04);
    transition: transform 0.4s var(--transition), padding 0.4s var(--transition);
}
.navbar.hidden { transform:translateY(-100%); }

.nav-container {
    max-width:var(--max-width); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
}

.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text-primary); }

.nav-logo-img {
    height:36px; width:auto;
    border-radius:8px;
    display:block;
    box-shadow: 0 4px 12px rgba(255, 62, 62, 0.15);
}
.nav-name { font-size:18px; font-weight:800; letter-spacing:-0.5px; }

.nav-links { display:flex; align-items:center; gap:8px; }

.nav-link {
    padding:8px 18px; border-radius:100px;
    color:var(--text-secondary); text-decoration:none;
    font-size:13px; font-weight:500;
    transition:all 0.3s var(--transition);
}
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.nav-link.active { color:var(--accent); background:var(--accent-dim); }
.nav-link.logout-link { color:var(--text-muted); }
.nav-link.logout-link:hover { color:var(--accent); background: rgba(255, 62, 62, 0.04); }

.nav-cta {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 24px; border-radius:100px;
    background: var(--accent-gradient);
    color:#fff; text-decoration:none;
    font-size:13px; font-weight:700;
    box-shadow:0 6px 20px rgba(255,62,62,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    transition:all 0.4s var(--transition);
}
.nav-cta:hover {
    box-shadow:0 8px 30px rgba(255,62,62,0.35);
    transform:translateY(-2px);
}

.nav-status {
    display:flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:100px;
    font-size:11px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase;
}
.nav-status.active { background:var(--success-dim); color:var(--success); border:1px solid rgba(16,185,129,0.15); }

.nav-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--success);
    animation:navPulse 2s ease-in-out infinite;
}
@keyframes navPulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,0.4); } 50% { opacity:0.6; box-shadow:0 0 0 6px rgba(16,185,129,0); } }

.nav-mobile-toggle {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
}
.nav-mobile-toggle span {
    display:block; width:22px; height:2px;
    background:var(--text-secondary); border-radius:2px;
    transition:all 0.3s var(--transition);
}
.nav-mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-mobile-toggle.active span:nth-child(2) { opacity:0; }
.nav-mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu */
.mobile-menu {
    display:none; position:fixed; top:74px; left:0; right:0; z-index:99;
    background:rgba(8,8,10,0.98); backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(255,255,255,0.04);
    padding:16px 24px 32px;
    transform:translateY(-100%); opacity:0;
    transition:all 0.4s var(--transition);
}
.mobile-menu.active { transform:translateY(0); opacity:1; display:block; }

.mobile-link {
    display:block; padding:16px 0;
    color:var(--text-secondary); text-decoration:none;
    font-size:15px; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.03);
    transition:color 0.2s;
}
.mobile-link:hover { color:var(--text-primary); }
.mobile-link.cta { color:var(--accent); font-weight:700; border-bottom:none; }

/* ==================== LANDING PAGE ==================== */
.hero-section {
    min-height:100vh; display:flex; align-items:center;
    max-width:var(--max-width); margin:0 auto;
    padding:140px 24px 80px;
    gap:80px;
    position:relative; z-index:1;
}
.hero-content { flex:1.2; max-width:620px; }
.hero-visual { flex:0.8; display:flex; justify-content:center; align-items:center; position:relative; }

.hero-badge {
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 24px;
    background:var(--accent-dim);
    border:1px solid rgba(255, 62, 62, 0.15);
    border-radius:100px;
    font-size:12px; font-weight:700; color:var(--accent);
    letter-spacing:2px; text-transform:uppercase;
    margin-bottom:32px;
}
.hero-badge img { animation: badgePulse 3s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.7; transform: scale(0.95); } }

.hero-title-main {
    font-size:62px; font-weight:900; line-height:1.05;
    letter-spacing:-2.5px; margin-bottom:24px;
}
.hero-gradient {
    background:linear-gradient(135deg, #ff3e3e, #ff6666, #ff9999);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-desc {
    font-size:18px; color:var(--text-secondary);
    line-height:1.7; margin-bottom:40px;
    max-width:520px;
}

.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }

.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 36px;
    background:var(--accent-gradient);
    color:#fff; text-decoration:none;
    font-size:14px; font-weight:700;
    border-radius:var(--radius-sm); border:none; cursor:pointer;
    font-family:'Inter', sans-serif;
    box-shadow:0 10px 25px rgba(255,62,62,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    transition:all 0.4s var(--transition);
}
.btn-primary:hover {
    box-shadow:0 15px 35px rgba(255,62,62,0.4), 0 0 25px rgba(255,62,62,0.2);
    transform:translateY(-2px);
    background: var(--accent-gradient-hover);
}
.btn-primary:active { transform: translateY(0); }

.btn-glow { animation:glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { box-shadow:0 10px 25px rgba(255,62,62,0.25); } 50% { box-shadow:0 10px 40px rgba(255,62,62,0.45); } }

.btn-secondary {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 32px;
    background:var(--bg-glass);
    border:1px solid var(--bg-glass-border);
    color:var(--text-primary); text-decoration:none;
    font-size:14px; font-weight:600;
    border-radius:var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition:all 0.4s var(--transition);
}
.btn-secondary:hover {
    border-color:var(--bg-glass-border-hover);
    background:rgba(255,255,255,0.03);
    transform:translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.hero-stats-row {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 32px;
}
.hero-stat-item { text-align:left; }
.stat-num {
    display:block;
    font-size:32px; font-weight:800;
    background:linear-gradient(135deg, var(--accent), #ff6b6b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-1px;
}
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-top:4px; font-weight:600; }

/* Hero Visual */
.hero-visual { perspective:1000px; }
.hero-logo-wrap {
    transform-style: preserve-3d;
    animation: floatingLogo 8s ease-in-out infinite;
}
@keyframes floatingLogo {
    0%, 100% { transform: translateY(0px) rotateY(0deg) rotateX(0deg); }
    50% { transform: translateY(-20px) rotateY(10deg) rotateX(5deg); }
}

.hero-orbits { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events: none; }
.orbit {
    position:absolute; border-radius:50%;
    border:1px solid rgba(255, 62, 62, 0.04);
    animation:orbitSpin 16s linear infinite;
}
.orbit-1 { width:320px; height:320px; margin:-160px; border-color:rgba(255, 62, 62, 0.08); animation-duration:12s; }
.orbit-2 { width:420px; height:420px; margin:-210px; border-color:rgba(255, 62, 62, 0.04); animation-duration:20s; animation-direction:reverse; }
.orbit-3 { width:520px; height:520px; margin:-260px; border-color:rgba(255, 62, 62, 0.02); animation-duration:28s; }
@keyframes orbitSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ==================== SECTIONS ==================== */
.section {
    max-width:var(--max-width); margin:0 auto;
    padding:120px 24px;
    position:relative; z-index:1;
}

.section-header { text-align:center; margin-bottom:72px; }

.section-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 18px;
    background:var(--accent-dim);
    border:1px solid rgba(255, 62, 62, 0.15);
    border-radius:100px;
    font-size:11px; font-weight:700; color:var(--accent);
    letter-spacing:2px; text-transform:uppercase;
    margin-bottom:20px;
}

.section-title {
    font-size:44px; font-weight:800; letter-spacing:-1.5px;
    line-height:1.15; margin-bottom:18px;
}
.section-title .accent {
    background:linear-gradient(135deg, var(--accent), #ff6b6b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.section-desc {
    font-size:17px; color:var(--text-secondary);
    max-width:550px; margin:0 auto; line-height:1.6;
}

/* ==================== FEATURES ==================== */
.features-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.feature-card {
    padding:40px 32px; cursor:default;
}

.feature-icon {
    width:56px; height:56px;
    background:var(--accent-dim);
    border:1px solid rgba(255, 62, 62, 0.12);
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; color:var(--accent);
    margin-bottom:24px;
    box-shadow: 0 4px 12px rgba(255, 62, 62, 0.05);
    transition:all 0.4s var(--transition);
}
.feature-card:hover .feature-icon {
    background:rgba(255, 62, 62, 0.15);
    border-color:rgba(255, 62, 62, 0.25);
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 8px 24px rgba(255, 62, 62, 0.15);
}

.feature-title { font-size:18px; font-weight:700; margin-bottom:12px; font-family: 'Plus Jakarta Sans', sans-serif; }
.feature-text { font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* ==================== STATS COUNTER ==================== */
.stats-section {
    background: linear-gradient(180deg, transparent, rgba(255,62,62,0.015), transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding:90px 24px;
    position:relative; z-index:1;
}
.stats-grid {
    max-width:var(--max-width); margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.stat-block { text-align:center; }
.stat-number {
    display:block;
    font-size:52px; font-weight:900;
    background:linear-gradient(135deg, var(--accent), #ff6b6b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-1.5px; margin-bottom:8px;
}
.stat-sublabel { font-size:14px; color:var(--text-muted); font-weight:500; }

/* ==================== PRICING ==================== */
.pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px; align-items:stretch;
}

.pricing-card {
    padding:44px 36px;
    display:flex; flex-direction:column;
    position:relative; overflow:visible;
}
.pricing-card.popular {
    border-color:rgba(255, 62, 62, 0.2);
    background:rgba(255, 62, 62, 0.02);
    box-shadow: 0 30px 60px rgba(255, 62, 62, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pricing-card.popular:hover {
    border-color:rgba(255, 62, 62, 0.35);
    box-shadow: 0 40px 80px rgba(255, 62, 62, 0.08);
}

.pricing-popular {
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    padding:6px 20px;
    background:linear-gradient(135deg, var(--accent), #990000);
    border-radius:100px;
    font-size:11px; font-weight:800; color:#fff;
    white-space:nowrap;
    letter-spacing: 1px;
    box-shadow:0 4px 15px rgba(255, 62, 62, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

.pricing-badge {
    font-size:13px; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1.5px;
    margin-bottom:20px;
}

.pricing-price { margin-bottom:12px; display:flex; align-items:baseline; }
.price-value {
    font-size:48px; font-weight:900; letter-spacing:-1.5px; color: #fff;
}
.price-currency { font-size:24px; font-weight:700; color:var(--text-primary); margin-left: 2px; }
.price-period { font-size:14px; color:var(--text-muted); margin-left: 4px; }

.pricing-discount {
    display:inline-block; align-self: flex-start;
    padding:4px 12px;
    background:var(--success-dim);
    border:1px solid rgba(16,185,129,0.12);
    border-radius:100px;
    font-size:11px; font-weight:700; color:var(--success);
    margin-bottom:24px;
}

.pricing-features { list-style:none; margin:0 0 32px; flex:1; }
.pricing-features li {
    padding:12px 0;
    display:flex; align-items:center; gap:12px;
    font-size:14px; color:var(--text-secondary);
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.pricing-features li i { color:var(--success); font-size:12px; }

.pricing-btn { width:100%; justify-content:center; }

/* ==================== TESTIMONIALS ==================== */
.testimonials-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.testimonial-card { padding:36px; cursor:default; }
.testimonial-stars { color:#eab308; font-size:13px; margin-bottom:18px; letter-spacing:3px; }
.testimonial-text {
    font-size:15px; color:var(--text-secondary);
    line-height:1.75; margin-bottom:24px;
    font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:14px; }
.testimonial-avatar {
    width:40px; height:40px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:14px;
}
.testimonial-name { font-size:14px; font-weight:700; color: #fff; }
.testimonial-role { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ==================== FAQ ==================== */
.faq-list { max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { padding:0; overflow:hidden; }
.faq-question {
    width:100%; padding:24px 28px;
    display:flex; align-items:center; justify-content:space-between;
    background:none; border:none;
    color:var(--text-primary); font-size:16px; font-weight:700;
    cursor:pointer;
    font-family:'Plus Jakarta Sans', sans-serif;
    transition:color 0.3s;
}
.faq-question:hover { color:var(--accent); }
.faq-question i { color:var(--text-muted); transition:transform 0.4s var(--transition); font-size:14px; }
.faq-question.active i { transform:rotate(180deg); color:var(--accent); }
.faq-answer {
    padding:0 28px;
    max-height:0; overflow:hidden;
    transition:all 0.4s var(--transition);
}
.faq-answer.open { max-height:300px; padding:0 28px 24px; }
.faq-answer p { font-size:14.5px; color:var(--text-secondary); line-height:1.75; }

/* ==================== CTA SECTION ==================== */
.cta-section {
    text-align:center; padding:120px 24px;
    position:relative; z-index:1;
}
.cta-content { max-width:600px; margin:0 auto; }
.cta-shield {
    margin-bottom:28px;
    animation:ctaFloat 5s ease-in-out infinite;
}
.cta-shield img { border-radius:16px; box-shadow: 0 10px 30px rgba(255, 62, 62, 0.1); }
@keyframes ctaFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
.cta-heading { font-size:42px; font-weight:800; letter-spacing:-1.5px; margin-bottom:18px; }
.cta-text { font-size:18px; color:var(--text-secondary); line-height:1.7; margin-bottom:36px; }
.cta-main-btn { padding:18px 48px; font-size:15px; }

/* ==================== FOOTER ==================== */
.site-footer {
    max-width:var(--max-width); margin:0 auto;
    padding:80px 24px 32px;
    position:relative; z-index:1;
}
.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px; margin-bottom:60px;
}
.footer-brand {
    display:flex; align-items:center; gap:12px;
    font-size:18px; font-weight:800; margin-bottom:18px;
}
.footer-brand-img { height:32px; width:auto; border-radius:6px; display:block; }
.footer-about { font-size:14px; color:var(--text-muted); line-height:1.75; max-width: 280px; }
.footer-col h4 { font-size:14px; font-weight:700; margin-bottom:20px; color:var(--text-primary); font-family: 'Plus Jakarta Sans', sans-serif; }
.footer-col a {
    display:block; padding:8px 0;
    font-size:14px; color:var(--text-muted); text-decoration:none;
    transition:color 0.2s;
}
.footer-col a:hover { color:var(--accent); }

.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.04);
}
.footer-copy { font-size:12px; color:var(--text-muted); }
.footer-social { display:flex; gap:12px; }
.footer-social a {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-glass);
    border:1px solid var(--bg-glass-border);
    border-radius:10px;
    color:var(--text-muted); font-size:16px;
    transition:all 0.3s var(--transition);
}
.footer-social a:hover { color:#fff; border-color:var(--accent); background: var(--accent-dim); transform: translateY(-2px); }

/* ==================== AUTH PAGES ==================== */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.auth-container { width:100%; max-width:440px; position:relative; z-index:1; }
.auth-card { padding:48px 40px; }

.auth-logo {
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; color:var(--text-primary);
    margin-bottom:32px;
}
.auth-logo-img {
    height:56px; width:auto;
    border-radius:12px;
    display:block;
    box-shadow: 0 8px 24px rgba(255, 62, 62, 0.2);
}

.auth-title { font-size:26px; font-weight:800; text-align:center; margin-bottom:8px; letter-spacing: -0.5px; }
.auth-subtitle { font-size:14px; color:var(--text-secondary); text-align:center; margin-bottom:32px; }

.auth-error {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px;
    background:rgba(239,68,68,0.06);
    border:1px solid rgba(239,68,68,0.18);
    border-radius:var(--radius-xs);
    font-size:13px; color:#F87171;
    margin-bottom:20px;
}
.auth-success {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px;
    background:var(--success-dim);
    border:1px solid rgba(16,185,129,0.18);
    border-radius:var(--radius-xs);
    font-size:13px; color:var(--success);
    margin-bottom:20px;
}

.auth-form { display:flex; flex-direction:column; gap:18px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label {
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--text-secondary);
}
.form-group label i { color:var(--accent); width:14px; }

.form-input {
    width:100%; padding:14px 18px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-xs);
    color:var(--text-primary);
    font-size:14px; font-family:'Inter', sans-serif;
    outline:none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    transition:all 0.3s var(--transition);
}
.form-input:focus {
    border-color:rgba(255, 62, 62, 0.4);
    box-shadow: 0 0 20px rgba(255, 62, 62, 0.08), inset 0 1px 2px rgba(0,0,0,0.6);
    background: var(--bg-input-focus);
}
.form-input::placeholder { color:var(--text-muted); }

.password-wrapper { position:relative; }
.password-toggle {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    background:none; border:none;
    color:var(--text-muted); font-size:16px;
    cursor:pointer; padding:4px;
    transition:color 0.2s;
}
.password-toggle:hover { color:var(--text-primary); }

.auth-btn { width:100%; justify-content:center; padding:16px; margin-top:8px; }

.auth-divider {
    display:flex; align-items:center; gap:16px;
    margin:28px 0;
    color:var(--text-muted); font-size:12px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.auth-divider::before, .auth-divider::after {
    content:''; flex:1;
    height:1px; background:rgba(255,255,255,0.06);
}

.auth-social { display:flex; gap:12px; }
.social-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-xs);
    color:var(--text-secondary); text-decoration:none;
    font-size:14px; font-weight:600;
    transition:all 0.3s var(--transition);
}
.social-btn:hover { background:rgba(255, 255, 255, 0.03); color:var(--text-primary); border-color: rgba(255, 255, 255, 0.1); }
.social-btn.telegram { color:#24A1DE; }
.social-btn.telegram:hover { border-color:rgba(36,161,222,0.25); background:rgba(36,161,222,0.04); }

.auth-footer-text {
    text-align:center; margin-top:28px;
    font-size:13.5px; color:var(--text-muted);
}
.auth-footer-text a { color:var(--accent); text-decoration:none; font-weight:700; }
.auth-footer-text a:hover { text-decoration:underline; }

.form-checkbox {
    display:flex; align-items:flex-start; gap:10px;
    font-size:12.5px; color:var(--text-muted);
    cursor:pointer;
    margin-top: 4px;
}
.form-checkbox input { margin-top: 3px; }
.form-checkbox a { color:var(--accent); text-decoration:none; font-weight: 600; }
.form-checkbox a:hover { text-decoration:underline; }

/* Auth Tabs styling */
.auth-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bg-glass-border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
}
.auth-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s var(--transition);
}
.auth-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.02);
}
.auth-tab.active {
    color: #ffffff;
    background: var(--accent-gradient);
    box-shadow: 0 4px 15px rgba(255, 62, 62, 0.25);
}

.auth-panel {
    display: none;
}
.auth-panel.active {
    display: flex;
    flex-direction: column;
    animation: authPanelFade 0.4s var(--transition);
}
@keyframes authPanelFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-tg-code {
    animation: authPanelFade 0.4s var(--transition);
}

/* ==================== DASHBOARD ==================== */
.dash-body { background:var(--bg-deep); }
.dash-wrapper { position:relative; z-index:1; padding-top:84px; }
.dash-main {
    max-width:680px; margin:0 auto;
    padding:40px 16px 60px;
    display:flex; flex-direction:column; gap:20px;
}

.dash-header { margin-bottom:8px; }
.dash-greeting { font-size:32px; font-weight:800; letter-spacing:-0.8px; margin-bottom:10px; }
.dash-greeting .hero-name {
    background: linear-gradient(135deg, var(--accent), #ff6b6b);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dash-subtitle { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--text-secondary); flex-wrap:wrap; }

.status-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px; border-radius:100px;
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
}
.status-badge.active { background:var(--success-dim); color:var(--success); border:1px solid rgba(16,185,129,0.12); }
.status-badge.inactive { background:rgba(239,68,68,0.06); color:#F87171; border:1px solid rgba(239,68,68,0.12); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--success); animation:navPulse 2s ease-in-out infinite; }

.dash-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.dash-stat {
    padding:18px 10px;
    background:var(--bg-glass);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-sm);
    text-align:center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s var(--transition);
}
.dash-stat:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.dash-stat-icon { display:block; color:var(--accent); font-size:18px; margin-bottom:8px; }
.dash-stat-value {
    display:block; font-size:20px; font-weight:800;
    color: #fff;
    letter-spacing:-0.5px;
}
.dash-stat-label { font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-top:5px; font-weight: 600; }

/* Glass Cards */
.glass-card {
    position:relative;
    background:var(--bg-glass);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius);
    padding:32px;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    overflow:hidden;
    transition: border-color 0.4s var(--transition), box-shadow 0.4s var(--transition), transform 0.4s var(--transition);
}
.card-glow {
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,62,62,0.15), rgba(255,62,62,0.35), rgba(255,62,62,0.15), transparent);
    opacity:0.8;
}

/* Network Card */
.network-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px;
}
.network-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; font-family: 'Plus Jakarta Sans', sans-serif; }
.network-title i { color:var(--accent); font-size:14px; }

.network-bar {
    height:6px; background:rgba(255,255,255,0.03);
    border-radius:100px; overflow:hidden; margin-bottom:16px;
}
.network-bar-fill {
    height:100%;
    background:var(--accent-gradient);
    border-radius:100px;
    animation:barBreath 3s ease-in-out infinite;
}
@keyframes barBreath { 0%,100% { opacity:0.8; } 50% { opacity:1; } }

.network-stats { display:flex; gap:20px; }
.network-stat {
    display:flex; align-items:center; gap:6px;
    font-size:14px; font-weight:700; color: #fff;
}
.network-stat i { color:var(--accent); font-size:13px; }
.network-stat small { font-weight:500; color:var(--text-muted); font-size:11.5px; margin-left: 2px; }

/* Link Card */
.link-header {
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; color:var(--text-secondary);
    margin-bottom:14px; text-transform:uppercase; letter-spacing:0.8px;
}
.link-header i { color:var(--accent); font-size:14px; }

.link-box { display:flex; gap:10px; margin-bottom:14px; }

.link-input {
    flex:1; padding:14px 18px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-size:13px; font-family:'SF Mono','Fira Code',monospace;
    outline:none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    transition:all 0.3s ease;
}
.link-input:focus { border-color:rgba(255, 62, 62, 0.3); box-shadow:0 0 20px rgba(255, 62, 62, 0.05); }

.btn-copy {
    padding:14px 20px;
    background:var(--accent-gradient);
    border:none; border-radius:var(--radius-sm);
    color:#fff; cursor:pointer; font-size:16px;
    min-width:54px;
    box-shadow:0 4px 12px rgba(255, 62, 62, 0.25);
    transition:all 0.3s var(--transition);
}
.btn-copy:hover { box-shadow:0 6px 20px rgba(255, 62, 62, 0.35); transform:translateY(-1px); }
.btn-copy.copied { background:linear-gradient(135deg, var(--success), #0b9e6b); box-shadow:0 4px 12px rgba(16,185,129,0.3); }

.link-actions { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-bottom:16px; }

.btn-action {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-xs);
    color:var(--text-secondary);
    cursor:pointer; font-size:13px; font-weight: 600;
    font-family:'Inter', sans-serif;
    transition:all 0.3s var(--transition);
}
.btn-action:hover { background:rgba(255,255,255,0.03); color:var(--text-primary); border-color:rgba(255, 62, 62, 0.15); transform:translateY(-1px); }
.btn-action.premium { background:var(--accent-dim); border-color:rgba(255, 62, 62, 0.12); color:var(--accent); }
.btn-action.premium:hover { background:rgba(255, 62, 62, 0.1); color:var(--accent-hover); border-color:rgba(255, 62, 62, 0.25); box-shadow:0 4px 15px rgba(255, 62, 62, 0.1); }

.link-tip { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.link-tip i { color:var(--accent); font-size:12px; }

/* Servers */
.servers-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px;
}
.servers-header > div { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.8px; font-family: 'Plus Jakarta Sans', sans-serif; }
.servers-header i { color:var(--accent); font-size:14px; }
.servers-count { font-size:12px; color:var(--text-muted); font-weight:600; }

.servers-list { display:flex; flex-direction:column; gap:8px; }

.server-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all 0.3s var(--transition);
}
.server-item:hover { border-color:rgba(255,62,62,0.12); background:rgba(255,62,62,0.01); transform: translateX(2px); }
.server-item.active { border-color:rgba(255,62,62,0.3); background:rgba(255,62,62,0.04); }

.server-left { display:flex; align-items:center; gap:12px; min-width:0; }
.server-flag { font-size:20px; line-height:1; flex-shrink:0; }
.server-name { font-size:13px; font-weight:600; color: #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.server-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.server-ping { font-size:12px; color:var(--text-secondary); font-weight: 500; }
.server-ping i { color:var(--success); font-size:11px; margin-right:4px; }
.server-badge { padding:3px 12px; background:var(--accent-dim); border:1px solid rgba(255, 62, 62, 0.15); border-radius:100px; font-size:9px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:0.8px; }
.server-more { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; color:var(--text-muted); font-size:12px; font-weight: 500; }

/* Instructions */
.instr-header { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-secondary); margin-bottom:18px; text-transform:uppercase; letter-spacing:0.8px; font-family: 'Plus Jakarta Sans', sans-serif; }
.instr-header i { color:var(--accent); }
.instr-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px; }
.instr-tab {
    padding:12px 8px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    font-size:11px; font-weight:700;
    cursor:pointer;
    font-family:'Plus Jakarta Sans', sans-serif;
    text-transform:uppercase; letter-spacing:0.5px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    transition:all 0.3s var(--transition);
}
.instr-tab i { font-size:18px; }
.instr-tab:hover { border-color:rgba(255, 62, 62, 0.2); color:var(--text-primary); transform:translateY(-2px); }
.instr-tab.active { background:var(--accent-gradient); border-color:var(--accent); color:#fff; box-shadow:0 4px 15px rgba(255, 62, 62, 0.2); }

.instr-content { display:none; }
.instr-content.active { display:block; animation:tabSlide 0.4s var(--transition); }
@keyframes tabSlide { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.instr-steps { list-style:none; counter-reset:step; }
.instr-steps li {
    counter-increment:step;
    padding:10px 0 10px 40px; position:relative;
    color:var(--text-secondary);
    font-size:13.5px; line-height:1.7;
}
.instr-steps li::before {
    content:counter(step);
    position:absolute; left:0; top:8px;
    width:24px; height:24px;
    background:var(--bg-input);
    border:1px solid var(--bg-glass-border);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted);
    font-size:11px; font-weight:800;
}
.instr-steps li strong { color:var(--text-primary); font-weight:700; }

/* ==================== MODALS ==================== */
.modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; }
.modal.active { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0, 0, 0, 0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal-panel {
    position:relative;
    background:var(--bg-glass);
    border:1px solid var(--bg-glass-border);
    border-radius:var(--radius);
    padding:40px 32px;
    max-width:360px; width:90%;
    text-align:center;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    animation:modalPop 0.4s var(--transition);
}
@keyframes modalPop { from { opacity:0; transform:scale(0.95) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }

.modal-close {
    position:absolute; top:14px; right:16px;
    background:none; border:none;
    color:var(--text-muted); font-size:24px;
    cursor:pointer; line-height:1;
    width:32px; height:32px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.modal-close:hover { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.modal-title { font-size:18px; font-weight:800; margin-bottom:24px; display:flex; align-items:center; justify-content:center; gap:8px; font-family: 'Plus Jakarta Sans', sans-serif; }
.modal-title i { color:var(--accent); }
.qr-wrap { display:flex; justify-content:center; margin-bottom:20px; }
.qr-wrap canvas, .qr-wrap img { border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.4); border: 4px solid #161922; }
.modal-hint { font-size:12px; color:var(--text-muted); font-weight: 500; }

/* Auto Proxy Modal */
.auto-status { padding:24px 0; }
.auto-spinner { font-size:36px; color:var(--accent); margin-bottom:16px; }
.auto-spinner i { animation: spin 1.5s linear infinite; }
.auto-status p { color:var(--text-secondary); font-size:14px; font-weight: 500; }
.auto-result { padding:12px 0; }
.auto-best { display:flex; align-items:center; gap:16px; padding:18px; background:rgba(255, 62, 62, 0.03); border:1px solid rgba(255, 62, 62, 0.15); border-radius:var(--radius-sm); margin-bottom:18px; animation:bestSlide 0.5s var(--transition); }
@keyframes bestSlide { from { opacity:0; transform:scale(0.96); } to { opacity:1; transform:scale(1); } }
.auto-crown { width:44px; height:44px; background:linear-gradient(135deg, #eab308, #ca8a04); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; box-shadow:0 4px 15px rgba(234,179,8,0.3); }
.auto-best-name { font-size:15px; font-weight:800; color: #fff; margin-bottom:4px; }
.auto-best-ping { font-size:13px; color:var(--success); font-weight: 600; }
.auto-text { font-size:12.5px; color:var(--text-secondary); margin-bottom:18px; line-height: 1.6; }
.auto-retry { display:inline-flex; margin:0 auto; }

/* ==================== TOAST ==================== */
.toast {
    position:fixed; bottom:32px; left:50%;
    transform:translateX(-50%) translateY(100px);
    background:rgba(12, 13, 17, 0.9);
    border:1px solid rgba(255, 62, 62, 0.2);
    border-radius:14px;
    padding:16px 28px;
    color:var(--text-primary);
    font-size:13.5px; font-weight:700;
    box-shadow:0 20px 50px rgba(0,0,0,0.6);
    z-index:2000;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    transition: transform 0.4s var(--transition), opacity 0.3s;
    opacity:0; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast::before { content:'\2713'; color:var(--success); font-weight:900; margin-right:10px; }

/* ==================== ANIMATIONS ==================== */
[data-delay] { animation:cardSlide 0.6s var(--transition) both; }
[data-delay="0"] { animation-delay:0s; }
[data-delay="0.1"] { animation-delay:0.1s; }
[data-delay="0.15"] { animation-delay:0.15s; }
[data-delay="0.2"] { animation-delay:0.2s; }
[data-delay="0.25"] { animation-delay:0.25s; }
[data-delay="0.3"] { animation-delay:0.3s; }

@keyframes cardSlide {
    from { opacity:0; transform:translateY(24px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .pricing-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:24px; }
    .pricing-card.popular { transform:none; }
    .testimonials-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:16px; }
}

@media (max-width: 768px) {
    .hero-section { flex-direction:column; padding:120px 20px 60px; gap:40px; text-align:center; }
    .hero-content { max-width:100%; }
    .hero-title-main { font-size:44px; }
    .hero-desc { max-width:100%; margin-left:auto; margin-right:auto; }
    .hero-actions { justify-content:center; }
    .hero-stats-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero-visual { display:none; }
    .nav-links .nav-link, .nav-links .nav-cta { display:none; }
    .nav-mobile-toggle { display:flex; }
    .mobile-menu { display:block; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
    .stats-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
    .section-title { font-size:32px; }
    .form-row { grid-template-columns:1fr; gap:14px; }
    .dash-stats { grid-template-columns:repeat(3,1fr); }
    .dash-stat-value { font-size:16px; }
    .instr-tabs { grid-template-columns:repeat(2,1fr); }
    .network-stats { flex-wrap:wrap; gap:8px; }
    .server-name { max-width:160px; }
    .link-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hero-title-main { font-size:34px; }
    .features-grid { grid-template-columns:1fr; }
    .section { padding:80px 16px; }
    .pricing-card { padding:32px 24px; }
    .dash-stats { grid-template-columns:repeat(2,1fr); }
    .dash-greeting { font-size:24px; }
    .auth-card { padding:32px 24px; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:12px; text-align: center; }
}

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal.delay-100 { transition-delay: 100ms; }
.reveal.delay-200 { transition-delay: 200ms; }
.reveal.delay-300 { transition-delay: 300ms; }
.reveal.delay-400 { transition-delay: 400ms; }
.reveal.delay-500 { transition-delay: 500ms; }

/* Enhanced Hero Glow */
.hero-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 42, 42, 0.15) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    animation: pulseHero 6s infinite alternate;
}
@keyframes pulseHero {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}