:root {
  --bg: #0b0c10;
  --bg-soft: #11131a;
  --panel: #151821;
  --text: #f3f0e9;
  --muted: #aaa9a5;
  --accent: #d7ff42;
  --accent-soft: rgba(215,255,66,.12);
  --line: rgba(255,255,255,.12);
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 10px; top: -50px; z-index: 999; padding: 10px 14px; background: var(--accent); color: #000; }
.skip-link:focus { top: 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,12,16,.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-color: var(--line); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; display:grid; place-items:center; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.brand-copy { line-height: 1; font-size: 15px; }
.brand-copy small { display:block; margin-top:5px; font-size: 9px; color: var(--muted); letter-spacing: .28em; font-weight: 700; }
.nav-links { display:flex; align-items:center; gap:28px; font-size: 13px; font-weight:700; }
.nav-links a:not(.nav-cta) { color: #d5d4d0; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { padding: 10px 14px; border:1px solid var(--line); }
.nav-toggle { display:none; background:none; border:0; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); margin:5px; }

.hero { min-height: 730px; display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap: clamp(30px,6vw,90px); padding-block: 84px 110px; }
.eyebrow { margin:0 0 16px; font-size:11px; letter-spacing:.23em; font-weight:900; color:var(--accent); }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom:28px; font-size:clamp(78px,12vw,172px); line-height:.76; letter-spacing:-.075em; font-weight:950; }
h1 span { color:transparent; -webkit-text-stroke: 1.5px var(--text); }
.hero-text { max-width: 650px; color:#c4c3bf; font-size:clamp(17px,1.5vw,21px); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; font-weight:850; font-size:13px; letter-spacing:.02em; }
.button.primary { background:var(--accent); color:#111; }
.button.primary:hover { transform:translateY(-2px); }
.button.secondary { border:1px solid var(--line); }
.button.secondary:hover { border-color:var(--accent); color:var(--accent); }
.social-row { display:flex; gap:10px; margin-top:28px; color:var(--muted); font-size:12px; font-weight:700; }
.social-row a:hover { color:var(--accent); }

.hero-art { position:relative; min-height:530px; display:grid; place-items:center; }
.stage-card { position:relative; width:min(440px,100%); aspect-ratio:.82; border:1px solid var(--line); background:linear-gradient(145deg,#171a22,#0f1117); overflow:hidden; transform:rotate(2deg); box-shadow:0 35px 80px rgba(0,0,0,.35); }
.stage-glow { position:absolute; width:320px; height:320px; border-radius:50%; top:-100px; right:-100px; background:radial-gradient(circle,var(--accent-soft),transparent 70%); filter:blur(8px); }
.fretboard { position:absolute; width:118%; height:155px; left:-38px; top:145px; transform:rotate(-17deg); background:linear-gradient(#2a241d,#17130f); border-block:8px solid #08090b; box-shadow:0 22px 35px rgba(0,0,0,.5); }
.fretboard > span { position:absolute; left:0; width:100%; height:1px; background:rgba(235,235,225,.75); }
.fretboard > span:nth-child(1){top:15%}.fretboard > span:nth-child(2){top:29%}.fretboard > span:nth-child(3){top:43%}.fretboard > span:nth-child(4){top:57%}.fretboard > span:nth-child(5){top:71%}.fretboard > span:nth-child(6){top:85%}
.fret { position:absolute; top:0; width:3px; height:100%; background:#9c9b95; opacity:.8; }
.f1{left:16%}.f2{left:34%}.f3{left:52%}.f4{left:70%}.f5{left:88%}
.dot { position:absolute; width:11px; height:11px; border-radius:50%; background:#d5d4c8; opacity:.8; }
.d1{left:43%;top:47%}.d2{left:79%;top:32%}.d3{left:79%;top:63%}
.amp-panel { position:absolute; left:26px; right:26px; bottom:28px; height:104px; border:1px solid #3a3e48; background:#111318; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:18px; }
.amp-panel > span { color:var(--accent); font-weight:900; letter-spacing:.16em; }
.amp-panel > small { justify-self:end; color:#7f8188; font-weight:900; letter-spacing:.18em; }
.knobs { display:flex; gap:12px; }
.knobs i { width:22px; height:22px; border:1px solid #8d8e90; border-radius:50%; position:relative; }
.knobs i:after { content:""; position:absolute; width:1px; height:8px; background:var(--accent); left:50%; top:3px; }
.stage-card > p { position:absolute; top:28px; left:28px; margin:0; color:#f5f4ee; letter-spacing:.18em; font-size:10px; font-weight:900; }

.ticker { overflow:hidden; border-block:1px solid var(--line); background:#0f1116; }
.ticker-track { width:max-content; display:flex; align-items:center; gap:24px; padding:12px 0; animation:ticker 30s linear infinite; font-size:11px; letter-spacing:.18em; font-weight:900; }
.ticker-track i { color:var(--accent); font-style:normal; }
@keyframes ticker { to { transform:translateX(-50%); } }

.section { padding-block:110px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:42px; }
h2 { margin-bottom:0; font-size:clamp(44px,7vw,88px); line-height:.95; letter-spacing:-.055em; font-weight:900; }
.text-link { font-size:13px; font-weight:850; border-bottom:1px solid #5f6065; padding-bottom:3px; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video-card { border:1px solid var(--line); background:var(--panel); transition:.25s ease; }
.video-card:hover { transform:translateY(-5px); border-color:rgba(215,255,66,.5); }
.video-visual { aspect-ratio:16/10; position:relative; overflow:hidden; background:#171a20; }
.video-visual:before,.video-visual:after { content:""; position:absolute; }
.video-visual:before { inset:-30%; opacity:.9; }
.video-visual.one:before { background:conic-gradient(from 160deg,transparent,#405030,transparent,#1a1f29,transparent); transform:rotate(20deg); }
.video-visual.two:before { background:radial-gradient(circle at 25% 30%,rgba(215,255,66,.35),transparent 25%),linear-gradient(120deg,#151820,#30251d 65%,#111); }
.video-visual.three:before { background:repeating-linear-gradient(115deg,#101116 0 15px,#1a1d25 15px 30px); transform:scale(1.4) rotate(6deg); }
.video-visual:after { width:70%; height:2px; background:rgba(255,255,255,.5); transform:rotate(-24deg); right:-10%; top:50%; box-shadow:0 14px rgba(255,255,255,.35),0 -14px rgba(255,255,255,.35); }
.play { position:absolute; inset:0; display:grid; place-items:center; z-index:3; font-size:28px; color:#111; margin:auto; width:60px; height:60px; border-radius:50%; background:var(--accent); }
.video-tag { position:absolute; left:14px; bottom:14px; z-index:4; background:#0d0f14; border:1px solid var(--line); padding:6px 8px; font-size:9px; font-weight:900; letter-spacing:.16em; }
.video-info { padding:20px; }
.video-info h3 { margin-bottom:6px; font-size:18px; }
.video-info p { margin:0; color:var(--muted); font-size:13px; }
.microcopy { margin:22px 0 0; max-width:700px; color:#777a80; font-size:11px; }

.sound-section { background:#eef0e9; color:#0c0e12; }
.sound-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,120px); align-items:start; }
.sound-copy p:not(.eyebrow) { max-width:590px; color:#4d5053; font-size:17px; margin-top:28px; }
.sound-list { border-top:1px solid rgba(0,0,0,.2); }
.sound-list div { display:grid; grid-template-columns:45px 1fr; padding:18px 0; border-bottom:1px solid rgba(0,0,0,.16); align-items:center; }
.sound-list span { font-size:10px; color:#777; }
.sound-list strong { font-size:clamp(20px,2.4vw,32px); letter-spacing:-.03em; }

.about-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(40px,7vw,110px); align-items:start; }
.about-number { font-size:clamp(90px,13vw,170px); line-height:.7; letter-spacing:-.08em; font-weight:950; color:var(--accent); }
.about-number span { font-size:.4em; vertical-align:top; margin-left:5px; }
.about-number small { display:block; margin-top:30px; color:var(--muted); font-size:11px; line-height:1.35; letter-spacing:.18em; }
.about-copy h2 { font-size:clamp(42px,5vw,68px); margin-bottom:30px; }
.about-copy p:not(.eyebrow) { color:#bcbdb9; font-size:17px; max-width:700px; }
.about-copy .text-link { display:inline-block; margin-top:8px; }

.seo-section { padding-top:0; }
.seo-card { border:1px solid var(--line); padding:clamp(28px,5vw,64px); background:linear-gradient(135deg,#11131a,#161b17); }
.seo-card h2 { font-size:clamp(38px,5vw,64px); }
.seo-card > p:not(.eyebrow) { max-width:800px; color:#b9bbb6; margin:24px 0; }
.seo-links { display:flex; flex-wrap:wrap; gap:12px; }
.seo-links a { padding:10px 13px; border:1px solid var(--line); font-size:12px; font-weight:800; }
.seo-links a:hover { color:var(--accent); border-color:var(--accent); }

.contact { background:var(--accent); color:#0a0b0d; }
.contact-inner { text-align:center; }
.contact .eyebrow { color:#0a0b0d; opacity:.7; }
.contact h2 { font-size:clamp(55px,9vw,120px); }
.contact p { margin:28px 0 8px; font-weight:650; }
.contact-email { font-size:clamp(20px,3vw,38px); font-weight:900; letter-spacing:-.03em; border-bottom:2px solid #0a0b0d; }
.contact-socials { display:flex; justify-content:center; gap:20px; margin-top:35px; font-size:12px; font-weight:900; }

footer { border-top:1px solid var(--line); }
.footer-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:25px; color:#7e8086; font-size:11px; }
.footer-inner p { margin:0; }
.footer-inner a:hover { color:var(--accent); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 900px) {
  :root { --shell:min(100% - 28px,1180px); }
  .nav-toggle { display:block; }
  .nav-links { position:absolute; left:14px; right:14px; top:70px; padding:22px; background:#11131a; border:1px solid var(--line); display:none; flex-direction:column; align-items:stretch; gap:18px; }
  .nav-links.open { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; }
  .hero-art { min-height:420px; }
  .stage-card { max-width:360px; }
  .video-grid { grid-template-columns:1fr; }
  .sound-layout,.about-grid { grid-template-columns:1fr; }
  .about-number { font-size:110px; }
  .section-heading { align-items:start; flex-direction:column; }
}

@media (max-width: 560px) {
  .hero { padding-block:52px 75px; }
  h1 { font-size:76px; }
  .hero-art { min-height:350px; }
  .stage-card { max-width:285px; }
  .fretboard { top:110px; height:120px; }
  .amp-panel { height:85px; bottom:18px; left:18px; right:18px; padding:12px; }
  .knobs { gap:7px; }
  .knobs i { width:17px; height:17px; }
  .section { padding-block:78px; }
  .footer-inner { padding-block:26px; flex-direction:column; align-items:flex-start; }
}