/* ============================================================
   SEO DE IMAGINE — SCRIS ÎN LAYOUT
   data-file = numele final (§13.4: lowercase, fără diacritice, fără furnizor)
   data-alt  = alt-ul redactat (obiect + material + detaliu)
   data-size = dimensiunea recomandată
   Înlocuiești slotul cu:
     <img src="/img/{data-file}" width="W" height="H" alt="{data-alt}"
          loading="lazy" decoding="async" style="width:100%;height:100%;object-fit:cover">
   HERO (LCP): fără loading="lazy"; fetchpriority="high" + srcset + preload din <head>.
   ============================================================ */
/* Local Google Fonts (latin + latin-ext). Families/weights match the former css2 request. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url("../fonts/bricolage-grotesque-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:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url("../fonts/bricolage-grotesque-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:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/figtree-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:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/figtree-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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-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:#F7F6F1;--bg-card:#FFFFFF;--ink:#101413;--ink-2:#4B534F;--ink-3:#8B928D;
  --line:#DBD9CE;--line-dark:#101413;--green:#0E4F3F;--green-deep:#0A3A2E;
  --lime:#D9F16A;--lime-ink:#2A3A08;
  --r-img:1.375rem;--wrap:1280px;--pad-x:clamp(1.125rem,4vw,2.5rem);
  --g1:0.75rem;--g2:0.875rem;
  --fs-0:clamp(0.95rem,0.9rem + 0.2vw,1.03rem);
  --fs-1:clamp(1.08rem,1rem + 0.4vw,1.28rem);
  --fs-2:clamp(1.6rem,1.3rem + 1.5vw,2.5rem);
  --fs-hero:clamp(2.15rem,1.2rem + 5.2vw,5.1rem);
  --spring:cubic-bezier(.34,1.4,.44,1);
}
/* Ecrane foarte mari (TV, 4K): scalăm rădăcina — tot layoutul e în rem, crește proporțional */
@media (min-width:1800px){html{font-size:18px}:root{--wrap:1560px}}
@media (min-width:2560px){html{font-size:21px}:root{--wrap:1880px}}
/* Telefoane foarte mici */
@media (max-width:380px){:root{--pad-x:0.875rem;--fs-hero:clamp(1.8rem,9.4vw,2.2rem);--fs-2:clamp(1.35rem,7vw,1.6rem)}}
@media (max-width:360px){
  :root{--pad-x:0.75rem}
  .hero-cta .btn,.m-cta .btn{width:100%}
  .m-cta{gap:0.45rem}
  .m-cta .tel{width:2.9rem;height:2.9rem}
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:6rem;color-scheme:light;interpolate-size:allow-keywords}
@view-transition{navigation:auto}
::selection{background:var(--lime);color:var(--lime-ink)}
body{font-family:"Figtree",system-ui,sans-serif;font-size:var(--fs-0);line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:"Bricolage Grotesque","Figtree",sans-serif;line-height:1.05;letter-spacing:-0.03em;font-weight:700;text-wrap:balance}
h2{font-size:var(--fs-2)}
h3{font-size:var(--fs-1);letter-spacing:-0.01em;font-weight:600}
p{text-wrap:pretty}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
@media (max-width:380px){h1,h2{hyphens:auto;-webkit-hyphens:auto}}
.ic{display:inline-flex;flex:none}
.ic svg{display:block;width:100%;height:100%}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.skip{position:absolute;left:0;top:0;z-index:200;background:var(--ink);color:#fff;padding:0.625rem 1.125rem;border-radius:0 0 10px 0;transform:translateY(-120%)}
.skip:focus,.skip:focus-visible{transform:none}
.mono{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase}
section{padding-block:clamp(3.6rem,7.5vw,6.5rem)}
@media (max-height:560px) and (orientation:landscape){section{padding-block:2.4rem}.hero{padding-block:2rem 1.6rem!important}}
.idx{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;max-width:35rem;margin-inline:auto}
.idx::before,.idx::after{content:"";flex:1;height:1px;background:var(--line)}
.idx .n{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;color:var(--ink-2)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Skip style/layout for off-screen blocks. Not on header, hero, sticky, cookie. */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 520px}
.cv-auto--strip{contain-intrinsic-size:auto 56px}
.cv-auto--cats{contain-intrinsic-size:auto 1200px}
.cv-auto--prods{contain-intrinsic-size:auto 580px}
.cv-auto--objs{contain-intrinsic-size:auto 520px}
.cv-auto--bens{contain-intrinsic-size:auto 480px}
.cv-auto--steps{contain-intrinsic-size:auto 440px}
.cv-auto--mets{contain-intrinsic-size:auto 480px}
.cv-auto--faq{contain-intrinsic-size:auto 560px}
.cv-auto--form{contain-intrinsic-size:auto 780px}
.cv-auto--band{contain-intrinsic-size:auto 380px}
.cv-auto--later{contain-intrinsic-size:auto 480px}
.idx .l{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--green)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.875rem;margin-bottom:clamp(1.75rem,4vw,3rem)}
.sec-head h2{max-width:26ch}
.sec-head p{color:var(--ink-2);max-width:62ch;margin-inline:auto}
.sec-link{font-family:"IBM Plex Mono",monospace;font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink);border:1px solid var(--line-dark);border-radius:999px;padding:0.7rem 1.4rem}
.sec-link:hover{background:var(--ink);color:var(--lime)}

.slot{position:relative;width:100%;height:100%;background:linear-gradient(135deg,#EAE8DE 25%,#E1DFD3 25%,#E1DFD3 50%,#EAE8DE 50%,#EAE8DE 75%,#E1DFD3 75%);background-size:26px 26px;display:grid;place-content:center;gap:0.45rem;text-align:center;padding:0.75rem;overflow:hidden}
.slot[data-file]::before{content:attr(data-file);justify-self:center;background:var(--ink);color:var(--lime);border-radius:999px;padding:0.3rem 0.75rem;font-family:"IBM Plex Mono",monospace;font-size:0.6rem;letter-spacing:0.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot[data-size]::after{content:attr(data-size);background:rgba(255,255,255,.94);border:1px dashed var(--ink-3);border-radius:8px;padding:0.375rem 0.7rem;font-family:"IBM Plex Mono",monospace;font-size:0.58rem;color:var(--ink-2);line-height:1.5;max-width:min(15rem,100%)}
.slot[data-size][data-alt]::after{content:attr(data-size) " · " attr(data-alt)}

/* Reserved drop-in card: filename + WxH in a drawn frame, not a chip in a void. */
.reserved-slot{
  --slot-taupe:#A89B86;
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:inherit;
  display:grid;
  place-content:center;
  align-content:center;
  justify-items:center;
  gap:clamp(0.35rem,0.8vw,0.65rem);
  padding:clamp(0.7rem,2.2vw,1.25rem);
  text-align:center;
  color:var(--ink);
  background-color:#E8E4D6;
  overflow:hidden;
  isolation:isolate;
}
.reserved-slot::after{
  content:"";
  position:absolute;
  inset:-52px;
  z-index:0;
  background-image:linear-gradient(135deg,#EAE8DE 25%,#E1DFD3 25%,#E1DFD3 50%,#EAE8DE 50%,#EAE8DE 75%,#E1DFD3 75%);
  background-size:22px 22px;
  animation:tex 8s linear infinite;
  pointer-events:none;
  will-change:transform;
}
.reserved-slot::before{
  content:"";
  position:absolute;
  inset:clamp(0.35rem,1.2vw,0.7rem);
  z-index:1;
  border:1.5px dashed var(--slot-taupe);
  border-radius:clamp(0.65rem,1.4vw,1rem);
  pointer-events:none;
}
.reserved-slot-file,.reserved-slot-size,.reserved-slot-hint{
  position:relative;
  z-index:1;
  max-width:100%;
  min-height:1.15em;
  font-family:"IBM Plex Mono",monospace;
  text-decoration:none;
}
.reserved-slot-file{
  display:block;
  background:var(--ink);
  color:var(--lime);
  border-radius:999px;
  padding:0.38rem 0.8rem;
  font-size:clamp(0.58rem,0.5rem + 0.28vw,0.78rem);
  letter-spacing:0.01em;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.reserved-slot-size{
  display:inline-block;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border:1.5px dashed var(--slot-taupe);
  border-radius:0.55rem;
  padding:0.32rem 0.75rem;
  font-size:clamp(0.82rem,0.68rem + 0.55vw,1.2rem);
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.2;
}
.reserved-slot-hint{
  display:block;
  max-width:36ch;
  color:var(--ink-2);
  background:rgba(247,246,241,.88);
  border-radius:0.45rem;
  padding:0.28rem 0.55rem;
  font-size:clamp(0.56rem,0.5rem + 0.18vw,0.68rem);
  line-height:1.4;
}
.reserved-slot.is-overlay{
  place-content:start center;
  padding-top:clamp(2.35rem,5vw,3rem);
  padding-bottom:4.25rem;
}
.reserved-slot.is-overlay .reserved-slot-size{font-size:clamp(0.7rem,0.6rem + 0.4vw,0.95rem)}
.cat .ph,.obj .ph,.met .ph{container-type:size;container-name:mediaslot}
/* 6-up method strip: keep filename + px on the card, never clip labels to 0. */
.met .reserved-slot,
.met .reserved-slot.is-overlay{
  place-content:center;
  align-content:center;
  padding:0.4rem 0.3rem 2.45rem;
  gap:0.22rem;
}
.met .reserved-slot-file{
  max-width:100%;
  font-size:clamp(0.48rem,0.42rem + 0.18vw,0.6rem);
  padding:0.16rem 0.38rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  word-break:normal;
}
.met .reserved-slot-size{
  font-size:clamp(0.68rem,0.58rem + 0.22vw,0.86rem);
  padding:0.14rem 0.36rem;
}
@container mediaslot (max-width:13.5rem){
  .reserved-slot.is-overlay{
    place-content:center;
    padding:0.4rem 0.3rem 2.35rem;
    gap:0.2rem;
  }
  .reserved-slot-file{
    font-size:0.5rem;
    padding:0.14rem 0.32rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal;
    word-break:normal;
  }
  .reserved-slot-size{font-size:0.7rem;padding:0.12rem 0.32rem}
}
.stage-img{position:relative}
.stage-img .reserved-slot,.stage-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-img .reserved-slot-file{font-size:clamp(.68rem,.5rem + .5vw,.95rem);padding:.42rem .95rem}
.stage-img .reserved-slot-size{font-size:clamp(1.1rem,.9rem + 1.2vw,1.75rem)}

/* Butoane — apăsare cu arc */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;font-family:"Bricolage Grotesque";font-weight:600;font-size:0.98rem;text-decoration:none;padding:1rem 1.75rem;border-radius:999px;border:1.5px solid var(--ink);cursor:pointer;transition:transform .35s var(--spring);transform:translateZ(0)}
.btn:hover{transform:translate3d(0,-2px,0)}
.btn:active{transform:translate3d(0,1px,0);transition-duration:.08s}
.btn .ar{width:0.95em;height:0.95em;display:inline-block;vertical-align:-0.12em;margin-left:0.1em;fill:currentColor;stroke:none;transition:transform .45s var(--spring);transform-box:fill-box;transform-origin:center}
.btn:hover .ar{transform:rotate(120deg) scale(1.18)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--green);border-color:var(--green);color:var(--lime);box-shadow:0 10px 22px -12px rgba(14,79,63,.55)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-lime{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{background:#fff;border-color:#fff;box-shadow:0 10px 22px -12px rgba(16,20,19,.4)}

/* Reveal la scroll (nativ) + coregrafie de intrare în hero */
@supports (animation-timeline: view()){
  .rv{animation:rise .8s both;animation-timeline:view();animation-range:entry 0% entry 32%}
  @keyframes rise{from{opacity:0;transform:translateY(1.6rem)}to{opacity:1;transform:none}}
}
@keyframes in{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
@keyframes floaty{from{transform:translateY(-6px) rotate(var(--rot,0deg))}to{transform:translateY(7px) rotate(var(--rot,0deg))}}

/* ---- Strat ambiental: animații permanente, discrete, doar transform/opacity ---- */
@keyframes squig{0%{transform:translate3d(-100%,0,0)}12%,86%{transform:translate3d(0,0,0)}98%,100%{transform:translate3d(100%,0,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
@keyframes bob{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@keyframes nudge{0%,86%,100%{transform:none}91%{transform:translateX(5px)}95%{transform:translateX(1px)}}
@keyframes tex{to{transform:translate3d(52px,52px,0)}}
.sticker .ic svg{animation:spin 28s linear infinite}
.btn-solid .ar,.btn-lime .ar{animation:arTwinkle 6s ease-in-out infinite}
.btn:hover .ar{animation:none}
.cc .dot{animation:pulse 4.5s ease-in-out infinite}
.cc:nth-child(2n) .dot{animation-delay:-2.2s}
.cc:nth-child(3n) .dot{animation-delay:-1.1s}
.ben .ic,.banner .ic{animation:bob 3.8s ease-in-out infinite alternate}
.ben:nth-child(2) .ic,.banner:nth-child(2) .ic{animation-delay:-1.4s}
.ben:nth-child(3) .ic{animation-delay:-2.4s}
.ben:nth-child(4) .ic{animation-delay:-3.2s}
.stage-img .reserved-slot::after{animation:tex 8s linear infinite}
.foot-logo svg{animation:bob 7s ease-in-out infinite alternate}
.mk{width:1.55rem;height:1.55rem;display:block;overflow:visible}
.mk-ring{fill:none;stroke:rgba(247,246,241,.55);stroke-width:7;stroke-linecap:round;opacity:1;transform-origin:48px 48px;transform-box:view-box;animation:mkring 6.5s cubic-bezier(.6,.05,.35,1) infinite}
.mk-grp{transform-origin:48px 70px;transform-box:view-box;animation:mksquash 6.5s ease-in-out infinite}
.mk-m{fill:none;stroke:var(--lime);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.mk-hl{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mk-hl-slit,.fl-hl-slit{transform-box:fill-box;transform-origin:0 50%}
.mk-hl-slit{animation:mkchase 3.8s cubic-bezier(.45,.05,.4,.95) infinite}
.brand:hover .mk-ring{stroke:var(--lime)}
@keyframes mkring{0%{opacity:0}30%,62%{opacity:1}94%,100%{opacity:0}}
@keyframes mkchase{0%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(250%,0,0)}}
@keyframes mksquash{0%,26%{transform:scale(1,1)}31%{transform:scale(1.06,.93)}36%{transform:scale(.99,1.01)}41%,100%{transform:scale(1,1)}}
.brand .mark .mk{animation:bob 5.5s ease-in-out infinite alternate}


/* ================= POLISH DE AGENȚIE ================= */
/* bară de progres la scroll */
@supports (animation-timeline: scroll()){
  .scrollbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);z-index:90;pointer-events:none;animation:pgrow linear both;animation-timeline:scroll(root)}
  @keyframes pgrow{to{transform:scaleX(1)}}
}
/* marquee cu categoriile */
.ticker{overflow:hidden;border-block:1.5px solid var(--ink);background:var(--bg-card);padding:0.75rem 0;contain:layout paint style}
.ticker-track{display:flex;align-items:center;gap:2rem;width:max-content;animation:tick 30s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:"Bricolage Grotesque","Figtree",sans-serif;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:-0.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.1px rgba(16,20,19,.6)}
@supports not (-webkit-text-stroke:1px black){.ticker span{color:rgba(16,20,19,.5)}}
.tk-s{width:0.9rem;height:0.9rem;flex:none;fill:var(--lime);stroke:var(--ink);stroke-width:1.4}
@keyframes tick{to{transform:translateX(-50%)}}
/* sheen periodic pe butoanele lime */
.btn-lime{position:relative;overflow:hidden}
.btn-lime::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:2rem;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg) translateX(-4rem);animation:sheen 6.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,74%{transform:skewX(-18deg) translateX(-4rem)}88%,100%{transform:skewX(-18deg) translateX(28rem)}}
/* underline animat pe linkurile din footer și topbar */
.foot-grid a,.topbar-contact a{position:relative;padding-bottom:2px;text-decoration:none}
.foot-grid a::after,.topbar-contact a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--spring);pointer-events:none}
.foot-grid a:hover::after,.topbar-contact a:hover::after{transform:scaleX(1)}
/* fade la marginile stripului orizontal de produse */
.prod-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.75rem,#000 calc(100% - 1.75rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.75rem,#000 calc(100% - 1.75rem),transparent)}
/* chips-urile din hero se ridică la hover (translate ≠ transform, nu se bate cu floaty) */
.fl{transition:translate .35s var(--spring)}
.fl:hover{translate:0 -0.25rem}
/* rândurile compacte de categorii se indentează la hover */
.cc{transition:transform .28s var(--spring)}
.cc:hover{transform:translateX(0.45rem)}
/* cardurile de categorie primesc umbră la hover (umbră statică, fără transition pe box-shadow) */
.cat:hover{box-shadow:0 1.1rem 2.2rem -1.1rem rgba(16,20,19,.5)}
@media (hover:none){
  .fl:hover{translate:none}
  .cc:hover{transform:none}
  .cat:hover{box-shadow:none}
  .foot-grid a:hover::after,.topbar-contact a:hover::after{transform:scaleX(0)}
}

/* ================= FUNDAL AMBIENTAL ================= */
html{background:var(--bg)}
body{background:transparent}
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.bgfx::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(16,20,19,.05) 1px,transparent 1.2px);background-size:26px 26px}
.blob{position:absolute;border-radius:50%;will-change:transform}
.blob-a{width:46rem;height:46rem;left:-14rem;top:-16rem;background:radial-gradient(closest-side,rgba(217,241,106,.42),transparent 70%);animation:driftA 26s ease-in-out infinite alternate}
.blob-b{width:40rem;height:40rem;right:-14rem;top:24%;background:radial-gradient(closest-side,rgba(14,79,63,.16),transparent 70%);animation:driftB 34s ease-in-out -9s infinite alternate}
.blob-c{width:28rem;height:28rem;left:6%;bottom:-12rem;background:radial-gradient(closest-side,rgba(217,241,106,.3),transparent 70%);animation:driftC 23s ease-in-out -15s infinite alternate}
@keyframes driftA{to{transform:translate(5rem,3.5rem) scale(1.12)}}
@keyframes driftB{to{transform:translate(-4rem,-5rem) scale(1.16)}}
@keyframes driftC{to{transform:translate(4rem,-3rem) scale(1.1)}}
/* strălucire lime discretă, în derivă, în secțiunile închise */
.dark{position:relative;overflow:clip}
.dark>.wrap{position:relative;z-index:1}
.dark::after{content:"";position:absolute;width:34rem;height:34rem;border-radius:50%;left:-10rem;top:-12rem;background:radial-gradient(closest-side,rgba(217,241,106,.09),transparent 70%);animation:driftB 30s ease-in-out infinite alternate;pointer-events:none}
/* banda formularului */
.cta-band{position:relative}
.cta-band::after{content:"";position:absolute;width:30rem;height:30rem;border-radius:50%;right:-10rem;bottom:-12rem;background:radial-gradient(closest-side,rgba(217,241,106,.16),transparent 70%);animation:driftC 27s ease-in-out infinite alternate;pointer-events:none}
.cta-band>*{position:relative;z-index:1}
/* iconițe-fantomă plutitoare în jurul hero-ului (doar desktop) */
.hfx{position:absolute;color:var(--ink);opacity:.06;pointer-events:none;display:none;animation:floaty 15s ease-in-out infinite alternate}
.hfx svg{display:block;width:100%;height:100%}
.hfx-1{width:7rem;height:7rem;left:2%;top:32%;--rot:-14deg}
.hfx-2{width:5.6rem;height:5.6rem;right:3%;top:10%;--rot:10deg;animation-duration:18s;animation-delay:-6s}
.hfx-3{width:5rem;height:5rem;right:7%;top:52%;--rot:-8deg;animation-duration:13s;animation-delay:-3s}
.hfx-4{width:4.6rem;height:4.6rem;left:8%;top:8%;--rot:16deg;animation-duration:20s;animation-delay:-11s}
@media (min-width:1150px){.hfx{display:block}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mk-ring{opacity:1}
  .mk-hl,.fl-hl,.sk-met,.sk-ring{display:none}
}

/* Phones / typical touch tablets: pause below-fold loops. Hero sky/hl/sticker, header mark, blob-a stay. */
@media (max-width:767px),(hover:none) and (max-width:1024px){
  .ticker-track,
  .cc .dot,
  .ben .ic,
  .banner .ic,
  .foot-logo svg,
  .fl-hl-slit,
  .dark::after,
  .cta-band::after,
  .quote-cta::after,
  .reserved-slot::after,
  .blob-b,
  .blob-c,
  .btn-lime::after,
  .btn-solid .ar,
  .btn-lime .ar{
    animation-play-state:paused;
  }
  .hero .reserved-slot::after,
  .stage-img .reserved-slot::after,
  .hero .btn-solid .ar,
  .hero .btn-lime .ar,
  .hero .btn-lime::after{
    animation-play-state:running;
  }
}

/* Iconițe vii: --go se moștenește prin <use> în interiorul simbolurilor,
   deci părți din desen se pot mișca la hover-ul părintelui. */
.cc,.banner,.ben,.fl,.brand,.cat .badge,.topbar-contact a,.m-cta .tel,.hero-links a,.prod .go a,.met,.guide-card,.filter-chip{--go:0}
.cc:hover,.banner:hover,.ben:hover,.fl:hover,.brand:hover,.cat:hover .badge,.topbar-contact a:hover,.hero-links a:hover,.prod .go a:hover,.met:hover,.guide-card:hover,.filter-chip:hover{--go:1}
@media (hover:none){.cc,.banner,.ben,.fl,.brand,.cat .badge,.met,.guide-card,.filter-chip{--go:0!important}}

/* Topbar */
.topbar{background:var(--ink);color:#CFD6D0}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;min-height:2.375rem}
.topbar .mono{font-size:0.64rem}
.topbar b{color:var(--lime);font-weight:500}
.topbar-contact{display:flex;align-items:center;gap:1rem}
.topbar-contact a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:0.45rem;font-family:"IBM Plex Mono",monospace;font-size:0.64rem;letter-spacing:0.03em}
.topbar-contact a:hover{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.topbar-contact .ic{width:0.85rem;height:0.85rem}
@media (max-width:820px){.topbar-msg{display:none}.topbar-in{justify-content:center}}
@media (max-width:360px){
  .topbar-contact{gap:.55rem}
  .topbar-contact a:last-child{display:none}
}

/* Header */
.site-head{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.125rem;min-height:4.5rem}
.brand{display:flex;align-items:center;gap:0.7rem;text-decoration:none;color:var(--ink)}
.brand .mark{width:2.375rem;height:2.375rem;border-radius:0.7rem;background:var(--green);color:var(--lime);display:grid;place-items:center;flex:none;transition:transform .35s var(--spring)}
.brand:hover .mark{transform:rotate(-8deg)}
.brand b{font-family:"Bricolage Grotesque";font-weight:700;font-size:1rem;letter-spacing:-0.01em;display:block;line-height:1.15}
.brand small{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;letter-spacing:0.06em;color:var(--ink-2)}
.nav-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle:focus-visible + .nav-label{outline:3px solid var(--green);outline-offset:3px}
.nav-label{display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0.62rem;min-width:3rem;min-height:3rem;border:1.5px solid var(--ink);border-radius:0.7rem;background:#E6E3D4}
.nav-label svg{display:block;color:var(--ink)}
.nav-label path{stroke:var(--ink)}
.nav-toggle:checked + .nav-label{background:var(--green);border-color:var(--green);color:#fff}
.nav-toggle:checked + .nav-label svg,.nav-toggle:checked + .nav-label path{color:#fff;stroke:#fff}
nav.main ul{display:flex;align-items:center;gap:2px;list-style:none}
nav.main a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:0.92rem;padding:0.625rem 0.875rem;border-radius:999px}
nav.main a:not(.btn){color:var(--ink)}
nav.main a:not(.btn):hover{background:#E6E3D4;color:var(--ink)}
nav.main .btn{padding:0.7rem 1.375rem;font-size:0.9rem;margin-left:0.625rem}
@media (max-width:940px){
  .nav-label{display:inline-flex}
  nav.main{position:absolute;left:0;right:0;top:100%;background:#F7F6F1;color:#101413;border-bottom:1.5px solid #101413;box-shadow:0 20px 44px rgba(16,20,19,.22);display:none;padding:0.5rem 0 1.25rem;max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem);overflow-y:auto}
  .nav-toggle:checked ~ nav.main,.site-head.nav-open nav.main{display:block}
  nav.main a:not(.btn){color:#101413}
  nav.main ul{flex-direction:column;align-items:stretch;gap:2px;padding-inline:var(--pad-x)}
  nav.main a:not(.btn){display:block;padding:0.875rem 0.75rem}
  nav.main li:last-child{padding-top:0.75rem}
  nav.main .btn{width:100%;margin-left:0}
}

/* Hero */
.hero{padding-block:clamp(3rem,6.5vw,5.25rem) clamp(1.875rem,4vw,3.25rem);position:relative}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.hero .eyebrow{animation:in .6s .05s both var(--spring)}
.hero h1{animation:in .7s .12s both var(--spring)}
.hero .answer{animation:in .7s .22s both var(--spring)}
.hero .hero-cta{animation:in .7s .32s both var(--spring)}
.hero .hero-links,.hero .hero-help,.hero .hero-sign{animation:in .7s .42s both var(--spring)}
.hero .stage{animation:in .9s .5s both var(--spring)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:0.625rem;margin-bottom:1rem}
.eyebrow::before,.eyebrow::after{content:"";width:1.375rem;height:1px;background:var(--green)}
.hero h1{font-size:var(--fs-hero);font-weight:800;max-width:16ch;margin-inline:auto}
.hero h1 .hl{color:var(--green);position:relative;white-space:nowrap}
.hl svg{position:absolute;left:-2%;bottom:-0.16em;width:104%;height:0.3em;overflow:visible}
.hl path{fill:none;stroke:var(--lime);stroke-width:7;stroke-linecap:round}
.hl-wipe{transform-box:fill-box;transform-origin:0 50%;transform:translate3d(0,0,0);animation:squig 9s .75s infinite cubic-bezier(.6,0,.3,1)}
@media (max-width:420px){.hero h1 .hl{white-space:normal}.hl svg{display:none}.hero h1 .hl{background:linear-gradient(transparent 72%,var(--lime) 72%,var(--lime) 94%,transparent 94%)}}
.hero .answer{font-size:var(--fs-1);line-height:1.6;color:var(--ink-2);max-width:60ch;margin-top:clamp(1.125rem,2.5vw,1.625rem);margin-inline:auto}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;margin-top:1.75rem}
.hero-links{margin-top:1.125rem}
.hero-links a{font-size:0.9rem;font-weight:500;color:var(--green);display:inline-flex;align-items:center;gap:0.45rem}
.hero-links .ic{width:0.95rem;height:0.95rem}
.hero-help{margin-top:1rem;font-size:0.9rem;color:var(--ink-2);max-width:52ch;margin-inline:auto}
.hero-sign{margin-top:0.75rem;font-family:"IBM Plex Mono",monospace;font-size:0.66rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-2)}
.hero-sign a{color:var(--green)}
/* cerul hero — după star.json (bob + puls + inele pop) și meteor-rain.json (streaks + drift) */
.sky{position:absolute;pointer-events:none}
.sky-svg{display:block;width:100%;height:100%;overflow:visible}
.sky-l{left:1.5%;top:6%;width:8.5rem;height:8.5rem}
.sky-r{right:2%;top:14%;width:7.5rem;height:7.5rem}
.sky-b{left:7%;bottom:4%;width:6.5rem;height:6.5rem}
@media (max-width:1080px){
  .sky-l{left:-0.5rem;top:-0.6rem;width:5rem;height:5rem}
  .sky-r{right:-0.4rem;top:3%;width:4.4rem;height:4.4rem}
  .sky-b{left:auto;right:2%;bottom:26%;width:4rem;height:4rem}
}
@media (max-width:560px){
  .sky-l{width:4.2rem;height:4.2rem}
  .sky-r{width:3.8rem;height:3.8rem;top:1.5%}
  .sky-b{display:none}
}
.sk-star{transform-box:fill-box;transform-origin:center;animation:skBob 3s ease-in-out infinite}
.sk-star.late{animation-delay:-1.4s}
.sk-star.late .sk-core,.sk-star.late .sk-ring{animation-delay:-1.4s}
.sk-core{stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:skPulse 3s ease-in-out infinite}
.sk-core.lime{fill:var(--lime)}
.sk-core.grn{fill:var(--green)}
.sk-ring{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linejoin:round;opacity:0;transform-box:fill-box;transform-origin:center;animation:skRing 3s ease-out infinite}
.sk-ring.r2{stroke:var(--lime);animation-delay:.45s}
.sk-mini .sk-core{animation:skMini 2.4s ease-in-out infinite}
.sk-met{stroke:var(--green);stroke-width:2.6;stroke-linecap:round;fill:none;opacity:0;animation:skMet 2.4s cubic-bezier(.45,.05,.4,.95) infinite}
.sk-met.m2{stroke:var(--lime);animation-delay:-.8s}
.sk-met.m3{animation-delay:-1.6s;stroke-width:2.2}
.sk-met.m4{stroke:var(--lime);animation-delay:-.4s;stroke-width:2.2}
.sk-dot{fill:var(--green);animation:skDot 2.4s ease-in-out infinite}
.sk-dot.d2{fill:var(--lime);animation-delay:-.9s}
.sk-dot.d3{animation-delay:-1.5s}
@keyframes skBob{0%,4%{transform:translateY(0)}23%{transform:translateY(-6px)}42%{transform:translateY(4px)}62%{transform:translateY(-6px)}86%,100%{transform:translateY(0)}}
@keyframes skPulse{0%,6%{transform:scale(1)}36%{transform:scale(1.3)}79%{transform:scale(1.3)}92%,100%{transform:scale(1)}}
@keyframes skRing{0%,18%{transform:scale(.42);opacity:0}26%{opacity:.85}60%{transform:scale(2.6);opacity:0}100%{transform:scale(.42);opacity:0}}
@keyframes skMini{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(.69) rotate(18deg)}}
@keyframes skMet{0%{opacity:0;transform:translate3d(-14px,14px,0)}12%,45%{opacity:.7}70%,100%{opacity:0;transform:translate3d(16px,-16px,0)}}
@keyframes skDot{0%,100%{transform:translate(0,0)}33%{transform:translate(5px,7px)}66%{transform:translate(-6px,3px)}}

/* Scena hero */
.stage{position:relative;width:100%;max-width:71.875rem;margin:clamp(2.25rem,5vw,3.75rem) auto 0}
.stage-img{border-radius:calc(var(--r-img) + 0.375rem);overflow:hidden;aspect-ratio:16/6.6;border:1.5px solid var(--ink);box-shadow:0 1.6rem 3.75rem -1.9rem rgba(16,20,19,.35)}
.fl{position:absolute;z-index:3;display:flex;align-items:center;gap:0.7rem;background:var(--bg-card);border:1.5px solid var(--ink);border-radius:1rem;padding:0.7rem 1rem 0.7rem 0.7rem;text-decoration:none;color:var(--ink);box-shadow:0 0.875rem 1.875rem -0.875rem rgba(16,20,19,.4);animation:floaty 6s ease-in-out infinite alternate;transition:translate .35s var(--spring)}
.fl:hover{background:var(--lime)}
.fl .ic{width:2.375rem;height:2.375rem;border-radius:0.7rem;background:var(--ink);color:var(--lime);display:grid;place-items:center;padding:0.5rem}
.fl b{font-family:"Bricolage Grotesque";font-weight:600;font-size:0.92rem;display:block;line-height:1.2;letter-spacing:-0.01em}
.fl span{font-family:"IBM Plex Mono",monospace;font-size:0.58rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2)}
.fl b{color:var(--ink);font-weight:700}
.fl-1{top:-1.5rem;left:3%;--rot:-2.5deg}
.fl-2{top:34%;right:-0.875rem;--rot:2deg;animation-delay:-2s}
.fl-3{bottom:-1.375rem;left:14%;--rot:1.5deg;animation-delay:-4s}
.sticker{position:absolute;z-index:3;top:-1.875rem;right:6%;width:5.375rem;height:5.375rem;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);display:grid;place-content:center;gap:3px;text-align:center;transform:rotate(8deg);box-shadow:0 0.875rem 1.875rem -0.875rem rgba(16,20,19,.4);animation:floaty 7s ease-in-out infinite alternate;--rot:8deg}
.sticker .ic{width:1.25rem;height:1.25rem;color:var(--lime-ink);justify-self:center}
.sticker .mono{font-size:0.56rem;color:var(--lime-ink);letter-spacing:0.1em}
@media (max-width:880px){
  .stage-img{aspect-ratio:16/9}
  .sticker{width:4.5rem;height:4.5rem;top:-1.5rem;right:3%}
  .fl{position:static;animation:none;box-shadow:none}
  .fl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:0.625rem;margin-top:0.875rem}
  .fl .ic{width:2rem;height:2rem;padding:0.45rem}
  .fl b{font-size:0.86rem}
  .fl .s{display:none}
}
@media (max-width:380px){.stage-img{aspect-ratio:4/3}.fl{width:100%;justify-content:center}}
@media (min-width:881px){.fl-row{display:contents}}

/* Categorii */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2);max-width:73.75rem;margin-inline:auto}
@media (max-width:920px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;text-decoration:none;color:#fff;aspect-ratio:4/2.9;background:var(--ink)}
.cat .ph{position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cat .ph .reserved-slot,.obj .ph .reserved-slot,.met .ph .reserved-slot{min-height:100%}
.cat:hover .ph{transform:scale(1.05)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,15,0) 40%,rgba(10,18,15,.84))}
.cat .txt{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.125rem;z-index:2;text-align:center}
.cat h3{font-size:1.12rem;color:#fff;max-width:none}
.cat p{font-size:0.8rem;color:rgba(255,255,255,.8);margin-top:3px;line-height:1.45;max-width:none}
.cat .badge{position:absolute;top:0.75rem;left:0.75rem;z-index:2;width:2.625rem;height:2.625rem;border-radius:0.8rem;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;transition:transform .35s var(--spring)}
.cat .badge .ic{width:1.375rem;height:1.375rem}
.cat:hover .badge{background:var(--lime);color:var(--lime-ink);transform:rotate(-6deg) scale(1.08)}
.cat-compact{max-width:73.75rem;margin:1rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:0 2.25rem;border-top:1px solid var(--line-dark)}
.cat-compact>:last-child:nth-child(odd){grid-column:1/-1;width:100%;max-width:calc((100% - 2.25rem)/2);justify-self:center}
@media (max-width:820px){.cat-compact{grid-template-columns:1fr}.cat-compact>:last-child:nth-child(odd){max-width:none}}
.cc{display:grid;grid-template-columns:2.625rem minmax(0,1fr) 1.125rem;align-items:center;gap:0.875rem;padding:0.95rem 0.25rem;border-bottom:1px solid var(--line-dark);text-decoration:none;color:var(--ink);transition:transform .28s var(--spring)}
.cc:hover{background:#F2F0E5;transform:translateX(0.45rem)}
.cc .ic{width:2.625rem;height:2.625rem;border-radius:0.8rem;border:1.5px solid var(--ink);display:grid;place-items:center;padding:0.55rem;transition:transform .35s var(--spring)}
.cc:hover .ic{background:var(--ink);color:var(--lime);transform:rotate(-6deg)}
.cc>span:nth-child(2){min-width:0;text-align:center}
.cc b{font-family:"Bricolage Grotesque";font-weight:600;font-size:1.02rem;display:block;letter-spacing:-0.01em}
.cc span{font-size:0.82rem;color:var(--ink-2);line-height:1.45;display:block}
.cc .dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);justify-self:end;transition:transform .3s var(--spring)}
.cc:hover .dot{transform:scale(1.6)}
.cat-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2);margin:1.625rem auto 0;max-width:73.75rem}
@media (max-width:700px){.cat-extra{grid-template-columns:1fr}}
.banner{display:flex;align-items:center;gap:1.125rem;background:var(--ink);color:#fff;border-radius:var(--r-img);padding:1.375rem 1.625rem;text-decoration:none}
.banner:hover{background:var(--green)}
.banner .ic{width:2.875rem;height:2.875rem;border-radius:0.875rem;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;padding:0.7rem;transition:transform .35s var(--spring)}
.banner:hover .ic{transform:rotate(-6deg) scale(1.06)}
.banner b{font-family:"Bricolage Grotesque";font-size:1.12rem;display:block;letter-spacing:-0.01em}
.banner span{font-size:0.84rem;color:rgba(255,255,255,.72)}

/* Produse recomandate — dark */
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff}
.dark .sec-head p{color:rgba(255,255,255,.65)}
.dark .idx .n{color:rgba(255,255,255,.72)}
.dark .idx .l{color:var(--lime)}
.dark .idx::before,.dark .idx::after{background:rgba(255,255,255,.18)}
.dark .sec-link{color:#fff;border-color:rgba(255,255,255,.4)}
.dark .sec-link:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.dark :focus-visible{outline-color:var(--lime)}
.prod-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15.75rem,1fr);gap:var(--g2);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0.75rem;scrollbar-width:thin;scrollbar-color:var(--lime) transparent;margin-inline:calc(-1*var(--pad-x));padding-inline:var(--pad-x);scroll-padding-inline:var(--pad-x);-webkit-overflow-scrolling:touch}
.prod-strip:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.prod{scroll-snap-align:start;background:#1B211F;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-img);overflow:hidden;color:#fff;display:flex;flex-direction:column;contain:layout paint;transition:transform .3s var(--spring)}
.prod:hover{transform:translateY(-4px);border-color:var(--lime)}
.prod .ph{aspect-ratio:1;background:#242B28;display:block;overflow:hidden}
.prod .ph .reserved-slot{min-height:100%}
.prod .ph picture,.prod .ph img{width:100%;height:100%;object-fit:cover;display:block}
.prod .body{padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.prod h3{font-size:0.98rem;line-height:1.3;color:#fff}
.prod .cat-n{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:0.04em}
.prod .go{margin-top:auto;padding-top:0.5rem}
.prod .go a{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime);border-radius:999px;padding:0.6rem 0.875rem;text-align:center;text-decoration:none;display:block}
.prod .go a:hover{background:var(--lime);color:var(--lime-ink)}
.prod-cta{display:flex;justify-content:center;margin-top:1.625rem}

/* Utilizări */
.obj-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g1);max-width:73.75rem;margin-inline:auto}
@media (max-width:1020px){.obj-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.obj-grid{grid-template-columns:repeat(2,1fr)}.obj:last-child{grid-column:span 2;aspect-ratio:16/8.5}}
@media (max-width:340px){.obj-grid{grid-template-columns:1fr}.obj,.obj:last-child{grid-column:span 1;aspect-ratio:16/9}}
.obj{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:3/3.7;display:block;text-decoration:none;color:#fff;background:var(--ink);contain:layout paint}
.obj .ph{position:absolute;inset:0;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.obj .ph picture,.obj .ph img,.met .ph picture,.met .ph img{width:100%;height:100%;object-fit:cover;display:block}
.obj:hover .ph{transform:scale(1.06)}
.obj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,15,0) 42%,rgba(12,18,15,.84))}
.obj b{position:absolute;left:0.875rem;right:0.875rem;bottom:0.95rem;z-index:2;font-family:"Bricolage Grotesque";font-weight:600;font-size:1rem;line-height:1.25;text-align:center}
.obj .mono{position:absolute;top:0.8rem;left:50%;transform:translateX(-50%);z-index:2;background:var(--lime);color:var(--lime-ink);border-radius:999px;padding:0.3rem 0.7rem;font-size:0.6rem}

/* De ce Addictive Advertising */
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g2);max-width:73.75rem;margin-inline:auto}
@media (max-width:1020px){.ben-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ben-grid{grid-template-columns:1fr}}
.ben{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-img);padding:1.5rem 1.375rem;text-align:center;transition:transform .3s var(--spring)}
.ben:hover{transform:translateY(-3px);border-color:var(--ink)}
.ben .ic{width:2.875rem;height:2.875rem;border-radius:0.875rem;background:var(--lime);color:var(--lime-ink);display:inline-grid;place-items:center;padding:0.7rem;margin-bottom:0.875rem}
.ben p{font-size:0.92rem;color:var(--ink-2);line-height:1.55;max-width:26ch;margin-inline:auto}
.why-cta{display:flex;justify-content:center;margin-top:1.75rem}

/* Proces — 4 pași */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g1);max-width:73.75rem;margin-inline:auto}
@media (max-width:1020px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-img);padding:1.5rem 1.25rem 1.625rem;text-align:center;transition:transform .3s var(--spring)}
.step:hover{transform:translateY(-3px);border-color:var(--ink)}
.step .big{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2.2rem,1.8rem + 1.5vw,3.2rem);line-height:1;color:#E4E2D5;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-0.02em;display:block}
.step:hover .big{color:var(--lime)}
.step h3{margin-top:0.75rem;margin-bottom:0.5rem;font-size:1.02rem}
.step p{font-size:0.86rem;color:var(--ink-2);line-height:1.55}

/* Metode */
.met-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--g1);max-width:73.75rem;margin-inline:auto}
@media (max-width:1080px){.met-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.met-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:300px){.met-grid{grid-template-columns:1fr}}
.met{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/4.4;background:var(--ink);color:#fff;display:block;text-decoration:none;contain:layout paint}
.met .ph{position:absolute;inset:0;transition:transform .4s}
.met:hover .ph{transform:scale(1.06)}
.met::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,15,0) 45%,rgba(12,18,15,.85))}
.met .txt{position:absolute;left:0.75rem;right:0.75rem;bottom:0.8rem;z-index:2;text-align:center}
.met b{font-family:"Bricolage Grotesque";font-size:0.96rem;display:block}
.met span{font-family:"IBM Plex Mono",monospace;font-size:0.58rem;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.met-cta{display:flex;justify-content:center;margin-top:1.75rem}

/* FAQ — dark */
.faq{max-width:52.5rem;margin-inline:auto;border-top:1px solid rgba(255,255,255,.25)}
.faq details{border-bottom:1px solid rgba(255,255,255,.25)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.375rem 0.25rem;font-family:"Bricolage Grotesque";font-weight:600;font-size:clamp(1rem,0.95rem + 0.4vw,1.25rem);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--lime);flex:none;font-weight:500;transition:transform .3s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0.25rem 1.5rem;color:rgba(255,255,255,.75);font-size:0.94rem;max-width:62ch}
.faq .a p{margin-bottom:0.5rem}
.faq .a a{color:var(--lime)}
details::details-content{opacity:0;transform:translateY(-6px);transition:opacity .28s,transform .28s,content-visibility .28s allow-discrete}
details[open]::details-content{opacity:1;transform:none}

/* Formular — compact */
.cta-band{background:var(--green);border-radius:calc(var(--r-img) + 0.5rem);color:#fff;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.55fr)}
.cta-copy{padding:clamp(1.4rem,3.2vw,2.6rem)}
.cta-copy h2{color:#fff}
.cta-copy>p{color:rgba(255,255,255,.82);margin-top:0.55rem;font-size:0.92rem}
.cta-visual{position:relative;min-height:15rem}
.cta-visual .ph{position:absolute;inset:0}
.cta-visual .reserved-slot{min-height:100%}
@media (max-width:880px){.cta-band{grid-template-columns:1fr}.cta-visual{order:-1;min-height:8.5rem}.cta-copy{text-align:center}.cta-copy p,.cta-copy .f-note{margin-inline:auto}}
form .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem 0.75rem;margin-top:1.1rem;text-align:left}
form .full{grid-column:1/-1}
@media (max-width:620px){form .f-grid{grid-template-columns:1fr;gap:0.55rem}}
label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.28rem;color:rgba(255,255,255,.88)}
label .opt{color:rgba(255,255,255,.5);text-transform:none;letter-spacing:0.02em}
input,select,textarea{width:100%;font:inherit;font-size:max(1rem,16px);padding:0.68rem 0.85rem;border-radius:0.75rem;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
textarea{min-height:4.4rem;resize:vertical}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 62.5rem #14584634 inset;-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 600000s}
:root{accent-color:var(--green)}
select{appearance:none;-webkit-appearance:none;padding-right:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23D9F16A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
select option{color:var(--ink)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.52)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--lime);outline-offset:2px;border-color:transparent}
input[type=file]{padding:0.7rem 0.875rem}
input[type=file]::file-selector-button{font:inherit;font-size:0.8rem;border:1px solid var(--lime);background:transparent;color:var(--lime);border-radius:999px;padding:0.45rem 0.875rem;margin-right:0.75rem;cursor:pointer}
.f-note{font-size:0.7rem;color:rgba(255,255,255,.78);margin-top:0.55rem;max-width:52ch}
.cta-copy .btn{margin-top:0.95rem;padding:0.85rem 1.5rem}
@media (max-width:460px){.hero-cta .btn,.cta-copy .btn{width:100%}}

/* Footer */
footer{background:var(--ink);color:#AEB6B1;padding-top:4rem;overflow:clip}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2rem;padding-bottom:3rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;text-align:center}}
.foot-brand b{font-family:"Bricolage Grotesque";color:#fff;font-size:1.1rem;display:block;margin-bottom:0.5rem}
.foot-brand p{font-size:0.84rem;line-height:1.6}
@media (max-width:520px){.foot-brand p{margin-inline:auto;max-width:40ch}}
.foot-grid h3{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;text-transform:uppercase;letter-spacing:0.12em;color:#fff;margin-bottom:0.875rem;font-weight:500}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:0.55rem}
.foot-grid a{color:#AEB6B1;text-decoration:none;font-size:0.88rem}
.foot-grid a:hover{color:var(--lime)}
footer :focus-visible{outline-color:var(--lime)}
.foot-legal{padding-block:1.25rem;border-top:1px solid rgba(255,255,255,.12);font-family:"IBM Plex Mono",monospace;font-size:0.64rem;letter-spacing:0.03em;color:#8B958F;display:flex;flex-wrap:wrap;gap:0.5rem 1.75rem;justify-content:space-between}
@media (max-width:640px){.foot-legal{justify-content:center;text-align:center}}
.foot-logo{padding-bottom:0.5rem;user-select:none}
.foot-logo svg{display:block;width:100%;height:auto;overflow:visible}
.fl-ring{stroke:rgba(255,255,255,.22)}
.fl-m{stroke:rgba(255,255,255,.3);stroke-linecap:round;stroke-linejoin:round}
.fl-txt{font-family:"Bricolage Grotesque","Figtree",system-ui,sans-serif;fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2}
.fl-hl{stroke:var(--lime);opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.fl-hl-slit{animation:fchase 5s cubic-bezier(.45,.05,.4,.95) infinite}
@keyframes fchase{0%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(250%,0,0)}}
.fbrand{display:inline-flex;align-items:center;gap:0.15rem;margin-bottom:0.9rem;color:#fff;text-decoration:none}
.fbrand b{font-family:"Bricolage Grotesque","Figtree",sans-serif;font-weight:800;font-size:1.14rem;letter-spacing:-0.015em;line-height:1}
.fbrand .tld{color:var(--lime);font-weight:800}
.fbrand:hover .tld{text-decoration:underline;text-underline-offset:3px}
.fmark{display:inline-grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:0.7rem;background:var(--green);border:1.5px solid rgba(255,255,255,.14);margin-right:0.45rem}
.fmark .mk{width:1.75rem;height:1.75rem}

/* CTA mobil permanent */
.m-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:0.625rem;align-items:center;padding:0.625rem var(--pad-x) calc(0.625rem + env(safe-area-inset-bottom));border-top:1px solid var(--line-dark)}
.m-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px)}
.m-cta .btn{flex:1;padding:0.875rem 1.25rem}
.m-cta .tel{width:3.25rem;height:3.25rem;flex:none;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;color:var(--ink);background:var(--bg-card);text-decoration:none}
.m-cta .tel .ic{width:1.25rem;height:1.25rem}
@media (max-width:760px){.m-cta{display:flex}body{padding-bottom:5.25rem}}

@media (hover:none){
  .sec-link:hover{background:transparent;color:inherit}
  .dark .sec-link:hover{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
  .banner:hover{background:var(--ink)}
  .prod .go a:hover{background:transparent;color:var(--lime)}
  nav.main a:not(.btn):hover{background:transparent}
  .btn-solid:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
  .btn-ghost:hover{background:transparent;color:var(--ink)}
  .btn-lime:hover{background:var(--lime);border-color:var(--lime);box-shadow:none}
  .topbar-contact a:hover{color:#fff;text-decoration:none}
  .brand:hover .mark{transform:none;--mark-ring:rgba(247,246,241,.5)}
  .cc:hover{background:transparent;transform:none}
  .cc:hover .ic{background:transparent;color:inherit;transform:none}
  .cat:hover .ph,.obj:hover .ph,.met:hover .ph{transform:none}
  .cat:hover .badge{background:rgba(255,255,255,.94);color:var(--ink);transform:none}
  .prod:hover{transform:none;border-color:rgba(255,255,255,.1)}
  .ben:hover,.step:hover{transform:none;border-color:var(--line)}
  .banner:hover .ic{transform:none}
  .fl:hover{background:var(--bg-card)}
  .btn:hover{transform:translateZ(0)}
}

/* ================= COMPACT MOBIL ================= */
@media (max-width:760px){
  section{padding-block:2.5rem}
  .idx{margin-bottom:0.8rem}
  .sec-head{gap:0.5rem;margin-bottom:1.3rem}
  .sec-head p{font-size:0.9rem}
  .hero{padding-block:1.9rem 1.4rem}
  .hero .answer{margin-top:0.9rem;font-size:1rem}
  .hero-cta{margin-top:1.1rem;gap:0.55rem}
  .hero-cta .btn{padding:0.85rem 1.4rem}
  .hero-links{margin-top:0.75rem}
  .hero-help{margin-top:0.65rem;font-size:0.82rem}
  .hero-sign{margin-top:0.5rem}
  .stage{margin-top:1.5rem}
  .fl-row{gap:0.45rem;margin-top:0.6rem}
  .fl{padding:0.45rem 0.75rem 0.45rem 0.45rem;border-radius:0.75rem;gap:0.5rem}
  .fl b{font-size:0.78rem}
  .cc{padding:0.62rem 0.2rem;gap:0.7rem;grid-template-columns:2.1rem minmax(0,1fr) 0.9rem}
  .cc .ic{width:2.1rem;height:2.1rem;padding:0.42rem;border-radius:0.6rem}
  .cc b{font-size:0.92rem}
  .cc span{font-size:0.76rem;line-height:1.35}
  .banner{padding:0.9rem 1rem;gap:0.8rem}
  .banner .ic{width:2.3rem;height:2.3rem;padding:0.5rem}
  .banner b{font-size:0.98rem}
  .banner span{font-size:0.76rem}
  .cat-extra{margin-top:1rem;gap:0.6rem}
  .cat-compact{margin-top:0.7rem}
  .prod-strip{grid-auto-columns:minmax(11.5rem,68%);gap:0.6rem}
  .prod .body{padding:0.75rem 0.85rem 0.85rem;gap:0.35rem}
  .prod h3{font-size:0.9rem}
  .prod .go a{padding:0.5rem 0.7rem;font-size:0.6rem}
  .prod-cta,.met-cta,.why-cta{margin-top:1.2rem}
  .obj-grid{gap:0.55rem}
  .obj{aspect-ratio:3/3.2}
  .obj b{font-size:0.88rem;bottom:0.7rem}
  .ben-grid,.steps{gap:0.55rem}
  .ben{padding:0.95rem 0.9rem}
  .ben .ic{width:2.3rem;height:2.3rem;padding:0.5rem;margin-bottom:0.5rem}
  .ben p{font-size:0.84rem}
  .step{padding:0.95rem 0.85rem 1rem}
  .step .big{font-size:1.9rem;-webkit-text-stroke:1.2px var(--ink)}
  .step h3{margin-top:0.4rem;margin-bottom:0.3rem;font-size:0.95rem}
  .step p{font-size:0.8rem}
  .met-grid{gap:0.55rem}
  .met{aspect-ratio:1/1.02}
  .met b{font-size:0.84rem}
  .faq summary{padding:0.9rem 0.2rem;gap:0.7rem}
  .faq .a{padding:0 0.2rem 0.95rem;font-size:0.88rem}
  footer{padding-top:2.4rem}
  .foot-grid{gap:1.3rem;padding-bottom:1.6rem}
  .foot-grid h3{margin-bottom:0.55rem}
  .foot-grid li{margin-bottom:0.35rem}
  .foot-legal{padding-block:0.85rem}
  .m-cta{padding:0.5rem var(--pad-x) calc(0.5rem + env(safe-area-inset-bottom));gap:0.5rem}
  .m-cta .btn{padding:0.75rem 1rem;font-size:0.92rem}
  .m-cta .tel{width:2.8rem;height:2.8rem}
  body{padding-bottom:4.4rem}
  .topbar-in{min-height:1.9rem}
  .head-in{min-height:3.5rem}
  .brand .mark{width:2rem;height:2rem;border-radius:0.55rem}
  .brand b{font-size:0.92rem}
  .brand small{font-size:0.54rem}
}
@media (max-width:560px){
  :root{--fs-2:clamp(1.45rem,6.2vw,1.8rem)}
  .reserved-slot-hint{display:none}
  .reserved-slot.is-overlay{padding-top:1.55rem;padding-bottom:2.55rem;gap:0.25rem}
  .reserved-slot-file{
    padding:0.22rem 0.45rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal;
    word-break:normal;
  }
  .reserved-slot-size{font-size:clamp(0.72rem,0.64rem + 0.4vw,0.95rem);padding:0.2rem 0.45rem}
  .met .reserved-slot.is-overlay{padding:0.32rem 0.25rem 2.2rem}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:0.55rem}
  .cat{aspect-ratio:1/1.02}
  .cat p{display:none}
  .cat h3{font-size:0.92rem;line-height:1.15}
  .cat .txt{padding:0.65rem 0.7rem}
  .cat .badge{width:2rem;height:2rem;border-radius:0.55rem;top:0.5rem;left:0.5rem}
  .cat .badge .ic{width:1.05rem;height:1.05rem}
}
@media (max-width:340px){
  .cat-grid{grid-template-columns:1fr}
  .cat{aspect-ratio:16/9}
}
.section-no-top{padding-top:0}
.form-kicker{color:var(--lime)}
.form-title{margin-top:0.75rem}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-alert{margin-top:1rem;padding:0.8rem 1rem;border:1px solid var(--lime);border-radius:0.75rem;background:rgba(16,20,19,.25);color:#fff}
.form-alert ul{margin:.35rem 0 0 1.25rem}
.form-consent label{display:flex;align-items:flex-start;gap:.65rem;font-family:"Figtree",system-ui,sans-serif;font-size:.78rem;letter-spacing:0;text-transform:none}
.form-consent input{width:auto;margin-top:.25rem}
.foot-parent-link{color:#fff}
.foot-text-btn{display:inline;border:0;background:none;padding:0;color:#AEB6B1;font:inherit;font-size:0.88rem;cursor:pointer;text-align:inherit}
.foot-text-btn:hover{color:var(--lime)}
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:#fff;padding:1rem 0 calc(1rem + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12)}
.cookie-bar[hidden]{display:none!important}
.cookie-bar-inner{display:flex;gap:1.25rem;align-items:center;justify-content:space-between}
.cookie-bar-inner p{max-width:58ch;margin:0;font-size:0.88rem;line-height:1.5;color:#AEB6B1}
.cookie-bar-actions{display:flex;flex-wrap:wrap;gap:0.55rem;align-items:center;flex:none}
.cookie-bar .btn{padding:0.7rem 1.15rem;font-size:0.88rem}
.cookie-bar .btn-solid{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.cookie-bar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cookie-bar-link{color:var(--lime);font-size:0.84rem}
@media (max-width:820px){.cookie-bar-inner{flex-direction:column;align-items:stretch}}
@media (max-width:760px){.cookie-bar{bottom:5.25rem}}
.cookie-dialog{width:min(32rem,calc(100vw - 2rem));padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-img);background:var(--bg)}
.cookie-dialog::backdrop{background:rgba(16,20,19,.45)}
.cookie-dialog h2{margin:0 0 0.75rem}
.cookie-dialog p{color:var(--ink-2);margin:0 0 1.25rem}
.cookie-dialog-actions{display:flex;flex-wrap:wrap;gap:0.55rem;align-items:center}
.cookie-dialog-close{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--ink-2);font:inherit;text-decoration:underline;padding:0.4rem 0}
.cookie-page-panel{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-img);background:var(--bg-card)}
.cookie-page-panel h2{margin-bottom:0.65rem}
.cookie-page-panel p{color:var(--ink-2);margin-bottom:1.1rem;max-width:62ch}

/* Pagini interioare reutilizabile */
.breadcrumbs{padding-top:1rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;font-size:.82rem;color:var(--ink-2)}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.45rem;color:var(--ink-3)}
.breadcrumbs a{color:var(--green)}
.generic-hero{padding-block:clamp(2.5rem,6vw,5rem);text-align:center}
.generic-hero h1{font-size:clamp(2rem,1.2rem + 4vw,4.3rem);max-width:18ch;margin-inline:auto}
.generic-hero p{max-width:62ch;margin:1rem auto 0;color:var(--ink-2);font-size:var(--fs-1)}
.generic-section{padding-block:clamp(2.5rem,5vw,4.5rem)}
.listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g2)}
.listing-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden}
.listing-media{aspect-ratio:4/3}
.listing-body{padding:1.25rem}
.listing-body h2{font-family:"Bricolage Grotesque";font-size:var(--fs-1)}
.listing-body h2 a{color:var(--ink)}
.listing-body p{margin-top:.65rem;color:var(--ink-2)}
.availability{display:inline-block;margin-top:.8rem;font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--green)}
.prose{max-width:52rem}
.prose h2{margin-bottom:1rem}
.prose p+p{margin-top:1rem}
.empty-state{text-align:center;padding:2.5rem;border:1px dashed var(--ink-3);border-radius:var(--r-img)}
.empty-state p{margin:.65rem auto 1.25rem;max-width:48ch;color:var(--ink-2)}
.quote-cta{margin-block:2rem 4rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-img);background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.quote-cta h2{margin:.45rem 0}.quote-cta p{color:rgba(255,255,255,.78)}
.quote-form{grid-template-columns:1fr}.quote-form .cta-copy{max-width:60rem;margin-inline:auto;width:100%}
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2rem}
.pagination a,.pagination span{display:grid;place-items:center;min-width:2.5rem;height:2.5rem;border:1px solid var(--ink);border-radius:999px;text-decoration:none}
.pagination span{background:var(--ink);color:#fff}
.spec-list>div{display:grid;grid-template-columns:minmax(10rem,1fr) 2fr;border-bottom:1px solid var(--line);padding:.8rem 0}
.spec-list dt{font-weight:600}.spec-list dd{color:var(--ink-2)}
.byline{font-size:.85rem!important}
@media(max-width:900px){.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.listing-grid{grid-template-columns:1fr}.quote-cta{align-items:stretch;flex-direction:column}.spec-list>div{grid-template-columns:1fr}}
/* Listing cards after the first row: skip until near. Mobile only — desktop hover shadows would clip. */
@media (max-width:767px){
  .catalog-card-grid>.shelf-item:nth-child(n+2),
  .shelf-grid>.shelf-item:nth-child(n+2),
  .listing-grid>.listing-card:nth-child(n+2),
  .listing-grid>.guide-card:nth-child(n+2),
  .pdp-rel>.pdp-rcard:nth-child(n+2){
    content-visibility:auto;
    contain-intrinsic-size:auto 400px;
  }
}