/* ==========================================================================
   IPTV Dubai - Next-Generation Luxury SaaS & Streaming Design System
   ========================================================================== */

/* -------------------- 1. CSS Custom Properties (Design Tokens) -------------------- */
:root {
  /* Color Palette */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8FAFC;
  --color-bg-tertiary: #F1F5F9;
  --color-bg-glass: rgba(255, 255, 255, 0.85);

  --color-text-primary: #0F172A;   /* Deep Charcoal Navy */
  --color-text-secondary: #475569; /* Polished Slate */
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;

  --color-accent-primary: #FF6B00; /* Vibrant Brand Theme Orange */
  --color-accent-hover: #EA580C;
  --color-accent-gradient: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  --color-accent-subtle: #FFF7ED;
  --color-accent-border: #FFEDD5;

  --color-success: #16A34A;
  --color-success-subtle: #DCFCE7;

  --color-border-light: #E2E8F0;
  --color-border-medium: #CBD5E1;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Premium Multi-Layer Shadows & Glows */
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 20px 35px -8px rgba(15, 23, 42, 0.09), 0 10px 15px -4px rgba(255, 107, 0, 0.08);
  --shadow-elevated: 0 25px 50px -12px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 8px 24px -4px rgba(255, 107, 0, 0.35);

  /* Transitions */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --max-width: 1240px;
  --header-height: 76px;
}

/* -------------------- 2. Reset & Base Styles -------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Atmospheric Ambient Canvas */
.ambient-mesh-canvas {
  display: none;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.gradient-text {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

p {
  color: var(--color-text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-fast);
}

ul {
  list-style: none;
}

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

/* Focus States */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -------------------- 3. Layout Containers -------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  z-index: 1;
}

.section {
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
  z-index: 1;
}

.bg-light {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.text-center {
  text-align: center;
}

.section-header {
  max-width: 720px;
  margin: 0 auto 28px auto;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
  color: var(--color-text-primary);
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* -------------------- 4. Next-Gen Buttons & Micro-Interactions -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-sm {
  padding: 9px 20px;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.0625rem;
}

.btn-full {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.35);
  transform: translateY(-2px);
}

.btn-glow {
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.35);
}

.btn-glow:hover {
  box-shadow: 0 8px 28px rgba(255, 107, 0, 0.45);
}

/* Interactive Shimmer Effect on Buttons */
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  transform: rotate(30deg);
  animation: btnShimmer 4s infinite linear;
}

@keyframes btnShimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  20%, 100% { transform: translateX(100%) rotate(30deg); }
}

.btn-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-subtle);
}

.btn-glass:hover {
  background: #FFFFFF;
  border-color: var(--color-accent-border);
  color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover {
  color: var(--color-accent-primary);
  background-color: var(--color-accent-subtle);
}

.btn-outline {
  background-color: #FFFFFF;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}

.btn-outline:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  background-color: var(--color-accent-subtle);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-accent-primary);
}

.text-link:hover {
  color: var(--color-accent-hover);
  transform: translateX(3px);
}

/* -------------------- 5. Glassmorphism & Modern Card Design -------------------- */
.glass-container {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.modern-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  position: relative;
  transition: all var(--transition-normal);
  overflow: hidden;
}

.modern-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-hover);
}

.card-glow-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.modern-card:hover .card-glow-border {
  opacity: 1;
}

/* -------------------- 6. Floating Capsule Glass Header -------------------- */
.site-header-floating {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 1000;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header-floating.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  padding: 10px 0 !important;
}

.header-container-floating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Left Brand Logo (Clean Inline Layout) */
.brand-logo-clean {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon-box {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-highlight {
  color: #FF6B00;
  font-weight: 800;
}

.brand-tag-uae {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Center Floating Glass Capsule Island (Real Frosted Glassmorphism) */
.center-glass-capsule {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.capsule-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.capsule-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

.capsule-link:hover {
  color: #FF6B00;
  background-color: rgba(255, 107, 0, 0.08);
}

/* Active Menu Item Pill with Vibrant Brand Theme Orange Gradient & Glow */
.capsule-link.active {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.45) !important;
  transform: scale(1.02);
}

/* Right Vibrant Action Button */
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.4);
  transition: all var(--transition-fast);
}

.btn-login-orange:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
  color: #FFFFFF;
}

.user-avatar-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-circle svg {
  stroke: #FF6B00;
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.3);
  cursor: pointer;
}

.mobile-toggle .hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: #FF6B00;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}
.mobile-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {
  .center-glass-capsule {
    display: none !important;
  }
  .mobile-toggle {
    display: flex !important;
  }
  .btn-login-orange {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }
}

.mobile-drawer {
  display: block;
  position: fixed;
  top: 75px;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: calc(100vh - 75px);
  background: #0B1120;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  padding: 24px;
  z-index: 99999;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.open,
.mobile-drawer.active {
  transform: translateX(-320px);
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.mobile-nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: #E2E8F0 !important;
  display: block;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(255, 107, 0, 0.12);
  border-color: rgba(255, 107, 0, 0.3);
  color: #FF7A00 !important;
}

.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -------------------- 7. Full 100vh Hero Screen Wrapper -------------------- */
.hero-screen-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 75px);
  min-height: 620px;
  justify-content: space-between;
  background: linear-gradient(180deg, #070B14 0%, #0B1120 50%, #0F172A 100%);
  position: relative;
  overflow: hidden;
}

/* Full Width Filled Hero Background Image Layer */
.hero-bg-art-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/iptv-background-1.webp') center center / cover no-repeat;
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
  filter: brightness(0.92) contrast(1.08);
  transition: opacity 0.3s ease;
}

.hero-cinematic-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: transparent;
  width: 100%;
  position: relative;
  z-index: 3;
}

/* Center Hero Typography Container */
.hero-cinematic-container {
  position: relative;
  z-index: 10;
  width: 100%;
}

.hero-center-content {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-14px);
}

/* Eyebrow Premium UAE Pill */
.hero-straightforward-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.35);
  border-radius: var(--radius-pill);
  padding: 7px 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hero-straightforward-pill:hover {
  border-color: rgba(255, 107, 0, 0.6);
  background: rgba(255, 107, 0, 0.18);
}

.pulse-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
}

.pulse-live-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #22C55E;
  animation: liveDotPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  will-change: transform, opacity;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.straightforward-text {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #FFA34D;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hero H1 Headline */
.hero-cinematic-title {
  font-size: 3.65rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.14;
  color: #FFFFFF;
  margin-bottom: 16px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
}

/* Subtitle */
.hero-cinematic-subtitle {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 720px;
  margin-bottom: 30px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/* Dual Pill CTA Buttons */
.hero-action-pills-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.btn-get-started-orange {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 25px rgba(255, 107, 0, 0.5);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.btn-get-started-orange:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.65);
  color: #FFFFFF;
}

.btn-arrow-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-free-trial-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-free-trial-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.btn-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.btn-free-trial-glass:hover .btn-arrow-icon {
  transform: translateX(3px);
}

/* 3 Creative & Minimalist Trust Pills */
.hero-trust-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.hero-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-trust-pill:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 107, 0, 0.4);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.2);
}

.pill-svg-icon {
  color: #FF7A1A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill-simple-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #F1F5F9;
  letter-spacing: -0.01em;
}

/* -------------------- 8. Streaming Logos Brand Theme Ribbon (Continuous Infinite Marquee) -------------------- */
.streaming-logos-ribbon {
  background: linear-gradient(180deg, #0F172A 0%, #0B1120 100%);
  padding: 20px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 5;
  user-select: none;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  animation: infiniteSeamlessMarquee 26s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  flex-shrink: 0;
}

.stream-brand-logo {
  height: 30px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity var(--transition-fast);
  display: block;
}

.stream-brand-logo:hover {
  opacity: 1;
  transform: none; /* Removed hover zoom scale */
}

@-webkit-keyframes infiniteSeamlessMarquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-33.333333%, 0, 0);
    transform: translate3d(-33.333333%, 0, 0);
  }
}

@keyframes infiniteSeamlessMarquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-33.333333%, 0, 0);
    transform: translate3d(-33.333333%, 0, 0);
  }
}

/* -------------------- 9. Why We're the Smarter Choice (2-Column Light Theme) -------------------- */
.why-smarter-section {
  padding: 72px 0;
  background-color: #FAFAFC;
  position: relative;
  border-bottom: 1px solid #F1F5F9;
}

.smarter-choice-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: stretch; /* Exact vertical match between left image and right text */
}

/* Left Visual Showcase Banner */
.smarter-visual-col {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.streaming-showcase-img-wrap {
  width: 100%;
  max-width: 410px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
  border: 1px solid #E2E8F0;
  background-color: #0F172A;
  display: flex;
}

.streaming-showcase-img-wrap:hover {
  transform: none;
}

.smarter-showcase-banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: none;
}

/* Right Content Column (Stitched from Top of Image to Bottom of Image) */
.smarter-content-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 4px 10px;
}

.smarter-header-group {
  margin-bottom: 6px;
}

.smarter-eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #FF6B00;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  line-height: 1;
}

.smarter-heading {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 0;
}

.smarter-timeline-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  margin-top: 20px;
  position: relative;
}

/* Subtle Timeline Connector Line with Reduced Opacity */
.smarter-timeline-list::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: rgba(203, 213, 225, 0.35);
  z-index: 1;
}

.smarter-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.smarter-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.orange-check-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.45);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.orange-check-badge svg {
  width: 17px;
  height: 17px;
}

.timeline-connect-line {
  display: none;
}

.smarter-item-body {
  padding-top: 4px;
}

.smarter-item-title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.smarter-item-desc {
  font-size: 0.9375rem;
  color: #64748B;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* -------------------- 10. IPTV Benefits Section -------------------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.benefit-card {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}

.benefit-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all var(--transition-fast);
}

.benefit-card:hover .benefit-icon-box {
  background: var(--color-accent-gradient);
  color: #FFFFFF;
  border-color: transparent;
  transform: scale(1.05);
}

.benefit-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.benefit-desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

.card-footer-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  background-color: var(--color-accent-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  width: fit-content;
}

/* -------------------- 11. Why Choose Us -------------------- */
.why-choose-section {
  padding: 48px 0 52px 0;
  position: relative;
  background-color: #FFFFFF;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.split-visual-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-choose-image-wrapper {
  width: 100%;
  max-width: 540px;
  display: flex;
  justify-content: center;
  position: relative;
}

.why-choose-showcase-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.08));
}

.choose-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.benefits-check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.2s ease;
}

.check-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35);
  transition: all 0.2s ease;
}

.check-item:hover .check-icon {
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.5);
  transform: scale(1.08);
}

.check-content strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 3px;
}

.check-content p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* -------------------- 4. Features & Capabilities (Compact Luxury Showcase) -------------------- */
.benefits-section {
  padding: 44px 0 48px 0;
  background-color: #FAFAFC;
  position: relative;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.benefits-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.benefits-main-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.benefits-sub-title {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto 24px auto;
  line-height: 1.5;
}

.deluxe-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.deluxe-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.deluxe-feature-card:hover {
  border-color: #FF6B00;
  box-shadow: 0 10px 24px rgba(255, 107, 0, 0.12);
  transform: translateY(-2px);
}

.feature-icon-badge {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.deluxe-feature-card:hover .feature-icon-badge {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

.feature-card-content {
  flex: 1;
  min-width: 0;
}

.feature-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.feature-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-micro-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #EA580C;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.feature-desc {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* -------------------- 12. Device Compatibility (Standalone Platform Apps Banner) -------------------- */
.devices-section {
  padding: 48px 0 52px 0;
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1px solid #F1F5F9;
}

.devices-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.devices-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.devices-sub-title {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.devices-hardware-showcase {
  max-width: 980px;
  margin: 24px auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.devices-hardware-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devices-hardware-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(15, 23, 42, 0.08));
  display: block;
}

.platform-standalone-showcase {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 16px;
}

.platform-banner-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.platform-standalone-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply; /* Seamlessly removes any white image background */
  filter: contrast(1.08) brightness(0.98);
  display: block;
}

/* -------------------- 12.5. Cinematic Free Trial Banner (Brand Theme Styled) -------------------- */
.free-trial-banner-section {
  padding: 20px 0 20px 0;
  background-color: #FFFFFF;
  position: relative;
}

.free-trial-cinematic-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.trial-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(7, 9, 15, 0.97) 0%, rgba(7, 9, 15, 0.78) 45%, rgba(7, 9, 15, 0.97) 100%);
  z-index: 1;
}

.trial-content-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.95fr;
  align-items: center;
  gap: 24px;
  padding: 26px 36px; /* Minimized vertical padding */
}

.trial-left-col {
  display: flex;
  flex-direction: column;
}

.trial-badge-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 800;
  color: #FF6B00;
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.35);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.free-trial-cinematic-card .trial-main-title {
  font-size: 3rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
}

.trial-highlight {
  color: #FF6B00 !important;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #FF6B00 !important;
}

/* Center 3D Angled Smart TV Asset */
.trial-center-tv-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.angled-smart-tv-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.trial-tv-asset-img {
  max-width: 100%;
  width: 250px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.8));
  display: block;
}

/* Right Column CTA & Proof (Brand Theme) */
.trial-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.btn-start-trial-gold {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  padding: 10px 12px 10px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.4);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 260px;
}

.btn-start-trial-gold:hover {
  background: linear-gradient(135deg, #FF8800 0%, #FFA133 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 107, 0, 0.55);
}

.btn-arrow-box {
  width: 36px;
  height: 36px;
  background: #0B1120;
  color: #FF6B00;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trial-streamers-proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 260px;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.streamers-count-text {
  font-size: 0.875rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
}

.streamers-count-text span {
  display: block;
  font-size: 0.71875rem;
  font-weight: 500;
  color: #94A3B8;
}

.streamers-avatar-stack {
  display: flex;
  align-items: center;
}

.streamer-avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #0F172A;
  margin-left: -9px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.streamer-avatar-img:first-child {
  margin-left: 0;
}

.trial-activation-note {
  font-size: 0.775rem;
  color: #CBD5E1;
  margin-top: 8px;
  font-weight: 600;
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* -------------------- 13. How It Works (3 Simple Steps Exact Reference Design) -------------------- */
.how-it-works-section {
  padding: 48px 0 52px 0;
  background-color: #FFFFFF; /* Clean background */
  position: relative;
  border: none;
}

.steps-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.steps-main-heading {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.steps-sub-heading {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto 28px auto;
  line-height: 1.6;
}

.steps-luxury-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-luxury-card {
  background: #14161E; /* Exact dark matte card from reference */
  border-radius: 20px;
  padding: 38px 32px 42px 32px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.step-luxury-card:hover {
  transform: none; /* Removed hover translate / zoom */
  border-color: rgba(255, 107, 0, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.step-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.step-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.step-svg-icon svg {
  width: 54px;
  height: 54px;
  stroke: #FF6B00;
}

.step-luxury-card:hover .step-svg-icon svg {
  transform: none; /* Removed hover zoom scale */
}

/* Exact Reference Watermark Count Number */
.step-watermark-num {
  font-size: 6.85rem; /* Significantly Increased Large Bold Watermark Number */
  font-weight: 900;
  color: #6E3814; /* Deep copper/terracotta color from reference */
  line-height: 0.75;
  letter-spacing: -0.05em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  transition: color 0.3s ease;
}

.step-luxury-card:hover .step-watermark-num {
  color: #FF6B00; /* Glowing Orange on hover */
}

.step-card-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 24px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.step-card-desc {
  font-size: 0.9375rem;
  color: #8E98A8; /* Soft grey from reference */
  line-height: 1.65;
  margin: 0;
  font-weight: 400;
}

/* -------------------- 14. Pricing Section (4-Card Luxury Theme Design) -------------------- */
/* -------------------- 14. Reference Exact Pricing Section (4 Cards) -------------------- */
.pricing-section {
  padding: 48px 0 52px 0;
  position: relative;
  background-color: #FFFFFF;
}

.pricing-pill-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #EA580C;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  padding: 5px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.12);
}

.pricing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
}

.ref-pricing-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.ref-pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(255, 107, 0, 0.12);
  border-color: #FFB37A;
}

/* Card 3: Popular Warm Cream Highlight */
.ref-pricing-card.popular-highlight-card {
  background-color: #FFFDF0;
  border: 1.5px solid #FDE68A;
  box-shadow: 0 12px 36px rgba(234, 88, 12, 0.09);
}

/* Diagonal Green Top-Left Corner Ribbon */
.ref-corner-ribbon {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.ref-corner-ribbon span {
  position: absolute;
  display: block;
  width: 130px;
  padding: 4px 0;
  background-color: #15803D;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
  left: -32px;
  top: 18px;
  transform: rotate(-45deg);
  letter-spacing: 0.08em;
}

/* Header Area */
.ref-card-header {
  padding: 24px 20px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-save-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #78350F;
  background: #FED7AA;
  border-radius: var(--radius-pill);
  padding: 4px 16px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.ref-plan-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #18181B;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

/* Dark Price Banner Strip */
.ref-price-banner {
  background-color: #1C1917;
  padding: 13px 16px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.ref-cur-label {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FF6B00;
}

.ref-cur-num {
  font-size: 2.35rem;
  font-weight: 900;
  color: #FF6B00;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Card Body & Features List */
.ref-card-body {
  padding: 24px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ref-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.ref-features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.4;
}

.ref-check-svg {
  flex-shrink: 0;
}

.ref-check-svg circle,
.ref-check-svg path {
  stroke: #FF6B00;
}

/* Buy Now Pill Button - Signature Theme Gradient */
.ref-buy-now-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.38);
  margin-top: auto;
  border: none;
}

.ref-buy-now-btn:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 107, 0, 0.55);
}

/* Money Back Guarantee Text */
.ref-guarantee-text {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #15803D;
  margin-top: 14px;
}

.white-firetv {
  color: #FDBA74;
}

.white-firetv span {
  color: #7DD3FC;
}

/* -------------------- 15. Content Experience -------------------- */
.content-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.cat-card {
  overflow: hidden;
}

.cat-visual {
  height: 160px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.live-tv-bg { background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%); }
.sports-bg  { background: linear-gradient(135deg, #064E3B 0%, #0F172A 100%); }
.movies-bg  { background: linear-gradient(135deg, #581C87 0%, #0F172A 100%); }
.news-bg    { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); }

.art-wave-line {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 180px;
  height: 180px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.art-stadium-rings {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(74, 222, 128, 0.35);
  border-radius: 50%;
}

.art-film-stripes {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 12px, transparent 12px, transparent 24px);
}

.art-globe-mesh {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.art-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.art-live-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #EF4444;
}

.art-accent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent-primary);
}

.cat-content {
  padding: 28px;
}

.cat-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cat-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-icon-row h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cat-content p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* -------------------- 16. UAE Focus Section (Continuous Smooth Auto-Slider) -------------------- */
.uae-focus-section {
  padding: 48px 0 52px 0;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.emirates-slider-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  gap: 20px;
  width: 100%;
  padding: 24px 20px 32px 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.emirates-slider-wrapper:active {
  cursor: grabbing;
}

.emirates-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.emirates-marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.emirate-destination-card {
  position: relative;
  width: 290px;
  min-width: 290px;
  height: 390px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.emirate-destination-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(255, 107, 0, 0.2);
  border-color: rgba(255, 107, 0, 0.5);
}

.emirate-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.emirate-destination-card:hover .emirate-card-bg {
  transform: scale(1.08);
}

.emirate-dark-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.3) 40%, rgba(15, 23, 42, 0.95) 100%);
  z-index: 1;
}

.pulse-green-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
}

.emirate-info-bottom {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
}

.emirate-region-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FF8800;
  margin-bottom: 4px;
}

.emirate-name {
  font-size: 1.375rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.25;
}

.emirate-desc {
  font-size: 0.8125rem;
  color: #E2E8F0;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  opacity: 0.95;
}

/* -------------------- 17. Luxury Customer Reviews Showcase (Reference Design) -------------------- */
.reviews-showcase-section {
  padding: 48px 0 52px 0;
  background-color: #FFFFFF;
  position: relative;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.reviews-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reviews-main-heading {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.reviews-showcase-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 28px;
}

/* Left Column: Rating Score Card */
.rating-score-card {
  background: #0F172A;
  border-radius: 24px;
  padding: 38px 30px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.score-large-num {
  font-size: 4rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.score-stars-row, .testimonial-stars-row {
  display: flex;
  gap: 4px;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.gold-star {
  color: #F59E0B; /* Rich Gold */
}

.score-reviews-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 20px;
}

.score-card-tagline {
  font-size: 0.9375rem;
  color: #CBD5E1;
  line-height: 1.55;
  margin-bottom: 28px;
}

.customer-avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 700;
  margin-left: -10px;
}

.avatar-circle:first-child {
  margin-left: 0;
}

.av-1 { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.av-2 { background: linear-gradient(135deg, #EC4899, #BE185D); }
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }

/* Right Column: Featured Testimonial Card */
.featured-testimonial-card {
  background: #0B1120;
  border-radius: 24px;
  padding: 34px 38px 28px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 50px rgba(11, 17, 32, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  min-height: 290px;
}

/* Glowing Auto-Slide Progress Bar */
.review-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.review-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #FF6B00 0%, #FFA800 100%);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.8);
  will-change: transform;
}

/* Card Top Row with Stars + Counter */
.testimonial-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.review-slide-counter {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Real Slider Window & Physical Sliding Track */
.reviews-slider-window {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 4px 0;
}

.reviews-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.review-slide-item {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 12px;
}

.testimonial-quote-text {
  font-size: 1.225rem;
  font-style: italic;
  line-height: 1.65;
  color: #F8FAFC;
  font-weight: 400;
  margin: 0 0 22px 0;
  min-height: 72px;
}

.testimonial-author-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35);
  flex-shrink: 0;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.author-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #F59E0B;
}

/* Card Bottom Bar: Pagination Dots & Controls */
.testimonial-card-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 14px;
  gap: 16px;
}

.review-dots-container {
  display: flex;
  align-items: center;
  gap: 7px;
}

.review-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 4px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

.review-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
}

.review-dot:hover {
  background: rgba(255, 107, 0, 0.6);
}

.review-dot.active {
  width: 26px;
  background: #FF6B00;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
}

/* Reviews Carousel Navigation Arrows */
.reviews-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-review-nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-review-nav:hover {
  background: #FF6B00;
  border-color: #FF6B00;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.4);
}

/* -------------------- 18. Luxury Frosted Glass FAQ Accordion -------------------- */
.faq-section {
  padding: 48px 0 52px 0;
  background-color: #FFFFFF;
  position: relative;
  border-top: none;
}

.faq-container {
  max-width: 880px;
  margin: 0 auto;
}

.faq-eyebrow-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background-color: #FFF7ED;
  border: 1px solid #FFEDD5;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.08);
}

.faq-main-heading {
  font-size: 2.45rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin-bottom: 28px;
}

/* Luxury Frosted Glass Card Container */
.luxury-faq-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 28px;
  padding: 16px 36px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  position: relative;
}

.faq-luxury-row {
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 22px 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-luxury-row:last-child {
  border-bottom: none;
}

.faq-luxury-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0F172A;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 18px;
  transition: color 0.25s ease;
}

.faq-luxury-question:hover,
.faq-luxury-row.active .faq-luxury-question {
  color: #FF6B00;
}

/* Theme Brand Orange Arrow Badge */
.faq-theme-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B00;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.08);
}

.faq-luxury-row.active .faq-theme-arrow {
  transform: rotate(180deg);
  background: #FF6B00;
  color: #FFFFFF;
  border-color: #FF6B00;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35);
}

/* Ultra Smooth Expand / Collapse Animation */
.faq-luxury-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.35s ease;
  opacity: 0;
  transform: translateY(-4px);
}

.faq-luxury-row.active .faq-luxury-answer {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.faq-luxury-answer p {
  padding-top: 14px;
  font-size: 0.9625rem;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* -------------------- 19. Direct Reach Us Action Capsules Strip (Single-Row Frosted Glass Mode) -------------------- */
.direct-reach-strip {
  padding: 38px 0 44px 0;
  background-color: #FAFAFC;
  position: relative;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
}

.reach-capsules-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 100% Single Same Row */
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
}

.reach-action-capsule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.85); /* Frosted Glass Mode */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 107, 0, 0.45); /* Glowing theme outline */
  border-radius: 100px;
  height: 74px;
  width: 100%;
  padding: 0 26px 0 58px; /* Space for top-left overlapping badge */
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: all 0.25s ease;
  cursor: pointer;
}

.reach-action-capsule:hover {
  background: #FFFFFF;
  border-color: #FF6B00;
  box-shadow: 0 14px 36px rgba(255, 107, 0, 0.16);
  transform: none; /* No translate / zoom */
}

/* Top-Left Overlapping Icon Badge (No Zoom Scale) */
.capsule-icon-circle {
  position: absolute;
  left: -16px;
  top: -16px; /* Positioned at top-left overlapping the border */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(255, 107, 0, 0.45);
  flex-shrink: 0;
  transition: box-shadow 0.25s ease;
  z-index: 5;
  transform: none; /* No hover scale */
}

.capsule-icon-circle svg {
  width: 24px;
  height: 24px;
}

/* Mail Branded Capsule */
.reach-action-capsule.capsule-mail {
  border-color: rgba(255, 107, 0, 0.45);
}
.reach-action-capsule.capsule-mail .capsule-icon-circle {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  box-shadow: 0 4px 18px rgba(255, 107, 0, 0.45);
}
.reach-action-capsule.capsule-mail:hover {
  border-color: #FF6B00;
  box-shadow: 0 14px 36px rgba(255, 107, 0, 0.18);
}
.reach-action-capsule.capsule-mail:hover .capsule-action-text,
.reach-action-capsule.capsule-mail:hover .capsule-arrow-icon {
  color: #EA580C;
}

/* Official WhatsApp Branded Capsule (#25D366) */
.reach-action-capsule.capsule-whatsapp {
  border-color: rgba(37, 211, 102, 0.45);
}
.reach-action-capsule.capsule-whatsapp .capsule-icon-circle {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
}
.reach-action-capsule.capsule-whatsapp .capsule-arrow-icon {
  color: #25D366;
}
.reach-action-capsule.capsule-whatsapp:hover {
  border-color: #25D366;
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.22);
}
.reach-action-capsule.capsule-whatsapp:hover .capsule-icon-circle {
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.65);
}
.reach-action-capsule.capsule-whatsapp:hover .capsule-action-text,
.reach-action-capsule.capsule-whatsapp:hover .capsule-arrow-icon {
  color: #128C7E;
}

/* Official Telegram Branded Capsule (#229ED9) */
.reach-action-capsule.capsule-telegram {
  border-color: rgba(34, 158, 217, 0.45);
}
.reach-action-capsule.capsule-telegram .capsule-icon-circle {
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 4px 18px rgba(34, 158, 217, 0.45);
}
.reach-action-capsule.capsule-telegram .capsule-arrow-icon {
  color: #229ED9;
}
.reach-action-capsule.capsule-telegram:hover {
  border-color: #229ED9;
  box-shadow: 0 14px 36px rgba(34, 158, 217, 0.22);
}
.reach-action-capsule.capsule-telegram:hover .capsule-icon-circle {
  box-shadow: 0 6px 22px rgba(34, 158, 217, 0.65);
}
.reach-action-capsule.capsule-telegram:hover .capsule-action-text,
.reach-action-capsule.capsule-telegram:hover .capsule-arrow-icon {
  color: #229ED9;
}

.capsule-action-text {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A; /* Clean dark text on glass */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
  padding-left: 6px;
  margin: 0;
  transition: color 0.2s ease;
}

.reach-action-capsule:hover .capsule-action-text {
  color: #EA580C;
}

.capsule-arrow-icon {
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  transition: transform 0.25s ease, color 0.2s ease;
}

.capsule-arrow-icon svg {
  width: 19px;
  height: 19px;
}

.reach-action-capsule:hover .capsule-arrow-icon {
  transform: translate(3px, -3px);
  color: #EA580C;
}

/* -------------------- 20. Luxury Simple Professional Footer -------------------- */
.site-footer {
  background-color: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding: 44px 0 24px 0;
  position: relative;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.footer-brand-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-clean {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 12px;
}

.footer-simple-bio {
  font-size: 0.875rem;
  color: #64748B;
  line-height: 1.6;
  max-width: 360px;
  margin-bottom: 16px;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.footer-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
}

.footer-col-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.footer-clean-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-clean-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748B;
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-block;
}

.footer-clean-links a:hover {
  color: #FF6B00;
  transform: translateX(3px);
}

.footer-contact-col {
  display: flex;
  flex-direction: column;
}

.footer-direct-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 18px;
}

.footer-support-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
  transition: all var(--transition-fast);
  width: fit-content;
}

.footer-support-capsule:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.45);
  color: #FFFFFF;
}

.footer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-email-link:hover {
  color: #FF6B00;
}

.footer-payment-strip {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-shield-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
}

.footer-dmca-badge-wrap {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
}

.footer-dmca-badge {
  display: block;
  max-width: 130px;
  height: auto;
  border-radius: 4px;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-dmca-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* -------------------- 20. Master SILO Directory & Semantic Link Hub -------------------- */
.devices-silo-pills-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.silo-soft-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.silo-soft-pill:hover {
  color: #FF6B00;
  background: #FFF7ED;
  border-color: #FFEDD5;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.12);
}

.feature-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.feature-title-link:hover {
  color: #FF6B00;
}

.footer-minimal-bottom {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #94A3B8;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright-text {
  margin: 0;
  color: #64748B;
  font-weight: 500;
}

.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0F172A;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  transition: all var(--transition-fast);
}

.footer-back-to-top:hover {
  background: #FFF7ED;
  color: #FF6B00;
  border-color: #FFEDD5;
  transform: translateY(-2px);
}

/* -------------------- 21. Responsive Breakpoints -------------------- */
@media (max-width: 1024px) {
  .hero-screen-wrapper {
    height: auto;
    min-height: auto;
    padding-bottom: 24px;
  }

  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .hero-left-content {
    align-items: center;
    text-align: center;
  }

  .hero-left-content .hero-action-pills-group,
  .hero-left-content .hero-trust-pills-row {
    justify-content: center;
  }

  .center-glass-capsule {
    display: none;
  }

  .trial-content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    padding: 36px 24px;
  }

  .trial-left-col, .trial-right-col {
    align-items: center;
  }

  .mobile-toggle {
    display: flex;
  }

  .mobile-drawer {
    display: block;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-visual-wrapper {
    max-width: 560px;
    margin: 0 auto;
  }

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

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

  .steps-luxury-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .deluxe-device-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .device-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .emirates-destination-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .split-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

@media (max-width: 768px) {
  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .deluxe-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .deluxe-device-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .reach-capsules-row {
    gap: 32px;
  }

  .reach-action-capsule {
    min-width: 280px;
    width: 100%;
  }

  .emirates-destination-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reviews-showcase-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .smarter-choice-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .smarter-heading {
    font-size: 2rem;
  }

  .hero-cinematic-title {
    font-size: 2.5rem;
  }

  .hero-cinematic-subtitle {
    font-size: 1rem;
  }

  .hero-action-pills-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-get-started-orange, .btn-free-trial-glass {
    width: 100%;
    justify-content: center;
  }

  .desktop-nav, .header-contact-btn {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .mobile-drawer {
    display: block;
  }

  .hero-title {
    font-size: 2.35rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .trust-strip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .strip-divider {
    display: none;
  }

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

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

  .steps-connector-line {
    display: none;
  }

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

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

  .deluxe-pricing-card {
    transform: none;
  }

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

  .deluxe-pricing-card {
    transform: none;
  }

  .content-categories-grid {
    grid-template-columns: 1fr;
  }

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

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

  .cta-heading {
    font-size: 2rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.05rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .hero-trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

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

  .floating-chip {
    display: none;
  }

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

/* -------------------- 22. Reduced Motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  *:not(.marquee-track):not(.marquee-track *):not(.stream-brand-logo), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track {
    animation: infiniteSeamlessMarquee 32s linear infinite !important;
  }
}

/* ----------------------------------------------------
   23. WhatsApp Luxury Floating Action Button (FAB)
   ---------------------------------------------------- */
.whatsapp-sticky-fab-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: var(--font-primary);
  user-select: none;
}

/* Floating WhatsApp Button */
.wa-fab-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 20px 12px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(15, 23, 42, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  animation: waAttentionWobble 9s ease-in-out infinite;
  white-space: nowrap;
}

.wa-fab-btn:hover {
  background: linear-gradient(135deg, #20BD5A 0%, #0F7569 100%);
  box-shadow: 0 14px 40px rgba(37, 211, 102, 0.65), 0 6px 18px rgba(15, 23, 42, 0.25);
  transform: translateY(-3px) scale(1.03);
  color: #FFFFFF;
}

.wa-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.wa-icon-box svg {
  width: 30px;
  height: 30px;
  fill: #FFFFFF;
  display: block;
}

.wa-fab-label {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
  line-height: 1;
}

/* Pulsing Radar Rings */
.wa-radar-ring {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.6);
  pointer-events: none;
  z-index: -1;
  animation: waRadarPulse 2.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  will-change: transform, opacity;
}

.wa-radar-ring.ring-2 {
  animation-delay: 1.3s;
}

@keyframes waRadarPulse {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.85);
  }
  70% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.0);
  }
}

/* Periodic Attention Wobble */
@keyframes waAttentionWobble {
  0%, 82%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  85% {
    transform: translateY(-4px) rotate(-3deg);
  }
  88% {
    transform: translateY(-2px) rotate(3deg);
  }
  91% {
    transform: translateY(-4px) rotate(-2deg);
  }
  94% {
    transform: translateY(0) rotate(1deg);
  }
  97% {
    transform: translateY(-1px) rotate(0deg);
  }
}

/* 1 New Message Notification Badge */
.wa-unread-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
  border: 2px solid #FFFFFF;
  z-index: 10;
  animation: waBadgeBounce 2s infinite ease-in-out;
}

@keyframes waBadgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Interactive Floating Speech Bubble Callout */
.wa-chat-bubble {
  position: relative;
  width: 320px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #E2E8F0;
  opacity: 0;
  transform: translateY(14px) scale(0.95);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}

.wa-chat-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 32px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  transform: rotate(45deg);
}

.wa-bubble-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.wa-bubble-close:hover {
  color: #0F172A;
}

.wa-bubble-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.wa-agent-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FED7AA;
  flex-shrink: 0;
}

.wa-agent-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22C55E;
  border: 2px solid #FFFFFF;
}

.wa-agent-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.wa-agent-reply-time {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #16A34A;
  line-height: 1.2;
  margin-top: 2px;
}

.wa-bubble-body {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #F1F5F9;
}

.wa-bubble-msg {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #334155;
  margin: 0;
}

.wa-bubble-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: all 0.2s ease;
}

.wa-bubble-action-btn:hover {
  background: #20BD5A;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Mobile Responsiveness for WhatsApp FAB */
@media (max-width: 768px) {
  .whatsapp-sticky-fab-wrap {
    bottom: 20px;
    right: 16px;
  }
  .wa-fab-btn {
    padding: 12px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    justify-content: center;
  }
  .wa-fab-label {
    display: none;
  }
  .wa-radar-ring {
    left: 50%;
  }
  .wa-chat-bubble {
    width: 290px;
    right: -6px;
  }
  .wa-chat-bubble::after {
    right: 28px;
  }
}


/* ==========================================================================
   EXTRACTED STYLES FOR: pricing.html
   ========================================================================== */
/* ==========================================================================
       DEDICATED PRICING & PLAN COMPARISON HUB STYLES
       ========================================================================== */
    .pricing-page-wrapper {
      background-color: #FAFAFB;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .pricing-hero-section {
      padding: 60px 0 44px 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 70%), #FFFFFF;
      border-bottom: 1px solid #E2E8F0;
      text-align: center;
    }

    .pricing-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 5px 16px;
      border-radius: var(--radius-pill);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }

    .pricing-main-title {
      font-size: 3rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #0F172A;
      margin-bottom: 14px;
    }

    .pricing-main-sub {
      font-size: 1.1rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto 28px auto;
      line-height: 1.6;
    }

    /* 4-Card Pricing Grid */
    .pricing-cards-section {
      padding: 56px 0 72px 0;
      flex: 1;
    }

    .pricing-cards-quad-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 56px;
    }

    .price-plan-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 22px;
      padding: 32px 24px;
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all 0.25s ease;
    }

    .price-plan-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.08);
      border-color: #CBD5E1;
    }

    /* Popular 12-Month Card Styling */
    .price-plan-card.featured-card {
      border: 2px solid #FF6B00;
      box-shadow: 0 16px 36px -4px rgba(255, 107, 0, 0.15);
      background: #FFFFFF;
    }

    .popular-tag-badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: var(--radius-pill);
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
    }

    .plan-header {
      margin-bottom: 20px;
    }

    .plan-name {
      font-size: 1.25rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 6px;
    }

    .plan-tagline {
      font-size: 0.8125rem;
      color: #64748B;
      display: block;
    }

    .plan-price-wrap {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid #F1F5F9;
    }

    .currency-symbol {
      font-size: 1.25rem;
      font-weight: 800;
      color: #0F172A;
    }

    .price-number {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.04em;
      line-height: 1;
    }

    .price-period {
      font-size: 0.875rem;
      font-weight: 600;
      color: #64748B;
    }

    .plan-features-list {
      list-style: none;
      padding: 0;
      margin: 0 0 32px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .plan-feature-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.875rem;
      font-weight: 600;
      color: #334155;
    }

    .check-svg-icon {
      color: #16A34A;
      flex-shrink: 0;
    }

    .btn-plan-action {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      border-radius: var(--radius-pill);
      font-size: 0.9375rem;
      font-weight: 800;
      text-decoration: none;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .btn-plan-action.btn-secondary {
      background: #F1F5F9;
      color: #0F172A;
      border: 1px solid #E2E8F0;
    }

    .btn-plan-action.btn-secondary:hover {
      background: #E2E8F0;
      color: #000000;
    }

    .btn-plan-action.btn-primary-orange {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35);
      border: none;
    }

    .btn-plan-action.btn-primary-orange:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
    }

    /* Comparison Table Section */
    /* ==========================================================================
       SMART SAVINGS BREAKDOWN STYLES (CLEAN, MINIMAL & PROFESSIONAL)
       ========================================================================== */
    .smart-savings-section {
      border-radius: 24px;
      padding: 44px 36px;
      margin-bottom: 56px;
    }

    .savings-header-center {
      text-align: center;
      max-width: 650px;
      margin: 0 auto 36px auto;
    }

    .savings-badge-pill {
      display: inline-flex;
      align-items: center;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      letter-spacing: 0.06em;
      margin-bottom: 12px;
    }

    .savings-main-title {
      font-size: 2.25rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      margin-bottom: 8px;
    }

    .savings-subtitle {
      font-size: 0.9375rem;
      color: #64748B;
      line-height: 1.6;
    }

    .savings-comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: stretch;
    }

    /* Left Card: Expensive Subscriptions */
    .expensive-subs-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 28px;
      display: flex;
      flex-direction: column;
    }

    .subs-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #F1F5F9;
      margin-bottom: 18px;
    }

    .subs-card-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 2px;
    }

    .subs-card-sub {
      font-size: 0.75rem;
      color: #64748B;
      display: block;
    }

    .subs-total-badge {
      text-align: right;
    }

    .subs-strike-label {
      font-size: 0.6875rem;
      color: #64748B;
      display: block;
      font-weight: 600;
    }

    .monthly-price-strike {
      font-size: 1rem;
      font-weight: 800;
      color: #DC2626;
      text-decoration: line-through;
    }

    .subs-items-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      margin-bottom: 20px;
    }

    .sub-row-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: transparent;
      border: 1px solid #F1F5F9;
      border-radius: 10px;
      transition: border-color 0.2s ease;
    }

    .sub-row-item:hover {
      border-color: #CBD5E1;
    }

    .sub-brand-col {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-logo-img {
      height: 22px;
      width: auto;
      max-width: 65px;
      object-fit: contain;
      filter: brightness(0) opacity(0.85);
      transition: all 0.2s ease;
      display: block;
    }

    .sub-row-item:hover .brand-logo-img {
      filter: brightness(0) opacity(1);
      transform: scale(1.05);
    }

    .sub-name {
      font-size: 0.8125rem;
      font-weight: 600;
      color: #1E293B;
    }

    .sub-price-col {
      text-align: right;
    }

    .sub-price-usd {
      font-size: 0.8125rem;
      font-weight: 700;
      color: #0F172A;
      font-family: 'JetBrains Mono', monospace;
    }

    .sub-price-aed {
      font-size: 0.6875rem;
      color: #64748B;
      margin-left: 3px;
    }

    .expensive-total-strip {
      padding: 12px 16px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8125rem;
    }

    .total-caption {
      color: #9A3412;
      font-weight: 600;
    }

    .total-amount-red {
      color: #DC2626;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Right Card: IPTV Dubai VIP */
    .smart-choice-vip-card {
      background: #FFFFFF;
      border: 2px solid #FF6B00;
      border-radius: 20px;
      padding: 28px;
      box-shadow: 0 10px 30px -4px rgba(255, 107, 0, 0.12);
      display: flex;
      flex-direction: column;
    }

    .vip-badge-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .vip-choice-pill {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }

    .vip-status-green {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 700;
      color: #16A34A;
    }

    .green-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #16A34A;
    }

    .vip-main-brand-info {
      margin-bottom: 18px;
    }

    .vip-plan-headline {
      font-size: 1.6rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 2px;
    }

    .vip-plan-desc {
      font-size: 0.8125rem;
      color: #64748B;
    }

    .vip-clean-checks-list {
      list-style: none;
      padding: 0;
      margin: 0 0 18px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .vip-clean-checks-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.8125rem;
      color: #334155;
      line-height: 1.4;
    }

    .check-icon-svg {
      flex-shrink: 0;
      margin-top: 1px;
    }

    .vip-clean-checks-list strong {
      color: #0F172A;
    }

    /* Included Logos Strip */
    .vip-included-logos-strip {
      padding: 10px 14px;
      background: transparent;
      border: 1px solid #F1F5F9;
      border-radius: 12px;
      margin-bottom: 18px;
    }

    .logos-strip-label {
      display: block;
      font-size: 0.6875rem;
      font-weight: 700;
      color: #64748B;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    .logos-mini-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .mini-stream-logo {
      height: 18px;
      width: auto;
      max-width: 55px;
      object-fit: contain;
      filter: brightness(0) opacity(0.75);
      transition: all 0.2s ease;
      display: block;
    }

    .mini-stream-logo:hover {
      filter: brightness(0) opacity(1);
    }

    /* Price Split & CTA - Clean White/Light Theme */
    .vip-pricing-bottom-box {
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 14px;
      padding: 18px 20px;
      color: #0F172A;
    }

    .vip-price-split {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .price-eyebrow {
      font-size: 0.6875rem;
      color: #64748B;
      display: block;
      font-weight: 600;
    }

    .price-val-row {
      display: flex;
      align-items: baseline;
      gap: 3px;
    }

    .price-val-row .cur-txt {
      font-size: 0.875rem;
      font-weight: 800;
      color: #EA580C;
    }

    .price-val-row .main-price-num {
      font-size: 1.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .price-val-row .per-mo-txt {
      font-size: 0.75rem;
      color: #64748B;
      font-weight: 600;
    }

    .sub-price-hint {
      font-size: 0.6875rem;
      color: #64748B;
      display: block;
    }

    .savings-highlight-card {
      background: #DCFCE7;
      border: 1px solid #BBF7D0;
      padding: 6px 12px;
      border-radius: 8px;
      text-align: center;
    }

    .save-tag {
      font-size: 0.625rem;
      font-weight: 800;
      color: #15803D;
      display: block;
    }

    .save-amount-text {
      font-size: 1rem;
      font-weight: 800;
      color: #16A34A;
      display: block;
    }

    .save-sub-text {
      font-size: 0.625rem;
      color: #15803D;
      display: block;
    }

    .btn-clean-vip-action {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-size: 0.9375rem;
      font-weight: 800;
      padding: 12px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
      transition: all 0.2s ease;
    }

    .btn-clean-vip-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(255, 107, 0, 0.45);
    }

    /* Guarantee Shield Box */
    .guarantee-shield-card {
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      border-radius: 20px;
      padding: 36px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      gap: 32px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
    }

    .shield-icon-large {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: rgba(255, 107, 0, 0.15);
      border: 1px solid rgba(255, 107, 0, 0.3);
      color: #FF8800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .guarantee-text-wrap h3 {
      font-size: 1.35rem;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .guarantee-text-wrap p {
      font-size: 0.9375rem;
      color: #94A3B8;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .savings-comparison-grid {
        grid-template-columns: 1fr;
      }
      .smart-savings-section {
        padding: 28px 20px;
      }
      .guarantee-shield-card {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 768px) {
      .pricing-main-title {
        font-size: 2.25rem;
      }
    }

    /* Guarantee Shield Box */
    .guarantee-shield-card {
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      border-radius: 20px;
      padding: 36px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      gap: 32px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
    }

    .shield-icon-large {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: rgba(255, 107, 0, 0.15);
      border: 1px solid rgba(255, 107, 0, 0.3);
      color: #FF8800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .guarantee-text-wrap h3 {
      font-size: 1.35rem;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .guarantee-text-wrap p {
      font-size: 0.9375rem;
      color: #94A3B8;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .savings-comparison-grid {
        grid-template-columns: 1fr;
      }
      .smart-savings-section {
        padding: 32px 20px;
      }
      .guarantee-shield-card {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 768px) {
      .pricing-main-title {
        font-size: 2.25rem;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: free-trial.html
   ========================================================================== */
/* ==========================================================================
       DEDICATED 12-HOUR FREE TRIAL LANDING PAGE STYLES
       ========================================================================== */
    .trial-page-wrapper {
      background-color: #FAFAFB;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .trial-hero-split {
      padding: 60px 0 80px 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.09) 0%, transparent 65%), #FFFFFF;
      border-bottom: none;
    }

    .trial-split-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 56px;
      align-items: center;
    }

    .trial-badge-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 5px 16px;
      border-radius: var(--radius-pill);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }

    .pulse-green-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #16A34A;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    }

    .trial-main-title {
      font-size: 3rem;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #0F172A;
      margin-bottom: 16px;
    }

    .trial-main-sub {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #475569;
      margin-bottom: 28px;
    }

    /* Live UAE Edge Node Telemetry */
    .trial-telemetry-card {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 14px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .telemetry-node-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .telemetry-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FF6B00;
    }

    .telemetry-label {
      font-size: 0.75rem;
      color: #64748B;
      display: block;
      font-weight: 600;
    }

    .telemetry-value {
      font-size: 0.875rem;
      font-weight: 800;
      color: #0F172A;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Value Highlights List */
    .trial-highlights-list {
      list-style: none;
      padding: 0;
      margin: 0 0 32px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .trial-highlight-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.95rem;
      font-weight: 600;
      color: #1E293B;
    }

    .check-icon-circle {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #DCFCE7;
      color: #16A34A;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Interactive Instant Request Card */
    .trial-form-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 24px;
      padding: 36px;
      box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.08);
      position: relative;
    }

    .trial-form-card::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 20%;
      right: 20%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #FF6B00, transparent);
    }

    .form-card-title {
      font-size: 1.5rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .form-card-sub {
      font-size: 0.875rem;
      color: #64748B;
      margin-bottom: 24px;
      display: block;
    }

    .trial-input-group {
      margin-bottom: 18px;
    }

    .trial-input-label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 700;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .trial-select, .trial-text-input {
      width: 100%;
      padding: 13px 16px;
      border-radius: 12px;
      border: 1px solid #CBD5E1;
      background: #F8FAFC;
      font-size: 0.9375rem;
      color: #0F172A;
      outline: none;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .trial-select:focus, .trial-text-input:focus {
      background: #FFFFFF;
      border-color: #FF6B00;
      box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .btn-submit-trial-orange {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-size: 1.0625rem;
      font-weight: 800;
      padding: 16px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
      transition: all 0.25s ease;
      margin-top: 10px;
    }

    .btn-submit-trial-orange:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
    }

    /* Single Horizontal Row: 3 Quick Access Action Pills */
    .trial-horizontal-action-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 36px;
      padding-top: 0;
      border-top: none;
    }

    @media (max-width: 992px) {
      .trial-horizontal-action-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .trial-hero-action-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 18px;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 14px;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .trial-hero-action-pill:hover {
      background: #FFF7ED;
      border-color: #FFEDD5;
      transform: translateX(4px);
      box-shadow: 0 6px 18px rgba(255, 107, 0, 0.12);
    }

    .pill-svg-box {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #FF6B00;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .pill-svg-box.whatsapp-box {
      background: #DCFCE7;
      border-color: #BBF7D0;
      color: #16A34A;
    }

    .pill-text-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }

    .pill-eyebrow-text {
      font-size: 0.6875rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #94A3B8;
    }

    .pill-main-anchor {
      font-size: 0.875rem;
      font-weight: 700;
      color: #0F172A;
      transition: color 0.2s ease;
    }

    .trial-hero-action-pill:hover .pill-main-anchor {
      color: #FF6B00;
    }

    .pill-arrow-right {
      color: #CBD5E1;
      transition: all 0.2s ease;
    }

    .trial-hero-action-pill:hover .pill-arrow-right {
      color: #FF6B00;
      transform: translateX(3px);
    }

    .form-guarantee-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      color: #64748B;
      margin-top: 16px;
    }

    /* 3 Simple Setup Roadmap Section */
    .trial-steps-section {
      padding: 72px 0;
      background: #FFFFFF;
      border-bottom: 1px solid #E2E8F0;
    }

    .steps-section-header {
      text-align: center;
      max-width: 650px;
      margin: 0 auto 48px auto;
    }

    .steps-section-header h2 {
      font-size: 2.25rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }

    .steps-tri-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .step-box-card {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 18px;
      padding: 32px 24px;
      text-align: center;
      position: relative;
      transition: all 0.25s ease;
    }

    .step-box-card:hover {
      background: #FFFFFF;
      border-color: #FF6B00;
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    }

    .step-number-bubble {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #0F172A;
      color: #FFFFFF;
      font-size: 1.125rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px auto;
    }

    .step-box-card:hover .step-number-bubble {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
    }

    .step-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .step-desc {
      font-size: 0.875rem;
      color: #64748B;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .trial-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .steps-tri-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .trial-main-title {
        font-size: 2.35rem;
      }
      .trial-form-card {
        padding: 24px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: faq.html
   ========================================================================== */
/* ==========================================================================
       DEDICATED FAQ KNOWLEDGEBASE PORTAL STYLES
       ========================================================================== */
    .faq-page-wrapper {
      background-color: #FAFAFB;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .faq-hero-section {
      padding: 60px 0 36px 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 70%), #FFFFFF;
      border-bottom: 1px solid #E2E8F0;
      text-align: center;
      position: relative;
    }

    .faq-hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 5px 16px;
      border-radius: var(--radius-pill);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }

    .faq-hero-title {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
    }

    .faq-hero-sub {
      font-size: 1.05rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto 28px auto;
      line-height: 1.6;
    }

    /* Live Search Filter */
    .faq-search-container {
      max-width: 560px;
      margin: 0 auto;
      position: relative;
    }

    .faq-search-input {
      width: 100%;
      padding: 14px 20px 14px 48px;
      border-radius: var(--radius-pill);
      border: 1px solid #CBD5E1;
      background: #FFFFFF;
      font-size: 0.9375rem;
      font-weight: 500;
      color: #0F172A;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
      outline: none;
      transition: all 0.2s ease;
    }

    .faq-search-input:focus {
      border-color: #FF6B00;
      box-shadow: 0 4px 20px rgba(255, 107, 0, 0.15);
    }

    .faq-search-icon-box {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #94A3B8;
      pointer-events: none;
    }

    /* Main FAQ Layout with Category Tabs & Accordion */
    .faq-main-body {
      padding: 48px 0 80px 0;
      flex: 1;
    }

    .faq-layout-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 36px;
      align-items: start;
    }

    /* Sidebar Category Nav */
    .faq-category-nav {
      position: sticky;
      top: 90px;
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #E2E8F0;
      padding: 16px;
      box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    }

    .faq-nav-heading {
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #94A3B8;
      padding: 8px 12px;
      margin-bottom: 4px;
    }

    .faq-cat-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      border-radius: 10px;
      background: transparent;
      border: none;
      font-size: 0.875rem;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: left;
      transition: all 0.2s ease;
    }

    .faq-cat-btn:hover {
      background: #F8FAFC;
      color: #0F172A;
    }

    .faq-cat-btn.active {
      background: #FFF7ED;
      color: #EA580C;
      font-weight: 700;
    }

    .faq-cat-count {
      font-size: 0.75rem;
      font-weight: 700;
      background: #F1F5F9;
      color: #64748B;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
    }

    .faq-cat-btn.active .faq-cat-count {
      background: #FFEDD5;
      color: #EA580C;
    }

    /* Accordion Groups */
    .faq-groups-wrapper {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .faq-group-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 18px;
      padding: 28px;
      box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.03);
    }

    body.page-template-page-faq .luxury-faq-card,
    .faq-group-card .luxury-faq-card,
    .faq-main-wrapper .luxury-faq-card {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
    }

    .group-header-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid #F1F5F9;
    }

    .group-icon-circle {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #FF6B00;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .group-title {
      font-size: 1.25rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
    }

    /* Accordion Row */
    .faq-accordion-item {
      border-bottom: 1px solid #F1F5F9;
      transition: all 0.2s ease;
    }

    .faq-accordion-item:last-child {
      border-bottom: none;
    }

    .faq-question-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      background: transparent;
      border: none;
      text-align: left;
      font-size: 0.975rem;
      font-weight: 700;
      color: #0F172A;
      cursor: pointer;
      gap: 16px;
      transition: color 0.2s ease;
    }

    .faq-question-btn:hover {
      color: #FF6B00;
    }

    .faq-toggle-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      color: #64748B;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }

    .faq-accordion-item.open .faq-toggle-icon {
      background: #FF6B00;
      border-color: #FF6B00;
      color: #FFFFFF;
      transform: rotate(180deg);
    }

    .faq-answer-pane {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    .faq-accordion-item.open .faq-answer-pane {
      max-height: 1200px;
    }

    .faq-answer-inner {
      padding: 0 0 16px 0;
      font-size: 0.9rem;
      line-height: 1.65;
      color: #475569;
    }

    .faq-answer-inner p {
      margin-bottom: 10px;
    }

    .faq-answer-inner p:last-child {
      margin-bottom: 0;
    }

    /* Bottom Instant WhatsApp Support Card */
    .faq-help-box {
      margin-top: 36px;
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      border-radius: 18px;
      padding: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #FFFFFF;
      gap: 24px;
      flex-wrap: wrap;
    }

    .faq-help-left h3 {
      color: #FFFFFF !important;
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .faq-help-left p {
      font-size: 0.9rem;
      color: #94A3B8;
    }

    .faq-whatsapp-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-size: 0.9375rem;
      font-weight: 700;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(255, 107, 0, 0.4);
      transition: all 0.25s ease;
    }

    .faq-whatsapp-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .faq-layout-grid {
        grid-template-columns: 1fr;
      }
      .faq-category-nav {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
      }
      .faq-cat-btn {
        width: auto;
        white-space: nowrap;
      }
      .faq-nav-heading {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .faq-hero-title {
        font-size: 2.1rem;
      }
      .faq-group-card {
        padding: 20px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: iptv-uae/index.html
   ========================================================================== */
/* ==========================================================================
       HIGH-TECH IPTV STREAMING NETWORK DESIGN SYSTEM
       ========================================================================== */
    body {
      background-color: #FAFAFC;
    }

    .hub-hero {
      padding: 130px 0 40px 0;
      text-align: center;
      background: #FFFFFF;
      border-bottom: 1px solid #F1F5F9;
    }

    .hub-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      margin-bottom: 18px;
    }

    .hub-badge .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #EA580C;
    }

    .hub-h1 {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 14px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .hub-h1 .orange-txt {
      color: #FF6B00;
    }

    .hub-lead {
      font-size: 1.05rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto 24px auto;
      line-height: 1.6;
    }

    .network-pill-row {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      padding: 8px 20px;
      border-radius: var(--radius-pill);
      flex-wrap: wrap;
      justify-content: center;
    }

    .network-pill-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      color: #334155;
      font-weight: 600;
    }

    .network-pill-val {
      color: #16A34A;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      background: #DCFCE7;
      padding: 2px 7px;
      border-radius: 4px;
    }

    /* Main Section */
    .hub-content-section {
      padding: 60px 0 80px 0;
    }

    .hub-section-heading {
      text-align: center;
      margin-bottom: 44px;
    }

    .hub-section-heading h2 {
      font-size: 2.15rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    .hub-section-heading p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 580px;
      margin: 0 auto;
    }

    /* ==========================================================================
       HIGH-TECH IPTV STREAMING CLUSTER CARDS (CLEAN & MODERN)
       ========================================================================== */
    .emirates-tech-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }

    .emirate-tech-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 28px 26px;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .emirate-tech-card:hover {
      border-color: #FF6B00;
      box-shadow: 0 8px 24px -2px rgba(255, 107, 0, 0.12);
    }

    .emirate-tech-card.featured {
      border: 1.5px solid #FF8800;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 100%);
    }

    .tech-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .tech-icon-box {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tech-ping-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #DCFCE7;
      border: 1px solid #BBF7D0;
      color: #15803D;
      font-size: 0.75rem;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }

    .ping-dot-live {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #16A34A;
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3);
    }

    .tech-card-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .tech-card-subtitle {
      font-size: 0.75rem;
      font-weight: 700;
      color: #EA580C;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 12px;
      display: block;
    }

    .tech-card-desc {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 18px;
    }

    /* IPTV Specs List */
    .tech-specs-list {
      list-style: none;
      padding: 0;
      margin: 0 0 18px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tech-spec-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 12px;
      background: #F8FAFC;
      border: 1px solid #F1F5F9;
      border-radius: 8px;
      font-size: 0.8125rem;
    }

    .tech-spec-row span {
      color: #64748B;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tech-spec-row strong {
      color: #0F172A;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
    }

    /* Peered Communities */
    .tech-communities-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
      flex: 1;
    }

    .tech-comm-pill {
      font-size: 0.75rem;
      font-weight: 600;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      color: #334155;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      transition: all 0.2s ease;
    }

    .emirate-tech-card:hover .tech-comm-pill {
      background: #FFFFFF;
      border-color: #CBD5E1;
    }

    /* Card Action */
    .tech-card-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.8438rem;
      font-weight: 800;
      padding: 10px 16px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      transition: all 0.2s ease;
      margin-top: auto;
    }

    .emirate-tech-card:hover .tech-card-btn {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      border-color: #FF6B00;
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
    }

    /* ==========================================================================
       METROPOLITAN EDGE NODES TELEMETRY DASHBOARD
       ========================================================================== */
    .communities-clean-box {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 24px;
      padding: 40px 36px;
      margin-bottom: 50px;
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
    }

    .telemetry-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid #F1F5F9;
    }

    .telemetry-header-left h2 {
      font-size: 1.6rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .telemetry-header-left p {
      font-size: 0.875rem;
      color: #64748B;
      margin: 0;
    }

    .telemetry-live-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #F0FDF4;
      border: 1px solid #DCFCE7;
      color: #15803D;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      font-family: 'JetBrains Mono', monospace;
    }

    .comm-items-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .comm-item-clean {
      background: #FAFAFC;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 20px;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
    }

    .comm-item-clean:hover {
      background: #FFFFFF;
      border-color: #FF8800;
      box-shadow: 0 6px 18px rgba(255, 107, 0, 0.1);
    }

    .node-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .node-icon-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .comm-icon-mini {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .node-name-title {
      font-size: 1rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.01em;
    }

    .node-ping-pill {
      font-size: 0.6875rem;
      font-weight: 800;
      color: #15803D;
      background: #DCFCE7;
      border: 1px solid #BBF7D0;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      font-family: 'JetBrains Mono', monospace;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .node-desc-txt {
      font-size: 0.8125rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 14px;
      flex: 1;
    }

    .node-metrics-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10px;
      border-top: 1px solid #F1F5F9;
      font-size: 0.6875rem;
      font-weight: 700;
      color: #334155;
    }

    .node-metrics-footer .isp-tag {
      color: #EA580C;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
    }

    .node-metrics-footer .quality-tag {
      color: #16A34A;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
    }

    /* Clean CTA Banner */
    .clean-cta-box {
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 20px;
      padding: 40px;
      text-align: center;
    }

    .clean-cta-box h2 {
      font-size: 1.85rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .clean-cta-box p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 540px;
      margin: 0 auto 24px auto;
    }

    .clean-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-clean-primary {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-clean-secondary {
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      color: #0F172A;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
    }

    @media (max-width: 992px) {
      .emirates-tech-grid, .comm-items-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .emirates-tech-grid, .comm-items-grid {
        grid-template-columns: 1fr;
      }
      .hub-h1 {
        font-size: 2rem;
      }
      .clean-cta-box {
        padding: 28px 18px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: iptv-devices/index.html
   ========================================================================== */
/* ==========================================================================
       NEXT-LEVEL HARDWARE & DEVICES HUB DESIGN SYSTEM
       ========================================================================== */
    body {
      background-color: #FAFAFC;
    }

    .hub-hero {
      padding: 130px 0 40px 0;
      text-align: center;
      background: #FFFFFF;
      border-bottom: 1px solid #F1F5F9;
    }

    .hub-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      margin-bottom: 18px;
    }

    .hub-badge .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #EA580C;
    }

    .hub-h1 {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 14px;
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }

    .hub-h1 .orange-txt {
      color: #FF6B00;
    }

    .hub-lead {
      font-size: 1.05rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto 24px auto;
      line-height: 1.6;
    }

    .brand-pill-bar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: nowrap;
      margin: 0 auto;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 4px 6px;
    }

    .brand-pill-bar::-webkit-scrollbar {
      display: none;
    }

    .brand-pill-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
      transition: all 0.25s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .brand-pill-chip:hover {
      border-color: #FF8800;
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.12);
    }

    .brand-chip-icon {
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-chip-text {
      font-size: 0.8125rem;
      font-weight: 700;
      color: #334155;
    }

    /* Main Section */
    .hub-content-section {
      padding: 60px 0 80px 0;
    }

    .hub-section-heading {
      text-align: center;
      margin-bottom: 44px;
    }

    .hub-section-heading h2 {
      font-size: 2.15rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    .hub-section-heading p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 580px;
      margin: 0 auto;
    }

    /* ==========================================================================
       6 HARDWARE DEVICE CARDS (NEXT-LEVEL CLEAN & LUXURY)
       ========================================================================== */
    .devices-clean-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }

    .device-clean-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 28px 26px;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .device-clean-card:hover {
      border-color: #FF6B00;
      box-shadow: 0 8px 24px -2px rgba(255, 107, 0, 0.12);
    }

    .device-clean-card.featured {
      border: 1.5px solid #FF8800;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 100%);
    }

    .device-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .device-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .device-res-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #DCFCE7;
      border: 1px solid #BBF7D0;
      color: #15803D;
      font-size: 0.75rem;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }

    .device-res-badge svg {
      color: #16A34A;
    }

    .device-card-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .device-card-subtitle {
      font-size: 0.75rem;
      font-weight: 700;
      color: #EA580C;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 12px;
      display: block;
    }

    .device-card-desc {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 18px;
    }

    /* Specs Strip */
    .device-specs-list {
      list-style: none;
      padding: 0;
      margin: 0 0 18px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .device-spec-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 12px;
      background: #F8FAFC;
      border: 1px solid #F1F5F9;
      border-radius: 8px;
      font-size: 0.8125rem;
    }

    .device-spec-row span {
      color: #64748B;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .device-spec-row strong {
      color: #0F172A;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
    }

    /* Recommended Player Apps (Pill Shape) */
    .apps-strip-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 22px;
      flex: 1;
    }

    .app-tag-pill {
      font-size: 0.75rem;
      font-weight: 600;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      color: #334155;
      padding: 4px 11px;
      border-radius: var(--radius-pill);
      transition: all 0.2s ease;
    }

    .device-clean-card:hover .app-tag-pill {
      background: #FFFFFF;
      border-color: #CBD5E1;
    }

    /* Card Action Button */
    .device-card-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.8438rem;
      font-weight: 800;
      padding: 10px 16px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      transition: all 0.2s ease;
      margin-top: auto;
    }

    .device-clean-card:hover .device-card-btn {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      border-color: #FF6B00;
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
    }



    /* Remove Section Background */
    .how-it-works-section {
      background: transparent !important;
      border: none !important;
      padding: 0 0 50px 0 !important;
    }

    /* Clean CTA Banner */
    .clean-cta-box {
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 20px;
      padding: 40px;
      text-align: center;
    }

    .clean-cta-box h2 {
      font-size: 1.85rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .clean-cta-box p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 540px;
      margin: 0 auto 24px auto;
    }

    .clean-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-clean-primary {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-clean-secondary {
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      color: #0F172A;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
    }

    @media (max-width: 992px) {
      .devices-clean-grid, .flow-grid-clean {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .devices-clean-grid, .flow-grid-clean {
        grid-template-columns: 1fr;
      }
      .hub-h1 {
        font-size: 2rem;
      }
      .clean-cta-box {
        padding: 28px 18px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: channels/index.html
   ========================================================================== */
/* ==========================================================================
       CLEAN, MODERN & LUXURY CHANNELS HUB DESIGN SYSTEM
       ========================================================================== */
    body {
      background-color: #FAFAFC;
    }

    .hub-hero {
      padding: 130px 0 50px 0;
      text-align: center;
      background: #FFFFFF;
      border-bottom: 1px solid #F1F5F9;
    }

    .hub-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      margin-bottom: 18px;
    }

    .hub-badge .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #EA580C;
    }

    .hub-h1 {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 14px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .hub-h1 .orange-txt {
      color: #FF6B00;
    }

    .hub-lead {
      font-size: 1.05rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto 30px auto;
      line-height: 1.6;
    }

    /* Channel Search Bar */
    .search-box-wrap {
      max-width: 580px;
      margin: 0 auto 28px auto;
      position: relative;
    }

    .search-box-input {
      width: 100%;
      padding: 14px 20px 14px 48px;
      border: 1.5px solid #E2E8F0;
      border-radius: var(--radius-pill);
      font-size: 0.9375rem;
      font-family: inherit;
      outline: none;
      transition: all 0.2s ease;
      background: #FFFFFF;
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
    }

    .search-box-input:focus {
      border-color: #FF6B00;
      box-shadow: 0 4px 16px rgba(255, 107, 0, 0.12);
    }

    .search-icon-svg {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #94A3B8;
    }

    /* Category Filter Tabs */
    .tabs-clean-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tab-btn-clean {
      padding: 8px 18px;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: var(--radius-pill);
      font-size: 0.8125rem;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn-clean:hover, .tab-btn-clean.active {
      background: #0F172A;
      color: #FFFFFF;
      border-color: #0F172A;
    }

    /* Main Content Section */
    .hub-content-section {
      padding: 50px 0 80px 0;
    }

    /* Sports Stadium Feeds Bar */
    .stadium-feeds-box {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 30px;
      margin-bottom: 40px;
    }

    .stadium-feeds-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .stadium-feeds-header h3 {
      font-size: 1.35rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 4px;
    }

    .stadium-feeds-header p {
      font-size: 0.8438rem;
      color: #64748B;
    }

    .stadium-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .stadium-card-item {
      background: #FAFAFB;
      border: 1px solid #F1F5F9;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
    }

    .stadium-league-tag {
      font-size: 0.6875rem;
      font-weight: 800;
      color: #EA580C;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: block;
      margin-bottom: 4px;
    }

    .stadium-title {
      font-size: 0.875rem;
      font-weight: 700;
      color: #0F172A;
      margin-bottom: 6px;
    }

    .stadium-fps-tag {
      font-size: 0.6875rem;
      color: #16A34A;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Channel Packs Grid */
    .channel-packs-clean-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 50px;
    }

    .channel-pack-clean-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 18px;
      padding: 26px;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      text-decoration: none !important;
      color: inherit !important;
      cursor: pointer;
    }

    .channel-pack-clean-card:hover {
      border-color: #FFB380;
      transform: translateY(-4px);
      box-shadow: 0 14px 30px -4px rgba(255, 107, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .channel-pack-clean-card:hover .pack-card-title {
      color: #FF6B00;
    }

    .pack-top-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .pack-icon-round {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #FFF7ED;
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pack-count-pill {
      font-size: 0.6875rem;
      font-weight: 800;
      color: #16A34A;
      background: #DCFCE7;
      padding: 3px 9px;
      border-radius: var(--radius-pill);
      font-family: 'JetBrains Mono', monospace;
    }

    .pack-card-title {
      font-size: 1.3rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 4px;
    }

    .pack-card-desc {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .channels-sample-clean-list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .channel-clean-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      background: #FAFAFB;
      border: 1px solid #F1F5F9;
      border-radius: 8px;
      font-size: 0.8125rem;
    }

    .channel-clean-row strong {
      color: #1E293B;
    }

    .res-tag-micro {
      font-size: 0.625rem;
      font-weight: 800;
      background: #FEF3C7;
      color: #B45309;
      padding: 2px 5px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
    }

    .res-tag-micro.uhd {
      background: #DCFCE7;
      color: #15803D;
    }

    /* Clean FAQ */
    .clean-faq-container {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 36px;
      margin-bottom: 50px;
    }

    .clean-faq-container h3 {
      font-size: 1.4rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 20px;
    }

    .faq-clean-row {
      padding: 14px 0;
      border-bottom: 1px solid #F1F5F9;
    }

    .faq-clean-row:last-child {
      border-bottom: none;
    }

    .faq-clean-q {
      font-size: 0.95rem;
      font-weight: 700;
      color: #0F172A;
      margin-bottom: 4px;
    }

    .faq-clean-a {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
    }

    /* Clean CTA Banner */
    .clean-cta-box {
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 20px;
      padding: 40px;
      text-align: center;
    }

    .clean-cta-box h2 {
      font-size: 1.85rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .clean-cta-box p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 540px;
      margin: 0 auto 24px auto;
    }

    .clean-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-clean-primary {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-clean-secondary {
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      color: #0F172A;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
    }

    @media (max-width: 992px) {
      .channel-packs-clean-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .stadium-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .channel-packs-clean-grid, .stadium-cards-grid {
        grid-template-columns: 1fr;
      }
      .hub-h1 {
        font-size: 2rem;
      }
      .clean-cta-box {
        padding: 28px 18px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: setup-guide/index.html
   ========================================================================== */
/* ==========================================================================
       CLEAN, MODERN & LUXURY SETUP HUB DESIGN SYSTEM
       ========================================================================== */
    body {
      background-color: #FAFAFC;
    }

    .hub-hero {
      padding: 130px 0 50px 0;
      text-align: center;
      background: #FFFFFF;
      border-bottom: 1px solid #F1F5F9;
    }

    .hub-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      color: #EA580C;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      margin-bottom: 18px;
    }

    .hub-badge .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #EA580C;
    }

    .hub-h1 {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 14px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .hub-h1 .orange-txt {
      color: #FF6B00;
    }

    .hub-lead {
      font-size: 1.05rem;
      color: #64748B;
      max-width: 680px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Main Content Section */
    .hub-content-section {
      padding: 50px 0 80px 0;
    }

    .hub-section-heading {
      text-align: center;
      margin-bottom: 40px;
    }

    .hub-section-heading h2 {
      font-size: 2rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    .hub-section-heading p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 580px;
      margin: 0 auto;
    }

    .player-clean-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 50px;
    }

    .player-clean-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 18px;
      padding: 26px;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
    }

    .player-clean-card:hover {
      border-color: #CBD5E1;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.06);
    }

    .card-top-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .card-icon-round {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #FFF7ED;
      color: #EA580C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-meta-tag {
      font-size: 0.6875rem;
      font-weight: 800;
      color: #16A34A;
      background: #DCFCE7;
      padding: 3px 9px;
      border-radius: var(--radius-pill);
      font-family: 'JetBrains Mono', monospace;
    }

    .card-title-main {
      font-size: 1.3rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 6px;
    }

    .card-desc-txt {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .setup-steps-list-clean {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .step-item-clean {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.8125rem;
      color: #334155;
      line-height: 1.4;
    }

    .step-num-micro {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #F1F5F9;
      color: #0F172A;
      font-weight: 800;
      font-size: 0.6875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .card-bottom-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8438rem;
      font-weight: 700;
      color: #EA580C;
      text-decoration: none;
      transition: gap 0.2s ease;
      margin-top: auto;
    }

    .card-bottom-action:hover {
      gap: 9px;
      color: #C2410C;
    }

    /* Network Optimization Box */
    .network-clean-box {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 36px;
      margin-bottom: 50px;
    }

    .network-items-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .network-card-clean {
      padding: 20px;
      background: #FAFAFB;
      border: 1px solid #F1F5F9;
      border-radius: 12px;
    }

    .network-card-clean h4 {
      font-size: 0.95rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .network-card-clean p {
      font-size: 0.8125rem;
      color: #64748B;
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .code-tag-clean {
      display: inline-block;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      color: #0F172A;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      padding: 2px 7px;
      border-radius: 4px;
    }

    /* Clean FAQ */
    .clean-faq-container {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 36px;
      margin-bottom: 50px;
    }

    .clean-faq-container h3 {
      font-size: 1.4rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 20px;
    }

    .faq-clean-row {
      padding: 14px 0;
      border-bottom: 1px solid #F1F5F9;
    }

    .faq-clean-row:last-child {
      border-bottom: none;
    }

    .faq-clean-q {
      font-size: 0.95rem;
      font-weight: 700;
      color: #0F172A;
      margin-bottom: 4px;
    }

    .faq-clean-a {
      font-size: 0.8438rem;
      color: #64748B;
      line-height: 1.5;
    }

    /* Clean CTA Banner */
    .clean-cta-box {
      background: #FFF7ED;
      border: 1px solid #FFEDD5;
      border-radius: 20px;
      padding: 40px;
      text-align: center;
    }

    .clean-cta-box h2 {
      font-size: 1.85rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 8px;
    }

    .clean-cta-box p {
      font-size: 0.9375rem;
      color: #64748B;
      max-width: 540px;
      margin: 0 auto 24px auto;
    }

    .clean-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-clean-primary {
      background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-clean-secondary {
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      color: #0F172A;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      text-decoration: none;
    }

    @media (max-width: 992px) {
      .player-clean-grid, .network-items-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .player-clean-grid, .network-items-grid {
        grid-template-columns: 1fr;
      }
      .hub-h1 {
        font-size: 2rem;
      }
      .clean-cta-box {
        padding: 28px 18px;
      }
    }

/* ==========================================================================
   EXTRACTED STYLES FOR: sitemap.html
   ========================================================================== */
/* ==========================================================================
       ENTERPRISE SILO DIRECTORY & SITEMAP SYSTEM (CLEAN LUXURY ARCHITECTURE)
       ========================================================================== */
    :root {
      --silo-bg: #F8FAFC;
      --silo-card-bg: #FFFFFF;
      --silo-border: #E2E8F0;
      --silo-border-hover: #CBD5E1;
      --silo-text-primary: #0F172A;
      --silo-text-secondary: #475569;
      --silo-text-muted: #94A3B8;
      --silo-accent: #FF6B00;
      --silo-accent-light: #FFF7ED;
      --silo-accent-border: #FFEDD5;
      --font-mono: 'JetBrains Mono', monospace;
    }

    body.sitemap-view {
      background-color: var(--silo-bg);
      color: var(--silo-text-primary);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Hero Header */
    .silo-hero {
      padding: 56px 0 32px 0;
      background: #FFFFFF;
      border-bottom: 1px solid var(--silo-border);
      position: relative;
    }

    .silo-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #FF6B00, transparent);
      opacity: 0.8;
    }

    .silo-hero-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .silo-badge-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .silo-pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--silo-accent-light);
      border: 1px solid var(--silo-accent-border);
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      font-size: 0.75rem;
      font-weight: 800;
      color: #EA580C;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .status-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #16A34A;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
    }

    .silo-hero-title {
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
      color: var(--silo-text-primary);
      margin-bottom: 12px;
    }

    .silo-hero-desc {
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--silo-text-secondary);
      max-width: 760px;
      margin-bottom: 28px;
    }

    /* Controls Bar: Filter Tabs & Search */
    .silo-controls-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      padding-top: 20px;
      border-top: 1px solid #F1F5F9;
    }

    .silo-nav-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .silo-tab-btn {
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      background: #F8FAFC;
      border: 1px solid var(--silo-border);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--silo-text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .silo-tab-btn:hover {
      background: #FFFFFF;
      border-color: var(--silo-text-primary);
      color: var(--silo-text-primary);
    }

    .silo-tab-btn.active {
      background: var(--silo-text-primary);
      color: #FFFFFF;
      border-color: var(--silo-text-primary);
    }

    .silo-search-wrapper {
      position: relative;
      min-width: 320px;
    }

    .silo-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--silo-text-muted);
      pointer-events: none;
    }

    .silo-search-box {
      width: 100%;
      padding: 10px 16px 10px 40px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--silo-border);
      background: #FFFFFF;
      font-size: 0.875rem;
      color: var(--silo-text-primary);
      outline: none;
      transition: all 0.2s ease;
    }

    .silo-search-box:focus {
      border-color: var(--silo-accent);
      box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    /* Main SILO Viewport */
    .silo-main-content {
      padding: 44px 0 80px 0;
      flex: 1;
    }

    .silo-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Root Entity Bar */
    .silo-root-card {
      background: #FFFFFF;
      border: 1px solid var(--silo-border);
      border-radius: 16px;
      padding: 20px 24px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    }

    .root-left-meta {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .root-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: #0F172A;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .root-name {
      font-size: 1.125rem;
      font-weight: 800;
      color: var(--silo-text-primary);
      margin-bottom: 2px;
    }

    .root-sub {
      font-size: 0.8125rem;
      color: var(--silo-text-muted);
      font-family: var(--font-mono);
    }

    .root-stat-pill {
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #0F172A;
      background: #F1F5F9;
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--silo-border);
    }

    /* 4-Silo Pillars Grid */
    .silo-pillars-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      margin-bottom: 36px;
    }

    /* Individual SILO Pillar Block */
    .silo-pillar-card {
      background: var(--silo-card-bg);
      border: 1px solid var(--silo-border);
      border-radius: 18px;
      padding: 28px;
      box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
      display: flex;
      flex-direction: column;
      transition: all 0.25s ease;
    }

    .silo-pillar-card:hover {
      border-color: var(--silo-border-hover);
      box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
      transform: translateY(-2px);
    }

    .pillar-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid #F1F5F9;
      margin-bottom: 20px;
    }

    .pillar-identity {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pillar-icon-box {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--silo-accent-light);
      border: 1px solid var(--silo-accent-border);
      color: var(--silo-accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pillar-title-text {
      font-size: 1.125rem;
      font-weight: 800;
      color: var(--silo-text-primary);
      letter-spacing: -0.02em;
    }

    .pillar-code-slug {
      display: block;
      font-size: 0.75rem;
      color: var(--silo-text-muted);
      font-family: var(--font-mono);
      margin-top: 2px;
    }

    .tier-badge {
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      background: #F1F5F9;
      color: #64748B;
      border: 1px solid var(--silo-border);
    }

    .tier-badge.tier-1 {
      background: #FF6B00;
      color: #FFFFFF;
      border-color: #FF6B00;
    }

    /* Sub-clusters Tree List */
    .silo-tree-branch {
      margin-bottom: 20px;
    }

    .silo-tree-branch:last-child {
      margin-bottom: 0;
    }

    .branch-subheading {
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #94A3B8;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .branch-subheading::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #F1F5F9;
    }

    .tree-links-stack {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tree-node-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 8px;
      background: #F8FAFC;
      border: 1px solid #F1F5F9;
      transition: all 0.18s ease;
      text-decoration: none;
    }

    .tree-node-item:hover {
      background: #FFF7ED;
      border-color: #FFEDD5;
      transform: translateX(4px);
    }

    .node-content-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .node-tree-icon {
      color: #CBD5E1;
      transition: color 0.18s ease;
    }

    .tree-node-item:hover .node-tree-icon {
      color: var(--silo-accent);
    }

    .node-title-anchor {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--silo-text-primary);
      text-decoration: none;
      transition: color 0.18s ease;
    }

    .tree-node-item:hover .node-title-anchor {
      color: var(--silo-accent);
    }

    .node-meta-slug {
      font-size: 0.6875rem;
      font-family: var(--font-mono);
      color: #64748B;
      background: #FFFFFF;
      border: 1px solid var(--silo-border);
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Core Pages Horizontal Section */
    .silo-core-card {
      background: #0F172A;
      border-radius: 18px;
      border: 1px solid #334155;
      padding: 28px;
      color: #FFFFFF;
    }

    .core-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    .core-identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .core-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 107, 0, 0.15);
      border: 1px solid rgba(255, 107, 0, 0.3);
      color: #FF8800;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .core-title {
      font-size: 1.125rem;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -0.02em;
    }

    .core-links-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .core-node-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      text-decoration: none;
      color: #E2E8F0;
      font-size: 0.875rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .core-node-btn:hover {
      background: rgba(255, 107, 0, 0.18);
      border-color: #FF6B00;
      color: #FFFFFF;
      transform: translateY(-2px);
    }

    .core-node-btn svg {
      color: #94A3B8;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .silo-pillars-grid {
        grid-template-columns: 1fr;
      }
      .core-links-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .silo-hero-title {
        font-size: 2rem;
      }
      .silo-search-wrapper {
        min-width: 100%;
      }
      .silo-root-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .core-links-grid {
        grid-template-columns: 1fr;
      }
    }

/* ==========================================================================
   Universal Compatibility & Container Overrides
   ========================================================================== */
.site-container, .container {
  width: 100%;
  max-width: var(--max-width, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  z-index: 1;
}

body {
  background-color: var(--color-bg-primary, #FFFFFF);
  color: var(--color-text-primary, #0F172A);
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Accessibility: Screen Reader Text & Skip Link (Visually hidden)
   ========================================================================== */
.screen-reader-text,
.skip-link:not(:focus) {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
}

.screen-reader-text:focus,
.skip-link:focus {
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  color: #0F172A !important;
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  height: auto !important;
  left: 16px !important;
  line-height: normal !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  top: 16px !important;
  width: auto !important;
  z-index: 100000 !important;
  border: 2px solid #FF6B00 !important;
}

/* ==========================================================================
   WordPress Core & Standard Post/Page Layout Styles
   ========================================================================== */
.section-padding {
  padding: 60px 0 80px 0;
}

.page-single-entry, .single-post-entry {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  margin-bottom: 40px;
}

.entry-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 16px;
}

.entry-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
  line-height: 1.2;
}

.entry-meta {
  font-size: 0.875rem;
  color: #64748B;
  display: flex;
  gap: 16px;
  align-items: center;
}

.entry-thumbnail {
  margin-bottom: 28px;
  border-radius: 14px;
  overflow: hidden;
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.entry-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #334155;
}

.entry-content p {
  margin-bottom: 20px;
}

.entry-content h2, .entry-content h3, .entry-content h4 {
  color: #0F172A;
  margin-top: 36px;
  margin-bottom: 16px;
}

.entry-content ul, .entry-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.entry-content li {
  margin-bottom: 8px;
  list-style: disc;
}

.entry-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #F1F5F9;
}

/* Breadcrumbs */
.site-breadcrumbs {
  margin-bottom: 24px;
  font-size: 0.875rem;
}

.site-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-breadcrumbs li::after {
  content: "/";
  margin-left: 8px;
  color: #94A3B8;
}

.site-breadcrumbs li:last-child::after {
  content: "";
}

.site-breadcrumbs a {
  color: #FF6B00;
  font-weight: 600;
}

.site-breadcrumbs li[aria-current="page"] {
  color: #64748B;
}

/* Blog Layout Grid */
.blog-grid-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: flex-start;
}

.blog-card-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}

.blog-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.post-card-title a {
  color: #0F172A;
  font-weight: 800;
  font-size: 1.4rem;
}

.post-card-title a:hover {
  color: #FF6B00;
}

.post-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #FF6B00;
  margin-top: 14px;
}

.blog-sidebar-column .widget {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.widget-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

/* 404 Page */
.error-404-wrapper {
  max-width: 600px;
  margin: 60px auto;
}

.error-code-badge {
  font-size: 6rem;
  font-weight: 900;
  color: #FF6B00;
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
}



/* ==========================================================================
   SIMPLE & PROFESSIONAL BIG 404 PAGE STYLES
   ========================================================================== */
.pro-404-section {
  padding: 80px 0 100px 0;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFFFF;
}

.pro-404-box {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
}

.pro-404-big-number {
  font-size: 8.5rem;
  font-weight: 900;
  color: #FF6B00;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
  user-select: none;
}

.pro-404-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.pro-404-desc {
  font-size: 1.0625rem;
  color: #64748B;
  line-height: 1.65;
  margin: 0 auto 32px auto;
  max-width: 520px;
}

.pro-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-clean-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill, 9999px);
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-clean-outline:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #000000;
}

@media (max-width: 768px) {
  .pro-404-section {
    padding: 50px 0 70px 0;
  }
  .pro-404-big-number {
    font-size: 6rem;
  }
  .pro-404-title {
    font-size: 1.85rem;
  }
  .pro-404-actions {
    flex-direction: column;
    width: 100%;
  }
  .pro-404-actions a {
    width: 100%;
  }
}


/* ==========================================================================
   SILO CHILD & SUBPAGE GUIDE STYLES
   ========================================================================== */
.silo-child-page-wrapper {
  background-color: #FAFAFB;
  min-height: 100vh;
}

.child-hero-section {
  padding: 50px 0 40px 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.07) 0%, transparent 70%), #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.child-breadcrumbs {
  margin-bottom: 18px;
  font-size: 0.8125rem;
}

.child-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.child-breadcrumbs li::after {
  content: "/";
  margin-left: 8px;
  color: #94A3B8;
}

.child-breadcrumbs li:last-child::after {
  content: "";
}

.child-breadcrumbs a {
  color: #FF6B00;
  font-weight: 600;
  text-decoration: none;
}

.child-breadcrumbs li[aria-current="page"] {
  color: #64748B;
  font-weight: 600;
}

.child-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #EA580C;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-pill, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.child-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 14px 0;
  max-width: 900px;
}

.child-main-sub {
  font-size: 1.0625rem;
  color: #64748B;
  line-height: 1.65;
  max-width: 800px;
  margin: 0 0 28px 0;
}

.child-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.child-content-section {
  padding: 50px 0 80px 0;
}

.child-layout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: flex-start;
}

.child-info-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
}

.info-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.info-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.info-card-sub {
  font-size: 0.8125rem;
  color: #64748B;
  display: block;
}

.info-card-body p {
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.7;
  margin: 0 0 20px 0;
}

.specs-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spec-pill {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spec-pill strong {
  color: #0F172A;
}

.spec-pill span {
  color: #EA580C;
  font-weight: 700;
}

/* Numbered Steps */
.numbered-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup-step-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #FAFAFB;
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.2s ease;
}

.setup-step-row:hover {
  background: #FFFFFF;
  border-color: #FFEDD5;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.08);
}

.step-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFF7ED;
  border: 1.5px solid #FFEDD5;
  color: #EA580C;
  font-size: 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.step-details h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px 0;
}

.step-details p {
  font-size: 0.875rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* Fast Track Box - Luxury Tech Style */
.child-fast-track-box {
  background: linear-gradient(135deg, #0B1120 0%, #0F172A 50%, #1E293B 100%);
  border: 1.5px solid rgba(255, 107, 0, 0.3);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #FFFFFF;
  box-shadow: 0 16px 36px -10px rgba(11, 17, 32, 0.5), 0 0 25px rgba(255, 107, 0, 0.08);
  margin-top: 24px;
}

.fast-track-avatar-col {
  flex-shrink: 0;
}

.fast-track-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 107, 0, 0.12);
  border: 1.5px solid rgba(255, 107, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fast-track-avatar-box .live-status-ping {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  background: #22C55E;
  border: 2.5px solid #0B1120;
  border-radius: 50%;
  box-shadow: 0 0 10px #22C55E;
}

.fast-track-content {
  flex: 1;
}

.fast-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #FF6B00;
  background: rgba(255, 107, 0, 0.12);
  padding: 3px 9px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.fast-track-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}

.fast-track-content h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 5px 0;
  color: #FFFFFF;
}

.fast-track-content p {
  font-size: 0.875rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.5;
}

.fast-track-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.fast-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.fast-track-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45);
  color: #FFFFFF;
}

.fast-track-reply-hint {
  font-size: 0.72rem;
  color: #CBD5E1;
  font-weight: 600;
}

/* Sidebar Styles */
.child-sidebar-col .sidebar-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
}

.popular-plan-sidebar {
  border: 2px solid #FF6B00;
  box-shadow: 0 10px 30px -4px rgba(255, 107, 0, 0.12);
}

.sidebar-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 12px;
}

.plan-sidebar-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px 0;
}

.sidebar-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.sidebar-price-row .price-cur {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #EA580C;
}

.sidebar-price-row .price-val {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
}

.sidebar-price-row .price-sub {
  font-size: 0.75rem;
  color: #64748B;
}

.sidebar-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sidebar-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.4;
}

.sidebar-plan-features li strong {
  color: #0F172A;
  font-weight: 700;
}

.sidebar-plan-features li .check-circle-svg {
  flex-shrink: 0;
}

.sidebar-widget-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.sidebar-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-nav-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1E293B;
  text-decoration: none;
  transition: all 0.18s ease;
}

.sidebar-nav-links a:hover {
  background: #FFF7ED;
  border-color: #FFEDD5;
  color: #EA580C;
  transform: translateX(4px);
}

.trust-sidebar-box {
  background: #F8FAFC;
}

.trust-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #0F172A;
}

.trust-sidebar-box p {
  font-size: 0.8125rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .child-layout-grid {
    grid-template-columns: 1fr;
  }
  .child-fast-track-box {
    flex-direction: column;
    text-align: center;
  }
  .child-main-title {
    font-size: 2rem;
  }
}



/* ==========================================================================
   IN-HERO DIRECT SEAMLESS BREADCRUMBS (INSIDE GRADIENT BACKGROUND)
   ========================================================================== */
.hero-inline-breadcrumbs {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 10;
}

.pricing-hero-section .hero-inline-breadcrumbs,
.hub-hero .hero-inline-breadcrumbs,
.silo-hero .hero-inline-breadcrumbs,
.trial-hero-split .hero-inline-breadcrumbs {
  justify-content: center;
}

.child-hero-section .hero-inline-breadcrumbs,
.pro-404-section .hero-inline-breadcrumbs {
  justify-content: flex-start;
}

.pro-404-section .hero-inline-breadcrumbs {
  justify-content: center;
}

.hero-breadcrumbs-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1;
}

.crumb-item {
  display: inline-flex;
  align-items: center;
}

.crumb-link {
  color: #64748B;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 2px 0;
}

.crumb-link:hover {
  color: #FF6B00;
}

.crumb-separator {
  display: inline-flex;
  align-items: center;
  color: #CBD5E1;
  padding: 0 1px;
}

.current-crumb {
  display: inline-flex;
  align-items: center;
}

.crumb-current {
  color: #0F172A;
  font-weight: 700;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .hero-inline-breadcrumbs {
    margin-bottom: 16px;
  }
  .hero-breadcrumbs-list {
    font-size: 0.75rem;
    gap: 6px;
  }
  .crumb-current {
    max-width: 220px;
  }
}



/* ==========================================================================
   NEXT-LEVEL IN-HERO LUXURY CAPSULE BREADCRUMBS WITH ICONS
   ========================================================================== */
.hero-inline-breadcrumbs {
  display: flex;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  position: relative;
  z-index: 10;
}

.pricing-hero-section .hero-inline-breadcrumbs,
.hub-hero .hero-inline-breadcrumbs,
.silo-hero .hero-inline-breadcrumbs,
.trial-hero-split .hero-inline-breadcrumbs,
.pro-404-section .hero-inline-breadcrumbs {
  justify-content: center;
}

.child-hero-section .hero-inline-breadcrumbs {
  justify-content: flex-start;
}

.pro-breadcrumbs-capsule {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 247, 237, 0.9);
  border: 1px solid #FFEDD5;
  border-radius: var(--radius-pill, 9999px);
  padding: 5px 14px;
  box-shadow: 0 2px 10px rgba(255, 107, 0, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-breadcrumbs-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1;
}

.crumb-item {
  display: inline-flex;
  align-items: center;
}

.crumb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #C2410C;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}

.crumb-link:hover {
  color: #EA580C;
  text-decoration: underline;
}

.crumb-home-icon {
  color: #EA580C;
  margin-top: -1px;
}

.crumb-separator {
  display: inline-flex;
  align-items: center;
  color: #FDBA74;
  padding: 0 1px;
}

.current-crumb {
  display: inline-flex;
  align-items: center;
}

.crumb-current {
  color: #0F172A;
  font-weight: 800;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .hero-inline-breadcrumbs {
    margin-bottom: 12px !important;
  }
  .pro-breadcrumbs-capsule {
    padding: 4px 10px;
  }
  .hero-breadcrumbs-list {
    font-size: 0.75rem;
    gap: 4px;
  }
  .crumb-current {
    max-width: 170px;
  }
}


/* ==========================================================================
   ULTRA-COMPACT TOP SPACING OVERRIDES
   ========================================================================== */
.site-header-floating {
  padding: 8px 0 !important;
}

.child-hero-section {
  padding: 12px 0 28px 0 !important;
}

.legal-hero-section,
.faq-hero-section,
.sitemap-hero-section,
.pricing-hero-section,
.hub-hero,
.silo-hero,
.trial-hero-split {
  padding: 14px 0 30px 0 !important;
}

.hero-inline-breadcrumbs {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.pro-breadcrumbs-capsule {
  padding: 3px 12px !important;
}

.hero-breadcrumbs-list {
  font-size: 0.75rem !important;
  gap: 4px !important;
}

.child-badge-pill, .hub-badge, .pricing-badge-pill, .silo-pill-badge, .faq-hero-pill {
  margin-bottom: 8px !important;
  padding: 4px 12px !important;
  font-size: 0.6875rem !important;
}

.child-main-title, .hub-h1, .pricing-main-title, .silo-hero-title, .faq-hero-title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.child-main-sub, .hub-lead, .pricing-main-sub, .silo-hero-desc {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}


/* ==========================================================================
   EXACT 12PX TOP & BOTTOM BREADCRUMB SPACING
   ========================================================================== */
.hero-inline-breadcrumbs {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}


/* ==========================================================================
   ENHANCED BREADCRUMB BOTTOM SPACING
   ========================================================================== */
.hero-inline-breadcrumbs {
  margin-top: 12px !important;
  margin-bottom: 26px !important;
  padding: 0 !important;
}


/* ==========================================================================
   UNIVERSAL LEFT-ALIGNED BREADCRUMBS ACROSS ALL PAGES
   ========================================================================== */
.hero-inline-breadcrumbs,
.pricing-hero-section .hero-inline-breadcrumbs,
.hub-hero .hero-inline-breadcrumbs,
.silo-hero .hero-inline-breadcrumbs,
.trial-hero-split .hero-inline-breadcrumbs,
.child-hero-section .hero-inline-breadcrumbs,
.pro-404-section .hero-inline-breadcrumbs {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-top: 12px !important;
  margin-bottom: 26px !important;
  padding: 0 !important;
  width: 100% !important;
}


/* ==========================================================================
   NEXT-LEVEL LUXURY CATEGORY FILTER PILLS
   ========================================================================== */
.tabs-clean-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.tab-btn-clean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill, 9999px);
  color: #475569;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  user-select: none;
}

.tab-btn-clean svg {
  color: #94A3B8;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tab-btn-clean:hover {
  background: #FFF7ED;
  border-color: #FFEDD5;
  color: #EA580C;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.12);
}

.tab-btn-clean:hover svg {
  color: #EA580C;
  transform: scale(1.1);
}

.tab-btn-clean.active {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #FFFFFF !important;
  border-color: #FF6B00 !important;
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35) !important;
  transform: translateY(-2px);
}

.tab-btn-clean.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Search Box Wrap in Channels Hub */
.search-box-wrap {
  max-width: 600px;
  margin: 0 auto 20px auto;
  position: relative;
}

.search-icon-svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
}

.search-box-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.9375rem;
  color: #0F172A;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  outline: none;
  transition: all 0.2s ease;
}

.search-box-input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

/* Sitemap Filters */
.silo-nav-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.silo-tab-btn {
  padding: 8px 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill, 9999px);
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.silo-tab-btn:hover {
  background: #FFF7ED;
  border-color: #FFEDD5;
  color: #EA580C;
}

.silo-tab-btn.active {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #FFFFFF !important;
  border-color: #FF6B00 !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3) !important;
}

@media (max-width: 640px) {
  .tabs-clean-row {
    gap: 6px;
  }
  .tab-btn-clean {
    padding: 8px 14px;
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   REMOVE ALL GRAY BACKGROUNDS FROM FAQ & CHANNELS CTA
   ========================================================================== */
.hub-content-section {
  background: #FFFFFF !important;
  padding: 40px 0 80px 0 !important;
}

/* Warm Luxury Orange-Tinted CTA Box (No Gray!) */
.clean-cta-box {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%) !important;
  border: 1px solid #FFEDD5 !important;
  border-radius: 24px !important;
  padding: 48px 30px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px -5px rgba(255, 107, 0, 0.08) !important;
}

.clean-cta-box h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}

.clean-cta-box p {
  font-size: 1rem !important;
  color: #475569 !important;
  max-width: 580px !important;
  margin: 0 auto 28px auto !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   REMOVE BORDER-TOP FROM HUBS & CTA SECTIONS
   ========================================================================== */
.hub-content-section,
.clean-cta-box,
.stadium-feeds-box,
.channel-packs-clean-grid,
.hub-hero {
  border-top: none !important;
}


/* ==========================================================================
   NEXT-LEVEL PROFESSIONAL SMART SAVINGS BREAKDOWN (AESTHETIC & HIGH CONVERTING)
   ========================================================================== */
.smart-savings-section {
  padding: 40px 0 60px 0;
  position: relative;
}

.savings-header-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px auto;
}

.savings-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #EA580C;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-pill, 9999px);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.05);
}

.savings-main-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.savings-subtitle {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* -------------------- Left Card: Expensive Subscriptions -------------------- */
.expensive-subs-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  position: relative;
}

.subs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 16px;
}

.subs-card-title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 3px 0;
}

.subs-card-sub {
  font-size: 0.7813rem;
  color: #64748B;
  display: block;
}

.subs-total-badge {
  text-align: right;
  flex-shrink: 0;
}

.subs-strike-label {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
  font-weight: 600;
}

.monthly-price-strike {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #DC2626;
  text-decoration: line-through;
}

.subs-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  margin-bottom: 20px;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-img {
  height: 20px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.8);
  transition: all 0.2s ease;
}

.sub-row-item:hover .brand-logo-img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

.sub-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.sub-price-col {
  text-align: right;
}

.sub-price-usd {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0F172A;
  font-family: 'JetBrains Mono', monospace;
}

.sub-price-aed {
  font-size: 0.6875rem;
  color: #64748B;
  margin-left: 3px;
}

.expensive-total-strip {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.total-caption {
  color: #991B1B;
  font-weight: 700;
}

.total-amount-red {
  color: #DC2626;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}

/* -------------------- Right Card: IPTVDubai VIP (Featured Luxury) -------------------- */
.smart-choice-vip-card {
  background: #FFFFFF;
  border: 2px solid #FF6B00;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 12px 35px -5px rgba(255, 107, 0, 0.14);
  display: flex;
  flex-direction: column;
  position: relative;
}

.vip-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vip-choice-pill {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 9999px);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
}

.vip-status-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #16A34A;
  background: #DCFCE7;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 9999px);
}

.green-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.vip-main-brand-info {
  margin-bottom: 16px;
}

.vip-plan-headline {
  font-size: 1.65rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin: 0 0 3px 0;
}

.vip-plan-desc {
  font-size: 0.8438rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

.vip-clean-checks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.45;
}

.vip-clean-checks-list strong {
  color: #0F172A;
}

.check-icon-svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Logos Strip */
.vip-included-logos-strip {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.logos-strip-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748B;
}

.logos-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-stream-logo {
  height: 16px;
  width: auto;
  max-width: 48px;
  object-fit: contain;
  filter: brightness(0) opacity(0.7);
  transition: all 0.2s ease;
}

.mini-stream-logo:hover {
  filter: none;
  opacity: 1;
}

/* Pricing Bottom Box */
.vip-pricing-bottom-box {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: auto;
}

.vip-price-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.price-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #EA580C;
  display: block;
  margin-bottom: 2px;
}

.price-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-val-row .cur-txt {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #EA580C;
}

.price-val-row .main-price-num {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-val-row .per-mo-txt {
  font-size: 0.8125rem;
  color: #64748B;
  font-weight: 600;
}

.sub-price-hint {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
  margin-top: 2px;
}

.savings-highlight-card {
  text-align: right;
  background: #FFFFFF;
  border: 1px solid #FFEDD5;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.08);
}

.save-tag {
  font-size: 0.625rem;
  font-weight: 800;
  color: #16A34A;
  display: block;
  letter-spacing: 0.05em;
}

.save-amount-text {
  font-size: 1.05rem;
  font-weight: 900;
  color: #EA580C;
  display: block;
}

.save-sub-text {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
}

.btn-clean-vip-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: var(--radius-pill, 9999px);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-clean-vip-action:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   ULTRA-CLEAN PROFESSIONAL SMART SAVINGS COMPARISON (ZERO BROKEN IMAGES)
   ========================================================================== */
.smart-savings-section {
  padding: 40px 0 60px 0;
  position: relative;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* Left Card: Expensive Subscriptions */
.expensive-subs-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.subs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 16px;
}

.subs-card-title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 3px 0;
}

.subs-card-sub {
  font-size: 0.7813rem;
  color: #64748B;
  display: block;
}

.subs-total-badge {
  text-align: right;
  flex-shrink: 0;
}

.subs-strike-label {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
  font-weight: 600;
}

.monthly-price-strike {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #DC2626;
  text-decoration: line-through;
}

.subs-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  margin-bottom: 18px;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Colored Crisp Brand Chips (No Broken Images!) */
.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 5px;
  min-width: 58px;
  text-align: center;
  color: #FFFFFF;
}

.brand-sky { background: #0019A8; }
.brand-sports { background: #00457C; }
.brand-disney { background: #113CCF; }
.brand-max { background: #7222F7; }
.brand-paramount { background: #0064FF; }
.brand-prime { background: #008296; }
.brand-apple { background: #1E293B; }
.brand-crunchyroll { background: #EA580C; }

.sub-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1E293B;
}

.sub-price-col {
  text-align: right;
  white-space: nowrap;
}

.sub-price-usd {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0F172A;
  font-family: 'JetBrains Mono', monospace;
}

.sub-price-aed {
  font-size: 0.6875rem;
  color: #64748B;
  margin-left: 3px;
}

.expensive-total-strip {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.total-caption {
  color: #991B1B;
  font-weight: 700;
}

.total-amount-red {
  color: #DC2626;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}

/* -------------------- Right Card: IPTV Dubai VIP -------------------- */
.smart-choice-vip-card {
  background: #FFFFFF;
  border: 2px solid #FF6B00;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px -5px rgba(255, 107, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.vip-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vip-choice-pill {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 9999px);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
}

.vip-status-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #16A34A;
  background: #DCFCE7;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 9999px);
}

.green-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
}

.vip-main-brand-info {
  margin-bottom: 16px;
}

.vip-plan-headline {
  font-size: 1.65rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin: 0 0 3px 0;
}

.vip-plan-desc {
  font-size: 0.8125rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

.vip-clean-checks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.45;
}

.vip-clean-checks-list strong {
  color: #0F172A;
}

.check-icon-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Logos Chips */
.vip-included-logos-strip {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.logos-strip-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748B;
  display: block;
  margin-bottom: 6px;
}

.logos-mini-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stream-chip {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Pricing Bottom Box */
.vip-pricing-bottom-box {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 16px;
  padding: 16px 20px;
}

.vip-price-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.price-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #EA580C;
  display: block;
  margin-bottom: 2px;
}

.price-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-val-row .cur-txt {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #EA580C;
}

.price-val-row .main-price-num {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-val-row .per-mo-txt {
  font-size: 0.8125rem;
  color: #64748B;
  font-weight: 600;
}

.sub-price-hint {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
  margin-top: 2px;
}

.savings-highlight-card {
  text-align: right;
  background: #FFFFFF;
  border: 1px solid #FFEDD5;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.08);
}

.save-tag {
  font-size: 0.625rem;
  font-weight: 800;
  color: #16A34A;
  display: block;
  letter-spacing: 0.05em;
}

.save-amount-text {
  font-size: 1.05rem;
  font-weight: 900;
  color: #EA580C;
  display: block;
}

.save-sub-text {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
}

.btn-clean-vip-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: var(--radius-pill, 9999px);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-clean-vip-action:hover {
  background: linear-gradient(135deg, #E65C00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   AUTHENTIC CRISP SVG BRAND BADGES FOR SMART SAVINGS COMPARISON
   ========================================================================== */
.svg-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.icon-cable { background: #0F172A; color: #38BDF8; }
.icon-netflix { background: #000000; }
.icon-hulu { background: #0B1E19; }
.icon-disney { background: #040B48; }
.icon-prime { background: #0F172A; }
.icon-apple { background: #F1F5F9; color: #000000; border: 1px solid #E2E8F0; }
.icon-peacock { background: #000000; }
.icon-paramount { background: #0064FF; color: #FFFFFF; }

.sub-details {
  display: flex;
  flex-direction: column;
}

.sub-name {
  font-size: 0.8438rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.sub-plan-desc {
  font-size: 0.6875rem;
  color: #64748B;
  font-weight: 500;
  line-height: 1.2;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ==========================================================================
   OFFICIAL VECTOR BRAND LOGO STYLES (CLEAN, SHARP & HIGH-CONTRAST)
   ========================================================================== */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.svg-brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 65px;
}

.svg-brand-logo-wrap svg {
  display: block;
}

.sub-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FAFAFB;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.vip-check-svg {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #DCFCE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8438rem;
  color: #334155;
  line-height: 1.4;
}

.logos-mini-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stream-chip {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   PERFECT CRISP VECTOR LOGOS FOR SMART SAVINGS (ZERO CLIPPING & ZERO BREAKS)
   ========================================================================== */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.brand-logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 85px;
  flex-shrink: 0;
}

.brand-logo-container svg {
  display: block;
  max-height: 22px;
  width: auto;
}

.brand-text-col {
  display: flex;
  align-items: center;
}

.sub-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1E293B;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.vip-check-svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.4;
}


/* ==========================================================================
   UNBREAKABLE LUXURY BRAND BADGE PILLS (NETFLIX, APPLE TV, HULU, DISNEY, ETC)
   ========================================================================== */
.brand-badge-pill-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  min-width: 82px;
  text-align: center;
  text-transform: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.brand-cable-pill {
  background: #0284C7;
  color: #FFFFFF;
}

.brand-netflix-pill {
  background: #E50914;
  color: #FFFFFF;
  letter-spacing: 0.08em;
}

.brand-hulu-pill {
  background: #1CE783;
  color: #0B1E19;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.brand-disney-pill {
  background: #113CCF;
  color: #FFFFFF;
}

.brand-prime-pill {
  background: #0F172A;
  color: #00A8E1;
  border: 1px solid #1E293B;
}

.brand-apple-pill {
  background: #0F172A;
  color: #FFFFFF;
}

.brand-peacock-pill {
  background: #000000;
  color: #FACC15;
}

.brand-paramount-pill {
  background: #0064FF;
  color: #FFFFFF;
}


/* ==========================================================================
   STANDALONE VECTOR SVG BRAND ICONS (ZERO BROKEN SHAPES)
   ========================================================================== */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-svg-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.brand-svg-icon-wrap svg {
  display: block;
}

.sub-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}


/* ==========================================================================
   100% ACCURATE OFFICIAL VECTOR BRAND LOGOS (ZERO BREAKS & SEAMLESS ALIGNMENT)
   ========================================================================== */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.official-svg-logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 75px;
  height: 28px;
  flex-shrink: 0;
}

.official-svg-logo-box svg {
  display: block;
  max-height: 26px;
  width: auto;
}

.sub-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}


/* ==========================================================================
   MASTER LUXURY SMART SAVINGS UI SYSTEM (WORLD-CLASS HIGH-END COMPARISON)
   ========================================================================== */
.smart-savings-section {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 44px 36px;
  box-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.06);
  border: 1px solid #F1F5F9;
  margin: 50px 0 60px 0;
}

.savings-header-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px auto;
}

.savings-badge-pill {
  display: inline-flex;
  padding: 5px 14px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #EA580C;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.savings-main-title {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.savings-subtitle {
  font-size: 0.9375rem;
  color: #64748B;
  line-height: 1.5;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* Left Card: Expensive Subscriptions */
.expensive-subs-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.subs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.subs-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
}

.subs-card-sub {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
}

.subs-total-badge {
  text-align: right;
}

.subs-strike-label {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
  font-weight: 600;
}

.monthly-price-strike {
  font-size: 1.05rem;
  font-weight: 900;
  color: #DC2626;
  text-decoration: line-through;
  font-family: 'JetBrains Mono', monospace;
}

.subs-items-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  margin-bottom: 20px;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sub-row-item:hover {
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon-squircle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.icon-bg-cable { background: linear-gradient(135deg, #0284C7, #0369A1); }
.icon-bg-netflix { background: #000000; border: 1px solid #27272A; }
.netflix-n-letter { color: #E50914; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1; }
.icon-bg-hulu { background: #0B1E19; border: 1px solid #134E4A; }
.hulu-text-logo { color: #1CE783; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: -0.5px; }
.icon-bg-disney { background: linear-gradient(135deg, #040B48, #0063E5); }
.disney-plus-text { color: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 900; }
.icon-bg-prime { background: #0F172A; border: 1px solid #1E293B; }
.icon-bg-apple { background: #000000; border: 1px solid #27272A; }
.icon-bg-peacock { background: #000000; border: 1px solid #27272A; }
.icon-bg-paramount { background: linear-gradient(135deg, #0064FF, #0040A8); }

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.service-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748B;
  line-height: 1.2;
}

.sub-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.sub-price-usd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
}

.sub-price-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748B;
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 4px;
}

.expensive-total-strip {
  padding: 14px 18px;
  background: #FFF1F2;
  border: 1px solid #FFE4E6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.total-caption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #9F1239;
}

.total-amount-red {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #E11D48;
  font-family: 'JetBrains Mono', monospace;
}

/* Right Card: IPTV Dubai VIP */
.smart-choice-vip-card {
  background: #FFFFFF;
  border: 2px solid #FF6B00;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px -4px rgba(255, 107, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.vip-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vip-choice-pill {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
}

.vip-status-green {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #16A34A;
  background: #F0FDF4;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid #DCFCE7;
}

.green-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
}

.vip-main-brand-info {
  margin-bottom: 20px;
}

.vip-plan-headline {
  font-size: 1.65rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.vip-plan-desc {
  font-size: 0.8438rem;
  color: #64748B;
  line-height: 1.5;
}

.vip-clean-checks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8438rem;
  color: #334155;
  line-height: 1.45;
}

.vip-check-svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.vip-included-logos-strip {
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  margin-bottom: 20px;
}

.logos-strip-label {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.logos-mini-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stream-chip {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.vip-pricing-bottom-box {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 14px;
  padding: 18px;
}

.vip-price-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.price-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #9A3412;
  display: block;
  margin-bottom: 2px;
}

.price-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cur-txt {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #EA580C;
}

.main-price-num {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1;
}

.per-mo-txt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
}

.sub-price-hint {
  font-size: 0.6875rem;
  color: #9A3412;
  display: block;
  margin-top: 2px;
}

.savings-highlight-card {
  background: #FFFFFF;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.08);
}

.save-tag {
  font-size: 0.625rem;
  font-weight: 900;
  color: #16A34A;
  letter-spacing: 0.06em;
  display: block;
}

.save-amount-text {
  font-size: 1.05rem;
  font-weight: 900;
  color: #EA580C;
  display: block;
  line-height: 1.2;
}

.save-sub-text {
  font-size: 0.6875rem;
  color: #64748B;
  font-weight: 600;
}

.btn-clean-vip-action {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 800;
  padding: 13px 20px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-clean-vip-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.45);
}

@media (max-width: 992px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
  .smart-savings-section {
    padding: 28px 20px;
  }
}


/* ==========================================================================
   DEDICATED BRAND IMAGE APP ICONS (CRISP, LOCAL & IMMUNE TO SVG BREAKS)
   ========================================================================== */
.brand-app-icon-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.sub-row-item:hover .brand-app-icon-img {
  transform: scale(1.06);
}


/* ==========================================================================
   CLEAN SOLID INLINE BRAND LOGOS (ZERO CLIPPING, ZERO BOXES, 100% VISIBLE)
   ========================================================================== */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 75px;
  height: 24px;
  flex-shrink: 0;
}

.brand-logo-wrap svg {
  display: block;
  max-height: 22px;
  width: auto;
}

.sub-plan-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  border-color: #CBD5E1;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}


/* ==========================================================================
   SMART SAVINGS BREAKDOWN — COMPLETE STYLES
   ========================================================================== */

/* --- Section & Header --- */
.smart-savings-section {
  padding: 80px 0 60px;
}

.savings-header-center {
  text-align: center;
  margin-bottom: 48px;
}

.savings-badge-pill {
  display: inline-block;
  margin-bottom: 16px;
}

.savings-badge-pill span {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 107, 0, 0.15));
  color: #FF6B00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.savings-main-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.savings-subtitle {
  font-size: 1rem;
  color: #64748B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Comparison Grid --- */
.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Left Card: Expensive Subs --- */
.expensive-subs-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}

.subs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}

.subs-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px;
}

.subs-card-sub {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 500;
}

.subs-total-badge {
  text-align: right;
  flex-shrink: 0;
}

.subs-strike-label {
  display: block;
  font-size: 0.7rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.monthly-price-strike {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  color: #EF4444;
  margin-top: 2px;
}

/* --- Subscription Items List --- */
.subs-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* --- Brand Column (Icon + Text) --- */
.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-app-icon-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.service-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
}

.service-tag {
  font-size: 0.7rem;
  color: #94A3B8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Price Column --- */
.sub-price-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sub-price-usd {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0F172A;
}

.sub-price-pill {
  display: inline-block;
  padding: 3px 8px;
  background: #FEF2F2;
  color: #EF4444;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
}

.sub-price-aed {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 500;
}

/* --- Bottom Total Strip --- */
.expensive-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FEF2F2, #FFF7ED);
  border: 1px solid #FECACA;
  border-radius: 12px;
}

.total-caption {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748B;
  font-style: italic;
}

.total-amount-red {
  font-size: 1.05rem;
  font-weight: 900;
  color: #DC2626;
}

/* --- Right Card: VIP Smart Choice --- */
.smart-choice-vip-card {
  background: #FFFFFF;
  border: 2px solid #FF6B00;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(255, 107, 0, 0.12);
  position: relative;
}

.vip-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}

.vip-choice-pill {
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 50px;
}

.vip-status-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #16A34A;
}

.green-live-dot {
  width: 8px;
  height: 8px;
  background: #16A34A;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.vip-main-brand-info {
  margin-bottom: 20px;
}

.vip-plan-headline {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px;
}

.vip-plan-desc {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* --- VIP Checks List --- */
.vip-clean-checks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
}

.vip-check-svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Included Logos Strip --- */
.vip-included-logos-strip {
  margin-bottom: 22px;
  padding: 14px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #F1F5F9;
}

.logos-strip-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.logos-mini-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stream-chip {
  display: inline-block;
  padding: 3px 10px;
  background: #FFFFFF;
  color: #475569;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

/* --- VIP Pricing Bottom Box --- */
.vip-pricing-bottom-box {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 20px;
}

.vip-price-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.price-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cur-txt {
  font-size: 0.9rem;
  font-weight: 700;
  color: #92400E;
}

.main-price-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1;
}

.per-mo-txt {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748B;
}

.sub-price-hint {
  display: block;
  font-size: 0.72rem;
  color: #92400E;
  margin-top: 4px;
  font-weight: 500;
}

.savings-highlight-card {
  text-align: center;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 2px solid #16A34A;
  border-radius: 12px;
  flex-shrink: 0;
}

.save-tag {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  color: #16A34A;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

.save-amount-text {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: #16A34A;
}

.save-sub-text {
  display: block;
  font-size: 0.7rem;
  color: #64748B;
  margin-top: 2px;
}

/* --- VIP CTA Button --- */
.btn-clean-vip-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}

.btn-clean-vip-action:hover {
  background: linear-gradient(135deg, #E65D00, #FF7A1A);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 107, 0, 0.4);
  color: #FFFFFF;
}

/* --- VIP Features Section --- */
.vip-features-section {
  padding: 80px 0 60px;
}

.features-header {
  margin-bottom: 48px;
}

.features-badge-pill {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 107, 0, 0.15));
  color: #FF6B00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
  margin-bottom: 16px;
}

.features-main-title {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 12px;
}

.features-subtext {
  font-size: 1rem;
  color: #64748B;
  max-width: 550px;
  margin: 0 auto;
}

.features-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .features-grid-3 {
    grid-template-columns: 1fr;
  }
}

.feature-item-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-item-box:hover {
  border-color: #FF6B00;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.08);
}

.feature-icon-circle {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 107, 0, 0.15));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.feature-item-box h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px;
}

.feature-item-box p {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* --- Also fix brand-logo-wrap if it exists --- */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 75px;
  height: 24px;
  flex-shrink: 0;
}

.brand-logo-wrap svg {
  display: block;
  max-height: 22px;
  width: auto;
}

.sub-plan-name,
.sub-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

/* --- Official SVG Logo Box (inline SVG logos) --- */
.official-svg-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.official-svg-logo-box svg {
  display: block;
}


/* ==========================================================================
   COMPACT & PROFESSIONAL SINGLE-VIEWPORT SMART SAVINGS BREAKDOWN
   ========================================================================== */
.smart-savings-section {
  padding: 40px 0 50px;
}

.savings-header-center {
  text-align: center;
  margin-bottom: 24px;
}

.savings-badge-pill {
  display: inline-block;
  margin-bottom: 8px;
}

.savings-badge-pill span {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255, 107, 0, 0.08);
  color: #FF6B00;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.savings-main-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.savings-subtitle {
  font-size: 0.9rem;
  color: #64748B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.45;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Card: Expensive Subs */
.expensive-subs-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.subs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.subs-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.subs-card-sub {
  display: block;
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 1px;
}

.subs-total-badge {
  text-align: right;
}

.subs-strike-label {
  display: block;
  font-size: 0.65rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
}

.monthly-price-strike {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  color: #EF4444;
  line-height: 1.1;
}

.subs-items-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.sub-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.sub-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(2px);
}

.sub-brand-col {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  flex-shrink: 0;
  color: #FFFFFF;
  line-height: 1;
}

.brand-icon-box.cable { background: #0284C7; font-size: 0.85rem; }
.brand-icon-box.netflix { background: #000000; color: #E50914; font-weight: 900; font-size: 0.95rem; font-family: sans-serif; }
.brand-icon-box.hulu { background: #0B1E19; color: #1CE783; font-weight: 900; font-size: 0.65rem; }
.brand-icon-box.disney { background: #0063E5; font-size: 0.72rem; }
.brand-icon-box.prime { background: #0F172A; color: #00A8E1; font-size: 0.62rem; }
.brand-icon-box.appletv { background: #000000; color: #FFFFFF; font-size: 0.68rem; }
.brand-icon-box.peacock { background: #000000; font-size: 0.85rem; }
.brand-icon-box.paramount { background: #0064FF; font-size: 0.72rem; }

.brand-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
}

.service-detail {
  font-size: 0.68rem;
  color: #94A3B8;
  font-weight: 500;
}

.sub-price-col {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.usd-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0F172A;
}

.aed-pill {
  display: inline-block;
  padding: 2px 6px;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}

.expensive-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
}

.total-caption {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.total-amount-red {
  font-size: 0.95rem;
  font-weight: 900;
  color: #DC2626;
}

/* Right Card: VIP Smart Choice */
.smart-choice-vip-card {
  background: #FFFFFF;
  border: 2px solid #FF6B00;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 24px rgba(255, 107, 0, 0.08);
}

.vip-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vip-choice-pill {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 50px;
}

.vip-status-green {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #16A34A;
}

.vip-main-brand-info {
  margin-bottom: 12px;
}

.vip-plan-headline {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 3px;
}

.vip-plan-desc {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.vip-clean-checks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vip-clean-checks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.35;
}

.vip-check-svg {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.vip-included-logos-strip {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
}

.logos-strip-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.logos-mini-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stream-chip {
  display: inline-block;
  padding: 2px 7px;
  background: #FFFFFF;
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
}

.vip-pricing-bottom-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 14px;
}

.vip-price-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.price-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-val-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.cur-txt {
  font-size: 0.8rem;
  font-weight: 700;
  color: #92400E;
}

.main-price-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1;
}

.per-mo-txt {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
}

.sub-price-hint {
  display: block;
  font-size: 0.68rem;
  color: #92400E;
  margin-top: 2px;
}

.savings-highlight-card {
  text-align: center;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 1.5px solid #16A34A;
  border-radius: 8px;
  flex-shrink: 0;
}

.save-tag {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  color: #16A34A;
  letter-spacing: 1px;
}

.save-amount-text {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: #16A34A;
  line-height: 1.1;
}

.save-sub-text {
  display: block;
  font-size: 0.62rem;
  color: #64748B;
}

.btn-clean-vip-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 18px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
}

.btn-clean-vip-action:hover {
  background: linear-gradient(135deg, #E65D00, #FF7A1A);
  transform: translateY(-1px);
  color: #FFFFFF;
}


/* ==========================================================================
   ULTRA-COMPACT 2-COLUMN SINGLE-VIEWPORT SMART SAVINGS BREAKDOWN
   ========================================================================== */
.smart-savings-section {
  padding: 30px 0 45px;
}

.savings-header-center {
  text-align: center;
  margin-bottom: 20px;
}

.savings-badge-pill {
  display: inline-block;
  margin-bottom: 6px;
}

.savings-badge-pill span {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(255, 107, 0, 0.08);
  color: #FF6B00;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.savings-main-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}

.savings-subtitle {
  font-size: 0.85rem;
  color: #64748B;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.4;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.savings-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Left Card */
.left-expensive-card {
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.card-head-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.card-head-sub {
  display: block;
  font-size: 0.7rem;
  color: #94A3B8;
  margin-top: 1px;
}

.total-monthly-box {
  text-align: right;
}

.strike-label {
  display: block;
  font-size: 0.62rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
}

.strike-price {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  color: #EF4444;
  line-height: 1.1;
}

/* 2-Column Compact Grid */
.subs-compact-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .subs-compact-2col-grid {
    grid-template-columns: 1fr;
  }
}

.mini-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 7px;
  transition: all 0.15s ease;
}

.mini-sub-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.mini-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
  line-height: 1;
}

.mini-icon.cable { background: #0284C7; font-size: 0.75rem; }
.mini-icon.netflix { background: #000000; color: #E50914; font-weight: 900; font-size: 0.85rem; font-family: sans-serif; }
.mini-icon.hulu { background: #0B1E19; color: #1CE783; font-weight: 900; font-size: 0.58rem; }
.mini-icon.disney { background: #0063E5; font-size: 0.65rem; }
.mini-icon.prime { background: #0F172A; color: #00A8E1; font-size: 0.55rem; }
.mini-icon.appletv { background: #000000; color: #FFFFFF; font-size: 0.6rem; }
.mini-icon.peacock { background: #000000; font-size: 0.75rem; }
.mini-icon.paramount { background: #0064FF; font-size: 0.65rem; }

.mini-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.mini-usd {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0F172A;
}

.mini-aed {
  display: inline-block;
  padding: 1px 5px;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}

.yearly-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
}

.strip-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
}

.strip-value-red {
  font-size: 0.88rem;
  font-weight: 900;
  color: #DC2626;
}

/* Right Card: VIP Smart Choice */
.right-vip-card {
  border: 2px solid #FF6B00;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.08);
}

.vip-top-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.vip-highlight-pill {
  display: inline-block;
  padding: 3px 9px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 50px;
}

.vip-reduction-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #16A34A;
}

.dot-live {
  width: 7px;
  height: 7px;
  background: #16A34A;
  border-radius: 50%;
  display: inline-block;
}

.vip-header-info {
  margin-bottom: 10px;
}

.vip-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 2px;
}

.vip-subtitle {
  font-size: 0.75rem;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
}

.vip-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vip-perks-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.73rem;
  color: #334155;
  line-height: 1.3;
}

.vip-perks-list li svg {
  flex-shrink: 0;
}

.vip-deal-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 10px 12px;
}

.deal-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.deal-eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #92400E;
  text-transform: uppercase;
}

.deal-num-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.deal-num-row .cur {
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400E;
}

.deal-num-row .big-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1;
}

.deal-num-row .freq {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
}

.deal-note {
  display: block;
  font-size: 0.65rem;
  color: #92400E;
  margin-top: 1px;
}

.you-save-box {
  text-align: center;
  padding: 5px 10px;
  background: #FFFFFF;
  border: 1.5px solid #16A34A;
  border-radius: 7px;
  flex-shrink: 0;
}

.save-title {
  display: block;
  font-size: 0.52rem;
  font-weight: 800;
  color: #16A34A;
  letter-spacing: 1px;
}

.save-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  color: #16A34A;
  line-height: 1.1;
}

.save-sub {
  display: block;
  font-size: 0.58rem;
  color: #64748B;
}

.btn-vip-orange-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 16px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(255, 107, 0, 0.25);
}

.btn-vip-orange-cta:hover {
  background: linear-gradient(135deg, #E65D00, #FF7A1A);
  transform: translateY(-1px);
  color: #FFFFFF;
}


/* ==========================================================================
   REMOVE BACKGROUND FROM SMART SAVINGS SECTION (CLEAN TRANSPARENT)
   ========================================================================== */
.smart-savings-section {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ==========================================================================
   SPACIOUS, BALANCED & LUXURIOUS SMART SAVINGS BREAKDOWN
   ========================================================================== */
.smart-savings-section {
  padding: 50px 0 65px;
}

.savings-header-center {
  text-align: center;
  margin-bottom: 36px;
}

.savings-badge-pill {
  display: inline-block;
  margin-bottom: 12px;
}

.savings-badge-pill span {
  display: inline-block;
  padding: 5px 16px;
  background: rgba(255, 107, 0, 0.08);
  color: #FF6B00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.savings-main-title {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}

.savings-subtitle {
  font-size: 0.95rem;
  color: #64748B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.55;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .savings-comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.savings-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Left Card */
.left-expensive-card {
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.card-head-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.card-head-sub {
  display: block;
  font-size: 0.78rem;
  color: #94A3B8;
  margin-top: 2px;
}

.total-monthly-box {
  text-align: right;
}

.strike-label {
  display: block;
  font-size: 0.68rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.strike-price {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: #EF4444;
  line-height: 1.2;
  margin-top: 2px;
}

/* 2-Column Spacious Grid */
.subs-compact-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 580px) {
  .subs-compact-2col-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.mini-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.mini-sub-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.mini-icon.cable { background: #0284C7; font-size: 0.85rem; }
.mini-icon.netflix { background: #000000; color: #E50914; font-weight: 900; font-size: 0.95rem; font-family: sans-serif; }
.mini-icon.hulu { background: #0B1E19; color: #1CE783; font-weight: 900; font-size: 0.65rem; }
.mini-icon.disney { background: #0063E5; font-size: 0.72rem; }
.mini-icon.prime { background: #0F172A; color: #00A8E1; font-size: 0.6rem; }
.mini-icon.appletv { background: #000000; color: #FFFFFF; font-size: 0.68rem; }
.mini-icon.peacock { background: #000000; font-size: 0.85rem; }
.mini-icon.paramount { background: #0064FF; font-size: 0.72rem; }

.mini-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mini-usd {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0F172A;
}

.mini-aed {
  display: inline-block;
  padding: 3px 8px;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 5px;
  white-space: nowrap;
}

.yearly-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 12px;
}

.strip-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748B;
}

.strip-value-red {
  font-size: 1rem;
  font-weight: 900;
  color: #DC2626;
}

/* Right Card: VIP Smart Choice */
.right-vip-card {
  border: 2px solid #FF6B00;
  box-shadow: 0 8px 30px rgba(255, 107, 0, 0.1);
}

.vip-top-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vip-highlight-pill {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 50px;
}

.vip-reduction-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #16A34A;
}

.dot-live {
  width: 8px;
  height: 8px;
  background: #16A34A;
  border-radius: 50%;
  display: inline-block;
}

.vip-header-info {
  margin-bottom: 16px;
}

.vip-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 4px;
}

.vip-subtitle {
  font-size: 0.84rem;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

.vip-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vip-perks-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.4;
}

.vip-perks-list li svg {
  flex-shrink: 0;
}

.vip-deal-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 16px 18px;
}

.deal-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.deal-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.deal-num-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.deal-num-row .cur {
  font-size: 0.85rem;
  font-weight: 700;
  color: #92400E;
}

.deal-num-row .big-price {
  font-size: 1.95rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1;
}

.deal-num-row .freq {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748B;
}

.deal-note {
  display: block;
  font-size: 0.72rem;
  color: #92400E;
  margin-top: 3px;
}

.you-save-box {
  text-align: center;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1.5px solid #16A34A;
  border-radius: 10px;
  flex-shrink: 0;
}

.save-title {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  color: #16A34A;
  letter-spacing: 1px;
}

.save-val {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: #16A34A;
  line-height: 1.15;
}

.save-sub {
  display: block;
  font-size: 0.65rem;
  color: #64748B;
}

.btn-vip-orange-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #FF6B00, #FF8C33);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.28);
}

.btn-vip-orange-cta:hover {
  background: linear-gradient(135deg, #E65D00, #FF7A1A);
  transform: translateY(-2px);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}


/* ==========================================================================
   PRICING HERO TRUST PILLS (CLEAN, CAPSULE-ROUNDED & LUXURY ALIGNED)
   ========================================================================== */
.pricing-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.pricing-trust-strip .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 50px;
  padding: 7px 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.2s ease;
}

.pricing-trust-strip .trust-item:hover {
  border-color: #FF6B00;
  color: #0F172A;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.12);
}

.pricing-trust-strip .trust-item svg {
  color: #FF6B00;
  stroke: #FF6B00;
  flex-shrink: 0;
}


/* ==========================================================================
   TIGHTEN TOP SPACING FOR VIP FEATURES (UNMATCHED PERFORMANCE) SECTION
   ========================================================================== */
.smart-savings-section {
  padding-bottom: 15px !important;
}

.vip-features-section {
  padding-top: 15px !important;
  padding-bottom: 50px !important;
  margin-top: 0 !important;
}

.vip-features-section .features-header {
  margin-bottom: 28px !important;
}

.vip-features-section .features-badge-pill {
  margin-bottom: 10px !important;
}

.vip-features-section .features-main-title {
  margin-bottom: 8px !important;
}


/* ==========================================================================
   DYNAMIC ACTIVE MENU ITEM STYLES (HEADER & MOBILE DRAWER)
   ========================================================================== */
.capsule-link.active,
.capsule-nav-list .current-menu-item > a,
.capsule-nav-list .current-page-ancestor > a,
.capsule-nav-list .current_page_item > a {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.45) !important;
  border-radius: var(--radius-pill);
}

.mobile-nav-link.active,
.mobile-nav-list .current-menu-item > a,
.mobile-nav-list .current-page-ancestor > a,
.mobile-nav-list .current_page_item > a {
  color: #FF6B00 !important;
  font-weight: 800 !important;
  background: rgba(255, 107, 0, 0.08) !important;
  border-radius: 8px;
}


/* ==========================================================================
   MASTER LUXURY SETUP GUIDE STYLES (PAGE-SETUP-GUIDE.PHP)
   ========================================================================== */
.setup-sub-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255, 107, 0, 0.08);
  color: #FF6B00;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 50px;
  border: 1px solid rgba(255, 107, 0, 0.2);
  margin-bottom: 12px;
}

/* 3-Column Players Grid */
.setup-players-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

@media (max-width: 960px) {
  .setup-players-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.setup-player-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  position: relative;
}

.setup-player-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.setup-player-card.popular-setup-card {
  border: 2px solid #FF6B00 !important;
  box-shadow: 0 16px 36px rgba(255, 107, 0, 0.12) !important;
}

.featured-ribbon-pill {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
  white-space: nowrap;
}

.player-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.player-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-icon-box.orange { background: #FFF7ED; color: #EA580C; }
.player-icon-box.blue { background: #EFF6FF; color: #2563EB; }
.player-icon-box.purple { background: #F5F3FF; color: #7C3AED; }

.player-platform-pill {
  padding: 4px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50px;
}

.player-card-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 8px;
}

.player-card-desc {
  font-size: 0.84rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Steps list */
.setup-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}

.setup-step-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  padding: 10px 12px;
  border-radius: 10px;
}

.step-num-badge {
  width: 22px;
  height: 22px;
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.popular-setup-card .step-num-badge {
  background: #FF6B00;
}

.step-text-wrap strong {
  color: #0F172A;
}

.player-card-foot {
  margin-top: auto;
}

.btn-setup-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-setup-action:hover {
  background: #E2E8F0;
  color: #000000;
  transform: translateY(-1px);
}

.btn-setup-action.btn-orange {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

.btn-setup-action.btn-orange:hover {
  background: linear-gradient(135deg, #E65D00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.45);
  color: #FFFFFF;
}

/* 4-Step Onboarding Flow */
.onboarding-flow-section {
  margin-bottom: 60px;
}

.flow-header {
  margin-bottom: 32px;
}

.flow-header h2 {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px;
}

.flow-header p {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0;
}

.flow-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .flow-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .flow-steps-grid {
    grid-template-columns: 1fr;
  }
}

.flow-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.flow-step-card:hover {
  transform: translateY(-3px);
  border-color: #FF6B00;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.08);
}

.flow-step-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FF6B00;
  line-height: 1;
  margin-bottom: 12px;
}

.flow-step-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px;
}

.flow-step-card p {
  font-size: 0.8rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* UAE Network Optimization */
.network-optimization-section {
  margin-bottom: 60px;
}

.network-box-wrapper {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.network-box-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 28px auto;
}

.network-box-header h2 {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px;
}

.network-box-header p {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0;
}

.network-cards-3grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 850px) {
  .network-cards-3grid {
    grid-template-columns: 1fr;
  }
}

.network-opt-card {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  padding: 22px;
  transition: all 0.2s ease;
}

.network-opt-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.opt-card-icon {
  margin-bottom: 12px;
}

.network-opt-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px;
}

.network-opt-card p {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

.dns-code-strip {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  background: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  color: #334155;
}

.dns-code-strip strong {
  color: #EA580C;
  font-family: monospace;
}

/* CTA Box */
.clean-cta-box {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
  margin-top: 20px;
}

.cta-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #4ADE80;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #22C55E;
}

.clean-cta-box h2 {
  font-size: 2rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.clean-cta-box p {
  font-size: 0.95rem;
  color: #94A3B8;
  max-width: 560px;
  margin: 0 auto 28px auto;
  line-height: 1.6;
}

.clean-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-clean-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
  transition: all 0.25s ease;
}

.btn-clean-primary:hover {
  background: linear-gradient(135deg, #E65D00 0%, #FF7700 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 107, 0, 0.5);
  color: #FFFFFF;
}

.btn-clean-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0F172A !important;
  border: 1.5px solid #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-clean-secondary:hover {
  background: #F1F5F9;
  color: #FF6B00 !important;
  border-color: #F1F5F9;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}


/* ==========================================================================
   25. DEDICATED LEGAL & TRUST PAGES (PRIVACY, TERMS, MONEY-BACK GUARANTEE)
   ========================================================================== */
.legal-page-wrapper {
  background-color: #FAFAFB;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-hero-section {
  padding: 14px 0 30px 0 !important;
  background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.06) 0%, transparent 70%), #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  text-align: center;
  position: relative;
}

.legal-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #EA580C;
  font-size: 0.6875rem !important;
  font-weight: 800;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px !important;
}

.legal-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.legal-hero-sub {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto 16px auto !important;
  line-height: 1.6;
}

.legal-effective-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  color: #475569;
  font-weight: 600;
}

.legal-main-body {
  padding: 40px 0 70px 0;
}

.legal-container {
  max-width: 920px;
  margin: 0 auto;
}

.legal-content-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 42px 48px;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04);
}

.legal-section-block {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid #F1F5F9;
}

.legal-section-block:last-of-type {
  border-bottom: none;
  margin-bottom: 20px;
  padding-bottom: 0;
}

.legal-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.legal-num-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  flex-shrink: 0;
}

.legal-section-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.02em;
}

.legal-section-block p {
  font-size: 0.9625rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 14px;
}

.legal-check-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-check-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #334155;
}

.legal-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: #FF6B00;
  font-weight: 800;
  font-size: 0.95rem;
}

.legal-callout-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 16px 0;
}

.legal-callout-box svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.legal-callout-box strong {
  display: block;
  font-size: 0.95rem;
  color: #9A3412;
  margin-bottom: 4px;
}

.legal-callout-box p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #7C2D12;
  margin: 0;
}

/* Guarantee 3 Pillars Grid */
.guarantee-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}

.guarantee-pillar-card {
  background: #FAFAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.guarantee-pillar-card:hover {
  transform: translateY(-2px);
  border-color: #FFD8A8;
}

.pillar-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
}

.guarantee-pillar-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.guarantee-pillar-card p {
  font-size: 0.84rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Refund Step Items */
.refund-steps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.refund-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 18px;
}

.step-badge {
  background: #0F172A;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.refund-step-item strong {
  display: block;
  font-size: 0.95rem;
  color: #0F172A;
  margin-bottom: 2px;
}

.refund-step-item p {
  font-size: 0.875rem;
  color: #64748B;
  margin: 0;
}

/* Legal Help Bottom Strip */
.legal-help-strip {
  margin-top: 36px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 18px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #FFFFFF;
}

.legal-help-info h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.legal-help-info p {
  font-size: 0.875rem;
  color: #94A3B8;
  margin: 0;
}

.legal-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #22C55E;
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.legal-whatsapp-btn:hover {
  background: #16A34A;
  transform: translateY(-1px);
}

.footer-legal-inline-links a {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-inline-links a:hover {
  color: #FF6B00;
}
/* ==========================================================================
   CLEAN & PROFESSIONAL 7-DAY GUARANTEE STYLES
   ========================================================================== */
.guarantee-summary-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.clean-policy-section {
  margin-bottom: 32px;
}

.clean-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.clean-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #F1F5F9;
  color: #0F172A;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
}

.clean-section-title-wrap h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.02em;
}

.clean-section-lead {
  font-size: 1.05rem;
  color: #1E293B;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 10px;
}

.clean-policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 28px 0;
}

.clean-policy-card {
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clean-policy-card.card-approved {
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-top: 4px solid #16A34A;
}

.clean-policy-card.card-non-approved {
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-top: 4px solid #DC2626;
}

.clean-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E2E8F0;
}

.clean-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-check {
  background: #DCFCE7;
  color: #16A34A;
}

.icon-cross {
  background: #FEE2E2;
  color: #DC2626;
}

.clean-card-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.clean-badge-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.label-green {
  color: #15803D;
}

.label-red {
  color: #B91C1C;
}

.clean-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clean-card-list li {
  font-size: 0.9125rem;
  line-height: 1.55;
  color: #475569;
}

.clean-card-list li strong {
  display: block;
  color: #0F172A;
  font-weight: 700;
  margin-bottom: 2px;
}

.clean-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.clean-step-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px 18px;
}

.step-num-pill {
  display: inline-block;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.clean-step-box h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px 0;
}

.clean-step-box p {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

.clean-timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.timeline-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
}

.timeline-box strong {
  display: block;
  font-size: 0.92rem;
  color: #0F172A;
  margin-bottom: 2px;
}

.timeline-box span {
  font-size: 0.82rem;
  color: #64748B;
}

.clean-trial-callout {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border: 1px solid #FFEDD5;
  border-radius: 18px;
  padding: 24px 28px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.trial-callout-content h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.trial-callout-content p {
  font-size: 0.9rem;
  color: #475569;
  margin: 0;
}

.trial-callout-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn-clean-orange {
  display: inline-flex;
  align-items: center;
  background: #FF6B00;
  color: #FFFFFF !important;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-clean-orange:hover {
  background: #EA580C;
  transform: translateY(-1px);
}

.btn-clean-white {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  color: #0F172A !important;
  border: 1px solid #E2E8F0;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 9999px;
  text-decoration: none;
}

.clean-footer-help-box {
  background: #0F172A;
  border-radius: 18px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #FFFFFF;
  margin-top: 32px;
}

.clean-footer-help-box h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.clean-footer-help-box p {
  font-size: 0.875rem;
  color: #94A3B8;
  margin: 0;
}

.btn-clean-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #22C55E;
  color: #FFFFFF !important;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 9999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-clean-whatsapp:hover {
  background: #16A34A;
  transform: translateY(-1px);
}

/* 50/50 Fairness Banner */
.policy-fairness-banner {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border: 1.5px solid #FFEDD5;
  border-radius: 18px;
  padding: 22px 28px;
  margin-bottom: 32px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.06);
}

.fairness-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.fairness-tag-left {
  background: #DCFCE7;
  border: 1px solid #BBF7D0;
  color: #15803D;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fairness-tag-mid {
  font-weight: 800;
  color: #EA580C;
  font-size: 0.9rem;
}

.fairness-tag-right {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #1D4ED8;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.policy-fairness-banner p {
  font-size: 0.95rem;
  color: #78350F;
  line-height: 1.65;
  margin: 0;
}

/* Side-by-Side Policy Split Grid (Approved vs Non-Refundable) */
.policy-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}

.policy-box-status {
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.policy-box-approved {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.06);
}

.policy-box-rejected {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.06);
}

.policy-status-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.status-indicator-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-approved {
  background: #22C55E;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.icon-rejected {
  background: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.policy-status-header h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px 0;
  letter-spacing: -0.02em;
}

.status-sub-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.policy-box-approved .status-sub-label {
  color: #15803D;
}

.policy-box-rejected .status-sub-label {
  color: #B91C1C;
}

.policy-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.policy-items-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9125rem;
  line-height: 1.55;
  color: #334155;
}

.policy-items-list li strong {
  color: #0F172A;
  display: block;
  margin-bottom: 2px;
}

.policy-item-check::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: #16A34A;
  font-weight: 900;
  font-size: 1.1rem;
}

.policy-item-cross::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 1px;
  color: #DC2626;
  font-weight: 900;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .clean-policy-grid,
  .clean-steps-grid,
  .clean-timeline-grid {
    grid-template-columns: 1fr;
  }
  .clean-trial-callout,
  .clean-footer-help-box {
    flex-direction: column;
    text-align: center;
  }
  .trial-callout-actions,
  .btn-clean-whatsapp {
    width: 100%;
    justify-content: center;
  }
  .policy-split-grid {
    grid-template-columns: 1fr;
  }
  .legal-content-card {
    padding: 24px 20px;
  }
  .guarantee-pillars-grid {
    grid-template-columns: 1fr;
  }
  .legal-help-strip {
    flex-direction: column;
    text-align: center;
  }
  .legal-whatsapp-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   UAE GEO KNOWLEDGE & ANTI-FREEZE BUYER GUIDE SECTION
   ========================================================================== */
.geo-knowledge-section {
  background: transparent !important;
  padding: 40px 0;
  position: relative;
  border-top: none !important;
  border-bottom: none !important;
  color: #1E293B;
}

.geo-knowledge-section::before {
  display: none !important;
}

.geo-authority-article {
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.geo-header-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 28px;
}

.geo-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 107, 0, 0.08);
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #EA580C;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.geo-main-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #0F172A !important;
  line-height: 1.25;
  margin-bottom: 12px;
  font-family: 'Space Grotesk', var(--font-primary);
}

.geo-main-lead {
  font-size: 1.1rem;
  color: #475569 !important;
  line-height: 1.6;
  margin: 0;
}

.geo-citable-callout {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-left: 4px solid #FF6B00;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.06);
}

.geo-citable-callout h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #C2410C !important;
  margin-bottom: 14px;
}

.geo-citable-callout p {
  color: #334155 !important;
  font-size: 1rem;
  line-height: 1.6;
}

.geo-citable-callout ul {
  color: #334155 !important;
  line-height: 1.7;
  margin: 12px 0 0 20px;
  font-size: 0.95rem;
}

.geo-citable-callout li {
  margin-bottom: 8px;
  color: #334155 !important;
}

.geo-citable-callout li strong {
  color: #0F172A !important;
}

.geo-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.geo-card-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.geo-card-box h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A !important;
  margin-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 10px;
}

.geo-specs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.geo-specs-table th {
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748B !important;
  border-bottom: 1px solid #F1F5F9;
  width: 42%;
}

.geo-specs-table td {
  padding: 10px 12px;
  font-size: 0.92rem;
  color: #1E293B !important;
  border-bottom: 1px solid #F1F5F9;
}

.geo-specs-table tr:last-child th,
.geo-specs-table tr:last-child td {
  border-bottom: none;
}

.geo-highlight-val {
  color: #EA580C !important;
  font-weight: 700;
}

.geo-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: step-counter;
}

.geo-step-item {
  position: relative;
  padding-left: 36px;
}

.geo-step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 50%;
  color: #EA580C;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A !important;
  margin-bottom: 4px;
}

.geo-step-desc {
  font-size: 0.9rem;
  color: #475569 !important;
  line-height: 1.5;
  margin: 0;
}

.geo-features-pills-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}

.geo-feature-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  text-align: center;
  transition: all 0.2s ease;
  width: 100%;
}

.geo-feature-pill:hover {
  background: #FFF7ED;
  border-color: rgba(255, 107, 0, 0.4);
  color: #EA580C !important;
}

.geo-feature-pill svg {
  stroke: #16A34A;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .geo-insights-grid {
    grid-template-columns: 1fr;
  }
  .geo-features-pills-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .geo-knowledge-section {
    padding: 30px 0;
  }
  .geo-features-pills-row {
    grid-template-columns: 1fr;
  }
  .geo-feature-pill {
    white-space: normal;
    font-size: 0.82rem;
    padding: 8px 14px;
  }
  .geo-citable-callout {
    padding: 20px 20px;
  }
  .geo-card-box {
    padding: 20px 18px;
  }
  .geo-specs-table th,
  .geo-specs-table td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-bar,
  .mobile-app-header,
  .mobile-app-main,
  .mobile-app-footer {
    display: none !important;
  }
}



/* ==========================================================================
   DEDICATED APP-STYLE MOBILE EXPERIENCE (<= 768px ONLY)
   ========================================================================== */
@media (max-width: 768px) {

  /* --- 1. Mobile Header & Hamburger Button --- */
  .mobile-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
  }

  .ham-line {
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .mobile-hamburger-btn.active .ham-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-hamburger-btn.active .ham-line:nth-child(2) {
    opacity: 0;
  }

  .mobile-hamburger-btn.active .ham-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: #0B1120;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .mobile-nav-drawer.active {
    transform: translateX(-320px);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-drawer-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    cursor: pointer;
  }

  .mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  .mobile-drawer-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #E2E8F0 !important;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
  }

  .mobile-nav-link:active,
  .mobile-nav-link:hover {
    background: rgba(255, 107, 0, 0.12);
    border-color: rgba(255, 107, 0, 0.3);
    color: #FF7A00 !important;
  }

  .mobile-nav-link.highlight {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22C55E !important;
  }

  .mobile-drawer-footer {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-drawer-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-radius: 12px;
    color: #FFFFFF !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  }

  /* --- 2. Mobile Bottom Action Bar --- */
  .mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  }

  .mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #94A3B8 !important;
    text-decoration: none !important;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
  }

  .mobile-bar-item:active,
  .mobile-bar-item:hover {
    color: #FF7A00 !important;
  }

  .mobile-bar-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-wa-btn .mobile-bar-icon-wrap {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22C55E;
  }

  .mobile-trial-btn .mobile-bar-icon-wrap {
    background: rgba(255, 107, 0, 0.15);
    border-color: rgba(255, 107, 0, 0.4);
    color: #FF7A00;
  }

  .mobile-live-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 8px #22C55E;
    animation: mobilePulse 1.8s infinite;
  }

  @keyframes mobilePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  }

  /* Adjust page bottom padding on mobile so content isn't covered by bottom bar */
  body {
    padding-bottom: 70px !important;
  }

  /* Hide desktop WA float bubble on mobile to avoid overlap with bottom bar */
  #waWidgetContainer {
    display: none !important;
  }

  /* --- 2. Mobile Hero Touch Optimization --- */
  .hero-section {
    padding: 30px 0 40px !important;
  }

  .hero-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }

  .hero-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }

/* ==========================================================================
   DEDICATED MOBILE APP TEMPLATE STYLES
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.mobile-container {
  width: 100%;
  max-width: 100vw;
  padding: 0 16px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.mobile-app-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-head-wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #22C55E !important;
  text-decoration: none !important;
}

.mobile-head-wa-pill .online-dot {
  width: 7px;
  height: 7px;
  background: #22C55E;
  border-radius: 50%;
  box-shadow: 0 0 6px #22C55E;
}

.mobile-hero {
  background: #0B1120;
  padding: 36px 0 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mobile-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #FF7A00;
  margin-bottom: 14px;
}

.mobile-badge-dot {
  width: 6px;
  height: 6px;
  background: #FF7A00;
  border-radius: 50%;
}

.mobile-hero-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.25;
  margin-bottom: 12px;
  font-family: 'Space Grotesk', var(--font-primary);
}

.mobile-glow-text {
  color: #FF7A00 !important;
  background: linear-gradient(135deg, #FF7A00, #FFB800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-hero-lead {
  font-size: 0.95rem;
  color: #94A3B8 !important;
  line-height: 1.55;
  margin-bottom: 24px;
}

.mobile-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.mobile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none !important;
  box-sizing: border-box;
}

.mobile-btn-primary {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.3);
}

.mobile-btn-outline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF !important;
}

.mobile-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.mobile-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #CBD5E1;
}

.mobile-logos-section {
  background: #0F172A;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.mobile-logos-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.mobile-logos-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
}

.mobile-pricing-section {
  background: #0B1120;
  padding: 36px 0;
}

.mobile-section-header {
  text-align: center;
  margin-bottom: 24px;
}

.mobile-sub-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FF7A00;
  letter-spacing: 0.08em;
}

.mobile-section-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 6px 0 8px;
}

.mobile-section-desc {
  font-size: 0.88rem;
  color: #94A3B8 !important;
}

.mobile-pricing-swiper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-plan-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 18px;
  position: relative;
}

.mobile-plan-card.featured {
  border-color: #FF7A00;
  box-shadow: 0 8px 30px rgba(255, 107, 0, 0.2);
}

.mobile-pop-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: #FF7A00;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.mobile-plan-header h3 {
  font-size: 1.2rem;
  color: #FFFFFF !important;
  margin-bottom: 6px;
}

.mobile-plan-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FF7A00;
  margin-bottom: 14px;
}

.mobile-plan-price .currency {
  font-size: 0.9rem;
  color: #94A3B8;
}

.mobile-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #E2E8F0;
}

.mobile-plan-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
}

.mobile-plan-btn.featured-btn {
  background: linear-gradient(135deg, #FF7A00 0%, #EA580C 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}

.mob-trial-banner {
  background: #0B1120;
  padding: 24px 0;
}

.mob-trial-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(34, 197, 94, 0.15);
}

.mob-trial-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #22C55E;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.mob-trial-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF !important;
  margin-bottom: 8px;
}

.mob-trial-card p {
  font-size: 0.88rem;
  color: #CBD5E1 !important;
  line-height: 1.5;
  margin-bottom: 16px;
}

.mobile-guide-section {
  background: #0F172A;
  padding: 30px 0 40px;
}

.mobile-guide-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: 16px;
  padding: 20px 18px;
}

.mobile-guide-card h3 {
  font-size: 1.15rem;
  color: #FF7A00 !important;
  margin-bottom: 10px;
}

.mobile-guide-card p {
  font-size: 0.88rem;
  color: #CBD5E1 !important;
  line-height: 1.5;
  margin-bottom: 12px;
}

.mobile-guide-list {
  padding-left: 18px;
  margin: 0;
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.6;
}

.mobile-app-footer {
  background: #070B14;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   SUPER CLEAN MOBILE-ONLY FRONT PAGE STYLES (.mob-*)
   ========================================================================== */
.mobile-homepage-app {
  background-color: #0B1120 !important;
}

.mob-container {
  width: 100%;
  max-width: 100vw;
  padding: 0 16px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.mob-hero {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(11, 17, 32, 0.72) 0%, rgba(11, 17, 32, 0.98) 100%), url('../images/iptv-background-1.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 36px 0 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mob-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #FF7A00;
  margin-bottom: 14px;
  white-space: nowrap;
  max-width: 100%;
}

.mob-live-dot {
  width: 6px;
  height: 6px;
  background: #22C55E;
  border-radius: 50%;
  box-shadow: 0 0 6px #22C55E;
}

.mob-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.25;
  margin-bottom: 12px;
  font-family: 'Space Grotesk', var(--font-primary);
}

.mob-orange-gradient {
  color: #FF7A00 !important;
  background: linear-gradient(135deg, #FF7A00, #FFB800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mob-hero-desc {
  font-size: 0.92rem;
  color: #94A3B8 !important;
  line-height: 1.55;
  margin-bottom: 22px;
}

.mob-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.mob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none !important;
  box-sizing: border-box;
}

.mob-btn-green {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.3);
}

.mob-btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF !important;
}

.mob-hero-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: nowrap;
  width: 100%;
}

.mob-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

.mob-logos-strip {
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-align: center;
  overflow: hidden;
}

.mob-strip-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mob-logos-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mob-logo-box {
  flex: 1;
  min-width: 60px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob-features-section {
  background: transparent;
  padding: 32px 0;
}

.mob-section-title-wrap {
  text-align: center;
  margin-bottom: 20px;
}

.mob-section-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FF7A00;
  letter-spacing: 0.08em;
}

.mob-section-h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 4px 0 0;
  font-family: 'Space Grotesk', var(--font-primary);
}

.mob-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mob-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
}

.mob-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mob-card-icon.green {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22C55E;
}

.mob-card-icon.orange {
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.3);
  color: #FF7A00;
}

.mob-card-icon.blue {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38BDF8;
}

.mob-card-content h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #FFFFFF !important;
  margin-bottom: 4px;
}

.mob-card-content p {
  font-size: 0.85rem;
  color: #94A3B8 !important;
  line-height: 1.5;
  margin: 0;
}

.mob-pricing-section {
  background: transparent;
  padding: 32px 0;
}

.mob-plans-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mob-pricing-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 18px;
  position: relative;
}

.mob-pricing-card.featured {
  border-color: #FF7A00;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.2);
}

.mob-featured-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: #FF7A00;
  color: #FFFFFF;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.mob-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mob-plan-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF !important;
}

.mob-plan-price-wrap {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FF7A00;
}

.mob-plan-price-wrap .currency {
  font-size: 0.85rem;
  color: #94A3B8;
}

.mob-plan-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mob-plan-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #CBD5E1;
}

.mob-plan-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
}

.mob-plan-cta.featured-cta {
  background: linear-gradient(135deg, #FF7A00 0%, #EA580C 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.35);
}

.mob-faq-section {
  background: transparent;
  padding: 32px 0 40px;
}

.mob-faq-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mob-faq-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}

.mob-faq-q {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.mob-faq-q::-webkit-details-marker {
  display: none;
}

.mob-faq-a {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mob-faq-a p {
  font-size: 0.86rem;
  color: #94A3B8 !important;
  line-height: 1.5;
  margin: 0;
}

.mob-guide-section {
  background: transparent;
  padding: 30px 0 40px;
}


/* Mobile Bottom Bar - Strict Desktop Hide Rule */
@media screen and (min-width: 769px) {
  .mob-bottom-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}