/* ---------- 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; }

/* ---------- CTA Floating Bar ---------- */
.cta-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 16px; z-index: 30;
  display:flex; gap: 10px; padding: 8px 12px;
  background: rgba(0,0,0,.40); border:1px solid rgba(255,255,255,.08);
  border-radius: 12px; backdrop-filter: blur(8px);
  transition: opacity 260ms ease, visibility 260ms ease;
}
.cta-bar.hidden { opacity: 0; visibility: hidden; }

/* ---------- Hero (Crown Shot, reverted) ---------- */
.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; }
.hero-copy { position:absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); text-align:center; }

/* ---------- Create Your Path (reverted formatting) ---------- */
.create { height: 120vh; overflow: hidden; }
.create .bg { position:absolute; inset:0; background:#000; }
.create .overlay { position: sticky; top: 22vh; 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: 28px; width: min(980px, 92vw);
}
.create .headline { font-size: clamp(36px, 6vw, 76px); margin: 0 0 6px; }
.create .sub { color:#C9CED6; margin:0; font-size: clamp(18px, 3vw, 24px); }
.zoomable { transform-origin: center; }

/* ---------- Our Why (video background + parallax overlay copy) ---------- */
.our-why { background: radial-gradient(600px 320px at 50% 35%, rgba(212,175,55,.18), transparent 60%), #0B0B0D; }
.our-why .vidwrap { position: sticky; top: 10vh; width: min(1100px, 96vw); margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.our-why video { width: 100%; height: auto; display:block; }
.our-why .overlay-copy {
  position: relative; width: min(1000px, 90vw); margin: 22px auto 0;
  background: linear-gradient(180deg, rgba(11,11,13,.78), rgba(11,11,13,.62));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 18px 22px; line-height: 1.6;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.overlay-copy p { font-size: clamp(16px, 2.1vw, 20px); color:#EDEFF2; margin: 0; }

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

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { height: 100vh; }
  .create { height: auto; padding: 80px 0; }
  .our-why .vidwrap { position: relative; top: 0; }
}