/* ═══════════════════════════════════════════════════════════════════
   Substrat — fundații

   Paleta e cea din fișa de brand, nu una aleasă de mine. Trei culori,
   atât — orice a patra pe pagină e o greșeală, nu o decizie.

   Tipografia e Helvetica Neue LT W1G, a doua față din fișă, subsetată
   la caracterele care apar efectiv pe cele două pagini (43 KB pentru
   toate trei greutățile). Adget Sans nu se încarcă: fișierele primite
   sunt versiuni demo FontSpring și nu conțin niciun diacritic
   românesc — cuvântul „Sărat" ar fi ieșit din alt font. Adget rămâne
   totuși în brand: e deja conturat în logo-ul din grafică.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("../fonts/hn-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("../fonts/hn-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("../fonts/hn-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── cele trei culori din fișa de brand ─────────────────────────── */
  --dark:  #342923;   /* R52  G41  B35   C57 M68 Y75 K71 */
  --cream: #F2EEE9;   /* R242 G238 B233  C5  M5  Y9  K0  */
  --tan:   #DEC9A9;   /* R222 G201 B169  C13 M20 Y36 K3  */

  /* ── derivate, doar prin întunecare/transparență ────────────────── */
  --dark-deep: #241C18;   /* cardul de subsol, o treaptă sub pagină */
  --tan-dim:   rgb(222 201 169 / .34);
  --hair:      rgb(242 238 233 / .14);

  --ink-1: rgb(242 238 233 / 1);
  --ink-2: rgb(242 238 233 / .72);
  --ink-3: rgb(242 238 233 / .58);  /* 5,3:1 pe --dark, peste pragul AA */

  --font-brand: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* o singură curbă pentru tot site-ul: pornire fermă, oprire lungă */
  --ease: cubic-bezier(.2, .72, .18, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--ink-1);
  background-color: var(--dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* hârtia: grain real, decupat din grafică și oglindit ca să se repete
   fără cusătură */
.paper {
  background-color: var(--dark);
  background-image: url("../img/paper.webp");
  background-repeat: repeat;
  background-size: 440px;
}

/* cifrele stau în coloană: prețurile din meniu trebuie să se alinieze */
.tnum { font-variant-numeric: tabular-nums; }

/* ── focus: vizibil pe orice fundal, niciodată ascuns ───────────────── */
:where(a, button, [tabindex]):focus-visible {
  outline: 2.5px solid var(--tan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -140%;
  z-index: 99;
  padding: .7rem 1.2rem;
  background: var(--cream);
  color: var(--dark);
  font-size: .95rem;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  transition: translate .25s var(--ease);
}
.skip:focus-visible { translate: -50% 0; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════ semnătura studioului, ambele pagini
   Aspectul cardului stă aici; unde se așază îl decide fiecare pagină —
   fixat de fereastră pe pagina de linkuri, la capătul listei pe meniu. */

.credit__card {
  display: flex;
  align-items: center;
  /* pe telefon iese cât ecranul, ca în mockup; pe tabletă se oprește aici,
     altfel butonul ar rămâne singur la un metru de nume */
  max-width: 440px;
  margin-inline: auto;
  gap: clamp(9px, 2.8vw, 15px);
  padding: clamp(11px, 1.6dvh, 15px) clamp(12px, 3.2vw, 16px);
  border: 1.5px solid var(--tan-dim);
  border-radius: clamp(17px, 4.6vw, 22px);
  background: rgb(36 28 24 / .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--cream);
  /* aceeași ridicare ca pilulele: cardul stă peste ciabatte */
  box-shadow:
    0 1px 2px   rgb(26 20 17 / .22),
    0 6px 20px -4px rgb(26 20 17 / .52);
  transition:
    border-color .28s var(--ease),
    transform    .28s var(--ease),
    box-shadow   .28s var(--ease);
}

.credit__mark {
  flex: none;
  width: clamp(24px, 6.6vw, 32px);
  aspect-ratio: 700 / 520;   /* proporția mărcii, ca aripile să nu se turtească */
  color: var(--cream);
}

.credit__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;      /* lasă numele să se strângă înainte să împingă butonul */
  margin-right: auto;
}

.credit__by {
  font-size: clamp(9.5px, 2.6vw, 11.5px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink-2);
}

.credit__name {
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  white-space: nowrap;
}

.credit__btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.6vw, 8px);
  height: clamp(33px, 4.4dvh, 42px);
  padding-inline: clamp(11px, 3vw, 15px);
  border-radius: 999px;
  background: var(--tan);
  color: var(--dark);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background-color .28s var(--ease);
}

/* aceeași marcă în buton, dar pe nisipiu merge închisă: currentColor o
   ține identică cu textul „cerbex.ro" de lângă ea */
.credit__btnmark {
  flex: none;
  width: 1.28em;
  aspect-ratio: 700 / 520;
  fill: currentColor;
}

.credit__out {
  flex: none;
  width: .84em;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}

@media (hover: hover) and (pointer: fine) {
  .credit__card:hover {
    border-color: var(--tan);
    transform: translateY(-2px);
    box-shadow:
      0 1px 2px rgb(26 20 17 / .22),
      0 14px 32px -8px rgb(26 20 17 / .62);
  }
  .credit__card:hover .credit__btn { background: var(--cream); }
}

.credit__card:active { transform: translateY(0) scale(.99); }

.credit__legal {
  margin-top: clamp(8px, 1.2dvh, 12px);
  text-align: center;
  font-size: clamp(9.5px, 2.6vw, 11px);
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}