:root{
  --bg:#0b1021;
  --fg:#e8ecf1;
  --muted:#b7c3ce;
  --accent:#ffd100; /* UA yellow */
  --accent2:#0057b7; /* UA blue */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 1200px at 80% -10%, rgba(0,87,183,.25), transparent),
              radial-gradient(1200px 1200px at -10% 110%, rgba(255,209,0,.18), transparent),
              var(--bg);
  color:var(--fg);
}
.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:3rem 1.25rem;
  gap:2rem;
  text-align:center;
}
.brand .logo{
  font-size:3rem;
  line-height:1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.brand .club{
  margin:.5rem 0 0;
  font-weight:800;
  font-size:2rem;
  letter-spacing:.2px;
}
.brand .location{
  margin:.25rem 0 0;
  color:var(--muted);
  font-weight:600;
}
.hero .soon{
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  margin: .75rem 0 .25rem;
  font-weight:800;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub, .hero .ua{
  margin:.25rem 0;
  color:var(--muted);
}
.instagram{
  display:inline-block;
  margin-top:1.25rem;
  padding:.8rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:#10131a;
  background: linear-gradient(90deg, var(--accent), #ffe168);
  box-shadow: 0 8px 24px rgba(255,209,0,.25), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .2s ease;
}
.instagram:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(255,209,0,.32), inset 0 -2px 0 rgba(0,0,0,.08); }
.instagram:active{ transform: translateY(0); }
.footer{
  margin-top:2rem;
  color:var(--muted);
}