/* premium.css - premium plans - split from index.html */

        /* ── PREMIUM PAGE ── */
        .premium-hero {
            text-align: center; padding: 70px 0 50px;
        }
        .premium-hero .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.25); border-radius: 30px; padding: 5px 14px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
        .premium-hero h2 { font-size: 50px; font-weight: 800; letter-spacing: -1.5px; background: linear-gradient(135deg, #fff 20%, #FFD700 60%, #ff8c00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .premium-hero p { font-size: 17px; color: var(--muted); margin-top: 14px; }

        .plans-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 24px; max-width: 820px; margin: 0 auto;
            padding-bottom: 80px;
        }
        .plan-card {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 18px; padding: 36px;
            position: relative; overflow: hidden;
            transition: all var(--transition);
        }
        .plan-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(122,0,0,0.15); }
        .plan-card.featured {
            border: 2px solid var(--red);
            background: linear-gradient(180deg, rgba(20,0,0,0.6) 0%, var(--bg2) 100%);
        }
        .plan-card.featured::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, transparent, var(--red), transparent);
        }
        .plan-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--red); color: #000;
            font-size: 11px; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
            margin-bottom: 20px;
        }
        .plan-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
        .plan-price {
            font-family: 'Rajdhani', sans-serif;
            font-size: 52px; font-weight: 700; color: var(--red);
            line-height: 1; margin-bottom: 6px;
        }
        .plan-price span { font-size: 16px; color: var(--muted); font-family: 'Syne', sans-serif; }
        .plan-divider { height: 1px; background: var(--card-border); margin: 24px 0; }
        .plan-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
        .plan-features li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #ccc; }
        .plan-features li i { color: var(--red); font-size: 13px; width: 16px; flex-shrink: 0; }
        .plan-btn {
            width: 100%; padding: 14px; border-radius: 10px;
            font-weight: 700; font-size: 15px; cursor: pointer;
            transition: all var(--transition); font-family: 'Syne', sans-serif;
        }
        .plan-btn.ghost { background: transparent; border: 1.5px solid var(--red-border); color: var(--text); }
        .plan-btn.ghost:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
        .plan-btn.solid { background: var(--red); border: none; color: #000; }
        .plan-btn.solid:hover { background: #8a0000; box-shadow: 0 6px 20px var(--red-glow); }
        /* Premium card adjustments */
        .premium-container { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top: 30px; }
        .premium-card {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 20px; padding: 40px 34px;
            width:100%; max-width: 380px;
            transition: all var(--transition);
            text-align:center; position:relative; overflow:hidden;
        }
        .premium-card:hover { transform: translateY(-10px); border-color: var(--red-border); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 30px var(--red-dim); }
        .premium-card.pro { border: 1px solid var(--red-border); background: linear-gradient(160deg, var(--red-dim) 0%, var(--bg2) 100%); }
        .pro-badge { position:absolute; top:0; right:0; background: var(--red); color: #000; font-family: 'Rajdhani', sans-serif; font-weight: 700; padding: 6px 18px; font-size: 11px; letter-spacing: 1px; border-radius: 0 20px 0 10px; text-transform:uppercase; }
        .premium-card h4 { font-family: 'Rajdhani', sans-serif; font-size: 26px; color: white; margin-bottom: 10px; font-weight: 700; letter-spacing: 2px; }
        .premium-card .price { font-family: 'Rajdhani', sans-serif; font-size: 54px; font-weight: 700; color: white; margin-bottom: 26px; line-height:1; text-shadow: 0 0 20px var(--red-glow); }
        .premium-card .price .amt { color: white; }
        .premium-card .price span { font-family: 'Syne', sans-serif; font-size:13px; color: var(--muted); font-weight:400; }
        .premium-card ul { list-style:none; text-align:left; margin-bottom: 32px; }
        .premium-card ul li { margin-bottom: 14px; font-size:15px; color:#ccc; display:flex; align-items:center; gap:12px; }
        .premium-card ul li i { color: var(--red); font-size:12px; width:14px; }