/* ─── home.css ───────────────────────────────────────────────────────────────
   Home page section styles. Covers every section of index.html.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Hero ───────────────────────────────────────────────────────────────────*/
.hero {
  position:    relative;
  min-height:  100vh;
  display:     grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow:    hidden;
  padding-top: var(--nav-h);
}
/* Left col — text */
.hero-content {
  position:   relative;
  z-index:    2;
  padding:    2rem 0 2rem 2rem;
  max-width:  580px;
}
/* Right col — globe wrapper
   Uses clamp(65%, 100vh, 100%) so the canvas width is ALWAYS ≥ its height,
   guaranteeing aspect-ratio ≥ 1 on every screen size. At aspect=1 the
   horizontal FOV = 25° (FOV 50°), safely above the halo half-angle (20.7°
   at camera Z=3.4). The JS resize() also auto-adjusts camera Z when the
   canvas aspect falls below a safe threshold.
   pointer-events left on (no none) so canvas drag/touch still works;
   the label overlay inside globe.js already has pointer-events:none. */
.hero-globe-wrap {
  position:   absolute;
  right:      0;
  top:        0;
  height:     100%;
  width:      clamp(65%, 100vh, 100%);
  min-height: 500px;
  z-index:    1;
}
.hero-canvas {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  display:         block;
  pointer-events:  auto;
  cursor:          grab;
}
/* subtle radial glow on the left so text pops */
.hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 55% 80% at 20% 50%, rgba(124,92,252,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index:        1;
}

.hero-badge   { margin-bottom: 1rem; }
.hero-h1      { white-space: pre-line; margin-bottom: 1.25rem; }
.hero-sub     { font-size: 1.1rem; max-width: 460px; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Trust badges row under hero buttons */
.hero-trust {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.6rem 1.2rem;
  margin-top: 1.5rem;
  align-items: center;
}
.trust-badge {
  display:    flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.8rem;
  color:       var(--text-muted);
  font-weight: 500;
}
.trust-badge span { color: var(--accent2); font-size: 0.95rem; }

/* Sticky mobile CTA bar */
.sticky-cta-bar {
  display:    none;
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    7000;
  background: rgba(5,5,8,0.97);
  border-top: 1px solid rgba(124,92,252,0.3);
  padding:    0.75rem 1rem;
  backdrop-filter: blur(12px);
  transform:  translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-cta-bar.visible { transform: translateY(0); }
.sticky-cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  max-width:       600px;
  margin:          0 auto;
}
.sticky-cta-text { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.sticky-cta-btn  { flex-shrink: 0; padding: 0.55rem 1.2rem; font-size: 0.88rem; }

@media (max-width: 768px) {
  .sticky-cta-bar { display: block; }
}
@media (max-width: 380px) {
  .sticky-cta-text { font-size: 0.78rem; }
  .sticky-cta-btn  { padding: 0.5rem 0.9rem; font-size: 0.82rem; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 2rem; }
  /* On mobile globe is back in normal flow, centered below text */
  .hero-globe-wrap {
    position:   relative;
    right:      auto;
    top:        auto;
    width:      100%;
    height:     55vw;
    min-height: 300px;
    pointer-events: auto;
  }
  .hero-content { max-width: 100%; text-align: center; padding: 3rem 0 0; }
  .hero-actions { justify-content: center; }
  .hero-sub { margin: 0 auto 2rem; }
}
@media (max-width: 480px) {
  .hero-globe-wrap { height: 70vw; }
}

/* ─── Showcase / quality section ─────────────────────────────────────────────*/
.showcase-section {
  background: var(--bg);
  overflow:   hidden;
}
.showcase-header {
  text-align:    center;
  margin-bottom: 3.5rem;
}
.quality-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  background:     linear-gradient(135deg, rgba(124,92,252,0.2), rgba(0,229,176,0.1));
  border:         1px solid rgba(124,92,252,0.35);
  border-radius:  50px;
  padding:        0.35rem 1.25rem;
  font-size:      0.82rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1rem;
}
.quality-headline {
  font-size:   clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.quality-tag {
  display:       inline-block;
  background:    linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size:     clamp(2.5rem, 6vw, 5rem);
  font-weight:   900;
  line-height:   1;
  letter-spacing: -0.02em;
}

/* Image mosaic grid */
.showcase-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    auto auto;
  gap:                   1rem;
  margin-bottom:         2.5rem;
}
.showcase-img-wrap {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--surface2);
}
.showcase-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease, filter 0.4s ease, opacity 0.4s ease;
  filter:     brightness(0.85) blur(8px);
  opacity:    0.6;
  will-change: transform, filter;
}
.showcase-img-wrap img.loaded {
  filter:  brightness(0.85) blur(0px);
  opacity: 1;
}
.showcase-img-wrap:hover img { transform: scale(1.04); filter: brightness(1); }
.showcase-img-wrap--tall  { grid-row: span 2; min-height: 500px; }
.showcase-img-wrap--wide  { grid-column: span 2; aspect-ratio: 16/7; }
.showcase-img-wrap--sq    { aspect-ratio: 1/1; }

/* Overlay badge on images */
.img-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(5,5,8,0.85) 0%, transparent 50%);
  display:    flex;
  align-items: flex-end;
  padding:    1.25rem;
}
.img-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  background:    rgba(5,5,8,0.75);
  border:        1px solid var(--border);
  border-radius: 50px;
  padding:       0.3rem 0.85rem;
  font-size:     0.8rem;
  font-weight:   700;
  color:         var(--accent2);
  backdrop-filter: blur(8px);
}
.img-tag-large {
  background:    rgba(124,92,252,0.2);
  border-color:  rgba(124,92,252,0.5);
  color:         #fff;
  font-size:     1.1rem;
  font-weight:   900;
  padding:       0.5rem 1.25rem;
  letter-spacing: 0.02em;
}

/* Quality stats row */
.showcase-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
  background:            var(--surface);
  border:                1px solid var(--border);
  border-radius:         var(--radius-lg);
  padding:               2rem;
}
.qs-item { text-align: center; }
.qs-val  { font-size: 2rem; font-weight: 900; line-height: 1; }
.qs-val--accent  { color: var(--accent);  }
.qs-val--accent2 { color: var(--accent2); }
.qs-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; }

@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .showcase-img-wrap--tall { grid-row: span 1; min-height: 240px; }
  .showcase-img-wrap--wide { grid-column: span 2; }
  .showcase-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-img-wrap--wide, .showcase-img-wrap--tall { grid-column: span 1; grid-row: span 1; }
  .showcase-stats { grid-template-columns: 1fr 1fr; padding: 1.25rem; }
}

/* ─── Stats bar ──────────────────────────────────────────────────────────────*/
.stats-bar {
  background:  var(--surface);
  border-top:  2px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding:     2rem 0;
}
.stats-bar .container {
  display:         grid;
  grid-template-columns: repeat(5, 1fr);
  gap:             1rem;
}
.stat-item  { text-align: center; }
.stat-value {
  display:     block;
  font-size:   clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color:       var(--accent);
  line-height: 1;
}
.stat-label {
  display:   block;
  font-size: 0.82rem;
  color:     var(--text-muted);
  margin-top: 0.35rem;
}
@media (max-width: 768px) { .stats-bar .container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .stats-bar .container { grid-template-columns: repeat(2, 1fr); } }

/* ─── Features ───────────────────────────────────────────────────────────────*/
.features-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}
.feature-card { padding: 1.75rem; }
.feature-icon { font-size: 2rem; margin-bottom: 1rem; }
.feature-card h3 { margin-bottom: 0.5rem; }

@media (max-width: 900px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .features-grid { grid-template-columns: 1fr; } }

/* ─── Pricing ────────────────────────────────────────────────────────────────*/
.pricing-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  margin-bottom:   2.5rem;
  flex-wrap:       wrap;
}
.pricing-toggle-btn {
  padding:      0.45rem 1.2rem;
  border:       1.5px solid var(--border);
  border-radius: 50px;
  font-size:    0.9rem;
  font-weight:  600;
  color:        var(--text-muted);
  background:   transparent;
  transition:   all 0.2s;
}
.pricing-toggle-btn.active {
  background:   var(--accent);
  border-color: var(--accent);
  color:        #fff;
}
.pricing-toggle-switch {
  appearance:  none;
  width:       48px;
  height:      26px;
  background:  var(--glass);
  border:      1px solid var(--border);
  border-radius: 50px;
  position:    relative;
  cursor:      pointer;
  transition:  background 0.25s;
}
.pricing-toggle-switch::before {
  content:     '';
  position:    absolute;
  top:         3px;
  left:        3px;
  width:       18px;
  height:      18px;
  background:  var(--text-muted);
  border-radius: 50%;
  transition:  transform 0.25s ease, background 0.25s;
}
.pricing-toggle-switch:checked { background: var(--accent); }
.pricing-toggle-switch:checked::before { transform: translateX(22px); background: #fff; }

.pricing-countdown {
  text-align:    center;
  margin-bottom: 2rem;
  padding:       0.65rem 1.5rem;
  background:    rgba(124,92,252,0.1);
  border:        1px solid rgba(124,92,252,0.25);
  border-radius: 50px;
  display:       inline-flex;
  align-items:   center;
  gap:           0.75rem;
  font-size:     0.9rem;
}
.pricing-countdown-wrap {
  display:         flex;
  justify-content: center;
  margin-bottom:   1.5rem;
}
.countdown-timer  { font-weight: 800; color: var(--accent); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.pricing-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  align-items:           start;
}
.pricing-card        { position: relative; }
.pricing-card-inner  { padding: 2rem 1.5rem; }
.pricing-card--popular {
  border-color: var(--accent);
  box-shadow:   0 0 40px rgba(124,92,252,0.2);
  transform:    translateY(-8px);
}
.pricing-card--popular:hover { transform: translateY(-12px); }
.pricing-popular-badge {
  position:    absolute;
  top:         -13px;
  left:        50%;
  transform:   translateX(-50%);
  background:  linear-gradient(135deg, var(--accent), #9b7dff);
  color:       #fff;
  padding:     0.25rem 1rem;
  border-radius: 50px;
  font-size:   0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pricing-icon     { font-size: 2.2rem; margin-bottom: 0.75rem; }
.pricing-name     { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.pricing-price      { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.5rem; }
.pricing-price-main { display: flex; align-items: baseline; gap: 0.35rem; }
.pricing-amount     { font-size: 2.4rem; font-weight: 800; color: var(--text); line-height: 1; }
.pricing-price-right { display: flex; flex-direction: column; }
.pricing-currency   { font-size: 1rem; color: var(--text-muted); line-height: 1.2; }
.pricing-period     { font-size: 0.82rem; color: var(--text-muted); }
/* USD conversion line — small, subtle */
.pricing-usd {
  font-size:  0.8rem;
  color:      var(--text-muted);
  opacity:    0.7;
}
.pricing-usd span { font-size: 0.72rem; }
.pricing-save-badge {
  display:      inline-block;
  background:   rgba(0,229,176,0.15);
  color:        var(--accent2);
  border:       1px solid rgba(0,229,176,0.3);
  padding:      0.15rem 0.55rem;
  border-radius: 50px;
  font-size:    0.75rem;
  font-weight:  700;
  width:        fit-content;
}
/* "Best Choice" badge — appears above Diamond card, gold/amber styling */
.pricing-best-badge {
  position:      absolute;
  top:           -13px;
  left:          50%;
  transform:     translateX(-50%);
  background:    linear-gradient(135deg, #f59e0b, #f97316);
  color:         #fff;
  padding:       0.25rem 1rem;
  border-radius: 50px;
  font-size:     0.72rem;
  font-weight:   700;
  white-space:   nowrap;
  letter-spacing: 0.05em;
  box-shadow:    0 2px 12px rgba(245,158,11,0.4);
}
/* Best choice card — amber border glow */
.pricing-card--best {
  border-color: #f59e0b !important;
  box-shadow:   0 0 40px rgba(245,158,11,0.15) !important;
}
.pricing-features {
  display:   flex;
  flex-direction: column;
  gap:       0.6rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.pricing-features li { display: flex; justify-content: space-between; font-size: 0.88rem; }
.pf-label  { color: var(--text-muted); }
.pf-val    { font-weight: 600; color: var(--text); }
.pricing-cta      { width: 100%; justify-content: center; }
.pricing-moneyback { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

@media (max-width: 900px)  { .pricing-cards { grid-template-columns: 1fr; } .pricing-card--popular { transform: none; } }

/* ─── Devices ────────────────────────────────────────────────────────────────*/
.devices-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}
.device-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  padding:        1.2rem 0.5rem;
  cursor:         pointer;
  text-align:     center;
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  background:     var(--glass);
  transition:     all 0.25s ease;
}
.device-card:hover, .device-card.active {
  border-color: var(--accent);
  background:   var(--accent-dim);
  transform:    translateY(-4px);
}
.device-icon { font-size: 1.8rem; }
.device-name { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.device-card.active .device-name { color: var(--accent); }

.device-guide-box {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.25rem 1.5rem;
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  flex-wrap:     wrap;
}
.device-guide-box strong { color: var(--text); font-size: 0.95rem; }
.device-guide-box p      { flex: 1; min-width: 200px; }
.device-guide-close      { margin-top: 0.25rem; flex-shrink: 0; }

@media (max-width: 900px)  { .devices-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .devices-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── Channel categories ─────────────────────────────────────────────────────*/
.categories-row {
  display:    flex;
  gap:        1rem;
  overflow-x: auto;
  padding:    0.5rem 0 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.category-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.4rem;
  padding:        1.2rem 1.5rem;
  min-width:      120px;
  scroll-snap-align: start;
  flex-shrink:    0;
  cursor:         default;
  text-align:     center;
}
.cat-emoji { font-size: 1.8rem; }
.cat-name  { font-size: 0.85rem; font-weight: 600; }
.cat-count { font-size: 0.75rem; color: var(--accent2); }

/* ─── Trial banner ───────────────────────────────────────────────────────────*/
#trial {
  background: linear-gradient(135deg, rgba(124,92,252,0.12), rgba(0,229,176,0.06));
  border-top:    1px solid rgba(124,92,252,0.2);
  border-bottom: 1px solid rgba(124,92,252,0.2);
}
.trial-inner {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  gap:             3rem;
  align-items:     center;
}
.trial-text h2   { margin-bottom: 0.75rem; }
.trial-form      { display: flex; flex-direction: column; gap: 1rem; }
.trial-form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.trial-result    { color: var(--accent2); font-weight: 600; font-size: 0.92rem; }

@media (max-width: 768px) { .trial-inner { grid-template-columns: 1fr; } .trial-form-row { grid-template-columns: 1fr; } }

/* ─── How it works ───────────────────────────────────────────────────────────*/
.how-steps {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
  position:              relative;
}
/* connector line between steps */
.how-steps::before {
  content:    '';
  position:   absolute;
  top:        2.5rem;
  left:       20%;
  right:      20%;
  height:     2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index:    0;
}
.how-step {
  text-align:  center;
  position:    relative;
  z-index:     1;
  background:  var(--bg);
  padding:     0 1rem;
}
.how-number {
  width:         48px;
  height:        48px;
  background:    linear-gradient(135deg, var(--accent), #9b7dff);
  color:         #fff;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   800;
  font-size:     1.2rem;
  margin:        0 auto 0.75rem;
}
.how-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.how-step h3 { margin-bottom: 0.5rem; }

@media (max-width: 768px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-steps::before { display: none; }
}

/* ─── EPG preview ────────────────────────────────────────────────────────────*/
.epg-preview-grid {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}
.epg-row {
  display:       grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--border);
}
.epg-row:last-child { border-bottom: none; }
.epg-channel {
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
  padding:        0.85rem 1rem;
  background:     var(--surface2);
  border-right:   1px solid var(--border);
}
.epg-ch-logo { font-size: 1.3rem; }
.epg-ch-name { font-size: 0.85rem; font-weight: 600; }
.epg-slots   { display: flex; overflow-x: auto; }
.epg-slot {
  flex-shrink:   0;
  min-width:     160px;
  padding:       0.75rem 1rem;
  border-right:  1px solid var(--border);
  position:      relative;
}
.epg-slot:last-child { border-right: none; }
.epg-slot--live  { background: rgba(124,92,252,0.08); }
.epg-time        { font-size: 0.72rem; color: var(--text-muted); display: block; margin-bottom: 0.2rem; }
.epg-prog        { font-size: 0.85rem; font-weight: 500; display: block; }
.epg-live-badge  {
  position:      absolute;
  top:           0.5rem;
  right:         0.5rem;
  background:    #ff4444;
  color:         #fff;
  padding:       0.1rem 0.4rem;
  border-radius: 4px;
  font-size:     0.65rem;
  font-weight:   700;
  letter-spacing: 0.04em;
}
.epg-view-link {
  display:     block;
  text-align:  center;
  margin-top:  1.5rem;
  color:       var(--accent);
  font-weight: 600;
  transition:  opacity 0.2s;
}
.epg-view-link:hover { opacity: 0.75; }

@media (max-width: 600px) { .epg-row { grid-template-columns: 110px 1fr; } }

/* ─── Reviews ────────────────────────────────────────────────────────────────*/
.reviews-actions {
  display:         flex;
  justify-content: center;
  gap:             1rem;
  margin-bottom:   2rem;
  flex-wrap:       wrap;
}
.reviews-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.25rem;
  margin-bottom:         2rem;
}
.review-card    { padding: 1.25rem; }
.review-header  { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.review-avatar  {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     0.85rem;
  color:         #fff;
  flex-shrink:   0;
}
.review-meta       { flex: 1; }
.review-name       { font-size: 0.88rem; font-weight: 600; display: block; }
.review-location   { font-size: 0.78rem; color: var(--text-muted); }
.review-plan-badge {
  font-size:    0.72rem;
  font-weight:  700;
  border:       1px solid;
  padding:      0.1rem 0.45rem;
  border-radius: 50px;
  white-space:  nowrap;
  flex-shrink:  0;
}
.review-stars { margin-bottom: 0.6rem; font-size: 0.95rem; }
.review-text  { font-size: 0.88rem; line-height: 1.6; margin-bottom: 0.65rem; }
.review-date  { font-size: 0.75rem; color: var(--text-muted); }
.reviews-load-row { text-align: center; }

@media (max-width: 1100px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .reviews-grid { grid-template-columns: 1fr; } }

/* ─── Reseller CTA ───────────────────────────────────────────────────────────*/
.reseller-cta-section {
  background:   var(--surface);
  border-radius: var(--radius-lg);
  padding:      3rem;
  display:      grid;
  grid-template-columns: 1fr auto;
  align-items:  center;
  gap:          2rem;
  border:       1px solid var(--border);
}
.reseller-cta-list { display: flex; flex-wrap: wrap; gap: 0.65rem 1.5rem; margin: 1rem 0; }
.reseller-cta-list li::before { content: '✓ '; color: var(--accent2); font-weight: 700; }
.reseller-cta-list li { font-size: 0.92rem; color: var(--text-muted); }

@media (max-width: 768px) { .reseller-cta-section { grid-template-columns: 1fr; } }

/* ─── Lifestyle strip ────────────────────────────────────────────────────────*/
.lifestyle-section {
  padding:    0;
  overflow:   hidden;
  background: var(--bg);
}
.lifestyle-strip {
  display:    flex;
  gap:        0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lifestyle-strip::-webkit-scrollbar { display: none; }
.lifestyle-img-wrap {
  position:   relative;
  flex:       0 0 clamp(200px, 20vw, 280px);
  height:     clamp(200px, 28vw, 360px);
  overflow:   hidden;
  scroll-snap-align: start;
}
.lifestyle-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease, filter 0.4s ease;
  filter:     brightness(0.7);
}
.lifestyle-img-wrap:hover img { transform: scale(1.06); filter: brightness(1); }
.lifestyle-caption {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  background: linear-gradient(to top, rgba(5,5,8,0.9) 0%, transparent 100%);
  padding:    1.5rem 1rem 0.85rem;
  font-size:  0.85rem;
  font-weight: 600;
  color:      #fff;
  text-align: center;
}
@media (max-width: 768px) {
  .lifestyle-img-wrap { flex: 0 0 clamp(160px, 50vw, 220px); height: 200px; }
}
@media (max-width: 480px) {
  .lifestyle-img-wrap { flex: 0 0 72vw; height: 180px; }
}

/* ─── FAQ ────────────────────────────────────────────────────────────────────*/
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-q {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  width:           100%;
  padding:         1.1rem 1.25rem;
  text-align:      left;
  font-weight:     600;
  font-size:       0.95rem;
  color:           var(--text);
  background:      var(--glass);
  transition:      background 0.2s;
  gap:             1rem;
}
.faq-q:hover { background: rgba(124,92,252,0.06); }
.faq-item.open .faq-q { color: var(--accent); }
.faq-chevron { transition: transform 0.3s ease; flex-shrink: 0; color: var(--text-muted); }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-a p { padding: 0 1.25rem 1.1rem; font-size: 0.92rem; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   All breakpoints: 768px (tablet) → 480px (phone) → 380px (small phone)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero mobile ───────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .hero { padding-top: 58px; }
  .hero-h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .hero-sub { font-size: 1rem; }
  .hero-badge { margin-bottom: 0.75rem; }
}
@media (max-width: 480px) {
  .hero-content { padding: 2rem 0 0; text-align: center; }
  .hero-h1      { font-size: clamp(1.65rem, 8vw, 2.1rem); }
  .hero-sub     { font-size: 0.95rem; }
  .hero-actions { gap: 0.75rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-globe-wrap { height: 65vw; }
}

/* ─── Stats bar mobile ──────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .stats-bar { padding: 1.5rem 0; }
  .stat-value { font-size: 1.45rem; }
  .stat-label { font-size: 0.75rem; }
}

/* ─── Showcase mobile ───────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .showcase-header { margin-bottom: 2rem; }
  .quality-tag { font-size: clamp(2rem, 10vw, 3.5rem); }
  .quality-headline { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .showcase-grid { gap: 0.6rem; }
  .showcase-img-wrap--tall { min-height: 200px; }
  .qs-val { font-size: 1.6rem; }
}

/* ─── Features mobile ───────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .feature-card { padding: 1.25rem; }
  .feature-icon { font-size: 1.7rem; }
}

/* ─── Pricing mobile ────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .pricing-toggle-row { gap: 0.6rem; }
  .pricing-toggle-btn { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
  .pricing-cards { gap: 1rem; }
  .pricing-card-inner { padding: 1.5rem 1.25rem; }
  .pricing-amount { font-size: 2rem; }
  .pricing-countdown { font-size: 0.82rem; flex-wrap: wrap; justify-content: center; }
}

/* ─── Devices mobile ────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .devices-grid { gap: 0.65rem; }
  .device-card  { padding: 0.9rem 0.4rem; }
  .device-icon  { font-size: 1.5rem; }
  .device-name  { font-size: 0.72rem; }
}

/* ─── Trial form mobile ─────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .trial-inner { gap: 1.5rem; }
  .trial-text h2 { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .form-input    { padding: 0.8rem 1rem; font-size: 0.95rem; }
  #trial-submit  { width: 100%; }
}

/* ─── Reviews mobile ────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .reviews-actions { flex-direction: column; align-items: stretch; }
  .reviews-actions .btn { width: 100%; justify-content: center; }
  .review-card { padding: 1rem; }
  .review-text { font-size: 0.85rem; }
}

/* ─── Reseller CTA mobile ───────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .reseller-cta-section { padding: 1.75rem 1.25rem; }
  .reseller-cta-btn { width: 100%; justify-content: center; }
}

/* ─── FAQ mobile ────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .faq-q { font-size: 0.9rem; padding: 1rem; }
  .faq-a p { font-size: 0.88rem; padding: 0 1rem 1rem; }
}

/* ─── EPG preview mobile ────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .epg-row { grid-template-columns: 90px 1fr; }
  .epg-channel { padding: 0.6rem 0.5rem; }
  .epg-ch-name { font-size: 0.78rem; }
  .epg-slot    { min-width: 130px; padding: 0.6rem 0.75rem; }
  .epg-prog    { font-size: 0.8rem; }
}

/* ─── Footer mobile ─────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .footer { padding: 2.5rem 0 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ─── How it works mobile ───────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .how-step { padding: 0 0.5rem; }
  .how-number { width: 42px; height: 42px; font-size: 1rem; }
  .how-icon  { font-size: 1.5rem; }
}

/* ─── Categories mobile ─────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .category-card { min-width: 100px; padding: 1rem; }
  .cat-emoji { font-size: 1.5rem; }
  .cat-name  { font-size: 0.78rem; }
}