:root {
  --bg: #07090f;
  --bg-soft: #0b0f18;
  --card: rgba(17, 23, 36, 0.78);
  --line: rgba(151, 170, 200, 0.16);
  --text: #f5f8ff;
  --muted: #9ba9bc;
  --cyan: #35d9ff;
  --violet: #7c5cff;
  --gold: #ffb547;
  --radius: 24px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(53, 217, 255, 0.08), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(124, 92, 255, 0.08), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image: radial-gradient(rgba(136, 157, 188, 0.36) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.14; z-index: -1; }
.ambient-one { width: 360px; height: 360px; background: var(--cyan); top: 18%; left: -190px; }
.ambient-two { width: 420px; height: 420px; background: var(--violet); right: -230px; top: 58%; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: 0.25s ease;
}
.site-header.scrolled { background: rgba(7, 9, 15, 0.82); backdrop-filter: blur(18px); border-color: var(--line); }
.nav-wrap { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { width: 205px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; color: #c5cfdd; font-size: 14px; font-weight: 700; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--cyan); transition: 0.2s; }
.main-nav > a:hover::after { right: 0; }
.nav-cta { padding: 11px 17px; border: 1px solid rgba(53,217,255,.35); border-radius: 12px; background: rgba(53,217,255,.08); color: #eafaff; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.menu-toggle span { width: 20px; height: 2px; background: #fff; display: block; margin: 5px auto; }

.hero { min-height: 100vh; display: grid; align-items: center; position: relative; padding: 135px 0 85px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.eyebrow, .kicker { color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; font-weight: 900; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(53,217,255,.2); background: rgba(53,217,255,.05); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(255,181,71,.09), 0 0 18px var(--gold); }
.hero h1 { margin: 22px 0 18px; font-size: clamp(54px, 7vw, 94px); line-height: .98; letter-spacing: -.055em; }
.hero h1 span { color: transparent; background: linear-gradient(90deg, var(--cyan), #cfc4ff 74%); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p { max-width: 630px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.button { min-height: 52px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-weight: 900; transition: transform .2s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--cyan), #75e8ff); color: #061019; box-shadow: 0 18px 45px rgba(53,217,255,.16); }
.button-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #eef5ff; }
.quick-info { display: flex; gap: 40px; margin-top: 44px; }
.quick-info div { display: flex; flex-direction: column; }
.quick-info strong { font-size: 20px; }
.quick-info span { color: #738198; font-size: 12px; }

.hero-stage { min-height: 520px; display: grid; place-items: center; position: relative; perspective: 900px; }
.stage-card { width: min(100%, 480px); aspect-ratio: .86; border: 1px solid rgba(151,170,200,.18); border-radius: 38px; background: linear-gradient(145deg, rgba(22,29,46,.9), rgba(9,13,22,.92)); box-shadow: var(--shadow); position: relative; overflow: hidden; transform: rotateY(-5deg) rotateX(2deg); }
.stage-card::before { content: ""; position: absolute; inset: -30% 20% 50% -30%; background: radial-gradient(circle, rgba(53,217,255,.16), transparent 66%); }
.stage-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.035), transparent 65%); transform: translateX(-100%); animation: shine 6s ease-in-out infinite; }
.stage-top, .stage-bottom { position: absolute; left: 26px; right: 26px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.stage-top { top: 24px; color: #75839a; font-size: 11px; letter-spacing: .18em; font-weight: 900; }
.online { color: #8ff9c5; }
.controller { position: absolute; inset: 0; display: grid; place-items: center; }
.controller-body { width: 290px; height: 165px; border: 4px solid rgba(53,217,255,.8); border-radius: 54% 54% 40% 40% / 45% 45% 55% 55%; transform: perspective(400px) rotateX(12deg); background: linear-gradient(145deg, #152038, #0b1120); box-shadow: 0 0 45px rgba(53,217,255,.12), inset 0 0 30px rgba(255,255,255,.025); position: relative; }
.controller-body::after { content: "12"; position: absolute; left: 50%; top: 31px; transform: translateX(-50%); color: var(--gold); font-size: 18px; font-weight: 1000; text-shadow: 0 0 18px rgba(255,181,71,.45); }
.dpad { position: absolute; left: 56px; top: 55px; width: 62px; height: 62px; }
.dpad i, .dpad b { position: absolute; background: #dbe7f6; border-radius: 5px; }
.dpad i { width: 20px; height: 62px; left: 21px; }
.dpad b { width: 62px; height: 20px; top: 21px; }
.buttons { position: absolute; right: 51px; top: 49px; width: 76px; height: 76px; }
.buttons i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #eef6ff; box-shadow: 0 0 12px rgba(53,217,255,.35); }
.buttons i:nth-child(1){left:30px}.buttons i:nth-child(2){right:0;top:30px;background:var(--gold)}.buttons i:nth-child(3){left:30px;bottom:0;background:var(--violet)}.buttons i:nth-child(4){left:0;top:30px;background:var(--cyan)}
.sticks { position: absolute; left: 112px; right: 112px; bottom: 25px; display: flex; justify-content: space-between; }
.sticks i { width: 27px; height: 27px; border: 5px solid #8190a7; border-radius: 50%; background: #0a101d; }
.stage-bottom { bottom: 25px; }
.stage-bottom small { display: block; color: #647188; font-size: 9px; letter-spacing: .16em; }
.stage-bottom strong { font-size: 13px; letter-spacing: .1em; }
.level { display: flex; gap: 4px; align-items: end; height: 27px; }
.level span { width: 5px; border-radius: 4px; background: linear-gradient(var(--cyan), var(--violet)); animation: equalize 1.4s ease-in-out infinite; }
.level span:nth-child(1){height:8px}.level span:nth-child(2){height:18px;animation-delay:.15s}.level span:nth-child(3){height:26px;animation-delay:.3s}.level span:nth-child(4){height:14px;animation-delay:.45s}.level span:nth-child(5){height:22px;animation-delay:.6s}
.floating-chip { position: absolute; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 20px; border: 1px solid var(--line); background: rgba(14,20,34,.78); backdrop-filter: blur(14px); font-weight: 1000; box-shadow: var(--shadow); }
.chip-one { left: -10px; top: 80px; color: var(--cyan); animation: float 5s ease-in-out infinite; }
.chip-two { right: -20px; top: 170px; color: var(--gold); animation: float 5.8s ease-in-out infinite reverse; }
.chip-three { left: 35px; bottom: 40px; color: #c6bbff; animation: float 6.4s ease-in-out infinite; }
.scroll-hint { position: absolute; left: 50%; bottom: 28px; width: 24px; height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }
.scroll-hint span { width: 4px; height: 7px; border-radius: 99px; background: var(--cyan); position: absolute; left: 9px; top: 8px; animation: scroll 1.8s infinite; }

.section { padding: 110px 0; position: relative; }
.section-soft { background: linear-gradient(180deg, rgba(255,255,255,.018), transparent); border-top: 1px solid rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.035); }
.section-heading { max-width: 680px; margin-bottom: 46px; }
.section-heading.compact { margin-bottom: 34px; }
.section-heading h2, .content-panel h2, .reservation h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.04em; margin: 8px 0 15px; }
.section-heading p:not(.kicker), .content-panel > p:not(.kicker), .reservation-box > div > p:not(.kicker) { color: var(--muted); }

.experience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.experience-card { position: relative; min-height: 285px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: .25s; }
.experience-card:hover { transform: translateY(-5px); border-color: rgba(53,217,255,.35); }
.experience-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -90px; bottom: -110px; background: var(--cyan); opacity: .045; filter: blur(20px); }
.experience-card.featured { background: linear-gradient(135deg, rgba(18,30,49,.96), rgba(14,18,31,.85)); }
.icon-box { width: 55px; height: 55px; border-radius: 16px; display: grid; place-items: center; background: rgba(53,217,255,.07); border: 1px solid rgba(53,217,255,.15); }
.icon-box svg { width: 31px; fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.card-no { position: absolute; top: 28px; right: 28px; color: #455068; font-weight: 1000; }
.experience-card h3 { margin: 28px 0 8px; font-size: 24px; }
.experience-card p { color: var(--muted); max-width: 560px; }
.tags { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.tags span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: #8796ab; font-size: 10px; font-weight: 900; }

.split-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 78px; align-items: center; }
.visual-panel { min-height: 470px; border-radius: 34px; border: 1px solid var(--line); background: linear-gradient(145deg, #12192a, #080c14); box-shadow: var(--shadow); position: relative; overflow: hidden; padding: 55px 55px 0; }
.visual-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(53,217,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(53,217,255,.035) 1px, transparent 1px); background-size: 30px 30px; }
.visual-screen { position: relative; height: 295px; border: 5px solid #222c3f; border-radius: 20px; background: radial-gradient(circle at center, #172748, #09101c 70%); box-shadow: 0 0 40px rgba(53,217,255,.1), inset 0 0 40px rgba(0,0,0,.5); z-index: 2; overflow: hidden; }
.screen-ui { display: flex; justify-content: space-between; padding: 16px 18px; color: #5e6e86; font-size: 9px; letter-spacing: .18em; }
.screen-center { display: grid; place-items: center; gap: 15px; height: 200px; }
.screen-center img { width: 82px; filter: drop-shadow(0 0 18px rgba(53,217,255,.18)); }
.screen-center strong { font-size: 11px; letter-spacing: .18em; color: #aebcd0; }
.screen-lines { display: flex; gap: 7px; justify-content: center; }
.screen-lines i { width: 50px; height: 3px; border-radius: 4px; background: rgba(53,217,255,.18); }
.seat { position: absolute; bottom: -15px; width: 160px; height: 145px; border-radius: 55px 55px 0 0; background: linear-gradient(145deg, #171e2d, #0b0f18); border: 1px solid #273146; z-index: 3; }
.seat-left { left: 55px; transform: rotate(2deg); }.seat-right { right: 55px; transform: rotate(-2deg); }
.content-panel > p:not(.kicker) { font-size: 17px; }
.feature-list { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 13px; }
.feature-list li { color: #cbd5e3; }
.feature-list span { color: var(--cyan); margin-right: 10px; }
.text-link { color: var(--cyan); font-weight: 900; }
.text-link span { display: inline-block; transition: .2s; }.text-link:hover span { transform: translateX(4px); }

.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.food-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16,21,33,.72); overflow: hidden; }
.food-card > div:last-child { padding: 23px 25px 27px; }
.food-card h3 { margin: 0 0 5px; font-size: 21px; }.food-card p { margin: 0; color: var(--muted); font-size: 14px; }
.food-visual { height: 220px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at center, #17243f, #0b101b 70%); }
.food-visual::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(53,217,255,.09); filter: blur(30px); }
.food-visual span { position: relative; display: block; }
.burger span { width: 128px; height: 84px; border-radius: 58px 58px 28px 28px; background: linear-gradient(#f4c57c 0 34%, #65ad5d 34% 43%, #6f321f 43% 66%, #ffba43 66% 76%, #e5a960 76%); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.burger span::before { content: ""; position: absolute; top: 14px; left: 23px; width: 4px; height: 3px; border-radius: 50%; background: #fff1c8; box-shadow: 22px -5px #fff1c8, 42px 4px #fff1c8, 66px -2px #fff1c8, 82px 7px #fff1c8; }
.fries span { width: 88px; height: 92px; border-radius: 9px 9px 24px 24px; background: linear-gradient(135deg,#7c5cff,#4c31c8); transform: translateY(15px); }
.fries span::before { content: ""; position: absolute; left: 9px; right: 9px; bottom: 68px; height: 95px; background: repeating-linear-gradient(90deg,#ffcf62 0 8px,transparent 8px 13px); clip-path: polygon(0 22%,9% 0,20% 21%,31% 6%,43% 23%,56% 0,68% 20%,81% 8%,100% 25%,95% 100%,5% 100%); }
.drink span { width: 74px; height: 125px; border-radius: 8px 8px 20px 20px; background: linear-gradient(180deg,#35d9ff,#2458bb); box-shadow: inset 0 0 0 4px rgba(255,255,255,.1); }
.drink span::before { content:""; position:absolute; width:5px; height:82px; background:#ffb547; left:44px; top:-56px; transform:rotate(11deg); border-radius:4px; }
.drink span::after { content:"12"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:1000; font-size:23px; }

.reservation { padding-top: 70px; }
.reservation-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; padding: 48px; border: 1px solid rgba(53,217,255,.18); border-radius: 32px; background: linear-gradient(135deg, rgba(19,31,51,.9), rgba(12,16,28,.94)); box-shadow: var(--shadow); }
.reserve-form { display: grid; gap: 14px; }
.reserve-form label { display: grid; gap: 7px; }
.reserve-form label span { color: #8493a8; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.reserve-form input, .reserve-form select { width: 100%; min-height: 49px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7,10,17,.7); color: #edf5ff; outline: none; }
.reserve-form input:focus, .reserve-form select:focus { border-color: rgba(53,217,255,.55); box-shadow: 0 0 0 4px rgba(53,217,255,.07); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { min-height: 20px; margin: 0; color: var(--gold); font-size: 13px; }

.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-card { min-height: 126px; padding: 23px; border-radius: 20px; border: 1px solid var(--line); background: rgba(14,19,31,.72); transition: .2s; }
a.contact-card:hover { transform: translateY(-3px); border-color: rgba(53,217,255,.36); }
.contact-card span { display: block; color: #77869b; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.contact-card strong { font-size: 17px; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0; }
.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #6f7d91; font-size: 12px; }
.footer-wrap img { width: 150px; opacity: .75; }.footer-wrap a:hover { color: var(--cyan); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .08s; }.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@keyframes float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-15px) rotate(2deg)} }
@keyframes shine { 0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(110%)} }
@keyframes equalize { 0%,100%{transform:scaleY(.65);opacity:.55}50%{transform:scaleY(1);opacity:1} }
@keyframes scroll { 0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)} }

@media (max-width: 980px) {
  .hero-grid, .split-grid, .reservation-box, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 30px; }
  .hero-stage { min-height: 470px; }
  .split-grid { gap: 45px; }
  .food-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { gap: 20px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 24px, 1160px); }
  .nav-wrap { min-height: 74px; }
  .brand img { width: 170px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 12px; right: 12px; top: 76px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(9,13,22,.97); backdrop-filter: blur(18px); flex-direction: column; align-items: stretch; gap: 8px; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 12px; }
  .hero { padding-top: 110px; min-height: auto; }
  .hero h1 { font-size: clamp(47px, 15vw, 70px); }
  .hero-copy > p { font-size: 16px; }
  .quick-info { gap: 22px; }
  .hero-stage { min-height: 390px; }
  .stage-card { width: min(88vw, 370px); }
  .controller-body { width: 230px; height: 135px; }
  .dpad { transform: scale(.78); left: 35px; top: 39px; }.buttons { transform: scale(.78); right: 33px; top: 34px; }.sticks { left: 87px; right: 87px; bottom: 17px; }
  .chip-one { left: 0; }.chip-two { right: 0; }.chip-three { left: 10px; }
  .scroll-hint { display: none; }
  .section { padding: 78px 0; }
  .experience-grid, .food-grid, .contact-cards { grid-template-columns: 1fr; }
  .experience-card { min-height: 260px; }
  .visual-panel { min-height: 370px; padding: 35px 28px 0; }
  .visual-screen { height: 245px; }.screen-center { height: 160px; }
  .seat { width: 115px; height: 100px; }.seat-left{left:25px}.seat-right{right:25px}
  .reservation-box { padding: 28px 20px; gap: 30px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-wrap { flex-direction: column; text-align: center; }
}

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