/* Meniul mare „Ce facem” — Optical Design, comun pentru poartă + 4 studiouri (08.11.2026).
   Sursa: _shared/servicii/mm.css (copiat în fiecare site de meniu.mjs). Totul e sub .mm / .mma / .mm-trig. */

/* butonul din antet: moștenește stilul linkurilor site-ului, plus săgeata */
.mm-trig{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer}
.mm-trig .mm-chev{width:12px;height:12px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mm-trig[aria-expanded=true] .mm-chev{transform:rotate(180deg)}

/* ---------------- panoul (calculator) ---------------- */
.mm{--mm-bg:#09090C;--mm-ink:#F4F4F6;--mm-dim:rgba(244,244,246,.62);--mm-line:rgba(244,244,246,.13);
  position:fixed;left:0;right:0;top:var(--mm-top,80px);z-index:99;background:var(--mm-bg);color:var(--mm-ink);
  font:400 16px/1.45 'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;text-align:left;
  max-height:calc(100vh - var(--mm-top,80px));max-height:calc(100dvh - var(--mm-top,80px));overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);clip-path:inset(0 0 100% 0);transition:clip-path .32s cubic-bezier(.2,.8,.2,1)}
.mm[hidden]{display:none}
.mm.is-open{clip-path:inset(0 0 -60px 0)}
.mm::before{content:"";position:sticky;top:0;display:block;height:6px;z-index:2;background:linear-gradient(90deg,#FF4A1C 0 25%,#2747FF 25% 50%,#F4F4F6 50% 75%,#FFD84D 75%)}
.mm *,.mm *::before,.mm *::after{box-sizing:border-box}
.mm a{color:inherit;text-decoration:none}
.mm ul{list-style:none;margin:0;padding:0}
.mm p{margin:0}
.mm :focus-visible{outline:3px solid #FFD84D;outline-offset:2px}
.mm__in{position:relative;display:grid;grid-template-columns:minmax(250px,320px) 1fr;max-width:1760px;margin:0 auto;min-height:min(560px,calc(100vh - var(--mm-top,80px) - 6px))}

/* șina din stânga: categoriile, litere mari, se umple cu culoarea categoriei */
.mm__rail{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px 0 24px;border-right:1px solid var(--mm-line)}
.mm__rail [role=tablist]{display:flex;flex-direction:column}
.mm__tab{position:relative;display:flex;align-items:baseline;gap:12px;width:100%;padding:9px 22px 8px 26px;border:0;background:none;color:var(--mm-ink);cursor:pointer;text-align:left;overflow:hidden;isolation:isolate}
.mm__tab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.mm__tab[aria-selected=true]{color:var(--ci)}
.mm__tab[aria-selected=true]::before{transform:scaleX(1)}
.mm__tab:hover:not([aria-selected=true]) .mm__tn{transform:translateX(6px)}
.mm__n{font:700 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;opacity:.6;min-width:18px}
.mm__tn{font:400 clamp(21px,1.75vw,27px)/1.12 Anton,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mm__all{display:inline-flex;align-items:center;gap:8px;margin:0 22px 0 26px;padding:12px 18px;border-radius:999px;background:#F4F4F6;color:#09090C!important;font:700 13px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;align-self:flex-start;transition:transform .2s}
.mm__all:hover{transform:translateY(-2px)}

/* panoul categoriei */
.mm__panes{position:relative;min-width:0}
.mm__pane{position:relative;height:100%;padding:30px clamp(24px,3vw,52px) 34px;overflow:hidden}
.mm__pane[hidden]{display:none}
.mm__pane::after{content:attr(data-word);position:absolute;right:-.04em;bottom:-.16em;z-index:0;pointer-events:none;font:400 clamp(130px,15vw,270px)/1 Anton,'Arial Narrow',Impact,sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--ca);opacity:.2;letter-spacing:-.01em;white-space:nowrap}
.mm__head{position:relative;z-index:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;padding-right:56px;margin-bottom:22px}
.mm__h{font:400 clamp(38px,4vw,66px)/1.08 Anton,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;color:var(--ca);letter-spacing:.005em}
.mm__pitch{font:500 16px/1.4 'Inter Tight',system-ui,sans-serif;color:var(--mm-dim);max-width:34ch}
.mm__cols{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(220px,.95fr);gap:clamp(20px,2.6vw,44px);align-items:start}
.mm__pane--one .mm__cols{grid-template-columns:minmax(0,1fr) minmax(260px,420px)}
.mm__ct{font:700 11.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-dim);padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--mm-line)}
.mm__col li a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 0;font:600 16.5px/1.25 'Inter Tight',system-ui,sans-serif;transition:color .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.mm__col li a::after{content:"→";opacity:0;transform:translateX(-8px);transition:opacity .18s,transform .22s;color:var(--ca)}
.mm__col li a:hover,.mm__col li a:focus-visible{color:var(--ca);transform:translateX(4px)}
.mm__col li a:hover::after,.mm__col li a:focus-visible::after{opacity:1;transform:none}
.mm__col--chips ul{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.mm__col--chips li a{padding:8px 13px;border:1.5px solid var(--mm-line);border-radius:999px;font-size:14px;transform:none!important}
.mm__col--chips li a::after{display:none}
.mm__col--chips li a:hover,.mm__col--chips li a:focus-visible{border-color:var(--cs);background:var(--cs);color:var(--ci)}

/* lucrarea din colț: poza pe un bloc plin de culoare, ușor rotit */
.mm__feat{position:relative;display:block;margin-top:4px}
.mm__fi{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#1b1b20;transform:rotate(-1.6deg);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:10px 10px 0 0 var(--cs)}
.mm__fi img{width:100%;height:100%;object-fit:cover;display:block}
.mm__feat:hover .mm__fi{transform:rotate(0deg) translateY(-3px)}
.mm__fc{display:block;margin-top:20px;font:500 14px/1.4 'Inter Tight',system-ui,sans-serif;color:var(--mm-dim)}
.mm__fc b{display:block;font:400 22px/1.1 Anton,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;color:var(--mm-ink);letter-spacing:.01em}
.mm__fs{display:inline-block;margin-top:8px;font:700 12px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ca)}
.mm__feat--play .mm__fi{background:var(--c)}
.mm__play{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.mm__play i{display:block;font:400 clamp(64px,6.4vw,104px)/.9 Anton,'Arial Narrow',Impact,sans-serif;font-style:normal;color:#F4F4F6;white-space:nowrap;padding-left:22px;animation:mm-run 6s linear infinite}
.mm__play i:nth-child(2){color:transparent;-webkit-text-stroke:2px #F4F4F6;animation-direction:reverse}
.mm__play i:nth-child(3){color:#09090C}
@keyframes mm-run{from{transform:translateX(0)}to{transform:translateX(-22%)}}
.mm__x{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--mm-line);background:transparent;color:var(--mm-ink);font:700 16px/1 'Inter Tight',system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.mm__x:hover{background:#F4F4F6;color:#09090C}

/* intrarea: categoriile apar pe rând */
.mm.is-open .mm__tab{animation:mm-in .42s cubic-bezier(.2,.8,.2,1) both}
.mm.is-open .mm__tab:nth-child(2){animation-delay:.03s}.mm.is-open .mm__tab:nth-child(3){animation-delay:.06s}.mm.is-open .mm__tab:nth-child(4){animation-delay:.09s}
.mm.is-open .mm__tab:nth-child(5){animation-delay:.12s}.mm.is-open .mm__tab:nth-child(6){animation-delay:.15s}.mm.is-open .mm__tab:nth-child(7){animation-delay:.18s}.mm.is-open .mm__tab:nth-child(8){animation-delay:.21s}
.mm__pane.is-new .mm__h,.mm__pane.is-new .mm__cols{animation:mm-up .34s cubic-bezier(.2,.8,.2,1) both}
.mm__pane.is-new .mm__cols{animation-delay:.04s}
@keyframes mm-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes mm-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:1279px){
  .mm__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mm__feat{display:none}
  .mm__pane--one .mm__cols{grid-template-columns:minmax(0,1fr) minmax(220px,.8fr)}
  .mm__pane--one .mm__feat{display:block}
}
@media (max-width:1023px){.mm{display:none!important}}

/* ---------------- acordeonul din sertarul de pe telefon (îl construiește mm.js din panou) ---------------- */
.mma{margin:18px 0 6px;font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;text-align:left}
.mma:empty{display:none}
.mma *,.mma *::before,.mma *::after{box-sizing:border-box}
.mma__t{margin:0 0 8px;font:700 12px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.mma__it{border-top:1.5px solid color-mix(in srgb,currentColor 22%,transparent)}
.mma__it:last-of-type{border-bottom:1.5px solid color-mix(in srgb,currentColor 22%,transparent)}
.mma__b{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 2px;border:0;background:none;color:inherit;cursor:pointer;text-align:left;font:400 25px/1.1 Anton,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.mma__sw{flex:none;width:16px;height:30px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 35%,transparent)}
.mma__l{flex:1}
.mma__pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor}
.mma__pm::before,.mma__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;transition:transform .25s}
.mma__pm::after{transform:rotate(90deg)}
.mma__b[aria-expanded=true] .mma__pm::after{transform:rotate(0)}
.mma__p{padding:2px 0 18px 28px}
.mma__p[hidden]{display:none}
.mma__p ul{list-style:none;margin:0;padding:0}
.mma__p li a{display:flex;align-items:center;min-height:44px;padding:4px 0;color:inherit;text-decoration:none;font:600 17px/1.25 'Inter Tight',system-ui,sans-serif;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.mma__ct{margin:16px 0 8px;font:700 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.mma__chips{display:flex;flex-wrap:wrap;gap:8px}
.mma__chips li a{min-height:40px;padding:6px 14px;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;font-size:14.5px}
.mma__all{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid currentColor;color:inherit;text-decoration:none;font:700 13px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.mma :focus-visible{outline:3px solid currentColor;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mm{transition:none;clip-path:none}
  .mm.is-open .mm__tab,.mm__pane.is-new .mm__h,.mm__pane.is-new .mm__cols{animation:none}
  .mm__tab::before,.mm__tn,.mm__fi,.mm__col li a,.mm-trig .mm-chev,.mma__pm::before,.mma__pm::after{transition:none}
  .mm__play i{animation:none}
}