/* ============================================
   IPTV Deutschland
   Exact vivimate.tv design system
   Background: #fff | Hero: #0d1b2e | CTA: #1a56db
   Font: Geist (Inter fallback) | Tailwind scale
   ============================================ */

/* ─── vivimate.tv exact tokens ─── */
:root {
  /* backgrounds */
  --bg:           #ffffff;
  --bg-alt:       #f5f5f5;
  --bg-muted:     #f2f2f2;
  --bg-navy:      #0d1b2e;   /* hero dark section */
  --bg-navy-card: #1a2540;   /* dark cards inside hero */
  --bg-navy-l:    #162540;

  /* text */
  --tx-1:   #04070f;
  --tx-2:   #606369;
  --tx-3:   #99a1af;
  --tx-inv: #ffffff;

  /* brand */
  --blue:        #1a56db;
  --blue-dark:   #1446b3;
  --blue-light:  #3b82f6;
  --blue-pale:   #eff6ff;
  --blue-border: rgba(26,86,219,.25);

  /* status */
  --green:       #00c758;
  --green-pale:  #f0fdf4;
  --green-border:rgba(0,199,88,.2);
  --orange:      #f59e0b;
  --red:         #ef4444;

  /* borders */
  --border:      #dedede;
  --border-card: #e2e8f0;

  /* radius — matches vivimate --radius: .5rem */
  --r:   8px;
  --rl:  12px;
  --rxl: 16px;

  /* shadow */
  --shadow-sm:  0 1px 3px rgba(4,7,15,.08), 0 1px 2px rgba(4,7,15,.04);
  --shadow-md:  0 4px 16px rgba(4,7,15,.10), 0 2px 4px rgba(4,7,15,.06);
  --shadow-lg:  0 10px 40px rgba(4,7,15,.12);
  --shadow-blue:0 4px 20px rgba(26,86,219,.30);

  /* type scale — exact Tailwind values */
  --text-xs:   .75rem;    /* 12px */
  --text-sm:   .875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  --t: all .2s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--tx-1);
  font-family: 'Geist','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
ul   { list-style:none }

/* ─── Layout ─── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 80px 0 }

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
}
.section-header h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--tx-1);
  margin-bottom: 12px;
}
.section-header p {
  font-size: var(--text-lg);
  color: var(--tx-2);
  line-height: 1.625;
}

/* ─── Typography ─── */
.gradient-text {
  background: linear-gradient(135deg,#1a56db,#06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.section-label::before {
  content:'';
  display:block;
  width:18px; height:2px;
  background: var(--blue);
  border-radius: 2px;
}

.divider {
  width: 40px; height: 3px;
  background: var(--blue);
  border-radius: 3px;
  margin: 0 auto 20px;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--t);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(26,86,219,.38);
}
.btn-outline {
  background: transparent;
  color: var(--tx-1);
  border: 1.5px solid var(--border-card);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.btn-wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.btn-wa:hover {
  background: #1db954;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
}
/* Inverted buttons (for dark hero section) */
.btn-inv {
  background: #fff;
  color: var(--blue);
  font-weight: 700;
}
.btn-inv:hover {
  background: var(--blue-pale);
  transform: translateY(-1px);
}
.btn-inv-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn-inv-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}
.btn-sm  { padding: 9px 18px;  font-size: var(--text-xs)  }
.btn-lg  { padding: 14px 28px; font-size: var(--text-base) }
.btn-xl  { padding: 16px 32px; font-size: var(--text-lg); font-weight:700 }

/* ─── Scroll animations ─── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0) }
.fade-up:nth-child(1){transition-delay:.05s}
.fade-up:nth-child(2){transition-delay:.1s}
.fade-up:nth-child(3){transition-delay:.15s}
.fade-up:nth-child(4){transition-delay:.2s}
.fade-up:nth-child(5){transition-delay:.25s}
.fade-up:nth-child(6){transition-delay:.3s}

/* ================================================
   NAVBAR  — white, shadow on scroll
================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: var(--t);
}
.navbar.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--tx-1);
}
.logo-icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-svg { display: block }
.nav-logo span { color: var(--blue) }

.nav-links { display:flex; align-items:center; gap:2px }
.nav-links a {
  padding: 7px 13px;
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--tx-2);
  transition: var(--t);
}
.nav-links a:hover { color:var(--tx-1); background:var(--bg-muted) }
.nav-links a.active { color:var(--blue) }

.nav-actions { display:flex; align-items:center; gap:8px }

.nav-hamburger {
  display:none; flex-direction:column; gap:4px;
  cursor:pointer; padding:4px;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--tx-1); border-radius:2px; transition:var(--t);
}

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:#fff; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
}
.mobile-menu.open { display:flex }
.mobile-menu a {
  font-size:var(--text-xl); font-weight:600;
  color:var(--tx-2); padding:12px 24px; transition:var(--t);
}
.mobile-menu a:hover { color:var(--tx-1) }
.mobile-close {
  position:absolute; top:20px; right:20px;
  font-size:24px; cursor:pointer; color:var(--tx-2);
}

/* ================================================
   HERO  — dark navy (#0d1b2e)
================================================ */
.hero {
  min-height: 100vh;
  background: var(--bg-navy);
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}
/* subtle blue glow orbs */
.hero-orb-1 {
  position:absolute; top:-10%; right:-5%;
  width:600px; height:600px;
  background: radial-gradient(circle,rgba(26,86,219,.18) 0%,transparent 65%);
  pointer-events:none;
}
.hero-orb-2 {
  position:absolute; bottom:-15%; left:-8%;
  width:450px; height:450px;
  background: radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 65%);
  pointer-events:none;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero .container {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}
.hero-content { max-width:560px }

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,86,219,.12);
  border: 1px solid rgba(26,86,219,.28);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #93c5fd;
  margin-bottom: 24px;
  letter-spacing: 0;
}
.hero-rating .live-dot {
  width: 7px; height: 7px;
  background: #05df72;
  border-radius: 50%;
  animation: blink 2s infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.hero h1 {
  font-size: clamp(var(--text-3xl), 4.8vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 20px;
}
.hero h1 .gradient-text {
  background: linear-gradient(135deg, #54a2ff, #53eafd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: var(--text-lg);
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 12px;
  letter-spacing: 0;
}
.hero-wa-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: #475569;
  margin-bottom: 28px;
}
.hero-wa-note span { color: #05df72; font-weight: 600 }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px }

/* trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: 8px }
.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: .01em;
}
.trust-badge .bi { color: #54a2ff; font-size: 13px }

/* hero stats */
.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-stat .num {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, #54a2ff, #53eafd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat .lbl {
  font-size: var(--text-xs);
  font-weight: 400;
  color: #475569;
  margin-top: 2px;
}

/* hero TV mockup */
.hero-visual {
  position:relative; display:flex;
  justify-content:center; align-items:center;
}
.tv-mockup {
  width:100%; max-width:480px;
  background:var(--bg-navy-card);
  border-radius:var(--rxl);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 25px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
.tv-bar {
  background:rgba(255,255,255,.04);
  padding:10px 14px;
  display:flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tv-dot { width:9px; height:9px; border-radius:50% }
.tv-dot:nth-child(1){background:#ff5f57}
.tv-dot:nth-child(2){background:#febc2e}
.tv-dot:nth-child(3){background:#28c840}
.tv-body { padding:18px }
.tv-channels { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.ch {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
  padding:12px 8px; text-align:center; cursor:pointer;
  transition:var(--t);
}
.ch:hover {
  background:rgba(26,86,219,.2);
  border-color:rgba(26,86,219,.4);
  transform:translateY(-2px);
}
.ch .icon { font-size: 22px; margin-bottom: 5px }
.ch .name { font-size: var(--text-xs); color: #64748b; font-weight: 500; letter-spacing: .01em }
.tv-live {
  background: rgba(26,86,219,.12);
  border: 1px solid rgba(26,86,219,.25);
  border-radius: var(--r);
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.live-icon { font-size: 26px }
.live-info .live-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #54a2ff;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.live-info .live-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  margin-top: 1px;
}
.live-info .live-ch {
  font-size: var(--text-xs);
  font-weight: 400;
  color: #64748b;
  margin-top: 2px;
}
.tv-prog { margin-top:8px; height:3px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden }
.tv-prog-bar {
  height:100%; width:40%;
  background:linear-gradient(90deg,#1a56db,#06b6d4);
  border-radius:3px;
  animation:prog 8s linear infinite;
}
@keyframes prog { from{width:22%} to{width:85%} }

.float-badge {
  position: absolute;
  background: var(--bg-navy-card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rl);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .01em;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  white-space: nowrap;
}
.float-badge.f1 { top: -12px; right: -14px; animation: floatY 4s ease-in-out infinite }
.float-badge.f2 { bottom: 32px; left: -22px; animation: floatY 4s ease-in-out infinite 1.8s }
@keyframes floatY { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* ================================================
   METRICS BAR  — light gray bg
================================================ */
.metrics-bar {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.metrics-inner {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.metric-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 32px;
  border-right:1px solid var(--border);
}
.metric-item:last-child { border-right:none }
.metric-icon { font-size:24px }
.metric-num {
  font-size:var(--text-2xl); font-weight:800;
  color:var(--blue); line-height:1;
}
.metric-lbl { font-size:var(--text-xs); color:var(--tx-2); margin-top:2px }

/* ================================================
   INCLUDED  — white bg
================================================ */
.included { background:var(--bg) }

.included-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.inc-card {
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius:var(--rl);
  padding:24px 20px;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.inc-card:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.inc-icon {
  width:44px; height:44px;
  background:var(--blue-pale);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:14px;
  transition:var(--t);
}
.inc-card:hover .inc-icon { background:var(--blue); }
.inc-card h3 {
  font-size:var(--text-base); font-weight:700;
  color:var(--tx-1); margin-bottom:6px;
}
.inc-card p { font-size:var(--text-sm); color:var(--tx-2); line-height:1.6 }
.inc-tag {
  display:inline-block; margin-top:10px;
  padding:2px 10px;
  background:var(--blue-pale);
  border-radius:100px;
  font-size:var(--text-xs); color:var(--blue); font-weight:600;
}

/* ================================================
   PLATFORMS  — alt bg
================================================ */
.platforms { background:var(--bg-alt) }

.platforms-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.platform-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.platform-card:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.platform-logo { font-size:32px }
.platform-name { font-size:var(--text-xs); font-weight:600; color:var(--tx-2) }

/* ================================================
   SPORTS  — white bg
================================================ */
.sports { background:var(--bg) }

.sports-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.sport-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:18px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.sport-card:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.sport-icon  { font-size:28px }
.sport-name  { font-size:var(--text-xs); font-weight:600; color:var(--tx-2); text-align:center }
.sport-live  {
  font-size:10px; font-weight:700;
  padding:2px 8px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2);
  border-radius:100px;
  color:#ef4444;
}

/* ================================================
   WHY US — alt bg, 6 cards
================================================ */
.why-us { background:var(--bg-alt) }
.why-grid-6 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.why-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:24px 20px;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.why-card:hover { border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.why-icon {
  width:42px; height:42px;
  background:var(--blue-pale);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:12px;
}
.why-card h3 { font-size:var(--text-base); font-weight:700; margin-bottom:6px }
.why-card p  { font-size:var(--text-sm); color:var(--tx-2); line-height:1.6 }

/* ================================================
   PRICING  — white bg, 4 plans
================================================ */
.pricing { background:var(--bg) }

.pricing-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; align-items:start;
}
.price-card {
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: var(--rl);
  padding: 28px 22px;
  transition: var(--t);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px) }

.price-card.popular {
  border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue), var(--shadow-md);
  transform:scale(1.03);
}
.price-card.popular:hover { transform:scale(1.03) translateY(-3px) }

/* Popular badge pill at top */
.popular-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:#fff;
  padding:4px 16px; border-radius:100px;
  font-size:var(--text-xs); font-weight:800;
  white-space:nowrap; letter-spacing:.08em; text-transform:uppercase;
}

/* Plan header */
.price-plan-header { margin-bottom:12px }
.price-plan-name {
  font-size:var(--text-xl); font-weight:800;
  color:var(--tx-1); margin:0 0 4px;
  letter-spacing:-.01em;
}
.price-payment-type {
  font-size:10px; font-weight:700;
  color:var(--tx-3); letter-spacing:.12em; text-transform:uppercase;
}

/* Price row with strikethrough */
.price-row {
  display:flex; align-items:baseline; gap:2px; flex-wrap:wrap; margin-bottom:6px;
}
.price-cur {
  font-size:var(--text-xl); font-weight:700;
  color:var(--tx-1); align-self:flex-start; margin-top:6px;
}
.price-amt {
  font-size:var(--text-5xl); font-weight:900; line-height:1;
  color:var(--tx-1);
}
.price-dec { font-size:var(--text-2xl); font-weight:700; color:var(--tx-1) }
.price-original {
  font-size:var(--text-sm); color:var(--tx-3);
  margin-left:4px; align-self:flex-end; margin-bottom:4px;
}

/* Savings badge */
.price-save-badge {
  display:inline-block; margin-bottom:14px;
  padding:3px 10px;
  background:var(--green-pale);
  border:1px solid var(--green-border);
  border-radius:100px;
  font-size:var(--text-xs); font-weight:700; color:var(--green);
}
.price-save-badge.popular-badge-save {
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.30);
  color:var(--orange);
}

.price-divider { height:1px; background:var(--border); margin:14px 0 }

/* Features list */
.price-features { margin-bottom:20px; flex:1; padding:0; list-style:none }
.pf-item {
  display:flex; align-items:flex-start; gap:8px;
  font-size:var(--text-sm); color:var(--tx-2);
  padding:5px 0;
}
.pf-item strong { color:var(--tx-1); font-weight:700 }
.pf-check { color:var(--green); font-size:13px; flex-shrink:0; margin-top:2px }

/* CTA */
.price-cta-wrap { margin-top:auto }
.btn-block { display:block; width:100%; text-align:center; box-sizing:border-box }

/* Device icons */
.price-devices {
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--border);
}
.price-devices-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--tx-3); margin-bottom:8px;
}
.price-device-icons {
  display:flex; gap:10px; align-items:center;
}
.price-device-icons span {
  font-size:20px; line-height:1;
  filter: grayscale(20%);
  cursor:default;
}

/* Connection count */
.price-connections {
  margin-top:10px;
  font-size:var(--text-xs); font-weight:700;
  color:var(--tx-2); text-align:center;
  padding:6px 0;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--bg-alt);
}

/* ================================================
   DEVICES  — alt bg
================================================ */
.devices { background:var(--bg-alt) }
.devices-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:36px;
}
.dev-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:22px 16px; text-align:center;
  transition:var(--t); box-shadow:var(--shadow-sm);
}
.dev-card:hover { border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.dev-icon  { font-size:36px; margin-bottom:10px }
.dev-card h3 { font-size:var(--text-sm); font-weight:700; margin-bottom:4px }
.dev-card p  { font-size:var(--text-xs); color:var(--tx-2) }

.install-box {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:36px;
  box-shadow:var(--shadow-sm);
}
.install-box h3 {
  font-size:var(--text-xl); font-weight:700;
  text-align:center; margin-bottom:28px;
}
.steps { display:flex; flex-direction:column }
.step {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.step:last-child { border-bottom:none }
.step-n {
  width:36px; height:36px;
  background:var(--blue-pale);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:700;
  color:var(--blue); flex-shrink:0;
}
.step-body h4 { font-size:var(--text-sm); font-weight:700; margin-bottom:3px }
.step-body p  { font-size:var(--text-sm); color:var(--tx-2) }

/* ================================================
   SMART CHOICE  — white bg
================================================ */
.smart { background:var(--bg) }
.smart-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}
.smart-content h2 {
  font-size:var(--text-4xl); font-weight:800;
  letter-spacing:-.025em; margin-bottom:14px;
}
.smart-content p {
  font-size:var(--text-lg); color:var(--tx-2);
  line-height:1.7; margin-bottom:28px;
}
.smart-list { display:flex; flex-direction:column; gap:10px }
.smart-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  background:var(--bg-alt);
  border:1px solid var(--border-card);
  border-radius:var(--r);
  transition:var(--t);
}
.smart-item:hover { border-color:var(--blue); background:var(--bg) }
.si-icon {
  font-size:18px; width:38px; height:38px;
  background:var(--blue-pale); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.si-body h4 { font-size:var(--text-sm); font-weight:700; margin-bottom:2px }
.si-body p  { font-size:var(--text-xs); color:var(--tx-2) }

.smart-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.st-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:24px 18px; text-align:center;
  transition:var(--t); box-shadow:var(--shadow-sm);
}
.st-card:hover { border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.st-num {
  font-size:var(--text-4xl); font-weight:900; line-height:1;
  color:var(--blue); margin-bottom:6px;
}
.st-card p { font-size:var(--text-xs); color:var(--tx-2) }

.money-back {
  margin-top:16px; padding:14px 18px;
  background:var(--green-pale);
  border:1px solid var(--green-border);
  border-radius:var(--r);
  display:flex; align-items:center; gap:12px;
}
.money-back .mb-ico { font-size:24px }
.money-back h4 { font-size:var(--text-sm); font-weight:700; color:var(--green); margin-bottom:2px }
.money-back p  { font-size:var(--text-xs); color:var(--tx-2) }

/* ================================================
   TESTIMONIALS  — alt bg
================================================ */
.testimonials { background:var(--bg-alt) }
.t-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.t-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl);
  padding:22px; transition:var(--t); box-shadow:var(--shadow-sm);
}
.t-card:hover { border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.t-head { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.t-av {
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:700; flex-shrink:0;
}
.t-name { font-size:var(--text-sm); font-weight:700 }
.t-city { font-size:var(--text-xs); color:var(--tx-2) }
.t-stars { color:var(--orange); font-size:var(--text-xs); letter-spacing:2px; margin-bottom:10px }
.t-text {
  font-size:var(--text-sm); color:var(--tx-2);
  line-height:1.65; font-style:italic;
}
.t-text::before { content:'"'; font-size:16px; color:var(--blue) }
.t-text::after  { content:'"'; font-size:16px; color:var(--blue) }

/* ================================================
   FAQ  — white bg
================================================ */
.faq { background:var(--bg) }
.faq-wrap { max-width:760px; margin:0 auto }
.faq-item {
  border:1px solid var(--border-card);
  border-radius:var(--r);
  margin-bottom:8px; overflow:hidden; transition:var(--t);
}
.faq-item.open { border-color:var(--blue) }
.faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; cursor:pointer;
  background:var(--bg);
  font-size:var(--text-sm); font-weight:600;
  user-select:none; transition:var(--t);
}
.faq-q:hover { background:var(--bg-alt) }
.faq-ico {
  width:24px; height:24px;
  background:var(--bg-alt); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--blue); transition:var(--t); flex-shrink:0;
}
.faq-item.open .faq-ico { transform:rotate(45deg); background:var(--blue-pale) }
.faq-a {
  padding:0 20px; max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .3s ease;
  background:var(--bg);
}
.faq-item.open .faq-a { max-height:250px; padding:0 20px 16px }
.faq-a p {
  font-size:var(--text-sm); color:var(--tx-2);
  line-height:1.7; border-top:1px solid var(--border); padding-top:12px;
}

/* ================================================
   BLOG  — alt bg
================================================ */
.blog { background:var(--bg-alt) }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.blog-card {
  background:var(--bg);
  border:1px solid var(--border-card);
  border-radius:var(--rl); overflow:hidden;
  transition:var(--t); box-shadow:var(--shadow-sm);
}
.blog-card:hover { border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-4px) }
.blog-img {
  height:180px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  display:flex; align-items:center; justify-content:center;
  font-size:44px; position:relative;
}
.blog-cat {
  position:absolute; top:12px; left:12px;
  background:var(--blue); color:#fff;
  padding:3px 10px; border-radius:100px;
  font-size:10px; font-weight:700;
}
.blog-body { padding:20px }
.blog-meta { display:flex; gap:12px; font-size:var(--text-xs); color:var(--tx-2); margin-bottom:8px }
.blog-card h3 {
  font-size:var(--text-base); font-weight:700;
  margin-bottom:6px; line-height:1.4; transition:var(--t);
}
.blog-card:hover h3 { color:var(--blue) }
.blog-card p { font-size:var(--text-sm); color:var(--tx-2); line-height:1.6; margin-bottom:14px }
.blog-link {
  font-size:var(--text-sm); font-weight:600; color:var(--blue);
  display:flex; align-items:center; gap:4px; transition:var(--t);
}
.blog-link:hover { gap:8px }

/* ================================================
   CTA BANNER  — dark navy
================================================ */
.cta-banner {
  background:var(--bg-navy);
  padding:80px 0;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:800px; height:350px;
  background:radial-gradient(ellipse,rgba(26,86,219,.18) 0%,transparent 70%);
}
.cta-inner {
  position:relative; z-index:1;
  text-align:center; max-width:640px; margin:0 auto;
}
.cta-inner h2 {
  font-size:clamp(1.75rem,3.5vw,3rem); font-weight:800;
  letter-spacing:-.025em; color:#fff; margin-bottom:14px;
}
.cta-inner h2 .gradient-text {
  background:linear-gradient(135deg,#54a2ff,#53eafd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-inner p { font-size:var(--text-lg); color:#94a3b8; margin-bottom:32px }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

.urgency-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.25);
  border-radius:100px;
  padding:4px 14px;
  font-size:var(--text-xs); font-weight:700; color:#f87171;
  margin-bottom:16px;
}

/* ================================================
   STICKY WHATSAPP
================================================ */
.sticky-cta { position:fixed; bottom:24px; right:24px; z-index:999 }
.sticky-wa {
  width:52px; height:52px;
  background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow:0 4px 16px rgba(37,211,102,.45);
  transition:var(--t); text-decoration:none;
  animation:bounce-wa 3s ease-in-out infinite;
}
.sticky-wa:hover { transform:scale(1.1); animation:none; box-shadow:0 6px 24px rgba(37,211,102,.6) }
@keyframes bounce-wa { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ================================================
   FOOTER  — navy bg
================================================ */
.footer {
  background:var(--bg-navy);
  border-top:1px solid rgba(255,255,255,.06);
  padding:64px 0 32px;
}
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:36px; margin-bottom:44px;
}
.footer-brand .nav-logo { margin-bottom:12px; color:#fff }
.footer-brand .nav-logo span { color:#54a2ff }
.footer-brand p { font-size:var(--text-sm); color:#64748b; line-height:1.7; margin-bottom:16px }
.footer-socials { display:flex; gap:8px }
.soc-btn {
  width:34px; height:34px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:var(--t); cursor:pointer;
}
.soc-btn:hover { background:rgba(26,86,219,.3); border-color:rgba(26,86,219,.5); transform:translateY(-1px) }

.footer-col h4 {
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; margin-bottom:16px;
}
.footer-col ul { display:flex; flex-direction:column; gap:8px }
.footer-col ul li a { font-size:var(--text-sm); color:#64748b; transition:var(--t) }
.footer-col ul li a:hover { color:#fff }

.footer-bottom {
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:var(--text-xs); color:#475569 }
.footer-bottom p a { color:#54a2ff }
.pay-icons { display:flex; gap:6px; align-items:center }
.pay-icon {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px; padding:3px 8px;
  font-size:10px; color:#64748b; font-weight:600;
}
.footer-legal { display:flex; gap:16px; flex-wrap:wrap }
.footer-legal a { font-size:var(--text-xs); color:#475569; transition:var(--t) }
.footer-legal a:hover { color:#fff }

/* ================================================
   RESPONSIVE
================================================ */
@media(max-width:1100px) {
  .pricing-grid { grid-template-columns:repeat(2,1fr) }
  .price-card.popular { transform:scale(1) }
  .price-card.popular:hover { transform:translateY(-3px) }
  .footer-grid { grid-template-columns:1fr 1fr }
  .platforms-grid,.sports-grid { grid-template-columns:repeat(3,1fr) }
}
@media(max-width:900px) {
  .hero .container { grid-template-columns:1fr }
  .hero-visual { display:none }
  .included-grid { grid-template-columns:repeat(2,1fr) }
  .why-grid-6 { grid-template-columns:repeat(2,1fr) }
  .t-grid { grid-template-columns:repeat(2,1fr) }
  .blog-grid { grid-template-columns:repeat(2,1fr) }
  .smart-grid { grid-template-columns:1fr }
  .smart-stats { order:-1 }
  .devices-grid { grid-template-columns:repeat(2,1fr) }
  .metric-item { padding:8px 18px }
}
@media(max-width:768px) {
  section { padding:56px 0 }
  .section-header { margin-bottom:40px }
  .section-header h2 { font-size:var(--text-3xl) }
  .nav-links,.nav-actions { display:none }
  .nav-hamburger { display:flex }
  .included-grid { grid-template-columns:1fr }
  .pricing-grid { grid-template-columns:1fr }
  .why-grid-6 { grid-template-columns:1fr }
  .t-grid { grid-template-columns:1fr }
  .blog-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr }
  .platforms-grid { grid-template-columns:repeat(3,1fr) }
  .sports-grid { grid-template-columns:repeat(3,1fr) }
  .footer-bottom { flex-direction:column; text-align:center }
}
@media(max-width:480px) {
  .container { padding:0 16px }
  .hero h1 { font-size:1.875rem }
  .hero-cta { flex-direction:column }
  .cta-btns { flex-direction:column; align-items:center }
  .hero-stats { flex-wrap:wrap; gap:14px }
  .platforms-grid,.sports-grid { grid-template-columns:repeat(2,1fr) }
  .metric-item { border-right:none; border-bottom:1px solid var(--border); width:100%; justify-content:center }
  .sticky-cta { bottom:14px; right:14px }
}