/* Subset pentru paginile de text. index.html și about.html își păstrează CSS-ul
   propriu, inline: sunt pagini de design, nu de text. */

:root{
  --petrol:#0B4954;
  --ivory:#F7F4EE;
  --copper:#C56A3D;
  --copper-light:#D97E4A;
  --white:#fff;
  --petrol-mid:#093A43;
  --petrol-deep:#072C32;
  --copper-text:#A9532B;
  --copper-grad:#D08662;
  --copper-tint:rgba(197,106,61,.2);
  --copper-hair:rgba(217,126,74,.15);
  --ink:#041D22;
  --ink-2:#192629;
  --muted:#3D5C64;
  --petrol-60:rgba(11,73,84,.6);
  --cyan:#96E3F1;
  --container:1220px;
  --gutter:44px;
  --r-card:18px;
  --r-btn:20px;
  --r-chip:12px;
  --r-photo:48px;
  --r-card-lg:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Selecția de text: accentul de brand, nu albastrul implicit al browserului. */
::selection{background:var(--copper);color:var(--white)}
h1,h2{margin:0;font-weight:900;color:var(--petrol);letter-spacing:-.015em;text-transform:uppercase}

:where(a,button):focus-visible{outline:3px solid var(--copper-light);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--petrol);color:var(--ivory);padding:14px 22px;border-radius:0 0 12px 0;font-weight:800}
.skip:focus{left:0}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- bara de sus, identică cu celelalte pagini ------------------- */
.topbar{
  position:absolute;z-index:5;top:25px;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
}
.topbar__logo{width:173px;height:34px}
.menu-btn{display:grid;place-items:center;width:48px;height:24px;padding:0;background:none;border:0;color:var(--copper);cursor:pointer}
.menu-btn svg{width:48px;height:24px}

/* ---------- capul paginii ---------------------------------------------- */
.head{position:relative;background:var(--ivory);padding:150px 0 68px}
.eyebrow{
  display:flex;align-items:center;gap:8px;margin:0 0 24px;
  font-size:14px;font-weight:700;line-height:1.07;letter-spacing:.214em;
  text-transform:uppercase;color:var(--copper-text);
}
/* Ridicat 2px: `align-items:center` centrează CUTIILE, iar textul e majuscule,
   care ocupă doar partea de sus a cutiei lor, deci semnul pare lăsat.
   Măsurat la scală 6x: -2px lasă un rest de 0.08px, cel mai aproape de centru.
   Pe `translate`, nu pe `margin-top`: într-un flex cu align-items:center,
   marginea intră în centrare și jumătate din ea se pierde. */
.eyebrow svg{flex:none;width:16px;height:16px;translate:0 -2px;color:#1F5861}
.head h1{font-size:clamp(32px,3.97vw,56px);line-height:1.06}
.head p:not(.eyebrow){max-width:640px;margin-top:18px;font-size:clamp(17px,1.19vw,18px);line-height:1.604;color:var(--ink)}
.updated{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--muted)}

/* ---------- corpul documentului ---------------------------------------- */
.doc{padding:68px 0 96px}
/* aliniat la stânga containerului, ca titlul din cap — nu centrat în ecran */
.doc__in{max-width:760px}
.doc h2{
  margin:52px 0 16px;
  font-size:22px;line-height:1.2;text-transform:none;
}
.doc h2:first-child{margin-top:0}
.doc p{margin-bottom:14px;line-height:1.65}
.doc p:last-child{margin-bottom:0}
/* `:not(.btn)`: fara el, regula asta bate `.btn--primary` la specificitate
   (0,1,1 vs 0,1,0) si butoanele din corpul paginii primeau culoare de link. */
.doc a:not(.btn){color:var(--copper-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.doc a:not(.btn):hover{color:var(--petrol)}
.doc ul{margin:0 0 14px}
.doc li{display:flex;gap:12px;padding:9px 0;line-height:1.6;border-bottom:1px solid var(--copper-hair)}
.doc li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--copper-tint);border-radius:2px;rotate:-45deg}
.doc strong{font-weight:800;color:var(--petrol)}
.note{
  margin:24px 0;padding:20px 24px;
  background:var(--ivory);border-radius:var(--r-card);
  font-size:15px;line-height:1.6;
}
.note b{display:block;margin-bottom:6px;font-weight:800;color:var(--petrol)}
.btn-inline{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:4px;padding:11px 20px;
  background:var(--petrol);color:var(--ivory);
  border:0;border-radius:var(--r-btn);
  font:800 15px/1.4 Nunito,system-ui,sans-serif;cursor:pointer;
}
.btn-inline:hover{background:var(--copper)}

/* ---------- footer, identic cu celelalte pagini ------------------------- */
.site-foot{
  position:relative;overflow:hidden;
  padding:61px 0 195px;
  background:linear-gradient(180deg,var(--petrol-mid),var(--petrol-deep));
  border-top:5px solid var(--copper);
  color:var(--ivory);
}

/* Rândul de sus: logo la stânga, navigația plus LinkedIn la dreapta. */
.site-foot__top{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px;margin-bottom:16px}
.site-foot__logo{width:193px;height:38px;flex:none}
.site-foot__nav{display:flex;align-items:center;flex-wrap:wrap;gap:22px}
/* copil direct, nu `.site-foot__nav a`: cercul LinkedIn stă în aceeași navigație,
   iar un selector larg i-ar da mărimea și subliniere de link text. */
.site-foot__nav>a{font-size:14px;color:rgba(247,244,238,.55);text-decoration:underline;text-underline-offset:3px}
.site-foot__nav>a:hover{color:var(--copper-light)}

.social{display:flex;gap:16px}
.social a{
  display:grid;place-items:center;
  width:36px;height:36px;
  background:rgba(217,126,74,.1);border-radius:50%;
  color:var(--copper-light);
  transition:background-color .22s ease;
}
.social a:hover{background:rgba(217,126,74,.28)}
.social svg{width:20px;height:20px}

/* Rândul doi: numele și creditul, centrate, sub o linie care se stinge la capete.
   Linia e 1px copper-light la 60% — măsurată din design: alfa iese 0.6 pe toate
   trei canalele, deci copper-light, nu copper. */
.site-foot__meta{
  position:relative;
  /* fit-content, nu 560px fix: cei 560 din Figma sunt un cadru strâns pe conținut,
     nu o valoare de grilă. La 15px textul iese cu 3.8% mai lat decât în Figma și
     la lățime fixă rândul s-ar rupe în două. Așa se strânge pe text, iar linia de
     deasupra ia exact lățimea lui — ca în design. */
  width:fit-content;max-width:calc(100% - var(--gutter)*2);
  margin:0 auto;padding-top:13px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:32px;text-align:center;
}
.site-foot__meta::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,126,74,.6),transparent);
}
.site-foot__who{font-size:15px;line-height:1.6;color:rgba(247,244,238,.7)}
.site-foot__who b{font-weight:700;color:var(--ivory)}
/* creditul agenției: deschide în tab nou, ca să nu trimită vizitatorul ei altundeva */
.site-foot__credit{font-size:15px;line-height:1.6;color:rgba(247,244,238,.55);white-space:nowrap}
.site-foot__credit a{color:rgba(247,244,238,.55);text-decoration:underline;text-underline-offset:3px}
.site-foot__credit a:hover{color:var(--copper-light)}

/* Wordmark-ul de jos, ca imagine: contur real, nu -webkit-text-stroke — fontul
   scotea țepi în A, G și H și nu se putea regla. Un fișier de 15KB cerut o dată
   pentru tot site-ul bate 15KB de markup inline înmulțit cu șase pagini, deci
   culoarea e fixă în fișier — o imagine nu moștenește currentColor.
   Lățimea: 1:1 cu SVG-ul la 1512, apoi 100vw, cu prag jos la 595px — pragul vine
   din varianta text de dinainte, care ținea minimum 48px la clamp(48px,8.07vw,122px).
   Sub 595px se taie în lateral, ca înainte. Arta sângerează deja în afara
   viewBox-ului (11 unități stânga, 17 dreapta, 10 jos), deci decupajul e în fișier. */
.site-foot__mark{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  /* max-width:none, altfel regula globala img{max-width:100%} taie clamp-ul si
     sub 595px wordmark-ul se strange la latimea ecranului: la 320px ajungea 20px
     inalt, cand varianta text tinea minimum 48. */
  width:clamp(595px,100vw,1512px);max-width:none;height:auto;
  pointer-events:none;user-select:none;
}


@media (max-width:1180px){:root{--gutter:32px}}
@media (max-width:640px){
  :root{--gutter:22px}
  .head{padding-top:112px}
  /* logo peste navigație: la lățimea asta nu mai încap pe un rând */
  .site-foot__top{flex-direction:column;align-items:flex-start;gap:20px}
  /* wordmark-ul e ~41px înalt aici (96/1512 × 640), nu 96 ca pe desktop */
  .site-foot{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}