:root {
  --bg: #070916;
  --panel: rgba(10, 14, 27, .84);
  --text: #f5f7ff;
  --muted: #aab0c3;
  --gold: #ffd529;
  --violet: #6e48ff;
  --magenta: #bb46e8;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, rgba(70, 43, 163, .13), transparent 38%),
    linear-gradient(180deg, #070914 0%, #080b18 54%, #050710 100%);
}

.scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora { position: absolute; border-radius: 50%; filter: blur(55px); opacity: .34; }
.aurora--violet { width: 56vw; height: 56vw; left: -22vw; top: 10vh; background: radial-gradient(circle, #5d27ff 0%, rgba(93,39,255,.18) 40%, transparent 72%); }
.aurora--gold { width: 55vw; height: 55vw; right: -26vw; top: 10vh; background: radial-gradient(circle, #ff9b19 0%, rgba(255,145,0,.16) 42%, transparent 72%); }
.grid {
  position: absolute; left: -15%; right: -15%; bottom: -22%; height: 56%;
  transform: perspective(600px) rotateX(66deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(119,74,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,170,54,.13) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 100%);
}
.orbit { position: absolute; border-radius: 50%; border: 3px solid transparent; filter: drop-shadow(0 0 16px currentColor); opacity: .55; }
.orbit--left { width: 44vw; height: 20vw; left: -13vw; bottom: 21vh; border-top-color: #6f38ff; color: #6f38ff; transform: rotate(-18deg); }
.orbit--right { width: 44vw; height: 20vw; right: -12vw; top: 22vh; border-top-color: #ffae24; color: #ffae24; transform: rotate(-24deg); }

.coin {
  position: absolute; width: 120px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: 58px; font-weight: 800;
  color: rgba(255,255,255,.45); border: 5px solid currentColor;
  box-shadow: inset 0 0 22px currentColor, 0 0 28px rgba(80,50,200,.22);
  opacity: .38; backdrop-filter: blur(4px);
}
.coin::before { content: ""; position: absolute; inset: 10px; border: 1px solid currentColor; border-radius: 50%; opacity: .6; }
.coin--one { left: 2vw; top: 11vh; color: #8b55ff; transform: rotate(-18deg) scale(.78); }
.coin--two { right: 5vw; bottom: 13vh; color: #f5a52a; transform: rotate(15deg) scale(.72); }
.coin--three { left: 7vw; bottom: -1vh; color: #6d42ff; transform: scale(.62); opacity: .22; }
.spark { position:absolute; width:5px; height:5px; border-radius:50%; box-shadow:0 0 14px currentColor; }
.spark--1{left:12%;top:23%;color:#b75cff;background:currentColor}.spark--2{right:19%;top:19%;color:#ffb438;background:currentColor}.spark--3{left:18%;bottom:31%;color:#8454ff;background:currentColor}.spark--4{right:11%;bottom:26%;color:#ffa638;background:currentColor}

.landing {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 106px 22px 34px;
}
.hero-card {
  position: relative;
  width: min(650px, 94vw);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(16,19,31,.92), rgba(7,12,24,.9)),
    radial-gradient(circle at 50% -20%, rgba(112,62,255,.14), transparent 50%);
  box-shadow: 0 32px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.hero-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(170,132,255,.9), rgba(255,255,255,.05) 40%, rgba(255,176,54,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.45;
}
.avatar-wrap {
  position: absolute; left:50%; top:0; transform:translate(-50%,-51%);
  width: 154px; height:154px; border-radius:50%; padding:3px;
  background: linear-gradient(145deg, #f6f6f6, #6941ff 48%, #ffbb3e);
  box-shadow: 0 18px 45px rgba(0,0,0,.4), 0 0 34px rgba(99,63,255,.12);
}
.avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:#080a12; }
.verified {
  position:absolute; right:4px; bottom:18px; width:31px; height:31px; display:grid; place-items:center;
  border-radius:50%; background:#2495ff; color:#fff; font-size:18px; font-weight:900; border:3px solid #0a0d18;
}
.card-content { padding: 105px 48px 42px; text-align:center; }
.headline { margin:0 0 24px; font-size: clamp(31px, 5vw, 49px); line-height:1.12; letter-spacing:-.035em; font-weight:800; }
.headline span { display:block; }
.headline strong { color: var(--gold); font-weight:900; }
.members-pill {
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px; margin-bottom:27px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.05); border-radius:999px;
  color:#d7d9e2; font-size:17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.online-dot { width:10px; height:10px; border-radius:50%; background:#20dc72; box-shadow:0 0 14px rgba(32,220,114,.85); }
.benefits { display:grid; gap:14px; margin: 4px auto 28px; width:min(100%, 500px); }
.benefit { display:flex; align-items:center; justify-content:center; gap:11px; color:#d8dbe6; font-size:18px; line-height:1.35; }
.benefit-icon { width:26px; flex:0 0 26px; text-align:center; }
.manager { color:#c8cbd6; font-size:18px; margin: 30px 0 33px; }
.cta {
  display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:82px;
  border-radius:18px; color:white; text-decoration:none; font-size:24px; font-weight:800;
  background: linear-gradient(95deg, #563dff 0%, #7d49ff 48%, #bd46dc 100%);
  box-shadow: 0 20px 42px rgba(96,52,255,.22), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.cta:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 24px 48px rgba(96,52,255,.31), inset 0 1px 0 rgba(255,255,255,.25); }
.cta:active { transform:translateY(0) scale(.995); }
.cta-arrow { font-size:31px; line-height:1; transition:transform .18s ease; }
.cta:hover .cta-arrow { transform:translateX(4px); }
.notice { margin: 33px 0 0; text-align:center; color:#9ea4b5; line-height:1.65; font-size:15px; }
.language-chip {
  margin-top:31px; display:flex; align-items:center; gap:12px; padding:11px 18px;
  border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#aeb3c2; background:rgba(13,17,29,.58); backdrop-filter:blur(12px); font-size:14px;
}
.flag { font-size:22px; }

@media (max-width: 700px) {
  .landing { padding: 92px 14px 28px; justify-content:flex-start; }
  .hero-card { width:100%; border-radius:24px; }
  .avatar-wrap { width:132px; height:132px; }
  .card-content { padding: 86px 22px 28px; }
  .headline { font-size: clamp(28px, 8.2vw, 38px); margin-bottom:20px; }
  .members-pill { font-size:14px; margin-bottom:22px; }
  .benefits { gap:12px; }
  .benefit { font-size:16px; justify-content:flex-start; text-align:left; }
  .manager { font-size:16px; margin:24px 0 25px; }
  .cta { min-height:68px; font-size:20px; border-radius:15px; }
  .notice { font-size:13px; margin-top:24px; }
  .language-chip { margin-top:22px; font-size:12px; }
  .coin--one { left:-33px; top:7vh; transform:scale(.5) rotate(-18deg); }
  .coin--two { right:-38px; bottom:9vh; transform:scale(.5) rotate(15deg); }
  .orbit--left,.orbit--right { width:76vw; height:32vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .coin--one { animation: floatOne 7s ease-in-out infinite; }
  .coin--two { animation: floatTwo 8s ease-in-out infinite; }
  .spark { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes floatOne { 50% { transform: translateY(-14px) rotate(-14deg) scale(.78); } }
  @keyframes floatTwo { 50% { transform: translateY(14px) rotate(18deg) scale(.72); } }
  @keyframes pulse { 50% { opacity:.28; transform:scale(.7); } }
}