:root {
  --background: #070305;
  --foreground: #fff9f7;
  --red: #ff385c;
  --coral: #ff7a45;
  --copy-x: 0px;
  --copy-y: 0px;
  --visual-x: 0px;
  --visual-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { box-sizing: border-box; }
html { background: var(--background); scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.launch-stage {
  isolation: isolate;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 45%, rgba(255, 48, 80, .14), transparent 28%),
    radial-gradient(circle at 12% 8%, rgba(121, 30, 56, .16), transparent 32%),
    linear-gradient(145deg, #080305 0%, #0c0508 48%, #050203 100%);
}

.noise { position: absolute; z-index: 20; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.grid-plane { position: absolute; z-index: -1; inset: 47% -20% -50%; opacity: .18; transform: perspective(480px) rotateX(64deg); transform-origin: top; background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,transparent,black 25%,transparent 78%); }
.ambient { position: absolute; z-index: -1; width: 32rem; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .12; animation: breathe 7s ease-in-out infinite alternate; }
.ambient-one { top: -16rem; left: 23%; background: #ff2851; }
.ambient-two { right: -18rem; bottom: -18rem; background: #ff814a; animation-delay: -3s; }

.topbar,.footer-line { position: absolute; z-index: 10; left: clamp(1.25rem,4vw,4rem); right: clamp(1.25rem,4vw,4rem); display: flex; align-items: center; justify-content: space-between; }
.topbar { top: clamp(1.25rem,4vh,2.5rem); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.brand-mark { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.02)); box-shadow: inset 0 1px 1px rgba(255,255,255,.14); }
.status-pill { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.62); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(14px); }
.status-dot { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: var(--red); animation: pulse 2.1s ease-out infinite; }

.hero { position: relative; width: min(100%,92rem); min-height: 100svh; margin: 0 auto; padding: clamp(7.5rem,15vh,10rem) clamp(1.25rem,4vw,4rem) clamp(6.5rem,12vh,8rem); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(24rem,.95fr); align-items: center; }
.copy-layer { position: relative; z-index: 4; max-width: 48rem; transform: translate3d(var(--copy-x),var(--copy-y),0); transition: transform .18s linear; }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 clamp(1.5rem,4vh,2.75rem); color: rgba(255,255,255,.55); font-size: clamp(.64rem,.8vw,.76rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; animation: reveal .8s .1s both; }
.eyebrow span { width: 2.6rem; height: 1px; background: linear-gradient(90deg,var(--red),transparent); }
h1 { margin: 0; font-size: clamp(4.5rem,10.5vw,10rem); font-weight: 800; letter-spacing: -.085em; line-height: .72; text-transform: uppercase; perspective: 800px; }
.title-line { display: block; animation: title-in 1s cubic-bezier(.16,1,.3,1) both; }
.title-word { position: relative; overflow: visible; }
.perch-letter { position: relative; display: inline-block; }
.perched-woman { position: absolute; z-index: 3; left: 50%; bottom: .2em; height: 1.3em; width: auto; max-width: none; pointer-events: none; user-select: none; transform: translateX(-50%); transform-origin: 52% 62%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.52)) drop-shadow(0 0 14px rgba(255,55,81,.23)); animation: perch-float 5.2s 1s ease-in-out infinite; }
.title-accent { width: fit-content; padding-right: .1em; color: transparent; background: linear-gradient(105deg,#fff8f5 4%,#ff9e7b 35%,#ff385c 62%,#bd1537 98%); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 34px rgba(255,56,92,.16)); animation-delay: .1s; }
.lead { max-width: 35rem; margin: clamp(2.25rem,5vh,3.5rem) 0 0; color: rgba(255,255,255,.58); font-size: clamp(.95rem,1.35vw,1.15rem); line-height: 1.75; animation: reveal .8s .45s both; }
.return-callout { display: flex; align-items: center; gap: .9rem; width: fit-content; margin-top: clamp(1.75rem,4vh,2.75rem); padding: .65rem 1.1rem .65rem .65rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); backdrop-filter: blur(16px); animation: reveal .8s .58s both; }
.return-icon { display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#ff674f,#d31e43); box-shadow: 0 8px 24px rgba(226,28,66,.24); }
.return-callout>span:last-child { display: grid; gap: .16rem; }
.return-callout strong { font-size: .76rem; letter-spacing: .02em; }
.return-callout small { color: rgba(255,255,255,.47); font-size: .66rem; }

.visual-layer { position: relative; z-index: 2; min-height: min(68vh,43rem); perspective: 1200px; transform: translate3d(var(--visual-x),var(--visual-y),0); transition: transform .22s linear; }
.orbit-system { position: absolute; top: 50%; left: 50%; width: min(34vw,31rem); aspect-ratio: 1; opacity: .68; transform: translate(-50%,-50%) rotateX(calc(63deg + var(--tilt-x))) rotateZ(calc(-18deg + var(--tilt-y))); transform-style: preserve-3d; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: inset 0 0 28px rgba(255,54,90,.05),0 0 60px rgba(255,54,90,.04); }
.orbit::before,.orbit::after { content: ""; position: absolute; top: 50%; width: .58rem; aspect-ratio: 1; border-radius: 50%; background: #ff6a59; box-shadow: 0 0 18px rgba(255,85,91,.85); }
.orbit::before { left: -.29rem; }.orbit::after { right: -.29rem; }
.orbit-outer { animation: spin 17s linear infinite; }
.orbit-middle { inset: 12%; border-color: rgba(255,72,98,.3); transform: rotateX(67deg) rotateY(18deg); animation: spin-reverse 13s linear infinite; }
.orbit-inner { inset: 24%; border-style: dashed; border-color: rgba(255,255,255,.1); animation: spin 22s linear infinite; }
.gender-symbols { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(30vw,28rem); aspect-ratio: 1; transform: translate(-50%,-50%) translateZ(110px); transform-style: preserve-3d; animation: float-symbols 5.6s ease-in-out infinite; }
.gender-icon { position: absolute; top: 50%; display: block; font-family: "Arial Unicode MS", "Segoe UI Symbol", Arial, sans-serif; font-size: clamp(8rem,11vw,12rem); font-weight: 400; line-height: .8; color: transparent; background-clip: text; -webkit-background-clip: text; transform-style: preserve-3d; }
.gender-female { z-index: 1; left: 9%; background-image: linear-gradient(145deg,#fffaf7 4%,#ffc1b6 30%,#ff5f76 68%,#aa1236 100%); filter: drop-shadow(0 22px 24px rgba(140,8,42,.48)) drop-shadow(0 0 38px rgba(255,63,96,.32)); text-shadow: 1px 1px 0 #d93657,2px 2px 0 #c72a4a,3px 3px 0 #b91d40,4px 4px 0 #a81739,5px 5px 0 #92112f,6px 6px 0 #740b26; transform: translateY(-50%) translateZ(42px); animation: float-female 4.8s ease-in-out infinite; }
.gender-male { z-index: 2; right: 9%; background-image: linear-gradient(145deg,#fff 2%,#ffd0bd 28%,#ff7c50 60%,#e3264e 100%); filter: drop-shadow(0 24px 28px rgba(119,11,38,.5)) drop-shadow(0 0 42px rgba(255,119,76,.3)); text-shadow: 1px 1px 0 #e05255,2px 2px 0 #d8454a,3px 3px 0 #c93640,4px 4px 0 #b62538,5px 5px 0 #9d1b31,6px 6px 0 #781025; transform: translateY(-50%) translateZ(72px); animation: float-male 5.4s -1.8s ease-in-out infinite; }
.gender-glow { position: absolute; z-index: -1; inset: 16%; border-radius: 50%; background: #ff315f; filter: blur(52px); opacity: .42; transform: translateZ(-30px); animation: glow-pulse 3.8s ease-in-out infinite; }
.spark { position: absolute; border-radius: 50%; background: white; box-shadow: 0 0 20px #ff4368; animation: twinkle 2.4s ease-in-out infinite; }
.spark-one { top: 9%; left: 24%; width: .24rem; animation-delay: -1.2s; }.spark-two { right: 5%; bottom: 28%; width: .34rem; animation-delay: -.4s; }.spark-three { bottom: 12%; left: 36%; width: .18rem; animation-delay: -1.8s; }
.glass-note { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025)); color: rgba(255,255,255,.72); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 16px 55px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.glass-note-one { top: 18%; left: 2%; animation: float-note 5.5s ease-in-out infinite; }.glass-note-two { right: -2%; bottom: 20%; animation: float-note 6.3s -2s ease-in-out infinite reverse; }
.glass-note b { color: var(--red); }.glass-note i { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg,#ffad85,#ed2048); box-shadow: 0 0 14px rgba(255,54,91,.7); }
.scroll-cue { position: absolute; z-index: 5; right: clamp(1.25rem,4vw,4rem); bottom: 4.5rem; display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.35); font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transform: rotate(90deg) translateX(100%); transform-origin: right bottom; }
.scroll-cue i { display: block; width: 3.5rem; height: 1px; overflow: hidden; background: rgba(255,255,255,.12); }.scroll-cue i::after { content: ""; display: block; width: 45%; height: 100%; background: var(--red); animation: scan 2.2s ease-in-out infinite; }
.footer-line { bottom: clamp(1.2rem,3vh,2rem); color: rgba(255,255,255,.28); font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-in { from { opacity: 0; transform: translateY(45%) rotateX(-35deg); filter: blur(10px); } to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { from { transform: rotateX(67deg) rotateY(18deg) rotate(360deg); } to { transform: rotateX(67deg) rotateY(18deg) rotate(0); } }
@keyframes float-symbols { 0%,100% { translate: 0 -5px; } 50% { translate: 0 8px; } }
@keyframes float-female { 0%,100% { translate: -2px 2px; rotate: 0deg; } 50% { translate: 4px -7px; rotate: -2deg; } }
@keyframes float-male { 0%,100% { translate: 2px -2px; rotate: 0deg; } 50% { translate: -4px 8px; rotate: 2deg; } }
@keyframes glow-pulse { 0%,100% { opacity: .24; scale: .9; } 50% { opacity: .46; scale: 1.12; } }
@keyframes float-note { 0%,100% { translate: 0 -5px; } 50% { translate: 0 8px; } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,56,92,.55); } 70%,100% { box-shadow: 0 0 0 .42rem rgba(255,56,92,0); } }
@keyframes breathe { to { opacity: .2; transform: scale(1.12); } }
@keyframes scan { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes perch-float { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-1deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(1deg); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; align-content: center; padding-top: 8rem; }
  .copy-layer { z-index: 5; }
  .visual-layer { position: absolute; z-index: 1; inset: 20% -18% auto 38%; min-height: 62vw; opacity: .7; }
  .orbit-system { width: min(58vw,31rem); }
  .gender-symbols { width: min(52vw,27rem); }
  .glass-note { display: none; }
  .lead { max-width: 29rem; }
}

@media (max-width: 640px) {
  .topbar { top: 1.1rem; }
  .brand { font-size: .72rem; }
  .status-pill { padding: .55rem .7rem; font-size: .56rem; letter-spacing: .08em; }
  .hero { padding: 6.5rem 1.25rem 5.8rem; }
  .visual-layer { inset: 12% -32% auto 26%; min-height: 88vw; opacity: .58; }
  .orbit-system { width: 84vw; }
  .gender-symbols { top: 48%; width: 72vw; }
  .gender-icon { font-size: clamp(7.5rem,31vw,10rem); }
  .gender-female { left: 5%; }
  .gender-male { right: 5%; }
  h1 { font-size: clamp(4.1rem,22vw,7rem); line-height: .76; }
  .perched-woman { bottom: .18em; height: 1.16em; }
  .eyebrow { width: 72%; line-height: 1.6; }
  .lead { max-width: 93%; margin-top: 2rem; font-size: .9rem; line-height: 1.65; }
  .return-callout { max-width: 100%; border-radius: 1rem; }
  .return-callout small { font-size: .6rem; }
  .scroll-cue,.footer-center { display: none; }
  .footer-line { font-size: .5rem; }
}

@media (max-height: 680px) and (min-width: 641px) {
  .hero { padding-top: 6.4rem; padding-bottom: 4.5rem; }
  h1 { font-size: clamp(4.7rem,12vh,7.6rem); }
  .lead { margin-top: 1.5rem; }
  .return-callout { margin-top: 1.25rem; }
}

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