:root{
  --bg1:#f07f2e; /* тёплый оранжево-жёлтый фон (из картинки) */
  --card:#fff0f6; /* светлый тон карточки для контраста */
  --muted:#6f6b6b;
  --accent1:#ff4f8b; /* центральный розовый бейджа */
  --accent2:#00c7b7; /* бирюзовый акцент */
  --accent3:#ffb400; /* яркий жёлто-оранжевый */
  --cream:#f7edd6; /* тёплый кремовый для текста */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg1) 0%, #ffb76b 100%);
  background-size:100% 100%, 200% 200%;
  background-position:center;
  color:#2b2b2b;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  animation: backgroundShift 18s ease-in-out infinite alternate;
}
.card{
  width:100%;
  max-width:720px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,245,0.98));
  border-radius:14px;
  padding:28px;
  box-shadow:0 6px 30px rgba(2,6,23,0.6);
  animation: cardEnter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.brand{display:flex;gap:16px;align-items:center;animation: contentRise 650ms 120ms ease both}
.logo{width:64px;height:64px;border-radius:50%;animation: logoPop 900ms 80ms cubic-bezier(0.2, 0.9, 0.2, 1) both}
h1{margin:0;font-size:1.6rem}
 .tag{margin:4px 0 0;color:var(--muted);font-size:0.9rem}
.about{margin:18px 0;color:#333;animation: contentRise 650ms 200ms ease both}
.links{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;color:inherit;text-align:center;width:100%;transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent3));color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.social{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.social a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:12px 14px;border-radius:12px;font-weight:700;letter-spacing:0.2px;box-shadow:0 8px 20px rgba(0,0,0,0.12);transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease}
.social-icon{width:22px;height:22px;flex:0 0 22px}
.social-btn.instagram{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 45%,#8134af 100%)}
.social-btn.youtube{background:linear-gradient(135deg,#ff0033 0%,#cc0000 100%)}
.social-btn.tiktok{background:linear-gradient(135deg,#010101 0%,#1f1f1f 100%);position:relative;overflow:hidden}
.social-btn.tiktok::before,.social-btn.tiktok::after{content:"";position:absolute;inset:0;pointer-events:none}
.social-btn.tiktok::before{background:linear-gradient(135deg, transparent 30%, rgba(255,0,80,0.18) 48%, transparent 60%)}
.social-btn.tiktok::after{background:linear-gradient(315deg, transparent 35%, rgba(0,255,255,0.16) 52%, transparent 66%)}
.footer{margin-top:18px;color:var(--muted);font-size:0.9rem;animation: contentRise 650ms 360ms ease both}

.btn:hover,
.social a:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 14px 30px rgba(0,0,0,0.16);
  filter:saturate(1.05);
}

.btn:active,
.social a:active{
  transform:translateY(0) scale(0.99);
}

.social-btn span{position:relative;z-index:1}
.social-btn .social-icon{position:relative;z-index:1}

.links .btn,
.links .social-btn{
  opacity:0;
  transform:translateY(14px) scale(0.98);
  animation: buttonReveal 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.links .btn{animation-delay:260ms}
.links .social-btn.instagram{animation-delay:360ms}
.links .social-btn.youtube{animation-delay:440ms}
.links .social-btn.tiktok{animation-delay:520ms}

@keyframes cardEnter{
  from{opacity:0;transform:translateY(24px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes contentRise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes buttonReveal{
  from{opacity:0;transform:translateY(14px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes backgroundShift{
  from{background-position:0% 0%}
  to{background-position:100% 100%}
}

@keyframes logoPop{
  0%{opacity:0;transform:scale(0.72) rotate(-8deg)}
  60%{opacity:1;transform:scale(1.06) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  body{animation:none}
}

@media (max-width:520px){
  .card{padding:20px}
  .logo{width:52px;height:52px}
  h1{font-size:1.3rem}
}