/* =========================================================
   CAMERE.MD — Base: reset, typography, buttons, primitives
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}

/* Atributul `hidden` trebuie sa ascunda, oricare ar fi clasa.
   `hidden` aduce doar un `display:none` din foaia browserului, iar orice regula
   de clasa care pune un `display` il bate. Asa a stat fereastra de portofoliu,
   `.story{display:grid}`, permanent intinsa peste toata pagina: invizibila
   (opacity 0) dar apasabila, la z-index 220. Rezultatul: niciun link, buton sau
   card de pe site nu mai raspundea la clic. Masurat: 0 din 81 de elemente.
   Aceeasi capcana tinea vizibile `.cs-layout` din cos si `.pd-raw` din pagina
   de produs, unde cosul gol se afisa peste continut.
   `!important` e justificat aici: e singurul fel in care un atribut al
   platformei nu poate fi anulat din greseala de o clasa scrisa mai tarziu. */
[hidden]{display:none !important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Garda laterala sta pe html, nu pe body: cand overflow-ul body-ului se
     propaga la fereastra, body-ul insusi ramane 'visible' si nu mai taie
     nimic - de aceea vechea garda de pe body nu functiona.
     'clip', nu 'hidden': hidden ar face din html un container de derulare si
     ar rupe position:sticky. Ce se taie: cele 26px cu care intra lateral
     elementele cu data-reveal, si straturile decorative din hero. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--surface);
  color:var(--text-muted);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.is-locked{overflow:hidden}

/* Corpul nu se mai deruleaza cat timp e deschisa o fereastra peste pagina.
   `position:fixed`, nu doar `overflow:hidden`: pe iOS overflow nu opreste
   derularea paginii de dedesubt. Pozitia se pune inapoi la inchidere, exact
   unde era — vezi assets/js/modal.js. */
body.cm-blocat{
  position:fixed;
  left:0;right:0;
  width:100%;
  overflow:hidden;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--text);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}

/* ---------------------------------------------------------
   FOCUS — visible, consistent, never removed
--------------------------------------------------------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
/* conturul de focus isi ia culoarea din tema, ca orice altceva */

.skip-link{
  position:absolute;
  left:12px;
  top:-64px;
  z-index:var(--z-skip);
  padding:var(--sp-8) var(--sp-16);
  background:var(--accent-strong);
  color:var(--on-accent);
  border-radius:var(--r-sm);
  font-weight:600;
  transition:top var(--t-ui) var(--e-out);
}
.skip-link:focus-visible{top:12px}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------------------------------------------------------
   LAYOUT PRIMITIVES
--------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--sp-gutter);
}

.section{
  position:relative;
  padding-block:var(--sp-section);
}

/* Nu mai exista sectiuni inchise si sectiuni deschise. Exista o tema, iar
   in interiorul ei suprafata de baza e constanta de sus pana jos. Ce era
   .section--dark a disparut din pagina si de aici; culoarea o dau tokenii,
   care isi schimba valorile o singura data, in tokens.css. */

/* Eticheta de sectiune. Era pastila ALL CAPS cu tracking mare si numar de
   ordine - acelasi tipar de opt ori pe pagina. Acum e ce spune ca este: un
   cuvant care numeste sectiunea, in fontul textului, cu o linie care duce
   ochiul spre titlu. Numarul a iesit: la sectiunea de proces numerotarea e
   o secventa reala, la titluri era ornament. */
.marker{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  font-size:var(--fs-label);
  letter-spacing:.02em;
  color:var(--text-muted);
  margin-bottom:var(--sp-24);
}
.marker::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.marker b{
  font-weight:500;
  color:var(--accent-text);
}
.marker--center{justify-content:center}
.marker--center::after{display:none}


/* ---------------------------------------------------------
   SECTION HEADS
--------------------------------------------------------- */
.head{max-width:var(--maxw-text)}
.head--wide{max-width:none}

.head h2{
  font-size:var(--fs-h2);
  text-transform:uppercase;
  letter-spacing:-.015em;
}
.head h2 em{
  font-style:normal;
  color:var(--accent-text);
}
.head .lead{
  margin-top:var(--sp-16);
  font-size:var(--fs-lead);
  max-width:56ch;
}

.head--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px);
  align-items:end;
  max-width:none;
}
.head--split .lead{margin-top:0}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.btn{
  --btn-bg:var(--accent-strong);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-8);
  padding:var(--sp-16) var(--sp-24);
  min-height:50px;
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--f-head);
  font-weight:600;
  font-size:var(--fs-lead);
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:
    background-color var(--t-ui) var(--e-out),
    transform var(--t-ui) var(--e-out),
    color var(--t-ui) var(--e-out),
    border-color var(--t-ui) var(--e-out);
}
.btn .ic{
  transition:transform var(--t-micro) var(--e-out);
  font-size:.9em;
}
.btn:hover{--btn-bg:var(--accent-press);transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:translateY(0)}

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--text);
  border:1px solid var(--border-strong);
}
.btn--ghost:hover{
  --btn-bg:transparent;
  --btn-fg:var(--accent-text);
  border-color:var(--accent);
}

.btn--ghost-dark{
  --btn-fg:var(--text);
  border-color:var(--border);
}
.btn--ghost-dark:hover{
  --btn-fg:var(--accent-text);
  border-color:var(--accent);
}

/* Aceleasi nume de variante ca in constructor, ca sa existe un singur
   vocabular pentru acelasi obiect. .btn e primary implicit. */
.btn--primary{--btn-bg:var(--accent-strong);--btn-fg:#fff}
.btn--secondary{--btn-bg:transparent;--btn-fg:var(--text);border:1px solid var(--border-strong)}
.btn--secondary:hover{--btn-bg:var(--accent-wash);--btn-fg:var(--accent-text);border-color:var(--accent-line)}
.btn--lg{padding:var(--sp-20) var(--sp-32);min-height:60px;font-size:var(--fs-h4)}
/* 44px, nu 42: pragul de tinta de atingere pe telefon */
.btn--sm{padding:var(--sp-12) var(--sp-16);min-height:44px;font-size:var(--fs-body)}
.btn--block{width:100%}

/* ---------------------------------------------------------
   TEXT LINK WITH ARROW
--------------------------------------------------------- */
.tlink{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  font-family:var(--f-head);
  font-weight:600;
  font-size:var(--fs-body);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.tlink .ic{transition:transform var(--t-micro) var(--e-out)}
.tlink:hover .ic{transform:translateX(5px)}

/* ---------------------------------------------------------
   MONO DATA LABEL — for anything factual/technical
--------------------------------------------------------- */
.mono{
  font-family:var(--f-mono);
  font-size:var(--fs-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   THE MOTIF — logo-derived ring, reused everywhere
--------------------------------------------------------- */
.ring{
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:52px;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--border-strong);
  color:var(--accent-text);
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.ring::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid var(--accent);
  clip-path:polygon(50% 0,100% 0,100% 34%,50% 34%);
  opacity:0;
  transition:opacity var(--t-ui) var(--e-out),rotate var(--t-comp) var(--e-out);
}

/* ---------------------------------------------------------
   PICTOGRAME (§4.7)
   Un singur set, SVG inline din assets/img/icons.svg, pe currentColor.
   Scara e fixa: 16 / 20 / 24 / 32. Alinierea e optica, nu "aproximativa":
   vertical-align o aseaza pe linia de baza a textului de langa ea.
   Marcile sociale raman logouri de brand — nu sunt pictograme de interfata.
--------------------------------------------------------- */
.icon{
  /* Scara e FIXA: 16 / 20 / 24 / 32. Nimic in em, nimic "aproximativ":
     o pictograma legata de font-size ajunge la 16x13 sau 17x17, adica in
     afara grilei si nici macar patrata. */
  width:20px;
  height:20px;
  flex:0 0 auto;
  vertical-align:-.22em;
  color:currentColor;
}
.icon--16,
.ic.icon{width:16px;height:16px;vertical-align:-.18em}
.icon--24{width:24px;height:24px;vertical-align:-.26em}
.icon--32{width:32px;height:32px;vertical-align:-.3em}

/* Contextele care isi impuneau propria dimensiune pe vechiul <i> o impun
   acum pe scara, nu pe fractiuni de em. */
.ring .icon{width:24px;height:24px;vertical-align:0}
.btn .icon,
.tlink .icon{width:16px;height:16px}
.dock-toggle .icon,
.to-top .icon{width:20px;height:20px;vertical-align:0}
/* pictograma dintr-o rotita (chip, ring, call-pill) e centrata in ea, deci
   nu are nevoie de aliniere pe linia de baza */
.chip .ic .icon,
.call-pill .ic .icon,
.price-list .ic{width:16px;height:16px;vertical-align:0}