*{box-sizing:border-box}
html{background:#050505}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,110,0,.12),transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(255,90,0,.08),transparent 30%),
    #050505;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
body:before,body:after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  width:150px;height:150px;opacity:.7;
  background:linear-gradient(135deg,#ff7200 0 12%,transparent 12% 25%,#2a1305 25% 31%,transparent 31%);
}
body:before{top:0;left:0}
body:after{right:0;bottom:0;transform:rotate(180deg)}
.page{width:min(100%,980px);margin:auto;padding:28px 24px 34px}
.brand{margin-bottom:34px}
.logo-row{display:flex;align-items:center;justify-content:center;gap:20px}
.logo{width:74px;height:74px;object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 0 22px rgba(255,123,0,.28)}
.logo-right{transform:scaleX(-1)}
.brand-title{text-align:center}
.brand-title h1{
  margin:0;
  font-size:clamp(28px,6vw,52px);
  letter-spacing:5px;
  font-weight:900;
  color:#ff7900;
  text-shadow:0 0 20px rgba(255,121,0,.32)
}
.brand-title p{
  margin:7px 0 0;
  font-size:11px;
  letter-spacing:3px;
  color:#eee;
}
.brand-title p span{color:#ff7900;margin:0 7px}
.links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.social-card{
  min-height:155px;
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 24px;
  border:2px solid #ff7a00;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(20,20,20,.92),rgba(4,4,4,.98));
  box-shadow:0 0 18px rgba(255,105,0,.12),inset 0 0 22px rgba(255,105,0,.025);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.social-card:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(255,105,0,.25);border-color:#ff9b38}
.social-card.inactive{opacity:.55;cursor:default}
.icon-wrap{
  width:72px;height:72px;min-width:72px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#111;
}
.icon-wrap svg{width:47px;height:47px;fill:currentColor}
.telegram .icon-wrap{color:#18aee0;background:#09202a}
.instagram .icon-wrap{color:#fff;background:radial-gradient(circle at 30% 110%,#ffd600 0 12%,#ff7a00 35%,#d62976 65%,#4f5bd5 100%)}
.instagram svg{fill:none;stroke:currentColor;stroke-width:1.8}
.instagram svg .fill{fill:currentColor;stroke:none}
.whatsapp .icon-wrap{color:#25d366;background:#092414}
.whatsapp svg{width:49px;height:49px}
.tiktok .icon-wrap{color:#fff;background:#090909}
.tiktok svg{filter:drop-shadow(2px 2px 0 #fe2c55) drop-shadow(-2px -2px 0 #25f4ee)}
.x-twitter .icon-wrap{color:#fff;background:#0b0b0b}
.youtube .icon-wrap{color:#ff2f3d;background:#21090b}
.vip .icon-wrap{color:#ffcc55;background:radial-gradient(circle,#241b05,#080705);border:1px solid #d9ad42;box-shadow:0 0 16px rgba(255,198,66,.2)}
.vip-icon svg{width:58px;height:58px}
.vip-icon text{font-size:5px;font-weight:900;fill:#ffcf55;stroke:none}
.card-text{font-size:20px;line-height:1.12;font-weight:800;color:#f7f7f7}
.card-text small{display:block;margin-top:8px;font-size:11px;line-height:1.25;font-weight:500;font-style:italic;color:#ddd}
.arrow{margin-left:auto;font-size:43px;line-height:1;color:#ff9a18;font-weight:300}
footer{text-align:center;margin-top:45px}
.flame-line{display:flex;align-items:center;gap:18px;justify-content:center;color:#ff7900}
.flame-line:before,.flame-line:after{content:"";height:2px;width:30%;max-width:270px;background:linear-gradient(90deg,transparent,#ff7900)}
.flame-line:after{background:linear-gradient(90deg,#ff7900,transparent)}
.flame-line span{font-size:25px}
footer p{margin:15px 0 0;color:#ddd;font-size:14px}
@media(max-width:680px){
  .page{padding:18px 12px 28px}
  .logo-row{gap:8px}
  .logo{width:48px;height:48px}
  .brand-title h1{font-size:27px;letter-spacing:2px}
  .brand-title p{font-size:7px;letter-spacing:1.5px}
  .brand-title p span{margin:0 3px}
  .brand{margin-bottom:22px}
  .links-grid{gap:12px}
  .social-card{min-height:145px;padding:18px 12px;gap:10px;border-radius:15px}
  .icon-wrap{width:54px;height:54px;min-width:54px}
  .icon-wrap svg{width:35px;height:35px}
  .vip-icon svg{width:43px;height:43px}
  .card-text{font-size:14px}
  .card-text small{font-size:9px;margin-top:5px}
  .arrow{font-size:31px}
}
@media(max-width:390px){
  .social-card{min-height:135px;padding:15px 9px}
  .icon-wrap{width:48px;height:48px;min-width:48px}
  .icon-wrap svg{width:31px;height:31px}
  .card-text{font-size:12px}
  .arrow{font-size:27px}
}