:root {
  --black: #050505;
  --paper: #f5f4ef;
  --muted: #a2a29d;
  --line: rgba(255, 255, 255, .12);
  --accent: #f3ead0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.08), transparent 38rem),
    var(--black);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .6;
}

.urgency {
  position: relative;
  z-index: 3;
  min-height: 50px;
  padding: 12px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  color: #10100f;
  background: var(--paper);
  font: 800 clamp(.69rem, 2.6vw, .82rem)/1.15 "Manrope", sans-serif;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.urgency__pulse { width: 7px; height: 7px; border-radius: 50%; background: #111; animation: pulse 1.8s infinite; }
.urgency__separator { width: 1px; height: 15px; background: rgba(0,0,0,.24); }

.hero {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 50px);
  padding: clamp(30px, 4.5vw, 58px) 20px 76px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 38%, black, transparent 75%);
}

.hero__glow { position: absolute; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(100px); opacity: .08; pointer-events: none; }
.hero__glow--left { left: -19rem; top: 18%; background: #fff; }
.hero__glow--right { right: -19rem; top: 52%; background: #c7a864; }

.content { position: relative; z-index: 2; width: min(100%, 820px); margin: 0 auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: #c7c7c1;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1 { width: min(100%, 720px); margin: 0 auto; color: var(--paper); font: 600 clamp(1.65rem, 3.15vw, 2.65rem)/1.25 "Manrope", sans-serif; letter-spacing: -.035em; text-wrap: balance; }

.watch-label { margin: 39px 0 17px; color: #dad9d3; font-size: .84rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.watch-label span { display: inline-block; margin-right: 7px; animation: bob 1.8s ease-in-out infinite; }

.video-shell {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding: 1px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,255,255,.06) 34%, rgba(207,180,116,.44));
  box-shadow: 0 38px 90px rgba(0,0,0,.8), 0 0 60px rgba(255,255,255,.07);
}
.video-shell::before { content: ""; position: absolute; inset: 10% -18%; z-index: -1; background: rgba(255,255,255,.09); filter: blur(70px); border-radius: 50%; }

.video-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 24px; background: #111; cursor: pointer; isolation: isolate; }
.video-placeholder img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.75,.2,1), filter .5s; }
.video-placeholder:hover img { transform: scale(1.035); filter: brightness(1.08); }
.video-placeholder__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.1) 43%, rgba(0,0,0,.84) 100%); }
.video-placeholder__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding-top: 32%; }
.video-placeholder__kicker, .video-placeholder__action { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 18px #000; }
.video-placeholder__action { color: #e3e2dc; letter-spacing: .06em; }
.video-placeholder__duration { position: absolute; left: 20px; bottom: 20px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #d7d6cf; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }

.play-button { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; color: #080808; background: var(--paper); box-shadow: 0 0 0 12px rgba(255,255,255,.1), 0 12px 35px rgba(0,0,0,.38); transition: transform .3s, box-shadow .3s; }
.video-placeholder:hover .play-button { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(255,255,255,.08), 0 14px 42px rgba(0,0,0,.5); }
.play-button svg { width: 30px; fill: currentColor; transform: translateX(2px); }

.cta { width: min(100%, 390px); min-height: 62px; margin: 29px auto 0; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #090909; background: var(--paper); border: 1px solid var(--paper); border-radius: 12px; text-decoration: none; font: 800 .92rem "Manrope", sans-serif; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 10px 36px rgba(255,255,255,.09); transition: color .25s, background .25s, transform .25s, box-shadow .25s; }
.cta:hover { transform: translateY(-3px); color: var(--paper); background: transparent; box-shadow: 0 15px 45px rgba(255,255,255,.12); }
.cta svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s; }
.cta:hover svg { transform: translateX(4px); }
footer { position: relative; z-index: 2; padding: 27px 20px 34px; color: #72726d; border-top: 1px solid rgba(255,255,255,.07); text-align: center; font-size: .76rem; letter-spacing: .03em; }
footer p { margin: 0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,0,0,.2); } 50% { opacity: .5; box-shadow: 0 0 0 6px rgba(0,0,0,0); } }
@keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (max-width: 560px) {
  .urgency { gap: 7px; letter-spacing: .055em; }
  .hero { padding: 29px 16px 60px; }
  .hero::before { background-size: 46px 46px; }
  h1 { font-size: clamp(1.65rem, 7.4vw, 2.15rem); line-height: 1.28; }
  .watch-label { margin-top: 34px; }
  .video-shell { width: min(92vw, 365px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}