/* ════════════════════════════════════════════════════════════════
   STRONG 8K IPTV — Complete Design System v2
   my8k.org | strong8k | strong 8k | IPTV | iptv strong 8k
   Font: Noto Kufi Arabic + Cinzel | Theme: Premium Dark Gold
   ════════════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --gold:        #f59e0b;
  --gold-light:  #fcd34d;
  --gold-mid:    #d97706;
  --gold-dark:   #b45309;
  --gold-glow:   rgba(245,158,11,0.35);
  --gold-dim:    rgba(245,158,11,0.12);
  --gold-border: rgba(245,158,11,0.22);
  --bg:          #080808;
  --bg-1:        #0d0d0d;
  --bg-2:        #111111;
  --bg-3:        #161616;
  --bg-card:     rgba(16,16,16,0.92);
  --text-100:    #f5f5f5;
  --text-200:    #d1d5db;
  --text-400:    #9ca3af;
  --text-600:    #6b7280;
  --green:       #10b981;
  --red:         #ef4444;
  --blue:        #60a5fa;
  --purple:      #a78bfa;
  --r-sm:        8px;
  --r:           12px;
  --r-lg:        18px;
  --r-xl:        24px;
  --font:        'Noto Kufi Arabic', sans-serif;
  --font-d:      'Cinzel', 'Noto Kufi Arabic', serif;
  --nav-h:       68px;
  --tr:          0.22s ease;
  --tr-m:        0.35s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-100);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  min-width: 320px;
  cursor: auto;
}
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; height: auto; }
button { cursor: auto; font-family: var(--font); }
ul, ol { list-style: none; }

 }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Forms ──────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--gold-border);
  color: var(--text-100);
  padding: 13px 16px;
  border-radius: var(--r);
  width: 100%; font-size: .9rem;
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  cursor: text;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,158,11,.14);
}
input::placeholder, textarea::placeholder { color: var(--text-600); }
select option { background: var(--bg-2); }
textarea { resize: vertical; min-height: 80px; }

/* ── Typography ─────────────────────────────────────────────── */
.font-display { font-family: var(--font-d); }
.gold-text {
  background: linear-gradient(130deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container    { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem); }
.container-sm { max-width: 760px;  margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem); }
.text-center  { text-align: center; }
.gold-divider, .gold-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,.4), transparent); }
.glass {
  background: var(--bg-card); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border); border-radius: var(--r-lg);
}

/* ── Section Headings ───────────────────────────────────────── */
.section-label { display:block; color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:.35em; text-transform:uppercase; margin-bottom:.75rem; }
.section-title { font-family:var(--font-d); font-size:clamp(1.4rem,3vw,2.2rem); font-weight:700; color:var(--text-100); line-height:1.15; margin-bottom:1rem; }
.section-bar   { width:64px; height:3px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark)); border-radius:2px; margin:1rem auto 0; }
.section-bar.left { margin-left:0; }

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: .9rem;
  padding: 13px 30px; border-radius: var(--r); border: none;
  cursor: auto; text-align: center; white-space: nowrap;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
  -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden;
}
.btn::after {
  content:''; position:absolute; inset:0; background:rgba(255,255,255,.06);
  opacity:0; transition:opacity var(--tr);
}
.btn:hover::after { opacity:1; }
.btn:active { transform: scale(0.97) !important; }
.btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%); color: #050505; }
.btn-gold:hover { background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%); box-shadow:0 0 32px rgba(245,158,11,.5); transform:translateY(-2px); }
.btn-outline { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.btn-outline:hover { background:rgba(245,158,11,.08); box-shadow:0 0 20px rgba(245,158,11,.25); transform:translateY(-2px); }
.btn-ghost   { background:rgba(255,255,255,.05); color:var(--text-200); border:1px solid rgba(255,255,255,.08); }
.btn-ghost:hover { background:rgba(255,255,255,.09); }
.btn-danger  { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.28); }
.btn-danger:hover { background:rgba(239,68,68,.22); }
.btn-success { background:rgba(16,185,129,.12); color:var(--green); border:1px solid rgba(16,185,129,.28); }
.btn-success:hover { background:rgba(16,185,129,.22); }
.btn-sm   { padding:8px 16px; font-size:.78rem; border-radius:var(--r-sm); }
.btn-lg   { padding:16px 44px; font-size:1rem; border-radius:var(--r-lg); }
.btn-full { width:100%; }
.btn-xs-gold    { display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:20px;font-size:.72rem;font-weight:700;background:var(--gold);color:#000;border:none;cursor:auto;white-space:nowrap;transition:all var(--tr);text-decoration:none; }
.btn-xs-outline { display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:20px;font-size:.72rem;font-weight:700;background:transparent;color:var(--gold);border:1px solid var(--gold);cursor:auto;white-space:nowrap;transition:all var(--tr);text-decoration:none; }
.btn-xs-gold:hover    { background:var(--gold-light); transform:translateY(-1px); }
.btn-xs-outline:hover { background:var(--gold-dim); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:.67rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; }
.badge-active   { background:rgba(16,185,129,.12);  color:var(--green);  border-color:rgba(16,185,129,.28); }
.badge-expired  { background:rgba(239,68,68,.12);   color:var(--red);    border-color:rgba(239,68,68,.28); }
.badge-pending  { background:rgba(245,158,11,.12);  color:var(--gold);   border-color:rgba(245,158,11,.28); }
.badge-none     { background:rgba(107,114,128,.1);  color:var(--text-600);border-color:rgba(107,114,128,.25); }
.badge-admin    { background:rgba(167,139,250,.12); color:var(--purple); border-color:rgba(167,139,250,.28); }
.badge-reseller { background:rgba(96,165,250,.12);  color:var(--blue);   border-color:rgba(96,165,250,.28); }
.badge-popular  { background:rgba(245,158,11,.18);  color:var(--gold-light); border-color:rgba(245,158,11,.4); }
.badge-inactive { background:rgba(107,114,128,.1);  color:var(--text-600); border-color:rgba(107,114,128,.2); }
.badge-gold     { background:rgba(245,158,11,.14);  color:var(--gold-light); border-color:rgba(245,158,11,.35); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:var(--r); font-size:.875rem; margin-bottom:1.2rem; line-height:1.5; }
.alert-error   { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.3);   color:#fca5a5; }
.alert-success { background:rgba(16,185,129,.1);  border:1px solid rgba(16,185,129,.3);  color:#6ee7b7; }
.alert-info    { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.25); color:var(--gold-light); }
.alert-icon    { font-size:1rem; flex-shrink:0; margin-top:1px; }

/* ════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ════════════════════════════════════════════════════════════════ */
.ann-bar {
  background: linear-gradient(135deg,var(--gold-dark),var(--gold-mid),var(--gold-dark));
  color:#000; font-size:.78rem; font-weight:700;
  padding:9px 1rem; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
  position:relative; z-index:600;
}
.ann-icon  { font-size:.9rem; }
.ann-close { background:none; border:none; font-size:1rem; cursor:pointer; color:rgba(0,0,0,.6); padding:0 4px; margin-inline-start:auto; }
.ann-close:hover { color:#000; }

/* ════════════════════════════════════════════════════════════════
   SITE NOTIFICATION BANNERS (dismissible)
   ════════════════════════════════════════════════════════════════ */
.site-notifs { padding: 0; }
.site-notif {
  display: flex; align-items: center; gap: 12px;
  padding: 12px clamp(1rem,4vw,2rem);
  background: linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.04));
  border-bottom: 1px solid rgba(245,158,11,.18);
  font-size: .85rem; color: var(--text-200);
  animation: fadeUp .5s ease;
  max-height: 80px; overflow: hidden;
}
.site-notif .sn-icon  { font-size: 1.1rem; flex-shrink: 0; }
.site-notif .sn-text  { flex: 1; }
.site-notif .sn-close { background:none; border:none; color:var(--text-600); font-size:1rem; cursor:pointer; padding:4px 8px; transition:color var(--tr); flex-shrink:0; }
.site-notif .sn-close:hover { color:var(--text-200); }
.site-notif.sn-info   { border-color:rgba(96,165,250,.2);  background:linear-gradient(135deg,rgba(96,165,250,.06),rgba(96,165,250,.02)); }
.site-notif.sn-warn   { border-color:rgba(245,158,11,.25); }
.site-notif.sn-success{ border-color:rgba(16,185,129,.2);  background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(16,185,129,.02)); }

/* ════════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════════ */
.navbar { position:fixed; top:0; left:0; right:0; z-index:500; transition:background .4s ease, box-shadow .4s ease; }
.navbar.scrolled { background:rgba(5,5,5,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 4px 30px rgba(0,0,0,.75); }
.nav-top-line { height:1.5px; background:linear-gradient(90deg,transparent,rgba(245,158,11,.7),transparent); }
.nav-wrap { max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:1rem; }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:11px; flex-shrink:0; text-decoration:none; cursor:auto; }
.nav-logo-img-wrap { width:44px; height:44px; border-radius:10px; overflow:hidden; border:1.5px solid rgba(245,158,11,.45); box-shadow:0 0 14px rgba(245,158,11,.4); flex-shrink:0; background:#1a1100; transition:box-shadow var(--tr), transform var(--tr); }
.nav-logo:hover .nav-logo-img-wrap { box-shadow:0 0 28px rgba(245,158,11,.7); transform:scale(1.05); }
.nav-logo-img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.1; }
.nav-logo-name { font-family:var(--font-d); font-size:1.15rem; font-weight:700; color:#fff; letter-spacing:.05em; }
.nav-logo-sub  { font-size:.5rem; color:var(--text-600); letter-spacing:.2em; text-transform:uppercase; }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:2rem; flex:1; justify-content:center; }
.nav-link { font-size:.875rem; font-weight:500; color:var(--text-400); letter-spacing:.02em; transition:color var(--tr); position:relative; padding-bottom:2px; white-space:nowrap; cursor:auto; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--gold); transition:width var(--tr-m); }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Nav right */
.nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang-btn { background:transparent; border:1px solid rgba(245,158,11,.3); color:var(--gold); font-family:var(--font); font-size:.72rem; font-weight:700; padding:6px 13px; border-radius:20px; cursor:auto; white-space:nowrap; transition:all var(--tr); }
.lang-btn:hover { border-color:var(--gold); background:var(--gold-dim); }
.nav-user { display:flex; align-items:center; gap:8px; color:var(--text-400); font-size:.875rem; transition:color var(--tr); max-width:150px; text-decoration:none; cursor:auto; }
.nav-user:hover { color:var(--text-100); }
.nav-av { width:30px; height:30px; border-radius:50%; flex-shrink:0; background:rgba(245,158,11,.18); border:1.5px solid rgba(245,158,11,.4); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.72rem; font-weight:700; }
.nav-uname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; -webkit-tap-highlight-color:transparent; flex-shrink:0; cursor:pointer; }
.hamburger span { display:block; width:23px; height:2px; background:var(--gold); border-radius:2px; transition:all .3s ease; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-nav { display:none; flex-direction:column; background:rgba(5,5,5,.99); border-top:1px solid rgba(245,158,11,.15); padding:.75rem clamp(1rem,4vw,1.5rem) 1.25rem; gap:2px; max-height:calc(100vh - var(--nav-h)); overflow-y:auto; }
.mobile-nav.open { display:flex; }
.m-link { display:block; padding:11px 4px; color:var(--text-400); font-size:.925rem; font-weight:500; transition:color var(--tr); background:none; border:none; width:100%; text-align:start; cursor:pointer; text-decoration:none; }
.m-link:hover { color:var(--gold); }
.m-hr { border:none; border-top:1px solid rgba(245,158,11,.1); margin:6px 0; }
.m-actions { display:flex; flex-direction:column; gap:8px; padding-top:6px; }

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.5) saturate(1.25) contrast(1.05); display:block; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.75) 100%); }
.hero-sides   { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.45) 100%); }
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.hero-particle  { position:absolute; border-radius:50%; background:var(--gold); opacity:.28; animation:floatUp linear infinite; }
.hero-body {
  position:relative; z-index:10; text-align:center; width:100%;
  max-width:960px; padding:calc(var(--nav-h) + 2rem) clamp(1rem,5vw,2rem) 3rem; margin:0 auto;
}

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; padding:8px 20px; border-radius:50px;
  border:1px solid rgba(245,158,11,.4); background:rgba(0,0,0,.55); backdrop-filter:blur(12px);
  color:var(--gold-light); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.75rem; animation:fadeUp .8s ease forwards;
}
.badge-pulse { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }

/* Title */
.hero-title { font-family:var(--font-d); font-size:clamp(1.8rem,5vw,4rem); font-weight:900; line-height:1.06; margin-bottom:1.2rem; animation:fadeUp .8s .2s ease both; }
.hero-title .line2 { display:block; color:#fff; }
.hero-sub { color:rgba(255,255,255,.78); font-size:clamp(.95rem,2.2vw,1.2rem); max-width:580px; margin:0 auto 2.5rem; line-height:1.75; animation:fadeUp .8s .35s ease both; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; animation:fadeUp .8s .5s ease both; }
.hero-cta .btn-gold   { box-shadow:0 0 32px rgba(245,158,11,.4); }
.hero-cta .btn-outline { backdrop-filter:blur(8px); background:rgba(0,0,0,.2); }

/* Stats */
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.5rem,2vw,1rem); max-width:600px; margin:0 auto; animation:fadeUp .8s .65s ease both; }
.hero-stat  { background:rgba(0,0,0,.45); backdrop-filter:blur(8px); border:1px solid rgba(245,158,11,.18); border-radius:14px; padding:clamp(.8rem,2vw,1.1rem) .5rem; text-align:center; transition:border-color var(--tr),transform var(--tr); }
/* hover removed */
.hero-stat-val { font-family:"Arial","Helvetica",sans-serif; font-size:clamp(1.3rem,3vw,1.8rem); font-weight:900; line-height:1; background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-mid)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-stat-lbl { font-size:clamp(.55rem,.9vw,.65rem); color:var(--text-600); text-transform:uppercase; letter-spacing:.08em; margin-top:5px; }

/* Scroll indicator */
.hero-scroll { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-600); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; animation:bounce 2s infinite; z-index:10; }
.scroll-track { width:20px; height:32px; border:1.5px solid rgba(245,158,11,.3); border-radius:10px; display:flex; justify-content:center; padding-top:5px; }
.scroll-dot   { width:4px; height:8px; background:var(--gold); border-radius:2px; animation:scrollAnim 1.5s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════
   FEATURES — SVG Icons (no emoji)
   ════════════════════════════════════════════════════════════════ */
.features-section { padding:clamp(2.5rem,5vw,4rem) 0; background:#080808; position:relative; overflow:hidden; }
.features-glow { position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(900px,100%); height:400px; background:rgba(245,158,11,.04); filter:blur(100px); border-radius:50%; pointer-events:none; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.feat-card { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); padding:.7rem .9rem; cursor:auto; }
/* hover removed */
.feat-icon { width:28px; height:28px; border-radius:7px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.18); display:flex; align-items:center; justify-content:center; margin-bottom:.85rem; transition:transform .3s,background .3s; }
.feat-icon svg { width:20px; height:20px; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* hover removed */
.feat-title { font-family:var(--font-d); font-size:.78rem; font-weight:700; color:var(--text-100); margin-bottom:.6rem; transition:color var(--tr); }
/* hover removed */
.feat-desc  { font-size:.72rem; color:var(--text-600); line-height:1.72; }
.feat-line  { height:1px; background:linear-gradient(90deg,transparent,rgba(245,158,11,.3),transparent); margin-top:1.5rem; transform:scaleX(0); transition:transform .5s ease; }
/* hover removed */
.devices-row  { margin-top:3rem; text-align:center; }
.devices-lbl  { color:var(--text-600); font-size:.68rem; text-transform:uppercase; letter-spacing:.3em; margin-bottom:1rem; }
.devices-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.device-tag   { padding:5px 15px; border-radius:20px; border:1px solid rgba(245,158,11,.14); color:var(--text-600); font-size:.75rem; transition:all var(--tr); cursor:auto; }
/* hover removed */

/* ════════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════════ */
.pricing-section { padding:clamp(2.5rem,5vw,4rem) 0; background:var(--bg); position:relative; overflow:hidden; }
.pricing-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1000px,100%); height:500px; background:rgba(245,158,11,.03); filter:blur(130px); border-radius:50%; pointer-events:none; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr)); justify-content:center; gap:1.4rem; margin-top:3rem; align-items:stretch; }
.plan-card { border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; position:relative; }
/* hover removed */
.plan-regular { border:1px solid rgba(245,158,11,.14); background:rgba(17,17,17,.92); }
/* hover removed */
.plan-popular { border:2px solid rgba(245,158,11,.58); background:linear-gradient(170deg,#1a1500,#111); box-shadow:0 0 50px rgba(245,158,11,.17); }
.plan-top-bar { height:3px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark)); }
.plan-pop-badge { position:absolute; top:1rem; right:1rem; padding:4px 12px; border-radius:20px; background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.38); color:var(--gold-light); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.plan-head { padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2rem) 1.2rem; }
.plan-dur  { font-size:.68rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.2em; margin-bottom:6px; }
.plan-popular .plan-dur { color:var(--gold); }
.plan-name { font-family:var(--font-d); font-size:1.1rem; font-weight:700; color:var(--text-100); margin-bottom:1rem; }
.plan-price { display:flex; align-items:flex-end; gap:2px; flex-wrap:wrap; }
.plan-currency { font-size:1.1rem; font-weight:700; color:var(--gold); line-height:1; padding-bottom:.45rem; }
.plan-amount { font-family:var(--font-d); font-size:clamp(2.4rem,5vw,3rem); font-weight:900; line-height:1; background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-mid)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.plan-period { font-size:.85rem; color:var(--text-600); padding-bottom:.4rem; }
.plan-note   { font-size:.7rem; color:var(--text-600); margin-top:4px; }
.plan-tag    { display:inline-flex; align-items:center; gap:5px; margin-top:.9rem; padding:5px 12px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:.72rem; color:var(--text-600); }
.plan-div    { height:1px; background:linear-gradient(90deg,transparent,rgba(245,158,11,.18),transparent); margin:0 clamp(1.5rem,3vw,2rem); }
.plan-features { padding:1.4rem clamp(1.5rem,3vw,2rem); flex:1; }
.plan-features li { display:flex; align-items:flex-start; gap:9px; font-size:.875rem; color:var(--text-400); margin-bottom:9px; }
.plan-check { color:var(--gold); font-weight:700; flex-shrink:0; }
.plan-cta { padding:0 clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2rem); }
.plan-popular .plan-cta .btn-gold { box-shadow:0 0 25px rgba(245,158,11,.3); }
.plan-popular .plan-cta .btn-gold:hover { box-shadow:0 0 42px rgba(245,158,11,.55); }

/* ════════════════════════════════════════════════════════════════
   WHY US / STATS
   ════════════════════════════════════════════════════════════════ */
.why-section { padding:clamp(1.5rem,3vw,2.5rem) 0; position:relative; overflow:hidden; }
.why-bg  { position:absolute; inset:0; background:linear-gradient(180deg,#080808 0%,rgba(10,8,0,.97) 50%,#080808 100%); }
.why-dots { position:absolute; inset:0; pointer-events:none; opacity:.025; background-image:radial-gradient(circle,rgba(245,158,11,1) 1px,transparent 1px); background-size:38px 38px; }
.why-content { position:relative; z-index:1; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,2vw,1.2rem); margin:2rem 0; }
.stat-card { text-align:center; padding:clamp(1rem,2vw,1.5rem) 1rem; border-radius:20px; background:linear-gradient(170deg,rgba(245,158,11,.08) 0%,transparent 100%); border:1px solid rgba(245,158,11,.18); transition:border-color .3s,transform .3s; cursor:auto; }
/* hover removed */
.stat-icon { font-size:1rem; width:40px; height:40px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.15); border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; }
.stat-val  { font-family:"Arial","Helvetica",sans-serif; font-size:clamp(1.7rem,3.5vw,2.2rem); font-weight:900; background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-mid)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-lbl  { font-size:.82rem; color:var(--text-600); margin-top:4px; }
.reasons-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,2vw,1rem); margin-top:2rem; margin-bottom:2rem; }
.reason-card { text-align:center; padding:clamp(.85rem,2vw,1.1rem); background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); transition:border-color .3s,transform .3s; }
/* hover removed */
.reason-icon  { font-size:1.1rem; width:44px; height:44px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.18); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; }
.reason-title { font-weight:700; font-size:.92rem; color:var(--text-100); margin-bottom:.45rem; }
.reason-desc  { font-size:.78rem; color:var(--text-600); line-height:1.65; }
.cta-banner { position:relative; border-radius:22px; padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,4vw,2rem); text-align:center; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(100,65,0,.38),rgba(80,50,0,.2)); }
.cta-banner::after  { content:''; position:absolute; inset:0; border:1px solid rgba(245,158,11,.24); border-radius:22px; pointer-events:none; }
.cta-inner { position:relative; z-index:1; }
.cta-banner h3 { font-family:var(--font-d); font-size:clamp(1.1rem,2vw,1.4rem); color:#fff; margin-bottom:.7rem; }
.cta-banner p  { color:var(--text-400); margin-bottom:1.5rem; max-width:480px; margin-left:auto; margin-right:auto; }

/* ════════════════════════════════════════════════════════════════
   CONTENT STATS ROW
   ════════════════════════════════════════════════════════════════ */
.content-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; padding:clamp(3rem,6vw,4.5rem) 0; }
.cs-card { text-align:center; padding:1.4rem 1rem; border-radius:20px; background:linear-gradient(170deg,rgba(245,158,11,.06),transparent); border:1px solid rgba(245,158,11,.14); transition:all .3s; }
/* hover removed */
.cs-num { font-family:var(--font-d); font-size:clamp(1.8rem,4vw,2.4rem); font-weight:900; background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cs-label { font-size:.85rem; color:var(--text-600); margin-top:.4rem; text-transform:uppercase; letter-spacing:.1em; }

/* ════════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════════ */
.faq-section { padding:clamp(2.5rem,5vw,4rem) 0; background:#0a0a0a; position:relative; overflow:hidden; }
.faq-glow    { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(700px,100%); height:300px; background:rgba(245,158,11,.04); filter:blur(100px); border-radius:50%; pointer-events:none; }
.faq-list { margin-top:2.8rem; display:flex; flex-direction:column; gap:.7rem; }
.faq-item { border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); overflow:hidden; background:rgba(15,15,15,.7); transition:border-color var(--tr),background var(--tr); }
.faq-item.open { border-color:rgba(245,158,11,.38); background:rgba(245,158,11,.04); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:1.15rem 1.4rem; cursor:auto; background:none; border:none; width:100%; text-align:start; gap:1rem; }
.faq-q-txt { font-weight:600; font-size:.9rem; color:var(--text-400); transition:color var(--tr); font-family:var(--font); }
.faq-item.open .faq-q-txt { color:var(--gold-light); }
.faq-arrow { width:27px; height:27px; border-radius:50%; border:1px solid var(--text-600); display:flex; align-items:center; justify-content:center; color:var(--text-600); flex-shrink:0; transition:all .3s; font-size:.8rem; }
.faq-item.open .faq-arrow { border-color:var(--gold); color:var(--gold); transform:rotate(180deg); background:rgba(245,158,11,.1); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .3s ease; padding:0 1.4rem; }
.faq-item.open .faq-a { max-height:200px; padding:0 1.4rem 1.15rem; }
.faq-a-txt { font-size:.875rem; color:var(--text-600); line-height:1.72; border-top:1px solid rgba(245,158,11,.1); padding-top:.9rem; }
.faq-support { margin-top:2rem; text-align:center; padding:1.4rem; border-radius:var(--r-lg); border:1px solid rgba(245,158,11,.14); background:rgba(245,158,11,.04); }
.faq-support p { color:var(--text-600); font-size:.875rem; margin-bottom:.6rem; }
.faq-support a { color:var(--gold); font-weight:600; font-size:.875rem; transition:color var(--tr); }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.footer { background:#000; border-top:1px solid rgba(245,158,11,.1); }
.footer-inner { max-width:1200px; margin:0 auto; padding:clamp(3rem,6vw,4rem) clamp(1rem,4vw,2rem) 1.8rem; }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
.footer-col {}
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.footer-logo-img { width:36px; height:36px; border-radius:9px; object-fit:contain; object-position:center; border:1px solid rgba(245,158,11,.3); background:rgba(10,8,0,.5); }
.footer-brand-text { font-family:var(--font-d); font-size:1.1rem; font-weight:700; }
.footer-desc { color:var(--text-600); font-size:.84rem; line-height:1.7; max-width:260px; }
.footer-socials { display:flex; gap:8px; margin-top:1.2rem; flex-wrap:wrap; }
.social-dot { width:34px; height:34px; border-radius:50%; border:1px solid rgba(245,158,11,.2); display:flex; align-items:center; justify-content:center; color:rgba(245,158,11,.5); font-size:.65rem; cursor:auto; transition:all var(--tr); }
/* hover removed */
.social-dot svg { width:14px; height:14px; fill:currentColor; }
.footer-head { color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase; margin-bottom:1rem; }
.footer-links { display:flex; flex-direction:column; gap:8px; list-style:none; }
.footer-links a { color:var(--text-600); font-size:.84rem; transition:color var(--tr); display:flex; align-items:center; gap:6px; }
.footer-links a:hover { color:var(--gold); padding-inline-start:4px; }
.footer-contact { display:flex; flex-direction:column; gap:10px; list-style:none; }
.footer-contact li { display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-600); }
.footer-contact a { transition:color var(--tr); }
.footer-contact a:hover { color:var(--gold); }
.footer-pay { display:flex; gap:8px; flex-wrap:wrap; margin-top:1rem; }
.pay-badge { padding:4px 10px; border-radius:6px; border:1px solid rgba(245,158,11,.2); background:rgba(245,158,11,.05); font-size:.65rem; font-weight:700; color:var(--text-600); letter-spacing:.05em; display:flex; align-items:center; gap:4px; transition:all var(--tr); }
.pay-badge:hover { border-color:rgba(245,158,11,.4); color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; }
.footer-bottom p { color:var(--text-600); font-size:.76rem; }
.footer-legal { display:flex; gap:1.2rem; }
.footer-legal span { color:var(--text-600); font-size:.72rem; cursor:auto; transition:color var(--tr); }
.footer-legal span:hover { color:var(--text-400); }

/* WhatsApp floating button */
.wa-float {
  position:fixed; bottom:2rem; right:2rem; z-index:400;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .3s,box-shadow .3s; cursor:auto;
  text-decoration:none;
}
.wa-float:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 8px 30px rgba(37,211,102,.6); }
.wa-float svg { width:28px; height:28px; fill:#fff; }

/* ════════════════════════════════════════════════════════════════
   AUTH PAGES
   ════════════════════════════════════════════════════════════════ */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:1rem; }
.auth-bg   { position:absolute; inset:0; }
.auth-bg img { width:100%; height:100%; object-fit:cover; object-position:center; filter:blur(10px) brightness(.28) saturate(1.2); }
.auth-overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); }
.auth-glow    { position:absolute; top:30%; right:25%; width:450px; height:400px; background:rgba(245,158,11,.07); filter:blur(100px); border-radius:50%; pointer-events:none; }
.auth-wrap { position:relative; z-index:10; width:100%; max-width:430px; }
.auth-logo-area { text-align:center; margin-bottom:1.8rem; }
.auth-logo-img { width:78px; height:78px; border-radius:17px; object-fit:contain; object-position:center; border:2px solid rgba(245,158,11,.45); box-shadow:0 0 0 5px rgba(245,158,11,.06),0 0 35px rgba(245,158,11,.5); margin:0 auto .75rem; display:block; background:rgba(10,8,0,.5); }
.auth-logo-txt { font-family:var(--font-d); font-size:1.35rem; font-weight:700; }
.auth-card { background:rgba(18,18,18,.92); backdrop-filter:blur(22px); border:1px solid rgba(245,158,11,.15); border-radius:22px; padding:clamp(1.8rem,4vw,2.5rem); box-shadow:0 20px 60px rgba(0,0,0,.65); }
.auth-title    { font-family:var(--font-d); font-size:1.45rem; font-weight:700; color:#fff; text-align:center; margin-bottom:3px; }
.auth-subtitle { color:var(--text-600); font-size:.85rem; text-align:center; margin-bottom:1.8rem; }
.form-row { margin-bottom:1.15rem; }
.form-lbl { display:block; color:var(--text-400); font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-inline-end:3rem; }
.pw-eye { position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-600); cursor:pointer; padding:4px; transition:color var(--tr); font-size:1rem; }
.pw-eye:hover { color:var(--gold); }
.auth-foot { text-align:center; margin-top:1.4rem; font-size:.875rem; color:var(--text-600); }
.auth-foot a { color:var(--gold); font-weight:600; transition:color var(--tr); }
.back-site { text-align:center; margin-top:1rem; }
.back-site a { color:var(--text-600); font-size:.76rem; transition:color var(--tr); }

/* ════════════════════════════════════════════════════════════════
   USER DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.dash-page { min-height:100vh; background:var(--bg); padding-top:calc(var(--nav-h) + 1.1rem); padding-bottom:4rem; }
.dash-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.dash-identity { display:flex; align-items:center; gap:1rem; }
.dash-avatar { width:58px; height:58px; border-radius:15px; background:rgba(245,158,11,.12); border:2px solid rgba(245,158,11,.28); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:1.3rem; font-weight:900; color:var(--gold); flex-shrink:0; }
.dash-greeting { color:var(--text-600); font-size:.82rem; }
.dash-name     { font-size:1.6rem; font-weight:700; color:#fff; line-height:1.2; }
.dash-email    { color:var(--text-600); font-size:.82rem; }
.mini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.8rem; }
.mini-card  { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); padding:1.4rem; display:flex; align-items:center; gap:1rem; }
.mini-icon  { width:46px; height:46px; border-radius:12px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.18); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.mini-lbl  { font-size:.68rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.08em; }
.mini-val  { font-size:1rem; font-weight:700; color:#fff; }
.mini-sub  { font-size:.68rem; color:var(--text-600); }
.sub-box { border-radius:var(--r-lg); border:1px solid rgba(245,158,11,.28); background:linear-gradient(135deg,rgba(100,65,0,.16),rgba(80,50,0,.08)); padding:1.8rem; margin-bottom:1.8rem; text-align:center; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.8rem; }
.quick-card { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); padding:.9rem .5rem; text-align:center; cursor:auto; transition:all var(--tr); display:flex; flex-direction:column; align-items:center; gap:5px; }
.quick-card:hover { border-color:rgba(245,158,11,.32); transform:translateY(-2px); }
.quick-card .q-icon { font-size:1.35rem; }
.quick-card .q-lbl  { font-size:.7rem; color:var(--text-600); font-weight:500; }
.data-card { background:rgba(13,13,13,.95); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); overflow:hidden; }
.data-head { padding:.9rem 1.4rem; border-bottom:1px solid rgba(245,158,11,.08); display:flex; align-items:center; justify-content:space-between; }
.data-head-title { font-weight:600; font-size:.88rem; color:#fff; }
.data-empty { padding:3rem 1.5rem; text-align:center; color:var(--text-600); }
.data-empty-icon { font-size:2.4rem; margin-bottom:.6rem; }
.data-empty-txt  { font-size:.875rem; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:480px; }
.data-table th { background:rgba(245,158,11,.07); color:var(--gold); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:12px 14px; text-align:start; white-space:nowrap; }
.data-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-400); font-size:.84rem; vertical-align:middle; }
.data-table tr:hover td { background:rgba(245,158,11,.03); }
.td-c { text-align:center; }
.user-row { display:flex; align-items:center; gap:9px; }
.user-av  { width:30px; height:30px; border-radius:50%; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.25); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.72rem; font-weight:700; flex-shrink:0; }
.user-name-cell { font-weight:500; color:#fff; font-size:.84rem; }
.pagination { display:flex; align-items:center; justify-content:center; gap:.7rem; margin-top:1.3rem; }
.pg-btn { padding:7px 16px; border-radius:8px; border:1px solid rgba(245,158,11,.18); background:none; color:var(--text-400); font-size:.84rem; cursor:auto; transition:all var(--tr); font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; }
.pg-btn:hover { border-color:rgba(245,158,11,.38); color:var(--gold); }
.pg-info { color:var(--text-600); font-size:.82rem; }

/* ════════════════════════════════════════════════════════════════
   ADMIN LAYOUT
   ════════════════════════════════════════════════════════════════ */
.admin-shell  { display:flex; min-height:100vh; width:100%; background:#080808; }
.admin-sidebar{ width:240px; flex-shrink:0; background:var(--bg-1); border-inline-end:1px solid rgba(245,158,11,.1); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:100; overflow-y:auto; transition:transform .3s; }
.asb-logo     { padding:1.1rem 1.3rem; border-bottom:1px solid rgba(245,158,11,.1); display:flex; align-items:center; gap:10px; flex-shrink:0; }
.asb-logo-img { width:34px; height:34px; border-radius:8px; object-fit:contain; border:1px solid rgba(245,158,11,.3); background:rgba(10,8,0,.5); }
.asb-brand    { font-family:var(--font-d); font-size:.82rem; font-weight:700; }
.asb-brand-sub{ font-size:.58rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.1em; margin-top:1px; }
.asb-nav      { padding:.75rem .6rem; flex:1; display:flex; flex-direction:column; gap:2px; }
.asb-link     { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; font-size:.85rem; font-weight:500; color:var(--text-600); transition:all var(--tr); text-decoration:none; }
.asb-link:hover { color:var(--text-200); background:rgba(255,255,255,.04); }
.asb-link.active{ background:rgba(245,158,11,.1); color:var(--gold); border:1px solid rgba(245,158,11,.2); }
.asb-icon     { font-size:.95rem; flex-shrink:0; width:20px; }
.asb-foot     { padding:.9rem; border-top:1px solid rgba(245,158,11,.1); flex-shrink:0; }
.asb-user     { display:flex; align-items:center; gap:9px; padding:7px 9px; margin-bottom:7px; }
.asb-av       { width:30px; height:30px; border-radius:50%; background:rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.3); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.75rem; font-weight:700; flex-shrink:0; }
.asb-uname    { font-size:.78rem; color:var(--text-200); font-weight:500; }
.asb-urole    { font-size:.58rem; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-top:1px; }
.asb-actions  { display:flex; gap:5px; }
.asb-act-link { flex:1; text-align:center; font-size:.7rem; padding:6px 8px; border-radius:7px; color:var(--text-600); transition:all var(--tr); text-decoration:none; }
.asb-act-link:hover { background:rgba(255,255,255,.06); color:var(--text-400); }
.asb-act-link.logout:hover { background:rgba(239,68,68,.07); color:var(--red); }
.admin-main   { margin-left:240px; flex:1; display:flex; flex-direction:column; min-width:0; width:calc(100% - 240px); transition:margin .3s; }
.admin-topbar { height:58px; background:var(--bg-1); border-bottom:1px solid rgba(245,158,11,.1); display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; position:sticky; top:0; z-index:50; flex-shrink:0; }
.atb-left     { display:flex; align-items:center; gap:.75rem; }
.atb-title    { font-size:.92rem; font-weight:600; color:#fff; }
.atb-hamburger{ display:none; background:none; border:none; color:var(--gold); font-size:1.2rem; cursor:pointer; }
.atb-date     { font-size:.72rem; color:var(--text-600); white-space:nowrap; }
.admin-content{ padding:1.4rem; flex:1; overflow:auto; }
.adm-stats    { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1.2rem; }
.adm-stat-card{ border-radius:14px; border:1px solid; padding:.9rem; transition:transform var(--tr); display:block; text-decoration:none; }
/* hover removed */
.adm-gold  { border-color:rgba(245,158,11,.25); background:linear-gradient(170deg,rgba(245,158,11,.12),rgba(245,158,11,.04)); }
.adm-blue  { border-color:rgba(96,165,250,.22);  background:linear-gradient(170deg,rgba(96,165,250,.1),rgba(96,165,250,.03)); }
.adm-green { border-color:rgba(52,211,153,.22);  background:linear-gradient(170deg,rgba(52,211,153,.1),rgba(52,211,153,.03)); }
.adm-purple{ border-color:rgba(167,139,250,.22); background:linear-gradient(170deg,rgba(167,139,250,.1),rgba(167,139,250,.03)); }
.adm-red   { border-color:rgba(239,68,68,.22);   background:linear-gradient(170deg,rgba(239,68,68,.1),rgba(239,68,68,.03)); }
.adm-orange{ border-color:rgba(251,146,60,.22);  background:linear-gradient(170deg,rgba(251,146,60,.1),rgba(251,146,60,.03)); }
.asc-top   { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.asc-lbl   { font-size:.67rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.1em; font-weight:500; }
.asc-icon  { font-size:1.25rem; }
.asc-val   { font-family:var(--font-d); font-size:1.9rem; font-weight:900; color:#fff; }
.adm-quick { display:grid; grid-template-columns:repeat(6,1fr); gap:.7rem; margin-bottom:1.5rem; }
.adm-qa    { display:flex; flex-direction:column; align-items:center; gap:6px; padding:1rem .5rem; background:var(--bg-2); border:1px solid rgba(245,158,11,.1); border-radius:13px; transition:all var(--tr); text-decoration:none; }
.adm-qa:hover { border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.05); }
.adm-qa-icon{ font-size:1.35rem; }
.adm-qa-lbl { font-size:.65rem; color:var(--text-600); font-weight:500; text-align:center; }
.adm-qa:hover .adm-qa-lbl { color:var(--gold); }
.panel { background:rgba(13,13,13,.95); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.2rem; }
.panel-head { padding:.9rem 1.3rem; border-bottom:1px solid rgba(245,158,11,.08); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.panel-title{ font-weight:600; font-size:.88rem; color:#fff; }
.toolbar    { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem; }
.tb-search  { position:relative; flex:1; min-width:180px; max-width:320px; }
.tb-ico     { position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); color:var(--text-600); font-size:.85rem; pointer-events:none; }
.tb-search input { padding-inline-start:33px; }
.tb-tabs    { display:flex; border-radius:9px; overflow:hidden; border:1px solid rgba(245,158,11,.14); }
.tb-tab     { padding:8px 18px; font-size:.84rem; font-weight:500; background:none; border:none; color:var(--text-600); cursor:auto; transition:all var(--tr); font-family:var(--font); white-space:nowrap; }
.tb-tab.on  { background:rgba(245,158,11,.14); color:var(--gold); }
.tb-tab:hover:not(.on) { color:var(--text-200); }
.tb-sel     { width:auto; min-width:120px; padding:9px 12px; font-size:.84rem; }
.tb-count   { color:var(--text-600); font-size:.76rem; white-space:nowrap; }
.plan-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.plan-adm   { background:var(--bg-2); border:1px solid rgba(245,158,11,.12); border-radius:15px; padding:1.4rem; position:relative; }
.plan-adm.pop{ border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.04); }
.padm-meta  { font-size:.67rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.padm-name  { font-weight:700; font-size:1rem; color:#fff; margin-bottom:.9rem; }
.padm-prices{ display:flex; gap:1.2rem; margin-bottom:.8rem; }
.padm-pi span:first-child { display:block; font-size:.58rem; color:var(--text-600); text-transform:uppercase; margin-bottom:2px; }
.padm-pi span:last-child  { font-family:var(--font-d); font-size:1.35rem; font-weight:900; }
.padm-retail span:last-child  { color:var(--gold); }
.padm-res   span:last-child   { color:var(--blue); }
.padm-info  { font-size:.72rem; color:var(--text-600); margin-bottom:1rem; }
.padm-acts  { display:flex; gap:.5rem; flex-wrap:wrap; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.sfield     { display:flex; flex-direction:column; gap:5px; }
.sfield label { font-size:.67rem; color:var(--text-600); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.sfield-full{ grid-column:1/-1; }
.settings-section { background:rgba(245,158,11,.04); border:1px solid rgba(245,158,11,.12); border-radius:var(--r-lg); padding:1.4rem; margin-bottom:1.2rem; }
.settings-section-title { font-weight:700; font-size:.85rem; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:6px; }
.toggle-wrap { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; background:rgba(255,255,255,.03); border:1px solid rgba(245,158,11,.1); border-radius:9px; }
.toggle-info p    { font-size:.84rem; font-weight:500; color:var(--text-100); }
.toggle-info span { font-size:.72rem; color:var(--text-600); }
.toggle-sw  { position:relative; width:42px; height:22px; flex-shrink:0; }
.toggle-sw input { opacity:0; width:0; height:0; }
.ts-slider  { position:absolute; inset:0; background:#333; border-radius:22px; cursor:pointer; transition:.3s; }
.ts-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s; }
.toggle-sw input:checked + .ts-slider { background:var(--gold); }
.toggle-sw input:checked + .ts-slider::before { transform:translateX(20px); }
[dir=rtl] .ts-slider::before { left:auto; right:3px; }
[dir=rtl] .toggle-sw input:checked + .ts-slider::before { transform:translateX(-20px); }
.modal-bg  { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding:1rem; background:rgba(0,0,0,.84); backdrop-filter:blur(4px); overflow-y:auto; }
.modal-bg.hidden { display:none; }
.modal-box { background:rgba(20,20,20,.98); border:1px solid rgba(245,158,11,.2); border-radius:20px; width:100%; max-width:520px; box-shadow:0 20px 80px rgba(0,0,0,.8); margin:2rem auto; }
.modal-box-lg { max-width:720px; }
.modal-box-xl { max-width:900px; }
.modal-head { padding:1.3rem 1.3rem .9rem; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid rgba(245,158,11,.1); gap:1rem; }
.modal-head h3 { font-weight:700; font-size:1rem; color:#fff; }
.modal-head p  { color:var(--text-600); font-size:.8rem; margin-top:2px; }
.modal-x   { background:none; border:none; color:var(--text-600); font-size:1.25rem; cursor:pointer; transition:color var(--tr); padding:2px 6px; flex-shrink:0; line-height:1; }
.modal-x:hover { color:#fff; }
.modal-body{ padding:1.3rem; }
.modal-foot{ padding:.9rem 1.3rem; border-top:1px solid rgba(245,158,11,.1); display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.frow      { margin-bottom:1rem; }
.flbl      { display:block; color:var(--text-400); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.info-box  { border-radius:var(--r); padding:1rem 1.2rem; }
.info-blue { background:rgba(96,165,250,.07); border:1px solid rgba(96,165,250,.15); }
.info-gold { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.18); }
.info-box .ibt { font-size:.84rem; font-weight:600; margin-bottom:.35rem; }
.info-blue .ibt { color:#93c5fd; }
.info-gold .ibt { color:var(--gold-light); }
.info-box .ibd { font-size:.78rem; color:var(--text-600); line-height:1.65; }
.ibd strong { color:var(--text-400); }

/* Reseller / page heroes */
.reseller-hero { position:relative; padding-top:calc(var(--nav-h)+3rem); padding-bottom:3rem; text-align:center; overflow:hidden; }
.reseller-hero-bg { position:absolute; inset:0; }
.reseller-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.14; filter:blur(5px) saturate(1.2); }
.reseller-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#080808 100%); }
.reseller-hero-content { position:relative; z-index:1; }
.benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-bottom:4rem; }
.benefit-card { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); padding:1.5rem; text-align:center; transition:all .3s; }
/* hover removed */
.benefit-icon  { font-size:1rem; width:44px; height:44px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.18); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; }
.benefit-title { font-weight:700; font-size:.92rem; color:#fff; margin-bottom:.45rem; }
.benefit-desc  { font-size:.78rem; color:var(--text-600); line-height:1.65; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.how-card { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.1); border-radius:var(--r-lg); padding:1.5rem; text-align:center; }
.how-step  { font-family:var(--font-d); font-size:3rem; font-weight:900; color:rgba(245,158,11,.12); line-height:1; margin-bottom:.6rem; }
.how-title { font-weight:600; font-size:.95rem; color:#fff; margin-bottom:.5rem; }
.how-desc  { font-size:.8rem; color:var(--text-600); line-height:1.65; }
.page-hero { position:relative; padding-top:calc(var(--nav-h)+3rem); padding-bottom:3rem; overflow:hidden; }
.page-hero-bg { position:absolute; inset:0; }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.14; filter:blur(5px); }
.page-hero-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#080808 100%); }
.page-hero-content { position:relative; z-index:1; text-align:center; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:99; display:none; }
.sidebar-overlay.show { display:block; }
.cmp-table tbody td { text-align:center; }
.cmp-table tbody td:first-child { text-align:start; font-weight:500; color:var(--text-400); }
.cmp-table .pop-col { background:rgba(245,158,11,.04); }
.c-check { color:var(--green); font-weight:700; }
.c-cross { color:var(--text-600); }

/* ════════════════════════════════════════════════════════════════
   APPS PAGE
   ════════════════════════════════════════════════════════════════ */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; margin-top:2.5rem; }
.app-card { background:rgba(20,20,20,.85); border:1px solid rgba(245,158,11,.12); border-radius:var(--r-lg); padding:1.5rem; display:flex; flex-direction:column; gap:.8rem; transition:all .3s; }
/* hover removed */
.app-icon { font-size:1.4rem; width:52px; height:52px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.15); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto .6rem; }
.app-name { font-weight:700; font-size:1rem; color:#fff; }
.app-platform { font-size:.72rem; color:var(--text-600); }
.app-version  { font-size:.72rem; color:var(--gold); background:rgba(245,158,11,.1); padding:2px 8px; border-radius:20px; border:1px solid rgba(245,158,11,.2); display:inline-block; }

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes fadeUp    { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.38} }
@keyframes bounce    { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }
@keyframes floatUp   { 0%{transform:translateY(100vh) scale(0);opacity:0} 8%{opacity:.28} 92%{opacity:.28} 100%{transform:translateY(-8vh) scale(1);opacity:0} }
@keyframes scrollAnim{ 0%,100%{transform:translateY(0);opacity:1} 60%{transform:translateY(8px);opacity:.3} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes badgePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.3)} 50%{box-shadow:0 0 0 8px rgba(245,158,11,0)} }
@keyframes shimmer   { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.22); border-top-color:#000; border-radius:50%; animation:spin .65s linear infinite; vertical-align:middle; margin-inline-end:6px; }
.spinner-gold { border-color:rgba(245,158,11,.2); border-top-color:var(--gold); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .reasons-grid{grid-template-columns:repeat(2,1fr);}
  .adm-stats{grid-template-columns:repeat(2,1fr);}
  .adm-quick{grid-template-columns:repeat(3,1fr);}
  .settings-grid{grid-template-columns:1fr;}
  .sfield-full{grid-column:auto;}
  .admin-sidebar{transform:translateX(-240px);}
  [dir=rtl] .admin-sidebar{transform:translateX(240px);}
  .admin-sidebar.open{transform:translateX(0)!important;}
  .admin-main{margin-inline-start:0!important;margin-inline-end:0!important;width:100%!important;}
  .atb-hamburger{display:block;}
  .how-grid{grid-template-columns:1fr;}
  .content-stats{grid-template-columns:1fr;}
}
@media(max-width:768px){
  :root{--nav-h:60px;}
  .nav-links,.nav-right{display:none;}
  .hamburger{display:flex;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;justify-content:center;}
  .footer-cols{grid-template-columns:1fr;}
  .mini-cards{grid-template-columns:1fr 1fr;}
  .quick-grid{grid-template-columns:repeat(2,1fr);}
  .plans-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .reasons-grid{grid-template-columns:1fr 1fr;}
  .adm-stats{grid-template-columns:1fr 1fr;}
  .adm-quick{grid-template-columns:repeat(2,1fr);}
  .form-2col{grid-template-columns:1fr;}
  .benefits-grid{grid-template-columns:1fr 1fr;}
  .modal-foot{flex-direction:column-reverse;}
  .modal-foot .btn{width:100%;justify-content:center;}
  .apps-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .hero-title{font-size:clamp(1.8rem,8vw,2.4rem);}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:.5rem;}
  .mini-cards{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:repeat(2,1fr);}
  .plans-grid{max-width:100%;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .reasons-grid{grid-template-columns:1fr;}
  .adm-stats{grid-template-columns:1fr 1fr;}
  .adm-quick{grid-template-columns:repeat(2,1fr);}
  .benefits-grid{grid-template-columns:1fr;}
  .padm-acts{flex-direction:column;}
  .padm-acts .btn{width:100%;justify-content:center;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .tb-search{max-width:100%;}
  .apps-grid{grid-template-columns:1fr;}
}
@media(max-width:360px){
  .hero-badge{font-size:.6rem;padding:6px 14px;}
  .adm-stats{grid-template-columns:1fr;}
  .adm-quick{grid-template-columns:1fr 1fr;}
}

/* RTL */
[dir=rtl] .admin-sidebar{transform:translateX(0);}
[dir=rtl] .admin-sidebar.open{transform:translateX(0)!important;}
[dir=rtl] .faq-q{text-align:start;}
[dir=rtl] .plan-pop-badge{right:auto;left:1rem;}
[dir=rtl] .wa-float{right:auto;left:2rem;}
[dir=rtl] .footer-links a:hover{padding-inline-start:0;padding-inline-end:4px;}

/* ══════════════════════════════════════════════════════════════
   PHASE 1: UI/UX — SVG Icons, Animations, Hero cleanup
   ══════════════════════════════════════════════════════════════ */

/* Remove hero logo */
.hero-logo-wrap { display: none !important; }

/* Feature cards — SVG icons replacing emoji */
.feat-icon-svg {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; transition: transform .3s, background .3s;
  color: var(--gold); flex-shrink: 0;
}
.feat-icon-svg svg { width: 26px; height: 26px; }
.feat-card:hover .feat-icon-svg { transform: scale(1.1); background: rgba(245,158,11,.18); }

/* Stat icon SVG */
.stat-icon-svg { margin-bottom: .75rem; color: var(--gold); }
.stat-icon-svg svg { filter: drop-shadow(0 0 8px rgba(245,158,11,.5)); }

/* Reason icon SVG */
.reason-icon-svg { font-size: 1.7rem; margin-bottom: .8rem; color: var(--gold); }
.reason-icon-svg svg { width: 36px; height: 36px; }

/* Hero content stats (channels/movies/series) */
.hero-content-stats {
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(245,158,11,.18);
  animation: fadeUp .8s .8s ease both;
}
.hcs-item { text-align: center; }
.hcs-num { font-size: 1.1rem; font-weight: 900; display: block; }
.hcs-lbl { font-size: .62rem; color: var(--text-600); text-transform: uppercase; letter-spacing: .1em; }

/* Hero primary button with icon */
.btn-icon-svg { display: flex; align-items: center; }
.btn-icon-svg svg { width: 18px; height: 18px; margin-inline-end: 6px; }

/* Plan check SVG icon */
.plan-check-icon { color: var(--gold); flex-shrink: 0; display: flex; align-items: center; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; }

/* FAQ arrow SVG */
.faq-arrow { display: flex; align-items: center; flex-shrink: 0; }
.faq-arrow svg { transition: transform .3s ease; }
.faq-item.open .faq-arrow svg { transform: rotate(180deg); }

/* Site banner (static/animated) */
.site-banner {
  background: rgba(245,158,11,.12); border-bottom: 1px solid rgba(245,158,11,.25);
  color: var(--gold-light); text-align: center; padding: 10px 1rem;
  font-size: .84rem; font-weight: 600; position: relative; z-index: 10;
}
.site-banner-animated {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(180,83,9,.15));
  animation: bannerPulse 2s ease-in-out infinite;
}
@keyframes bannerPulse { 0%,100%{opacity:1} 50%{opacity:.75} }

/* fade-up class for sections */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: none; }

/* ══
   PHASE 10: Payment Icons
   ══════════════════════════════════════════════════════════════ */
.payment-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem; padding: .9rem 0;
}
.payment-label { font-size: .72rem; color: var(--text-600); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-icon {
  width: 48px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.08); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.pay-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.pay-icon svg { width: 40px; height: 26px; }

/* ══════════════════════════════════════════════════════════════
   PHASE 11: WhatsApp Float
   ══════════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 300;
  display: flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; border-radius: 50px;
  padding: 12px 18px 12px 14px; box-shadow: 0 4px 24px rgba(37,211,102,.4);
  text-decoration: none; font-size: .82rem; font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: waBounce 2s ease-in-out infinite;
}
.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; }
.wa-float:hover { transform: scale(1.06) translateY(-3px); box-shadow: 0 8px 32px rgba(37,211,102,.55); animation: none; }
.wa-float-label { white-space: nowrap; }
@keyframes waBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@media(max-width:480px){ .wa-float-label { display: none; } .wa-float { padding: 12px; border-radius: 50%; } }

/* ══════════════════════════════════════════════════════════════
   PHASE 4: Footer social links with SVG
   ══════════════════════════════════════════════════════════════ */
.social-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(245,158,11,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(245,158,11,.6); font-size: .68rem;
  cursor: pointer; transition: all var(--tr);
  text-decoration: none;
}
.social-dot svg { width: 15px; height: 15px; }
.social-dot:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,.2); }

/* Footer contact SVG icons */
.footer-contact li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-600); }
.footer-contact a { color: var(--text-600); transition: color var(--tr); }
.footer-contact a:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS (Phase 9)
   ══════════════════════════════════════════════════════════════ */
.site-notif {
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--r); padding: 1rem 1.2rem;
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 0 auto 1rem; max-width: 900px;
}
.site-notif-icon { font-size: 1.2rem; flex-shrink: 0; }
.site-notif-body { flex: 1; }
.site-notif-title { font-weight: 700; font-size: .9rem; color: var(--gold-light); margin-bottom: 3px; }
.site-notif-text  { font-size: .84rem; color: var(--text-600); }
.site-notif-close {
  background: none; border: none; color: var(--text-600);
  cursor: pointer; font-size: 1.1rem; padding: 2px 6px;
  transition: color var(--tr); flex-shrink: 0;
}
.site-notif-close:hover { color: var(--text-200); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE fixes
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px) {
  .hero-content-stats { gap: 1.5rem; }
  .hcs-num { font-size: .95rem; }
}
@media(max-width:480px) {
  .hero-content-stats { gap: 1rem; flex-wrap: wrap; }
  .payment-row { justify-content: center; }
}

/* App cards */
.app-card {
  background: rgba(20,20,20,.85); border: 1px solid rgba(245,158,11,.1);
  border-radius: var(--r-lg); padding: 1.6rem; text-align: center;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.app-card:hover { transform: translateY(-6px); border-color: rgba(245,158,11,.32); box-shadow: 0 12px 40px rgba(245,158,11,.1); }
.app-icon-wrap { font-size: 2.8rem; margin-bottom: 1rem; display: block; }
.app-name { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--text-100); margin-bottom: .5rem; }
.app-desc { font-size: .82rem; color: var(--text-600); line-height: 1.65; }

/* ════════════════════════════════════════════════════════════════
   RTL — Arabic Layout Support (dir="rtl")
   Applied when lang=ar via <html dir="rtl">
   ════════════════════════════════════════════════════════════════ */

/* Global RTL body adjustments */
[dir=rtl] body {
  font-family: 'Noto Kufi Arabic', sans-serif;
  text-align: right;
}

/* Navbar RTL */
[dir=rtl] .nav-wrap     { flex-direction: row-reverse; }
[dir=rtl] .nav-links    { flex-direction: row-reverse; }
[dir=rtl] .nav-right    { flex-direction: row-reverse; }
[dir=rtl] .nav-link::after { left: auto; right: 0; }

/* Mobile menu RTL */
[dir=rtl] .m-link { text-align: right; }

/* Hero RTL */
[dir=rtl] .hero-body    { direction: rtl; }
[dir=rtl] .hero-cta     { flex-direction: row-reverse; }
[dir=rtl] .hero-badge   { direction: rtl; }

/* Features RTL */
[dir=rtl] .feat-card    { text-align: right; }
[dir=rtl] .feat-icon    { margin-right: 0; }

/* Plans RTL */
[dir=rtl] .plan-head    { text-align: right; }
[dir=rtl] .plan-pop-badge { right: auto; left: 1rem; }
[dir=rtl] .plan-price   { flex-direction: row-reverse; }
[dir=rtl] .plan-features li { flex-direction: row-reverse; }
[dir=rtl] .plan-card { text-align: right; }
[dir=rtl] .plan-dur { text-align: right; }
[dir=rtl] .plan-name { text-align: right; }
[dir=rtl] .plan-price { justify-content: flex-end; }
[dir=rtl] .plan-note { text-align: right; }
[dir=rtl] .plan-body { text-align: right; }
[dir=rtl] .plan-features { text-align: right; }
[dir=rtl] .plan-tag     { flex-direction: row-reverse; }

/* Why Us RTL */
[dir=rtl] .stat-card    { direction: rtl; }
[dir=rtl] .reason-card  { text-align: right; }
[dir=rtl] .cta-inner    { direction: rtl; }

/* FAQ RTL */
[dir=rtl] .faq-q        { direction: rtl; }
[dir=rtl] .faq-a-txt    { direction: rtl; text-align: right; }

/* Footer RTL */
[dir=rtl] .footer-cols      { direction: rtl; }
[dir=rtl] .footer-brand     { flex-direction: row-reverse; }
[dir=rtl] .footer-desc      { text-align: right; }
[dir=rtl] .footer-socials   { flex-direction: row-reverse; }
[dir=rtl] .footer-links     { text-align: right; }
[dir=rtl] .footer-contact li{ flex-direction: row-reverse; }
[dir=rtl] .footer-bottom    { flex-direction: row-reverse; }
[dir=rtl] .footer-legal     { flex-direction: row-reverse; }
[dir=rtl] .footer-pay       { flex-direction: row-reverse; }

/* Auth pages RTL */
[dir=rtl] .auth-logo-area { direction: rtl; }
[dir=rtl] .auth-card      { direction: rtl; text-align: right; }
[dir=rtl] .auth-foot      { direction: rtl; }
[dir=rtl] .pw-wrap .pw-eye { inset-inline-end: auto; inset-inline-start: 12px; }

/* Dashboard RTL */
[dir=rtl] .dash-header    { flex-direction: row-reverse; }
[dir=rtl] .dash-identity  { flex-direction: row-reverse; }
[dir=rtl] .mini-card      { flex-direction: row-reverse; text-align: right; }
[dir=rtl] .quick-grid     { direction: rtl; }
[dir=rtl] .data-table     { direction: rtl; }
[dir=rtl] .data-table th, [dir=rtl] .data-table td { text-align: right; }
[dir=rtl] .td-c           { text-align: center; }
[dir=rtl] .user-row       { flex-direction: row-reverse; }

/* Admin RTL */
[dir=rtl] .admin-shell    { direction: ltr; }
[dir=rtl] .admin-sidebar  { left: auto; right: 0; }
[dir=rtl] .admin-main     { margin-left: 0; margin-right: 240px; }
[dir=rtl] .admin-content,
[dir=rtl] .panel,
[dir=rtl] .settings-section,
[dir=rtl] .modal-box,
[dir=rtl] .table-wrap,
[dir=rtl] .tb-tabs,
[dir=rtl] .toolbar { direction: rtl; }
[dir=rtl] .admin-sidebar { direction: rtl; }
[dir=rtl] .asb-nav { direction: rtl; }
[dir=rtl] .asb-logo,
[dir=rtl] .asb-user,
[dir=rtl] .toolbar,
[dir=rtl] .panel-head,
[dir=rtl] .modal-head,
[dir=rtl] .modal-foot,
[dir=rtl] .toggle-wrap { text-align: right; }

/* Reseller RTL */
[dir=rtl] .reseller-hero-content { direction: rtl; }
[dir=rtl] .how-grid        { direction: rtl; }
[dir=rtl] .how-card        { text-align: right; }
[dir=rtl] .benefit-card    { text-align: right; }

/* WhatsApp button RTL */
[dir=rtl] .wa-float { right: auto; left: 2rem; }

/* Content stats RTL */
[dir=rtl] .content-stats { direction: rtl; }
[dir=rtl] .cs-card        { direction: rtl; }

/* Announcement bar RTL */
[dir=rtl] .ann-bar  { flex-direction: row-reverse; }
[dir=rtl] .ann-close { margin-inline-start: 0; margin-inline-end: auto; }

/* Notifications RTL */
[dir=rtl] .site-notif { flex-direction: row-reverse; text-align: right; }

/* ── SVG Icon styles for stats & reasons (replace emoji) ─── */
.stat-icon-svg {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .75rem;
  color: var(--gold);
}
.stat-icon-svg svg {
  width: 36px; height: 36px;
  stroke: var(--gold);
}
.reason-icon-svg {
  width: 44px; height: 44px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .8rem;
  color: var(--gold);
}
.reason-icon-svg svg {
  width: 22px; height: 22px;
  stroke: var(--gold);
}
.benefit-icon-svg {
  width: 52px; height: 52px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .8rem;
  color: var(--gold);
}
.benefit-icon-svg svg {
  width: 26px; height: 26px;
  stroke: var(--gold);
}

/* ── Pay badges — premium ─────────────────────────────────── */
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; min-width: 52px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow: hidden; padding: 3px 6px;
}
.pay-visa   { background: #fff; border-color: rgba(255,255,255,.3); }
.pay-mc     { background: #252525; border-color: rgba(255,255,255,.1); padding:3px 4px; }
.pay-apple  { background: #1a1a1a; border-color: rgba(255,255,255,.1); }
.pay-crypto { background: rgba(247,147,26,.1); border-color: rgba(247,147,26,.3); padding:4px 8px; }

/* ── Remove .stat-icon (old emoji styles) & keep svg  ─────── */
.stat-icon { display: none; } /* replaced by stat-icon-svg */

/* ── Numbers always in English digits (Arabic mode) ────────── */
[dir=rtl] .plan-amount,
[dir=rtl] .hero-stat-val,
[dir=rtl] .stat-val,
[dir=rtl] .cs-num,
[dir=rtl] .asc-val,
[dir=rtl] .padm-pi span:last-child {
  direction: ltr;
  display: inline-block;
  unicode-bidi: embed;
  font-feature-settings: "lnum";
}
/* Ensure font-display numbers render in Western digits */
.plan-amount, .hero-stat-val, .stat-val, .cs-num, .asc-val {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── English digits everywhere including RTL ─── */
* { font-variant-numeric: lining-nums; }
[dir=rtl] * { -webkit-locale: 'en'; }
.plan-amount, .hero-stat-val, .stat-val, .cs-num, .asc-val,
.plan-note, .plan-currency, .mini-val, .padm-pi span:last-child {
  direction: ltr !important;
  unicode-bidi: plaintext;
  display: inline-block;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── Force Western/Latin digits everywhere ── */
@font-face {
  font-family: 'NumericOverride';
  src: local('Arial');
  unicode-range: U+0030-0039, U+002B, U+0025, U+002C, U+002E, U+004B;
}
.hero-stat-val, .stat-val, .plan-amount, .cs-num, .asc-val {
  font-family: 'NumericOverride', 'Arial', sans-serif !important;
}

/* ─── نظام الإشعارات ─────────────────────────────────────────── */
.notif-bell { position:relative; display:inline-flex; align-items:center; }
.notif-btn { background:none; border:none; cursor:pointer; color:var(--text-400); padding:.4rem; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:color var(--tr),background var(--tr); position:relative; }
.notif-btn:hover { color:var(--gold); background:rgba(245,158,11,.08); }
.notif-count { position:absolute; top:-2px; right:-2px; background:var(--gold); color:#000; font-size:.6rem; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; }
.notif-count.hidden { display:none; }
.notif-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:320px; background:#111; border:1px solid rgba(245,158,11,.25); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.6); z-index:9999; overflow:hidden; }
.notif-dropdown.hidden { display:none; }
[dir=rtl] .notif-dropdown { right:0; left:auto; }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.notif-head span { font-size:.82rem; font-weight:600; color:var(--text-100); }
.notif-read-all { background:none; border:none; cursor:pointer; font-size:.72rem; color:var(--gold); padding:0; }
.notif-read-all:hover { opacity:.8; }
.notif-list { max-height:320px; overflow-y:auto; }
.notif-empty { padding:2rem; text-align:center; color:var(--text-600); font-size:.82rem; }
.notif-item { padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background var(--tr); display:block; }
.notif-item:hover { background:rgba(245,158,11,.04); }
.notif-item.unread { background:rgba(245,158,11,.06); border-left:3px solid var(--gold); }
[dir=rtl] .notif-item.unread { border-left:none; border-right:3px solid var(--gold); }
.notif-item-title { font-size:.82rem; font-weight:600; color:var(--text-100); margin-bottom:3px; }
.notif-item-msg { font-size:.75rem; color:var(--text-600); line-height:1.5; }
.notif-item-time { font-size:.68rem; color:var(--text-700); margin-top:4px; }