/* ============================================================
   RIGHTIPTV – MAIN STYLESHEET
   Design System: Premium Dark SaaS / IPTV
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-full);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-fast);
  white-space: nowrap;
  border: 2px solid transparent;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(59,130,246,0.35);
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(59,130,246,0.5); }

.btn-primary-lg {
  padding: 1rem 2.5rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.btn-outline {
  background: transparent;
  color: var(--clr-text-primary);
  border-color: var(--clr-border-bright);
}
.btn-outline:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  background: var(--clr-accent-muted);
}

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--clr-text-primary);
  border-color: rgba(255,255,255,0.1);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { box-shadow: 0 8px 30px rgba(37,211,102,0.45); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-accent   { background: var(--clr-accent-muted);  color: var(--clr-accent);  border: 1px solid var(--clr-border-accent); }
.badge-blue     { background: var(--clr-accent-muted);  color: var(--clr-accent);  border: 1px solid rgba(59,130,246,0.25); }
.badge-purple   { background: var(--clr-purple-muted);  color: var(--clr-purple);  border: 1px solid var(--clr-border-purple); }
.badge-success  { background: rgba(34,197,94,0.12);     color: var(--clr-success); border: 1px solid rgba(34,197,94,0.25); }
.badge-gold     { background: var(--clr-gold-muted);    color: var(--clr-gold);    border: 1px solid rgba(245,158,11,0.3); }

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section { padding-block: var(--sp-24); }
.section-sm { padding-block: var(--sp-16); }
.section-lg { padding-block: var(--sp-32); }

.section-header { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--sp-16); }
.section-badge  { margin-bottom: var(--sp-4); }
.section-title  { font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); font-weight: var(--fw-extrabold); line-height: 1.15; margin-bottom: var(--sp-4); }
.section-subtitle { font-size: var(--fs-lg); color: var(--clr-text-secondary); line-height: 1.7; }

/* Dividers */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
  margin: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base);
}
.site-header.scrolled {
  background: rgba(15,23,42,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 var(--clr-border), 0 4px 24px rgba(0,0,0,0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  height: 72px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--clr-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}
.site-logo-text span { color: var(--clr-accent); }

/* Primary Nav */
.primary-nav { display: flex; align-items: center; gap: var(--sp-1); }
.primary-nav a {
  display: block;
  padding: 0.5rem 0.875rem;
  color: var(--clr-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.primary-nav a:hover,
.primary-nav a.current-menu-item { color: var(--clr-text-primary); background: rgba(255,255,255,0.06); }

.header-cta { display: flex; align-items: center; gap: var(--sp-3); }

/* Mobile menu button */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--clr-text-primary);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 0;
  background: rgba(15,23,42,0.98);
  backdrop-filter: blur(20px);
  padding: var(--sp-6) var(--container-pad);
  overflow-y: auto;
  z-index: 999;
  border-top: 1px solid var(--clr-border);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 0.875rem 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--clr-text-secondary);
  border-bottom: 1px solid var(--clr-border);
  transition: color var(--t-fast);
}
.mobile-nav a:hover { color: var(--clr-accent); }
.mobile-nav .mobile-cta { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }

/* Header spacer */
.header-spacer { height: 72px; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--clr-bg-base);
}

/* Animated background */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  top: -200px; left: -200px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-slow 8s ease-in-out infinite;
}
.hero-bg::after {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  bottom: -100px; right: -100px;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-slow 10s ease-in-out infinite reverse;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1) translate(0,0); opacity: 0.8; }
  50%       { transform: scale(1.15) translate(20px, -20px); opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sp-24);
}

.hero-badge-wrap { margin-bottom: var(--sp-6); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background: var(--clr-accent-muted);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-accent);
  letter-spacing: 0.03em;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--clr-accent);
  border-radius: 50%;
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-title {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-6);
}

.hero-subtitle {
  font-size: clamp(var(--fs-base), 2.5vw, var(--fs-xl));
  color: var(--clr-text-secondary);
  line-height: 1.75;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-12);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.hero-trust-item svg { color: var(--clr-success); }

/* ============================================================
   STATS / TRUST BAR
   ============================================================ */
.stats-bar {
  background: var(--clr-bg-surface);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding-block: var(--sp-10);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: var(--clr-border);
}
.stat-number {
  font-size: clamp(var(--fs-3xl), 3vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  font-weight: var(--fw-medium);
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.feature-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--clr-accent-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.feature-card:hover {
  border-color: var(--clr-border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-accent);
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  width: 56px; height: 56px;
  background: var(--clr-accent-muted);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-accent);
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
  transition: background var(--t-base), border-color var(--t-base);
}
.feature-card:hover .feature-icon {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
}
.feature-icon svg { stroke: currentColor; }
.feature-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
  position: relative;
  z-index: 1;
}
.feature-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-it-works { background: var(--clr-bg-surface); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.667% + 28px);
  right: calc(16.667% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-blue));
  border-radius: 2px;
}

.step-item { text-align: center; }
.step-number {
  width: 56px; height: 56px;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: white;
  box-shadow: 0 0 0 8px var(--clr-accent-muted), 0 4px 20px rgba(59,130,246,0.3);
  position: relative;
  z-index: 1;
}
.step-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.step-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  line-height: 1.7;
  max-width: 260px;
  margin-inline: auto;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section { background: var(--clr-bg-base); }

/* Billing toggle */
/* ─── Pricing Toggle (Segmented Radio) ─── */
.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-12);
}

.pricing-segmented-control {
  display: inline-flex;
  background: var(--clr-bg-card);
  padding: 6px;
  border-radius: 100px;
  border: 1px solid var(--clr-border);
  position: relative;
  box-shadow: var(--sh-sm);
}

.pricing-segmented-control input {
  display: none;
}
  font-size: 0.65rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(34,197,94,0.3);
}
.pricing-radio-group input[type="radio"]:checked + label .save-badge {
  background: #fff;
  color: var(--clr-success);
}


/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-8);
  align-items: stretch;
}

.pricing-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  position: relative;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--card-accent, var(--clr-accent));
}

.pricing-card.basic { --card-accent: #3b82f6; }
.pricing-card.premium { --card-accent: #8B5CF6; }
.pricing-card.gold { --card-accent: #f59e0b; }

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--card-accent);
}

.pricing-card.featured {
  transform: scale(1.03) translateY(-4px);
}
.featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 0.3rem 1.2rem;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.plan-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-secondary);
  margin-bottom: var(--sp-2);
}
.plan-screens {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.plan-price-wrap { margin-bottom: var(--sp-6); }
.plan-price {
  font-size: clamp(var(--fs-4xl), 4vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price sup {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  vertical-align: super;
  letter-spacing: 0;
}
.plan-period {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-top: var(--sp-1);
}
.plan-yearly-note {
  font-size: var(--fs-xs);
  color: var(--clr-success);
  font-weight: var(--fw-medium);
  margin-top: var(--sp-1);
}
.plan-original-price {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  text-decoration: line-through;
  margin-top: 0.25rem;
}

.plan-divider {
  height: 1px;
  background: var(--clr-border);
  margin-block: var(--sp-6);
}

.plan-features { margin-bottom: var(--sp-8); }
.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  border-bottom: 1px solid var(--clr-border);
}
.plan-feature:last-child { border-bottom: none; }
.plan-feature-check { color: var(--clr-success); flex-shrink: 0; margin-top: 1px; font-size: 1rem; }
.plan-feature strong { color: var(--clr-text-primary); }

.plan-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-top: var(--sp-4);
}

/* Pricing periods table */
.pricing-periods-wrap {
  margin-top: var(--sp-16);
  background: var(--clr-bg-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.periods-title {
  padding: var(--sp-6) var(--sp-8);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-bg-card);
}
.periods-table {
  width: 100%;
  border-collapse: collapse;
}
.periods-table th,
.periods-table td {
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
  font-size: var(--fs-sm);
}
.periods-table th {
  font-weight: var(--fw-semibold);
  color: var(--clr-text-secondary);
  background: var(--clr-bg-card);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.periods-table td:first-child { text-align: left; font-weight: var(--fw-medium); color: var(--clr-text-primary); }
.periods-table tr:last-child td { border-bottom: none; }
.periods-table .best-value-col {
  background: var(--clr-accent-muted);
  color: var(--clr-accent);
  font-weight: var(--fw-bold);
  position: relative;
}
.periods-table .best-value-col::before {
  content: '★';
  margin-right: 0.25rem;
  font-size: var(--fs-xs);
}
.periods-table .plan-row-featured td { background: rgba(59,130,246,0.04); }

/* ============================================================
   DEVICES
   ============================================================ */
.devices-section { background: var(--clr-bg-surface); }

.devices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.device-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  transition: border-color var(--t-base), transform var(--t-base);
  cursor: default;
}
.device-card:hover { border-color: var(--clr-blue); transform: translateY(-3px); }
.device-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  margin-bottom: var(--sp-3);
  transition: color var(--t-base);
}
.device-card:hover .device-icon { color: var(--clr-blue); }
.device-icon svg { stroke: currentColor; }
.device-name { font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.device-note { font-size: var(--fs-xs); color: var(--clr-text-muted); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: var(--clr-bg-base); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.testimonial-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: border-color var(--t-base), transform var(--t-base);
}
.testimonial-card:hover { border-color: var(--clr-border-accent); transform: translateY(-3px); }
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--sp-4);
  color: var(--clr-gold);
  font-size: var(--fs-base);
}
.testimonial-quote {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--clr-text-secondary);
  margin-bottom: var(--sp-6);
  font-style: italic;
}
.testimonial-quote::before { content: '\201C'; color: var(--clr-accent); font-size: 1.5em; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.author-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: white;
  flex-shrink: 0;
}
.author-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.author-meta { font-size: var(--fs-xs); color: var(--clr-text-muted); }

/* Aggregate rating bar */
.rating-overview {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  margin-bottom: var(--sp-12);
}
.rating-big {
  text-align: center;
  padding-right: var(--sp-8);
  border-right: 1px solid var(--clr-border);
}
.rating-big-number {
  font-size: var(--fs-7xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  line-height: 1;
}
.rating-big-stars { font-size: var(--fs-xl); color: var(--clr-gold); margin-block: var(--sp-2); }
.rating-big-count { font-size: var(--fs-sm); color: var(--clr-text-muted); }
.rating-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.rating-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.rating-row-label { width: 24px; color: var(--clr-text-muted); font-weight: var(--fw-medium); flex-shrink: 0; }
.rating-bar-bg { flex: 1; height: 8px; background: var(--clr-bg-elevated); border-radius: var(--r-full); overflow: hidden; }
.rating-bar-fill { height: 100%; background: var(--clr-gold); border-radius: var(--r-full); }
.rating-row-pct { width: 36px; text-align: right; color: var(--clr-text-muted); flex-shrink: 0; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--clr-bg-surface); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  max-width: 960px;
  margin-inline: auto;
}
.faq-item {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.faq-item.open { border-color: var(--clr-border-accent); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: color var(--t-fast);
}
.faq-item.open .faq-question { color: var(--clr-accent); }
.faq-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--clr-accent-muted);
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.faq-answer-inner {
  padding: 0 var(--sp-6) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  line-height: 1.75;
}
.faq-item.open .faq-answer { max-height: 400px; }

/* ============================================================
   CTA FINAL SECTION
   ============================================================ */
.cta-section {
  background: var(--clr-bg-base);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.cta-box {
  position: relative;
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.06) 100%);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--r-xl);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clr-bg-card);
  z-index: -1;
}
.cta-title {
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-4);
}
.cta-sub { font-size: var(--fs-lg); color: var(--clr-text-secondary); margin-bottom: var(--sp-8); max-width: 500px; margin-inline: auto; }
.cta-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.cta-small { font-size: var(--fs-xs); color: var(--clr-text-muted); }
.cta-small span { color: var(--clr-success); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--clr-bg-surface);
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.footer-brand { }
.footer-logo { font-size: var(--fs-xl); font-weight: var(--fw-black); margin-bottom: var(--sp-4); }
.footer-logo span { color: var(--clr-accent); }
.footer-tagline { font-size: var(--fs-sm); color: var(--clr-text-secondary); line-height: 1.7; margin-bottom: var(--sp-6); max-width: 280px; }
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
  width: 36px; height: 36px;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { background: var(--clr-accent-muted); border-color: var(--clr-accent); }
.footer-col-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-5);
}
.footer-nav { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-nav a {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  transition: color var(--t-fast);
}
.footer-nav a:hover { color: var(--clr-accent); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--clr-text-secondary);
  margin-bottom: var(--sp-3);
}
.footer-contact-icon { flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-copy { font-size: var(--fs-xs); color: var(--clr-text-muted); }
.footer-legal { display: flex; gap: var(--sp-4); }
.footer-legal a { font-size: var(--fs-xs); color: var(--clr-text-muted); transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--clr-text-secondary); }
.footer-uptime {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: var(--fs-xs); color: var(--clr-success);
}
.uptime-dot {
  width: 7px; height: 7px;
  background: var(--clr-success);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

/* ============================================================
   BLOG / SINGLE
   ============================================================ */
.blog-hero {
  background: var(--clr-bg-surface);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--clr-border);
}
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.post-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.post-card:hover { border-color: var(--clr-border-accent); transform: translateY(-4px); }
.post-card-thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--clr-bg-elevated), var(--clr-bg-surface));
  overflow: hidden;
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-body { padding: var(--sp-6); }
.post-card-category {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-accent);
  margin-bottom: var(--sp-3);
}
.post-card-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); line-height: 1.4; }
.post-card-title a:hover { color: var(--clr-accent); }
.post-card-excerpt { font-size: var(--fs-sm); color: var(--clr-text-secondary); line-height: 1.7; margin-bottom: var(--sp-5); }
.post-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--clr-text-muted); }
.post-card-read { color: var(--clr-accent); font-weight: var(--fw-medium); transition: gap var(--t-fast); }
.post-card-read:hover { text-decoration: underline; }

/* Single post */
.single-content-wrap {
  padding-block: var(--sp-16);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-12);
  align-items: start;
}
.entry-content {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--clr-text-secondary);
}
.entry-content h2 { font-size: var(--fs-3xl); color: var(--clr-text-primary); margin-block: var(--sp-8) var(--sp-4); }
.entry-content h3 { font-size: var(--fs-2xl); color: var(--clr-text-primary); margin-block: var(--sp-6) var(--sp-3); }
.entry-content p { margin-bottom: var(--sp-4); }
.entry-content ul, .entry-content ol { margin-block: var(--sp-4); padding-left: var(--sp-6); }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content a { color: var(--clr-accent); text-decoration: underline; }
.entry-content blockquote {
  border-left: 3px solid var(--clr-accent);
  padding-left: var(--sp-6);
  margin-block: var(--sp-8);
  color: var(--clr-text-primary);
  font-style: italic;
  font-size: var(--fs-lg);
}
.entry-content img { border-radius: var(--r-lg); margin-block: var(--sp-6); }
.entry-content code {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border);
  padding: 0.125rem 0.4rem;
  border-radius: var(--r-sm);
  font-size: 0.875em;
}
.entry-content pre {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  overflow-x: auto;
  margin-block: var(--sp-6);
}

/* Sidebar */
.sidebar-widget {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.widget-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--clr-border); }

/* ============================================================
   PAGE TEMPLATES
   ============================================================ */
.page-hero {
  background: var(--clr-bg-surface);
  padding-block: var(--sp-20);
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
}
.page-hero-title { font-size: clamp(var(--fs-4xl), 5vw, var(--fs-6xl)); font-weight: var(--fw-black); margin-bottom: var(--sp-4); }
.page-hero-sub { font-size: var(--fs-lg); color: var(--clr-text-secondary); max-width: 560px; margin-inline: auto; }

/* Contact form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.form-group { margin-bottom: var(--sp-5); }
.form-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); color: var(--clr-text-secondary); }
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  font-size: var(--fs-base);
  color: var(--clr-text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-muted);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--clr-text-muted); }

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--sp-24);
}
.error-code {
  font-size: 8rem;
  font-weight: var(--fw-black);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.error-title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.error-desc { font-size: var(--fs-lg); color: var(--clr-text-secondary); margin-bottom: var(--sp-8); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-12);
}
.pagination a,
.pagination span {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-secondary);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pagination a:hover { background: var(--clr-bg-elevated); color: var(--clr-text-primary); border-color: var(--clr-border-bright); }
.pagination .current { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }

/* ============================================================
   RESPONSIVE – TABLET (< 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .primary-nav, .header-cta .btn-outline { display: none; }
  .menu-toggle { display: flex; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item::before { display: none; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }

  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-4px); }

  .devices-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .faq-grid { grid-template-columns: 1fr; }
  .rating-overview { grid-template-columns: 1fr; }
  .rating-big { border-right: none; border-bottom: 1px solid var(--clr-border); padding-right: 0; padding-bottom: var(--sp-6); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .single-content-wrap { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE – MOBILE (< 640px)
   ============================================================ */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-trust { gap: var(--sp-4); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .features-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .devices-grid { grid-template-columns: repeat(2, 1fr); }

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

  .cta-box { padding: var(--sp-10) var(--sp-6); }
  .cta-actions { flex-direction: column; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .posts-grid { grid-template-columns: 1fr; }
  .periods-table th, .periods-table td { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-xs); }
}

/* ============================================================
   ANIMATIONS & UTILITIES
   ============================================================ */
.fade-in { animation: fadeIn 0.6s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* WordPress alignment classes */
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin-right: var(--sp-6); margin-bottom: var(--sp-4); }
.alignright { float: right; margin-left: var(--sp-6); margin-bottom: var(--sp-4); }

/* Sticky sidebar */
.sticky-sidebar { position: sticky; top: calc(72px + var(--sp-6)); }

/* Print */
@media print {
  .site-header, .site-footer, .menu-toggle, .mobile-nav { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   HERO LAYOUT – 2-COLUMN
   ============================================================ */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  padding-block: var(--sp-20) var(--sp-16);
  position: relative;
  z-index: 2;
}
.hero-content { text-align: left; }
.hero-content .hero-title { font-size: clamp(2rem, 5vw, 3.75rem); text-align: left; }
.hero-content .hero-subtitle { text-align: left; margin-inline: 0; }
.hero-content .hero-actions { justify-content: flex-start; }
.hero-content .hero-trust { justify-content: flex-start; }

/* ============================================================
   TV MOCKUP VISUAL
   ============================================================ */
.hero-visual {
  position: relative;
}

.hv-wrapper {
  animation: hv-float 6s ease-in-out infinite;
}
@keyframes hv-float {
  0%, 100% { transform: perspective(900px) rotateY(-5deg) rotateX(2deg) translateY(0); }
  50%       { transform: perspective(900px) rotateY(-5deg) rotateX(2deg) translateY(-10px); }
}

.hv-tv {
  background: #111d35;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(59,130,246,0.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 50px 100px rgba(0,0,0,0.7),
    0 0 60px rgba(59,130,246,0.08);
  position: relative;
}
.hv-tv::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(59,130,246,0.18), transparent 60%);
  z-index: -1;
  filter: blur(6px);
  opacity: 0.6;
}

.hv-screen {
  background: #040810;
  border-radius: 8px;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.hv-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hv-screen-dots { display: flex; gap: 5px; }
.hv-dot { width: 8px; height: 8px; border-radius: 50%; }
.hv-dot:nth-child(1) { background: #ff5f57; }
.hv-dot:nth-child(2) { background: #febc2e; }
.hv-dot:nth-child(3) { background: #28c840; }
.hv-logo { font-size: 11px; font-weight: 900; color: rgba(255,255,255,0.7); }
.hv-logo span { color: #3B82F6; }

.hv-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 10px 30px;
}
.hv-channel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background 0.3s;
}
.hv-channel.active {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.35);
}
.hv-ch-icon  { font-size: 1rem; }
.hv-ch-name  { font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.65); text-align: center; }
.hv-ch-quality { font-size: 7px; color: #22c55e; font-weight: 700; }
.hv-channel.active .hv-ch-name { color: #fff; }

.hv-statusbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: rgba(255,255,255,0.45);
}
.hv-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.hv-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hv-stand-neck {
  width: 40px; height: 18px;
  background: linear-gradient(to bottom, #1a2845, #0d1526);
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.hv-stand-base {
  width: 90px; height: 7px;
  background: #0d1526;
  border-radius: 4px;
}

/* Floating info badges */
.hv-badge {
  position: absolute;
  background: rgba(13,21,38,0.95);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.hv-badge-1 {
  top: 5%;
  right: -12%;
  animation: hv-float-b1 5s ease-in-out infinite 0.7s;
}
.hv-badge-2 {
  bottom: 12%;
  left: -14%;
  animation: hv-float-b2 5s ease-in-out infinite 1.3s;
}
@keyframes hv-float-b1 {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}
@keyframes hv-float-b2 {
  0%,100% { transform: translateY(0) rotate(1deg); }
  50%     { transform: translateY(6px) rotate(-1deg); }
}
.hv-badge-icon { font-size: 1.25rem; flex-shrink: 0; }
.hv-badge-text strong { display: block; font-size: 12px; font-weight: 700; color: #f1f5f9; }
.hv-badge-text span   { font-size: 10px; color: #94a3b8; }

/* Hero responsive: stack on tablet */
@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1fr; padding-block: var(--sp-16) var(--sp-8); }
  .hero-content { text-align: center; }
  .hero-content .hero-title { text-align: center; }
  .hero-content .hero-subtitle { text-align: center; margin-inline: auto; }
  .hero-content .hero-actions  { justify-content: center; }
  .hero-content .hero-trust    { justify-content: center; }
  .hero-visual { display: none; }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.wa-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  text-decoration: none;
  padding: 12px 20px 12px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--t-base), box-shadow var(--t-base);
  animation: wa-bounce 3s ease-in-out 2s infinite;
}
.wa-float-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 36px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.3);
}
.wa-float-btn:active { transform: scale(0.97); }
.wa-float-text { white-space: nowrap; }
@keyframes wa-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  90%           { transform: translateY(-6px); }
}

/* Hide text on very small screens */
@media (max-width: 480px) {
  .wa-float-btn { padding: 14px; border-radius: 50%; }
  .wa-float-text { display: none; }
}

/* ============================================================
   POST THUMBNAIL PLACEHOLDER
   ============================================================ */
.post-thumb-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #0d1526, #1a2845);
  overflow: hidden;
}
.post-thumb-placeholder svg { width: 100%; height: 100%; }

/* ============================================================
   INSTALLATION GUIDE
   ============================================================ */
.install-guide {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-12);
  align-items: start;
}

.install-steps { display: flex; flex-direction: column; gap: var(--sp-6); }

.install-step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  transition: border-color var(--t-base);
}
.install-step:hover { border-color: var(--clr-border-bright); }

.install-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--clr-accent), #8B5CF6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  box-shadow: 0 3px 12px rgba(59,130,246,0.35);
}

.install-step-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-primary);
  margin-bottom: var(--sp-1);
}

.install-step-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  line-height: 1.6;
}

/* Apps sidebar */
.install-apps {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: sticky;
  top: 100px;
}

.install-apps-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
}

.install-app-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--clr-border);
}
.install-app-item:last-child { border-bottom: none; }

.install-app-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-primary);
  width: 100%;
}

.install-app-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  width: 100%;
}

/* Responsive */
@media (max-width: 900px) {
  .install-guide { grid-template-columns: 1fr; }
  .install-apps  { position: static; }
}

/* ============================================================
   PAGE HERO (shared across inner pages)
   ============================================================ */
.page-hero {
  padding: var(--sp-20) 0 var(--sp-12);
  text-align: center;
  background: var(--clr-bg-surface);
  border-bottom: 1px solid var(--clr-border);
}

.page-hero-title {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--clr-text-primary);
  margin-bottom: var(--sp-5);
}

.page-hero-sub {
  font-size: var(--fs-lg);
  color: var(--clr-text-secondary);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  position: relative;
  z-index: 999;
  font-size: var(--fs-sm);
  min-height: 44px;
}
.announcement-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.announcement-fire { font-size: 1.1rem; flex-shrink: 0; }
.announcement-text { line-height: 1.4; }
.announcement-sep  { opacity: 0.6; margin-inline: var(--sp-2); }
.announcement-sub  { opacity: 0.85; }
.announcement-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  padding: 0.25rem 0.875rem;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.announcement-cta:hover { background: rgba(255,255,255,0.32); }
.announcement-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  line-height: 1;
}
.announcement-close:hover { background: rgba(255,255,255,0.35); }
@media (max-width: 640px) {
  .announcement-sep, .announcement-sub { display: none; }
  .announcement-bar { font-size: var(--fs-xs); padding: 8px 40px 8px 16px; }
}

/* ============================================================
   STREAMING PLATFORMS LOGOS
   ============================================================ */
.platforms-section {
  background: var(--clr-bg-surface);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.platforms-label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-6);
}
.platforms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  border: 1px solid var(--clr-border);
  background: var(--clr-bg-card);
  color: var(--clr-text-secondary);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.platform-badge:hover { transform: translateY(-2px); border-color: var(--clr-border-bright); }
.platform-netflix  { color: #e50914; border-color: rgba(229,9,20,0.3); }
.platform-disney   { color: #0063e5; border-color: rgba(0,99,229,0.3); }
.platform-hbo      { color: #b30bff; border-color: rgba(179,11,255,0.25); }
.platform-ruutu    { color: #ff6b00; border-color: rgba(255,107,0,0.3); }
.platform-yle      { color: #00a4e4; border-color: rgba(0,164,228,0.3); }
.platform-viaplay  { color: #0099ff; border-color: rgba(0,153,255,0.3); }
.platform-cmore    { color: #e3032e; border-color: rgba(227,3,46,0.3); }
.platform-mtv      { color: #f5c518; border-color: rgba(245,197,24,0.3); }
.platforms-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* ============================================================
   SPORTS SECTION
   ============================================================ */
.sports-section { background: var(--clr-bg-surface); }
.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.sport-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.sport-card:hover {
  border-color: var(--clr-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(245,158,11,0.15);
}
.sport-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
  margin-bottom: var(--sp-3);
  transition: color var(--t-base);
}
.sport-card:hover .sport-icon { color: var(--clr-accent); }
.sport-icon svg { stroke: currentColor; }
.sport-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
  margin-bottom: var(--sp-1);
}
.sport-sub {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}
@media (max-width: 1024px) { .sports-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .sports-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PRICING PERIOD TABS (per-card)
   ============================================================ */
.pp-tabs {
  display: flex;
  gap: 3px;
  background: var(--clr-bg-base);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: var(--sp-5);
}
.pp-tab {
  flex: 1;
  padding: 0.375rem 0.25rem;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border: none;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pp-tab:hover { color: var(--clr-text-secondary); background: var(--clr-bg-elevated); }
.pp-tab.active {
  background: var(--clr-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.pp-tab-best { position: relative; }
.pp-tab-best.active { background: linear-gradient(135deg, #f59e0b, #3B82F6); }

.plan-per-month {
  font-size: var(--fs-xs);
  color: var(--clr-success);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-1);
}

/* ============================================================
   APP LOGOS SECTION
   ============================================================ */
.app-logos-section { background: var(--clr-bg-base); }
.app-logos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.app-logo-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  transition: border-color var(--t-base), transform var(--t-base);
}
.app-logo-card:hover { border-color: var(--clr-blue); transform: translateY(-3px); }
.app-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-blue);
  transition: color var(--t-base);
}
.app-logo-card:hover .app-logo-icon { color: var(--clr-accent); }
.app-logo-icon svg { stroke: currentColor; }
.app-logo-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
}
.app-logo-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}
@media (max-width: 1024px) { .app-logos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .app-logos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   CUSTOMER PROOF – WhatsApp Chat Mockups
   ============================================================ */
.proof-section { background: var(--clr-bg-surface); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.proof-chat {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.proof-chat:hover { border-color: rgba(37,211,102,0.35); transform: translateY(-4px); }

.proof-chat-header {
  background: #075E54;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.proof-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-black);
  font-size: var(--fs-base);
  color: #fff;
  flex-shrink: 0;
}
.proof-chat-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
}
.proof-chat-status {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.proof-messages {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: #0d1526;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 160px;
}
.proof-msg {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  position: relative;
}
.proof-msg-out {
  background: #005c4b;
  color: #e9edef;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.proof-msg-in {
  background: var(--clr-bg-elevated);
  color: var(--clr-text-secondary);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.proof-msg-success {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--clr-success) !important;
  font-weight: var(--fw-semibold);
}
.proof-chat-meta {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg-card);
}
@media (max-width: 1024px) { .proof-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.comparison-section { background: var(--clr-bg-base); }
.comparison-wrap {
  max-width: 820px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
}
.comparison-table th {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--clr-bg-surface);
  color: var(--clr-text-secondary);
  padding-block: var(--sp-5);
}
.comparison-table td:first-child {
  text-align: left;
  color: var(--clr-text-secondary);
  font-weight: var(--fw-medium);
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:nth-child(odd) td { background: rgba(255,255,255,0.015); }
.comp-us {
  background: rgba(59,130,246,0.06) !important;
  color: var(--clr-accent);
  font-weight: var(--fw-bold);
  border-left: 2px solid var(--clr-border-accent);
  border-right: 2px solid var(--clr-border-accent);
}
.comparison-table th.comp-us {
  background: rgba(59,130,246,0.12) !important;
  color: var(--clr-accent);
}
.comp-them { color: var(--clr-text-muted); }
.comp-yes  { color: var(--clr-success) !important; }
.comp-no   { color: #ef4444 !important; }
.comp-partial { color: var(--clr-gold) !important; }
@media (max-width: 640px) {
  .comparison-table th, .comparison-table td { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-xs); }
}

/* ============================================================
   CHANNEL LOGO MARQUEE
   ============================================================ */
.channels-marquee-section {
  padding-block: var(--sp-16);
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(59,130,246,0.04) 50%, transparent 100%);
}
.channels-marquee-label {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-8);
}
.marquee-wrapper {
  position: relative;
  overflow: hidden;
}
.marquee-fade-left,
.marquee-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-fade-left  { left: 0;  background: linear-gradient(to right, var(--clr-bg-base), transparent); }
.marquee-fade-right { right: 0; background: linear-gradient(to left,  var(--clr-bg-base), transparent); }
.marquee-row { overflow: hidden; }
.marquee-track,
.marquee-track-reverse {
  display: flex;
  gap: 10px;
  width: max-content;
}
.marquee-track         { animation: marquee-left  40s linear infinite; }
.marquee-track-reverse { animation: marquee-right 40s linear infinite; }
.marquee-track:hover,
.marquee-track-reverse:hover { animation-play-state: paused; }

.ch-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-5);
  height: 40px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity var(--t-fast), transform var(--t-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ch-logo:hover { opacity: 1; transform: scale(1.06); }

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ============================================================
   MULTI-DEVICE SHOWCASE
   ============================================================ */
.device-showcase-section { background: var(--clr-bg-base); }

.device-showcase-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* Left column */
.device-showcase-text {}

.device-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.device-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--clr-bg-surface);
  border: 1px solid var(--clr-border);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.device-list-item:hover { border-color: var(--clr-border-accent); background: var(--clr-bg-card); }
.device-list-item span  { display: flex; flex-direction: column; gap: 1px; }
.device-list-item strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-text-primary); }
.device-list-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-accent-muted);
  border-radius: var(--r-md);
  flex-shrink: 0;
  color: var(--clr-accent);
}
.device-list-icon svg { stroke: currentColor; }
.device-list-sub {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  display: block;
}

/* Right column – visual area */
.device-showcase-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: var(--sp-8);
}

/* TV mockup */
.dsv-tv-wrap { position: relative; width: 100%; }
.dsv-tv      { position: relative; display: flex; flex-direction: column; align-items: center; }

.dsv-tv-frame {
  width: 100%;
  background: #0f172a;
  border-radius: var(--r-xl);
  border: 3px solid #1e3a5f;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.15),
    0 24px 60px rgba(0,0,0,0.7),
    0 0 80px rgba(59,130,246,0.08);
  overflow: hidden;
  padding: 10px;
}
.dsv-tv-screen {
  background: #070b14;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dsv-screen-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(13,21,38,0.95);
  border-bottom: 1px solid rgba(59,130,246,0.1);
}
.dsv-screen-logo {
  font-size: 11px;
  font-weight: var(--fw-black);
  color: var(--clr-text-primary);
  letter-spacing: 0.02em;
}
.dsv-screen-logo span { color: var(--clr-accent); }
.dsv-screen-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: #dc2626;
  padding: 2px 6px;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
}
.dsv-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.dsv-screen-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--clr-text-muted);
  font-weight: var(--fw-medium);
}

/* Thumbnail grid inside TV */
.dsv-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  flex: 1;
}
.dsv-thumb {
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.dsv-thumb-sport  { background: linear-gradient(135deg, #064e3b 0%, #14532d 50%, #166534 100%); }
.dsv-thumb-movie  { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); }
.dsv-thumb-f1     { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #991b1b 100%); }
.dsv-thumb-news   { background: linear-gradient(135deg, #0c1a3b 0%, #1e3a5f 50%, #1d4ed8 100%); }
.dsv-thumb-series { background: linear-gradient(135deg, #1c0533 0%, #3b0764 50%, #6d28d9 100%); }
.dsv-thumb-kids   { background: linear-gradient(135deg, #451a03 0%, #92400e 50%, #d97706 100%); }

.dsv-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%);
}
.dsv-thumb-badge-live,
.dsv-thumb-badge-4k {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 7px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
}
.dsv-thumb-badge-live { background: #dc2626; color: #fff; }
.dsv-thumb-badge-4k   { background: var(--clr-accent); color: #fff; }
.dsv-thumb-title {
  font-size: 8px;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.2;
}
.dsv-thumb-sub {
  font-size: 7px;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
}

/* TV screen status bar */
.dsv-screen-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(13,21,38,0.95);
  border-top: 1px solid rgba(59,130,246,0.1);
  font-size: 9px;
  color: var(--clr-text-muted);
}
.dsv-screen-bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-success);
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  animation: live-blink 2s ease-in-out infinite;
}

/* TV stand */
.dsv-tv-neck-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dsv-tv-neck {
  width: 40px;
  height: 20px;
  background: linear-gradient(180deg, #1e3a5f, #0f172a);
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
}
.dsv-tv-base {
  width: 100px;
  height: 6px;
  background: linear-gradient(90deg, transparent, #1e3a5f 30%, #1e3a5f 70%, transparent);
  border-radius: var(--r-full);
}

/* Phone mockup */
.dsv-phone {
  position: absolute;
  right: -28px;
  bottom: 20px;
  width: 115px;
  z-index: 10;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6)) drop-shadow(0 0 20px rgba(59,130,246,0.12));
}
.dsv-phone-inner {
  background: #0d1526;
  border: 2px solid #1e3a5f;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.12);
}
.dsv-phone-notch {
  width: 36px;
  height: 10px;
  background: #070b14;
  border-radius: 0 0 8px 8px;
  margin: 0 auto;
}
.dsv-phone-screen {
  flex: 1;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.dsv-phone-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.dsv-phone-logo {
  font-size: 8px;
  font-weight: var(--fw-black);
  color: var(--clr-accent);
  letter-spacing: 0.02em;
}
.dsv-phone-live-pill {
  font-size: 7px;
  font-weight: var(--fw-bold);
  background: #dc2626;
  color: #fff;
  padding: 1px 5px;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
}
.dsv-phone-channel-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dsv-phone-ch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
}
.dsv-phone-ch-icon { font-size: 10px; line-height: 1; }
.dsv-phone-ch-name {
  font-size: 7px;
  color: var(--clr-text-secondary);
  font-weight: var(--fw-medium);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsv-phone-ch-badge {
  font-size: 6px;
  font-weight: var(--fw-bold);
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.dsv-phone-now-playing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) var(--sp-2);
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 5px;
  font-size: 7px;
  color: var(--clr-accent);
  font-weight: var(--fw-semibold);
}
.dsv-phone-np-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex-shrink: 0;
  animation: live-blink 1.2s ease-in-out infinite;
}
.dsv-phone-home {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070b14;
}
.dsv-phone-home::after {
  content: '';
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-full);
}

/* Floating info badges */
.dsv-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-bright);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.dsv-float-badge-1 { top: -12px; left: -16px; }
.dsv-float-badge-2 { bottom: 36px; left: -24px; }
.dsv-float-icon {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--clr-accent);
}
.dsv-float-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-primary);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .device-showcase-layout { gap: var(--sp-10); }
  .dsv-phone { right: -14px; width: 100px; }
}
@media (max-width: 768px) {
  .device-showcase-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .device-showcase-visual {
    order: -1;
    padding-bottom: var(--sp-12);
  }
  .dsv-phone { right: -10px; width: 90px; }
  .dsv-float-badge-1 { top: -8px; left: 8px; }
  .dsv-float-badge-2 { bottom: 40px; left: 4px; }
}
@media (max-width: 480px) {
  .dsv-phone { display: none; }
  .dsv-float-badge { display: none; }
  .channels-marquee-section { padding-block: var(--sp-10); }
  .marquee-fade-left, .marquee-fade-right { width: 60px; }
}

/* ============================================================
   TRUST SIGNALS STRIP
   ============================================================ */
.trust-strip {
  padding-block: var(--sp-8);
  background: linear-gradient(90deg, rgba(34,197,94,0.04), rgba(59,130,246,0.04), rgba(59,130,246,0.04));
  border-block: 1px solid var(--clr-border);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  row-gap: var(--sp-5);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--clr-bg-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.trust-icon svg { flex-shrink: 0; }
.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.trust-text strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
}
.trust-text span {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-top: 2px;
}
.trust-divider {
  width: 1px;
  height: 36px;
  background: var(--clr-border-bright);
}
.trust-pay {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.trust-pay-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trust-pay-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.pay-visa   { background: linear-gradient(135deg, #1a1f71, #0f1654); }
.pay-mc     { background: linear-gradient(135deg, #eb001b, #f79e1b); color: #fff; }
.pay-pp     { background: linear-gradient(135deg, #003087, #009cde); }
.pay-crypto { background: linear-gradient(135deg, #f7931a, #2563EB); }
.pay-bank   { background: var(--clr-bg-elevated); color: var(--clr-text-primary); }

@media (max-width: 768px) {
  .trust-strip-inner { gap: var(--sp-5); }
  .trust-divider { display: none; }
  .trust-pay { width: 100%; justify-content: center; }
}

/* ============================================================
   STICKY MOBILE CTA BAR (mobile-only)
   ============================================================ */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  padding: 10px 12px env(safe-area-inset-bottom, 10px);
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--clr-border-bright);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  gap: 10px;
}
.mobile-cta-bar.visible { display: flex; }
.mobile-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  border-radius: var(--r-md);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.mobile-cta-btn:active { transform: scale(0.97); }
.mobile-cta-primary {
  flex: 2;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
}
.mobile-cta-secondary {
  background: rgba(59,130,246,0.15);
  color: var(--clr-accent);
  border: 1px solid var(--clr-border-accent);
}
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; }
  /* Reserve space at end of page so the bar doesn't cover content */
  .site-footer { padding-bottom: 80px; }
  /* Reposition existing floating WhatsApp button so it doesn't collide with the bar */
  .wa-float-btn { bottom: 80px !important; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-section { background: var(--clr-bg-surface); }

.legal-content {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
}

.legal-content h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text-primary);
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content p {
  color: var(--clr-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}

.legal-content ul,
.legal-content ol {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-6);
  list-style: disc;
}
.legal-content ol { list-style: decimal; }

.legal-content li {
  color: var(--clr-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--sp-2);
}

.legal-content li strong {
  color: var(--clr-text-primary);
}

.legal-content a {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover {
  color: var(--clr-purple);
}

@media (max-width: 640px) {
  .legal-content {
    padding: var(--sp-6) var(--sp-4);
  }
}