/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0B0B0D;
  color: #EDEFF2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
a { color: #F6E27A; text-decoration: none; }
a.button { background:#D4AF37; color:#0B0B0D; padding: .9rem 1.2rem; border-radius: 10px; font-weight: 700; display:inline-block; }
a.button.secondary { background: transparent; border: 2px solid #D4AF37; color: #D4AF37; }
.container { width: min(1120px, 92vw); margin: 0 auto; }
.section { position: relative; padding: 96px 0; }
h1,h2,h3 { letter-spacing: .5px; margin: 0 0 16px; }
h1 { font-size: clamp(40px, 7vw, 84px); }
h2 { font-size: clamp(28px, 4.6vw, 48px); }
h3 { font-size: clamp(20px, 2.8vw, 28px); color:#F6E27A; }

/* ---------- Hero with video & pulsating emblem ---------- */
.hero { height: 120vh; overflow: hidden; }
.layer { position: absolute; inset: 0; }
.layer img, .layer video { width:100%; height:100%; object-fit: cover; display:block; }
.hero .emblem-wrap { display:flex; align-items:center; justify-content:center; }
.hero .emblem { width: min(70vw, 900px); filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)); transform-origin: center; }
.pulsate { animation: pulse 1800ms ease-in-out infinite; }
@keyframes pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)); }
  50%  { transform: scale(1.04); filter: drop-shadow(0 16px 36px rgba(0,0,0,.7)); }
  100% { transform: scale(1);    filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)); }
}
.hero-copy { position:absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); text-align:center; }

/* CTA row with interrobang icon */
.hero-ctas { margin-top: 16px; display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; align-items:center; }
.hero-ctas .icon { width: 28px; height: 28px; margin-right: 4px; vertical-align: middle; transform: translateY(1px); }
.hero-ctas .group { display:flex; align-items:center; gap: 12px; background: rgba(0,0,0,.35); padding: 10px 14px; border:1px solid rgba(255,255,255,.08); border-radius: 12px; backdrop-filter: blur(8px); }

/* ---------- Create Your Path section ---------- */
.create { height: 120vh; overflow: hidden; }
.create .bg { position:absolute; inset:0; background:#000; }
.create .overlay { position: sticky; top: 20vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.create .overlay .card { background: rgba(11,11,13,.76); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; width: min(880px, 92vw); }
.create .headline { font-size: clamp(32px, 6vw, 72px); margin: 0 0 4px; }
.create .sub { color:#C9CED6; margin:0; }
.zoomable { transform-origin: center; }

/* ---------- Golden Pause (video instead of interrobang) ---------- */
.pause { background: radial-gradient(600px 320px at 50% 35%, rgba(212,175,55,.25), transparent 60%), #0B0B0D; }
.pause .vidwrap { position: sticky; top: 12vh; width: min(1000px, 96vw); margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.pause video { width: 100%; height: auto; display:block; }
.pause .copy { width:min(980px, 92vw); margin: 28px auto 0; font-size: clamp(16px, 2.1vw, 20px); color:#EDEFF2; }

/* ---------- Initiatives (second video + bullets) ---------- */
.initiatives .vidwrap { position: sticky; top: 12vh; width: min(1000px, 96vw); margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.initiatives video { width: 100%; height: auto; display:block; }
.initiatives .copy { width:min(980px, 92vw); margin: 28px auto 0; font-size: clamp(16px, 2.1vw, 20px); }

/* ---------- Cards/sections ---------- */
.cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:24px; }

/* ---------- Footer ---------- */
footer { padding: 28px 0 56px; color:#C9CED6; text-align:center; border-top:1px solid rgba(255,255,255,.06); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr; }
  .hero { height: 100vh; }
  .create { height: auto; padding: 80px 0; }
  .pause .vidwrap, .initiatives .vidwrap { position: relative; top: 0; }
}