/* ─────────────────────────────────────────────────────
   Reset & base
───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Pan-African palette */
  --pan-green:     #009739;
  --pan-yellow:    #fcd116;
  --pan-red:       #ce1126;

  --clr-bg:        #0a0a06;
  --clr-surface:   #131309;
  --clr-surface-2: #1a1a0e;
  --clr-border:    rgba(252,209,22,.1);
  --clr-text:      #f0ead6;
  --clr-muted:     #7a7560;
  --clr-muted-2:   #b0a882;

  --green-glow:    rgba(0,151,57,.3);
  --gold-glow:     rgba(252,209,22,.3);
  --red-glow:      rgba(206,17,38,.4);

  --whatsapp:      #25d366;
  --telegram:      #229ed9;

  --radius-xl:     20px;
  --radius-lg:     14px;
  --radius-pill:   50px;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

/* ─────────────────────────────────────────────────────
   Language toggle
───────────────────────────────────────────────────── */
.fr-only { display: none; }
html.lang-fr .fr-only { display: inline; }
html.lang-fr .en-only { display: none; }

.lang-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(10,10,6,.85);
  border: 1px solid rgba(252,209,22,.35);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  overflow: hidden;
  padding: 0;
  transition: border-color .2s;
}
.lang-toggle:hover { border-color: var(--pan-yellow); }

.lang-toggle .lang-opt {
  padding: 6px 12px;
  color: var(--clr-muted);
  transition: color .2s, background .2s;
}
.lang-toggle .lang-sep {
  color: rgba(252,209,22,.25);
  font-weight: 400;
  pointer-events: none;
}
.lang-toggle .lang-opt--active {
  color: #1a1200;
  background: var(--pan-yellow);
  border-radius: 18px;
}

body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

main { width: 100%; display: block; }

/* ─────────────────────────────────────────────────────
   Pan-African top stripe
───────────────────────────────────────────────────── */
body::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    var(--pan-green)  0%,   var(--pan-green)  33%,
    var(--pan-yellow) 33%,  var(--pan-yellow) 66%,
    var(--pan-red)    66%,  var(--pan-red)    100%);
}


/* ─────────────────────────────────────────────────────
   Hero
───────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px 36px;
  text-align: center;
  overflow: hidden;
}

/* Africa continent watermark */
.hero-continent {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 10 C80 8 60 18 50 30 C38 44 35 58 38 72 C30 80 25 92 28 106 C22 116 20 128 26 140 C30 152 38 162 46 170 C56 182 66 192 78 200 C88 208 98 210 108 206 C118 202 124 194 128 184 C136 174 140 162 142 150 C148 140 152 128 150 116 C154 106 156 94 152 84 C156 74 158 62 154 52 C150 40 142 30 132 22 C122 14 112 10 100 10Z' fill='%23009739' opacity='0.06'/%3E%3C/svg%3E") center 10px / 180px auto no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(252,209,22,.14) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 75%, rgba(206,17,38,.1) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 15% 75%, rgba(0,151,57,.1) 0%, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 5%,
    var(--pan-green) 20%,
    var(--pan-yellow) 50%,
    var(--pan-red) 80%,
    transparent 95%);
  opacity: .7;
}

.logo {
  position: relative;
  max-width: min(280px, 70vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 28px rgba(252,209,22,.35));
}

/* BUY NOW badge in hero */
.buy-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: .12em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--pan-red) 0%, #8b0d1a 100%);
  padding: 10px 40px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 36px var(--red-glow), 0 4px 20px rgba(0,0,0,.5);
  animation: buy-pulse 2.5s ease-in-out infinite;
  transition: transform .2s ease, filter .2s ease;
}

.buy-badge:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.12);
}

@keyframes buy-pulse {
  0%, 100% { box-shadow: 0 0 36px var(--red-glow), 0 4px 20px rgba(0,0,0,.5); }
  50%       { box-shadow: 0 0 52px rgba(206,17,38,.65), 0 4px 28px rgba(0,0,0,.5); }
}

.hero-sub {
  position: relative;
  font-size: clamp(.88rem, 3vw, 1.02rem);
  color: var(--clr-muted-2);
  letter-spacing: .02em;
  max-width: 420px;
  line-height: 1.7;
}

.hero-sub--stats {
  font-size: clamp(.82rem, 2.8vw, .95rem);
  color: var(--clr-muted);
}

.hero-sub__you {
  color: var(--pan-yellow);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
}

.hero-sub__num {
  color: var(--pan-yellow);
  font-weight: 800;
  font-size: 1.08em;
}

/* Flags marquee */
.flags-marquee {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.flags-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: flags-scroll 40s linear infinite;
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
}

.flags-track span { flex-shrink: 0; }

.flags-marquee:hover .flags-track { animation-play-state: paused; }

@keyframes flags-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────
   Divider
───────────────────────────────────────────────────── */
.divider {
  width: 75%;
  max-width: 560px;
  height: 1px;
  margin: 4px auto;
  background: linear-gradient(90deg,
    transparent 5%,
    var(--pan-green) 25%,
    var(--pan-yellow) 50%,
    var(--pan-red) 75%,
    transparent 95%);
  opacity: .2;
}

/* ─────────────────────────────────────────────────────
   Buttons
───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: clamp(.85rem, 3vw, .98rem);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(-1px) scale(.99);  }

.btn-svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-android {
  background: linear-gradient(135deg, var(--pan-green) 0%, #006b28 100%);
  color: #fff;
  box-shadow: 0 3px 16px var(--green-glow);
}
.btn-android:hover { box-shadow: 0 5px 24px rgba(0,151,57,.4); filter: brightness(1.08); }

.btn-firestick {
  background: linear-gradient(135deg, var(--pan-yellow) 0%, #c49010 100%);
  color: #1a1200;
  box-shadow: 0 3px 16px var(--gold-glow);
}
.btn-firestick:hover { box-shadow: 0 5px 24px rgba(252,209,22,.4); filter: brightness(1.08); }

.btn-buy {
  background: linear-gradient(135deg, var(--pan-red) 0%, #8b0d1a 100%);
  color: #fff;
  font-size: clamp(.88rem, 3vw, 1rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 28px;
  box-shadow: 0 3px 18px var(--red-glow);
}
.btn-buy:hover { box-shadow: 0 6px 28px rgba(206,17,38,.5); filter: brightness(1.1); }

.btn-buy--hero {
  font-size: clamp(.95rem, 3.5vw, 1.1rem);
  padding: 16px 40px;
}

/* ─────────────────────────────────────────────────────
   Install strip (Android + Firestick + Buy in one row)
───────────────────────────────────────────────────── */
.install-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
}

.install-strip--buy-only {
  padding: 4px 16px 4px;
}

.install-strip--inline {
  padding: 20px 16px 0;
}

/* ─────────────────────────────────────────────────────
   Video sections
───────────────────────────────────────────────────── */
.video-section {
  padding: 6px 14px;
  display: flex;
  justify-content: center;
}

.video-card {
  width: 100%;
  max-width: 760px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.video-card:hover {
  box-shadow: 0 12px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(252,209,22,.15);
  border-color: rgba(252,209,22,.18);
}

.video-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 10px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-muted-2);
  border-bottom: 1px solid var(--clr-border);
}

.label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.label-dot--live    { background: var(--pan-red);    box-shadow: 0 0 6px var(--pan-red);    animation: pulse 2s infinite; }
.label-dot--africa  { background: var(--pan-yellow); box-shadow: 0 0 6px var(--pan-yellow); }
.label-dot--french  { background: #0055a4;           box-shadow: 0 0 6px #0055a4; }
.label-dot--news    { background: var(--pan-green);  box-shadow: 0 0 6px var(--pan-green); }
.label-dot--music   { background: #9b59b6;           box-shadow: 0 0 6px #9b59b6; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────
   Final CTA
───────────────────────────────────────────────────── */
.final-cta {
  width: 100%;
  box-sizing: border-box;
  padding: 44px 20px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: linear-gradient(180deg, transparent 0%, var(--clr-surface) 30%, var(--clr-surface) 70%, transparent 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  margin-top: 16px;
}

.final-cta__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: .06em;
  color: #fff;
}

/* ─────────────────────────────────────────────────────
   Social section
───────────────────────────────────────────────────── */
.social-section {
  width: 100%;
  padding: 32px 20px 40px;
  text-align: center;
}

.social-section__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--clr-muted);
  margin-bottom: 14px;
}

.social-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.social-link:hover { transform: translateY(-2px); filter: brightness(1.1); }

.social-whatsapp { background: var(--whatsapp); color: #03200e; box-shadow: 0 3px 14px rgba(37,211,102,.25); }
.social-telegram  { background: var(--telegram);  color: #fff;    box-shadow: 0 3px 14px rgba(34,158,217,.25); }

.social-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────
   Footer
───────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 5%,
    var(--pan-green) 25%,
    var(--pan-yellow) 50%,
    var(--pan-red) 75%,
    transparent 95%) 1;
  color: var(--clr-muted);
  font-size: .78rem;
}

.footer-logo { max-width: 90px; opacity: .45; filter: grayscale(1); }