:root {
  --bg-base: #0B0B16;
  --bg-surface: #15152A;
  --bg-surface-alt: #1E1B3A;
  --border-subtle: #2A2A45;
  --violet: #7C3AED;
  --magenta: #D81B60;
  --cyan: #22D3EE;
  --gold: #FFC53D;
  --success: #22C55E;
  --text-primary: #FFFFFF;
  --text-secondary: #A9A9C2;
  --text-tertiary: #6E6E8A;
  --font-ui: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-display: "Trebuchet MS", "Avenir Next", sans-serif;
  --cta: linear-gradient(100deg, #7C3AED 0%, #C026D3 52%, #EC4899 100%);
  --screen: linear-gradient(180deg, #1E1540 0%, #120E24 62%, #0B0B16 100%);
}

* { box-sizing: border-box; }
html { background: var(--bg-base); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--bg-base); color: var(--text-primary); font: 16px/1.72 var(--font-ui); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.skip-link { position: fixed; left: 18px; top: -64px; z-index: 30; padding: 11px 15px; border-radius: 12px; background: var(--gold); color: var(--bg-base); font-weight: 800; }.skip-link:focus { top: 14px; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(11,11,22,.88); backdrop-filter: blur(16px); }
.header-inner, .footer-inner { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text-primary); text-decoration: none; }.brand-icon { width: 39px; height: 39px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 8px 22px rgba(124,58,237,.32); }.brand-name { background: linear-gradient(100deg, #EC4899, #C026D3, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 22px/1 var(--font-display); letter-spacing: -.04em; }
.site-nav { display: flex; gap: 8px; }.site-nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; }.site-nav a:hover { border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08); color: var(--text-primary); }

.site-main { min-height: calc(100vh - 250px); }.home-page { background: var(--screen); }.hero, .home-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, .7fr); min-height: 580px; align-items: center; gap: 52px; padding: 72px 0 66px; }.hero-copy { position: relative; z-index: 1; }.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.eyebrow:before { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); content: ""; }.hero h1 { max-width: 630px; margin: 0; font: 800 clamp(48px, 6.7vw, 82px)/.98 var(--font-display); letter-spacing: -.06em; }.hero h1 span { display: block; }.hero h1 .glow { background: linear-gradient(100deg, #F9A8D4, #E879F9, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }.hero p { max-width: 560px; margin: 22px 0 0; color: var(--text-secondary); font-size: 18px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: var(--cta); box-shadow: 0 10px 26px rgba(192,38,211,.24); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }.button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(236,72,153,.34); }.button.secondary { background: rgba(255,255,255,.04); box-shadow: none; color: var(--text-primary); }.button.secondary:hover { border-color: rgba(34,211,238,.7); color: var(--cyan); }
.hero-stage { position: relative; min-height: 400px; display: grid; place-items: center; isolation: isolate; }.hero-stage:before, .hero-stage:after { position: absolute; z-index: -1; top: -20px; width: 240px; height: 460px; content: ""; filter: blur(1px); opacity: .72; }.hero-stage:before { left: 16px; background: linear-gradient(155deg, transparent 0 23%, rgba(124,58,237,.78) 24% 36%, transparent 37%); transform: rotate(-13deg); }.hero-stage:after { right: 0; background: linear-gradient(25deg, transparent 0 23%, rgba(216,27,96,.75) 24% 36%, transparent 37%); transform: rotate(13deg); }.stage-icon { position: relative; width: min(310px, 75vw); border-radius: 30%; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 60px rgba(124,58,237,.55), 0 32px 60px rgba(0,0,0,.55); animation: stage-float 4.5s ease-in-out infinite; }.stage-ring { position: absolute; bottom: 5px; width: 270px; height: 65px; border: 6px solid var(--cyan); border-top-color: rgba(34,211,238,.2); border-radius: 50%; box-shadow: 0 0 28px rgba(34,211,238,.58); transform: perspective(160px) rotateX(58deg); }.stage-spark { position: absolute; right: 18px; top: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: -42px 76px 0 -3px var(--gold), 22px 140px 0 -4px var(--cyan); }.stage-caption { position: absolute; bottom: -8px; padding: 7px 13px; border: 1px solid rgba(255,197,61,.42); border-radius: 999px; background: rgba(11,11,22,.82); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.trust-strip { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: rgba(21,21,42,.8); }.trust-inner { width: min(1120px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; }.trust-inner > div { min-height: 144px; padding: 28px 30px; border-right: 1px solid var(--border-subtle); }.trust-inner > div:last-child { border-right: 0; }.trust-inner b { display: block; color: var(--text-primary); font: 800 20px/1.2 var(--font-display); }.trust-inner p { margin: 9px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }

.home-content { padding: 82px 0 92px; }.home-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(345px, .75fr); gap: clamp(42px, 7vw, 106px); align-items: center; }.home-grid h2 { max-width: 510px; margin: 0 0 17px; font: 800 clamp(34px, 4.2vw, 54px)/1.04 var(--font-display); letter-spacing: -.045em; }.home-grid > div > p { max-width: 600px; margin: 0; color: var(--text-secondary); }.route-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }.route-list a { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; min-height: 86px; padding: 17px 18px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-surface); color: var(--text-primary); text-decoration: none; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }.route-list a:hover { border-color: var(--violet); background: var(--bg-surface-alt); color: var(--text-primary); transform: translateX(4px); }.route-list span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(124,58,237,.19); color: #C4B5FD; font-size: 11px; font-weight: 800; }.route-list strong { font: 800 19px/1.15 var(--font-display); }.route-list em { color: var(--cyan); font-size: 20px; font-style: normal; }.contact-panel { margin-top: 76px; padding: 32px; border: 1px solid rgba(124,58,237,.5); border-radius: 22px; background: linear-gradient(110deg, rgba(124,58,237,.22), rgba(216,27,96,.12)), var(--bg-surface); box-shadow: inset 0 1px rgba(255,255,255,.08); }.contact-panel .eyebrow { color: var(--gold); }.contact-panel h2 { margin: 0 0 10px; font: 800 31px/1.05 var(--font-display); }.contact-panel p { max-width: 730px; margin: 0; color: var(--text-secondary); }.contact-panel a { color: var(--cyan); font-weight: 800; }

.legal-document { padding: clamp(44px, 7vw, 86px) 24px 88px; background: var(--screen); }.legal-content { max-width: 860px; margin-left: auto; margin-right: auto; }.legal-document:before { display: block; width: min(860px, 100%); margin: 0 auto 18px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; content: "LuckyShow · Legal & Support"; }.legal-document h1 { margin-top: 0; margin-bottom: 14px; font: 800 clamp(39px, 6.5vw, 66px)/.98 var(--font-display); letter-spacing: -.055em; }.legal-content > p:first-of-type { margin-bottom: 34px; color: var(--text-secondary); font-size: 14px; }.legal-document h2 { margin-top: 52px; margin-bottom: 15px; padding-top: 24px; border-top: 1px solid var(--border-subtle); color: #fff; font: 800 31px/1.08 var(--font-display); letter-spacing: -.035em; }.legal-document h3 { margin: 28px 0 9px; color: #E9D5FF; font-size: 17px; font-weight: 800; }.legal-document p, .legal-document li { max-width: 720px; }.legal-document p { margin-top: 0; margin-bottom: 17px; color: var(--text-secondary); }.legal-document strong { color: var(--text-primary); }.legal-document ul { padding-left: 22px; margin: 0 0 22px; }.legal-document li { padding-left: 4px; margin: 9px 0; color: var(--text-secondary); }.legal-document li::marker { color: var(--magenta); }.legal-document blockquote { margin: 28px 0 40px; padding: 16px 19px; border: 1px solid rgba(34,211,238,.27); border-left: 4px solid var(--cyan); border-radius: 0 16px 16px 0; background: rgba(34,211,238,.06); color: var(--text-secondary); font-size: 15px; }.legal-document hr { height: 1px; margin: 56px auto; border: 0; background: var(--border-subtle); }.legal-document code { padding: 2px 5px; border-radius: 5px; background: var(--bg-surface-alt); color: #D8B4FE; font: .86em ui-monospace, SFMono-Regular, Menlo, monospace; }.legal-document a { color: var(--cyan); font-weight: 700; }

.site-footer { border-top: 1px solid var(--border-subtle); background: #080810; }.footer-inner { display: grid; grid-template-columns: 1fr auto auto; gap: 44px; align-items: center; padding: 42px 0; }.footer-brand { display: flex; align-items: center; gap: 11px; }.footer-brand img { width: 40px; height: 40px; border-radius: 13px; }.footer-brand b { display: block; background: linear-gradient(100deg, #F9A8D4, #C084FC); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 20px/1 var(--font-display); }.footer-brand p, .footer-contact { margin: 5px 0 0; color: var(--text-tertiary); font-size: 12px; }.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }.footer-links a, .footer-contact a { color: var(--text-secondary); font-size: 12px; }.footer-contact { text-align: right; }

@keyframes stage-float { 50% { transform: translateY(-10px) rotate(1deg); } }
@media (max-width: 760px) { body { font-size: 16px; }.header-inner, .footer-inner, .hero, .home-content, .trust-inner { width: min(100% - 32px, 1120px); }.header-inner { min-height: 68px; gap: 12px; }.brand-icon { width: 34px; height: 34px; border-radius: 11px; }.brand-name { font-size: 20px; }.site-nav { gap: 2px; }.site-nav a { min-height: 40px; padding: 0 9px; font-size: 12px; }.hero { grid-template-columns: 1fr; min-height: auto; gap: 8px; padding: 70px 0 44px; }.hero h1 { max-width: 560px; }.hero p { font-size: 17px; }.hero-stage { min-height: 320px; margin-top: 4px; }.stage-icon { width: min(235px, 63vw); }.stage-ring { width: 205px; height: 50px; }.trust-inner, .home-grid, .footer-inner { grid-template-columns: 1fr; }.trust-inner > div { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }.trust-inner > div:last-child { border-bottom: 0; }.home-content { padding: 61px 0 70px; }.contact-panel { margin-top: 54px; padding: 25px; }.legal-document { padding: 52px 20px 68px; }.legal-document h2 { margin-top: 42px; font-size: 28px; }.footer-inner { gap: 23px; }.footer-links { justify-content: flex-start; }.footer-contact { text-align: left; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }