/* GlotvIPTV — CSS v9 | Deep Violet + Neon Amber — Premium Edition */



/* =============================================

   RESET & BASE

   ============================================= */

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



:root {

  --bg:        #070409;

  --surface:   #0F0B1A;

  --surface2:  #170D26;

  --border:    rgba(255,255,255,0.08);

  --primary:   #A855F7;

  --accent:    #FB923C;

  --text:      #F5F0FF;

  --muted:     #9080AA;

  --success:   #22C55E;

  --radius:    12px;

  --radius-lg: 20px;

  --glow-primary: rgba(168,85,247,0.25);

  --glow-accent:  rgba(251,146,60,0.2);

}



html { scroll-behavior: smooth; }



body {

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  background: linear-gradient(135deg, #070409 0%, #0B0715 35%, #050309 70%, #070409 100%);

  color: #F5F0FF;

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}



img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { cursor: pointer; font-family: inherit; border: none; background: none; }



.container {

  width: 100%;

  max-width: 1160px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* =============================================

   TYPOGRAPHY

   ============================================= */

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; }

h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.2; }

h3 { font-size: 1.15rem; font-weight: 700; }

h4 { font-size: 0.95rem; font-weight: 700; }

p  { color: #9080AA; }



.text-gradient {

  background: linear-gradient(135deg, #C084FC 0%, #A855F7 40%, #FB923C 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* =============================================

   BUTTONS

   ============================================= */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.75rem 1.5rem;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.95rem;

  transition: all 0.2s ease;

  white-space: nowrap;

  position: relative;

  overflow: hidden;

}

.btn::after {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(255,255,255,0);

  transition: background 0.2s;

}

.btn:hover::after { background: rgba(255,255,255,0.08); }

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }



.btn-primary {

  background: linear-gradient(135deg, #A855F7 0%, #9333EA 50%, #7C3AED 100%);

  color: #fff;

  box-shadow: 0 4px 20px rgba(168,85,247,0.35);

}

.btn-primary:hover {

  box-shadow: 0 6px 28px rgba(168,85,247,0.5);

}

.btn-accent {

  background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);

  color: #070409;

  box-shadow: 0 4px 20px rgba(251,146,60,0.35);

}

.btn-accent:hover {

  box-shadow: 0 6px 28px rgba(251,146,60,0.5);

}

.btn-outline {

  background: rgba(255,255,255,0.04);

  color: #F5F0FF;

  border: 1.5px solid rgba(255,255,255,0.15);

  backdrop-filter: blur(8px);

}

.btn-outline:hover {

  border-color: rgba(168,85,247,0.5);

  background: rgba(168,85,247,0.08);

}

.btn-lg { padding: 0.9rem 2rem; font-size: 1rem; }

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



/* =============================================

   NAVBAR — Glassmorphism

   ============================================= */

.navbar {

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 1000;

  background: rgba(7,4,9,0.75);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(168,85,247,0.12);

  transition: background 0.3s;

}

.nav-inner {

  max-width: 1160px;

  margin: 0 auto;

  padding: 0 1.5rem;

  height: 68px;

  display: flex;

  align-items: center;

  gap: 2rem;

}

.nav-logo {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  flex-shrink: 0;

}

.logo-icon {

  width: 38px; height: 38px;

  background: linear-gradient(135deg, #A855F7 0%, #D97706 100%);

  border-radius: 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  box-shadow: 0 0 18px rgba(168,85,247,0.45), 0 2px 8px rgba(0,0,0,0.4);

  position: relative;

}

.logo-icon::after {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 11px;

  border: 1px solid rgba(255,255,255,0.18);

  pointer-events: none;

}

.nav-logo-text {

  font-weight: 800;

  font-size: 1.08rem;

  color: #F5F0FF;

  letter-spacing: -0.01em;

  line-height: 1;

}

.nav-logo-text .logo-glotv { color: #F5F0FF; }

.nav-logo-text .logo-iptv  { color: #FB923C; font-weight: 700; font-size: 0.87em; letter-spacing: 0.02em; }



.nav-links {

  display: flex;

  align-items: center;

  gap: 0.25rem;

  margin-left: auto;

}

.nav-links a {

  padding: 0.4rem 0.9rem;

  border-radius: 8px;

  font-size: 0.88rem;

  font-weight: 500;

  color: #9080AA;

  transition: color 0.15s, background 0.15s;

}

.nav-links a:hover, .nav-links a.active { color: #F5F0FF; background: rgba(255,255,255,0.06); }

.nav-links .nav-reseller { color: #FB923C; }

.nav-links .nav-reseller:hover { background: rgba(251,146,60,0.1); }



.nav-cta { display: flex; margin-left: 0.75rem; }

.nav-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  width: 36px; height: 36px;

  align-items: center;

  justify-content: center;

}

.nav-toggle span {

  display: block;

  width: 22px; height: 2px;

  background: #F5F0FF;

  border-radius: 2px;

  transition: transform 0.2s, opacity 0.2s;

}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle.open span:nth-child(2) { opacity: 0; }

.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* Mobile Nav */

.nav-mobile {

  position: fixed;

  top: 68px; left: 0; right: 0;

  z-index: 999;

  background: rgba(15,11,26,0.95);

  backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(168,85,247,0.12);

  padding: 1rem 1.5rem 1.5rem;

  display: none;

  flex-direction: column;

  gap: 0.25rem;

}

.nav-mobile.open { display: flex; }

.nav-mobile a {

  padding: 0.75rem 1rem;

  border-radius: 10px;

  font-weight: 500;

  color: #9080AA;

  font-size: 0.95rem;

  transition: color 0.15s, background 0.15s;

}

.nav-mobile a:hover { color: #F5F0FF; background: rgba(255,255,255,0.05); }

.nav-mobile .mobile-reseller { color: #FB923C; }

.nav-mobile .btn { margin-top: 0.75rem; }



/* =============================================

   SECTION COMMONS

   ============================================= */

.section { padding: 5rem 0; }



.section-header {

  text-align: center;

  max-width: 680px;

  margin: 0 auto 3.5rem;

}

.section-title { margin: 0.75rem 0 1rem; }

.section-sub { font-size: 1.05rem; line-height: 1.7; }



.section-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.35rem 1rem;

  border-radius: 50px;

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: rgba(168,85,247,0.08);

  border: 1px solid rgba(168,85,247,0.22);

  color: #C084FC;

}

.section-badge.red { background: rgba(168,85,247,0.08); border-color: rgba(168,85,247,0.22); color: #C084FC; }

.section-badge .dot {

  width: 7px; height: 7px;

  border-radius: 50%;

  background: #A855F7;

  box-shadow: 0 0 8px #A855F7;

  animation: pulse-dot 2s ease-in-out infinite;

}

@keyframes pulse-dot {

  0%, 100% { opacity: 1; transform: scale(1); }

  50%       { opacity: 0.6; transform: scale(0.75); }

}



/* =============================================

   HERO

   ============================================= */

.hero-section {

  position: relative;

  padding: 8rem 0 5rem;

  overflow: hidden;

}

.hero-section::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);

  background-size: 36px 36px;

  pointer-events: none;

  z-index: 0;

}

.hero-orb {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;

  filter: blur(80px);

}

.hero-orb-1 {

  width: 700px; height: 700px;

  background: radial-gradient(circle, rgba(168,85,247,0.24) 0%, rgba(168,85,247,0.06) 45%, transparent 70%);

  top: -220px; left: -180px;

}

.hero-orb-2 {

  width: 600px; height: 600px;

  background: radial-gradient(circle, rgba(251,146,60,0.18) 0%, rgba(251,146,60,0.04) 45%, transparent 70%);

  bottom: -180px; right: -150px;

}

.hero-section > .container { position: relative; z-index: 1; }



.hero {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  padding: 0.45rem 1.2rem;

  background: rgba(168,85,247,0.1);

  border: 1px solid rgba(168,85,247,0.28);

  border-radius: 50px;

  font-size: 0.82rem;

  font-weight: 600;

  color: #C084FC;

  margin-bottom: 1.5rem;

}

.live-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: #A855F7;

  box-shadow: 0 0 8px #A855F7;

  animation: live-pulse 1.8s ease-in-out infinite;

}

@keyframes live-pulse {

  0%, 100% { box-shadow: 0 0 6px #A855F7; transform: scale(1); }

  50%       { box-shadow: 0 0 14px #A855F7, 0 0 24px rgba(168,85,247,0.4); transform: scale(1.2); }

}



.hero h1 { margin-bottom: 1.25rem; }



.hero-sub {

  font-size: 1.1rem;

  line-height: 1.75;

  margin-bottom: 2rem;

  color: #9080AA;

}

.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom: 2.5rem;

}

.hero-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  padding-top: 2rem;

  border-top: 1px solid rgba(255,255,255,0.07);

}

.hero-stat { display: flex; flex-direction: column; }

.hero-stat-value {

  font-size: 1.5rem;

  font-weight: 800;

  color: #F5F0FF;

  background: linear-gradient(135deg, #F5F0FF, #C084FC);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}

.hero-stat-label { font-size: 0.78rem; color: #9080AA; margin-top: 0.1rem; }



/* Hero Visual */

.hero-visual {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

.hero-visual-glow {

  position: absolute;

  width: 420px; height: 420px;

  background: radial-gradient(circle, rgba(168,85,247,0.18) 0%, rgba(251,146,60,0.06) 50%, transparent 70%);

  border-radius: 50%;

  pointer-events: none;

}



/* Floating chips */

.hero-chip {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.45rem 0.9rem;

  background: rgba(15,11,26,0.85);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 50px;

  font-size: 0.78rem;

  font-weight: 600;

  color: #C084FC;

  z-index: 2;

  white-space: nowrap;

  box-shadow: 0 4px 20px rgba(0,0,0,0.3);

}

.hero-chip svg { width: 14px; height: 14px; stroke: #A855F7; flex-shrink: 0; }

.chip-1 { top: 4%;  left: -2%; animation: chip-float 4s ease-in-out infinite; }

.chip-2 { top: 38%; right: -4%; color: #FB923C; animation: chip-float 4s ease-in-out infinite 1.3s; }

.chip-2 svg { stroke: #FB923C; }

.chip-3 { bottom: 6%; left: 4%; color: #34D399; animation: chip-float 4s ease-in-out infinite 2.6s; }

.chip-3 svg { stroke: #34D399; }

@keyframes chip-float {

  0%, 100% { transform: translateY(0); }

  50%       { transform: translateY(-6px); }

}



/* Stream Card */

.stream-card {

  background: rgba(15,11,26,0.75);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(168,85,247,0.25);

  border-radius: 22px;

  padding: 1.25rem;

  width: 100%;

  max-width: 340px;

  position: relative;

  z-index: 1;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.08);

}

.stream-card::before {

  content: '';

  position: absolute;

  top: 0; left: 15%; right: 15%;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.6), rgba(251,146,60,0.4), transparent);

  border-radius: 1px;

}



.stream-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1rem;

}

.stream-live-badge {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  color: #F5F0FF;

  background: rgba(168,85,247,0.15);

  border: 1px solid rgba(168,85,247,0.3);

  padding: 0.25rem 0.7rem;

  border-radius: 50px;

}

.live-dot-sm {

  width: 6px; height: 6px;

  border-radius: 50%;

  background: #A855F7;

  box-shadow: 0 0 6px #A855F7;

  animation: live-pulse 1.8s ease-in-out infinite;

}

.stream-quality-badge {

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  color: #FB923C;

  background: rgba(251,146,60,0.1);

  border: 1px solid rgba(251,146,60,0.3);

  padding: 0.25rem 0.65rem;

  border-radius: 6px;

}



/* Thumbnail area */

.stream-thumb {

  position: relative;

  border-radius: 14px;

  overflow: hidden;

  height: 160px;

  margin-bottom: 1rem;

}

.stream-thumb-bg {

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, #1A0A2E 0%, #0D1220 40%, #1A0E08 100%);

}

.stream-thumb-bg::before {

  content: '';

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(168,85,247,0.2) 0%, transparent 60%),

    radial-gradient(ellipse 60% 80% at 75% 60%, rgba(251,146,60,0.15) 0%, transparent 55%);

}

.stream-play-btn {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

}

.stream-play-btn svg {

  width: 52px; height: 52px;

  background: rgba(168,85,247,0.3);

  backdrop-filter: blur(8px);

  border: 1.5px solid rgba(168,85,247,0.5);

  border-radius: 50%;

  padding: 14px;

  box-shadow: 0 0 30px rgba(168,85,247,0.4);

}

.stream-thumb-overlay {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 0.75rem 1rem;

  background: linear-gradient(0deg, rgba(7,4,9,0.9) 0%, transparent 100%);

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

  z-index: 1;

}

.stream-cat {

  font-size: 0.68rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #FB923C;

}

.stream-title {

  font-size: 0.9rem;

  font-weight: 700;

  color: #F5F0FF;

}



/* Progress bar */

.stream-progress-wrap { margin-bottom: 1.1rem; }

.stream-progress-bar {

  height: 3px;

  background: rgba(255,255,255,0.1);

  border-radius: 2px;

  overflow: hidden;

  margin-bottom: 0.4rem;

}

.stream-progress-fill {

  width: 42%;

  height: 100%;

  background: linear-gradient(90deg, #A855F7, #FB923C);

  border-radius: 2px;

}

.stream-time {

  display: flex;

  justify-content: space-between;

  font-size: 0.68rem;

  color: #9080AA;

  font-weight: 500;

}



/* Footer stats */

.stream-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 0.85rem;

  border-top: 1px solid rgba(255,255,255,0.06);

}

.stream-stat { text-align: center; flex: 1; }

.stream-stat-val {

  display: block;

  font-size: 1.05rem;

  font-weight: 800;

  color: #F5F0FF;

  line-height: 1.1;

}

.stream-stat-lbl {

  font-size: 0.68rem;

  color: #9080AA;

  font-weight: 500;

}

.stream-stat-sep {

  width: 1px;

  height: 28px;

  background: rgba(255,255,255,0.07);

  flex-shrink: 0;

}



/* =============================================

   TRUST STRIP

   ============================================= */

.trust-strip {

  border-top: 1px solid rgba(255,255,255,0.05);

  border-bottom: 1px solid rgba(255,255,255,0.05);

  background: rgba(15,11,26,0.6);

  overflow: hidden;

  padding: 0;

}

.trust-track {

  display: flex;

  width: max-content;

  animation: marquee 32s linear infinite;

}

@keyframes marquee {

  0%   { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

.trust-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 1rem 2rem;

  white-space: nowrap;

  font-size: 0.85rem;

  font-weight: 600;

  color: #9080AA;

}

.trust-item svg { width: 18px; height: 18px; stroke: #A855F7; flex-shrink: 0; }

.trust-sep {

  width: 1px; height: 18px;

  background: rgba(255,255,255,0.07);

  margin-left: 1rem;

}



/* =============================================

   FEATURES GRID

   ============================================= */

.features-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem;

}

.feature-card {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius-lg);

  padding: 2rem;

  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;

  position: relative;

  overflow: hidden;

}

.feature-card::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.4), transparent);

  opacity: 0;

  transition: opacity 0.3s;

}

.feature-card:hover {

  border-color: rgba(168,85,247,0.25);

  transform: translateY(-4px);

  box-shadow: 0 12px 40px rgba(168,85,247,0.12);

}

.feature-card:hover::before { opacity: 1; }

.feature-card h3 { margin: 1rem 0 0.5rem; color: #F5F0FF; }

.feature-icon {

  width: 52px; height: 52px;

  border-radius: 14px;

  background: rgba(168,85,247,0.1);

  border: 1px solid rgba(168,85,247,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s, box-shadow 0.2s;

}

.feature-card:hover .feature-icon { background: rgba(168,85,247,0.18); box-shadow: 0 0 20px rgba(168,85,247,0.2); }

.feature-icon svg { width: 22px; height: 22px; stroke: #A855F7; }

.feature-icon.icon-accent { background: rgba(251,146,60,0.08); border-color: rgba(251,146,60,0.2); }

.feature-icon.icon-accent svg { stroke: #FB923C; }

.feature-card:hover .feature-icon.icon-accent { background: rgba(251,146,60,0.15); box-shadow: 0 0 20px rgba(251,146,60,0.15); }



/* =============================================

   DEVICES GRID

   ============================================= */

.devices-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2rem;

}

.device-card {

  background: rgba(7,4,9,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius);

  padding: 1.25rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  transition: border-color 0.2s, transform 0.2s;

}

.device-card:hover {

  border-color: rgba(251,146,60,0.25);

  transform: translateY(-2px);

}

.device-icon {

  width: 48px; height: 48px;

  flex-shrink: 0;

  background: rgba(251,146,60,0.08);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s;

}

.device-card:hover .device-icon { background: rgba(251,146,60,0.15); }

.device-icon svg { width: 22px; height: 22px; stroke: #FB923C; }

.device-info h3 { font-size: 0.95rem; color: #F5F0FF; margin-bottom: 0.2rem; }

.device-info p  { font-size: 0.78rem; }



.mac-notice {

  background: rgba(168,85,247,0.06);

  border: 1px solid rgba(168,85,247,0.2);

  border-radius: var(--radius);

  padding: 1.25rem 1.5rem;

  display: flex;

  gap: 1rem;

  align-items: flex-start;

}

.mac-notice svg { width: 20px; height: 20px; stroke: #A855F7; flex-shrink: 0; margin-top: 2px; }

.mac-notice p { color: #9080AA; font-size: 0.9rem; line-height: 1.6; }

.mac-notice strong { color: #C084FC; }



/* =============================================

   CHANNELS GRID

   ============================================= */

.channels-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

}

.channel-cat {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius);

  padding: 1.5rem 1.25rem;

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;

}

.channel-cat:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 30px rgba(0,0,0,0.3);

}

.channel-cat-icon {

  width: 44px; height: 44px;

  flex-shrink: 0;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.channel-cat-icon svg { width: 22px; height: 22px; }

.channel-cat h3 { font-size: 0.95rem; color: #F5F0FF; margin-bottom: 0.25rem; }

.channel-cat p { font-size: 0.78rem; }



.cat-sports .channel-cat-icon { background: rgba(168,85,247,0.1); }

.cat-sports .channel-cat-icon svg { stroke: #A855F7; }

.cat-sports:hover { border-color: rgba(168,85,247,0.3); }

.cat-movies .channel-cat-icon { background: rgba(251,146,60,0.08); }

.cat-movies .channel-cat-icon svg { stroke: #FB923C; }

.cat-movies:hover { border-color: rgba(251,146,60,0.3); }

.cat-kids .channel-cat-icon { background: rgba(244,114,182,0.1); }

.cat-kids .channel-cat-icon svg { stroke: #F472B6; }

.cat-kids:hover { border-color: rgba(244,114,182,0.3); }

.cat-news .channel-cat-icon { background: rgba(251,191,36,0.1); }

.cat-news .channel-cat-icon svg { stroke: #FBBF24; }

.cat-news:hover { border-color: rgba(251,191,36,0.3); }

.cat-ent .channel-cat-icon { background: rgba(52,211,153,0.1); }

.cat-ent .channel-cat-icon svg { stroke: #34D399; }

.cat-ent:hover { border-color: rgba(52,211,153,0.3); }

.cat-ppv .channel-cat-icon { background: rgba(168,85,247,0.1); }

.cat-ppv .channel-cat-icon svg { stroke: #A855F7; }

.cat-ppv:hover { border-color: rgba(168,85,247,0.3); }

.cat-int .channel-cat-icon { background: rgba(251,146,60,0.08); }

.cat-int .channel-cat-icon svg { stroke: #FB923C; }

.cat-int:hover { border-color: rgba(251,146,60,0.3); }

.cat-live .channel-cat-icon { background: rgba(168,85,247,0.08); }

.cat-live .channel-cat-icon svg { stroke: #A855F7; }

.cat-live:hover { border-color: rgba(168,85,247,0.3); }



/* =============================================

   PRICING GRID

   ============================================= */

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.25rem;

  align-items: start;

}

.pricing-card {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: var(--radius-lg);

  padding: 2rem 1.5rem;

  position: relative;

  display: flex;

  flex-direction: column;

  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;

}

.pricing-card:hover {

  transform: translateY(-4px);

  border-color: rgba(168,85,247,0.2);

  box-shadow: 0 16px 48px rgba(168,85,247,0.1);

}

.pricing-card.popular {

  border-color: rgba(168,85,247,0.45);

  background: rgba(21,13,36,0.95);

  box-shadow: 0 0 50px rgba(168,85,247,0.15), 0 0 0 1px rgba(168,85,247,0.1);

}

.pricing-card.popular:hover {

  box-shadow: 0 0 60px rgba(168,85,247,0.25), 0 16px 48px rgba(168,85,247,0.15);

  transform: translateY(-5px);

}

.pricing-card.best {

  border-color: rgba(251,146,60,0.35);

  background: rgba(24,13,9,0.95);

}

.pricing-card.best:hover {

  border-color: rgba(251,146,60,0.55);

  box-shadow: 0 16px 48px rgba(251,146,60,0.12);

}



/* Popular card glow top line */

.pricing-card.popular::before {

  content: '';

  position: absolute;

  top: 0; left: 15%; right: 15%;

  height: 2px;

  background: linear-gradient(90deg, transparent, #A855F7, transparent);

  border-radius: 2px;

}



.pricing-badge {

  display: inline-flex;

  align-items: center;

  padding: 0.28rem 0.8rem;

  border-radius: 50px;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  margin-bottom: 0.75rem;

  align-self: flex-start;

}

.badge-popular { background: rgba(168,85,247,0.15); color: #C084FC; border: 1px solid rgba(168,85,247,0.3); }

.badge-best    { background: rgba(251,146,60,0.12); color: #FB923C; border: 1px solid rgba(251,146,60,0.3); }



.pricing-plan { font-size: 0.88rem; font-weight: 700; color: #9080AA; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

.pricing-amount { display: flex; align-items: baseline; gap: 0.2rem; margin-bottom: 0.25rem; }

.pricing-currency { font-size: 1.4rem; font-weight: 700; color: #F5F0FF; }

.pricing-price { font-size: 3rem; font-weight: 900; line-height: 1; color: #F5F0FF; }

.pricing-sublabel { font-size: 0.78rem; color: #9080AA; display: block; margin-bottom: 0.5rem; }

.pricing-saving {

  display: inline-block;

  font-size: 0.75rem;

  font-weight: 700;

  color: #22C55E;

  background: rgba(34,197,94,0.1);

  border: 1px solid rgba(34,197,94,0.2);

  padding: 0.2rem 0.65rem;

  border-radius: 50px;

  margin-bottom: 0.5rem;

}

.pricing-divider {

  height: 1px;

  background: rgba(255,255,255,0.07);

  margin: 1.25rem 0;

}

.pricing-features { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.5rem; flex: 1; }

.pricing-feature {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  font-size: 0.88rem;

  color: #9080AA;

}

.check-icon {

  width: 18px; height: 18px;

  border-radius: 50%;

  background: rgba(168,85,247,0.12);

  border: 1px solid rgba(168,85,247,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.check-icon svg { width: 10px; height: 8px; stroke: #A855F7; }

.check-icon.accent { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.2); }

.check-icon.accent svg { stroke: #FB923C; }



/* =============================================

   STEPS

   ============================================= */

.steps-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}

.step-card {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius-lg);

  padding: 2rem;

  text-align: center;

  transition: border-color 0.25s, transform 0.25s;

  position: relative;

}

.step-card:hover {

  border-color: rgba(168,85,247,0.25);

  transform: translateY(-4px);

}

.step-num {

  width: 48px; height: 48px;

  border-radius: 50%;

  background: linear-gradient(135deg, #A855F7, #9333EA);

  color: #fff;

  font-weight: 900;

  font-size: 1.15rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.25rem;

  box-shadow: 0 4px 16px rgba(168,85,247,0.4);

}

.step-icon-wrap {

  margin: 0 auto 1rem;

  width: 52px; height: 52px;

  background: rgba(168,85,247,0.08);

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.step-icon-wrap svg { width: 24px; height: 24px; stroke: #A855F7; }

.step-card h3 { color: #F5F0FF; margin-bottom: 0.5rem; }



/* Step connector dots (decorative) */

.steps-grid .step-card:not(:last-child)::after {

  content: '→';

  position: absolute;

  right: -1.25rem;

  top: 3.5rem;

  color: rgba(168,85,247,0.35);

  font-size: 1.2rem;

  z-index: 1;

}



/* =============================================

   TESTIMONIALS

   ============================================= */

.testimonials-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}

.testimonial-card {

  background: rgba(7,4,9,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius-lg);

  padding: 2rem;

  transition: border-color 0.25s, transform 0.25s;

}

.testimonial-card:hover {

  border-color: rgba(168,85,247,0.2);

  transform: translateY(-3px);

}

.stars { display: flex; gap: 4px; margin-bottom: 1rem; }

.stars svg { width: 15px; height: 15px; fill: #FBBF24; stroke: #FBBF24; stroke-width: 0; }

.testimonial-text { color: #9080AA; font-size: 0.92rem; line-height: 1.75; margin-bottom: 1.5rem; }

.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }

.author-avatar {

  width: 42px; height: 42px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 0.82rem;

  color: #fff;

  flex-shrink: 0;

}

.av-red    { background: linear-gradient(135deg, #A855F7, #9333EA); }

.av-cyan   { background: linear-gradient(135deg, #FB923C, #F97316); }

.av-purple { background: linear-gradient(135deg, #F472B6, #EC4899); }

.author-name { font-size: 0.9rem; font-weight: 700; color: #F5F0FF; }

.author-role { font-size: 0.78rem; color: #9080AA; }



/* =============================================

   FAQ

   ============================================= */

.faq-list {

  max-width: 780px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

}

.faq-item {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius);

  overflow: hidden;

  transition: border-color 0.2s;

}

.faq-item:hover { border-color: rgba(168,85,247,0.2); }

.faq-question {

  width: 100%;

  padding: 1.2rem 1.5rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  font-size: 0.95rem;

  font-weight: 600;

  color: #F5F0FF;

  text-align: left;

  background: none;

  transition: background 0.15s;

}

.faq-question:hover { background: rgba(168,85,247,0.04); }

.faq-toggle {

  width: 28px; height: 28px;

  flex-shrink: 0;

  border-radius: 8px;

  background: rgba(168,85,247,0.1);

  border: 1px solid rgba(168,85,247,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s;

}

.faq-question:hover .faq-toggle { background: rgba(168,85,247,0.18); }

.faq-toggle svg { width: 14px; height: 14px; stroke: #A855F7; transition: transform 0.25s; }

.faq-question[aria-expanded="true"] .faq-toggle { background: rgba(168,85,247,0.2); }

.faq-question[aria-expanded="true"] .faq-toggle svg { transform: rotate(45deg); }



.faq-answer { display: none; }

.faq-answer.open { display: block; }

.faq-answer-inner {

  padding: 0 1.5rem 1.25rem;

  font-size: 0.92rem;

  color: #9080AA;

  line-height: 1.75;

  border-top: 1px solid rgba(255,255,255,0.05);

  padding-top: 1rem;

}



/* =============================================

   CTA SECTION

   ============================================= */

.cta-section {

  position: relative;

  background: linear-gradient(180deg, #070409 0%, #0C0514 100%);

  border-top: 1px solid rgba(168,85,247,0.12);

  padding: 6rem 1.5rem;

  text-align: center;

  overflow: hidden;

}

.cta-section::before {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(168,85,247,0.12) 0%, transparent 65%);

  pointer-events: none;

}

.cta-section::after {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.4), rgba(251,146,60,0.3), transparent);

}

.cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }

.cta-inner h2 { margin: 0 auto 1rem; }

.cta-inner p  { margin-bottom: 2.5rem; font-size: 1.05rem; line-height: 1.7; }

.cta-actions  { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }



/* =============================================

   RESELLER-SPECIFIC

   ============================================= */

.reseller-hero { padding: 8rem 0 5rem; border: none; background: none; }

.reseller-hero .container { position: relative; z-index: 1; width: 100%; }



.benefits-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}

.benefit-card {

  background: rgba(7,4,9,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius-lg);

  padding: 2rem;

  transition: border-color 0.25s, transform 0.25s;

}

.benefit-card:hover {

  border-color: rgba(251,146,60,0.25);

  transform: translateY(-4px);

}

.benefit-icon {

  width: 52px; height: 52px;

  background: rgba(251,146,60,0.08);

  border: 1px solid rgba(251,146,60,0.15);

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

  transition: background 0.2s, box-shadow 0.2s;

}

.benefit-card:hover .benefit-icon { background: rgba(251,146,60,0.15); box-shadow: 0 0 20px rgba(251,146,60,0.15); }

.benefit-icon svg { width: 22px; height: 22px; stroke: #FB923C; }

.benefit-card h3 { color: #F5F0FF; margin-bottom: 0.5rem; }



.reseller-steps {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

}

.reseller-step {

  background: rgba(15,11,26,0.8);

  border: 1px solid rgba(255,255,255,0.07);

  border-radius: var(--radius-lg);

  padding: 2rem;

  text-align: center;

  transition: border-color 0.25s, transform 0.25s;

}

.reseller-step:hover { border-color: rgba(251,146,60,0.25); transform: translateY(-3px); }

.reseller-step-num {

  width: 52px; height: 52px;

  border-radius: 50%;

  background: linear-gradient(135deg, #FB923C, #F97316);

  color: #070409;

  font-weight: 900;

  font-size: 1.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.25rem;

  box-shadow: 0 4px 16px rgba(251,146,60,0.35);

}

.reseller-step h3 { color: #F5F0FF; margin-bottom: 0.5rem; }



.panel-features { display: flex; flex-direction: column; gap: 1.25rem; }

.panel-feature { display: flex; align-items: flex-start; gap: 0.75rem; }

.panel-feature-text h4 { color: #F5F0FF; margin-bottom: 0.2rem; font-size: 0.92rem; }

.panel-feature-text p  { font-size: 0.85rem; }



/* =============================================

   FOOTER

   ============================================= */

.footer {

  background: rgba(7,4,9,0.95);

  border-top: 1px solid rgba(168,85,247,0.1);

  padding: 4rem 0 0;

}

.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.5fr;

  gap: 3rem;

  padding-bottom: 3rem;

  border-bottom: 1px solid rgba(255,255,255,0.06);

}

.footer-brand .nav-logo { margin-bottom: 1rem; }

.footer-brand p { font-size: 0.88rem; line-height: 1.7; margin-bottom: 1.5rem; color: #9080AA; }

.footer-social { display: flex; gap: 0.75rem; }

.social-link {

  width: 38px; height: 38px;

  border-radius: 10px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #9080AA;

  transition: color 0.15s, background 0.15s, border-color 0.15s;

}

.social-link:hover { color: #F5F0FF; background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); }

.social-link svg { width: 17px; height: 17px; }



.footer-col h4 {

  font-size: 0.82rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #F5F0FF;

  margin-bottom: 1.25rem;

}

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-links a { font-size: 0.88rem; color: #9080AA; transition: color 0.15s; }

.footer-links a:hover { color: #C084FC; }



.footer-contact-item { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.9rem; }

.footer-contact-item svg { width: 17px; height: 17px; fill: #A855F7; flex-shrink: 0; }

.footer-contact-item svg[stroke] { fill: none; stroke: #A855F7; }

.footer-contact-item a, .footer-contact-item span { font-size: 0.88rem; color: #9080AA; }

.footer-contact-item a:hover { color: #F5F0FF; }



.payment-strip {

  border-top: 1px solid rgba(255,255,255,0.05);

  padding: 1rem 0;

}

.payment-strip-inner {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  flex-wrap: wrap;

}

.payment-label { font-size: 0.75rem; color: #9080AA; font-weight: 600; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.06em; }

.payment-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.payment-icon {

  padding: 0.25rem 0.65rem;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 6px;

  font-size: 0.72rem;

  font-weight: 700;

  color: #9080AA;

  transition: border-color 0.15s, color 0.15s;

}

.payment-icon:hover { border-color: rgba(168,85,247,0.3); color: #C084FC; }



.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.25rem 0;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.footer-copy { font-size: 0.82rem; color: #9080AA; }

.footer-bottom-links { display: flex; gap: 1.25rem; }

.footer-bottom-links a { font-size: 0.82rem; color: #9080AA; transition: color 0.15s; }

.footer-bottom-links a:hover { color: #C084FC; }



.footer-disclaimer {

  border-top: 1px solid rgba(255,255,255,0.04);

  padding: 1rem 1.5rem;

  text-align: center;

}

.footer-disclaimer p { font-size: 0.75rem; color: rgba(144,128,170,0.45); line-height: 1.6; }



/* =============================================

   SURFACE BG SECTIONS

   ============================================= */

.bg-surface {

  background: linear-gradient(135deg, #0E0A1C 0%, #130B24 50%, #0A0514 100%);

  border-top: 1px solid rgba(255,255,255,0.06);

  border-bottom: 1px solid rgba(255,255,255,0.06);

}



/* =============================================

   RESPONSIVE

   ============================================= */

@media (max-width: 1024px) {

  .hero { grid-template-columns: 1fr; gap: 3rem; }

  .hero-visual { display: none; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .channels-grid { grid-template-columns: repeat(2, 1fr); }

  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  .reseller-steps { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .steps-grid .step-card::after { display: none; }

}



@media (max-width: 768px) {

  .section { padding: 3.5rem 0; }

  .nav-links, .nav-cta { display: none; }

  .nav-toggle { display: flex; margin-left: auto; }

  .features-grid { grid-template-columns: 1fr; }

  .devices-grid { grid-template-columns: 1fr; }

  .channels-grid { grid-template-columns: 1fr; }

  .pricing-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; }

  .testimonials-grid { grid-template-columns: 1fr; }

  .benefits-grid { grid-template-columns: 1fr; }

  .reseller-steps { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }

  .hero { padding: 6rem 1.5rem 3rem; }

  .reseller-hero { padding: 6rem 1.5rem 3rem; }

}