:root {
  --ink: #080706;
  --soft-black: #11100e;
  --cream: #f8efe2;
  --orange: #f26722;
  --burnt: #b82d13;
  --gold: #ffc44a;
  --muted: #c8b9a8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(0,0,0,.68), transparent);
}
.navBrand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; font-size:13px; letter-spacing:.18em; }
.brandMark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(145deg,var(--orange),var(--burnt)); color:#fff; font-size:20px; font-style:italic; letter-spacing:0; box-shadow:0 0 20px rgba(242,103,34,.35); }
.navLinks { display:flex; align-items:center; gap:26px; }
.navLinks a { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; text-decoration:none; }
.navLinks a:last-child { border:1px solid rgba(255,196,74,.7); border-radius:999px; padding:10px 17px; color:var(--gold); }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 108px 20px 58px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 44%, rgba(242,103,34,.18), transparent 28%),
    radial-gradient(circle at 15% 20%, rgba(255,196,74,.07), transparent 24%),
    linear-gradient(135deg, #0b0907 0%, #17100b 48%, #060606 100%);
}
.hero::after { content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background-image:repeating-linear-gradient(120deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px); }
.stageLights { position:absolute; width:75vw; height:55vh; top:-30vh; left:12.5vw; background:conic-gradient(from 68deg, transparent 0 41%, rgba(255,159,63,.12) 45%, transparent 49% 51%, rgba(255,159,63,.1) 55%, transparent 59%); filter:blur(7px); animation:sweep 8s ease-in-out infinite alternate; transform-origin:50% 0; }
.experienceBadge { position:absolute; top:106px; right:clamp(18px,6vw,90px); width:82px; height:82px; border:1px solid rgba(255,196,74,.55); border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--gold); transform:rotate(4deg); background:rgba(8,7,6,.45); backdrop-filter:blur(8px); box-shadow:inset 0 0 18px rgba(255,196,74,.08); }
.experienceBadge span { font-size:9px; font-weight:900; letter-spacing:.24em; margin-left:.24em; }
.experienceBadge strong { font-size:25px; line-height:1; }
.logoWrap { width:min(620px,74vw); position:relative; z-index:2; margin-bottom:5px; }
.heroLogo { position:relative; display:block; width:100%; height:auto; filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)); }
.logoGlow { position:absolute; inset:22% 12%; background:rgba(242,103,34,.32); filter:blur(48px); border-radius:50%; animation:pulse 2.8s ease-in-out infinite; }
.logoShine {
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.08) 41%,rgba(255,248,213,.95) 48%,rgba(255,255,255,.12) 55%,transparent 62%);
  background-size:240% 100%;
  background-position:150% 0;
  -webkit-mask:url("sly-entertainment-logo.png") center/contain no-repeat;
  mask:url("sly-entertainment-logo.png") center/contain no-repeat;
  animation:logoShine 4.8s ease-in-out infinite;
}
.logoSpark {
  position:absolute;
  z-index:4;
  color:#fff4b3;
  line-height:1;
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(255,196,74,.95));
  animation:logoSparkle 4.8s ease-in-out infinite;
}
.logoSparkOne { top:14%; left:26%; font-size:clamp(15px,2vw,25px); animation-delay:.45s; }
.logoSparkTwo { top:35%; right:18%; font-size:clamp(11px,1.5vw,19px); animation-delay:.8s; }
.logoSparkThree { bottom:19%; left:42%; font-size:clamp(9px,1.2vw,15px); animation-delay:1.08s; }
.eyebrow,.sectionLabel { position:relative; z-index:2; margin:10px 0 13px; color:var(--gold); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.32em; }
h1 { position:relative; z-index:2; max-width:980px; margin:0; font-size:clamp(40px,5.6vw,78px); line-height:1; letter-spacing:-.055em; font-weight:900; }
h1 em { color:var(--orange); font-style:normal; font-weight:900; }
.intro { position:relative; z-index:2; max-width:660px; margin:20px auto 29px; color:var(--muted); font-size:clamp(15px,1.5vw,18px); line-height:1.65; }
.actionGrid { position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; width:min(800px,100%); gap:14px; }
.actionCard { min-height:112px; display:grid; grid-template-columns:56px 1fr 34px; align-items:center; gap:12px; padding:18px 20px; border-radius:18px; text-align:left; text-decoration:none; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.songCard { background:linear-gradient(145deg,rgba(255,196,74,.15),rgba(90,58,15,.2)); border:1px solid rgba(255,196,74,.45); }
.bookingCard { background:linear-gradient(145deg,#f26722,#9e1f0c); border:1px solid #ff934f; box-shadow:0 14px 34px rgba(173,50,14,.28); }
.actionCard:hover,.actionCard:focus-visible { transform:translateY(-4px); outline:none; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.actionIcon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:var(--gold); background:rgba(0,0,0,.35); font-family:Georgia,serif; font-size:30px; }
.bookingCard .actionIcon { color:white; background:rgba(77,12,0,.25); }
.actionCopy { display:flex; flex-direction:column; min-width:0; }
.actionCopy small { color:var(--gold); font-size:9px; font-weight:900; letter-spacing:.18em; }
.bookingCard .actionCopy small { color:#fff3c9; }
.actionCopy strong { margin:5px 0 3px; font-size:clamp(18px,1.8vw,22px); letter-spacing:-.02em; }
.actionCopy span { color:#cdbfae; font-size:12px; }
.bookingCard .actionCopy span { color:#ffe8d9; }
.arrow { font-size:26px; transition:transform .2s ease; }
.actionCard:hover .arrow,.contactPrimary:hover .arrow { transform:translateX(5px); }
.scrollCue { position:absolute; z-index:2; bottom:18px; width:22px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:14px; }
.scrollCue span { position:absolute; width:3px; height:7px; top:7px; left:8px; border-radius:3px; background:var(--gold); animation:scrollDot 1.6s ease-in-out infinite; }
.spark { position:absolute; z-index:1; color:var(--gold); animation:twinkle 2.2s ease-in-out infinite; }
.sparkOne { left:11%; top:30%; font-size:22px; }
.sparkTwo { right:14%; top:46%; font-size:14px; animation-delay:.7s; }
.sparkThree { left:21%; bottom:22%; font-size:16px; animation-delay:1.2s; }

.experienceSection { display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr; min-height:640px; background:#f7f2eb; color:#21170f; }
.experienceVisual { display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(145deg,#f26722,#8c180b); color:white; }
.experienceVisual strong { font-size:clamp(120px,16vw,230px); line-height:.78; letter-spacing:-.1em; text-shadow:10px 12px 0 rgba(0,0,0,.12); }
.experienceVisual span { margin-top:38px; font-size:14px; line-height:1.45; font-weight:900; letter-spacing:.38em; text-align:center; }
.experienceCopy { display:flex; flex-direction:column; justify-content:center; max-width:760px; padding:80px clamp(28px,8vw,120px); }
.experienceCopy .sectionLabel { color:var(--burnt); }
.experienceCopy h2,.bookingSection h2 { margin:0 0 22px; font-size:clamp(44px,6.5vw,78px); line-height:.98; letter-spacing:-.055em; font-weight:900; }
.experienceCopy > p:not(.sectionLabel) { max-width:590px; color:#65574a; font-size:18px; line-height:1.75; }
.eventGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.eventGrid span { display:grid; place-items:center; min-height:54px; padding:10px; border:1px solid #dfd0bf; border-radius:14px; background:#fffaf4; color:#5b2817; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; text-align:center; }

.bookingSection { position:relative; overflow:hidden; padding:110px 24px; text-align:center; background:radial-gradient(circle at 50% 120%,rgba(242,103,34,.35),transparent 45%),#0e0b09; }
.bookingSection::before { content:"LET'S PARTY"; position:absolute; inset:auto 0 -20px; color:rgba(255,255,255,.025); font:900 clamp(100px,18vw,260px)/.8 Arial,sans-serif; letter-spacing:-.08em; white-space:nowrap; }
.bookingSection > * { position:relative; z-index:1; }
.bookingSection > p:not(.sectionLabel) { color:var(--muted); font-size:17px; }
.contactActions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.contactActions a { display:flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:0 24px; border-radius:999px; font-weight:900; text-decoration:none; }
.contactPrimary { background:linear-gradient(135deg,var(--orange),var(--burnt)); box-shadow:0 12px 28px rgba(184,45,19,.32); }
.contactSecondary { border:1px solid rgba(255,255,255,.3); }
footer { min-height:180px; display:flex; align-items:center; justify-content:center; gap:28px; padding:34px clamp(20px,5vw,72px); color:#8f8276; font-size:12px; border-top:1px solid rgba(255,255,255,.08); }
footer img { width:220px; height:auto; }
footer p:nth-child(2) { color:#c8b9a8; }

@keyframes logoShine {
  0%,15% { background-position:150% 0; opacity:0; }
  24% { opacity:1; }
  48% { background-position:-85% 0; opacity:1; }
  55%,100% { background-position:-85% 0; opacity:0; }
}
@keyframes logoSparkle {
  0%,18%,38%,100% { opacity:0; transform:scale(.25) rotate(0); }
  25% { opacity:1; transform:scale(1.25) rotate(22deg); }
  31% { opacity:.75; transform:scale(.75) rotate(42deg); }
}
@keyframes pulse { 0%,100%{ opacity:.35; transform:scale(.9) } 50%{ opacity:.7; transform:scale(1.08) } }
@keyframes twinkle { 0%,100%{ opacity:.2; transform:scale(.7) rotate(0) } 50%{ opacity:1; transform:scale(1.2) rotate(20deg) } }
@keyframes sweep { from{ transform:rotate(-4deg) } to{ transform:rotate(4deg) } }
@keyframes scrollDot { 0%{ opacity:0; transform:translateY(0) } 40%{ opacity:1 } 100%{ opacity:0; transform:translateY(13px) } }

@media (max-width: 720px) {
  .nav { height:66px; }
  .navBrand span:last-child { display:none; }
  .navLinks { gap:13px; }
  .navLinks a { font-size:10px; }
  .experienceBadge { top:84px; width:66px; height:66px; border-radius:19px; }
  .experienceBadge strong { font-size:21px; }
  .hero { min-height:auto; padding-top:112px; padding-bottom:70px; }
  .logoWrap { width:min(390px,88vw); }
  .actionGrid { grid-template-columns:1fr; }
  .actionCard { min-height:102px; grid-template-columns:50px 1fr 24px; padding:15px; }
  .actionIcon { width:46px; height:46px; }
  .experienceSection { grid-template-columns:1fr; }
  .experienceVisual { min-height:270px; }
  .experienceVisual strong { font-size:clamp(120px,35vw,175px); }
  .experienceVisual span { margin-top:28px; }
  .experienceCopy { padding:65px 24px; }
  .eventGrid { grid-template-columns:1fr 1fr; }
  .bookingSection { padding:80px 20px; }
  .contactActions { flex-direction:column; }
  footer { flex-direction:column; gap:10px; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}