:root { --background: #030306; --foreground: #fff; --red: #ff101c; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }

.landing-shell {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: clamp(44px, 7vh, 84px) 22px;
  background: radial-gradient(circle at 50% 29%, rgba(153,0,18,.28), transparent 30%), linear-gradient(135deg,#08080b 0%,#030306 47%,#08070a 100%);
}
.landing-shell::before { content:""; position:absolute; inset:0; z-index:-5; opacity:.18; background-image:repeating-linear-gradient(115deg,transparent 0 4px,rgba(255,255,255,.025) 4px 5px); }
.ambient { position:absolute; pointer-events:none; z-index:-4; filter:blur(20px); }
.ambient-red { width:55vw; height:38vw; left:-22vw; bottom:-15vw; background:radial-gradient(ellipse,rgba(255,0,22,.65),transparent 66%); }
.ambient-blue { width:55vw; height:24vw; right:-25vw; top:39%; background:radial-gradient(ellipse,rgba(0,149,255,.22),transparent 66%); }
.slash { position:absolute; width:430px; height:120px; z-index:-2; background:linear-gradient(180deg,#ec0017,#61000a); transform:rotate(-45deg); box-shadow:0 0 22px rgba(255,0,26,.55); }
.slash::after { content:""; position:absolute; inset:18px -12px; background:#080609; }
.slash-top { top:-65px; left:-190px; }
.slash-bottom { right:-210px; bottom:-70px; }

.hero { width:min(100%,780px); display:flex; flex-direction:column; align-items:center; text-align:center; animation:hero-in .8s cubic-bezier(.2,.8,.2,1) both; }
.profile-frame { width:clamp(236px,43vw,430px); aspect-ratio:1; padding:7px; border-radius:50%; background:linear-gradient(145deg,#ff5860,#ff0615 45%,#97000e); box-shadow:0 0 13px #ff1824,0 0 44px rgba(255,0,25,.57),inset 0 0 12px rgba(255,255,255,.45); }
.profile-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.brand-block { margin-top:clamp(28px,4.8vh,50px); }
.brand-title { margin:0; font-size:clamp(3.25rem,9.2vw,6.7rem); font-weight:1000; line-height:.9; letter-spacing:-.055em; transform:scaleX(1.05); text-shadow:0 4px 0 rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.9); }
.brand-mhb { background:linear-gradient(#fff 25%,#e8edf3 56%,#91a6bc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-signal { background:linear-gradient(#ff4a40 5%,#ff151e 45%,#a80017 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.channel-label { margin-top:clamp(22px,3.4vh,32px); display:flex; align-items:center; justify-content:center; gap:22px; }
.channel-label p { margin:0; color:#f7f7f7; font-size:clamp(.88rem,2.2vw,1.55rem); font-weight:700; letter-spacing:.42em; white-space:nowrap; }
.label-wing { width:clamp(34px,8vw,76px); height:7px; background:var(--red); clip-path:polygon(0 50%,65% 0,100% 50%,65% 100%); }

.telegram-button { width:min(100%,620px); min-height:clamp(90px,12vw,124px); margin-top:clamp(54px,7vh,74px); padding:12px 34px; display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,38px); border:2px solid #28e8ff; border-radius:999px; color:#fff; text-decoration:none; background:linear-gradient(145deg,#13c3f3 0%,#149fff 54%,#0872f3 100%); box-shadow:0 0 10px #00d9ff,0 0 33px rgba(0,141,255,.76),inset 0 2px 3px rgba(255,255,255,.4); transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.telegram-button:hover { transform:translateY(-4px) scale(1.015); filter:brightness(1.08); box-shadow:0 0 13px #00e1ff,0 0 48px rgba(0,141,255,.9),inset 0 2px 3px rgba(255,255,255,.5); }
.telegram-button:active { transform:translateY(0) scale(.985); }
.telegram-button:focus-visible { outline:4px solid #fff; outline-offset:5px; }
.telegram-icon { flex:0 0 auto; display:grid; place-items:center; width:clamp(64px,10vw,88px); aspect-ratio:1; border-radius:50%; color:#fff; background:linear-gradient(145deg,#20c8f5,#0789ec); box-shadow:inset 0 2px 5px rgba(255,255,255,.28),0 4px 11px rgba(0,42,100,.48); }
.telegram-icon svg { width:58%; height:58%; filter:drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.button-divider { align-self:stretch; width:2px; margin:2px 0; background:rgba(255,255,255,.8); }
.button-label { font-size:clamp(1.65rem,4.3vw,3rem); font-weight:800; letter-spacing:-.025em; }
.microcopy { margin:24px 0 0; color:rgba(255,255,255,.48); font-size:.78rem; letter-spacing:.08em; }
@keyframes hero-in { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width:600px) {
  .landing-shell { min-height:100svh; padding:60px 20px 72px; place-items:start center; }
  .hero { max-width:430px; }
  .profile-frame { width:min(74vw,322px); }
  .brand-block { margin-top:35px; }
  .brand-title { font-size:clamp(3rem,16vw,4.7rem); white-space:nowrap; }
  .channel-label { gap:10px; }
  .channel-label p { font-size:clamp(.7rem,3.25vw,.98rem); letter-spacing:.32em; }
  .label-wing { width:34px; height:5px; }
  .telegram-button { min-height:88px; margin-top:53px; padding:10px 20px; gap:18px; }
  .telegram-icon { width:65px; }
  .button-label { font-size:clamp(1.5rem,7vw,2rem); }
  .microcopy { font-size:.66rem; }
}
@media (max-width:390px) { .landing-shell{padding-inline:15px}.brand-title{font-size:2.85rem}.channel-label p{letter-spacing:.25em}.telegram-button{padding-inline:14px;gap:14px}.telegram-icon{width:58px}.button-label{font-size:1.42rem} }
@media (prefers-reduced-motion:reduce) { .hero{animation:none}.telegram-button{transition:none} }