*{box-sizing:border-box}
:root{color-scheme:dark}
html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Inter,Arial,sans-serif}
body{display:flex;justify-content:center}
.page{width:100%;max-width:720px;min-height:100vh;background:#000;display:flex;flex-direction:column;overflow:hidden}
.hero{height:62vh;min-height:520px;position:relative;overflow:hidden;background:#111}
.hero-bg{position:absolute;inset:-28px;background:url("hero.jpeg") center 22%/cover no-repeat;filter:blur(20px) brightness(.62);transform:scale(1.1)}
.hero-image{position:relative;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;animation:heroIn .85s ease both}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 38%,rgba(0,0,0,.17) 62%,#000 100%)}
.profile{position:absolute;left:0;right:0;bottom:18px;text-align:center;padding:0 20px;animation:rise .75s .15s ease both}
.name-row{display:flex;align-items:center;justify-content:center;gap:8px}
h1{font-size:clamp(34px,7vw,52px);line-height:1;margin:0;font-weight:700;letter-spacing:-1.5px;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.verified{width:28px;height:28px;display:inline-flex}
.verified svg{width:100%;height:100%;fill:#169cff;filter:drop-shadow(0 2px 7px rgba(0,0,0,.35))}
.verified .check{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tagline{margin:10px 0 0;color:#efefef;font-size:14px;font-weight:500;letter-spacing:.15px}
.trust-row{margin-top:9px;font-size:14px;color:#d3d3d3;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.online i,.availability-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#21d45c;margin-right:7px;box-shadow:0 0 13px rgba(33,212,92,.75)}
.separator{color:#777}
.actions{padding:18px 34px 10px;display:grid;gap:14px;animation:rise .8s .24s ease both}
.action{position:relative;overflow:hidden;min-height:94px;padding:12px 18px;border-radius:31px;border:2px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#428ce8 0%,#3377cf 100%);color:#fff;text-decoration:none;display:grid;grid-template-columns:52px 1fr 22px;align-items:center;gap:13px;box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .18s ease,filter .18s ease}
.action:hover{transform:translateY(-2px);filter:brightness(1.06)}
.action:active{transform:scale(.985)}
.action-main{background:linear-gradient(180deg,#4a95f1 0%,#397bd3 100%)}
.pulse{animation:softPulse 2.8s ease-in-out infinite}
.shine::after{content:"";position:absolute;top:-20%;left:-45%;width:28%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:shine 4.8s ease-in-out infinite}
.round-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#16c9ee,#10a9db);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.round-icon svg{width:27px;height:27px;fill:none;stroke:#061827;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.round-icon.telegram svg{fill:#fff;stroke:none;width:29px;height:29px}
.copy{display:flex;flex-direction:column;text-align:center;line-height:1.15}
.copy strong{font-size:21px;font-weight:700;letter-spacing:.2px}
.copy span{font-size:15px;margin-top:5px;color:#f4f8ff}
.copy b{font-weight:700}
.chevron{font-size:39px;font-weight:300;line-height:1}
.availability{text-align:center;font-size:13px;color:#d8d8d8;margin-top:2px}
.availability-dot{width:8px;height:8px;margin-right:6px}
.age{text-align:center;color:#9a9a9a;font-size:12px;line-height:1.45;margin:2px 8px 0}
footer{margin-top:auto;text-align:center;color:#888;font-size:12px;padding:20px 15px 28px}
@keyframes heroIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes softPulse{0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.32),0 0 0 0 rgba(63,142,232,.35)}50%{box-shadow:0 10px 24px rgba(0,0,0,.32),0 0 0 8px rgba(63,142,232,0)}}
@keyframes shine{0%,60%{left:-45%}82%,100%{left:125%}}
@media(max-width:480px){
  .hero{height:58vh;min-height:455px}
  .actions{padding:15px 16px 8px}
  .action{min-height:86px;border-radius:28px;grid-template-columns:48px 1fr 18px;padding:10px 14px}
  .round-icon{width:46px;height:46px}
  .copy strong{font-size:18px}
  .copy span{font-size:14px}
  .chevron{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}