/* ===== Self-hosted fonts (variable — one file covers all weights) ===== */
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cairo-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cairo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cairo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/orbitron-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #0b0b12;
  --bg-2: #141420;
  --card: #16162f;
  --card-2: #1c1c3a;
  --text: #eef0ff;
  --muted: #a7aacb;
  --red: #e8202a;          /* Moba brand red */
  --red-2: #ff3b45;
  --neon-2: #ff3b45;
  --gold: #ffc24b;
  --border: #2a2a4a;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #2a0f16 0%, transparent 55%),
              radial-gradient(900px 700px at -10% 20%, #1a0708 0%, transparent 50%),
              var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* height:auto is load-bearing. Every <img> carries real width/height attributes so the
   browser can reserve the right box before the bytes arrive, but those attributes also
   act as a presentational `height`. Without this, an image whose width is capped by
   max-width keeps its full attribute height and renders squashed — a 1000×667 hero
   became a 300×600 portrait strip on mobile. Let the width lead and derive the height. */
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1140px, 92vw); margin-inline: auto; }
.display { font-family: 'Orbitron', 'Cairo', sans-serif; letter-spacing: .5px; }

/* ---------- Accessibility: keyboard skip link ---------- */
.skip-link {
  position: absolute; top: -100px; inset-inline-start: 12px; z-index: 999;
  background: var(--red); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Accessibility: visible keyboard focus ----------
   Every interactive element here is a link, a <button> or a <summary>, and the UA
   default focus ring for those varies wildly: Safari draws nothing at all for links
   unless full keyboard access is switched on, and Chrome's ring is a thin dark line
   that all but disappears against this near-black background. Declare one ring
   explicitly so keyboard users can always see where they are. `:focus-visible` (not
   `:focus`) keeps it off mouse clicks, and `:where()` keeps the selector at zero
   specificity so it can never win a colour fight with a component rule. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
/* The skip link sits on brand red, where gold is the weaker contrast — go white. */
.skip-link:focus-visible { outline-color: #fff; }

/* ---------- Accessibility: reduced motion ----------
   `scroll-behavior: smooth` and the hover transforms further down are exactly the
   movement WCAG 2.3.3 asks us to drop for people who have asked their OS for less
   of it. Honour the preference instead of animating regardless. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .wa-float:hover, .gallery figure:hover img { transform: none; }
}

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11,11,26,.72);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.25rem; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 20px rgba(232,32,42,.45); }
.brand b { background: linear-gradient(90deg, var(--red-2), var(--neon-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav.links { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
nav.links a { padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .95rem; transition: .2s; }
nav.links a:hover { color: var(--text); background: var(--card); }
nav.links a[aria-current="page"] { color: var(--text); background: var(--card); }
.lang { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.lang a {
  color: var(--muted); font-weight: 700;
  padding: 6px 10px; border-radius: 9px; font-size: .85rem; transition: .2s;
}
.lang a[aria-current="true"] { background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff; }
.menu-toggle { display: none; background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 1.2rem; font-family: inherit; }

/* ---------- Breadcrumb ---------- */
.crumbs { padding: 14px 0 0; color: var(--muted); font-size: .85rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--border); }
.crumbs a:hover { color: var(--red-2); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(28px, 6vw, 64px) 0 clamp(30px, 5vw, 56px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 44px); align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem;
  color: var(--red-2); background: rgba(232,32,42,.1); border: 1px solid rgba(232,32,42,.3);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.15; font-weight: 900; margin-bottom: 16px; }
.hero h1 span { background: linear-gradient(90deg, var(--red-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin-bottom: 26px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-family: inherit;
  padding: 13px 22px; border-radius: 13px; cursor: pointer; border: 0; font-size: 1rem; transition: transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff; box-shadow: 0 12px 30px rgba(232,32,42,.45); }
.btn-wa { background: #25d366; color: #06210f; box-shadow: 0 12px 30px rgba(37,211,102,.35); }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.hero-media { position: relative; }
.hero-media img { border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.stat b { display: block; font-family: 'Orbitron', sans-serif; font-size: 1.4rem; color: var(--red-2); }
.stat span { color: var(--muted); font-size: .86rem; }

/* ---------- Sections ---------- */
section.block { padding: clamp(34px, 6vw, 60px) 0; }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(24px, 5vw, 40px); }
.kicker { color: var(--red-2); font-weight: 800; letter-spacing: 2px; font-size: .8rem; text-transform: uppercase; }
.section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 900; margin: 8px 0 10px; }
.section-head p { color: var(--muted); }

.prose h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 900; margin-bottom: 14px; }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px); align-items: center; }
.split-grid img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); width: 100%; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(16px, 3.5vw, 26px); transition: transform .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); border-color: var(--red); }
.card .ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; margin-bottom: 12px;
  background: rgba(232,32,42,.12); border: 1px solid rgba(232,32,42,.3); }
.card h3 { font-size: 1.18rem; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: .96rem; }
.card .more { margin-top: auto; padding-top: 12px; color: var(--red-2); font-weight: 700; font-size: .92rem; }
.card:hover .more { text-decoration: underline; }

.feature-list { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.feature-list .tick { color: var(--red-2); font-weight: 900; }
.shelter {
  margin-top: 22px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,59,69,.06); border: 1px solid rgba(255,59,69,.25); color: var(--text); font-weight: 600;
}

/* ---------- Menu table ---------- */
.menu-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.menu-cat h3 { font-size: 1.25rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; color: var(--gold); }
.menu-table { width: 100%; border-collapse: collapse; }
.menu-table caption { text-align: start; color: var(--muted); font-size: .82rem; padding-bottom: 6px; }
.menu-table th { text-align: start; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0 14px 6px; }
.menu-table th:last-child { text-align: end; }
.menu-table td { padding: 10px 14px; background: var(--card); border-block: 1px solid var(--border); }
.menu-table tr td:first-child { border-inline-start: 1px solid var(--border); border-start-start-radius: 11px; border-end-start-radius: 11px; font-weight: 600; }
.menu-table tr td:last-child { border-inline-end: 1px solid var(--border); border-start-end-radius: 11px; border-end-end-radius: 11px; text-align: end;
  font-family: 'Orbitron', sans-serif; font-weight: 800; color: var(--neon-2); white-space: nowrap; }
.menu-note { color: var(--muted); font-size: .85rem; margin-top: 16px; text-align: center; }
.menu-poster { margin-top: 26px; max-width: 420px; margin-inline: auto; }
.menu-poster img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }

/* ---------- Pills / trainer ---------- */
.pill { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--gold); background: rgba(255,194,75,.1); border: 1px solid rgba(255,194,75,.3); padding: 4px 10px; border-radius: 999px; margin-block: 2px; margin-inline-end: 4px; }
.trainer { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--muted); margin-bottom: 14px; }
.trainer b { color: var(--text); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery figure { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.gallery img { aspect-ratio: 1/1; object-fit: cover; transition: transform .4s; width: 100%; }
.gallery figure:hover img { transform: scale(1.08); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 18px; }
.faq details[open] { border-color: var(--red); }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red-2); font-weight: 900; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .ans { color: var(--muted); padding: 0 0 16px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.contact-list { list-style: none; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(232,32,42,.12); border: 1px solid rgba(232,32,42,.3); }
.contact-list .lbl { color: var(--muted); font-size: .82rem; }
.contact-list .val { font-weight: 700; }
.contact-list a.val:hover { color: var(--red-2); }
.map { border: 0; width: 100%; height: 100%; min-height: 320px; border-radius: var(--radius); filter: grayscale(.2) invert(.92) hue-rotate(180deg); }
.hours-note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(232,32,42,.08); border: 1px solid rgba(232,32,42,.3); color: var(--text); font-size: .9rem; }
.area-pills { margin-top: 8px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 34px 0; margin-top: 30px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.foot-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.foot-nav a:hover { color: var(--red-2); }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); font-size: 18px; transition: .2s; }
.foot-social a:hover { border-color: var(--red); color: var(--red-2); }

/* WhatsApp float */
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 28px; box-shadow: 0 12px 30px rgba(37,211,102,.5); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: clamp(60px, 14vw, 140px) 0; }
.notfound h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; margin-bottom: 14px; }
.notfound p { color: var(--muted); margin-bottom: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid, .split-grid, .contact-grid { grid-template-columns: 1fr; }
  .cards, .menu-cats { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .hero-media { order: -1; max-width: 360px; margin-inline: auto; }
  .split-grid img { max-width: 420px; margin-inline: auto; }
  .map { min-height: 260px; }
  nav.links { display: none; position: absolute; top: 62px; inset-inline: 4vw; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px; }
  nav.links.open { display: flex; }
  .menu-toggle { display: block; margin-inline-start: auto; }
  .lang { order: 3; }
}
@media (max-width: 560px) {
  .cards, .gallery, .menu-cats { grid-template-columns: 1fr 1fr; }
  .stats { gap: 14px; }
  .stat b { font-size: 1.2rem; }
  .card .ic { width: 42px; height: 42px; font-size: 21px; margin-bottom: 9px; }
  .card h3 { font-size: 1.04rem; }
  .card p { font-size: .88rem; line-height: 1.5; }
  .hero-media, .split-grid img { max-width: 300px; }
  .menu-cats { grid-template-columns: 1fr; }
  .map { min-height: 230px; }
  .wa-float { width: 50px; height: 50px; font-size: 24px; }
  .nav { gap: 8px; }
  .brand { font-size: 1.02rem; gap: 7px; }
  .brand img { width: 33px; height: 33px; }
  .lang a { padding: 5px 8px; font-size: .8rem; }
  .menu-toggle { padding: 7px 10px; }
}
[hidden] { display: none !important; }