:root {
  --blue-950: #063d74;
  --blue-900: #07569b;
  --blue-800: #0878ca;
  --blue-700: #158fe3;
  --blue-500: #42bdf3;
  --aqua: #75e4f7;
  --sky: #dff8ff;
  --yellow: #ffe500;
  --yellow-deep: #ffce00;
  --red: #ef2737;
  --ink: #073257;
  --white: #ffffff;
  --muted: #60778d;
  --shadow: 0 24px 60px rgba(2, 74, 129, .20);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--ink);
  background: #f7fdff;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.section { padding: 92px 0; position: relative; }
.section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  letter-spacing: .02em;
  line-height: .95;
  margin: 0 0 18px;
  color: var(--blue-950);
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff7bf;
  color: #7b6200;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.section-copy { color: var(--muted); max-width: 690px; font-size: 1.04rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: 18px 0;
  transition: .25s ease;
}
.site-header.scrolled {
  background: rgba(4, 70, 125, .90);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 50, 90, .18);
  padding: 10px 0;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { width: 250px; max-width: 48vw; }
.nav-links { display: flex; align-items: center; gap: 26px; color: white; font-weight: 600; }
.nav-links a { opacity: .92; }
.nav-links a:hover { opacity: 1; color: var(--yellow); }
.nav-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--blue-950) !important;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(255, 229, 0, .3);
}
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: white;
  font-size: 1.5rem;
}

.hero {
  min-height: 820px;
  padding: 150px 0 110px;
  display: grid;
  align-items: center;
  color: white;
  background:
    radial-gradient(circle at 15% 12%, rgba(117,228,247,.75), transparent 28%),
    radial-gradient(circle at 85% 5%, rgba(255,255,255,.20), transparent 22%),
    linear-gradient(145deg, #35c2f1 0%, #138ee0 38%, #075ba5 100%);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: -2px;
  height: 130px;
  background: #f7fdff;
  clip-path: ellipse(58% 50% at 50% 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-logo { width: min(520px, 100%); margin-bottom: 34px; filter: drop-shadow(0 14px 30px rgba(0,0,0,.22)); }
.hero h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 8vw, 7.4rem);
  line-height: .88;
  letter-spacing: .015em;
  margin: 0 0 22px;
  text-shadow: 0 8px 24px rgba(0,50,90,.26);
}
.hero h1 span { color: var(--yellow); }
.hero p { font-size: 1.15rem; max-width: 600px; color: rgba(255,255,255,.92); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn {
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--yellow); color: var(--blue-950); box-shadow: 0 14px 32px rgba(255,229,0,.32); }
.btn-secondary { background: var(--red); color: white; box-shadow: 0 14px 32px rgba(239,39,55,.28); }
.btn-light { background: white; color: var(--blue-900); }

.hero-card {
  position: relative;
  min-height: 560px;
  border-radius: 46px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.45);
  box-shadow: 0 36px 80px rgba(1,51,94,.34);
  transform: rotate(1.4deg);
}
.hero-card img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: 78% center; transform: scale(1.03); }
.hero-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(2,48,89,.42)); }
.hero-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  background: rgba(255,255,255,.92);
  color: var(--blue-950);
  border-radius: 20px;
  padding: 14px 18px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.bubble { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); animation: float 7s ease-in-out infinite; }
.b1 { width: 80px; height: 80px; top: 18%; left: 5%; }
.b2 { width: 34px; height: 34px; top: 55%; left: 46%; animation-delay: -2s; }
.b3 { width: 58px; height: 58px; top: 29%; right: 4%; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-18px) scale(1.05); } }

.favourites-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
.food-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 16px 45px rgba(5,86,148,.11);
  border: 1px solid #dff3fb;
  transition: .22s ease;
}
.food-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.food-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, var(--aqua), var(--blue-500)); font-size: 1.65rem; margin-bottom: 18px; }
.food-card h3 { margin: 0 0 6px; font-size: 1.22rem; }
.food-card p { margin: 0 0 18px; color: var(--muted); font-size: .92rem; }
.price { color: #d7b300; font-weight: 800; font-size: 1.35rem; }

.about { background: linear-gradient(180deg, #fff, #eefbff); }
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.about-visual { position: relative; }
.about-visual img { width: 100%; height: 540px; object-fit: cover; object-position: 76% center; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.about-stamp { position:absolute; right:-20px; bottom:28px; background:var(--yellow); color:var(--blue-950); border-radius:50%; width:132px; height:132px; display:grid; place-items:center; text-align:center; font-weight:900; transform:rotate(-8deg); box-shadow:0 16px 35px rgba(0,0,0,.18); }
.feature-list { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.feature { display:flex; gap:12px; align-items:center; background:white; padding:14px 16px; border-radius:16px; box-shadow:0 8px 24px rgba(5,86,148,.08); font-weight:700; }
.feature span:first-child { font-size:1.35rem; }

.why { background: linear-gradient(145deg, var(--blue-950), var(--blue-700)); color:white; overflow:hidden; }
.why .section-title { color:white; }
.why .section-copy { color:rgba(255,255,255,.78); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.why-card { padding:26px; border-radius:22px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); }
.why-card strong { display:block; margin:10px 0 4px; font-size:1.08rem; }
.why-card p { margin:0; color:rgba(255,255,255,.72); font-size:.92rem; }

.menu-preview { background:#f7fdff; }
.category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:40px; }
.category { min-height:160px; border-radius:22px; padding:22px; color:white; display:flex; flex-direction:column; justify-content:flex-end; font-weight:800; font-size:1.18rem; box-shadow:0 14px 32px rgba(5,86,148,.13); background:linear-gradient(145deg, #44c6f3, #0877c9); position:relative; overflow:hidden; }
.category::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.12); top:-35px; right:-35px; }
.category:nth-child(2), .category:nth-child(5) { background:linear-gradient(145deg,#ffdf28,#ffb800); color:var(--blue-950); }
.category:nth-child(3) { background:linear-gradient(145deg,#ef5060,#d91428); }

.reviews { background: linear-gradient(180deg,#edfaff,#fff); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.review { background:white; border-radius:22px; padding:26px; box-shadow:0 16px 40px rgba(5,86,148,.10); }
.stars { color:#ffc400; letter-spacing:3px; font-size:1.1rem; }
.review p { color:var(--muted); }
.review strong { color:var(--blue-950); }

.contact-panel {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  padding:34px;
  color:white;
  background:
    radial-gradient(circle at 5% 5%, rgba(117,228,247,.38), transparent 30%),
    linear-gradient(145deg,var(--blue-950),var(--blue-700));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.contact-panel::after { content:""; position:absolute; width:260px; height:260px; right:-120px; bottom:-150px; border-radius:50%; border:44px solid rgba(255,255,255,.07); pointer-events:none; }
.contact-main { padding:14px 10px; position:relative; z-index:1; }
.contact-main .section-title { color:white; font-size:clamp(3rem,5vw,4.8rem); }
.contact-intro { max-width:590px; margin:0; color:rgba(255,255,255,.82); font-size:1.04rem; }
.contact-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:30px; }
.contact-detail { display:flex; align-items:flex-start; gap:13px; min-height:104px; padding:17px; color:white; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:18px; }
a.contact-detail { transition:background .2s ease, transform .2s ease; }
a.contact-detail:hover { background:rgba(255,255,255,.17); transform:translateY(-2px); }
.contact-detail:first-child { grid-row:span 2; align-items:center; }
.contact-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.15); font-size:1.25rem; }
.contact-detail b { display:block; margin-bottom:3px; font-size:1rem; }
.contact-detail small { display:block; color:rgba(255,255,255,.74); font-size:.86rem; line-height:1.55; }
.contact-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hours-card { position:relative; z-index:1; padding:30px; color:var(--ink); background:rgba(255,255,255,.97); border-radius:26px; box-shadow:0 18px 45px rgba(0,47,86,.24); }
.hours-heading { display:flex; align-items:center; gap:14px; padding-bottom:20px; border-bottom:1px solid #dcecf3; }
.hours-heading span:not(.hours-icon) { display:block; color:var(--blue-700); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hours-heading h3 { margin:1px 0 0; color:var(--blue-950); font-size:1.5rem; }
.hours-icon { flex:0 0 50px; width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:var(--sky); font-size:1.35rem; }
.hours-list { padding:13px 0 5px; }
.hours-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed #dbe9ef; }
.hours-row:last-child { border-bottom:0; }
.hours-row strong { color:var(--blue-900); }
.hours-row.closed span, .hours-row.closed strong { color:var(--red); }
.hours-note { margin:14px 0 0; padding:13px 15px; color:var(--muted); background:#f1faff; border-radius:14px; font-size:.78rem; line-height:1.45; }

footer { background:#052f56; color:white; padding:58px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; align-items:start; }
.footer-logo { width:280px; margin-bottom:18px; }
footer p, footer a { color:rgba(255,255,255,.72); }
footer h3 { margin-top:0; color:var(--yellow); }
.footer-links { display:grid; gap:9px; }
.copyright { margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.55); font-size:.88rem; text-align:center; }

.mobile-bar { display:none; }
.reveal { opacity:0; transform:translateY(22px); transition:.7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav-links { position:fixed; left:16px; right:16px; top:84px; background:rgba(4,70,125,.98); border-radius:22px; padding:22px; display:none; flex-direction:column; align-items:stretch; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { min-height:auto; padding-top:130px; }
  .hero-grid, .about-grid, .contact-panel { grid-template-columns:1fr; }
  .hero-card { min-height:430px; transform:none; }
  .hero-card img { min-height:430px; }
  .favourites-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .category-grid { grid-template-columns:repeat(3,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .section { padding:70px 0; }
  .brand { width:220px; }
  .hero { padding-bottom:90px; }
  .hero-logo { display:none; }
  .hero h1 { font-size:4.2rem; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .btn { width:100%; }
  .hero-card { min-height:340px; border-radius:28px; }
  .hero-card img { min-height:340px; }
  .favourites-grid, .why-grid, .feature-list, .category-grid { grid-template-columns:1fr; }
  .about-visual img { height:390px; }
  .about-stamp { width:108px; height:108px; right:8px; }
  .contact-panel { padding:22px; gap:20px; }
  .contact-main { padding:6px 0; }
  .contact-details { grid-template-columns:1fr; }
  .contact-detail:first-child { grid-row:auto; }
  .contact-actions { display:grid; grid-template-columns:1fr; }
  .hours-card { padding:22px; }
  .footer-grid { grid-template-columns:1fr; }
  .mobile-bar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    position:fixed;
    z-index:1100;
    left:12px; right:12px; bottom:12px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    padding:10px;
    border-radius:20px;
    box-shadow:0 14px 40px rgba(0,45,82,.22);
  }
  .mobile-bar a { min-height:50px; display:flex; align-items:center; justify-content:center; border-radius:14px; font-weight:800; }
  .mobile-order { background:var(--yellow); color:var(--blue-950); }
  .mobile-call { background:var(--red); color:white; }
  body { padding-bottom:84px; }
}

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