/* ==========================================================================
   KIT · core.css — mecanica comuna a tuturor site-urilor (NU aspectul).
   Aspectul vine din clienti/<c>/theme.css, care se lipeste DUPA acest fisier.
   Tokenuri pe care theme.css trebuie sa le defineasca in :root:
     --bg --ink --ink-soft --accent --accent-ink (text pe accent) --line --card
     --f-d (titluri) --f-b (text) --r (colturi) --nav-h
   Lectii iOS incluse: --vh masurat o data, blocare cu position:fixed, benzi prin transform.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --pad: 20px; --wrap: 1240px; --vh: 100vh; --nav-h: 68px; --r: 16px;
}
@media (min-width: 700px) { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 48px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-b, system-ui); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
section { position: relative; padding-block: 88px; }
@media (min-width: 900px) { section { padding-block: 128px; } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 120; padding: 10px 16px; background: var(--ink); color: var(--bg); transition: top 200ms var(--ease-out); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* poze: culoarea medie tine locul pana se incarca */
.pic { position: relative; overflow: hidden; border-radius: var(--r); isolation: isolate; }
.pic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 520ms var(--ease-out); }
.pic img.is-loaded, .no-js .pic img { opacity: 1; }

/* titluri care urca din spatele unei masti */
.lines > span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines > span > i { display: block; font-style: normal; }
.gsap-on .lines > span > i { transform: translate3d(0, 105%, 0); }
.gsap-on .rise:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* ---------- meniu pe tot ecranul (aspectul in tema) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 96; }
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity 260ms var(--ease-out), visibility 0s 260ms; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease-out); }
.menu-inner { height: 100%; overflow-y: auto; padding: calc(var(--nav-h) + 40px) var(--pad) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a { opacity: 0; transform: translateY(24px); transition: opacity 320ms var(--ease-out), transform 400ms var(--ease-out); }
.menu.is-open .menu-nav a { opacity: 1; transform: none; }
.menu.is-open .menu-nav a:nth-child(2) { transition-delay: 40ms; } .menu.is-open .menu-nav a:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu-nav a:nth-child(4) { transition-delay: 120ms; } .menu.is-open .menu-nav a:nth-child(5) { transition-delay: 160ms; }
.menu.is-open .menu-nav a:nth-child(6) { transition-delay: 200ms; }
.burger { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.burger span { position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 320ms var(--ease-in-out); }
.burger span:nth-child(1) { transform: translateY(-5px); } .burger span:nth-child(2) { transform: translateY(5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

/* ---------- bara de jos pe telefon ---------- */
.cta-jos { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 94; display: flex; gap: 6px; padding: 6px; transform: translateY(140%); transition: transform 460ms var(--ease-drawer); }
.cta-jos.se-vede { transform: none; }
.cta-jos > * { flex: 1; justify-content: center; }
@media (min-width: 1000px) { .cta-jos { display: none; } }

/* ---------- fereastra: foaie de jos pe telefon, dialog pe desktop ---------- */
.modal { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s 280ms; }
.modal.is-open { visibility: visible; transition: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 400ms var(--ease-out); }
.modal.is-open .modal-scrim { opacity: 1; }
.modal-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: calc(var(--r) + 10px) calc(var(--r) + 10px) 0 0; padding: 8px 8px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 500ms var(--ease-drawer); }
.modal.is-open .modal-panel { transform: none; }
.modal:not(.is-open) .modal-panel { transition-duration: 260ms; transition-timing-function: var(--ease-out); }
.modal:not(.is-open) .modal-scrim { transition-duration: 220ms; }
.modal-panel::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 6px auto 10px; }
@media (min-width: 900px) {
  .modal-panel { left: 50%; top: 50%; right: auto; bottom: auto; width: min(1000px, calc(100% - 64px)); max-height: calc(100% - 64px); border-radius: var(--r); padding: 8px; transform: translate(-50%, -46%) scale(0.97); opacity: 0; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out); }
  .modal.is-open .modal-panel { transform: translate(-50%, -50%); opacity: 1; }
  .modal-panel::before { display: none; }
}
.modal-close { position: absolute; right: 16px; top: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: calc(var(--r) / 2); background: var(--ink); color: var(--bg); transition: transform 160ms var(--ease-out); }
.modal-close:active { transform: scale(0.94); }
.modal-grid { display: grid; gap: 8px; }
@media (min-width: 900px) { .modal-grid { grid-template-columns: 0.95fr 1.05fr; } }
.modal-media .pic { aspect-ratio: 16 / 11; }
@media (min-width: 900px) { .modal-media .pic { aspect-ratio: auto; height: 100%; min-height: 480px; } }
.modal-body { padding: 18px 16px 8px; }
@media (min-width: 900px) { .modal-body { padding: 40px 32px 30px; } }
.modal-body h3 { margin: 0; padding-right: 48px; }
.puncte { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.puncte li { display: flex; gap: 10px; align-items: flex-start; }
.puncte .ico { color: var(--accent); margin-top: 3px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- banda care curge (data-banda) ---------- */
.banda { overflow: hidden; touch-action: pan-y; cursor: grab; }
.banda.se-trage { cursor: grabbing; }
.banda-sina { display: flex; gap: 10px; width: max-content; will-change: transform; }
.banda-sina > * { flex: 0 0 auto; user-select: none; }
.tehnici { overflow: hidden; position: relative; z-index: 1; }
.tehnici-sina { display: flex; width: max-content; will-change: transform; }
.tehnici-grup { display: flex; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap; }

/* ---------- pista orizontala (data-pista-track) ---------- */
.pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px var(--pad) 8px; margin-inline: calc(var(--pad) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.pista::-webkit-scrollbar { display: none; }
.pista > * { flex: 0 0 auto; scroll-snap-align: start; }
.pista-bar { height: 2px; margin-top: 24px; background: var(--line); overflow: hidden; }
.pista-bar i { display: block; height: 100%; background: var(--accent); }

/* carusel (recenzii, poze): structura comuna; aspectul vine din theme.css */
.carusel { position: relative; }
.carusel-jos { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.carusel-jos .pista-bar { flex: 1; margin-top: 0; }
.carusel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.car-b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.car-b:active { transform: scale(0.96); }
.carusel .pista { padding-top: 0; padding-bottom: 4px; }
.carusel .pista > * { scroll-snap-align: center; }
.rec-c blockquote { margin: 0; }
.rec-c figcaption span { display: block; margin-top: 4px; opacity: 0.7; }

/* ---------- comparatie antes/despues (data-comp) ---------- */
.comp-stage { position: relative; overflow: hidden; border-radius: var(--r); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.comp-stage .pic { border-radius: 0; aspect-ratio: 1 / 1; }
.comp-stage .pic img { pointer-events: none; object-position: 50% 32%; }
.comp-dupa { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.comp-dupa .pic { height: 100%; }
.comp-linie { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.comp-maner { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); pointer-events: none; }
.comp-eti { position: absolute; top: 12px; z-index: 2; padding: 5px 11px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.9); color: #111; pointer-events: none; }
.comp-eti.st { left: 12px; } .comp-eti.dr { right: 12px; background: var(--accent); color: var(--accent-ink, #fff); }

/* ---------- usi care se deschid (data-usi) ---------- */
.usi { height: calc(var(--vh) * 2); padding: 0; }
.usi-stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.usi-fond, .usi-fond .pic { position: absolute; inset: 0; border-radius: 0; }
.usa { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; overflow: hidden; }
.usa.st { left: 0; } .usa.dr { right: 0; }
.usa .pic { position: absolute; inset: 0; border-radius: 0; }
.usi-text { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; text-align: center; padding-inline: var(--pad); }
.no-js .usa, .no-motion .usa { display: none; }
.no-js .usi, .no-motion .usi { height: var(--vh); }

/* ---------- carduri lipite care se suprapun (data-stack, doar ecran lat) ---------- */
@media (min-width: 900px) and (min-height: 760px) { [data-stack] > * { position: sticky; top: calc(var(--nav-h) + 40px); transform-origin: 50% 0; } }

/* ---------- galerie cu filtre ---------- */
.masonry { columns: 2; column-gap: 10px; }
@media (min-width: 800px) { .masonry { columns: 3; column-gap: 14px; } }
@media (min-width: 1180px) { .masonry { columns: 4; } }
.masonry figure { margin: 0 0 10px; break-inside: avoid; }
@media (min-width: 800px) { .masonry figure { margin-bottom: 14px; } }
.masonry figure[hidden] { display: none; }
.filtre { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 12px; scrollbar-width: none; }
.filtre::-webkit-scrollbar { display: none; }
.filtre button { flex: 0 0 auto; }

/* ---------- intrebari ---------- */
.q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q .plus { display: grid; place-items: center; flex: 0 0 auto; transition: transform 280ms var(--ease-out); }
.q[open] .plus { transform: rotate(45deg); }
.q-body { overflow: hidden; }

/* ---------- formular ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--card, #fff); border: 0; border-radius: calc(var(--r) / 2); padding: 14px 16px; box-shadow: inset 0 0 0 1.5px var(--line); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.field[data-error] input { box-shadow: inset 0 0 0 2px #C0182B; }
.field .err { font-size: 13.5px; color: #B0122A; }

/* program: ziua de azi */
.orar { list-style: none; margin: 0; padding: 0; }
.orar li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.orar li:last-child { border-bottom: 0; }

/* intro si trecerea intre pagini */
.intro { position: fixed; inset: 0; z-index: 130; pointer-events: none; animation: kit-intro-plasa 0s 3.5s forwards; }
@keyframes kit-intro-plasa { to { visibility: hidden; opacity: 0; } }
.no-motion .intro, .no-js .intro { display: none; }
.tranzitie { position: fixed; inset: 0; z-index: 125; pointer-events: none; opacity: 0; background: var(--bg); transition: opacity 240ms var(--ease-out); }
.tranzitie.se-vede { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .menu, .menu-nav a, .modal-panel, .modal-scrim, .cta-jos, .tranzitie { transition-duration: 160ms !important; transition-delay: 0s !important; }
  .menu-nav a { transform: none !important; }
  .modal-panel { transform: none !important; }
  @media (min-width: 900px) { .modal-panel { transform: translate(-50%, -50%) !important; } }
}

/* ===== tema ossett-gyros ===== */
/* Ossett Gyros · Ossett, West Yorkshire — greek street food.
   Paleta vine din localul LOR: peretii varuiti, copertina in dungi albastru-alb, albastrul
   din logo (#1646C7), lemnul platourilor.
   Userul a cerut structura de la andys.md / starkebab.md: PAGINA PRINCIPALA E MENIUL.
   Deci hero scurt cu mancare, bara de categorii lipita sus, apoi cardurile cu poze.
   Miscare putina si continua: benzile curg singure, restul apare la scroll. */
:root {
  --bg: #F8F5EF; --panou: #FFFFFF; --var: #F1ECE2;
  --ink: #102A4C; --ink-soft: #55657A; --ink-mute: #8A94A3;
  --accent: #1646C7; --accent-2: #2E86C8; --accent-ink: #FFFFFF;
  --lemn: #A9764A;
  --line: rgba(16, 42, 76, 0.14); --line-tare: rgba(16, 42, 76, 0.28);
  --f-d: 'Marcellus', Georgia, serif; --f-b: 'Figtree', system-ui, sans-serif;
  --r: 4px; --nav-h: 66px;
}
body { font-family: var(--f-b); font-size: 16.5px; background: var(--bg); color: var(--ink); }
a, button, summary, label { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--f-d); font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: clamp(2.2rem, 8vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 5.6vw, 3rem); }
h3 { font-size: clamp(1.05rem, 3vw, 1.3rem); }
p { margin: 0; }
em { font-style: normal; color: var(--accent); }
section { padding-block: 56px; }
@media (min-width: 900px) { section { padding-block: 80px; } }

.fasie-albastra { background: var(--accent); color: #fff; }

/* eticheta de sectiune */
.eti { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.eti::before, .eti::after { content: ''; width: 22px; height: 1px; background: var(--accent); opacity: 0.6; }
.lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 52ch; margin-top: 16px; line-height: 1.66; }
.mic { font-size: 13px; color: var(--ink-mute); }
.s-head { margin-bottom: 30px; }
.s-head.mijloc { text-align: center; }
.s-head.mijloc .eti { justify-content: center; }

/* butoane */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r); background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; transition: background-color 200ms ease, transform 120ms ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #0F37A8; } }
.btn:active { transform: scale(0.985); }
.btn-2 { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-tare); }
@media (hover: hover) and (pointer: fine) { .btn-2:hover { background: var(--ink); color: #fff; box-shadow: none; } }
.btn-alb { background: #fff; color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn-alb:hover { background: #EAF1FF; } }

/* bara de sus.
   Pe telefon e OPACA, fara blur (lectia 11): backdrop-filter pe o bara fixa peste o poza
   mare face iOS sa redeseneze la fiecare cadru si scrollul pe hero se smuceste. */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .nav { background: rgba(248, 245, 239, 0.92); backdrop-filter: blur(8px); } }
.nav-inner { display: flex; align-items: center; gap: 14px; height: var(--nav-h); max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.logo { margin-right: auto; display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.logo img { width: 40px; height: 40px; border-radius: 50%; }
.logo b { font-family: var(--f-d); font-weight: 400; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
.logo span { font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.nav-links { display: none; gap: 24px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-soft); }
.nav-links a[aria-current], .nav-links a:hover { color: var(--accent); }
.nav-cta { display: none; min-height: 40px; padding: 0 18px; font-size: 13px; }
@media (min-width: 1000px) { .nav-links, .nav-cta { display: inline-flex; } }

/* buton meniu */
.burger { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.burger-fund { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-tare); opacity: 0; transition: opacity 200ms ease, background-color 200ms ease; }
.burger[aria-expanded="true"] .burger-fund { opacity: 1; background: var(--accent); box-shadow: none; }
.burger > span { position: absolute; left: 50%; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 280ms ease, background-color 200ms ease; }
.burger > span:nth-child(2) { transform: translate(-50%, -4px); }
.burger > span:nth-child(3) { transform: translate(-50%, 4px); }
.burger[aria-expanded="true"] > span { background: #fff; }
.burger[aria-expanded="true"] > span:nth-child(2) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] > span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* meniu */
.menu { background: var(--panou); }
.menu-inner { padding-top: calc(var(--nav-h) + 18px); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.menu-nav a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.menu-t { font-family: var(--f-d); font-size: clamp(1.5rem, 6vw, 2.2rem); letter-spacing: 0.03em; }
.menu-nav a[aria-current] .menu-t { color: var(--accent); }
.menu-nav small { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); }
.menu-jos { display: grid; gap: 14px; justify-items: start; margin-top: 26px; }
.menu-contacte { display: grid; gap: 10px; }
.menu-contacte a, .menu-contacte span { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14.5px; }
.menu-contacte .ico { color: var(--accent); }
.cta-jos { background: var(--panou); padding: 6px; border-top: 1px solid var(--line); }
.cta-jos .btn { min-height: 46px; padding: 0 14px; font-size: 13px; }
@media (max-width: 999px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }

/* ===== HERO =====
   Scurt, si cu MANCARE in poza: clientul intra pentru mancare, nu pentru fatada.
   Pe telefon poza umple ecranul sub bara, cu textul peste, pe un degrade care urca din jos.
   Pe ecran lat se desface in doua: textul pe crem, poza (verticala) in dreapta. */
.hero { position: relative; padding: 0; background: var(--ink); overflow: hidden; contain: paint; }
.hero-poza { position: absolute; inset: 0; }
.hero-poza .pic, .hero-poza img { width: 100%; height: 100%; }
.hero-poza img { object-fit: cover; object-position: 52% 34%; }
.hero-poza::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,38,.46) 0%, rgba(8,20,38,.06) 26%, rgba(8,20,38,.45) 58%, rgba(8,20,38,.93) 100%); }
.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(var(--vh) * 0.86); width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding: calc(var(--nav-h) + 26px) var(--pad) 34px; color: #fff; }
.hero-eti { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 14px; }
.hero h1 { color: #fff; max-width: 14ch; text-shadow: 0 2px 30px rgba(6,16,32,.45); }
.hero-slogan { margin-top: 12px; font-family: var(--f-d); font-size: clamp(.9rem, 3.2vw, 1.15rem); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.hero-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero .btn-2 { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) { .hero .btn-2:hover { background: #fff; color: var(--ink); box-shadow: none; } }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.28); font-size: 12.5px; color: rgba(255,255,255,.82); }
.hero-note b { font-family: var(--f-d); font-size: 15px; color: #fff; }

@media (min-width: 900px) {
  .hero { background: var(--bg); display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch; }
  .hero-poza { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: calc(var(--vh) * 0.9); }
  .hero-poza::after { background: linear-gradient(90deg, rgba(248,245,239,.55) 0%, rgba(248,245,239,0) 26%); }
  .hero-in { grid-column: 1; grid-row: 1; min-height: 0; justify-content: center; color: var(--ink); padding: calc(var(--nav-h) + 40px) 40px 40px var(--pad); max-width: none; }
  .hero h1 { max-width: 17ch; }
  .hero-eti { color: var(--accent); }
  .hero h1 { color: var(--ink); text-shadow: none; }
  .hero-slogan { color: var(--accent); }
  .hero-note { border-top-color: var(--line); color: var(--ink-soft); }
  .hero-note b { color: var(--ink); }
  .hero .btn-2 { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-tare); }
}

/* pescarusi peste poza: se deplaseaza incet cand derulezi pagina */
.pescarusi { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.pescarusi span { position: absolute; display: block; color: rgba(255, 255, 255, 0.8); will-change: transform; }
.pescarusi [data-pasare="1"] { top: 11%; left: 8%; width: 42px; }
.pescarusi [data-pasare="2"] { top: 6%; left: 48%; width: 28px; opacity: .7; }
.pescarusi [data-pasare="3"] { top: 17%; left: 74%; width: 34px; opacity: .5; }
.pescarus { width: 100%; height: auto; display: block; }
@media (min-width: 900px) { .pescarusi [data-pasare="1"] { width: 58px; } .pescarusi [data-pasare="2"] { width: 40px; } .pescarusi [data-pasare="3"] { width: 46px; } }

/* bara de categorii, lipita sub bara de sus: meniul se parcurge dintr-o atingere */
.cat-bara { position: sticky; top: var(--nav-h); z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.cat-pista { display: flex; gap: 8px; overflow-x: auto; padding: 11px var(--pad); margin-inline: auto; max-width: calc(var(--wrap) + 2 * var(--pad)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-pista::-webkit-scrollbar { display: none; }
.cat-pista a { flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; background: var(--var); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
.cat-pista a.e-activ { background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .cat-pista a:hover { background: var(--accent); color: #fff; } }

/* meniul: o sectiune per categorie, fundal alternativ ca sa se vada unde se termina una */
.cat { scroll-margin-top: calc(var(--nav-h) + 62px); padding-block: 34px; }
.cat-var { background: var(--var); }
@media (min-width: 900px) { .cat { padding-block: 52px; } }
.cat-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cat-cap h2 { font-size: clamp(1.7rem, 5.4vw, 2.5rem); }
.cat-grec { margin-bottom: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; color: var(--accent); }
.cat-nota { font-size: 12.5px; color: var(--ink-soft); background: var(--panou); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.cat-var .cat-nota { background: var(--bg); }

/* cardul cu poza: 2 pe rand la telefon, ca la starkebab */
.fel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
@media (min-width: 700px) { .fel-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .fel-grid { grid-template-columns: repeat(4, 1fr); } }
.fel { display: flex; flex-direction: column; background: var(--panou); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cat-var .fel { border-color: rgba(16, 42, 76, 0.1); }
.fel-poza { position: relative; }
.fel-poza .pic { aspect-ratio: 4 / 3; }
.fel-poza img { width: 100%; height: 100%; object-fit: cover; }
.fel-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; }
.fel-nume { font-size: 1.02rem; line-height: 1.2; }
.fel-desc { font-size: 12.3px; line-height: 1.46; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fel-pret { margin-top: auto; align-self: flex-start; font-family: var(--f-d); font-size: 1rem; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 6px 15px; }
.fel-marcaj { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1B6E3C; background: rgba(255,255,255,.94); padding: 4px 8px; border-radius: 999px; }
@media (min-width: 700px) { .fel-nume { font-size: 1.1rem; } .fel-desc { font-size: 13px; } .fel-txt { padding: 14px 15px 16px; } }

/* randul fara poza: nume, linie punctata, pret - ca pe tabla unei taverne */
.rand-lista { margin-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .rand-lista { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 46px; } }
.rand { padding: 13px 0; border-bottom: 1px solid var(--line); }
.rand-sus { display: flex; align-items: baseline; gap: 9px; }
.rand-sus h3 { font-size: 1.02rem; white-space: nowrap; }
.rand-linie { flex: 1; height: 1px; border-bottom: 1px dotted var(--line-tare); transform: translateY(-3px); }
.rand-pret { font-family: var(--f-d); font-size: 1.02rem; color: var(--accent); }
.rand .fel-marcaj { position: static; background: none; padding: 0; color: #2F7D32; font-size: 9.5px; }
.rand-desc { margin-top: 5px; font-size: 12.8px; line-height: 1.5; color: var(--ink-soft); max-width: 56ch; }

/* nota de alergeni */
.alergeni { padding: 18px 20px; background: var(--var); border-radius: var(--r); font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.alergeni b { color: var(--ink); }

/* ===== benzi care curg singure (data-banda: transform pe o sina, merge si pe iPhone) ===== */
.banda-poze .banda-sina { gap: 8px; }
.banda-poze figure { margin: 0; width: 46vw; max-width: 250px; border-radius: var(--r); overflow: hidden; }
.banda-poze .pic { aspect-ratio: 1 / 1; }
.banda-poze img { width: 100%; height: 100%; object-fit: cover; }
.banda-rec { padding-block: 2px 6px; }
.banda-rec .banda-sina { gap: 12px; align-items: stretch; }
.banda-rec .rec-c { margin: 0; width: 76vw; max-width: 330px; }
@media (min-width: 900px) { .banda-rec .rec-c { width: 350px; } }

/* despre / taverna */
.doua { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .doua { grid-template-columns: 1fr 1fr; gap: 54px; } }
.doua .pic { border-radius: var(--r); }

/* recenzii */
.rec-c { background: var(--panou); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.rec-stele { display: flex; gap: 2px; color: #E8A33D; }
.rec-stele svg { width: 15px; height: 15px; }
.rec-c blockquote { margin: 0; font-size: 14.4px; line-height: 1.62; color: var(--ink-soft); }
.rec-c figcaption { margin-top: auto; }
.rec-c figcaption b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rec-c figcaption span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.note { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nota-c { flex: 1 1 130px; background: var(--panou); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-align: center; }
.nota-c b { display: block; font-family: var(--f-d); font-size: 1.7rem; color: var(--accent); }
.nota-c span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-mute); }

/* unde ne gasesti */
.info-lista { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.info-lista a, .info-lista div { display: flex; align-items: center; gap: 13px; background: var(--panou); padding: 16px 18px; color: var(--ink); font-size: 14.6px; }
.info-lista .ico { color: var(--accent); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { .info-lista a:hover { background: #EEF3FF; } }
.orar { border-top: 1px solid var(--line); margin-top: 4px; }
.orar-r { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.orar-r.azi { color: var(--accent); font-weight: 600; }
.orar-r.inchis span:last-child { color: var(--ink-mute); }

/* platformele de livrare */
.livrare { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.livrare a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--panou); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .livrare a:hover { border-color: var(--accent); color: var(--accent); } }

/* intrebari */
.q { border-bottom: 1px solid var(--line); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--f-d); font-size: 1.06rem; }
.q summary::-webkit-details-marker { display: none; }
.q .plus { color: var(--accent); }
.q .disc { padding-bottom: 18px; font-size: 14.4px; line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }

/* subsol */
.foot { background: var(--ink); color: #fff; padding-block: 48px 26px; }
.foot h4 { font-family: var(--f-b); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.foot-mare { font-family: var(--f-d); font-size: clamp(1.7rem, 6vw, 3rem); line-height: 1.16; margin-bottom: 8px; }
.foot-slogan { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.foot-col { display: grid; gap: 26px; margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
@media (min-width: 760px) { .foot-col { grid-template-columns: repeat(3, 1fr); } }
.foot-col a, .foot-col span { display: block; padding: 4px 0; color: rgba(255,255,255,.78); font-size: 14.2px; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: #fff; } }
.foot-mic { margin-top: 28px; font-size: 12px; color: rgba(255,255,255,.5); }

/* intro: logo-ul lor pe albastrul lor, o singura data pe sesiune. Scurt. */
.intro { background: var(--accent); display: grid; place-items: center; }
.intro-in { text-align: center; color: #fff; padding-inline: var(--pad); }
.intro-logo { width: 104px; height: 104px; border-radius: 50%; background: #fff; padding: 7px; margin-inline: auto; }
.intro-in b { display: block; margin-top: 18px; font-family: var(--f-d); font-weight: 400; font-size: clamp(1.6rem, 7vw, 2.6rem); letter-spacing: 0.09em; text-transform: uppercase; }
.intro-in small { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
@media (min-width: 900px) { .intro-logo { width: 128px; height: 128px; } }

/* dungile copertinei de pe vitrina lor, ca fasie intre sectiuni */
.copertina { height: 14px; background-image: repeating-linear-gradient(90deg, var(--accent) 0 16px, #fff 16px 32px); }
.copertina.rasturnata { background-image: repeating-linear-gradient(90deg, #fff 0 16px, var(--accent) 16px 32px); }
@media (min-width: 900px) { .copertina { height: 18px; background-image: repeating-linear-gradient(90deg, var(--accent) 0 22px, #fff 22px 44px); }
  .copertina.rasturnata { background-image: repeating-linear-gradient(90deg, #fff 0 22px, var(--accent) 22px 44px); } }

/* bun venit in greaca, cum scrie in taverne */
.bun-venit { font-family: var(--f-d); font-size: clamp(1.3rem, 5.2vw, 2rem); letter-spacing: 0.22em; }
.specialitati { margin-top: 8px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }

/* peretele varuit: textura foarte discreta pe fundalul paginii */
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035;
  background-image: radial-gradient(circle at 20% 30%, #102A4C 0 1px, transparent 1px),
                    radial-gradient(circle at 70% 60%, #102A4C 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px; }
.wrap, header, footer, section, .fasie-albastra, .copertina { position: relative; z-index: 1; }

/* miscarea: textul din hero urca la incarcare, cardurile raspund la atingere */
@media (prefers-reduced-motion: no-preference) {
  .hero-eti, .hero h1, .hero-slogan, .hero-act, .hero-note { animation: og-urca 700ms cubic-bezier(.22,1,.36,1) both; }
  .hero h1 { animation-delay: 80ms; }
  .hero-slogan { animation-delay: 160ms; }
  .hero-act { animation-delay: 240ms; }
  .hero-note { animation-delay: 320ms; }
  @keyframes og-urca { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .fel { transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; }
  .fel:active { transform: scale(0.985); }
}
@media (hover: hover) and (pointer: fine) {
  .fel:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(16,42,76,.09); }
  .nota-c { transition: transform 240ms ease; }
  .nota-c:hover { transform: translateY(-3px); }
}