:root {
    --gold: #D4A843;
    --gold2: #F5C842;
    --gold-dim: #8A6820;
    --dark: #050505;
    --dark2: #0b0b0b;
    --zinc: #18181b;
    --variable: #D4A843;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:var(--dark); color:#fff; font-family:'Inter',sans-serif; overflow-x:hidden; }
  .title-font { font-family:'Oswald',sans-serif; }
  .cond { font-family:'Barlow Condensed',sans-serif; }

  /* ── HERO ── */
  #hero {
    position:relative; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:80px 24px 60px; overflow:hidden;
  }
  .hero-radial {
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 50% 50%, rgba(245,180,40,0.28), transparent 38%),
      linear-gradient(to bottom, #050505, #0b0b0b 55%, #000);
  }
  /* Animated skyline buildings */
  .skyline {
    position:absolute; bottom:0; left:0; right:0;
    height:220px; display:flex; align-items:flex-end; gap:0;
    opacity:.4; pointer-events:none; overflow:hidden;
  }
  .sky-bld {
    flex:1; background:rgba(120,80,0,0.7);
    border-top:1px solid rgba(245,180,40,0.35);
    animation:skyPulse 3s ease-in-out infinite;
    animation-delay:var(--d,0s);
  }
  @keyframes skyPulse { 0%,100%{opacity:.35} 50%{opacity:.8} }

  .hero-eyebrow {
    font-family:'Barlow Condensed',sans-serif; font-size:clamp(11px,1.2vw,14px);
    letter-spacing:.35em; color:var(--gold2); text-transform:uppercase; margin-bottom:24px;
    animation: fadeUp .7s .1s both;
  }
  .hero-h1 {
    font-family:'Oswald',sans-serif; font-size:clamp(52px,10vw,120px);
    font-weight:900; line-height:.92; text-transform:uppercase;
    animation: fadeUp .7s .25s both;
  }
  .hero-h1 .gold { color:var(--gold2); }
  .hero-h2 {
    font-family:'Oswald',sans-serif; font-size:clamp(22px,4.5vw,56px);
    font-weight:700; color:var(--gold); text-transform:uppercase;
    margin-top:16px; animation: fadeUp .7s .4s both;
  }
  .hero-tagline {
    font-size:clamp(14px,1.5vw,20px); font-style:italic;
    color:rgba(255,255,255,0.9); margin-top:16px;
    animation: fadeUp .7s .55s both;
  }
  .hero-tagline span { color:var(--gold2); }
  @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

  /* ── CAMPAIGN IMAGE / HOTSPOTS ── */
  .campaign-wrap {
    position:relative; border-radius:28px; overflow:hidden;
    border:1px solid var(--gold-dim);
    box-shadow:0 0 80px var(--gold-dim);
    margin-top:48px; background:#000;
    animation: fadeUp .9s .7s both;
  }
  .campaign-img {
    width:100%; display:block; object-fit:cover;
    min-height:300px; background:linear-gradient(135deg,#1a0f00,#050505);
    transition:transform .7s;
  }
  .campaign-wrap:hover .campaign-img { transform:scale(1.03); }
  .campaign-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%, rgba(0,0,0,0.25) 100%);
    pointer-events:none;
  }
  /* Scan shimmer */
  .campaign-shimmer {
    position:absolute; inset:0; pointer-events:none; opacity:.8;
    background:linear-gradient(110deg, transparent 38%, rgba(255,215,90,.2) 48%, rgba(255,255,255,.18) 50%, rgba(255,215,90,.2) 52%, transparent 62%);
    background-size:220% 100%;
    animation:shimmer 4.5s linear infinite;
  }
  @keyframes shimmer { from{background-position:-120% 50%} to{background-position:220% 50%} }

  /* Hotspot dots */
  .hotspot {
    position:absolute; transform:translate(-50%,-50%);
    width:36px; height:36px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:30;
  }
  .hs-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--gold2);
      animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite;
  }
  .hs-dot {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold2);
    border: 2px solid #000;
    box-shadow: 0 0 22px var(--gold);
    z-index: 2;
    transition: transform .2s;
}
  .hotspot:hover .hs-dot { transform:scale(1.3); }
  @keyframes ping { 75%,100%{transform:scale(2.2);opacity:0} }

  /* Info panel at bottom */
  .campaign-info {
    position:absolute; bottom:0; left:0; right:0; z-index:20;
    padding:20px 24px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  }
  .campaign-label h3 {
    font-family:'Oswald',sans-serif; font-size:clamp(20px,3vw,42px);
    font-weight:900; line-height:1.1;
  }
  .hotspot-card {
    min-width:260px; flex:1; max-width:440px;
    background:rgba(0,0,0,0.8); backdrop-filter:blur(16px);
    border:1px solid rgba(245,180,40,0.6); border-radius:20px; padding:20px;
    box-shadow:0 0 30px rgba(245,180,40,0.22);
    transition:all .3s;
  }
  .hotspot-card h4 { font-family:'Oswald',sans-serif; color:var(--gold2); font-size:22px; font-weight:700; }
  .hotspot-card p  { color:rgba(255,255,255,.8); font-size:14px; line-height:1.6; margin-top:8px; }
  .btn-gold-sm {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--gold2); color:#000; border:none; border-radius:50px;
    padding:8px 18px; font-weight:700; font-size:13px; margin-top:12px; cursor:pointer;
    transition:background .2s;
  }
  .btn-gold-sm:hover { background:#fde68a; }

  /* ── STORY / VIDEO ── */
  #story {
    padding:80px 24px;
    background:linear-gradient(180deg, #000 0%, #09090b 50%, #000 100%);
  }
  .story-label {
    font-family:'Barlow Condensed',sans-serif; font-size:12px;
    letter-spacing:.25em; color:var(--gold2); text-transform:uppercase;
    font-weight:700; margin-bottom:16px;
  }
  .story-h2 {
    font-family:'Oswald',sans-serif; font-size:clamp(32px,5.5vw,68px);
    font-weight:900; line-height:1.05; margin-bottom:24px;
  }
  .story-text { font-size:clamp(15px,1.3vw,18px); color:rgba(255,255,255,.8); line-height:1.75; }
  .video-frame {
    border-radius:20px; overflow:hidden;
    border:1px solid rgba(245,180,40,.5);
    box-shadow:0 0 40px rgba(0,0,0,.8);
  }
  .video-frame iframe { display:block; width:100%; aspect-ratio:16/9; border:none; }
  .video-caption {
    padding:16px; display:flex; align-items:center; gap:10px;
    color:var(--gold2); font-weight:700;
    background:rgba(245,180,40,.05); border-top:1px solid rgba(245,180,40,.15);
  }
  .play-icon { width:20px; height:20px; fill:currentColor; }

  /* ── PILLARS ── */
  #pillars { padding:80px 24px; background:#000; }
  .pillar-card {
    border-radius:24px; border:1px solid rgba(245,180,40,.4);
    background:linear-gradient(180deg,#18181b,#000);
    padding:28px; height:100%; transition:all .3s;
  }
  .pillar-card:hover { transform:translateY(-8px) scale(1.02); border-color:var(--gold2); box-shadow:0 20px 50px rgba(245,180,40,.1); }
  .pillar-icon-wrap {
    width:64px; height:64px; border-radius:50%;
    border:1px solid rgba(245,180,40,.7);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold2); margin-bottom:20px;
  }
  .pillar-title { font-family:'Oswald',sans-serif; font-size:22px; color:var(--gold2); font-weight:700; margin-bottom:10px; }
  .pillar-text  { color:rgba(255,255,255,.75); line-height:1.6; font-size:15px; }

  /* ── IMPACT ── */
  #impact {
    padding:80px 24px;
    background:linear-gradient(180deg,#09090b,#000);
  }
  .impact-tabs { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
  .impact-tab {
    width:72px; height:72px; border-radius:16px; border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .25s; color:var(--gold2);
  }
  .impact-tab.active, .impact-tab:hover { border-color:var(--gold2); background:rgba(245,180,40,.15); }
  .impact-tab svg { width:28px; height:28px; }
  .impact-card {
    border-radius:24px; border:1px solid rgba(245,180,40,.5);
    padding:40px; background:#000;
    box-shadow:0 0 50px rgba(245,180,40,.18);
    height:100%; transition:all .4s;
  }
  .impact-icon-wrap {
    width:80px; height:80px; border-radius:50%;
    background:rgba(245,180,40,.15); border:1px solid rgba(245,180,40,.6);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold2); margin-bottom:24px;
  }
  .impact-icon-wrap svg { width:38px; height:38px; }
  .impact-title { font-family:'Oswald',sans-serif; font-size:clamp(28px,3.5vw,44px); color:var(--gold2); font-weight:900; margin-bottom:16px; }
  .impact-text  { font-size:clamp(15px,1.3vw,20px); color:rgba(255,255,255,.8); line-height:1.7; }

  /* ── CTA ── */
  #cta { padding:80px 24px; background:#000; text-align:center; }
  .cta-wrap {
    border-radius:24px; border:1px solid rgba(245,180,40,.5);
    background:linear-gradient(90deg, rgba(245,180,40,.1), rgba(0,0,0,1), rgba(245,180,40,.1));
    padding:60px 32px; max-width:900px; margin:0 auto;
  }
  .cta-h2 { font-family:'Oswald',sans-serif; font-size:clamp(36px,6vw,72px); font-weight:900; text-transform:uppercase; }
  .cta-sub { font-family:'Oswald',sans-serif; font-size:clamp(20px,2.5vw,32px); color:var(--gold2); font-weight:700; text-transform:uppercase; margin-top:12px; }
  .cta-email { color:rgba(255,255,255,.75); font-size:16px; margin-top:16px; }
  .btn-cta {
    display:inline-flex; align-items:center; gap:12px;
    background:var(--gold2); color:#000; font-weight:900; font-size:16px;
    border:none; border-radius:50px; padding:16px 36px; margin-top:32px;
    cursor:pointer; transition:all .25s;
    box-shadow:0 0 40px rgba(245,180,40,.35);
  }
  .btn-cta:hover { background:#fde68a; transform:translateY(-2px); }

  /* ── REVEAL ── */
  .reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease, transform .65s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* SVG ICONS inline */
  .icon { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
      .footer {
      padding: 34px 6%;
      border-top: 1px solid var(--line);
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
  @media (max-width: 768px){
    #hero {
      padding: 120px 24px 60px;
  }
  }