:root{
  --bg1:#160b2e;   /* deep purple */
  --bg2:#4b0f3a;   /* plum/rose */
  --bg3:#7a0d2c;   /* wine red */
  --text:#e8e9ff;
  --muted:#b9b4c7;
  --accent:#ff5470;      /* rose highlight */
  --accent-2:#ff9b5e;    /* warm orange-pink glow */
  --btn-bg:#ff5470;
  --btn-text:#1b1028;
  --ghost:#2c1b3f;
  --card:#1a1030;
  --line:#2b1d46;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg1)}

.container{width:min(1200px,92%);margin-inline:auto}

/* Background layers */
.bg-grad{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(60% 55% at 80% 20%, rgba(255,155,94,0.25), transparent 60%),
    radial-gradient(60% 55% at 15% 75%, rgba(255,84,112,0.35), transparent 60%),
    linear-gradient(145deg, var(--bg1), var(--bg2) 45%, var(--bg3));
}
.bg-glow{ position:fixed; inset:0; pointer-events:none; z-index:-2 }
.bg-glow-1{
  background: radial-gradient(600px 380px at 70% 28%, rgba(255,84,112,0.5), transparent 60%);
}
.bg-glow-2{
  background: radial-gradient(520px 360px at 20% 80%, rgba(255,155,94,0.35), transparent 60%);
}

/* Header */
.site-header{ padding:18px 0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand-mark{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,155,94,0.8), rgba(255,84,112,0.9));
  color:#2b1030; font-size:20px; box-shadow:0 10px 30px rgba(255,84,112,0.35)
}
.brand-title{ font-weight:800; letter-spacing:.5px }
.brand-accent{ color:var(--accent) }

/* Hero */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px;
  align-items:center; min-height:65vh; padding:40px 0 20px;
}
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; padding-top:24px }
}

.hero-title{ font-size: clamp(32px, 5vw, 56px); margin:0; line-height:1.06 }
.text-accent{ color: var(--accent) }
.hero-sub{ font-size: clamp(18px, 2.6vw, 26px); margin:12px 0 12px; color:#ffd7e1; font-weight:800 }
.hero-text{ margin:0 0 22px; color: var(--muted); line-height:1.7 }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.3px; text-decoration:none; cursor:pointer;
  padding:13px 18px; border-radius:14px; border:1px solid transparent;
  transition: transform .08s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-cta{
  background: linear-gradient(180deg, var(--btn-bg), #ff3564);
  color: var(--btn-text);
  box-shadow:
    0 10px 20px rgba(255,84,112,.30),
    0 0 0 0 rgba(255,155,94,.0);
}
.btn-cta:active{ transform: translateY(1px) }
.btn-cta.glow-click,
.btn-cta:hover{
  box-shadow:
    0 14px 30px rgba(255,84,112,.35),
    0 0 30px rgba(255,155,94,.35);
  filter: saturate(1.05);
}

.btn-ghost{
  background: var(--ghost);
  color: var(--text);
  border-color: #3a2857;
}
.btn-ghost:hover{ box-shadow:0 12px 24px rgba(80,40,120,.35) }

.icon-telegram{ width:20px; height:20px; display:block }

/* Hero image */
.hero-art{ display:flex; justify-content:center }
.hero-img{
  width:min(460px, 86vw);
  filter: drop-shadow(0 25px 60px rgba(0,0,0,.45));
  animation: subtleFloat 7s ease-in-out infinite;
}
@keyframes subtleFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-6px) }
}

/* Footer */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:30px 0; border-top:1px solid var(--line); margin-top:28px;
}
@media (max-width: 700px){
  .site-footer{ flex-direction:column; align-items:flex-start }
}
.brand-mini{ font-weight:800 }
.foot-copy{ color:var(--muted); font-size:14px }
.foot-links{ display:flex; flex-wrap:wrap; gap:12px }
.footer-link{
  color:#ffd7e1; text-decoration:none; font-weight:600; border-bottom:1px dashed transparent;
}
.footer-link:hover{ border-bottom-color:#ffd7e1 }

/* Mobile tap glow fix (ensures fast feedback) */
@media (hover:none){
  .btn-cta:active{ box-shadow:0 0 24px rgba(255,155,94,.45) }
}