/* ============================================================
   LoyalVale Inc. — worldcupvisa.ca
   FULL REDESIGN v3 — Stadium Energy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ---- TOKENS ---- */
:root {
  --red:        #D9122E;
  --red-hot:    #F01535;
  --red-deep:   #8B0D1F;
  --gold:       #F0C040;
  --gold-dim:   #C9A030;
  --trust:      #38B2D8;
  --urgency:    #F08030;
  --premium:    #F0C040;
  --success:    #38C87A;

  --bg:         #050709;
  --s0:         #080C14;
  --s1:         #0D1320;
  --s2:         #12192A;
  --s3:         #172030;

  --border:     rgba(255,255,255,0.07);
  --border-hi:  rgba(255,255,255,0.14);
  --border-g:   rgba(240,192,64,0.28);
  --border-r:   rgba(217,18,46,0.35);

  --ink:        #EDE8E0;
  --ink2:       #B8B2AA;
  --ink3:       #706A62;
  --ink4:       #48443E;

  --glow-r:   0 0 40px rgba(217,18,46,0.4), 0 0 80px rgba(217,18,46,0.15);
  --glow-g:   0 0 30px rgba(240,192,64,0.3);
  --glow-t:   0 0 20px rgba(56,178,216,0.3);
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }
::selection { background:var(--red); color:#fff }
img { display:block }

/* ============================================================
   NAV
   ============================================================ */
nav {
  position:sticky; top:0; z-index:1000;
  height:62px;
  background:rgba(5,7,9,0.9);
  backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid var(--border);
}
/* Red stripe top */
nav::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--red-hot) 20%,
    var(--gold) 50%,
    var(--red-hot) 80%,
    transparent 100%
  );
  background-size:300% 100%;
  animation:navglow 5s linear infinite;
}
@keyframes navglow { 0%{background-position:0% 0} 100%{background-position:300% 0} }

.nav-inner {
  max-width:1360px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
}
.nav-logo {
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer; padding:0;
}
.logo-maple { font-size:20px; filter:drop-shadow(0 0 6px rgba(217,18,46,0.6)) }
.logo-text {
  font-family:'Bebas Neue', sans-serif; font-size:22px;
  letter-spacing:3px; color:var(--ink);
}
.logo-accent { color:var(--red-hot) }

.nav-tabs { display:flex; align-items:center; gap:2px }
.nav-tab {
  padding:7px 13px; font-size:11px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
  background:none; border:none; color:var(--ink3);
  cursor:pointer; border-radius:6px;
  transition:color .18s, background .18s;
  position:relative;
}
.nav-tab:hover { color:var(--ink) }
.nav-tab.active { color:var(--ink); background:rgba(255,255,255,0.07) }
/* Gold underline on active */
.nav-tab.active::after {
  content:'';
  position:absolute; bottom:-1px; left:12px; right:12px; height:2px;
  background:var(--gold); border-radius:1px;
}
.nav-tab.accent {
  background:var(--red);
  color:#fff !important;
  box-shadow:0 0 16px rgba(217,18,46,0.4);
  border-radius:6px;
}
.nav-tab.accent:hover { background:var(--red-hot); box-shadow:var(--glow-r) }

/* Hamburger */
.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:1px solid var(--border);
  padding:9px 10px; border-radius:8px; cursor:pointer;
  transition:border-color .2s;
}
.mobile-toggle:hover { border-color:var(--border-hi) }
.mobile-toggle span {
  display:block; width:18px; height:1.5px;
  background:var(--ink); border-radius:2px;
}
.mobile-nav {
  display:none; position:fixed; top:62px; left:0; right:0; bottom:0;
  background:rgba(5,7,9,0.98); backdrop-filter:blur(24px);
  z-index:999; padding:20px; flex-direction:column; gap:6px;
  overflow-y:auto;
}
.mobile-nav.open { display:flex }
.mobile-nav .nav-tab {
  text-align:left; font-size:15px; padding:15px 18px;
  border-radius:10px; width:100%; color:var(--ink2);
  border:1px solid var(--border);
}
.mobile-nav .nav-tab.accent { border-color:var(--border-r); color:#fff !important }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.page { display:none; animation:fadeUp .45s cubic-bezier(.22,.61,.36,1) }
.page.active { display:block }
@keyframes fadeUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse     { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.35} }
@keyframes ticker    { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes urgpulse  { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes floaty    { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-18px) rotate(3deg)} }
@keyframes spinSlow  { to{transform:rotate(360deg)} }
@keyframes slideUp   { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes scanIn    { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }

/* ============================================================
   SHARED
   ============================================================ */
.container { max-width:1360px; margin:0 auto; padding:64px 24px 100px }
.section-wrap { max-width:1360px; margin:0 auto; padding:64px 24px }
.section-header { margin-bottom:32px }
.section-header.centered { text-align:center }

.section-label {
  font-size:10px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.section-label::before { content:''; width:28px; height:2px; background:var(--gold); flex-shrink:0 }
.centered-label { justify-content:center }
.centered-label::before { display:none }

.section-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(38px,5vw,66px);
  line-height:.94; letter-spacing:1px;
}
.section-sub { font-size:15px; color:var(--ink2); line-height:1.75; max-width:560px; margin-top:12px }
.sub-heading { font-family:'Bebas Neue', sans-serif; font-size:26px; margin:40px 0 18px; letter-spacing:1px }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px; font-size:13px; font-weight:700; letter-spacing:.3px;
  border-radius:8px; border:none; cursor:pointer; font-family:inherit;
  transition:all .25s cubic-bezier(.22,.61,.36,1);
}
.btn-fire {
  background:linear-gradient(135deg, var(--red-hot), var(--red));
  color:#fff; box-shadow:0 4px 18px rgba(217,18,46,.4);
}
.btn-fire:hover { transform:translateY(-2px); box-shadow:var(--glow-r) }
.btn-ghost {
  background:transparent; color:var(--gold);
  border:1.5px solid rgba(240,192,64,.35);
}
.btn-ghost:hover { border-color:var(--gold); background:rgba(240,192,64,.08); transform:translateY(-2px) }
.btn-affiliate {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; font-size:12px; font-weight:700;
  border-radius:8px; border:1.5px solid var(--border-g);
  background:transparent; color:var(--gold);
  cursor:pointer; font-family:inherit;
  transition:all .22s; text-decoration:none;
}
.btn-affiliate:hover { background:rgba(240,192,64,.1); border-color:var(--gold); box-shadow:var(--glow-g); transform:translateY(-2px) }
.aff-note { font-size:9px; color:var(--ink4); margin-top:8px }

/* Cards */
.card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:14px; padding:26px 22px;
  transition:border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.card:hover { border-color:var(--border-hi); background:var(--s2); transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.5) }
.card-h { border-left:3px solid var(--gold) }

.info-callout {
  background:rgba(217,18,46,.05);
  border:1px solid rgba(217,18,46,.2);
  border-left:3px solid var(--red);
  border-radius:12px; padding:20px 24px; margin:20px 0;
}
.info-callout.gold { background:rgba(240,192,64,.05); border-color:rgba(240,192,64,.2); border-left-color:var(--gold) }
.info-callout.trust { background:rgba(56,178,216,.05); border-color:rgba(56,178,216,.2); border-left-color:var(--trust) }
.info-callout h4 { font-family:'Bebas Neue',sans-serif; font-size:20px; margin-bottom:10px; letter-spacing:.5px }
.info-callout p, .info-callout li { font-size:14px; color:var(--ink2); line-height:1.7 }
.info-callout ul { list-style:none; padding:0 }
.info-callout li { margin-bottom:5px }
.info-callout li::before { content:'→ '; color:var(--gold) }

.site-disclaimer { text-align:center; margin-top:28px; padding-top:24px; border-top:1px solid var(--border) }
.site-disclaimer p { font-size:11px; color:rgba(237,232,224,.28); line-height:1.7; margin-bottom:6px }
.site-disclaimer a { color:rgba(237,232,224,.4); text-decoration:underline }
.site-disclaimer strong { color:rgba(237,232,224,.45) }

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero {
  position:relative; min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
}

/* Pitch pattern */
.hero-pitch {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 90% at 30% 50%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 50%, black 0%, transparent 70%);
}

/* Color atmosphere */
.hero-atmosphere {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 70% at 5% 50%,  rgba(217,18,46,.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 95% 10%,  rgba(240,192,64,.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 70% 100%, rgba(217,18,46,.10) 0%, transparent 50%);
}

/* Giant decorative "2026" */
.hero-deco-year {
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(300px, 42vw, 580px);
  line-height:1; letter-spacing:-10px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  user-select:none; pointer-events:none;
  white-space:nowrap;
}

/* Floating stadium circle */
.hero-circle {
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  width:min(55vw, 680px); height:min(55vw, 680px);
  border-radius:50%;
  border:1px solid rgba(217,18,46,.12);
  box-shadow:
    0 0 0 40px rgba(217,18,46,.025),
    0 0 0 80px rgba(217,18,46,.015),
    inset 0 0 160px rgba(217,18,46,.08);
  animation:floaty 10s ease-in-out infinite;
  pointer-events:none;
}
.hero-circle::before {
  content:'';
  position:absolute; inset:20%;
  border-radius:50%;
  border:1px solid rgba(240,192,64,.08);
}
.hero-circle::after {
  content:'⚽';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(60px,8vw,100px);
  opacity:.12;
  animation:spinSlow 30s linear infinite;
}

.hero-content {
  position:relative; z-index:2;
  max-width:1360px; width:100%; margin:0 auto;
  padding:100px 24px 80px;
}

/* Eyebrow */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(217,18,46,.09); border:1px solid rgba(217,18,46,.22);
  padding:8px 20px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--red-hot);
  margin-bottom:36px;
}
.hero-eyebrow-divider { opacity:.35 }
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--red-hot);
  box-shadow:0 0 8px var(--red-hot);
  animation:pulse 2s ease-in-out infinite;
  flex-shrink:0;
}

/* Headline — staggered lines */
.hero-h1 {
  display:flex; flex-direction:column; gap:0;
  margin-bottom:28px;
}
.h1-line1 {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(22px, 3vw, 38px);
  letter-spacing:8px; color:var(--ink3);
  display:block; line-height:1.2;
}
.h1-line2 {
  display:block; line-height:.88;
}
.h1-canada {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(72px, 11vw, 150px);
  letter-spacing:4px;
  background:linear-gradient(135deg, var(--red-hot) 0%, #FF4060 50%, var(--red) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 30px rgba(217,18,46,.5));
  display:inline-block;
}
.h1-line3 {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(36px, 5.5vw, 76px);
  letter-spacing:6px; color:var(--ink); display:block; line-height:1.1;
}
.h1-gold {
  color:var(--gold);
  filter:drop-shadow(0 0 12px rgba(240,192,64,.5));
}

.hero-sub {
  font-size:16px; line-height:1.8; color:var(--ink2);
  max-width:460px; margin-bottom:40px;
}
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap }

/* Scoreboard countdown */
.scoreboard {
  display:inline-flex; align-items:center; gap:20px;
  margin-top:36px;
  background:var(--s0);
  border:1px solid var(--border-r);
  border-radius:10px;
  padding:12px 22px;
  box-shadow:inset 0 0 30px rgba(217,18,46,.05), 0 0 0 1px rgba(217,18,46,.08);
}
.scoreboard-label {
  font-size:9px; font-weight:700; letter-spacing:3px;
  color:var(--urgency); text-transform:uppercase; white-space:nowrap;
}
.scoreboard-digits { display:flex; align-items:center; gap:4px }
.digit-block { text-align:center }
.digit-val {
  font-family:'Bebas Neue', sans-serif; font-size:34px; line-height:1;
  color:var(--ink); display:block;
  background:var(--s1); border-radius:5px; padding:4px 10px; min-width:54px;
  border:1px solid var(--border); letter-spacing:2px;
  text-shadow:0 0 20px rgba(240,192,64,.2);
}
.digit-lbl { font-size:7px; letter-spacing:2px; color:var(--ink4); text-transform:uppercase; margin-top:4px }
.digit-sep { font-family:'Bebas Neue', sans-serif; font-size:28px; color:var(--red); padding-bottom:12px; opacity:.7 }

/* Diagonal cut at bottom of hero */
.hero-cut {
  position:absolute; bottom:-1px; left:0; right:0;
  height:80px;
  background:var(--bg);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background:var(--red); overflow:hidden;
  padding:10px 0; position:relative; z-index:1;
}
.ticker-track {
  display:flex; align-items:center; gap:0;
  animation:ticker 28s linear infinite; width:max-content;
  white-space:nowrap;
}
.ticker-item {
  font-family:'Bebas Neue', sans-serif; font-size:13px;
  letter-spacing:3.5px; color:#fff; padding:0 28px;
}
.ticker-dot { color:rgba(255,255,255,.5); font-size:10px }

/* ============================================================
   HOME CARDS
   ============================================================ */
.home-cards-wrap { background:var(--s0); padding:0 24px }
.home-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  max-width:1360px; margin:0 auto;
  background:var(--border);
}
.home-card {
  background:var(--s0); padding:48px 36px;
  cursor:pointer; transition:background .3s;
  position:relative; overflow:hidden;
}
.home-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.hc-visa::before   { background:var(--gold) }
.hc-cities::before { background:var(--trust) }
.hc-shop::before   { background:var(--red-hot) }
.home-card:hover { background:var(--s1) }
.home-card:hover::before { transform:scaleX(1) }
.hc-num {
  font-family:'Bebas Neue', sans-serif; font-size:72px;
  color:rgba(255,255,255,.04); line-height:1; margin-bottom:-12px;
  user-select:none;
}
.hc-icon { font-size:32px; margin-bottom:16px; display:block }
.home-card h3 { font-family:'Bebas Neue', sans-serif; font-size:28px; letter-spacing:1px; margin-bottom:10px }
.home-card p { font-size:14px; line-height:1.7; color:var(--ink2) }
.hc-arrow {
  display:block; font-size:22px; color:var(--gold);
  margin-top:24px; transition:transform .25s;
}
.home-card:hover .hc-arrow { transform:translateX(6px) }

/* ============================================================
   BRACKET SPLASH (full bleed red)
   ============================================================ */
.bracket-splash {
  background:var(--red);
  position:relative; overflow:hidden;
  cursor:pointer;
  transition:filter .3s;
}
.bracket-splash:hover { filter:brightness(1.08) }
.bracket-splash::before {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    -45deg, transparent, transparent 60px,
    rgba(255,255,255,.04) 60px, rgba(255,255,255,.04) 61px
  );
}
.bracket-splash-inner {
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto;
  padding:40px 36px;
  display:flex; align-items:center; gap:32px;
}
.bracket-splash-left { flex:1 }
.bs-eyebrow { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:6px }
.bs-title { font-family:'Bebas Neue', sans-serif; font-size:clamp(36px, 5vw, 64px); line-height:.92; color:#fff; letter-spacing:2px }
.bracket-splash-left p { font-size:14px; color:rgba(255,255,255,.75); line-height:1.65; margin-top:10px; max-width:400px }
.bracket-splash-trophy { font-size:72px; animation:floaty 4s ease-in-out infinite; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)) }
.bracket-splash-cta {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.3);
  color:#fff; font-weight:700; font-size:14px;
  padding:16px 28px; border-radius:8px;
  transition:all .25s;
  white-space:nowrap;
}
.bracket-splash:hover .bracket-splash-cta { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5) }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.social-proof-strip { background:var(--s0); padding:0 24px }
.sp-inner {
  max-width:1360px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:14px 0; font-size:13px; color:var(--ink2);
}
.sp-dot {
  width:7px; height:7px; min-width:7px;
  background:var(--success); border-radius:50%;
  box-shadow:0 0 8px var(--success);
  animation:pulse 2s infinite;
}

/* ============================================================
   BLOG GRID
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.blog-card {
  display:flex; align-items:center; gap:16px;
  background:var(--s1); border:1px solid var(--border);
  border-radius:12px; padding:18px 22px;
  color:var(--ink); font-size:14px; font-weight:500;
  transition:all .22s;
}
.blog-card:hover { border-color:var(--border-g); background:var(--s2); transform:translateX(5px) }
.blog-card-icon { font-size:20px; flex-shrink:0 }
.blog-card-text { flex:1 }
.blog-card-arrow { color:var(--gold); font-size:20px; flex-shrink:0 }

/* ============================================================
   AFFILIATE SECTION (dark tinted bg)
   ============================================================ */
.aff-section { background:var(--s0) }
.aff-section-inner { max-width:1360px; margin:0 auto; padding:72px 24px }
.aff-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.aff-card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:14px; padding:28px 18px; text-align:center;
  transition:all .3s cubic-bezier(.22,.61,.36,1);
  text-decoration:none; color:var(--ink); display:block;
}
.aff-card:hover {
  border-color:var(--border-g); transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.5), var(--glow-g);
  background:var(--s2);
}
.aff-icon { font-size:32px; margin-bottom:14px }
.aff-title { font-family:'Bebas Neue', sans-serif; font-size:18px; margin-bottom:8px; letter-spacing:.5px }
.aff-desc  { font-size:12px; color:var(--ink2); line-height:1.6; margin-bottom:18px }
.aff-btn {
  display:inline-block; font-size:10px; font-weight:700; color:var(--gold);
  padding:7px 14px; border:1px solid var(--border-g); border-radius:6px;
  transition:all .2s;
}
.aff-card:hover .aff-btn { background:rgba(240,192,64,.1) }

/* ============================================================
   PAGE HERO BANNERS
   ============================================================ */
.page-hero {
  padding:72px 24px 60px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--s0) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    -55deg, transparent, transparent 100px,
    rgba(255,255,255,.012) 100px, rgba(255,255,255,.012) 101px
  );
}
.page-hero-visa::after    { content:'🛂'; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:120px; opacity:.08 }
.page-hero-cities::after  { content:'🏟️'; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:120px; opacity:.08 }
.page-hero-countries::after { content:'🌍'; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:120px; opacity:.08 }
.page-hero-travel::after  { content:'✈️'; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:120px; opacity:.08 }
.page-hero-bracket::after { content:'🏆'; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:120px; opacity:.08 }
.page-hero-content { max-width:1360px; margin:0 auto; position:relative; z-index:1 }

/* ============================================================
   CITY CARDS
   ============================================================ */
.city-card { position:relative; overflow:hidden }
.city-card-label {
  font-family:'Bebas Neue', sans-serif; font-size:34px;
  letter-spacing:1px; margin-bottom:8px;
}
.city-toronto { border-top:3px solid var(--trust) }
.city-vancouver { border-top:3px solid var(--gold) }

/* ============================================================
   COUNTRY PAGE
   ============================================================ */
.country-section-label {
  font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:10px 18px; border-radius:8px;
  display:inline-block; margin-bottom:18px;
}
.country-section-label.eta  { background:rgba(240,192,64,.1); color:var(--gold); border:1px solid rgba(240,192,64,.2) }
.country-section-label.trv  { background:rgba(217,18,46,.1); color:var(--red-hot); border:1px solid rgba(217,18,46,.2) }
.country-section-label.free { background:rgba(56,200,122,.1); color:var(--success); border:1px solid rgba(56,200,122,.2) }

.country-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.country-item {
  background:var(--s1); border:1px solid var(--border);
  border-radius:12px; padding:20px 14px; text-align:center;
  transition:all .22s;
}
.country-item:hover { border-color:var(--border-hi); background:var(--s2); transform:translateY(-3px) }
.country-flag { margin-bottom:12px }
.country-flag img { width:60px; height:43px; border-radius:7px; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,.5); margin:0 auto }
.country-name { font-size:13px; font-weight:600; margin-bottom:5px }
.country-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px }
.country-type.eta  { color:var(--gold) }
.country-type.trv  { color:var(--red-hot) }
.country-type.free { color:var(--success) }

/* ============================================================
   TRAVEL PAGE
   ============================================================ */
.travel-tabs { display:flex; gap:10px; margin:32px 0 40px; flex-wrap:wrap }
.travel-tab {
  padding:11px 22px; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:rgba(255,255,255,.02);
  border:1px solid var(--border); border-radius:8px;
  color:var(--ink3); cursor:pointer; font-family:inherit; transition:all .22s;
}
.travel-tab:hover { color:var(--ink); border-color:var(--border-hi) }
.travel-tab.active {
  background:rgba(240,192,64,.1); border-color:var(--gold);
  color:var(--gold); box-shadow:0 0 16px rgba(240,192,64,.1);
}
.travel-section { display:none; animation:fadeUp .4s ease }
.travel-section.active { display:block }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin-top:24px }
.product-card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:14px; padding:24px 20px;
  transition:all .28s; display:flex; flex-direction:column;
}
.product-card:hover { border-color:var(--border-g); background:var(--s2); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4) }
.p-icon  { font-size:34px; margin-bottom:16px }
.p-name  { font-family:'Bebas Neue', sans-serif; font-size:22px; margin-bottom:8px; letter-spacing:.5px }
.p-desc  { font-size:12px; color:var(--ink2); line-height:1.65; margin-bottom:16px; flex:1 }
.p-price { font-family:'Bebas Neue', sans-serif; font-size:20px; color:var(--gold); margin-bottom:16px }

.calc-wrapper { background:var(--s1); border:1px solid var(--border); border-radius:16px; padding:32px 28px; margin:24px 0 }
.calc-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.calc-input { padding:14px 18px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; color:var(--ink); font-size:20px; font-family:'Bebas Neue', sans-serif; width:155px; outline:none }
.calc-input:focus { border-color:var(--gold) }
.calc-select { padding:13px 16px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; color:var(--ink); font-size:14px; font-family:inherit; outline:none }
.calc-select option { background:var(--s1) }
.calc-result { font-family:'Bebas Neue', sans-serif; font-size:42px; color:var(--gold); margin-top:18px }
.calc-rate { font-size:11px; color:var(--ink4); margin-top:5px }

/* Scarcity */
.scarcity-bar { margin-top:16px }
.scarcity-label { font-size:11px; font-weight:600; color:var(--urgency); margin-bottom:8px; display:flex; align-items:center; gap:8px }
.scarcity-label .dot { width:6px; height:6px; background:var(--urgency); border-radius:50%; animation:urgpulse 1.5s infinite; box-shadow:0 0 6px var(--urgency) }
.scarcity-track { height:5px; background:rgba(255,255,255,.05); border-radius:3px; overflow:hidden }
.scarcity-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--success), var(--urgency), var(--red)) }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.shop-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(217,18,46,.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(240,192,64,.09) 0%, transparent 50%);
}
.shop-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
}

/* Giant CANADA text behind form */
.shop-deco-text {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(100px, 22vw, 280px);
  letter-spacing:8px;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04);
  user-select:none; pointer-events:none;
  white-space:nowrap;
}

.shop-content { position:relative; z-index:2; max-width:660px; padding:60px 24px; text-align:center }
.shop-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(240,192,64,.1); border:1px solid var(--border-g);
  padding:8px 22px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:32px;
}
.shop-h1 {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(50px, 9vw, 96px);
  line-height:.88; letter-spacing:2px; margin-bottom:20px;
}
.shop-red { color:var(--red-hot); filter:drop-shadow(0 0 20px rgba(217,18,46,.5)) }
.shop-outline {
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}

.shop-form {
  background:rgba(5,7,9,.6); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:18px; padding:36px 32px; text-align:left;
}
.shop-input { width:100%; padding:16px 20px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; color:var(--ink); font-size:15px; outline:none; margin-bottom:14px; font-family:inherit; transition:border-color .2s }
.shop-input:focus { border-color:var(--red-hot) }
.shop-input::placeholder { color:var(--ink4) }
.shop-row { display:flex; gap:10px; margin-bottom:20px }
.shop-select { flex:1; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; color:var(--ink4); font-size:14px; outline:none; font-family:inherit }
.shop-select option { background:var(--s1); color:var(--ink) }
.shop-submit {
  width:100%; padding:18px;
  background:linear-gradient(135deg, var(--red-hot), var(--red));
  color:#fff; border:none; border-radius:10px;
  font-size:16px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 24px rgba(217,18,46,.45); transition:all .3s;
  letter-spacing:.3px;
}
.shop-submit:hover { transform:translateY(-2px); box-shadow:var(--glow-r) }
.shop-success { padding:40px; background:rgba(56,200,122,.05); border:1px solid rgba(56,200,122,.2); border-radius:18px }
.shop-success h3 { font-family:'Bebas Neue', sans-serif; font-size:34px; color:var(--success); margin:14px 0 10px; letter-spacing:1px }
.social-proof { display:flex; justify-content:center; gap:40px; margin-top:40px }
.social-proof .num { font-family:'Bebas Neue', sans-serif; font-size:30px; color:var(--ink) }
.social-proof .lbl { font-size:10px; color:var(--ink4); text-transform:uppercase; letter-spacing:2px; margin-top:3px }

.preview-strip { background:var(--s0); border-top:1px solid var(--border); padding:72px 24px }
.preview-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:1360px; margin:0 auto }
.preview-card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; position:relative; transition:all .3s;
}
.preview-card:hover { border-color:var(--border-g); transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.5) }
.preview-img { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:42px; background:radial-gradient(circle at 50% 60%, rgba(217,18,46,.07), transparent) }
.preview-info { padding:14px 16px }
.preview-name { font-size:12px; font-weight:600; margin-bottom:4px }
.preview-price { font-family:'Bebas Neue', sans-serif; font-size:18px; color:var(--gold) }
.preview-overlay { position:absolute; inset:0; background:rgba(5,7,9,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center }
.preview-overlay span { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); background:rgba(0,0,0,.75); padding:7px 16px; border-radius:4px; border:1px solid var(--border-g) }

.benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:1360px; margin:0 auto; background:var(--border) }
.benefit {
  padding:36px 28px; background:var(--s1); text-align:center;
  transition:background .25s;
}
.benefit:hover { background:var(--s2) }
.benefit .icon { font-size:32px; margin-bottom:16px }
.benefit h4 { font-family:'Bebas Neue', sans-serif; font-size:20px; margin-bottom:8px; letter-spacing:.5px }
.benefit p { font-size:13px; line-height:1.6; color:var(--ink2) }

/* ============================================================
   BRACKET PAGE
   ============================================================ */
.bracket-actions { display:flex; gap:12px; margin-bottom:24px }
.bracket-trophy { text-align:center; padding:20px 0 32px }
.bracket-trophy-icon { font-size:64px; display:block; animation:floaty 5s ease-in-out infinite }
.bracket-trophy-label { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-top:12px }
.bracket-trophy-team { font-family:'Bebas Neue', sans-serif; font-size:42px; margin-top:8px; letter-spacing:1px }
.bracket-halves { display:flex; align-items:stretch; min-height:660px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:16px }
.bracket-half { display:flex; flex:1 }
.bracket-round-col { display:flex; flex-direction:column; justify-content:space-around; position:relative; overflow:visible; min-width:155px }
.bracket-round-col+.bracket-round-col { margin-left:50px }
.bracket-round-col-label { position:absolute; top:-28px; left:0; right:0; text-align:center; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink4) }
.bracket-final-col { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:175px; margin:0 25px; position:relative }
.br-pair { flex:1; display:flex; flex-direction:column; justify-content:space-around; position:relative; overflow:visible }
.bracket-half.left .br-pair::after { content:''; position:absolute; right:-25px; top:25%; height:50%; width:25px; border:2px solid rgba(255,255,255,.06); border-left:none; border-radius:0 6px 6px 0 }
.bracket-half.left .br-pair::before { content:''; position:absolute; right:-50px; top:50%; width:25px; height:0; border-top:2px solid rgba(255,255,255,.06) }
.bracket-half.left>.bracket-round-col:last-child>.bm { position:relative }
.bracket-half.left>.bracket-round-col:last-child>.bm::after { content:''; position:absolute; right:-25px; top:50%; width:25px; height:0; border-top:2px solid rgba(255,255,255,.06) }
.bracket-half.right .br-pair::after { content:''; position:absolute; left:-25px; right:auto; top:25%; height:50%; width:25px; border:2px solid rgba(255,255,255,.06); border-right:none; border-radius:6px 0 0 6px }
.bracket-half.right .br-pair::before { content:''; position:absolute; left:-50px; right:auto; top:50%; width:25px; height:0; border-top:2px solid rgba(255,255,255,.06) }
.bracket-half.right>.bracket-round-col:first-child>.bm { position:relative }
.bracket-half.right>.bracket-round-col:first-child>.bm::after { content:''; position:absolute; left:-25px; right:auto; top:50%; width:25px; height:0; border-top:2px solid rgba(255,255,255,.06) }
.bm { background:var(--s1); border:1px solid var(--border); border-radius:8px; overflow:hidden; position:relative }
.bm.final-match { border-color:var(--border-g); box-shadow:0 0 30px rgba(240,192,64,.08) }
.bm-team { display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; border-left:3px solid transparent }
.bm-team+.bm-team { border-top:1px solid var(--border) }
.bm-team img { border-radius:2px; flex-shrink:0 }
.bm-team:hover:not(.empty) { background:rgba(240,192,64,.06) }
.bm-team.won { background:rgba(56,200,122,.1); border-left-color:var(--success); font-weight:700 }
.bm-team.empty { color:var(--ink4); font-style:italic; cursor:default; padding:12px; font-size:11px }
.bm-sel { width:100%; padding:9px 10px; background:rgba(255,255,255,.02); border:none; border-bottom:1px solid var(--border); color:var(--ink); font-size:12px; font-family:inherit; outline:none; cursor:pointer }
.bm-sel:last-of-type { border-bottom:none }
.bm-sel:focus { background:rgba(240,192,64,.04) }
.bm-sel option { background:var(--s1); color:var(--ink) }
.bm-pick { display:flex; border-top:1px solid var(--border) }
.bm-pick-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:6px 4px; background:none; border:none; border-right:1px solid var(--border); color:var(--ink4); font-size:10px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .15s; white-space:nowrap; overflow:hidden }
.bm-pick-btn:last-child { border-right:none }
.bm-pick-btn:hover { background:rgba(240,192,64,.06); color:var(--ink) }
.bm-pick-btn.won { background:rgba(56,200,122,.1); color:var(--success); font-weight:700 }
.bm-pick-btn img { border-radius:2px }

/* ============================================================
   READINESS TRACKER
   ============================================================ */
.readiness-tracker {
  position:fixed; bottom:0; left:0; right:0; z-index:998;
  background:rgba(12,18,28,.97); backdrop-filter:blur(24px);
  border-top:1px solid var(--border-g);
  padding:12px 24px;
  transform:translateY(100%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.readiness-tracker.visible { transform:translateY(0) }
.readiness-inner { max-width:1360px; margin:0 auto; display:flex; align-items:center; gap:18px }
.readiness-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); white-space:nowrap }
.readiness-bar-wrap { flex:1 }
.readiness-bar-bg { height:5px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden }
.readiness-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--red-hot), var(--gold)); transition:width .7s cubic-bezier(.22,.61,.36,1); width:0%; box-shadow:0 0 12px rgba(240,192,64,.35) }
.readiness-percent { font-family:'Bebas Neue', sans-serif; font-size:22px; color:var(--ink); min-width:46px; text-align:right }
.readiness-steps { display:flex; gap:8px }
.readiness-step { font-size:10px; padding:5px 12px; border-radius:4px; border:1px solid var(--border); color:var(--ink4); cursor:pointer; background:none; font-family:inherit; transition:all .2s; white-space:nowrap }
.readiness-step.done { border-color:var(--success); color:var(--success) }
.readiness-step:hover:not(.done) { border-color:var(--border-hi); color:var(--ink2) }
.readiness-close { background:none; border:none; color:var(--ink4); cursor:pointer; font-size:20px; padding:2px 6px; transition:color .2s; line-height:1 }
.readiness-close:hover { color:var(--ink) }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-signup {
  position:relative; overflow:hidden; text-align:center;
  padding:88px 24px; background:var(--s0);
}
.footer-signup-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(217,18,46,.12) 0%, transparent 65%);
}
.footer-signup-bg::after {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, var(--red-hot), transparent);
}
.footer-signup-inner { position:relative; z-index:1 }
.footer-signup-title { font-family:'Bebas Neue', sans-serif; font-size:52px; letter-spacing:3px; margin-bottom:12px }
.footer-form { display:flex; gap:10px; max-width:480px; margin:0 auto }
.footer-form input { flex:1; padding:14px 20px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; color:var(--ink); font-size:14px; font-family:inherit; outline:none; transition:border-color .2s }
.footer-form input::placeholder { color:var(--ink4) }
.footer-form input:focus { border-color:var(--red-hot) }

footer { border-top:1px solid var(--border); padding:60px 24px 32px }
.footer-inner { max-width:1360px; margin:0 auto }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
.footer-col h4 { font-family:'Bebas Neue', sans-serif; font-size:16px; letter-spacing:1.5px; margin-bottom:16px; color:var(--ink) }
.footer-col a { display:block; font-size:13px; color:var(--ink4); margin-bottom:9px; transition:color .2s }
.footer-col a:hover { color:var(--gold) }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:var(--ink4) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .aff-row { grid-template-columns:repeat(3,1fr) }
  .preview-grid { grid-template-columns:repeat(3,1fr) }
  .benefits { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  .nav-tabs { display:none }
  .mobile-toggle { display:flex }

  .home-cards { grid-template-columns:1fr; background:transparent; gap:1px }
  .home-card { padding:32px 24px; border-bottom:1px solid var(--border) }
  .hc-num { font-size:52px }

  .bracket-splash-inner { flex-direction:column; padding:32px 24px }
  .bracket-splash-trophy { font-size:52px; order:-1 }
  .bracket-splash-cta { width:100%; justify-content:center }

  .blog-grid { grid-template-columns:1fr }
  .aff-row { grid-template-columns:1fr }
  .benefits { grid-template-columns:1fr 1fr; background:var(--border) }
  .preview-grid { grid-template-columns:repeat(2,1fr) }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center }
  .shop-row { flex-direction:column }
  .product-grid { grid-template-columns:1fr }
  .calc-row { flex-direction:column }
  .calc-input { width:100% }
  .country-grid { grid-template-columns:repeat(2,1fr) }

  .hero-deco-year { display:none }
  .hero-circle { width:300px; height:300px; right:-60px }
  .hero h1, .hero-h1 { }
  .h1-canada { font-size:clamp(60px, 18vw, 100px) }
  .h1-line3 { font-size:clamp(28px, 8vw, 52px) }
  .hero-content { padding:80px 20px 60px }

  .page-hero { padding:52px 20px 44px }
  .container { padding:48px 20px 80px }
  .container [style*="grid-template-columns"] { grid-template-columns:1fr !important }

  .scoreboard { flex-direction:column; align-items:flex-start; gap:10px }
  .scoreboard-digits { flex-wrap:wrap }

  .readiness-inner { flex-wrap:wrap; gap:10px }
  .readiness-steps { display:none }

  .bracket-round-col { min-width:130px }
  .bracket-final-col { min-width:140px; margin:0 16px }

  .shop-form { padding:24px 18px }
  .footer-signup { padding:60px 20px }
  .footer-form { flex-direction:column }
  .footer-signup-title { font-size:38px }
  .section-wrap { padding:48px 20px }
}
@media (max-width:480px) {
  .benefits { grid-template-columns:1fr }
  .country-grid { grid-template-columns:1fr 1fr }
  .section-title { font-size:38px !important }
  .preview-grid { grid-template-columns:repeat(2,1fr) }
  .hero-ctas { flex-direction:column }
  .hero-ctas .btn { width:100%; justify-content:center }
}