/* =========================================================
   IPTV Fiable — main.css  Modern 2026
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  --bg:        #eef1fb;
  --bg-alt:    #f5f7ff;
  --white:     #ffffff;
  --text:      #111827;
  --muted:     #6b7280;
  --primary:   #2563eb;
  --pri-dark:  #1d4ed8;
  --secondary: #7c3aed;
  --accent:    #ec4899;
  --dark-card: #111827;
  --green:     #22c55e;
  --radius:    1.2rem;
  --radius-lg: 1.6rem;
  --shadow:    0 2px 16px rgba(0,0,0,.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,.11);
  --tr:        .3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; }

/* ---------- Typography ---------- */
.h1 {
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:800;
  line-height:1.15;
  margin-bottom:1.2rem;
  letter-spacing:-.02em;
}
.h2 {
  font-size:clamp(1.7rem,3.5vw,2.7rem);
  font-weight:800;
  margin-bottom:.5rem;
  letter-spacing:-.02em;
}
.sub { color:var(--muted); margin:.5rem 0 2.5rem; font-size:1.05rem; }

/* ---------- Layout ---------- */
.container { width:90%; max-width:1200px; margin:0 auto; }
.section    { padding:5rem 0; }
.section.alt{ background:var(--bg-alt); }
.grid-3     { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }

/* ---------- Header ---------- */
.header {
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(0,0,0,.07);
}
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  gap:1rem;
}
.brand {
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.1rem;
  color:var(--text); flex-shrink:0;
}
.logo { width:38px; border-radius:8px; }
.menu { display:flex; gap:1.5rem; align-items:center; }
.menu a {
  color:var(--text); font-weight:500; font-size:.95rem;
  transition:color var(--tr);
}
.menu a:hover { color:var(--primary); }

/* Nav CTA */
.btn--nav {
  background:var(--text);
  color:var(--white) !important;
  padding:.52rem 1.2rem;
  border-radius:999px;
  font-weight:600; font-size:.88rem;
}
.btn--nav:hover { opacity:.85; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:.3rem;
  background:none; border:none; cursor:pointer;
}
.hamburger span {
  width:25px; height:2.5px;
  background:var(--text); border-radius:2px; transition:.3s;
}

/* ---------- Hero ---------- */
.hero {
  background:linear-gradient(145deg,#e4eaff 0%,#f3eeff 45%,#fff0f8 100%);
  text-align:center;
  padding:7rem 1rem 5rem;
  position:relative;
  overflow:hidden;
}
.hero__content { position:relative; z-index:1; }

/* -------- Hero Floating Pills -------- */
.hero-pill {
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .85rem;
  border-radius:999px;
  font-size:.76rem;
  font-weight:700;
  pointer-events:none;
  z-index:1;
  white-space:nowrap;
  letter-spacing:.04em;
}

/* 4K HD — pill blanc, haut-gauche */
.hero-pill--4k {
  background:#fff;
  color:#1e1b4b;
  box-shadow:0 4px 18px rgba(0,0,0,.13);
  left:2%; top:10%;
  animation:floatA 6s ease-in-out infinite;
}
.hp-play {
  font-size:.7rem;
  color:#7c3aed;
}

/* LIVE TV — pill orange, haut-droite */
.hero-pill--live {
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;
  box-shadow:0 4px 18px rgba(249,115,22,.35);
  right:2%; top:10%;
  animation:floatB 7s ease-in-out infinite;
}
.hp-screen { font-size:.75rem; }

/* SPORT — pill blanc, bas-gauche */
.hero-pill--sport {
  background:#fff;
  color:#111;
  box-shadow:0 4px 18px rgba(0,0,0,.13);
  left:2%; bottom:15%;
  animation:floatA 5s ease-in-out infinite;
}
.hp-dot {
  width:9px; height:9px;
  border-radius:50%;
  background:#ef4444;
  display:inline-block;
  flex-shrink:0;
}
@keyframes floatA {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes floatB {
  0%,100% { transform:translateY(-8px); }
  50%      { transform:translateY(8px); }
}

.badge-top {
  display:inline-block;
  background:#fce7f3;
  color:#db2777;
  padding:.38rem 1rem;
  border-radius:999px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.lead {
  font-size:1.1rem; color:var(--muted);
  max-width:580px; margin:.8rem auto 1rem;
}
.clients { font-size:1rem; color:var(--primary); font-weight:600; margin-bottom:2rem; }
.cta    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

.seo-intro {
  max-width:700px; margin:1rem auto;
  color:var(--muted); font-size:.94rem; text-align:center;
}
.seo-intro--small { font-size:.84rem; color:#9ca3af; }

/* ---------- Trust Bar ---------- */
.trust-bar {
  background:var(--white);
  border-bottom:1px solid #e5e7eb;
  padding:1.1rem 0;
}
.trust-bar__inner {
  display:flex; justify-content:space-around;
  align-items:center; flex-wrap:wrap; gap:1rem;
}
.trust-bar__item {
  display:flex; align-items:center; gap:.55rem;
  font-size:.88rem; font-weight:600; color:var(--text);
}
.trust-bar__item svg {
  width:20px; height:20px;
  fill:var(--primary);
  flex-shrink:0;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block;
  padding:.75rem 1.6rem;
  border-radius:999px;
  font-weight:600; font-size:.95rem;
  transition:var(--tr);
  cursor:pointer; border:none; text-align:center;
}
.btn--primary  { background:var(--primary); color:var(--white); }
.btn--primary:hover { background:var(--pri-dark); transform:translateY(-2px); }
.btn--ghost {
  border:2px solid var(--text);
  color:var(--text); background:transparent;
}
.btn--ghost:hover { background:var(--text); color:var(--white); }
.btn--whatsapp { background:var(--green); color:var(--white); }
.btn--whatsapp:hover { background:#16a34a; transform:translateY(-2px); }

/* ---------- Feature Cards ---------- */
.card {
  background:var(--white);
  border-radius:var(--radius);
  padding:2rem;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform var(--tr),box-shadow var(--tr);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card .icon {
  width:56px; height:56px;
  margin:0 auto 1.2rem;
  background:rgba(37,99,235,.08);
  border-radius:1rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.card .icon svg {
  width:28px; height:28px;
  stroke:var(--primary); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Garanties icon */
#garanties .card .icon { background:rgba(37,99,235,.08); }
#garanties .card .icon svg { stroke:var(--primary); }
.card h3 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.card p  { color:var(--muted); font-size:.93rem; }


/* ---------- Devices Section ---------- */
.devices-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem; margin-top:3rem;
}
.device-card {
  background:var(--white);
  border-radius:var(--radius);
  padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow);
  transition:transform var(--tr),box-shadow var(--tr);
}
.device-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.device-card img {
  width:56px; height:56px;
  object-fit:contain; margin:0 auto 1rem;
}
.device-card span {
  display:block; font-weight:600;
  font-size:.93rem; color:var(--text);
}

/* ---------- Shared Slider Wrap ---------- */
.slider-outer {
  overflow:hidden; position:relative; width:100%;
}
.slider-outer::before,
.slider-outer::after {
  content:''; position:absolute; top:0; width:90px; height:100%;
  z-index:2; pointer-events:none;
}
.slider-outer::before { left:0;  background:linear-gradient(to right,var(--bg),transparent); }
.slider-outer::after  { right:0; background:linear-gradient(to left,var(--bg),transparent); }

.slider-outer.alt-bg::before { background:linear-gradient(to right,var(--bg-alt),transparent); }
.slider-outer.alt-bg::after  { background:linear-gradient(to left,var(--bg-alt),transparent); }

/* ---------- Channel Slider ---------- */
#channels-slider        { overflow:hidden; padding:3rem 0 2rem; }
#channels-slider .container { margin-bottom:2rem; }

.channel-track {
  display:flex; gap:1rem;
  width:max-content;
  animation:scrollLeft 35s linear infinite;
}
.channel-track:hover { animation-play-state:paused; }

.channel-track--reverse {
  animation:scrollRight 40s linear infinite;
}
.channel-track--reverse:hover { animation-play-state:paused; }

@keyframes scrollRight {
  0%   { transform:translateX(-50%); }
  100% { transform:translateX(0); }
}

.channels-row2 { margin-top:.75rem; }

.ch-badge {
  display:flex; align-items:center; gap:.5rem;
  background:var(--white);
  border-radius:999px;
  padding:.55rem 1.3rem;
  font-weight:700; font-size:.88rem;
  white-space:nowrap;
  box-shadow:var(--shadow);
  color:var(--text); flex-shrink:0;
}
.ch-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--primary); flex-shrink:0;
}
.ch-dot.red   { background:#ef4444; }
.ch-dot.green { background:var(--green); }
.ch-dot.gold  { background:#f59e0b; }

/* ---------- Movie Slider ---------- */
.movie-track {
  display:flex; gap:1.2rem;
  width:max-content;
  animation:scrollLeft 45s linear infinite;
  padding:.5rem .5rem 1rem;
}
.movie-track:hover { animation-play-state:paused; }

.movie-card {
  width:155px; flex-shrink:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform var(--tr);
  background:var(--dark-card);
}
.movie-card:hover { transform:scale(1.05); }
.movie-card img {
  width:100%; height:230px;
  object-fit:cover; display:block;
}
.movie-card__title {
  padding:.55rem .5rem;
  font-size:.7rem; font-weight:700;
  color:var(--white); text-align:center;
  text-transform:uppercase; letter-spacing:.06em;
}

@keyframes scrollLeft {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ---------- Steps ---------- */
.steps { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin:2rem 0; }
.step  { flex:1; min-width:200px; text-align:center; }
.step__num {
  display:inline-flex; width:48px; height:48px;
  align-items:center; justify-content:center;
  background:var(--primary); color:var(--white);
  border-radius:50%; margin-bottom:.75rem;
  font-weight:800; font-size:1.1rem;
}
.step h3 { font-weight:700; margin-bottom:.4rem; }
.step p  { color:var(--muted); font-size:.93rem; }

/* ---------- Tarifs ---------- */
.tabs {
  display:flex; justify-content:center;
  margin-bottom:2.5rem; gap:.75rem; flex-wrap:wrap;
}
.tab-btn {
  background:var(--white);
  border:2px solid #e5e7eb;
  padding:.58rem 1.4rem;
  border-radius:999px;
  cursor:pointer; font-weight:600; font-size:.9rem;
  color:var(--text); transition:var(--tr);
}
.tab-btn:hover    { border-color:var(--primary); color:var(--primary); }
.tab-btn.active   { background:var(--primary); color:var(--white); border-color:var(--primary); }
.tab-content      { display:none; }
.tab-content.active { display:block; }

.pricing {
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.p-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:2.5rem 2rem; text-align:center;
  box-shadow:var(--shadow); position:relative;
  transition:transform var(--tr),box-shadow var(--tr);
  border:2px solid transparent;
}
.p-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.p-card--recommended {
  background:var(--white);
  border:2px solid var(--primary);
  box-shadow:0 8px 32px rgba(37,99,235,.18);
}

.p-name {
  font-weight:600; color:var(--muted);
  text-transform:uppercase; font-size:.78rem;
  letter-spacing:.1em; display:block; margin-bottom:.5rem;
}
.p-price { font-size:2.2rem; font-weight:800; margin:1rem 0; color:var(--text); }
.p-feats {
  list-style:none; text-align:left;
  margin:1rem 0 1.5rem;
  color:var(--muted);
  display:flex; flex-direction:column; gap:.5rem;
}
.p-feats li { display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.p-feats li::before { content:'✓'; color:var(--primary); font-weight:700; flex-shrink:0; }

.badge {
  position:absolute; top:-12px; left:50%;
  transform:translateX(-50%);
  background:var(--primary); color:var(--white);
  padding:.28rem .85rem; border-radius:999px;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}

/* ---------- Stats ---------- */
.stat    { text-align:center; }
.stat h3 { font-size:2.5rem; font-weight:800; margin-bottom:.4rem; }
.stat p  { color:var(--muted); }

/* ---------- Comparatif ---------- */
.comparatif { width:100%; border-collapse:collapse; margin-top:2rem; }
.comparatif th,
.comparatif td { border:1px solid #e5e7eb; padding:1rem 1.5rem; text-align:center; }
.comparatif th { background:var(--dark-card); color:var(--white); font-weight:700; }
.comparatif tr:nth-child(even) td { background:rgba(37,99,235,.03); }

/* ---------- Avis (Reviews) ---------- */
#avis .container > .h2 { margin-bottom:.5rem; }
#avis .container > .sub-reviews {
  color:var(--muted); margin-bottom:2rem; font-size:1rem;
}

.reviews-outer { overflow:hidden; position:relative; width:100%; margin-top:2rem; cursor:grab; }
.reviews-outer.is-dragging { cursor:grabbing; user-select:none; }
.reviews-outer::before,
.reviews-outer::after {
  content:''; position:absolute; top:0; width:90px; height:100%;
  z-index:2; pointer-events:none;
}
.reviews-outer::before { left:0;  background:linear-gradient(to right,var(--bg),transparent); }
.reviews-outer::after  { right:0; background:linear-gradient(to left,var(--bg),transparent); }

.reviews-track {
  display:flex; gap:1.5rem;
  width:max-content;
  animation:scrollLeft 40s linear infinite;
}
.reviews-track:hover { animation-play-state:paused; }

.testis {
  display:flex; gap:1.5rem;
  overflow-x:auto; flex-wrap:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
}
.testis::-webkit-scrollbar { display:none; }

.testi {
  background:var(--white);
  border-radius:var(--radius);
  padding:1.8rem;
  width:320px; flex-shrink:0;
  box-shadow:var(--shadow);
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:.9rem;
  border:1px solid rgba(0,0,0,.05);
}
.testi-stars span {
  color:#f59e0b;
  font-size:1.15rem;
  letter-spacing:.05em;
}
.testi blockquote {
  font-size:.94rem;
  color:var(--text);
  line-height:1.65;
  font-style:normal;
  flex-grow:1;
}
.testi-author {
  display:flex; align-items:center; gap:.85rem;
  margin-top:auto; padding-top:.9rem;
  border-top:1px solid #f3f4f6;
}
.testi-avatar {
  width:40px; height:40px;
  border-radius:50%;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800;
  flex-shrink:0; letter-spacing:.03em;
}
.testi-name {
  font-weight:700; font-size:.92rem; color:var(--text);
  margin-bottom:.2rem;
}
.testi-verified {
  display:flex; align-items:center; gap:.25rem;
  font-size:.78rem; font-weight:600; color:var(--green);
}
.testi-verified svg {
  width:13px; height:13px; flex-shrink:0;
}

/* ---------- WhatsApp CTA Block ---------- */
.whatsapp-cta        { padding:2.5rem 0; }
.whatsapp-cta__inner {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  display:flex; align-items:center;
  justify-content:space-between; gap:2rem;
  box-shadow:var(--shadow); flex-wrap:wrap;
}
.whatsapp-cta__left {
  display:flex; align-items:center; gap:1.5rem;
}
.whatsapp-cta__icon { width:60px; height:60px; flex-shrink:0; }
.whatsapp-cta__text strong {
  display:block; font-size:1.15rem;
  font-weight:700; margin-bottom:.25rem;
}
.whatsapp-cta__text p { color:var(--muted); font-size:.93rem; }

/* ---------- Garanties ---------- */
#garanties .card h3 { color:var(--primary); }

/* ---------- Revendeur ---------- */
#revendeur-teaser { text-align:center; }
#revendeur-teaser p { margin:1rem 0; color:var(--muted); }

/* ---------- FAQ ---------- */
#faq .h2     { margin-bottom:2.5rem; }
.faq {
  border:none;
  border-bottom:1px solid #e5e7eb;
  border-radius:0; background:transparent;
  padding:0; margin-bottom:0;
}
.faq summary {
  font-size:1.05rem; font-weight:600; color:var(--text);
  list-style:none;
  display:flex; justify-content:space-between;
  align-items:center; padding:1.4rem 0;
  cursor:pointer; user-select:none;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+';
  font-size:1.4rem; color:var(--primary);
  font-weight:300; line-height:1;
  flex-shrink:0; transition:transform var(--tr);
}
details[open].faq summary::after { content:'−'; }
.faq p { padding:0 0 1.4rem; color:var(--muted); font-size:.94rem; }

/* ---------- SEO Block ---------- */
#seo-block .seo-box p { color:var(--muted); margin-bottom:1rem; line-height:1.8; }

/* ---------- Contact ---------- */
.contact     { text-align:center; }
.contact-list {
  list-style:none;
  display:flex; justify-content:center; gap:2rem;
  flex-wrap:wrap; margin-top:1.5rem;
}
.contact-list li a { color:var(--primary); font-weight:500; }
.contact-list li a:hover { text-decoration:underline; }

/* ---------- Footer ---------- */
.footer {
  background:var(--white);
  padding:2.5rem 0; text-align:center;
  border-top:1px solid #e5e7eb;
}
.foot p   { color:var(--muted); font-size:.88rem; margin-bottom:1rem; }
.footer nav {
  display:flex; gap:1.5rem;
  justify-content:center; flex-wrap:wrap; margin-top:1rem;
}
.footer nav a { color:var(--muted); font-size:.84rem; transition:color var(--tr); }
.footer nav a:hover { color:var(--text); }

/* ---------- WhatsApp Float ---------- */
.whatsapp-float {
  position:fixed; bottom:80px; right:20px;
  background:#25d366;
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.5);
  z-index:1000;
  transition:transform var(--tr), box-shadow var(--tr);
}
.whatsapp-float:hover {
  transform:scale(1.12);
  box-shadow:0 6px 28px rgba(37,211,102,.65);
}
.whatsapp-float svg { display:block; }

/* ---------- Sticky Bar ---------- */
.sticky-bar {
  position:fixed; bottom:0; left:0; width:100%;
  background:var(--white);
  box-shadow:0 -2px 20px rgba(0,0,0,.08);
  padding:.8rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
  z-index:999;
}
.sticky-bar a:first-child { font-weight:600; color:var(--text); }

/* ---------- Shimmer ---------- */
.shimmer {
  position:relative; display:inline-block;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  background-clip:text; color:transparent; overflow:hidden;
}
.shimmer::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:shimmer-move 3s infinite; pointer-events:none;
}
@keyframes shimmer-move {
  0%   { transform:translateX(-100%); }
  50%  { transform:translateX(100%);  }
  100% { transform:translateX(100%);  }
}


/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .channel-track,
  .movie-track,
  .reviews-track      { animation:none; }
  .hero-pill          { animation:none; }
  .shimmer::before    { animation:none; }
  @keyframes scrollLeft  {}
  @keyframes scrollRight {}
  @keyframes floatA      {}
  @keyframes floatB      {}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:768px) {
  .menu {
    display:none; flex-direction:column; gap:.75rem;
    background:var(--white);
    padding:1.5rem; position:absolute;
    top:65px; right:10px; left:10px;
    box-shadow:var(--shadow-md);
    border-radius:var(--radius); z-index:999;
  }
  .menu.show { display:flex; }
  .hamburger { display:flex; }
  .hero-pill { font-size:.66rem; padding:.3rem .7rem; gap:.3rem; }
  .hero-pill--4k   { left:3%; top:7%; }
  .hero-pill--live { right:3%; top:7%; }
  .hero-pill--sport{ left:3%; bottom:12%; }
  .whatsapp-cta__inner { flex-direction:column; text-align:center; }
  .whatsapp-cta__left  { flex-direction:column; text-align:center; }
  .contact-list        { flex-direction:column; gap:1rem; align-items:center; }
}

@media (max-width:480px) {
  html,body { font-size:15px; overflow-x:hidden; }
  .hero { padding:5rem 1rem 3rem; }
  .hero-pill { font-size:.68rem; padding:.3rem .65rem; }
  .hero-pill--sport { bottom:8%; }
  .cta  { flex-direction:column; }
  .btn  { width:100%; text-align:center; }
  .grid-3      { grid-template-columns:1fr; gap:1rem; }
  .devices-grid{ grid-template-columns:repeat(2,1fr); }
  .steps       { flex-direction:column; gap:1.5rem; }
  .tab-content.active {
    display:flex; flex-direction:column; align-items:center;
  }
  .pricing {
    display:flex; flex-direction:column; gap:1.2rem;
  }
  .p-card { padding:2rem 1.5rem; }
  .comparatif   { font-size:.84rem; }
  .comparatif th,
  .comparatif td{ padding:.6rem; }
  .sticky-bar   { flex-direction:column; gap:.6rem; padding:1rem; text-align:center; }
  .sticky-bar a { width:100%; }
  .whatsapp-float { bottom:80px; right:14px; width:48px; height:48px; font-size:1.3rem; }
  .footer nav  { flex-direction:column; gap:.5rem; }
  .movie-card  { width:130px; }
  .movie-card img { height:190px; }
}

@media (min-width:481px) and (max-width:768px) {
  .devices-grid { grid-template-columns:repeat(3,1fr); }
  .pricing { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}

/* Fix badge position above hero title */
.hero .badge-top {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem auto;
  text-align: center;
}

.hero .h1.shimmer,
.hero h1.shimmer {
  display: block;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero .lead,
.hero .seo-intro,
.hero .seo-intro--small {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}