/* ═══════════════════════════════════════════════════════════
   MOBILE SLIDESHOW — MKL Performance  v10.22.0
   Reguli DESKTOP-NEUTRE (în afara @media) — nu afectează nimic pe desktop.
   Toate overrides mobile sunt strict în @media (max-width: 768px).
   ═══════════════════════════════════════════════════════════ */

/* Instagram button — ascuns pe desktop, afișat pe mobile în @media */
#insta-mobile-btn { display: none; }

/* Wrapper scroll mobile — transparent pe desktop (div normal, fără stiluri) */
/* #m-scroll-root — nicio regulă desktop */

/* Snap container — block pe desktop */
#m-snap { display: block; }

/* Slide-uri — display:contents pe desktop (transparente la layout,
   conținutul participă direct în părintele lor sticky/scroll).
   Asta era comportamentul ORIGINAL și a funcționat OK pe desktop. */
.m-slide { display: contents; }

/* Hamburger + menu — ascunse pe desktop */
#m-hamburger, #m-menu { display: none; }

/* ms-17b — slide canale contact, doar mobile */
#ms-17b { display: none; }

/* Header de servicii dedicat mobile — ascuns pe desktop */
.srv-services-head { display: none; }


/* ═══════════════════════════════════════════════════════════
   MOBILE ONLY — tot ce urmează e strict pentru mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) { /* --bp-mobile = 768px */

  /* ─────────────────────────────────────────────────────────
     SCROLL CONTAINER
     position:fixed pe #m-scroll-root = umple exact viewport-ul pe ORICE browser
     (Safari, Chrome, Firefox) fără să modificăm html/body overflow.
     Elementele fixed ies din flow-ul normal → nu afectează html/body height.
     z-index:0 → sub hamburger (z-modal+1) și video-popup (z-modal).
     ───────────────────────────────────────────────────────── */

  html {
    height: 100%;
    overflow-x: hidden; /* previne scroll orizontal cauzat de #m-menu translateX(100%) */
  }

  body {
    height: 100%;
    overflow-x: hidden;
  }

  #m-scroll-root {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
  }

  #m-snap {
    display: block;
    width: 100%;
  }

  /* ─────────────────────────────────────────────────────────
     SLIDE-URI
     .m-slide pe desktop = display:contents. Pe mobile = display:block + full-screen.
     calc(var(--m-vh, 1dvh) * 100) = large viewport height (iOS URL bar ascunsă) → slide mereu ≥ ecran
     → slide-ul următor nu se vede la baza ecranului.
     ───────────────────────────────────────────────────────── */

  .m-slide {
    display: block;
    position: relative;
    width: 100%;
    height: calc(var(--m-vh, 1dvh) * 100);
    min-height: calc(var(--m-vh, 1dvh) * 100);
    max-height: calc(var(--m-vh, 1dvh) * 100);
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  /* Slide-uri cu scroll intern — Instagram (ms-14) și Contact (ms-17).
     overflow-y:auto necesar pentru că conținutul depășește calc(var(--m-vh, 1dvh) * 100).
     Escape din slide bazat pe touch gesture (JS), nu scroll event. */
  #ms-14 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ms-17 (Contact) — pe mobile afișează doar formularul (contact-right ascuns).
     overflow-y:auto permite accesul la butonul Trimite fără scroll orizontal. */
  #ms-17 .contact-right { display: none !important; }

  #ms-17 {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ms-17b — slide nou mobile-only cu butoanele de contact */
  #ms-17b {
    display: block;
  }

  .ms17b-bg {
    position: absolute;
    inset: 0;
    background: url('../PHOTOs/bg-contact.webp') left center / cover no-repeat;
    filter: brightness(0.45);
    z-index: 0;
  }

  .ms17b-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      var(--color-bg) 0%,
      transparent 20%,
      transparent 80%,
      var(--color-bg) 100%
    );
    z-index: 1;
  }

  .ms17b-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-40) var(--space-24);
    box-sizing: border-box;
  }

  .ms17b-channels {
    width: 100%;
    max-width: 480px;
    overflow-x: hidden;
  }

  /* ─────────────────────────────────────────────────────────
     FOOTER — punct de snap propriu după ms-18
     min-height:calc(var(--m-vh, 1dvh) * 100) garantează că snap:start e mereu accesibil.
     ───────────────────────────────────────────────────────── */

  footer#footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(var(--m-vh, 1dvh) * 100);
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
  }

  /* MKL PERFORMANCE footer — portocaliu, un singur rând */
  .footer-brand-name {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    color: var(--color-accent) !important;
    white-space: nowrap !important;
  }

  .footer-top {
    grid-template-columns: 1fr !important;
    gap: var(--space-40) !important;
    text-align: center !important;
  }

  .footer-logo-wrap {
    align-items: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: var(--space-20) !important;
    text-align: center !important;
  }

  /* ─────────────────────────────────────────────────────────
     ANIMAȚII — tranziții pe .m-anim-target
     JS setează opacity + transform ca inline styles (bat orice CSS class/ID).
     CSS furnizează doar tranziția vizuală (ease + duration).
     ───────────────────────────────────────────────────────── */

  .m-slide .m-anim-target {
    transition:
      opacity  0.60s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.60s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  /* ─────────────────────────────────────────────────────────
     HAMBURGER BUTTON
     ───────────────────────────────────────────────────────── */

  #m-hamburger {
    display: flex !important;
    position: fixed;
    top: var(--space-16);
    right: var(--space-16);
    width: var(--space-48);
    height: var(--space-48);
    border-radius: 50%;
    background: var(--scrim-70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-subtle);
    z-index: calc(var(--z-modal) + 1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  #m-hamburger .m-ham-bar {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  #m-hamburger.is-open .m-ham-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  #m-hamburger.is-open .m-ham-bar:nth-child(2) { opacity: 0; }
  #m-hamburger.is-open .m-ham-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  #m-hamburger.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

  /* ─────────────────────────────────────────────────────────
     MENU OVERLAY
     ───────────────────────────────────────────────────────── */

  #m-menu {
    display: block !important;
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  #m-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  #m-menu-list {
    list-style: none;
    padding: var(--space-60) var(--space-32) var(--space-40);
    margin: 0;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  #m-menu-list li {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  #m-menu-list li:last-child {
    border-bottom: none;
  }

  #m-menu-list a {
    display: block;
    padding: var(--space-16) 0;
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: 'BlenderPro', sans-serif;
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }

  #m-menu-list a.is-active {
    color: var(--color-accent);
    padding-left: var(--space-8);
  }

  /* ─────────────────────────────────────────────────────────
     TIPOGRAFIE GLOBALĂ MOBILE
     Anulăm animațiile CSS din index.css (fadeUp cu opacity:0).
     CSS animations override inline styles din JS — trebuie anulate.
     ───────────────────────────────────────────────────────── */

  .hero-eyebrow,
  h1.hero-title,
  .hero-actions {
    animation: none;
  }

  h1.hero-title {
    font-size: var(--text-mobile-hero) !important;
    line-height: 1.05 !important;
  }

  .cin-title,
  #preg-h2,
  #adrian-name h2,
  .srv-hero-title,
  .mkl-banner-title,
  #com-h2,
  .exp-title,
  .contact-left h2 {
    font-size: var(--text-mobile-h1) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  /* GSAP override fix — unele elemente au opacity:0 setat de GSAP/index.css.
     Pe mobile cleanup() le curăță, dar CSS explicit asigură vizibilitate
     pentru elementele care NU sunt animate de JS (containers, backgrounds etc.) */
  #instagram,
  #recenzii,
  #fani {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #contact-bg {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #contact-form-wrap,
  #contact-channels-wrap {
    opacity: 1 !important;
    transform: none !important;
  }

  #ms-5 #preg-cards-wrap {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .m-slide .srv-cards-sticky {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-1 — HERO
     ───────────────────────────────────────────────────────── */

  #ms-1 #hero {
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-2 / MS-3 — CINEMATIC (Despre Noi I & II)
     Desktop: cin-wrap = 540vh sticky. Mobile: calc(var(--m-vh, 1dvh) * 100) static.
     !important necesar să depășească GSAP inline styles.
     ───────────────────────────────────────────────────────── */

  #despre-noi {
    background: var(--color-bg);
  }

  .cin-wrap {
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    position: relative !important;
  }

  .cin-sticky {
    position: absolute !important; /* !important: override GSAP position:sticky inline */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .cin-img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .cin-cover {
    display: none !important;
  }

  .cin-word {
    font-size: clamp(50px, 18vw, 80px) !important;
    -webkit-text-stroke: var(--space-2) var(--color-border-bright) !important;
  }

  .cin-body {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 var(--space-24) var(--space-60) !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
  }

  .cin-body--right {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .cin-grad,
  .cin-grad--right {
    width: 100% !important;
    bottom: -1px !important;
    background: linear-gradient(
      to top,
      var(--scrim-97) 0%,
      var(--scrim-65) 50%,
      var(--scrim-00) 100%
    ) !important;
  }

  .cin-text {
    font-size: var(--text-base) !important;
    line-height: 1.55 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #cta-2 {
    opacity: 1 !important;
    margin-top: var(--space-16) !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-4 — ALEGE-ȚI STILUL (titlul Pregătește-te)
     MS-5 — PREGĂTEȘTE-TE (cardurile)
     Desktop: 660vh un singur trigger. Mobile: 2 slide-uri x calc(var(--m-vh, 1dvh) * 100).
     ───────────────────────────────────────────────────────── */

  #pregateste {
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    position: relative !important;
  }

  #preg-wrap {
    height: auto !important;
    position: relative !important;
    display: block !important;
  }

  #preg-title-sticky {
    position: relative !important;
    top: auto !important;
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    z-index: var(--z-content) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 var(--space-28) !important;
    background: var(--color-bg) !important;
  }

  #preg-eyebrow {
    font-size: var(--text-label) !important;
    letter-spacing: 3px !important;
    margin-bottom: var(--space-20) !important;
  }

  #preg-h2 {
    text-align: center !important;
    font-size: var(--text-mobile-hero) !important;
    line-height: 1.05 !important;
  }

  #preg-cards-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    z-index: var(--z-raised) !important;
    background: var(--color-bg) !important;
    box-shadow: none !important;
  }

  .preg-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    height: 100% !important;
    gap: 0 !important;
  }

  .preg-card {
    height: 100% !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .preg-card:first-child {
    border-right: none !important;
    border-bottom: none !important;
  }

  .preg-card-content {
    padding: 0 var(--space-24) var(--space-24) !important;
    justify-content: flex-end !important;
    height: 100% !important;
    position: relative !important;
  }

  .preg-card-tag {
    font-size: var(--text-xs) !important;
  }

  .preg-card-title {
    font-size: clamp(26px, 7vw, 38px) !important;
  }

  .preg-card-desc {
    font-size: var(--text-base) !important;
    line-height: 1.45 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    display: block !important;
    margin-bottom: 0 !important;
  }

  .preg-card-arrow {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-6 — ADRIAN SANDU
     Desktop: 480vh sticky. Mobile: calc(var(--m-vh, 1dvh) * 100) static.
     ───────────────────────────────────────────────────────── */

  #adrian {
    height: 100% !important;
    overflow: hidden !important;
  }

  #adrian-wrap {
    height: 100% !important;
    position: relative !important;
  }

  #adrian-sticky {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    overflow: hidden !important;
    display: block !important;
    opacity: 1 !important;
  }

  #adrian-photo-side {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
    opacity: 1 !important;       /* override GSAP/index.css opacity:0 */
    visibility: visible !important;
  }

  #adrian-name {
    position: absolute !important;
    bottom: calc(var(--space-60) + 80px) !important; /* +80px clearance bara Chrome Android */
    left: var(--space-24) !important;
    width: calc(100% - var(--space-48)) !important;
    z-index: var(--z-nav) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #adrian-name h2 {
    font-size: clamp(40px, 11vw, 66px) !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 1.0 !important;
  }

  #adrian-name h2 em {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  #adrian-name .cin-label {
    display: block !important;
    text-align: left !important;
    margin: 0 0 var(--space-14) 0 !important;
  }

  /* Aliniat pe verticala cu #adrian-name (Adrian Sandu), jos */
  #adrian-hint {
    top: auto !important;
    bottom: calc(var(--space-60) + 80px) !important;
    transform: none !important;
  }

  /* Buton (cercul) cu 20% mai mic pe mobil */
  #adrian-hint-circle {
    width: calc(var(--space-72) * 0.8) !important;
    height: calc(var(--space-72) * 0.8) !important;
  }
  #adrian-hint-circle svg {
    width: calc(var(--space-28) * 0.8) !important;
    height: calc(var(--space-28) * 0.8) !important;
  }

  #adrian-sticky.open #adrian-photo-side {
    height: 100% !important;
    opacity: 1 !important;
    filter: blur(10px) brightness(0.3) !important;
  }

  #adrian-panel {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    height: 100vh !important;
    right: 0 !important;
    z-index: var(--z-modal) !important;
  }

  #adrian-text-cols {
    grid-template-columns: 1fr !important;
    gap: var(--space-24) !important;
  }

  #adrian-panel-inner {
    padding: var(--space-60) var(--space-24) var(--space-80) !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-7 — EXPERIENȚE
     ───────────────────────────────────────────────────────── */

  #ms-7 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #experiente {
    padding: var(--space-40) 0 !important;
    height: auto !important;
  }

  .exp-inner {
    padding: 0 var(--space-24) var(--space-48) !important;
  }

  .exp-track-wrap {
    padding: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-8 — MOTTO "NIMIC NU TE POATE OPRI"
     Desktop: 420vh sticky. Mobile: calc(var(--m-vh, 1dvh) * 100).
     JS animează #mkl-eyebrow, #mkl-h2, #mkl-logo-img, #mkl-banner-btn
     cu fade + translate (nu punem opacity/transform în CSS — JS le controlează).
     ───────────────────────────────────────────────────────── */

  #mkl-cta-banner {
    height: 100% !important;
    overflow: hidden !important;
  }

  #mkl-banner-wrap {
    height: 100% !important;
    position: relative !important;
    padding: 0 !important;
  }

  #mkl-banner-sticky {
    position: relative !important;
    top: auto !important;
    /* height:100% poate eșua când părinții nu au înălțime explicită.
       Setăm direct la aceeași valoare ca slide-ul → flex centering funcționează garantat. */
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #mkl-banner-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 var(--space-24) !important;
    box-sizing: border-box !important;
  }

  /* Eyebrow ms-8 — letter-spacing 5px face textul prea lat pe Chrome */
  .mkl-banner-eyebrow {
    letter-spacing: 2px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* AVENTURA background word — ascuns pe mobile (prea mult spațiu ocupat) */
  .mkl-bg-word {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-9 / MS-11 — CIRCUIT / STRADĂ HERO
     MS-10 / MS-12 — CIRCUIT / STRADĂ SERVICII (carduri)
     Desktop: 800vh. Mobile: fiecare = calc(var(--m-vh, 1dvh) * 100) separat.
     ───────────────────────────────────────────────────────── */

  #circuit,
  #strada {
    height: auto !important;
    overflow: visible !important;
  }

  #circuit-wrap,
  #strada-wrap {
    height: auto !important;
    position: relative !important;
  }

  /* HERO */
  .srv-hero {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    z-index: var(--z-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .srv-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.55;
    visibility: visible;
    transform: none;
    -webkit-mask-image: none !important; /* !important: override desktop mask-image */
    mask-image: none !important;
  }

  #circuit-hero .srv-hero-bg {
    background-position: center 65%;
  }

  .srv-hero-overlay {
    background: linear-gradient(
      to bottom,
      var(--color-bg) 0%,
      var(--scrim-40) 15%,
      var(--scrim-40) 60%,
      transparent 100%
      /* fundul transparent: elimină bledul negru vizibil la tranziția spre cards */
    ) !important; /* !important: override desktop flat scrim */
  }

  .srv-hero-content {
    position: relative !important;
    z-index: var(--z-nav) !important;
    width: 100% !important;
    padding: var(--space-24) var(--space-24) 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .srv-label {
    padding-left: 0 !important;
    font-size: var(--text-xs) !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    display: block !important;
  }

  .srv-label::before { display: none !important; }
  .srv-hero-desc { display: none !important; }
  .srv-scroll-hint { display: none !important; }

  /* SERVICII — slide separat cu carduri orizontale */
  #ms-10,
  #ms-12 {
    background: var(--color-bg) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .srv-services-head {
    display: block !important;
    flex: 0 0 auto !important;
    padding: var(--space-60) var(--space-24) var(--space-20) !important;
    text-align: center !important;
    background: var(--color-bg) !important;
  }

  .srv-services-head .srv-label {
    margin-bottom: var(--space-8) !important;
    color: var(--color-accent) !important;
  }

  .srv-services-title {
    font-family: 'BlenderPro', sans-serif !important;
    font-weight: var(--weight-black) !important;
    font-size: var(--text-mobile-h1) !important;
    line-height: 1.08 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    color: var(--color-text-primary) !important;
  }

  /* Carusel orizontal de carduri */
  .srv-cards-sticky {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    z-index: var(--z-content) !important;
    padding: 0 !important;
    background: transparent !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .srv-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    padding: 0 var(--space-16) var(--space-24) !important;
    gap: var(--space-12) !important;
    width: max-content !important;
  }

  .srv-card {
    flex: 0 0 78vw !important;
    height: 100% !important;
    min-height: unset !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: var(--space-8) !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    position: relative !important;
  }

  .srv-card + .srv-card {
    border-left: none !important;
    border-top: none !important;
  }

  .srv-card-img { opacity: 0.75 !important; }

  /* Dezactivare hover pe mobile — touch activează :hover și scoate overlay-ul.
     Forțăm overlay-ul să rămână fix indiferent de starea :hover.
     Override și :first-child/:last-child din index.css (au specificitate mai mare). */
  .srv-card:hover .srv-card-img { transform: none !important; }

  .srv-card-overlay,
  .srv-card:hover .srv-card-overlay,
  .srv-card:first-child .srv-card-overlay,
  .srv-card:last-child .srv-card-overlay {
    display: block !important;
    background: linear-gradient(
      to top,
      var(--scrim-95) 0%,
      var(--scrim-60) 45%,
      var(--scrim-00) 100%
    ) !important;
  }

  .srv-card-content {
    position: relative !important;
    bottom: auto !important;
    padding: var(--space-20) !important;
  }

  .srv-card-content h3 {
    font-size: var(--text-lg) !important;
    margin-bottom: var(--space-8) !important;
    white-space: normal !important;
  }

  /* Text complet — fără line-clamp, fără overflow:hidden */
  .srv-card-content p {
    font-size: var(--text-base) !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-13 — COMENZI PERSONALIZATE
     Desktop: 300vh. Mobile: calc(var(--m-vh, 1dvh) * 100).
     ───────────────────────────────────────────────────────── */

  #comenzi {
    height: 100% !important;
    overflow: hidden !important;
  }

  #com-wrap {
    height: 100% !important;
    position: relative !important;
    padding: 0 !important;
  }

  #com-sticky {
    position: relative !important;
    top: auto !important;
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    overflow: hidden !important;
    padding: var(--space-40) 0 var(--space-40) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #com-content {
    padding: 0 var(--space-28) !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Titlu Comenzi — redus față de default dar vizibil; 2 linii cu <br> explicit în HTML */
  #com-h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.06 !important;
  }

  #com-desc {
    font-size: var(--text-base) !important;
    line-height: 1.50 !important;
    margin-top: var(--space-8) !important;
  }

  #com-carousels {
    width: 100% !important;
    margin-top: var(--space-32) !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-14 — INSTAGRAM
     overflow-y:auto permis (setat global mai sus).
     ───────────────────────────────────────────────────────── */

  #instagram {
    height: auto !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    padding: var(--space-40) var(--space-20) var(--space-40) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Titlul "INSTAGRAM" prea mare — se micșorează ca totul să încapă pe un ecran */
  #instagram h2,
  #instagram .social-title {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    margin-bottom: var(--space-8) !important;
  }

  /* Descrierea mai compactă */
  #instagram .social-desc,
  #instagram p {
    font-size: var(--text-base) !important;
    line-height: 1.45 !important;
    margin-bottom: var(--space-12) !important;
  }

  .social-inner {
    padding: 0 var(--space-8) var(--space-8) !important;
    text-align: center !important;
  }

  .insta-profile {
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-12) !important;
    text-align: left !important;
  }

  .insta-profile-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .insta-tagline {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .insta-profile .btn-primary { display: none !important; }

  #insta-mobile-btn {
    display: block !important;
    width: auto !important;
    margin: var(--space-12) auto 0 !important;
    font-size: calc(var(--text-xs) + 2px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    padding: var(--space-12) var(--space-28) !important;
  }

  .insta-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    margin-top: var(--space-16) !important;
    gap: var(--space-4) !important;
  }

  /* Afișăm doar primele 4 poze (2×2) */
  .insta-item:nth-child(n+5) { display: none !important; }

  /* ─────────────────────────────────────────────────────────
     MS-15 — RECENZII
     ───────────────────────────────────────────────────────── */

  #ms-15 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #recenzii {
    height: auto !important;
    padding: var(--space-40) var(--space-20) !important;
  }

  .grb-subtext {
    margin-top: var(--space-24) !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-16 — FANI MĂRCI
     ───────────────────────────────────────────────────────── */

  #ms-16 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #fani {
    height: auto !important;
    margin-top: 0 !important;
    padding: var(--space-40) 0 !important;
    position: relative !important;
    z-index: auto !important;
  }

  .exp-logo img { height: var(--space-80) !important; }
  .exp-logos {
    gap: var(--space-40) !important;
    padding: var(--space-10) var(--space-20) !important;
  }

  /* ─────────────────────────────────────────────────────────
     MS-17 — CONTACT
     overflow-y:auto permis (setat global mai sus) pentru formular lung.
     Escape din slide bazat pe touch gesture (JS).
     ───────────────────────────────────────────────────────── */

  #contact {
    height: auto !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #contact-wrap {
    height: auto !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    position: relative !important;
    z-index: auto !important;
  }

  #contact-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: calc(var(--m-vh, 1dvh) * 100) !important;
    display: block !important;
    background: var(--color-bg) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #contact-bg {
    position: absolute !important;
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    z-index: var(--z-base) !important;
  }

  #contact-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: var(--z-overlay) !important;
  }

  .contact-inner {
    position: relative !important;
    z-index: var(--z-content) !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-20) !important;
    padding: var(--space-40) var(--space-24) var(--space-32) !important;
    margin-top: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
  }

  /* ms-17 #contact-overlay — specificitate 2,0,0 depășește index.css 1,0,0 */
  #ms-17 #contact-overlay { opacity: 1 !important; }

  .contact-left { text-align: center !important; }

  .contact-left h2 {
    text-align: center !important;
    margin-bottom: var(--space-24) !important;
  }

  .contact-form { text-align: left !important; }
  .contact-right { text-align: left !important; }

  .contact-right h3 {
    text-align: left !important;
    margin-bottom: var(--space-20) !important;
  }

  .contact-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-12) !important;
  }

  .contact-field {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-field input,
  .contact-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .contact-channel-value {
    font-size: clamp(13px, 3.8vw, 18px) !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .contact-channel-label { font-size: var(--text-xs) !important; }

  #contact-channels-wrap {
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  .contact-channel {
    padding: var(--space-16) var(--space-20) !important;
    text-align: left !important;
    white-space: normal !important; /* index.css pune nowrap → overflow orizontal */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-channels {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-channel-text { text-align: left !important; }

  /* ─────────────────────────────────────────────────────────
     MS-18 — VIDEO
     ───────────────────────────────────────────────────────── */

  #video-section {
    height: calc(var(--m-vh, 1dvh) * 100) !important;
    padding: 0 !important;
    background: var(--color-bg) !important;
    overflow: hidden !important;
  }

} /* /end @media (max-width: 768px) */