.landing-hero { padding: 70px 0 35px; text-align: center; }
.landing-hero h1 { font-size: clamp(42px, 7vw, 78px); color: #f5efff; font-weight: 750; letter-spacing: -.055em; line-height: 1.08; margin: 16px 0 24px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #b99aef; }
.lead { max-width: 560px; margin: 0 auto 28px; line-height: 1.7; font-size: 18px; color: #c2b9d5; }
.landing-hero .brand-banner { margin-top: 68px; height: clamp(300px, 31vw, 380px); }
.landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.landing-features h2 { font-size: 20px; line-height: 1.35; }
footer { margin-top: 48px; padding: 24px 0; border-top: 1px solid #362948; font-size: 13px; }
.login-page { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.login-particles { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }
.login-page .box { position: relative; z-index: 2; width: min(524px, calc(100% - 32px)); padding: 34px; background: #171321; border: 1px solid #49375e; border-radius: 20px; box-shadow: 0 26px 90px #0008, 0 0 56px #8b3ff044; }
.login-page h1 { color: #f4edff; font-size: 32px; font-weight: 750; letter-spacing: -.04em; margin-top: 40px; margin-bottom: 12px; }
.login-page .brand { font-size: 26px; }
.login-page .box input { border: 1px solid #594368; }
.login-page .box > p.muted { margin-bottom: 26px; }
.login-page .box input:focus { border-color: #a855f7; outline: none; box-shadow: 0 0 15px rgba(168,85,247,.25); }
.login-page .box button { height: 52px; margin-top: 16px; box-shadow: 0 8px 24px #8b3ff044; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.login-page .box button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px #9b4dff66; filter: brightness(1.1); }
@media (max-width: 760px) { .landing-features { grid-template-columns: 1fr; } .landing-hero { width: 100%; padding-top: 54px; } .landing-hero .brand-banner { height: 240px; } }

/* Landing page polish. Keep these effects scoped to the pre-login page. */
.landing { position: relative; animation: landing-enter .65s cubic-bezier(.2,.7,.25,1) backwards; }
.landing-particles { position: fixed; inset: 0; z-index: 5; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }
.landing .brand img { width: 64px; height: 64px; animation: logo-pulse 5s ease-in-out infinite; transition: filter .2s ease, box-shadow .2s ease; }
.landing .brand:hover img { filter: brightness(1.12); box-shadow: 0 0 28px #a24eff78; }
.landing header .actions .button { height: 48px; background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.25); color: #f4edff; box-shadow: 0 5px 18px #8b3ff015; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.landing header .actions .button:hover { background: rgba(168,85,247,.2); border-color: rgba(191,142,255,.58); box-shadow: 0 7px 24px #9b4dff38; transform: translateY(-2px); filter: none; }
.landing-hero { width: min(110%, 1408px, calc(100vw - 48px)); margin-inline: auto; }
.landing .discord-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.landing .discord-button svg { display: block; width: 19px; height: 19px; flex: 0 0 auto; }
.landing .actions .discord-button svg { width: 17px; height: 17px; }
.landing .dashboard-cta { padding: 16px 25px; border: 1px solid #d2b4ff70; border-radius: 12px; background: linear-gradient(115deg, #a855f7 0%, #8338ec 52%, #6254ed 100%); background-size: 150% 100%; background-position: 0 50%; color: #fff; font-size: 17px; box-shadow: 0 8px 28px #8b3ff044; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-position .35s ease; animation: cta-glow 3.8s ease-in-out infinite; }
.landing .dashboard-cta:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 12px 44px #9b4dff78; background-position: 100% 50%; animation-play-state: paused; }
.landing-hero .dashboard-cta span[aria-hidden="true"] { display: inline-block; transition: transform .2s ease; }
.landing-hero .dashboard-cta:hover span[aria-hidden="true"] { transform: translateX(3px); }
.landing .brand-banner { border: 0; border-radius: 0; background: transparent; box-shadow: 0 0 220px #8f42e55c, 0 0 110px #a855f730; -webkit-mask-image: radial-gradient(ellipse 92% 55% at center, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 92% 55% at center, #000 35%, transparent 100%); }
.landing .brand-banner::before { content: ""; position: absolute; inset: 2% 1%; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse, #a653ff70 0%, #6254ed4a 44%, #252b5430 68%, transparent 80%); filter: blur(44px); pointer-events: none; }
.landing .brand-banner img { z-index: 1; mix-blend-mode: screen; filter: saturate(.9) brightness(1.07); }
.landing-features .panel { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.landing-features .panel:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.3); box-shadow: 0 0 25px rgba(168,85,247,.15); }
.trust-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; padding: 24px 0 4px; color: #c2b9d5; font-size: 13px; }
.trust-signals span { display: inline-flex; align-items: center; gap: 9px; }
.trust-signals b { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #a855f780; border-radius: 50%; color: #d7b7ff; font-size: 12px; }
@keyframes landing-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes banner-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-pulse { 0%, 100% { box-shadow: 0 0 18px #7b42cb35; } 50% { box-shadow: 0 0 26px #a24eff70; } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 8px 28px #8b3ff044; } 50% { box-shadow: 0 9px 34px #9b4dff70; } }
.landing-hero > .eyebrow { animation: hero-fade-up .55s .06s both; }
.landing-hero h1 { animation: hero-fade-up .6s .15s both; }
.landing-hero .lead { animation: hero-fade-up .6s .25s both; }
.landing-hero .dashboard-cta { animation: hero-fade-up .6s .35s both, cta-glow 3.8s 1s ease-in-out infinite; }
.landing-hero .brand-banner { animation: banner-slide-up .75s .42s backwards; }
@media (prefers-reduced-motion: reduce) {
  .landing, .landing .brand img, .landing .dashboard-cta, .landing-hero > .eyebrow, .landing-hero h1, .landing-hero .lead, .landing-hero .brand-banner { animation: none; }
  .landing .dashboard-cta, .landing .brand img, .landing-hero .dashboard-cta span[aria-hidden="true"], .landing-features .panel { transition: none; }
  .landing .dashboard-cta:hover, .landing-features .panel:hover { transform: none; }
}