:root{
  color-scheme:dark;
  --text:#fff5fc;
  --pink:#ff87c5;
  --purple:#a77cfa;
  --cyan:#6ee6e8;
  --surface:rgba(17,12,34,.9);
  --surface-2:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,
body{min-height:100%;background-color:#160d2d}
body{
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 48% 45% at 21% 15%,rgba(237,80,157,.29),transparent 95%),
    radial-gradient(ellipse 38% 48% at 92% 70%,rgba(96,211,226,.15),transparent 93%),
    radial-gradient(ellipse 65% 60% at 67% 20%,rgba(96,60,178,.38),transparent 85%),
    linear-gradient(150deg,#220d32 0%,#150d2b 52%,#0a1327 100%);
  background-attachment:fixed;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg,transparent 52%,rgba(255,141,200,.045) 75%,transparent 98%);
}
body.modal-open{overflow:hidden}
.landing{
  width:min(100% - 72px,1030px);
  min-height:100dvh;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,460px) minmax(0,1fr);
  align-items:center;
  justify-content:center;
  gap:clamp(42px,7vw,100px);
  padding-block:max(50px, env(safe-area-inset-top, 0px) + 22px) max(50px, env(safe-area-inset-bottom, 0px) + 18px);
}
.photo-wrap{
  isolation:isolate;
  position:relative;
  width:100%;
  aspect-ratio:1132/1390;
  border-radius:20px;
  box-shadow:0 26px 90px rgba(5,4,22,.62),0 0 55px rgba(234,83,175,.11);
}
.photo-wrap::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:22px;
  background:linear-gradient(145deg,rgba(255,175,224,.95),rgba(157,113,239,.67) 53%,rgba(91,222,226,.78));
}
.photo-wrap img{
  width:100%;height:100%;display:block;object-fit:cover;
  border-radius:19px;
}
.content{max-width:500px}
h1{
  font-size:clamp(52px,5.9vw,80px);
  line-height:1.035;
  letter-spacing:-.065em;
  font-weight:800;
  margin:0 0 37px;
  text-wrap:balance;
}
h1 span{display:block;color:var(--pink)}
.telegram-button{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;
  border-radius:50%;
  text-decoration:none;
  color:#251332;
  background:linear-gradient(135deg,#ffd0e6 0%,#ff89c9 46%,#bca1fb 100%);
  box-shadow:0 11px 32px rgba(227,96,178,.28),inset 0 1px 0 rgba(255,255,255,.62);
  transition:transform .2s ease,box-shadow .2s ease;
}
.telegram-button:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(227,96,178,.42)}
.telegram-button:focus-visible,.modal-button:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.telegram-icon{width:27px;height:27px;flex:none}
.modal-backdrop{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(8,7,18,.68);
  backdrop-filter:blur(10px);
  z-index:50;
}
.modal-backdrop[hidden]{display:none}
.modal-card{
  width:min(100%,420px);
  border-radius:24px;
  padding:24px 22px 22px;
  background:linear-gradient(180deg,rgba(30,18,50,.96),rgba(14,12,30,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 30px rgba(255,136,198,.14);
  text-align:left;
}
.modal-kicker{
  margin:0 0 10px;
  color:var(--pink);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.82rem;
}
.modal-card h2{
  margin:0 0 10px;
  font-size:1.65rem;
  line-height:1.05;
}
.modal-card p{
  margin:0;
  color:rgba(255,245,252,.85);
  line-height:1.55;
}
.modal-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
}
.modal-button{
  flex:1;
  min-height:48px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
}
.modal-button.secondary{
  background:var(--surface-2);
  color:var(--text);
}
.modal-button.primary{
  color:#251332;
  background:linear-gradient(135deg,#ffd0e6 0%,#ff89c9 46%,#bca1fb 100%);
  box-shadow:0 10px 26px rgba(227,96,178,.22),inset 0 1px 0 rgba(255,255,255,.62);
}
@media(max-width:700px){
  .landing{
    width:min(100% - 40px,410px);
    min-height:100dvh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    gap:26px;
    padding-block:max(24px, env(safe-area-inset-top, 0px) + 18px) max(26px, env(safe-area-inset-bottom, 0px) + 18px);
  }
  .photo-wrap{width:100%;max-width:400px;margin-inline:auto;border-radius:17px}
  .photo-wrap::before{border-radius:19px}
  .photo-wrap img{border-radius:16px}
  .content{text-align:center}
  h1{font-size:clamp(38px,9.7vw,52px);line-height:1.06;margin:0 0 24px}
  h1 span{display:inline;color:var(--pink)}
  .telegram-button{width:58px;height:58px}
  .modal-card{padding:22px 18px 18px;border-radius:22px}
  .modal-card h2{font-size:1.45rem}
}
@media(max-width:380px){
  .landing{width:calc(100% - 34px);gap:22px;padding-block:max(18px, env(safe-area-inset-top, 0px) + 12px) max(24px, env(safe-area-inset-bottom, 0px) + 14px)}
  h1{font-size:clamp(33px,9vw,42px);margin-bottom:20px}
  .telegram-button{width:56px;height:56px}
  .modal-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.telegram-button{transition:none}}