@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@1,500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:Manrope,system-ui,sans-serif;color:#fbf1ea;background:#160f16;font-synthesis:none;--pink:#f2a7c3;--fuchsia:#ff015b;--muted:#c4b1be;--line:#ffffff21}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;background:#160f16}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.aura{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.aura i:nth-child(1){width:55vmax;height:55vmax;left:-15vmax;top:-20vmax;background:#c3125a}
.aura i:nth-child(2){width:45vmax;height:45vmax;right:-15vmax;top:20vh;background:#5b3fa8;animation-delay:-6s}
.aura i:nth-child(3){width:35vmax;height:35vmax;left:30vw;bottom:-22vmax;background:#9d7330;opacity:.35;animation-delay:-12s}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.15)}}

.gate{flex:1;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;width:min(1100px,calc(100% - 64px));margin:auto;padding-block:60px}
.card-stage{perspective:1100px;display:grid;place-items:center;min-height:420px}
.pink-card{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;position:relative;width:min(440px,82vw);aspect-ratio:1.586;border-radius:28px;padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  background:radial-gradient(circle at 85% 110%,#ffffff2e 0 18%,transparent 18.5% 24%,#ffffff1c 24.5% 25%,transparent 25.5%),linear-gradient(135deg,#ff2f7d,#ff015b 45%,#c40050);
  box-shadow:0 40px 80px -20px #ff015b70,0 18px 40px #0007,inset 0 1px 0 #ffffff60;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;animation:float 7s ease-in-out infinite;will-change:transform}
.pink-card>*{transform:translateZ(40px)}
.pink-card img{width:44%;height:auto;filter:drop-shadow(0 10px 18px #7a003066)}
.pc-top,.pc-bottom{display:flex;justify-content:space-between;align-items:center}
.pc-top b{font-size:11px;letter-spacing:2.5px}
.pc-top em{font-style:normal;font-size:12px;font-weight:800;color:#ff015b;background:#fff;border-radius:99px;padding:6px 13px}
.pc-bottom{flex-direction:column;align-items:flex-start;gap:3px}
.pc-bottom b{font-size:17px}.pc-bottom small{font-size:12px;opacity:.85}
.pc-shine{position:absolute;inset:0;border-radius:inherit;transform:translateZ(1px);pointer-events:none;mix-blend-mode:overlay;background:radial-gradient(circle at var(--gx) var(--gy),#ffffffb0,transparent 45%),linear-gradient(115deg,transparent 30%,#ffffff40 48%,transparent 60%)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--pink);display:flex;align-items:center;gap:10px;margin:0}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px #f2a7c399}
h1{font-size:clamp(48px,6vw,78px);line-height:1;letter-spacing:-4px;margin:24px 0 20px}
h1 span{color:#a78c9f}
.lead{font-size:17px;line-height:1.6;font-weight:600;color:#e9d9e2;margin:0 0 28px}
.field{display:flex;gap:6px;padding:6px;border-radius:99px;border:1px solid #ffffff38;background:#ffffff0d;backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 #ffffff1c;max-width:430px;transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px #f2a7c326,inset 0 1px 0 #ffffff1c}
.field.has-error{border-color:#ff6b8f;animation:shake .4s}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:16px;font-weight:600;padding:0 18px;letter-spacing:.5px}
.field input::placeholder{color:#b9a3b2}
.field button{border:0;border-radius:99px;padding:15px 24px;font:inherit;font-weight:800;font-size:14px;background:var(--pink);color:#301e2a;cursor:pointer;transition:transform .2s,background .2s}
.field button:hover{background:#f7c4d8;transform:translateX(2px)}
.field button:focus-visible,.web-link:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.error{color:#ff9db5;font-size:13px;font-weight:700;margin:14px 0 0 18px}
.web-link{display:inline-block;margin-top:26px;font-size:12px;color:var(--muted)}
.web-link span{color:var(--pink)}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.panel{animation:rise .9s cubic-bezier(.2,.8,.2,1) both .1s}
.card-stage{animation:cardIn 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) rotateX(55deg) translateY(80px) scale(.8)}}

footer{position:relative;text-align:center;padding:24px 20px 30px;display:grid;gap:8px}
footer strong{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;font-size:20px}
footer small{font-size:10px;color:#a993a3}

@media(max-width:820px){
  .gate{grid-template-columns:1fr;text-align:center;gap:10px;padding-block:30px;width:calc(100% - 36px)}
  .card-stage{min-height:0;padding:20px 0 30px}
  .pink-card{width:min(330px,84vw);border-radius:22px;padding:20px 22px}
  .eyebrow{justify-content:center}
  h1{font-size:52px;letter-spacing:-3px}
  .field{margin-inline:auto}
  .error{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.aura i,.pink-card,.panel,.card-stage,.field.has-error{animation:none}}