/* ============================================================
   landing.css — index.html only sections
   ============================================================ */

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; isolation: isolate }
.hero-bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 80% at 78% 50%, rgba(231,84,128,.22), transparent 60%),
  radial-gradient(80% 70% at 18% 80%, rgba(231,84,128,.18), transparent 60%),
  linear-gradient(180deg,#0a0a0a,#000) }

/* Real hero image with dark+pink overlay; gradient first so it sits above photo */
.hero-photo {
  position: absolute; inset: 0; z-index: -1;
  /* Fallback: plain JPEG for browsers with no image-set support */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.82) 100%),
    radial-gradient(55% 55% at 52% 15%, rgba(231,84,128,.18), transparent 60%),
    url('../img/hero.jpg');
  /* WebP via webkit-prefixed image-set (Safari < 16.4, older Chrome) */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.82) 100%),
    radial-gradient(55% 55% at 52% 15%, rgba(231,84,128,.18), transparent 60%),
    -webkit-image-set(url('../img/hero.webp') 1x, url('../img/hero.jpg') 1x);
  /* Modern image-set with type() (Safari 16.4+, Chrome 113+) */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.82) 100%),
    radial-gradient(55% 55% at 52% 15%, rgba(231,84,128,.18), transparent 60%),
    image-set(url('../img/hero.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg'));
  background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;
}

.hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .4; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 3px 3px }

.hero-inner { padding: 160px 80px 120px; max-width: var(--max); margin: 0 auto; width: 100% }
.hero h1 { font-size: clamp(46px,7.5vw,104px); line-height: .96; font-weight: 800; letter-spacing: -.035em; max-width: 1100px }
.hero h1 .word { display: inline-block; margin-right: .28em; opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease }
.hero h1 .word.pink { color: var(--pink) }
.hero h1 .word.in { opacity: 1; transform: none; filter: blur(0) }
.hero-eyebrow { margin-bottom: 28px; opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease }
.hero-eyebrow.in { opacity: 1; transform: none }
.hero-sub { margin-top: 36px; max-width: 620px; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.78); opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease }
.hero-sub.in { opacity: 1; transform: none }
.hero-ctas { margin-top: 42px; display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease }
.hero-ctas.in { opacity: 1; transform: none }
.hero-meta { margin-top: 64px; display: flex; gap: 56px; flex-wrap: wrap; color: var(--muted); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; max-width: 760px; padding-top: 32px; border-top: 1px solid var(--border) }
.hero-meta.in { opacity: .85; transform: none }
.hero-meta b { color: var(--white); display: block; font-family: 'Montserrat', sans-serif; font-size: 28px; letter-spacing: -.02em; margin-bottom: 6px; text-transform: none; font-weight: 700 }

.scroll-cue { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .3em; text-transform: uppercase }
.scroll-cue .line { width: 1px; height: 42px; background: linear-gradient(180deg,var(--pink),transparent); animation: cue 2.4s ease infinite }
@keyframes cue { 0%{transform:scaleY(.2);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(.2);transform-origin:bottom} }

/* ---------- TICKER ---------- */
.ticker { position: relative; border-top: 1px solid rgba(231,84,128,.35); border-bottom: 1px solid rgba(231,84,128,.35); background: #050505; overflow: hidden; padding: 22px 0 }
.ticker-track { display: flex; gap: 54px; width: max-content; animation: tickerScroll 40s linear infinite; will-change: transform }
.ticker:hover .ticker-track { animation-play-state: paused }
.ticker-item { display: flex; align-items: center; gap: 54px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; color: var(--pink) }
.ticker-item .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--white) }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- IMPACT ---------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px }
.stat { padding: 42px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); position: relative; overflow: hidden; transition: border-color .3s ease, transform .3s ease }
.stat:hover { border-color: var(--pink); transform: translateY(-4px) }
.stat .num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 96px; line-height: .95; color: var(--pink); letter-spacing: -.04em }
.stat .num small { font-size: 46px; color: var(--pink); font-weight: 600; margin-left: 4px }
/* Year-type stat: smaller than count stats so a 4-digit year doesn't read as a quantity */
.stat .num-year { font-size: 68px; letter-spacing: -.02em }
.stat .label { margin-top: 18px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.55; max-width: 320px }
.stat .corner { position: absolute; top: 24px; right: 24px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.36) }

/* ---------- Instagram band ---------- */
.ig-band { padding: 84px 0; border-top: 1px solid var(--border) }
.ig-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap }
.ig-inner h2 { font-size: clamp(28px,3.4vw,46px); font-weight: 800; line-height: 1.05; max-width: 560px; margin-top: 10px }
.ig-inner h2 .accent { color: var(--pink) }
.ig-inner p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 520px }

/* ---------- HORIZONTAL SCROLL-LOCK ---------- */
.horizontal { position: relative; background: var(--black) }
.horizontal-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden }
.horizontal-track { display: flex; height: 100vh; align-items: center; will-change: transform; padding-left: 80px }
.h-intro { flex: 0 0 auto; width: 100vw; display: flex; flex-direction: column; justify-content: center; padding-right: 80px }
.h-intro .eyebrow { margin-bottom: 28px }
.h-intro h2 { font-size: clamp(48px,7vw,108px); font-weight: 800; line-height: .95; max-width: 1100px }
.h-intro h2 .accent { color: var(--pink) }
.h-intro .sub { margin-top: 30px; max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.6 }
.h-progress { margin-top: 46px; display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; letter-spacing: .28em; text-transform: uppercase }
.h-progress .bar { flex: 0 0 280px; height: 2px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden }
.h-progress .fill { height: 100%; background: var(--pink); width: 0%; transition: width .1s linear }

.h-card { flex: 0 0 auto; width: 560px; height: 560px; margin-right: 32px; border-radius: 32px; background: linear-gradient(180deg,#101010,#060606); border: 1px solid var(--border); padding: 44px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: border-color .3s ease, transform .3s ease }
.h-card:hover { border-color: var(--pink); transform: translateY(-6px) }
.h-card .num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--pink); letter-spacing: .28em }
.h-card h3 { font-size: 42px; font-weight: 800; line-height: 1.02; margin-top: 18px; letter-spacing: -.02em }
.h-card h3 .accent { color: var(--pink) }
.h-card .desc { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 420px; margin-top: 18px }
.h-card .visual { position: absolute; right: -60px; bottom: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(231,84,128,.3), rgba(231,84,128,0) 60%); filter: blur(2px) }
.h-card .meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto }
.h-card .meta span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.h-card .arrow { align-self: flex-start; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--white); transition: background .3s, border-color .3s, transform .3s }
.h-card:hover .arrow { background: var(--pink); border-color: var(--pink); transform: rotate(-45deg) }
.h-card.feat { background: linear-gradient(180deg,#E75480,#a8345c); border-color: transparent }
.h-card.feat .num { color: rgba(255,255,255,.78) }
.h-card.feat .desc { color: rgba(255,255,255,.86) }
.h-card.feat .meta span { border-color: rgba(255,255,255,.32); color: rgba(255,255,255,.92) }
.h-end { flex: 0 0 auto; width: 520px; display: flex; flex-direction: column; justify-content: center; padding: 40px 80px 40px 0 }
.h-end h3 { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em }
.h-end p { margin-top: 18px; color: var(--muted); line-height: 1.6 }
.h-end .btn { margin-top: 30px; align-self: flex-start }

/* ---------- RESOURCE BURST ---------- */
.burst { padding: 160px 0; text-align: center; position: relative; overflow: hidden }
.burst::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(231,84,128,.18), transparent 70%); pointer-events: none; z-index: 0 }
.burst .container { position: relative; z-index: 1 }
.burst h2 { font-size: clamp(40px,5.6vw,76px); font-weight: 800; line-height: 1; letter-spacing: -.02em; max-width: 920px; margin: 24px auto 0 }
.burst h2 .accent { color: var(--pink) }
.burst-stage { position: relative; margin: 88px auto 0; width: 100%; max-width: 1000px; height: 520px; display: grid; place-items: center }
.burst-trigger { position: relative; z-index: 5; padding: 32px 56px; border-radius: 999px; background: var(--pink); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; box-shadow: 0 0 0 0 rgba(231,84,128,.0), 0 0 60px rgba(231,84,128,.45); transition: transform .3s ease, box-shadow .3s ease }
.burst-trigger:hover { transform: scale(1.03) }
.burst-trigger.open { transform: scale(.85); opacity: .55 }
.burst-trigger::before, .burst-trigger::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(231,84,128,.4); animation: pulse 2.4s ease infinite }
.burst-trigger::after { animation-delay: 1.2s }
@keyframes pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.6);opacity:0} }
.pathway { position: absolute; width: 280px; background: var(--white); color: var(--black); border-radius: 24px; padding: 26px; text-align: left; box-shadow: var(--shadow-card); opacity: 0; transform: translate(0,0) scale(.4); transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease; cursor: pointer; z-index: 3 }
.pathway:hover { transform: translate(var(--x),var(--y)) scale(1.04) !important }
.pathway .p-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: var(--pink); letter-spacing: .28em }
.pathway h4 { margin-top: 8px; font-size: 22px; font-weight: 800 }
.pathway p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.66) }
.pathway .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--pink); font-weight: 700; font-size: 13px; letter-spacing: .06em }
.burst.active .pathway { opacity: 1; transform: translate(var(--x),var(--y)) scale(1) }
.burst.active .pathway:nth-child(2) { transition-delay: .05s }
.burst.active .pathway:nth-child(3) { transition-delay: .15s }
.burst.active .pathway:nth-child(4) { transition-delay: .25s }
.pathway-1 { --x: -360px; --y: -130px }
.pathway-2 { --x: 0; --y: 170px }
.pathway-3 { --x: 360px; --y: -130px }
.burst-svg { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease .2s }
.burst.active .burst-svg { opacity: .6 }
.burst-svg path { stroke: var(--pink); stroke-width: 1; fill: none; stroke-dasharray: 4 6 }

/* ---------- PARTNER TEASER ---------- */
.partner { padding: 140px 0; background: #040404 }
.pcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px }
.pcard { padding: 36px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005)); transition: border-color .3s, transform .3s; position: relative; overflow: hidden; display: block; }
.pcard:hover { border-color: var(--pink); transform: translateY(-6px) }
.pcard .accent-bar { width: 48px; height: 3px; border-radius: 999px; background: var(--pink); margin-bottom: 24px }
.pcard h3 { font-size: 28px; font-weight: 800; letter-spacing: -.01em }
.pcard p { margin-top: 14px; color: var(--muted); line-height: 1.6; font-size: 15px }
.pcard .arrow { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; color: var(--pink); letter-spacing: .06em }

/* ---------- FINAL CTA ---------- */
.finalcta { padding: 160px 0; background: linear-gradient(180deg,#000,#1a0009); position: relative; overflow: hidden }
.finalcta::before { content: ""; position: absolute; inset: -100px; background: radial-gradient(circle at 50% 50%, rgba(231,84,128,.25), transparent 50%); pointer-events: none }
.finalcta-inner { position: relative; text-align: center; max-width: 980px; margin: 0 auto }
.finalcta h2 { font-size: clamp(48px,7vw,108px); font-weight: 900; line-height: .95; letter-spacing: -.03em }
.finalcta h2 .accent { color: var(--pink); font-style: italic }
.finalcta p { margin: 32px auto 0; max-width: 580px; color: var(--muted); font-size: 18px; line-height: 1.6 }
.finalcta .ctas { margin-top: 46px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-inner { padding-left: 40px; padding-right: 40px }
  .stats { grid-template-columns: 1fr 1fr }
  .pcards { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  .hero-inner { padding-left: 20px; padding-right: 20px; padding-top: 120px; padding-bottom: 80px }
  .hero-meta { gap: 20px; margin-top: 36px; padding-top: 24px; flex-wrap: wrap }
  .hero-meta b { font-size: 22px; margin-bottom: 2px }
  .hero-meta > div { flex: 1 1 140px }
  .stats { grid-template-columns: 1fr }
  .stat .num { font-size: 72px }
  .h-card { width: 88vw; height: 480px; padding: 30px }
  .h-end { width: 88vw }
  .pathway-1 { --x: 0; --y: -200px }
  .pathway-2 { --x: 0; --y: 60px }
  .pathway-3 { --x: 0; --y: 320px }
  .burst-stage { height: 640px }
}