:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0f0d14;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  min-height:100vh;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,111,175,.24),transparent 24%),
    radial-gradient(circle at 24% 16%,rgba(255,198,91,.17),transparent 28%),
    linear-gradient(145deg,#15121a 0%,#2d1c35 54%,#6d2e4e 100%);
}
body>*:not(.desktop-gate){display:none!important}
.desktop-gate{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(24px,4vw,54px);
  isolation:isolate;
}
.desktop-gate::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:-10%;right:-10%;bottom:-36vh;
  height:74vh;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  transform:perspective(390px) rotateX(61deg);
  transform-origin:top;
  opacity:.8;
}
.desktop-gate::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(42vw,540px);
  aspect-ratio:1;
  right:-10vw;top:8vh;
  border-radius:50%;
  background:linear-gradient(180deg,#ffd56a,#f47fa5 62%,#bd4d83);
  box-shadow:0 0 90px rgba(244,127,165,.18);
  opacity:.88;
}
.desktop-gate__card{
  width:min(740px,100%);
  padding:clamp(28px,4vw,48px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(18,15,23,.9),rgba(35,27,39,.82));
  box-shadow:0 32px 90px rgba(7,5,11,.36);
  backdrop-filter:blur(18px);
  transform:translateY(-2.5vh);
}
.desktop-gate__kicker{
  display:inline-flex;
  margin:0 0 18px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#ffb6d9;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.15em;
}
.desktop-gate h1{
  max-width:690px;
  margin:0;
  font-size:clamp(46px,5.6vw,78px);
  line-height:.9;
  letter-spacing:-.065em;
  font-weight:1000;
  text-wrap:balance;
}
.desktop-gate__lead{
  max-width:630px;
  margin:20px 0 0;
  color:rgba(255,255,255,.76);
  font-size:clamp(16px,1.55vw,20px);
  line-height:1.5;
}
.desktop-gate__joke{
  margin:20px 0 0;
  padding:13px 16px;
  border-left:4px solid #ef6eae;
  border-radius:0 14px 14px 0;
  background:rgba(239,110,174,.08);
  color:#ffd2e7;
  font-size:16px;
  font-weight:900;
}
.desktop-gate__transfer{
  display:grid;
  grid-template-columns:176px minmax(0,1fr);
  align-items:center;
  gap:24px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
}
.desktop-gate__qr-card{
  display:grid;
  justify-items:center;
  gap:9px;
}
.desktop-gate__qr-frame{
  width:164px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(7,5,11,.24);
}
.desktop-gate__qr-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.desktop-gate__qr-fallback{
  color:#271e27;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.12em;
  text-align:center;
}
.desktop-gate__qr-card>small,
.desktop-gate__handoff small{
  color:rgba(255,255,255,.52);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.desktop-gate__handoff{
  display:grid;
  gap:7px;
  align-content:center;
}
.desktop-gate__handoff strong{
  max-width:360px;
  color:rgba(255,255,255,.9);
  font-size:18px;
  line-height:1.35;
}
@media(max-height:720px){
  .desktop-gate{padding-block:18px}
  .desktop-gate__card{padding-block:24px;transform:translateY(-10px)}
  .desktop-gate h1{font-size:clamp(40px,5vw,62px)}
  .desktop-gate__lead,.desktop-gate__joke{margin-top:14px}
  .desktop-gate__transfer{margin-top:16px;padding-top:15px}
  .desktop-gate__qr-frame{width:138px}
  .desktop-gate__transfer{grid-template-columns:150px minmax(0,1fr);gap:20px}
}
