/* ===== Xplanet IPTV — Shared Styles ===== */
:root {
  --accent1:#8CC63F; --accent2:#FF8A00; --accent3:#FF3D00;
  --glass:rgba(255,255,255,0.07); --border:rgba(255,255,255,0.12);
  --text:#eaeaf5; --muted:#a8a8c8;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
html { scroll-behavior:smooth; }
::selection { background:rgba(140,198,63,0.45); }
body { background:linear-gradient(135deg,#0a0a0f,#141b10,#1f120a); background-attachment:fixed; color:var(--text); overflow-x:hidden; }
.container { max-width:1150px; margin:auto; padding:0 22px; }
.grad-text { background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== Navbar ===== */
nav { position:sticky; top:0; z-index:50; background:rgba(10,10,15,0.65); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 22px; max-width:1150px; margin:auto; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; letter-spacing:1px; text-decoration:none; color:#fff; }
.logo img { height:46px; width:auto; display:block; }
.nav-links { display:flex; gap:26px; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent1); }
.nav-cta { padding:9px 22px; border-radius:999px; font-size:.88rem; font-weight:600; color:#fff; text-decoration:none; background:linear-gradient(90deg,var(--accent2),var(--accent3)); transition:transform .3s, box-shadow .3s; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(255,138,0,0.5); }

/* ===== Heroes ===== */
.hero { text-align:center; padding:100px 22px 80px; }
.hero h1 { font-size:clamp(2.2rem,5.5vw,3.8rem); font-weight:800; line-height:1.15; }
.hero p.lead { max-width:640px; margin:22px auto 38px; color:var(--muted); font-size:1.08rem; line-height:1.8; }
.badge { display:inline-block; padding:7px 20px; border-radius:999px; background:var(--glass); border:1px solid var(--border); font-size:.8rem; color:var(--accent1); letter-spacing:2px; margin-bottom:26px; }
.page-hero { text-align:center; padding:70px 22px 30px; }
.page-hero h1 { font-size:clamp(2rem,4.5vw,3rem); font-weight:800; }
.page-hero p { color:var(--muted); margin-top:14px; font-size:1.02rem; }

/* ===== Buttons ===== */
.cta-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 34px; border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none; color:#fff; transition:transform .3s, box-shadow .3s; }
.btn:hover { transform:translateY(-3px); }
.btn-tg { background:linear-gradient(90deg,#229ED9,#1c86b8); box-shadow:0 8px 24px rgba(34,158,217,0.4); }
.btn-wa { background:linear-gradient(90deg,#25D366,#1da851); box-shadow:0 8px 24px rgba(37,211,102,0.35); }

/* ===== Stats ===== */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; max-width:900px; margin:70px auto 0; }
.stat { background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:24px 12px; }
.stat .num { font-size:1.7rem; font-weight:800; }
.stat .lbl { font-size:.82rem; color:var(--muted); margin-top:5px; letter-spacing:1px; }

/* ===== Sections & Cards ===== */
section { padding:80px 0; }
.sec-head { text-align:center; margin-bottom:50px; }
.sec-head h2 { font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; }
.sec-head p { color:var(--muted); margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.card { background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:20px; padding:30px 26px; transition:transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform:translateY(-7px); box-shadow:0 18px 40px rgba(0,0,0,0.45); border-color:rgba(140,198,63,0.55); }
.card .ic { font-size:2.2rem; }
.card h3 { margin:14px 0 8px; font-size:1.12rem; }
.card p { color:var(--muted); font-size:.92rem; line-height:1.7; }

/* ===== Pricing ===== */
.price-card { text-align:center; position:relative; }
.price-card .plan { font-size:.85rem; letter-spacing:2px; color:var(--accent1); text-transform:uppercase; }
.price-card .amount { font-size:2.6rem; font-weight:800; margin:14px 0 4px; }
.price-card .per { color:var(--muted); font-size:.85rem; }
.price-card ul { list-style:none; margin:22px 0; text-align:left; }
.price-card li { padding:8px 0; font-size:.9rem; color:#d8d8ec; border-bottom:1px dashed var(--border); }
.price-card li::before { content:"✓ "; color:var(--accent1); font-weight:700; }
.price-card .btn { width:100%; justify-content:center; padding:13px; }
.price-card.featured { border:1px solid rgba(255,138,0,0.65); background:linear-gradient(160deg,rgba(140,198,63,0.13),rgba(255,138,0,0.10)); box-shadow:0 15px 45px rgba(255,138,0,0.28); }
.pop-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--accent2),var(--accent3)); padding:5px 18px; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:1px; }
.vod-note { text-align:center; margin-top:34px; padding:16px 24px; background:rgba(140,198,63,0.08); border:1px dashed rgba(140,198,63,0.4); border-radius:14px; color:var(--muted); font-size:.9rem; }

/* ===== FAQ ===== */
.faq-cat h2 { font-size:1.3rem; margin:36px 0 18px; }
details.faq-item { background:var(--glass); border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; transition:border-color .3s; }
details.faq-item:hover { border-color:rgba(140,198,63,0.45); }
details.faq-item summary { cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; gap:14px; }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:"+"; font-size:1.5rem; color:var(--accent1); transition:transform .3s; flex-shrink:0; }
details.faq-item[open] summary::after { transform:rotate(45deg); }
details.faq-item .faq-body { padding:0 22px 18px; color:var(--muted); line-height:1.85; font-size:.93rem; }

/* ===== Setup Guide ===== */
.guide-card ol { margin:14px 0 0; padding-left:20px; color:var(--muted); font-size:.93rem; line-height:1.95; }
.app-tag { display:inline-block; margin-top:14px; padding:5px 14px; border-radius:999px; background:rgba(140,198,63,0.12); border:1px solid rgba(140,198,63,0.4); color:var(--accent1); font-size:.8rem; font-weight:600; }

/* ===== CTA Banner ===== */
.cta-banner { text-align:center; border-radius:26px; padding:65px 30px; background:linear-gradient(135deg,rgba(140,198,63,0.10),rgba(255,138,0,0.13),rgba(255,61,0,0.09)); border:1px solid var(--border); }
.cta-banner h2 { font-size:clamp(1.6rem,3.5vw,2.3rem); margin-bottom:14px; }
.cta-banner p { color:var(--muted); margin-bottom:32px; }

/* ===== Footer ===== */
footer { border-top:1px solid var(--border); padding:40px 0 30px; text-align:center; color:var(--muted); font-size:.88rem; }
footer .flogo img { height:60px; width:auto; }
footer .flinks { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
footer .flinks a { color:var(--muted); text-decoration:none; transition:color .3s; }
footer .flinks a:hover { color:var(--accent1); }
footer .socials { display:flex; gap:14px; justify-content:center; margin:18px 0; }
footer .socials a { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--glass); border:1px solid var(--border); text-decoration:none; font-size:1.2rem; transition:transform .3s; }
footer .socials a:hover { transform:translateY(-4px); }

/* ===== Animations ===== */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.on { opacity:1; transform:none; }

@media (max-width:768px) {
  .nav-inner { flex-wrap:wrap; justify-content:center; gap:10px; }
}