/* GuildCore landing page overhaul: aurora hero + modern sections */
:root{
  --aurora1: #0b1740; --aurora2:#132266; --aurora3:#1f2b6f; --aurora4:#0f1a48;
}

.hero-lp{ position:relative; padding:48px 0 24px; display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center; }
.hero-lp .aurora{ position:absolute; inset:-10vh -5vw -5vh -5vw; pointer-events:none; background:
  radial-gradient(50% 50% at 20% 20%, rgba(110,168,254,.25), transparent 60%),
  radial-gradient(50% 50% at 80% 15%, rgba(155,140,255,.25), transparent 65%),
  radial-gradient(60% 80% at 60% 50%, rgba(34,211,238,.18), transparent 70%),
  radial-gradient(60% 60% at 30% 80%, rgba(8,145,178,.22), transparent 65%);
  filter: blur(50px) saturate(120%); z-index:0;
}
.hero-lp__body{ position:relative; z-index:1; }
.headline{ font-size: clamp(30px, 5.2vw, 64px); margin: 0 0 12px; line-height:1.04; letter-spacing:-.3px; }
.headline__accent{ display:block; background:linear-gradient(90deg, #06b6d4, #22d3ee, #9b8cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (min-width: 981px){
  /* Encourage a clean two-line hero: short accent + balanced width */
  .hero-lp__body{ max-width: 720px }
}
.sublead{ color: var(--muted); max-width: 64ch; }
.trust{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.trust__item{ display:inline-flex; gap:8px; align-items:center; color:var(--muted); background:rgba(255,255,255,.04); border:var(--border); border-radius:999px; padding:6px 10px; }
.dot{ width:10px; height:10px; border-radius:50%; background:#94a3b8 }
.dot--ok{ background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 1.6s infinite }

.hero-lp__logo{ display:flex; align-items:center; justify-content:center; position:relative }
.logo-frame{ width:min(420px, 90%); aspect-ratio: 1 / 1; border-radius:24px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.logo-frame::after{ content:""; position:absolute; inset:-20%; background: radial-gradient(40% 40% at 50% 20%, rgba(110,168,254,.25), transparent 60%), radial-gradient(50% 60% at 70% 60%, rgba(155,140,255,.20), transparent 70%); filter: blur(40px); pointer-events:none }
.logo-image{ width:65%; height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); border-radius:12px }
.hero-lp__card{ padding-top:6px }
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px }
.stat{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:var(--border); border-radius:12px; padding:14px 16px; backdrop-filter: blur(6px) }
.stat__num{ font-weight:800; font-size:18px }
.stat__label{ color:var(--muted); font-size:13px }

.section-title{ font-size:22px; margin: 10px 0 16px }
.features .feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:14px }
.feature{ padding:16px }
.feature__icon{ font-size:20px; opacity:.9; margin-bottom:8px }

.how-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px }
.how-step{ display:flex; gap:12px; align-items:flex-start; padding:14px }
.how-step .num{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; background:linear-gradient(180deg, #001450, #00143c); }
.how-step .body h3{ margin: 2px 0 4px }
.how-step .body p{ margin:0; color:var(--muted) }

@media (max-width: 980px){
  .hero-lp{ grid-template-columns: 1fr }
  .hero-lp__logo{ order:2 }
  .how-steps{ grid-template-columns: 1fr }
}

/* Notices */
.notice-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.notice{ padding:10px 12px; border-radius:10px; border:var(--border); color:var(--text); font-size:14px }

/* Discord CTA */
.cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.cta--primary{ margin:22px 0 6px }
.cta--secondary{ margin-bottom:18px }
.btn--discord{
  --glow: 0 0 24px rgba(88,101,242,.35);
  --bg1:#5865F2; --bg2:#4e5ae8;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; font-weight:700; color:#fff; border-radius:12px;
  background:linear-gradient(135deg, var(--bg1), var(--bg2));
  box-shadow:0 8px 24px rgba(0,0,0,.35), var(--glow);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn--discord:hover{ transform: translateY(-1px); filter:brightness(1.05); box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 32px rgba(88,101,242,.5) }
.btn--discord:active{ transform: translateY(0); filter:brightness(.98) }
.btn--discord .btn-icon{ width:22px; height:22px; display:inline-grid; place-items:center }
.online-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; margin-left:6px; font-weight:600; font-size:12px; line-height:1; color:#cfe3ff; background:rgba(88,101,242,.16); border:1px solid rgba(88,101,242,.35); border-radius:999px }
.btn--ghost.btn--sm{ padding:8px 10px; font-size:13px; border-radius:10px }
.toast{ position:fixed; bottom:18px; left:50%; transform: translateX(-50%) translateY(12px); padding:10px 14px; font-weight:600; font-size:14px; background:rgba(8,16,32,.9); color:#e9f3ff; border:1px solid rgba(255,255,255,.08); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0) }

/* Ensure [hidden] always hides even if display styles exist */
[hidden]{ display:none !important }