@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --bg-0: #030014;
    --bg-1: #0a0a2e;
    --bg-2: #12124a;
    --bg-glass: rgba(10, 10, 46, 0.65);
    --bg-glass-hover: rgba(18, 18, 74, 0.75);
    --border: rgba(139, 92, 246, 0.15);
    --border-hover: rgba(139, 92, 246, 0.4);
    --accent: #8b5cf6;
    --accent2: #06d6a0;
    --accent3: #f72585;
    --accent4: #4cc9f0;
    --text1: #f1f5f9;
    --text2: #94a3b8;
    --text3: #475569;
    --r: 20px;
    --r-lg: 28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg-0);color:var(--text1);overflow-x:hidden;line-height:1.6}

/* ===== PARTICLES CANVAS ===== */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ===== AURORA BG ===== */
.aurora{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.aurora-beam{position:absolute;border-radius:50%;filter:blur(120px);mix-blend-mode:screen}
.aurora-beam:nth-child(1){width:800px;height:400px;background:radial-gradient(ellipse,rgba(139,92,246,0.25),transparent 70%);top:-10%;left:10%;animation:aurora1 25s ease-in-out infinite alternate}
.aurora-beam:nth-child(2){width:600px;height:500px;background:radial-gradient(ellipse,rgba(6,214,160,0.2),transparent 70%);bottom:-10%;right:5%;animation:aurora2 20s ease-in-out infinite alternate}
.aurora-beam:nth-child(3){width:500px;height:300px;background:radial-gradient(ellipse,rgba(247,37,133,0.15),transparent 70%);top:40%;left:40%;animation:aurora3 30s ease-in-out infinite alternate}
.aurora-beam:nth-child(4){width:400px;height:400px;background:radial-gradient(ellipse,rgba(76,201,240,0.12),transparent 70%);top:60%;left:-5%;animation:aurora4 22s ease-in-out infinite alternate}

@keyframes aurora1{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(100px,50px) rotate(10deg) scale(1.2)}100%{transform:translate(-50px,100px) rotate(-5deg) scale(0.9)}}
@keyframes aurora2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-60px) scale(1.15)}100%{transform:translate(40px,-30px) scale(0.95)}}
@keyframes aurora3{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(60px,40px) rotate(180deg)}}
@keyframes aurora4{0%{transform:translate(0,0) scale(1)}100%{transform:translate(100px,-50px) scale(1.3)}}

/* ===== NOISE TEXTURE ===== */
.noise{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== CONTAINER ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ===== NAVBAR ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;background:rgba(3,0,20,0.75);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--border);transition:all 0.3s}
.navbar.scrolled{background:rgba(3,0,20,0.92);box-shadow:0 4px 40px rgba(0,0,0,0.5)}
.navbar .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.35rem;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-0.5px}
.logo-glow{width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 16px var(--accent2),0 0 40px rgba(6,214,160,0.3);animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{box-shadow:0 0 16px var(--accent2),0 0 40px rgba(6,214,160,0.3);transform:scale(1)}50%{box-shadow:0 0 24px var(--accent2),0 0 60px rgba(6,214,160,0.4);transform:scale(1.2)}}
.logo-text{background:linear-gradient(135deg,#f1f5f9 0%,#8b5cf6 50%,#06d6a0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:logoGradient 6s ease infinite}
@keyframes logoGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--text2);text-decoration:none;font-size:0.88rem;font-weight:500;transition:all 0.3s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);border-radius:2px;transition:width 0.3s}
.nav-links a:hover{color:var(--text1)}
.nav-links a:hover::after{width:100%}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;border-radius:14px;font-size:0.95rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.1);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}
.btn:active::after{width:300px;height:300px}
.btn-primary{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:white;box-shadow:0 4px 24px rgba(139,92,246,0.35),inset 0 1px 0 rgba(255,255,255,0.1)}
.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 40px rgba(139,92,246,0.5),inset 0 1px 0 rgba(255,255,255,0.15)}
.btn-secondary{background:var(--bg-glass);color:var(--text1);border:1px solid var(--border);backdrop-filter:blur(12px)}
.btn-secondary:hover{border-color:var(--border-hover);background:var(--bg-glass-hover);transform:translateY(-4px);box-shadow:0 8px 32px rgba(139,92,246,0.15)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid transparent;padding:8px 20px;font-size:0.85rem}
.btn-ghost:hover{color:var(--text1);border-color:var(--border)}
.btn-block{width:100%}
.btn-lg{padding:18px 44px;font-size:1.05rem;border-radius:16px}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative}
.hero-content{max-width:850px}
.hero-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:100px;padding:8px 20px 8px 12px;font-size:0.8rem;font-weight:600;color:var(--accent);margin-bottom:36px;backdrop-filter:blur(12px);animation:fadeInDown 0.8s ease both}
.hero-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 12px var(--accent2);animation:logoPulse 2s infinite}
.hero h1{font-size:5rem;font-weight:900;line-height:1.02;margin-bottom:28px;letter-spacing:-3px;animation:fadeInUp 0.8s ease 0.1s both}
.g{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,var(--accent4) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:logoGradient 8s ease infinite}
.g2{background:linear-gradient(135deg,var(--accent3) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:1.15rem;color:var(--text2);max-width:520px;margin:0 auto 48px;line-height:1.8;animation:fadeInUp 0.8s ease 0.2s both}
.hero-btns{display:flex;gap:16px;justify-content:center;animation:fadeInUp 0.8s ease 0.3s both}
.hero-metrics{display:flex;gap:56px;justify-content:center;margin-top:72px;animation:fadeInUp 0.8s ease 0.4s both}
.metric{text-align:center}
.metric-val{font-size:2.2rem;font-weight:900;letter-spacing:-1px}
.metric-val .g{font-size:inherit}
.metric-label{font-size:0.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-top:4px}

@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}

/* ===== TYPING CURSOR ===== */
.type-wrap{display:inline}
.cursor{display:inline-block;width:4px;height:0.85em;background:var(--accent);margin-left:4px;animation:blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes blink{50%{opacity:0}}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(40px);transition:all 0.8s cubic-bezier(0.175,0.885,0.32,1.275)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}

/* ===== FEATURES ===== */
.features{padding:140px 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:40px 32px;backdrop-filter:blur(20px);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity 0.4s}
.feat-card:hover::before{opacity:1}
.feat-card:hover{transform:translateY(-12px);border-color:var(--border-hover);box-shadow:0 20px 60px rgba(139,92,246,0.15)}
.feat-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(139,92,246,0.06),transparent 50%);opacity:0;transition:opacity 0.4s;pointer-events:none}
.feat-card:hover::after{opacity:1}
.feat-icon{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:24px;position:relative}
.feat-icon.ic1{background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(139,92,246,0.05));box-shadow:0 0 30px rgba(139,92,246,0.1)}
.feat-icon.ic2{background:linear-gradient(135deg,rgba(6,214,160,0.2),rgba(6,214,160,0.05));box-shadow:0 0 30px rgba(6,214,160,0.1)}
.feat-icon.ic3{background:linear-gradient(135deg,rgba(247,37,133,0.2),rgba(247,37,133,0.05));box-shadow:0 0 30px rgba(247,37,133,0.1)}
.feat-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.feat-card p{color:var(--text2);font-size:0.9rem;line-height:1.7}

/* ===== TARIFFS ===== */
.tariffs{padding:140px 0}
.sec-head{text-align:center;margin-bottom:72px}
.sec-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.15);border-radius:100px;padding:6px 18px;font-size:0.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.sec-head h2{font-size:3rem;font-weight:900;letter-spacing:-1.5px;margin-bottom:12px}
.sec-head p{color:var(--text2);font-size:1.05rem}

.tariff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto;align-items:start}
.tariff{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:40px 32px;text-align:center;backdrop-filter:blur(20px);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative}
.tariff:hover{transform:translateY(-12px);box-shadow:0 20px 60px rgba(139,92,246,0.12)}
.tariff.hot{border-color:var(--accent);box-shadow:0 0 60px rgba(139,92,246,0.12);transform:scale(1.06)}
.tariff.hot:hover{transform:scale(1.06) translateY(-12px)}
.tariff-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#8b5cf6,#f72585);color:white;padding:6px 22px;border-radius:100px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;box-shadow:0 4px 20px rgba(139,92,246,0.4)}
.tariff-emoji{font-size:2.8rem;margin-bottom:16px}
.tariff-name{font-size:0.78rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
.tariff-price{font-size:3.2rem;font-weight:900;letter-spacing:-2px;margin-bottom:2px}
.tariff-price .cur{font-size:1rem;font-weight:500;color:var(--text2);letter-spacing:0}
.tariff-per{font-size:0.78rem;color:var(--text3);margin-bottom:24px}
.tariff-line{height:1px;background:var(--border);margin:24px 0}
.tariff-list{list-style:none;text-align:left;margin-bottom:28px}
.tariff-list li{padding:8px 0;font-size:0.88rem;color:var(--text2);display:flex;align-items:center;gap:10px}
.tchk{width:22px;height:22px;border-radius:8px;background:linear-gradient(135deg,rgba(6,214,160,0.2),rgba(6,214,160,0.05));display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--accent2);flex-shrink:0;border:1px solid rgba(6,214,160,0.2)}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 24px}
.login-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:52px;max-width:440px;width:100%;text-align:center;backdrop-filter:blur(30px);box-shadow:0 24px 80px rgba(0,0,0,0.5);animation:fadeInUp 0.6s ease;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3),var(--accent));background-size:300% 100%;animation:gradientSlide 4s linear infinite}
@keyframes gradientSlide{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.login-glyph{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 28px;box-shadow:0 8px 40px rgba(139,92,246,0.3);position:relative}
.login-glyph::after{content:'';position:absolute;inset:-4px;border-radius:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0.3;filter:blur(12px);z-index:-1}
.login-card h1{font-size:1.7rem;font-weight:800;margin-bottom:8px}
.login-sub{color:var(--text2);font-size:0.9rem;margin-bottom:36px}

.btn-tg{background:linear-gradient(135deg,#229ED9,#1a7db8);color:white;width:100%;padding:18px 24px;font-size:1rem;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-weight:600;transition:all 0.4s;border:none;cursor:pointer;font-family:inherit;box-shadow:0 4px 20px rgba(34,158,217,0.3)}
.btn-tg:hover{transform:translateY(-4px);box-shadow:0 8px 40px rgba(34,158,217,0.4)}
.btn-tg:active{transform:translateY(-2px)}

.login-or{display:flex;align-items:center;margin:28px 0;color:var(--text3);font-size:0.78rem;letter-spacing:1px}
.login-or::before,.login-or::after{content:'';flex:1;height:1px;background:var(--border)}
.login-or span{padding:0 16px}

.login-steps{background:rgba(139,92,246,0.04);border:1px solid rgba(139,92,246,0.1);border-radius:16px;padding:24px;text-align:left}
.login-steps ol{padding-left:0;list-style:none;counter-reset:step}
.login-steps li{counter-increment:step;padding:8px 0;color:var(--text2);font-size:0.85rem;display:flex;align-items:center;gap:12px}
.login-steps li::before{content:counter(step);width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;color:white;flex-shrink:0}
.login-footer{margin-top:24px;font-size:0.82rem;color:var(--text3)}

/* ===== DASHBOARD ===== */
.dash{padding:120px 0 60px;min-height:100vh}
.dash-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;gap:20px;flex-wrap:wrap}
.dash-top h1{font-size:1.8rem;font-weight:800}
.dash-top .utag{color:var(--text3);font-size:0.88rem;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;font-size:0.82rem;font-weight:600;backdrop-filter:blur(12px)}
.pill-on{background:rgba(6,214,160,0.1);color:var(--accent2);border:1px solid rgba(6,214,160,0.2)}
.pill-off{background:rgba(247,37,133,0.1);color:var(--accent3);border:1px solid rgba(247,37,133,0.2)}
.pill-dot{width:8px;height:8px;border-radius:50%;animation:logoPulse 2s infinite}
.pill-on .pill-dot{background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
.pill-off .pill-dot{background:var(--accent3);box-shadow:0 0 10px var(--accent3)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.st{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center;backdrop-filter:blur(12px);transition:all 0.3s}
.st:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.st .sv{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.st .sl{font-size:0.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-top:6px}

.dcard{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;margin-bottom:24px;backdrop-filter:blur(20px);transition:all 0.3s}
.dcard:hover{border-color:var(--border-hover)}
.dcard-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dcard-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.dcard-ic.c1{background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(139,92,246,0.05))}
.dcard-ic.c2{background:linear-gradient(135deg,rgba(6,214,160,0.2),rgba(6,214,160,0.05))}
.dcard-h h3{font-size:1rem;font-weight:700}

.copy-row{background:var(--bg-0);border:1px solid var(--border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.copy-row code{font-family:'JetBrains Mono',monospace;font-size:0.76rem;color:var(--accent);word-break:break-all;flex:1;line-height:1.6}
.copy-row.gr code{color:var(--accent2)}
.btn-cp{padding:8px 18px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);color:var(--text1);cursor:pointer;font-size:0.78rem;font-weight:600;transition:all 0.3s;white-space:nowrap;font-family:inherit}
.btn-cp:hover{background:var(--accent);border-color:var(--accent);color:white}
.dnote{font-size:0.78rem;color:var(--text3);margin-top:12px}
.dactions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}

/* ===== GUIDE ===== */
.guide{padding:120px 0 60px;min-height:100vh}
.guide h1{font-size:2.5rem;font-weight:900;text-align:center;margin-bottom:56px;letter-spacing:-1px}
.steps{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.stp{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;display:flex;gap:24px;backdrop-filter:blur(20px);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
.stp:hover{border-color:var(--border-hover);transform:translateX(12px);box-shadow:0 12px 40px rgba(139,92,246,0.1)}
.stp-num{width:48px;height:48px;min-width:48px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;box-shadow:0 4px 20px rgba(139,92,246,0.3)}
.stp-body h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.stp-body p{color:var(--text2);font-size:0.88rem;line-height:1.7}
.stp-body code{background:rgba(139,92,246,0.1);color:var(--accent);padding:2px 10px;border-radius:8px;font-size:0.82rem}
.stp-body a{color:var(--accent);text-decoration:none;font-weight:600}
.stp-body a:hover{text-decoration:underline}
.guide-cta{text-align:center;margin-top:56px}

/* ===== FLASH ===== */
.flash{padding:14px 20px;border-radius:14px;margin-bottom:16px;font-size:0.88rem;font-weight:500;animation:fadeInUp 0.4s ease}
.flash-success{background:rgba(6,214,160,0.1);color:var(--accent2);border:1px solid rgba(6,214,160,0.2)}
.flash-error{background:rgba(247,37,133,0.1);color:var(--accent3);border:1px solid rgba(247,37,133,0.2)}
.flash-info{background:rgba(139,92,246,0.1);color:var(--accent);border:1px solid rgba(139,92,246,0.2)}

/* ===== FOOTER ===== */
.footer{padding:40px 0;border-top:1px solid var(--border);text-align:center;color:var(--text3);font-size:0.82rem;position:relative;z-index:1}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .hero h1{font-size:3rem;letter-spacing:-2px}
    .feat-grid{grid-template-columns:1fr}
    .tariff-grid{grid-template-columns:1fr;max-width:360px}
    .tariff.hot{transform:none}
    .tariff.hot:hover{transform:translateY(-12px)}
    .stats{grid-template-columns:repeat(2,1fr)}
    .dactions{grid-template-columns:1fr}
    .hero-metrics{gap:24px;flex-wrap:wrap}
    .hero-btns{flex-direction:column;align-items:center}
}
@media(max-width:600px){
    .hero h1{font-size:2.2rem;letter-spacing:-1px}
    .sec-head h2{font-size:2rem}
    .stats{grid-template-columns:1fr 1fr}
    .login-card{padding:36px 24px;margin:0 16px}
    .dash-top{flex-direction:column;align-items:stretch;text-align:center}
    .nav-links{gap:10px}
    .feat-card,.stp,.dcard{padding:28px 24px}
}

/* ===== WIREGUARD ===== */
.dcard-ic.wg{background:linear-gradient(135deg,rgba(76,201,240,0.2),rgba(76,201,240,0.05))}
.wg-status{background:var(--bg-1);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.wg-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:0.88rem;color:var(--text2)}
.wg-info strong{color:var(--text1)}
.wg-actions{display:flex;gap:12px}
@media(max-width:600px){.wg-actions{flex-direction:column}}

/* ===== BUY GRID ===== */
.buy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.buy-item{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(6,214,160,0.08));border:1px solid var(--border);border-radius:20px;padding:28px 20px;text-align:center;text-decoration:none;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden;display:block}
.buy-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.3s}
.buy-item:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:0 12px 40px rgba(139,92,246,0.25);text-decoration:none}
.buy-item:hover::before{opacity:1}
.buy-name{font-size:0.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.buy-price{font-size:1.8rem;font-weight:900;letter-spacing:-1px;margin-bottom:6px;background:linear-gradient(135deg,var(--text1),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.buy-days{font-size:0.82rem;color:var(--text3);margin-bottom:16px}
.buy-item .buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-size:0.85rem;font-weight:600;transition:all 0.3s;width:100%}
.buy-item:hover .buy-btn{box-shadow:0 4px 20px rgba(139,92,246,0.4)}
@media(max-width:600px){.buy-grid{grid-template-columns:1fr}}

/* ===== RANK BUY ===== */
.buy-old-price{font-size:0.78rem;color:var(--text3);text-decoration:line-through;margin-bottom:4px}
.buy-discount{font-size:0.7rem;font-weight:700;color:var(--accent2);background:rgba(6,214,160,0.15);padding:3px 10px;border-radius:8px;margin-top:8px;display:inline-block}