/*
 * Stylesheet for IPTV Connect Pro Vitrine 2025-2026
 *
 * This design embraces a sleek dark mode aesthetic with vibrant accent
 * colors. It is responsive thanks to CSS grid and flexbox layouts. Variables
 * make theme customization easy.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Modern professional palette for 2025 */
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #3b82f6; /* Modern blue */
  --primary-hover: #2563eb;
  --secondary: #10b981; /* Fresh green accent */
  --secondary-hover: #059669;
  --text: #1e293b;
  --text-light: #475569;
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --radius: 12px;
  --radius-lg: 16px;
  --max-width: 1280px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { 
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

*, *::before, *::after {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}

a { 
  color: var(--primary); 
  text-decoration: none;
  transition: var(--transition);
}
a:hover { 
  color: var(--primary-hover);
}

.section {
  padding: 5rem 0;
}

.section:nth-child(even) {
  background-color: var(--bg-secondary);
}

.bg-light {
  background-color: var(--bg-secondary);
}

.container {
  width: 92%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (max-width: 768px) {
  .container {
    width: 95%;
    padding-inline: 0.75rem;
  }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px) saturate(180%);
  z-index: 100;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.header.scrolled {
  box-shadow: var(--shadow);
}

.header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text);
  transition: var(--transition);
}

.logo:hover {
  transform: scale(1.02);
  color: var(--primary);
}

/* Size the logo image when using an inline SVG */
.logo img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.logo .badge {
  background: linear-gradient(135deg, var(--primary), #ff877d);
  color: var(--bg);
  padding: .4rem .6rem;
  border-radius: var(--radius);
  font-weight: 900;
}

.nav {
  display: flex;
  gap: 2rem;
  font-size: 0.95rem;
  align-items: center;
}

.nav a {
  color: var(--text-light);
  font-weight: 600;
  position: relative;
  transition: var(--transition);
  padding: 0.5rem 0;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.3s ease;
}

.nav a:hover { 
  color: var(--primary);
}

.nav a:hover::after { 
  width: 100%;
}

/* Dropdown menu styles */
.nav .dropdown {
  position: relative;
}

.nav .dropdown > a::after {
  content: ' ▾';
  font-size: 0.7rem;
  margin-left: 0.2rem;
}

.nav .dropdown-content {
  /* Hide the dropdown by default. Positioned absolutely relative to the dropdown
     parent so it appears just below the trigger. Remove the vertical gap
     between the trigger and the panel (previously 0.3rem) to prevent the menu
     from vanishing when moving the pointer from the parent link to the submenu. */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem 1rem;
  min-width: 200px;
  z-index: 1000;
}

.nav .dropdown-content li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav .dropdown-content a {
  display: block;
  padding: 0.3rem 0;
  color: var(--text);
  white-space: nowrap;
}

.nav .dropdown:hover .dropdown-content {
  display: block;
}

/*
 * Footer styles
 *
 * The footer uses a responsive grid layout with four columns on large screens
 * and stacks the columns on smaller viewports. It contains short
 * descriptions, navigational links to key pages and a copyright line. All
 * colours inherit from the theme variables defined at the top of this file.
 */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.2);
}

.footer-col h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-col p {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.7;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  display: block;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.8;
  transition: var(--transition);
  padding: 0.25rem 0;
}

.footer-col ul li a:hover {
  color: #ffffff;
  padding-left: 0.5rem;
}

.copyright {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: #94a3b8;
}

/*
 * Mobile navigation
 *
 * On small screens, the primary navigation is hidden by default and can be
 * toggled by a menu button. The menu opens as a vertical list anchored to
 * the top right of the header. Dropdown submenus expand on tap instead of
 * requiring hover states. This improves usability on touch devices.
 */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 768px) {
  /* Show the menu toggle on small screens */
  .menu-toggle {
    display: block;
  }

  /* Hide the navigation menu by default on small screens */
  .nav {
    position: absolute;
    top: 100%;
    right: 1rem;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    flex-direction: column;
    gap: 0;
    display: none;
    width: max-content;
    min-width: 200px;
  }

  /* Show the menu when toggled open */
  .nav.open {
    display: flex;
  }

  /* Adjust link styles inside the mobile menu */
  .nav a {
    padding: 0.5rem 0;
    display: block;
    color: var(--text);
  }

  /* Override dropdown positioning inside the mobile menu */
  .nav .dropdown-content {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    display: none;
  }

  /* Disable hover behaviour on mobile: clicking toggles the submenu instead */
  .nav .dropdown:hover .dropdown-content {
    display: none;
  }

  /* Show submenus when the dropdown has the 'open' class */
  .nav .dropdown.open > .dropdown-content {
    display: block;
  }

  /* Change arrow indicator direction on mobile */
  .nav .dropdown > a::after {
    content: ' ▸';
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #ffffff;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  color: #ffffff;
}

.btn.secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn.secondary:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  padding-block: 6rem 4rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('img/hero-parallax.webp') no-repeat center/cover;
  background-attachment: fixed;
  opacity: 0.5;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(124, 58, 237, 0.45) 100%);
  z-index: 1;
}

.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  color: #ffffff;
  animation: fadeInUp 0.8s ease-out;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .tagline {
  color: #fbbf24;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  display: inline-block;
  background: rgba(251, 191, 36, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.hero h1 {
  font-size: 3.5rem;
  line-height: 1.15;
  font-weight: 900;
  margin: 0 0 1.5rem;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.hero h1 .accent { 
  color: #fbbf24;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.hero .cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero .btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  border-color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  padding: 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hero .btn:hover {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.hero .btn.secondary {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.hero .btn.secondary:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Section heading */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-inline: auto;
}

.section-header h2 {
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text);
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
}

.section-header .sub {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.7;
  margin-top: 1.5rem;
}

/* Features grid */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.feature {
  background: linear-gradient(135deg, var(--card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.feature:hover::before {
  transform: scaleX(1);
}

.feature:hover { 
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.feature img {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
}

.feature h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.feature p { 
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.7;
}

/* Products new section */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.product {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  overflow: hidden;
}

.product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.product h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.product .price {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

.product ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.product ul li {
  margin-bottom: 0.875rem;
  padding-left: 1.75rem;
  position: relative;
  color: var(--text-light);
  line-height: 1.6;
}

.product ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 700;
  font-size: 1.1rem;
}

.product .btn { 
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Offers section */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.offer {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.offer:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.offer h4 a {
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
}

.offer h4 a:hover {
  color: var(--primary);
  transform: translateY(-2px);
}

.offer.popular h4 a {
  color: var(--primary);
  font-weight: 800;
}

.offer.popular {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: var(--primary);
  border-width: 3px;
  transform: scale(1.05);
}

.offer.popular:hover {
  transform: scale(1.05) translateY(-6px);
}

.offer.popular::after {
  content: '⭐ Populaire';
  position: absolute;
  top: 1.5rem;
  right: -2rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  padding: 0.4rem 3rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  transform: rotate(45deg);
  box-shadow: var(--shadow);
}

.offer h3 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text);
}

.offer .price {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.offer .duration {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.offer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.offer ul li {
  margin-bottom: 0.875rem;
  padding-left: 1.75rem;
  position: relative;
  color: var(--text-light);
  line-height: 1.6;
}

.offer ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 700;
  font-size: 1.1rem;
}

.offer .btn { 
  width: 100%;
  margin-top: auto;
  justify-content: center;
}

/* Articles section */
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.article img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article:hover img {
  transform: scale(1.05);
}

.article-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.article-content h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}

.article-content p { 
  color: var(--text-light);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
  flex-grow: 1;
}

.article-content .btn { 
  margin-top: auto;
  align-self: flex-start;
}

/* Articles listing page */
.articles-listing {
  padding: 4rem 0 5rem;
  background: var(--bg);
}

.articles-listing .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.articles-intro {
  padding: 3rem 0;
  background: var(--bg-secondary);
}

.articles-intro h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.articles-intro p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

.articles-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.articles-tags a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  background: rgba(59, 130, 246, 0.08);
  transition: var(--transition);
}

.articles-tags a:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
}

.articles-section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.article-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.article-card h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.article-card p {
  color: var(--text-light);
  line-height: 1.7;
  margin: 0;
}

.article-card .read-more {
  font-weight: 600;
  color: var(--primary);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.article-card .read-more:hover {
  color: var(--primary-hover);
  transform: translateX(2px);
}

/* Related Articles section */
.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.related-article-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.related-article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.related-article-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}

.related-article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.related-article-card h3 a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.related-article-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.related-article-card .read-more {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  padding: 0.5rem;
  display: inline-block;
  transition: var(--transition);
}

.related-article-card .read-more:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* VOD section */
.vod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.vod-item {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
}

.vod-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.vod-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
}

.vod-item h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.vod-item p {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.7;
}

/* Steps / How section */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  counter-reset: step;
}

.step {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  transition: var(--transition);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -20px;
  left: 2rem;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  font-weight: 900;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.step h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
  margin-top: 1rem;
}

.step p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* Tutorial section */
.tutorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.tutorial h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.tutorial ol {
  list-style: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.tutorial ul { 
  list-style: disc;
  margin-left: 1.5rem;
}

.tutorial li { 
  margin-bottom: 0.875rem;
  color: var(--text-light);
  line-height: 1.7;
}

.tutorial .card { 
  background: linear-gradient(135deg, var(--card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.tutorial .badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--secondary), #059669);
  color: #ffffff;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}

/* FAQ */
.faq details {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.faq details:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.faq details[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.faq summary {
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  user-select: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: '+';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 1rem;
  background: var(--primary);
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-weight: 700;
  flex-shrink: 0;
}

.faq details[open] summary::before {
  content: '−';
  background: var(--secondary);
}

.faq p { 
  margin-top: 1rem;
  color: var(--text-light);
  line-height: 1.7;
  padding-left: 2.5rem;
}

/* Contact section */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.contact-info {
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 600px;
}

.contact-info h3 { 
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 700;
}

.contact-info p { 
  margin: 1rem 0;
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.7;
}

.contact-info .btn {
  margin-top: 1rem;
}
.contact-form {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.contact-form .form-group { margin-bottom: 1rem; }
.contact-form label { display: block; font-weight: 600; margin-bottom: .4rem; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--text);
  font-size: .95rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.contact-form button { margin-top: 1rem; width: 100%; }

/* Footer */
footer {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  padding: 3rem 0 0;
  color: #e2e8f0;
  border-top: 4px solid var(--primary);
}

/* ------------------------------------------------------------------ */
/*  Article pages                                                      */
/*  Styles specific to standalone article pages. These classes enable  */
/*  a comfortable reading experience with clear headings and spacing. */
/* ------------------------------------------------------------------ */
.article-header {
  padding-top: 120px;
  padding-bottom: 60px;
  text-align: center;
  background-color: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.article-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.article-header p {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.article-content {
  max-width: var(--max-width);
  margin: 60px auto;
  padding: 0 1rem;
  line-height: 1.8;
  overflow-x: hidden;
}
.article-content h2 {
  font-size: 1.8rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}
.article-content h3 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}
.article-content p {
  margin-bottom: 1.2rem;
  color: var(--text);
}
.article-content ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.article-content li {
  margin-bottom: 0.5rem;
}
.back-home {
  display: inline-block;
  margin-top: 40px;
  color: var(--primary);
  text-decoration: underline;
}
.article-cta {
  margin-top: 2rem;
  text-align: center;
}
.article-cta a {
  display: inline-block;
  margin: 0.25rem;
}

/* ------------------------------------------------------------------ */
/*  Product pages                                                     */
/*  Layout and components used on dedicated product detail pages.      */
/* ------------------------------------------------------------------ */
.product-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
  overflow: hidden;
}

.product-hero img {
  max-width: 320px;
  flex: 1 1 300px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.product-hero .info {
  flex: 1 1 400px;
  min-width: 0;
  overflow: hidden;
}

.product-hero .info h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

.product-hero .info .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
}

.product-hero .info p {
  margin-bottom: 1rem;
  color: var(--muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-hero .info ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.product-hero .info li {
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-details {
  max-width: var(--max-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
  overflow-x: hidden;
}

.product-details h2 {
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-details p {
  margin-bottom: 1rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.comparison {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-top: 2rem;
  overflow: hidden;
}

.comparison h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: var(--secondary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.comparison ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.comparison li {
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/*  Sports / leagues section                                           */
/*  Display the main football championships with icons.                */
/* ------------------------------------------------------------------ */
/* Grid of league cards */
/* League grid wrapper */
/* ------------------------------------------------------------ */
/* Sports / leagues section                                        */
/* Display four cards per row on large screens, three cards on     */
/* tablets and two cards per row on mobile.                        */
/* ------------------------------------------------------------ */

/* Base layout for leagues grid */
.leagues {
  display: grid;
  /* Four columns on desktop */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 100%;
  margin-inline: auto;
  justify-items: center;
}

/* On tablets (<= 900px), show three cards per row */
@media (max-width: 900px) {
  .leagues {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On mobile (<= 640px), show two cards per row */
@media (max-width: 640px) {
  .leagues {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual league card */
.league {
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  transition: var(--transition);
}

/* Hover effect to give life to the icons */
.league:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.league img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.league h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 700;
}

.league p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Additional styling for grouped leagues in the sports section */
.league-group {
  margin-bottom: 2rem;
}
.league-group h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--primary);
}

/* Text below the sports icons indicating there are more competitions */
.sports-more {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/*  Promo product landing pages                                       */
/* ------------------------------------------------------------------ */
.promo-hero .eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
  display: inline-block;
}

.promo-copy p {
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.promo-hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--text);
  padding: 6rem 0 3rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.promo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12), transparent 55%);
  mix-blend-mode: normal;
  pointer-events: none;
}

.promo-hero .container {
  position: relative;
  z-index: 1;
  max-width: 1080px;
}

.promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 3rem;
  align-items: stretch;
}

.promo-copy h1 {
  font-size: clamp(2.5rem, 3.5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: 900;
  color: var(--text);
}

.promo-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1.25rem;
  background: rgba(59, 130, 246, 0.12);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.promo-summary {
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 2.5rem;
  border: 1px solid rgba(226, 232, 240, 0.6);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.promo-summary figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.promo-price {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.promo-payment-note {
  font-size: 0.95rem;
  color: var(--muted);
}

.promo-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.promo-meta-item {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.promo-meta-item span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.promo-meta-item strong {
  font-size: 1.05rem;
  color: var(--text);
}

.promo-main {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
}

.promo-section {
  margin-bottom: 4rem;
  width: min(92%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

.promo-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 800;
}

.promo-section > p {
  color: var(--text-light);
  max-width: 820px;
  margin-bottom: 2rem;
}

.promo-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
}

.promo-card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: var(--transition);
}

.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.promo-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.promo-card p {
  color: var(--text-light);
  font-size: 0.98rem;
  line-height: 1.7;
}

.promo-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  align-items: start;
}

.promo-column {
  background: linear-gradient(135deg, rgba(248, 250, 252, 1), rgba(239, 246, 255, 0.7));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.6);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.promo-column h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary);
}

.promo-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.promo-checklist li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-light);
  line-height: 1.6;
}

.promo-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--secondary);
  font-weight: 800;
}

.promo-guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.promo-guide-steps li {
  list-style: none;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-guide-steps li strong {
  font-size: 1.05rem;
  color: var(--text);
}

.promo-guide-steps li span {
  color: var(--text-light);
  line-height: 1.6;
}

.promo-faq {
  display: grid;
  gap: 1rem;
}

.promo-faq details {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  transition: var(--transition);
}

.promo-faq details[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.promo-faq summary {
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--text);
  list-style: none;
}

.promo-faq summary::-webkit-details-marker {
  display: none;
}

.promo-faq summary::after {
  content: '+';
  float: right;
  font-weight: 800;
  color: var(--primary);
}

.promo-faq details[open] summary::after {
  content: '−';
  color: var(--secondary);
}

.promo-faq p {
  margin-top: 0.75rem;
  color: var(--text-light);
  line-height: 1.7;
}

.promo-other-offers {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.promo-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.promo-offer-card {
  background: #ffffff;
  border-radius: var(--radius);
  border: 1px solid rgba(226, 232, 240, 0.7);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.promo-offer-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.promo-offer-card .price-tag {
  font-weight: 800;
  color: var(--primary);
  font-size: 1.1rem;
}

.promo-offer-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  flex-grow: 1;
}

.promo-offer-card a {
  margin-top: auto;
  font-weight: 600;
  color: var(--primary);
}

.promo-secondary-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.promo-secondary-cta .btn {
  flex: 1 1 220px;
}

.promo-note {
  font-size: 0.9rem;
  color: var(--muted);
}

.promo-trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.promo-trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.promo-trust-item strong {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
}

.promo-trust-item span {
  font-size: 0.95rem;
  color: var(--text-light);
}

.promo-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.65), rgba(148, 163, 184, 0));
  margin: 3rem 0;
}

.promo-assurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.promo-assurance .assurance-card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.promo-assurance .assurance-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.promo-assurance .assurance-card p {
  color: var(--text-light);
  font-size: 0.95rem;
}

.promo-footer-cta {
  text-align: center;
  padding: 3rem 2rem 0;
}

.promo-footer-cta h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.promo-footer-cta p {
  color: var(--text-light);
  max-width: 720px;
  margin: 0 auto 2rem;
}

.promo-footer-cta .btn {
  padding-inline: 2.5rem;
}

.promo-footer-cta {
  width: min(92%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

.promo-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.promo-testimonial {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 130, 246, 0.12);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.promo-testimonial p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.75;
}

.promo-testimonial .author {
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.promo-testimonial .author::before {
  content: '★';
  color: #fbbf24;
  font-size: 1.1rem;
}

.promo-testimonial .author span {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
}

/* Media queries */
@media (max-width: 900px) {
  .tutorial { 
    grid-template-columns: 1fr;
  }
  .contact { 
    flex-direction: column;
    align-items: center;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .section-header h2 {
    font-size: 2.25rem;
  }
  .section {
    padding: 3.5rem 0;
  }
  .promo-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .promo-summary {
    order: -1;
  }
  .promo-secondary-cta .btn {
    flex: 1 1 100%;
  }
  .promo-trust-bar {
    padding: 1.25rem;
  }
  .product-hero {
    flex-direction: column;
  }
  .product-hero img {
    max-width: 100%;
  }
  .product-hero .info {
    width: 100%;
  }
  .product-hero .info h1 {
    font-size: 1.75rem;
  }
  .article-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .promo-hero {
    padding: 4rem 0 2.5rem;
  }
  .promo-summary {
    padding: 2rem;
  }
  .promo-highlights,
  .promo-guide-steps,
  .promo-offers-grid,
  .promo-assurance,
  .promo-testimonials {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 85vh;
    padding-block: 4rem 3rem;
  }
  .hero h1 { 
    font-size: 2rem;
  }
  .hero p {
    font-size: 1.1rem;
  }
  .hero .cta {
    flex-direction: column;
  }
  .hero .btn {
    width: 100%;
    justify-content: center;
  }
  .section-header h2 {
    font-size: 1.875rem;
  }
  .section {
    padding: 3rem 0;
  }
  .features,
  .products,
  .offers,
  .articles,
  .steps,
  .related-articles-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .offer.popular {
    transform: scale(1);
  }
  .offer.popular:hover {
    transform: translateY(-6px);
  }
  .header .inner { 
    justify-content: space-between;
    padding: 1rem 0;
  }
  .logo img {
    height: 40px;
  }
  .header .btn {
    display: none;
  }
  
  /* Product pages mobile fixes */
  .product-hero .info h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .product-hero .info .price {
    font-size: 2rem;
  }
  .article-header {
    padding-top: 100px;
    padding-bottom: 40px;
  }
  .article-header h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    padding: 0 1rem;
  }
  .article-header p {
    font-size: 0.95rem;
    padding: 0 1rem;
  }
  .product-details h2 {
    font-size: 1.5rem;
  }
  .comparison {
    padding: 1rem;
  }
  .comparison h3 {
    font-size: 1.2rem;
  }
}

/* ------------------------------------------------------------------ */
/*  VOD section                                                        */
/*  Display cards for Films, Séries et Replay/TV à la demande.        */
/* ------------------------------------------------------------------ */
.vod-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  justify-items: stretch;
}

.vod-card {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.vod-card img {
  width: 64px;
  height: 64px;
  /* Center icon horizontally within the card */
  display: block;
  margin: 0 auto 1rem;
}

.vod-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}

.vod-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

/* ---------------------------------------------------------------------- */
/*  Additional styles for new content
 *
 *  The comparison table used in the article "Top des offres IPTV" benefits
 *  from a structured layout. The following CSS ensures the table fits the
 *  existing UI/UX, with subtle borders, zebra striping and padding.
 */