:root {
  --purple-950: #14051f;
  --purple-900: #210b2f;
  --purple-800: #321047;
  --purple-600: #68229a;
  --pink: #ff2f7f;
  --pink-dark: #d91667;
  --yellow: #ffc928;
  --cream: #fff7ed;
  --white: #ffffff;
  --muted: #d9cede;
  --line: rgba(255,255,255,.14);
  --shadow: 0 24px 70px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 16% 20%, rgba(255,47,127,.15), transparent 27%),
    radial-gradient(circle at 78% 35%, rgba(104,34,154,.22), transparent 30%),
    linear-gradient(135deg, #11031b 0%, #220931 46%, #16041f 100%);
  font-family: "Montserrat", Arial, sans-serif;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  opacity: .45;
  filter: blur(1px);
  background-image: radial-gradient(circle, rgba(255,47,127,.65) 0 2px, transparent 2.8px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle, #000 0 15%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0 15%, transparent 68%);
}
body::before { top: -120px; right: -80px; }
body::after { bottom: -150px; left: -100px; transform: rotate(20deg); }

a { color: inherit; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.page-shell { min-height: 100vh; position: relative; isolation: isolate; }

.site-header {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 28px rgba(255,47,127,.45);
}
.brand-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 27px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.brand-name b { color: var(--white); font-weight: 400; }
.brand-name em { color: var(--pink); font-style: normal; }

.header-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.header-social:hover { transform: translateY(-2px); background: rgba(255,47,127,.15); border-color: rgba(255,47,127,.65); }
.header-social svg { width: 19px; height: 19px; fill: currentColor; }

.hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  padding-block: 60px 72px;
}

.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 9px 13px;
  border: 1px solid rgba(255,201,40,.32);
  border-radius: 999px;
  background: rgba(255,201,40,.08);
  color: #ffe47e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }

h1 {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(72px, 8.1vw, 126px);
  line-height: .88;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-shadow: 0 10px 0 rgba(0,0,0,.22);
}
h1 strong { color: var(--pink); font-weight: 400; }
.lead {
  max-width: 630px;
  margin: 28px 0 24px;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.65;
}
.lead b { color: var(--white); }

.context-line {
  width: fit-content;
  position: relative;
  margin-top: 14px;
  padding-bottom: 12px;
  font-family: "Anton", Impact, sans-serif;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}
.context-line::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 85%;
  height: 5px;
  background: var(--pink);
  border-radius: 100%;
  transform: rotate(-2deg);
}
.context-line span,
.context-line strong { display: block; }
.context-line span { font-size: clamp(29px, 3vw, 46px); color: var(--white); }
.context-line strong { font-size: clamp(38px, 4vw, 58px); color: var(--yellow); font-weight: 400; }
.tagline {
  display: inline-block;
  margin: 22px 0 0;
  padding: 9px 18px;
  color: #1b0924;
  background: var(--white);
  box-shadow: 9px 7px 0 rgba(255,47,127,.86);
  font-size: 17px;
  font-weight: 900;
  font-style: italic;
  transform: rotate(-1deg);
}
.tagline span { color: var(--pink-dark); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 23px;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 23px; height: 23px; fill: currentColor; }
.btn-primary {
  background: linear-gradient(135deg, var(--pink), #e51a6a);
  box-shadow: 0 12px 30px rgba(255,47,127,.3), inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: 0 16px 38px rgba(255,47,127,.42); }
.btn-outline { border: 2px solid var(--yellow); color: var(--white); background: rgba(255,255,255,.035); }
.btn-outline:hover { background: rgba(255,201,40,.12); }

.hero-art {
  min-height: 580px;
  position: relative;
  display: grid;
  place-items: center;
}
.logo-orbit {
  width: min(440px, 83vw);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  animation: float 5s ease-in-out infinite;
}
.logo-orbit::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,47,127,.28), transparent 67%);
  filter: blur(18px);
}
.logo-orbit img {
  width: 78%;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 45px rgba(255,47,127,.52), var(--shadow);
}
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,.17); }
.orbit-a { animation: spin 22s linear infinite; }
.orbit-b { inset: 7%; border-color: rgba(255,201,40,.22); animation: spinReverse 18s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; border-radius: 50%; }
.orbit-a::before { width: 18px; height: 18px; top: 11%; left: 16%; background: var(--pink); box-shadow: 0 0 20px var(--pink); }
.orbit-a::after { width: 13px; height: 13px; bottom: 15%; right: 10%; background: var(--yellow); box-shadow: 0 0 18px var(--yellow); }

.speech-bubble {
  position: absolute;
  z-index: 4;
  top: 8%;
  right: 3%;
  width: 108px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 4px solid #fff;
  border-radius: 25px;
  background: linear-gradient(135deg, #ff3b8c, #c81162);
  box-shadow: 0 13px 30px rgba(0,0,0,.35);
  transform: rotate(6deg);
  animation: bob 4s ease-in-out infinite;
}
.speech-bubble::after { content:""; position:absolute; bottom:-15px; left:22px; border:9px solid transparent; border-top-color:#fff; transform:rotate(16deg); }
.speech-bubble i { width: 11px; height: 11px; border-radius: 50%; background:#fff; }

.play-bubble {
  position: absolute;
  z-index: 5;
  right: 4%;
  bottom: 10%;
  width: 92px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 25px;
  background: var(--yellow);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  transform: rotate(-7deg);
  animation: bob 4.6s ease-in-out infinite reverse;
}
.play-bubble::after { content:""; position:absolute; bottom:-17px; right:18px; border:10px solid transparent; border-top-color:#fff; transform:rotate(-15deg); }
.play-bubble span { width:0; height:0; border-top:16px solid transparent; border-bottom:16px solid transparent; border-left:24px solid #210b2f; margin-left:6px; }
.arrow-marks { position:absolute; left:0; bottom:16%; display:flex; gap:6px; transform:rotate(-4deg); }
.arrow-marks b { width:25px; height:25px; border-top:8px solid var(--pink); border-right:8px solid var(--pink); transform:rotate(45deg); }
.arrow-marks b:nth-child(2) { border-color: var(--white); }
.arrow-marks b:nth-child(3) { border-color: var(--yellow); }

.burst { position:absolute; width:110px; height:110px; opacity:.7; background: conic-gradient(from 12deg, transparent 0 8deg, var(--pink) 8deg 13deg, transparent 13deg 34deg, var(--yellow) 34deg 39deg, transparent 39deg 61deg); -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 45%); mask: radial-gradient(circle, transparent 0 43%, #000 45%); }
.burst-one { left:-3%; top:9%; transform:rotate(-10deg); }
.burst-two { right:-1%; bottom:5%; transform:rotate(150deg); }

.features { padding: 70px 0 92px; }
.section-heading { text-align:center; margin-bottom: 35px; }
.section-heading span { color: var(--pink); font-size:12px; font-weight:900; letter-spacing:2.5px; }
.section-heading h2 { margin:8px 0 0; font-family:"Anton", Impact, sans-serif; font-size:clamp(38px,5vw,65px); font-weight:400; text-transform:uppercase; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card {
  position:relative;
  min-height:205px;
  padding:27px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  overflow:hidden;
}
.feature-card::after { content:""; position:absolute; width:160px; height:160px; right:-70px; bottom:-80px; border-radius:50%; background:var(--pink); opacity:.09; filter:blur(2px); }
.feature-icon { width:55px; height:55px; display:grid; place-items:center; border-radius:17px; font-size:28px; font-weight:900; box-shadow:0 10px 25px rgba(0,0,0,.24); }
.icon-pink { background:linear-gradient(135deg,var(--pink),#b8196e); }
.icon-yellow { background:linear-gradient(135deg,var(--yellow),#ff9f1c); color:#2b1039; }
.icon-purple { background:linear-gradient(135deg,#8848c3,#4d176f); }
.feature-card h3 { margin:19px 0 8px; font-size:22px; }
.feature-card p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }

.site-footer { border-top:1px solid var(--line); background:rgba(10,2,15,.38); }
.footer-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#d8ccde; font-size:13px; }
.footer-inner p { margin:0; }
.footer-inner b { color:var(--yellow); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:rotate(-360deg); } }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(6deg)} 50%{transform:translateY(-10px) rotate(2deg)} }

@media (max-width: 930px) {
  .hero { grid-template-columns:1fr; text-align:center; padding-top:45px; gap:10px; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .lead { margin-inline:auto; }
  .context-line { margin-inline:auto; }
  .actions { justify-content:center; }
  .hero-art { min-height:500px; }
  .feature-grid { grid-template-columns:1fr; max-width:720px; margin-inline:auto; }
  .feature-card { min-height:0; }
}

@media (max-width: 640px) {
  .wrap { width:min(100% - 28px, 1180px); }
  .site-header { height:76px; }
  .brand img { width:48px; height:48px; }
  .brand-name { font-size:21px; gap:5px; }
  .header-social { width:44px; height:44px; padding:0; justify-content:center; }
  .header-social span { display:none; }
  .hero { min-height:auto; padding:42px 0 45px; }
  h1 { font-size:clamp(63px, 21vw, 91px); }
  .lead { font-size:16px; line-height:1.55; }
  .context-line span { font-size:30px; }
  .context-line strong { font-size:39px; }
  .tagline { font-size:14px; }
  .actions { width:100%; }
  .btn { width:100%; }
  .hero-art { min-height:380px; }
  .logo-orbit { width:min(340px,88vw); }
  .speech-bubble { width:82px; height:59px; top:7%; right:0; border-width:3px; }
  .speech-bubble i { width:8px; height:8px; }
  .play-bubble { width:69px; height:62px; right:1%; bottom:9%; border-width:3px; }
  .play-bubble span { border-top-width:12px; border-bottom-width:12px; border-left-width:18px; }
  .arrow-marks { left:1%; bottom:11%; }
  .arrow-marks b { width:18px; height:18px; border-width:6px; }
  .features { padding:55px 0 65px; }
  .section-heading h2 { font-size:41px; }
  .footer-inner { padding:22px 0; min-height:0; flex-direction:column; text-align:center; gap:9px; }
}

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