:root {
  color-scheme: dark;
  --canvas: #0a0a0b;
  --surface: #131316;
  --ink: #f5f3ef;
  --accent: #ff6a2e;
  --accent-hi: #ffb12e;
  --ease-ember: cubic-bezier(0.16, 1, 0.3, 1);
}

@property --ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

* { box-sizing: border-box; }

html { background: var(--canvas); }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: var(--canvas);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.background-orbs {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.background-orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(28px);
  transform: translate3d(0, 0, 0);
  animation: orb-drift 18s ease-in-out infinite alternate;
}

.background-orb--one {
  width: min(65vw, 650px);
  top: -36%;
  left: -18%;
  background: radial-gradient(circle, rgba(255, 177, 46, .24) 0%, rgba(255, 106, 46, .14) 35%, rgba(255, 106, 46, .04) 58%, transparent 72%);
}

.background-orb--two {
  width: min(58vw, 620px);
  right: -19%;
  bottom: -42%;
  background: radial-gradient(circle, rgba(255, 106, 46, .22) 0%, rgba(255, 106, 46, .1) 39%, transparent 71%);
  animation-delay: -9s;
}

.background-orb--three {
  width: min(38vw, 420px);
  top: 34%;
  right: 4%;
  opacity: .5;
  background: radial-gradient(circle, rgba(255, 177, 46, .15) 0%, rgba(255, 106, 46, .08) 42%, transparent 72%);
  animation-delay: -5s;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(30px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.content {
  width: min(100%, 620px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(245, 243, 239, .11);
  border-radius: 20px;
  background: #09090a;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .43),
    0 0 48px -30px rgba(255, 106, 46, .46),
    inset 0 1px rgba(255, 255, 255, .035);
  overflow: hidden;
}

.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }

.headline {
  width: 100%;
  margin: clamp(28px, 4.8vh, 46px) 0 0;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: min(43px, 5cqw);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.035em;
  text-align: center;
}

.headline__line {
  display: block;
  width: max-content;
  margin-inline: auto;
  white-space: nowrap;
}

.headline__accent {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(255, 106, 46, .23);
}

.cta-shell {
  --ring-angle: 0deg;
  position: relative;
  width: min(100%, 360px);
  margin-top: clamp(28px, 4vh, 42px);
  padding: 1.5px;
  border-radius: 15px;
  background: conic-gradient(from var(--ring-angle), rgba(255, 106, 46, .3) 0 62%, #ff6a2e 76%, #ffb12e 81%, rgba(255, 106, 46, .3) 91%);
  box-shadow: 0 0 18px rgba(255, 106, 46, .2), 0 14px 38px rgba(255, 106, 46, .1);
  animation: ember-ring 8s linear infinite;
  transition: box-shadow .35s var(--ease-ember);
}

.cta {
  position: relative;
  z-index: 1;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 13.5px;
  background: #171416;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: background .35s var(--ease-ember);
}

.cta svg { width: 21px; height: 21px; color: var(--accent); }
.cta-shell:hover { box-shadow: 0 0 25px rgba(255, 106, 46, .32), 0 14px 38px rgba(255, 106, 46, .14); }
.cta-shell:hover .cta { background: #21191a; }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

@keyframes ember-ring { to { --ring-angle: 360deg; } }
@keyframes orb-drift { to { transform: translate3d(8%, -7%, 0) scale(1.08); } }

@media (max-width: 540px) {
  .page { padding-inline: 20px; }
  .video-frame { border-radius: 16px; }
  .cta-shell { width: 100%; }
  .background-orb--one { width: 85vw; top: -12%; left: -48%; }
  .background-orb--two { width: 105vw; right: -54%; bottom: -9%; }
  .background-orb--three { width: 65vw; top: 36%; right: -26%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-shell, .background-orb { animation: none; }
  .cta-shell, .cta { transition: none; }
}