/* =====================================================================
   WC2026 — base theme, layout, hero, trust section
   World Cup 2026 vibe: pitch greens, trophy gold, stadium energy.
   Mobile-first; tablet/desktop scale up via min-width media queries.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Pitch / stadium */
  --pitch-abyss:  #04130c;
  --pitch-night:  #07251a;
  --pitch-dark:   #0a3a24;
  --pitch:        #0f9d4f;
  --pitch-bright: #1ed368;
  /* Trophy gold */
  --gold:         #f6c945;
  --gold-deep:    #d99a1e;
  --gold-soft:    #ffe7a3;
  /* Neutrals */
  --ink:          #051a10;
  --white:        #ffffff;
  --cream:        #eef5ef;
  --muted:        #9db8a8;
  --line:         rgba(255,255,255,.10);
  --card:         rgba(255,255,255,.045);
  --card-strong:  rgba(255,255,255,.07);
  /* CTA */
  --cta-from:     #ffe07a;
  --cta-to:       #f0a91e;

  --maxw: 1040px;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(0,0,0,.45);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background-color: var(--pitch-abyss);
}

/* Full-viewport background layer — reliable on mobile/tablet (avoids iOS fixed-bg bugs) */
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pitch-abyss);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-image:
    linear-gradient(180deg, rgba(3,16,10,.62) 0%, rgba(3,16,10,.34) 20%, rgba(3,16,10,.40) 62%, rgba(2,12,8,.78) 100%),
    url('../images/bg-wc2026-mob.jpg');
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--cream);
  background: transparent;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Small phones — keep stadium focal point in frame */
@media (max-width: 479px) and (orientation: portrait) {
  html::before { background-position: center 18%; }
}

/* Large phones */
@media (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
  html::before { background-position: center 22%; }
}

/* Phone landscape */
@media (max-width: 767px) and (orientation: landscape) {
  html::before { background-position: center center; }
}

/* Tablet — mobile asset fits portrait tablets better; always scroll-safe */
@media (min-width: 768px) and (max-width: 1023px) {
  html::before {
    background-image:
      linear-gradient(180deg, rgba(3,16,10,.60) 0%, rgba(3,16,10,.30) 20%, rgba(3,16,10,.38) 62%, rgba(2,12,8,.76) 100%),
      url('../images/bg-wc2026-mob.jpg');
    background-position: center center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  html::before { background-position: center 26%; }
}

/* Desktop — higher-res image */
@media (min-width: 1024px) {
  html::before {
    background-image:
      linear-gradient(180deg, rgba(3,16,10,.60) 0%, rgba(3,16,10,.30) 20%, rgba(3,16,10,.38) 62%, rgba(2,12,8,.76) 100%),
      url('../images/bg-wc2026.jpg');
    background-position: center center;
  }
}

h1, h2, h3, .brand-wordmark { font-family: "Outfit", "Inter", sans-serif; }

.main-container {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

.hl { color: var(--gold); }

/* ===================== HERO (compact) ===================== */
.hero {
  margin: 2px 0 14px;
  padding: 0 4px;
  text-align: left;
}
.hero-headline {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
}
.hero-meta {
  margin: 4px 0 0;
  font-size: .78rem;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ===================== OFFERS ===================== */
.offers-wrap { padding: 0 0 6px; }
.offers-foot-note {
  max-width: 760px; margin: 22px auto 6px; padding: 0 6px;
  font-size: .72rem; line-height: 1.5; color: var(--muted); text-align: center;
}

/* ===================== TRUST SECTION ===================== */
.trust-section { padding: 34px 0 14px; }
.section-title { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 22px; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.trust-card {
  padding: 22px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
  text-align: center; transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.trust-card:hover { transform: translateY(-4px); border-color: rgba(246,201,69,.4); background: var(--card-strong); }
.trust-ico { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.trust-card h3 { font-family: "Outfit", sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--white); margin-bottom: 7px; }
.trust-card p { font-size: .85rem; line-height: 1.45; color: var(--muted); }

/* back-to-top */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800;
  color: #04130c; background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===================== TABLET ===================== */
@media (min-width: 700px) {
  .hero-headline { font-size: 1.35rem; }
  .section-title { font-size: 1.8rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ===================== DESKTOP ===================== */
@media (min-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}