@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg: #080910; --panel: #11121d; --text: #f7f7fb; --muted: #a5a7b8; --pink: #ff3cc7; --cyan: #2ce7f2; --violet: #795bff; --line: rgba(255,255,255,.12); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; line-height: 1.6; }

a { color: inherit; text-decoration: none; }

.site-header { height: 84px; padding: 0 7vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid rgba(255,255,255,.07); position: relative; z-index: 5; }

.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .07em; font-size: 1.1rem; }

.brand span { color: var(--cyan); }

nav { display: flex; align-items: center; gap: 34px; font-size: .9rem; color: #d4d5df; }

nav a:hover, .text-link:hover, footer a:hover { color: var(--cyan); }

.nav-cta { border: 1px solid #55576c; border-radius: 100px; padding: 10px 18px; }

.hero { min-height: 710px; padding: 72px 7vw 58px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at 72% 48%, rgba(87,47,165,.18), transparent 39%), radial-gradient(ellipse at 12% 70%, rgba(0,213,230,.08), transparent 35%); }

.hero-copy { max-width: 610px; position: relative; z-index: 2; }

.eyebrow, .section-label { font-size: .75rem; font-weight: 700; letter-spacing: .18em; color: var(--cyan); }

.eyebrow { display: flex; align-items: center; gap: 10px; }

.live-dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 16px var(--pink); }

h1, h2, h3, p { margin-top: 0; }

h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.055em; line-height: 1.05; }

h1 { font-size: clamp(3.2rem,5.5vw,5.7rem); margin: 27px 0 22px; }

h1 span, h2 span { background: linear-gradient(90deg, var(--cyan), #9b7aff 55%, var(--pink)); background-clip: text; -webkit-background-clip: text; color: transparent; }

.intro { max-width: 500px; color: var(--muted); font-size: 1.05rem; line-height: 1.85; }

.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; }

.button { display: inline-flex; align-items: center; gap: 20px; padding: 15px 22px; border-radius: 8px; font-weight: 700; font-size: .9rem; transition: transform .2s, box-shadow .2s; }

.button:hover { transform: translateY(-3px); box-shadow: 0 10px 35px #795bff40; }

.primary { background: linear-gradient(105deg, #6e58ff, #c43de6 60%, #ff3cc7); color: white; }

.text-link { font-weight: 600; font-size: .9rem; }

.quick-facts { display: flex; gap: 38px; margin-top: 56px; padding-top: 25px; border-top: 1px solid var(--line); }

.quick-facts div { display: flex; flex-direction: column; gap: 4px; }

.quick-facts strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }

.quick-facts span { font-size: .75rem; color: var(--muted); }

.logo-stage { min-height: 520px; display: grid; place-items: center; position: relative; }

.logo-frame { position: relative; width: min(88%, 480px); border-radius: 5%; overflow: hidden; box-shadow: 0 0 70px #795bff35; transform: rotate(5deg); z-index: 1; }

.logo-frame img { display: block; width: 100%; height: auto; }

.scroll-cue { position: absolute; bottom: 22px; left: 7vw; font-size: .65rem; letter-spacing: .18em; color: #777b91; display: flex; align-items: center; gap: 12px; }

.scroll-cue span { height: 1px; width: 35px; background: var(--pink); }

.section { padding: 105px 7vw; }

.about { display: grid; grid-template-columns: .7fr 1.3fr; gap: 6vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0c0d15; }

.section-label { padding-top: 10px; }

.section-content { display: grid; grid-template-columns: .9fr 1.1fr; gap: 35px; align-items: center; }

.section h2 { font-size: clamp(2.8rem,4.5vw,4.5rem); margin-bottom: 0; }

.section-content p, .events-heading p, .contact-panel p { color: var(--muted); line-height: 1.9; margin: 0; }

.events { background: linear-gradient(180deg, #080910, #0c0d17); }

.events-heading { display: flex; justify-content: space-between; align-items: end; margin: 22px 0 38px; }

.events-heading h2 { font-size: clamp(2.4rem,4vw,3.8rem); margin: 0; }

.events-heading p { max-width: 310px; }

.event-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }

.event-card { min-height: 245px; background: linear-gradient(145deg, #171824, #10111a); border: 1px solid var(--line); padding: 24px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }

.event-card:hover { transform: translateY(-5px); border-color: #8a65ff; }

.event-number { position: absolute; right: 20px; top: 18px; color: #64677c; font-size: .75rem; }

.event-icon { font-size: 2rem; color: var(--cyan); margin: 24px 0 19px; }

.event-card:nth-child(2) .event-icon { color: var(--pink); }

.event-card:nth-child(3) .event-icon { color: #a48bff; }

.event-card:nth-child(4) .event-icon { color: #ffc857; }

.event-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; margin-bottom: 10px; }

.event-card p { color: var(--muted); font-size: .87rem; line-height: 1.75; margin: 0; }

.contact { display: grid; grid-template-columns: 1fr .8fr; gap: 5vw; align-items: center; background: #10111b; border-top: 1px solid var(--line); }

.contact-panel h2 { font-size: clamp(3rem,5vw,5rem); margin: 24px 0; }

.contact-panel p { max-width: 500px; margin-bottom: 28px; }

.contact-art { height: 360px; display: grid; place-items: center; position: relative; overflow: hidden; }

.sound-ring { position: absolute; border: 1px solid rgba(121,91,255,.45); border-radius: 50%; aspect-ratio: 1; width: 80%; box-shadow: 0 0 35px #795bff15; }

.ring-b { width: 62%; border-color: rgba(255,60,199,.5); }

.ring-c { width: 43%; border-color: rgba(44,231,242,.55); }

.equalizer { display: flex; align-items: center; gap: 7px; height: 130px; z-index: 1; }

.equalizer i { display: block; width: 7px; border-radius: 9px; background: linear-gradient(180deg, var(--cyan), var(--violet), var(--pink)); height: var(--h, 50px); }

.equalizer i:nth-child(3n) { --h:100px; }

.equalizer i:nth-child(3n+1) { --h:62px; }

.equalizer i:nth-child(3n+2) { --h:82px; }

.equalizer i:nth-child(4n) { --h:35px; }

.contact-art span { position: absolute; bottom: 20px; letter-spacing: .28em; font-size: .7rem; color: #9d9fb1; }

footer { padding: 30px 7vw; display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }

footer p { margin: 0; flex: 1; }

footer .brand { color: var(--text); }

.copyright { color: #77798b; }

@media(max-width: 900px) {

.hero {grid-template-columns: 1fr; padding-top: 65px; }

.hero-copy { max-width: 720px; }

.logo-stage { min-height: 430px; margin-top: 20px; }

.logo-frame { width: min(76%, 400px); }

.about { grid-template-columns: 1fr; gap: 25px; }

.section-content { grid-template-columns: 1fr 1fr; }

.event-grid { grid-template-columns: repeat(2, 1fr); }

.contact { grid-template-columns: 1fr .7fr; gap: 20px; }

.contact-art { height: 280px; } }

@media(max-width: 600px) {

.site-header { height: auto; min-height: 74px; padding: 18px 6vw; align-items: flex-start; gap: 15px; }

.brand { font-size: .95rem; }

nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: .75rem; }

nav a:nth-child(2) { display: none; }

.nav-cta { padding: 7px 10px; }

.hero { padding: 58px 6vw 65px; min-height: 0; }

.eyebrow { font-size: .62rem; }

h1 { font-size: clamp(2.7rem,12vw,4rem); }

.intro { font-size: .95rem; }

.quick-facts { gap: 18px; margin-top: 42px; }

.quick-facts strong { font-size: .9rem; }

.quick-facts span { font-size: .68rem; }

.logo-stage { min-height: 320px; }

.logo-frame { width: min(82%,330px); }

.scroll-cue { left: 6vw; }

.section { padding: 70px 6vw; }

.section-content { grid-template-columns: 1fr; gap: 22px; }

.section h2 { font-size: 3rem; }

.events-heading { display: block; }

.events-heading h2 { margin-bottom: 15px; }

.event-grid { gap: 10px; }

.event-card { padding: 18px; min-height: 230px; }

.event-card h3 { font-size: 1.05rem; }

.event-card p { font-size: .8rem; }

.event-icon { margin: 20px 0 14px; }

.contact { grid-template-columns: 1fr; }

.contact-art { height: 220px; order: -1; }

.contact-panel h2 { font-size: 3.5rem; }

footer { padding: 25px 6vw; flex-wrap: wrap; gap: 14px; }

footer p { flex-basis: 100%; order: 3; }

.copyright { margin-left: auto; } }