/* =========================================================
   NEVATV — Design System
   Palette: near-black + warm gold, signature = broadcast-arc motif from the logo
   Type: Bebas Neue (display / marquee) + Manrope (body) + JetBrains Mono (pricing data)
   ========================================================= */

:root{
  --bg:            #0A0A0B;
  --bg-panel:      #131316;
  --bg-panel-2:    #1A1A1E;
  --border:        rgba(212,175,55,0.16);
  --border-strong: rgba(212,175,55,0.32);

  --gold-light:    #F2D374;
  --gold:          #D4AF37;
  --gold-dark:     #A97F1F;
  --emerald:       #1E8A5F;
  --emerald-light: #2FB57C;

  --text:          #F5F5F0;
  --text-muted:    #A8A8A2;
  --text-faint:    #6E6E68;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Numerals (prices, step numbers, hero stats) share one serif for a
     consistent 'numbers' voice. DM Serif Display replaced Bodoni Moda,
     whose hairlines vanished in Safari and Edge — commas read as full
     stops and the euro sign lost its bars. */
  --font-num:     'DM Serif Display', Georgia, 'Times New Roman', serif;
  /* Small tracked labels. Previously JetBrains Mono - a code font, which
     read as developer-tooling rather than premium. */
  --font-label:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gold-grad: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-gold: 0 8px 30px rgba(212,175,55,0.18);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long unbroken strings (URLs, email addresses, long localized words)
     shouldn't be able to force horizontal scroll on narrow phones. */
  overflow-wrap: break-word;
}

/* Respect the notch / rounded corners on modern phones in landscape. */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.05;
}

h2{ font-size: clamp(2.1rem, 4vw, 3rem); letter-spacing: 1px; }
h3{ font-size: 1.5rem; letter-spacing: 0.5px; }

p{ margin: 0; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
@media (max-width: 400px){
  .eyebrow{ letter-spacing: 1.6px; font-size: 0.66rem; }
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.section{ padding: 108px 0; position: relative; }
@media (max-width: 768px){ .section{ padding: 64px 0; } }

.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-head p{ color: var(--text-muted); margin-top: 14px; font-size: 1.05rem; }

/* -------------------- Signature broadcast arcs -------------------- */
.arc-field{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.arc-field svg{ position: absolute; }

/* -------------------- Buttons -------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }

.btn-gold{
  background: var(--gold-grad);
  color: #14100a;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ box-shadow: 0 10px 34px rgba(212,175,55,0.32); }

.btn-outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--gold); background: rgba(212,175,55,0.06); }

.btn-sm{ padding: 11px 20px; font-size: 0.85rem; }
.btn-block{ width: 100%; }

/* -------------------- Header -------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,11,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand img{ height: 40px; width: auto; }
.brand-text{ font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 1px; }
.brand-text .accent{ color: var(--gold); }

.main-nav{ display: flex; align-items: center; gap: 34px; }
.main-nav a{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.main-nav a:hover{ color: var(--gold-light); }

.header-actions{ display: flex; align-items: center; gap: 14px; }

.lang-switch{ display: flex; gap: 4px; font-family: var(--font-label); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.6px; }
.lang-switch a{
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--text-faint);
  border: 1px solid transparent;
}
.lang-switch a.active{ color: var(--gold); border-color: var(--border-strong); }
.lang-switch a:hover{ color: var(--gold-light); }

.nav-toggle{ display: none; }

@media (max-width: 900px){
  .main-nav{ display: none; }
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44x44 is the Apple/Google minimum comfortable touch target */
    min-width: 44px;
    min-height: 44px;
    font-size: 1.15rem;
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 10px;
    cursor: pointer;
  }
  .header-actions .lang-switch,
  .header-actions > .btn{ display: none; }
}

/* -------------------- Feature spec grid --------------------
   Not nine floating cards: one bordered panel divided by gold hairlines,
   echoing the hero's hairline stat strip. The 1px grid gap over a gold
   background paints the dividers, so they stay perfect at every column
   count without any nth-child bookkeeping. */
.spec-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(212,175,55,0.16);
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-item{
  position: relative;
  background: var(--bg-panel);
  padding: 32px 28px 30px;
  transition: background 0.25s ease;
}
.spec-item:hover{
  background: linear-gradient(160deg, rgba(212,175,55,0.07), var(--bg-panel) 60%);
}

.spec-item .ico{
  display: block;   /* inline spans ignore margin-bottom */
  color: var(--gold);
  margin-bottom: 18px;
}
.spec-item .ico svg{ width: 30px; height: 30px; display: block; }

.spec-item h3{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.1px;
  margin-bottom: 9px;
  color: var(--text);
}
.spec-item p{
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 900px){
  .spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-item{ padding: 28px 22px 26px; }
}
@media (max-width: 600px){
  .spec-grid{ grid-template-columns: minmax(0, 1fr); }
  .spec-item{ padding: 26px 22px 24px; }
}

/* -------------------- Pricing -------------------- */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
/* Grid items default to min-width:auto, so long price strings (notably the
   French "Seulement €8,30/mois — Économisez 33%") could force the track wider
   than the viewport. minmax(0,1fr) + min-width:0 lets them shrink instead. */
@media (max-width: 1100px){ .pricing-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .pricing-grid{ grid-template-columns: minmax(0, 1fr); } }

.plan-card{
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan-card.featured{
  border-color: var(--gold);
  background: linear-gradient(165deg, rgba(212,175,55,0.1), var(--bg-panel) 55%);
  box-shadow: var(--shadow-gold);
  transform: translateY(-10px);
}
@media (max-width: 1100px){ .plan-card.featured{ transform: none; } }

.plan-badge{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold-grad);
  color: #14100a;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name{ font-family: var(--font-body); font-weight: 800; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.plan-card.featured .plan-name{ color: var(--gold-light); }

.plan-price-row{ margin: 18px 0 6px; display: flex; align-items: baseline; gap: 10px; }
.plan-price{ font-family: var(--font-num); font-weight: 400; font-size: 3.68rem;
  letter-spacing: 0.5px; line-height: 1; color: #FFF6DC; }
.plan-old-price{ font-family: var(--font-num); font-weight: 400; font-size: 1.6rem;
  color: var(--text-faint); text-decoration: line-through; }
.plan-per-month{ font-size: 0.85rem; color: var(--emerald-light); font-weight: 700; margin-bottom: 20px; }

.plan-devices{
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.plan-actions{ margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.plan-includes{
  margin-top: 60px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.plan-includes h3{ font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; margin-bottom: 22px; text-align: center; }
.includes-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
}
@media (max-width: 800px){ .includes-list{ grid-template-columns: 1fr; } }
.includes-list li{ display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-muted); }
.includes-list li::before{
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
}

/* -------------------- Plan footnote -------------------- */
.plan-footnote{
  margin-top: 30px;
  text-align: center;
}

/* The guarantee is the strongest trust signal in the section, so it gets a
   contained gold-bordered line of its own rather than sharing a row with the
   extra-devices note. */
.guarantee{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 12px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(212,175,55,0.08), rgba(19,19,22,0.6));
  font-size: 0.9rem;
  line-height: 1.5;
}
.guarantee svg{ width: 18px; height: 18px; color: var(--gold); flex: none; }
.guarantee strong{ color: var(--gold-light); font-weight: 800; }
.guarantee span{ color: var(--text-muted); }

.plan-note{
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--text-faint);
}
#pricing .plan-note a{ color: var(--gold-light); text-decoration: underline; }
#pricing .plan-note a:hover{ color: var(--gold); }

@media (max-width: 620px){
  .guarantee{
    border-radius: 16px;
    padding: 14px 18px;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* -------------------- Steps -------------------- */
.steps-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px){ .steps-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .steps-grid{ grid-template-columns: 1fr; } }
.step-card{ position: relative; padding-top: 8px; }
.step-num{
  font-family: var(--font-num);
  color: var(--gold);
  font-size: 1.29rem;
  letter-spacing: 1.5px;
}
.step-card .icon{ margin: 14px 0 12px; color: var(--gold); }
.step-card .icon svg{ width: 30px; height: 30px; display: block; }
.step-card h3{ font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.step-card p{ color: var(--text-muted); font-size: 0.9rem; }

/* -------------------- FAQ -------------------- */
.faq-list{ max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  font-family: var(--font-label);
  color: var(--gold);
  font-size: 1.3rem;
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-body{
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* -------------------- Reviews — mosaic wall --------------------
   CSS columns rather than grid: each screenshot keeps its own height,
   so nothing is ever cropped mid-sentence. Drop your own images into
   assets/reviews/ to fill the slots. */
.review-wall{
  columns: 3;
  column-gap: 18px;
}
.review-wall .shot{
  break-inside: avoid;
  margin: 0 0 18px;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.review-wall .shot img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  position: relative;
  z-index: 1;
}
.review-wall .shot:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.review-wall .shot:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Gold hairline over the image once one is added */
.review-wall .shot::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.18);
  pointer-events: none;
  z-index: 2;
}
/* Empty-slot hint sits behind the image; a real screenshot covers it. */
.review-wall .shot::before{
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 1.5px;
  color: rgba(212,175,55,0.32);
  border: 1px dashed rgba(212,175,55,0.22);
  border-radius: 14px;
  z-index: 0;
}

@media (max-width: 1000px){ .review-wall{ columns: 2; column-gap: 12px; } .review-wall .shot{ margin-bottom: 12px; } }
@media (max-width: 640px){  .review-wall{ columns: 1; } }

/* -------------------- Reviews — lightbox -------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(6,6,7,0.93);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.lightbox.open{ opacity: 1; visibility: visible; }
.lightbox img{
  max-width: min(94vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: var(--bg-panel);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.lightbox .close{
  position: absolute;
  top: 22px; right: 22px;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 10px;
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox .nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  min-width: 46px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(19,19,22,0.8);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}
.lightbox .prev{ left: 18px; }
.lightbox .next{ right: 18px; }
.lightbox .counter{
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 1.4px;
  color: var(--text-faint);
}
@media (max-width: 560px){
  .lightbox{ padding: 24px 14px; }
  .lightbox .nav{ top: auto; bottom: 22px; transform: none; }
  .lightbox .prev{ left: 22px; }
  .lightbox .next{ right: 22px; }
  .lightbox .counter{ bottom: 34px; }
}
@media (prefers-reduced-motion: reduce){
  .review-wall .shot, .lightbox{ transition: none; }
}

/* Coming-soon panel — stands in for the wall on pages with no reviews yet */
.reviews-soon{
  max-width: 620px;
  margin: 0 auto;
  padding: 52px 34px 46px;
  text-align: center;
  border: 1px dashed rgba(212,175,55,0.24);
  border-radius: var(--radius-lg);
  background: rgba(212,175,55,0.02);
}
.reviews-soon svg{
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  color: var(--gold);
  opacity: 0.75;
}
.reviews-soon h3{
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 12px;
}
.reviews-soon p{
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 22px;
}
.reviews-soon a{
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(212,175,55,0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.reviews-soon a:hover{ color: var(--text); border-color: var(--text); }
@media (max-width: 560px){
  .reviews-soon{ padding: 40px 22px 36px; }
}

/* -------------------- CTA banner -------------------- */
.cta-banner{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.cta-banner h2{ margin-bottom: 16px; }
.cta-banner p{ color: var(--text-muted); max-width: 520px; margin: 0 auto 30px; }
.cta-row{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* -------------------- Footer -------------------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
}
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .brand{ margin-bottom: 14px; }
.footer-brand p{ color: var(--text-muted); font-size: 0.88rem; max-width: 320px; }
.footer-links{ display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h3{ font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.footer-col a, .footer-col span{ display: block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px; }
.footer-col a:hover{ color: var(--gold-light); }

/* On touch screens, give footer links a full-height tap area rather than
   relying on the text bounds, which are only ~23px tall. */
@media (max-width: 900px){
  .footer-col a, .footer-col span{
    padding: 10px 0;
    margin-bottom: 0;
  }
  .footer-links{ gap: 32px; }
}
.footer-bottom{
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* -------------------- Platform marquee -------------------- */
.marquee-wrap{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-left 34s linear infinite;
}
.marquee-track.reverse{
  animation-name: marquee-right;
  animation-duration: 30s;
}
.marquee-row + .marquee-row{ margin-top: 16px; }

@keyframes marquee-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes marquee-right{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none !important; }
}

/* Image tile — drop your own image into assets/platforms/ to fill it.
   Tile keeps its size whether or not an image has loaded yet. */
.platform-tile{
  flex: none;
  width: 172px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.platform-tile:hover{ border-color: var(--border-strong); transform: translateY(-3px); }

.platform-tile img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  /* Same reasoning as the device tiles: logos that carry their own white
     background read as deliberate cards rather than bare rectangles.
     Slightly tighter radius than the device row because these tiles are
     smaller. No effect on a transparent logo — nothing visible to round. */
  border-radius: 8px;
}

/* Empty-slot hint sits behind the image; a real image covers it once added. */
.platform-tile::after{
  content: attr(data-slot);
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 1.5px;
  color: rgba(212,175,55,0.32);
  border: 1px dashed rgba(212,175,55,0.22);
  border-radius: 8px;
  z-index: 0;
}

@media (max-width: 560px){
  .platform-tile{ width: 138px; height: 80px; padding: 6px 8px; }
}

/* Pausing a section's rows. The class is toggled from app.js on hover
   (mouse) or press-and-hold (touch); both rows in the section stop
   together, and the position is preserved rather than jumping. */

/* Marquee images fade in rather than snapping into existence. The gate class
   is added by app.js, so with JS disabled images simply show immediately
   instead of staying invisible. */
.js-imgfade .marquee-row img{
  opacity: 0;
  transition: opacity 0.32s ease;
}
.js-imgfade .marquee-row img.is-loaded{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .js-imgfade .marquee-row img{ transition: none; }
}


/* -------------------- Swipeable marquee rows --------------------
   Each row is a real scroll container rather than a CSS animation, so a
   finger can push it. Auto-scroll is driven by app.js at each row's own
   speed. No touch-action here on purpose: the browser decides horizontal
   swipe vs vertical page scroll, so scrolling the page still works when
   your finger starts on a row. */
.marquee-row[data-swipe] .marquee-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.marquee-row[data-swipe] .marquee-wrap::-webkit-scrollbar{ display: none; }
.marquee-row[data-swipe] .marquee-track{ animation: none; }

/* No long-press image preview / "Save Image" sheet on the logos, and no
   accidental text selection of the device names while swiping. */
.marquee-row[data-swipe] .marquee-wrap,
.marquee-row[data-swipe] .marquee-wrap img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Mouse users: show it's draggable, and don't select text mid-drag.
   Scoped to precise pointers so phones never see any of this. */
@media (hover: hover) and (pointer: fine){
  .marquee-row[data-swipe] .marquee-wrap{ cursor: grab; user-select: none; -webkit-user-select: none; }
  .marquee-row[data-swipe] .marquee-wrap.is-dragging{ cursor: grabbing; }
}

/* -------------------- Device marquee tiles -------------------- */
.device-tile{
  flex: none;
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.device-tile:hover{
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

/* Image slot. 190x100 keeps the same 1.9:1 proportion as the channel and
   VOD tiles, so one 380x200 image spec covers all three strips. */
.device-logo{
  position: relative;
  width: 190px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-logo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  /* These logos carry their own white background. Rounding the corners and
     letting them fill the box makes them read as deliberate white cards
     rather than rectangles floating in the tile. Harmless for any
     transparent logo added later — there's nothing visible to round. */
  border-radius: 10px;
}
.device-logo::after{
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  color: rgba(212,175,55,0.32);
  border: 1px dashed rgba(212,175,55,0.22);
  border-radius: 8px;
  z-index: 0;
}

.device-tile .name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

@media (max-width: 560px){
  .device-tile{ width: 164px; padding: 11px 8px; gap: 8px; }
  .device-logo{ width: 148px; height: 78px; }
  .device-tile .name{ font-size: 0.82rem; }
}

/* -------------------- Channel category cards -------------------- */
.cat-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
  margin-bottom: 62px;
}
.cat-pill{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 132px;
  padding: 22px 12px;
  background: linear-gradient(165deg, rgba(212,175,55,0.06), var(--bg-panel) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cat-pill:hover{ border-color: var(--border-strong); transform: translateY(-4px); }
.cat-pill svg{ width: 30px; height: 30px; color: var(--gold); flex: none; }
.cat-pill .label{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 560px){
  .cat-row{ gap: 10px; margin-top: 34px; margin-bottom: 46px; }
  .cat-pill{ width: 104px; padding: 18px 8px; gap: 10px; }
  .cat-pill svg{ width: 26px; height: 26px; }
  .cat-pill .label{ font-size: 0.8rem; }
}

/* -------------------- Floating order button -------------------- */
.float-cta{
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #14100a;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.35);

  /* hidden until the visitor scrolls past the hero */
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.float-cta.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.float-cta:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 38px rgba(212,175,55,0.34), 0 0 0 1px rgba(212,175,55,0.5);
}
.float-cta:active{ transform: translateY(0) scale(0.98); }
.float-cta svg{ width: 18px; height: 18px; flex: none; }

/* Soft outward pulse to catch the eye once it appears. */
.float-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.float-cta.show::before{ animation: cta-pulse 2.8s ease-out infinite; }
@keyframes cta-pulse{
  0%   { opacity: 0.65; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.24); }
  100% { opacity: 0;    transform: scale(1.24); }
}

/* Hide while the mobile menu is open so it never sits on top of the overlay. */
.float-cta.hidden-by-menu{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(18px) scale(0.96) !important;
}

@media (max-width: 560px){
  .float-cta{
    padding: 14px 24px;
    font-size: 0.9rem;
    /* Centered on phones — easier to reach with either thumb than a corner. */
    right: auto;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(18px) scale(0.96);
  }
  .float-cta.show{
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .float-cta:hover{
    transform: translateX(-50%) translateY(-3px) scale(1.02);
  }
  .float-cta:active{
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
  .float-cta.hidden-by-menu{
    transform: translateX(-50%) translateY(18px) scale(0.96) !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .float-cta.show::before{ animation: none; }
}

.mobile-nav{
  position: fixed;
  inset: 0;
  background: rgba(10,10,11,0.98);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 72px 20px 32px;
  /* Without this, tall content on short screens (e.g. 320x568) spills past the
     drawer's bounds and shows through at the top of the page while closed. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}
@media (max-height: 700px){
  .mobile-nav{ gap: 16px; }
  .mobile-nav a{ font-size: 1.4rem; }
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 1px; }
.mobile-nav .lang-switch a{
  font-family: var(--font-label);
  min-width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav .close-btn{
  position: absolute; top: 26px; right: 26px;
  background: none; border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 1.2rem;
}