/* ==========================================================================
   CABINET AVOCAT SIMONA JEFLEA — CONCEPT 4 · „BENTO OS"
   Un singur sistem de dale (tiles) pe o grilă coerentă: pagina este un
   panou de control. Pânză glacier, suprafețe silver, muchii de un fir de păr,
   raze de 20px, umbre foarte moi. Fiecare dală se restilizează după propria
   lățime prin container queries — nu după viewport.
   ========================================================================== */

/* ---------- 01 · TOKENI (PALETTE.md — sursă unică de culoare) ---------- */
:root{
  /* iPhone 18 Pro — Black */
  --ink-900:#111113;  --ink-800:#1A1A1C;  --ink-700:#242427;  --ink-600:#3E3E41;
  /* iPhone 18 Pro — Silver */
  --silver-50:#F6F6F5; --silver-100:#EDEDEB; --silver-200:#D5D5D4;
  --silver-300:#C0C1BE; --silver-400:#AEAFAE; --silver-600:#7C7C7A;
  /* iPhone 18 Pro — Glacier */
  --glacier-50:#EEF2F7; --glacier-100:#DCE4EE; --glacier-200:#A8B4C6;
  --glacier-400:#919EB0; --glacier-600:#798699; --glacier-800:#4D4854;
  /* iPhone 18 Pro — Burgundy */
  --wine-950:#1A0F11; --wine-900:#2A1518; --wine-800:#46262B;
  --wine-600:#653C43; --wine-400:#82555C;
  /* Sigla */
  --brand-crimson:#D5054F; --brand-mid:#9B0C41; --brand-burgundy:#8A0E3A;
  --brand-tint:#FDF2F6;    --brand-tint-2:#F2D3DF;

  /* ---- semantice ---- */
  --canvas:      var(--glacier-50);
  --canvas-deep: var(--glacier-100);
  --surface:     var(--silver-50);
  --surface-hi:  #FFFFFF;
  --surface-cool:var(--glacier-100);

  --fg:      var(--ink-800);
  --fg-soft: var(--glacier-800);
  --fg-dim:  var(--ink-600);
  --fg-on-dark:      var(--silver-100);
  --fg-on-dark-soft: var(--glacier-200);

  --accent:      var(--brand-crimson);
  --accent-text: var(--brand-mid);
  --accent-deep: var(--brand-burgundy);
  --accent-wash: var(--brand-tint);

  --edge:        color-mix(in srgb, var(--glacier-400) 46%, transparent);
  --edge-strong: color-mix(in srgb, var(--glacier-600) 62%, transparent);
  --edge-warm:   color-mix(in srgb, var(--brand-crimson) 46%, transparent);
  --edge-dark:   color-mix(in srgb, var(--silver-50) 17%, transparent);

  --danger:  var(--brand-mid);
  --success: var(--brand-burgundy);

  /* ---- tipografie ---- */
  --font-display:"Outfit","Avenir Next",system-ui,-apple-system,sans-serif;
  --font-ui:"Schibsted Grotesk","Helvetica Neue",Helvetica,system-ui,sans-serif;

  --fs-mega:  clamp(2.5rem, 1.05rem + 6.1vw, 5.5rem);
  --fs-h2:    clamp(1.8rem, 1.15rem + 2.4vw, 3.15rem);
  --fs-h3:    clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  --fs-quote: clamp(1.7rem, 0.75rem + 4vw, 3.9rem);
  --fs-lead:  clamp(1.02rem, 0.96rem + 0.34vw, 1.22rem);
  --fs-body:  clamp(0.97rem, 0.945rem + 0.12vw, 1.04rem);
  --fs-sm:    0.9rem;
  --fs-xs:    0.75rem;
  --fs-mono:  0.7rem;
  --fs-figure:clamp(2rem, 1.2rem + 2.6vw, 3.3rem);

  --lh-tight:1.02;
  --lh-snug:1.18;
  --lh-body:1.62;
  --track-wide:0.16em;
  --track-mid:0.07em;

  /* ---- spațiere ---- */
  --s1:0.25rem; --s2:0.5rem;  --s3:0.75rem; --s4:1rem;
  --s5:1.375rem; --s6:2rem;   --s7:2.75rem; --s8:4rem; --s9:5.5rem;
  --rack-y: clamp(3.25rem, 1.6rem + 6.4vw, 6.75rem);

  /* ---- geometrie ---- */
  --shell:1680px;
  --pad: clamp(1rem, 0.35rem + 2.6vw, 2.75rem);
  --gap: clamp(0.625rem, 0.35rem + 1.15vw, 1.125rem);
  --topbar-h:68px;

  --r-tile:20px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;
  --hair:1px;

  --lift-1:0 1px 1px color-mix(in srgb, var(--glacier-800) 7%, transparent),
           0 10px 26px -18px color-mix(in srgb, var(--glacier-800) 46%, transparent);
  --lift-2:0 2px 3px color-mix(in srgb, var(--glacier-800) 9%, transparent),
           0 22px 44px -22px color-mix(in srgb, var(--glacier-800) 52%, transparent);
  --lift-dark:0 18px 44px -24px color-mix(in srgb, var(--ink-900) 78%, transparent);

  --ease:cubic-bezier(.2,.65,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t1:.16s; --t2:.34s; --t3:.62s;
}

/* Peste 1440px pânza e mult mai lată decât scara pentru care a fost desenată
   macheta. Ridicăm plafoanele scării tipografice și ale spațierii ca dalele să
   fie umplute de conținut, nu de gol. */
@media (min-width:1440px){
  :root{
    --fs-mega:  6.6rem;
    --fs-h2:    3.55rem;
    --fs-h3:    1.58rem;
    --fs-quote: 4.5rem;
    --fs-lead:  1.3rem;
    --fs-body:  1.08rem;
    --fs-sm:    0.96rem;
    --fs-xs:    0.79rem;
    --fs-mono:  0.74rem;
    --fs-figure:3.8rem;
    --pad:      3.25rem;
    --gap:      1.375rem;
  }
}

/* ---------- 02 · RESET & BAZĂ ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--topbar-h) + var(--s5)); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  overflow-x:clip;
  background:var(--canvas);
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* textura fină a pânzei — două straturi glacier foarte discrete */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 88% -8%, color-mix(in srgb, var(--glacier-100) 88%, transparent) 0%, transparent 62%),
    radial-gradient(90% 62% at 4% 4%, color-mix(in srgb, var(--brand-tint) 70%, transparent) 0%, transparent 58%);
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,fieldset{ margin:0; }
fieldset{ padding:0; border:0; min-width:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,blockquote{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
::selection{ background:var(--accent); color:var(--surface-hi); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.jump{
  position:fixed; top:var(--s3); left:var(--s3); z-index:300;
  transform:translateY(-200%);
  background:var(--ink-900); color:var(--fg-on-dark);
  padding:var(--s3) var(--s5); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600;
  transition:transform var(--t2) var(--ease-out);
}
.jump:focus-visible{ transform:translateY(0); }
body.is-held{ overflow:hidden; }

/* ---------- 03 · PRIMITIVE DE TIP ---------- */
.headline{ font-family:var(--font-display); font-weight:500; line-height:var(--lh-snug); letter-spacing:-0.03em; color:var(--ink-900); }
.headline strong{ font-weight:700; color:var(--accent-text); }
.figure-num{ font-family:var(--font-display); font-weight:300; font-size:var(--fs-figure); line-height:1; letter-spacing:-0.05em; font-variant-numeric:lining-nums tabular-nums; }
.kicker{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent-text); }
.kicker::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); flex:none; }
.kicker--quiet{ color:var(--fg-soft); }
.kicker--quiet::before{ background:var(--glacier-400); }
.kicker--onDark{ color:var(--brand-tint-2); }
.kicker--onDark::before{ background:var(--accent); }
.intro{ font-size:var(--fs-lead); line-height:1.56; color:var(--fg-soft); }
.tiny{ font-size:var(--fs-sm); }
.soft{ color:var(--fg-soft); }

.rack{ padding-block:var(--rack-y); scroll-margin-top:calc(var(--topbar-h) + var(--s5)); }
.rack__head{ display:grid; gap:var(--s4); padding-bottom:var(--s6); }
.rack__head h2{ font-size:var(--fs-h2); }
.rack__head .intro{ max-width:56ch; }
@media (min-width:900px){
  .rack__head{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; column-gap:var(--s7); row-gap:var(--s4); }
  .rack__head > .kicker{ grid-column:1 / -1; }
}

/* ---------- 04 · ACȚIUNI ---------- */
.action{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:0.78rem 1.3rem;
  border-radius:var(--r-pill);
  border:var(--hair) solid var(--ink-900);
  background:var(--ink-900); color:var(--fg-on-dark);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0.005em;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t2) var(--ease), border-color var(--t2) var(--ease),
             color var(--t2) var(--ease), transform var(--t1) var(--ease),
             box-shadow var(--t2) var(--ease);
}
.action svg{ width:15px; height:15px; flex:none; transition:transform var(--t2) var(--ease-out); }
.action:hover{ background:var(--accent); border-color:var(--accent); color:var(--surface-hi); }
.action:hover svg{ transform:translateX(3px); }
.action:active{ transform:translateY(1px); }
.action--quiet{ background:transparent; color:var(--ink-900); border-color:var(--edge-strong); }
.action--quiet:hover{ background:var(--ink-900); border-color:var(--ink-900); color:var(--fg-on-dark); }
.action--onCrimson{ background:var(--surface-hi); border-color:var(--surface-hi); color:var(--accent-deep); }
.action--onCrimson:hover{ background:var(--ink-900); border-color:var(--ink-900); color:var(--fg-on-dark); }
.action--sm{ padding:0.56rem 1rem; font-size:var(--fs-xs); }
.action--block{ width:100%; }

.thread{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-weight:600; color:var(--accent-text);
  border-bottom:var(--hair) solid var(--edge-warm);
  padding-bottom:2px;
  transition:color var(--t2) var(--ease), border-color var(--t2) var(--ease), gap var(--t2) var(--ease);
}
.thread:hover{ color:var(--accent); border-color:var(--accent); gap:var(--s3); }
.thread svg{ width:14px; height:14px; }

/* ---------- 05 · DALA (primitivul întregii pagini) ---------- */
.tile{
  /* AICI e miezul conceptului: fiecare dală este propriul context de layout */
  container-type:inline-size;
  container-name:tile;

  position:relative;
  display:flex; flex-direction:column; gap:var(--s4);
  min-width:0;
  padding:clamp(1.05rem, 0.7rem + 1.2vw, 1.75rem);
  background:var(--surface);
  border:var(--hair) solid var(--edge);
  border-radius:var(--r-tile);
  box-shadow:var(--lift-1);
  overflow:hidden;
  transition:transform var(--t2) var(--ease-out), border-color var(--t2) var(--ease),
             box-shadow var(--t2) var(--ease), background var(--t2) var(--ease);
}
/* ridicare subtilă + muchie care se încălzește spre crimson */
.tile--live:hover,
.tile--live:focus-within,
.tile:has(> .tile__hit:hover),
.tile:has(> .tile__hit:focus-visible){ transform:translateY(-3px); border-color:var(--edge-warm); box-shadow:var(--lift-2); }
.tile__hit{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.tile__hit:focus-visible{ outline-offset:-4px; }
.tile__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); }
.tile__label{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.tile__title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); letter-spacing:-0.022em; line-height:1.22; }
.tile__text{ color:var(--fg-soft); font-size:var(--fs-sm); }
.tile__foot{ margin-top:auto; padding-top:var(--s2); }

.tile--hi{ background:var(--surface-hi); }
.tile--cool{ background:var(--canvas-deep); border-color:color-mix(in srgb, var(--glacier-400) 58%, transparent); }
.tile--ink{ background:var(--ink-900); color:var(--fg-on-dark); border-color:var(--edge-dark); box-shadow:var(--lift-dark); }
.tile--ink .tile__title{ color:var(--fg-on-dark); }
.tile--ink .tile__text,.tile--ink .tile__label{ color:var(--fg-on-dark-soft); }
.tile--wine{ background:var(--wine-900); color:var(--fg-on-dark); border-color:color-mix(in srgb, var(--wine-400) 52%, transparent); box-shadow:var(--lift-dark); }
.tile--wine .tile__text{ color:var(--brand-tint-2); }
.tile--crimson{
  background:var(--accent); color:var(--surface-hi);
  border-color:color-mix(in srgb, var(--brand-burgundy) 60%, transparent);
  box-shadow:0 18px 40px -22px color-mix(in srgb, var(--brand-burgundy) 90%, transparent);
}
.tile--crimson .tile__title{ color:var(--surface-hi); }
.tile--crimson .tile__text{ color:color-mix(in srgb, var(--surface-hi) 88%, var(--brand-tint-2)); }
.tile--crimson:hover{ border-color:var(--surface-hi); }
.tile--flush{ padding:0; gap:0; }

/* grilajul discret pe dalele întunecate */
.tile--ink::after,.tile--wine::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--silver-50) 6%, transparent) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, color-mix(in srgb, var(--silver-50) 6%, transparent) var(--hair), transparent var(--hair));
  background-size:46px 46px;
}
.tile--ink > *,.tile--wine > *{ position:relative; z-index:1; }

/* media în dală */
.tile--media{ padding:0; }
.tile--media img{ width:100%; height:100%; object-fit:cover; }
.tile__caption{
  position:absolute; left:var(--s3); right:var(--s3); bottom:var(--s3); z-index:1;
  display:flex; align-items:center; gap:var(--s2);
  padding:0.45rem 0.8rem;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--silver-50) 88%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  border:var(--hair) solid color-mix(in srgb, var(--silver-50) 60%, transparent);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--ink-800);
}
.tile__caption svg{ width:12px; height:12px; color:var(--accent); flex:none; }

/* insignă / pastilă în interiorul dalelor */
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:0.32rem 0.7rem;
  border-radius:var(--r-pill);
  border:var(--hair) solid var(--edge);
  background:var(--surface-hi);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--fg-soft);
}
.chip svg{ width:12px; height:12px; color:var(--accent); }
.chip--onDark{ background:color-mix(in srgb, var(--silver-50) 10%, transparent); border-color:var(--edge-dark); color:var(--fg-on-dark-soft); }

/* glifa SVG a fiecărei dale */
.glyph{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge);
  background:var(--surface-hi);
  color:var(--accent);
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease), transform var(--t2) var(--ease-out);
}
.glyph svg{ width:20px; height:20px; }
.tile--live:hover .glyph{ background:var(--accent); color:var(--surface-hi); border-color:var(--accent); transform:rotate(-4deg); }
.glyph--onDark{ background:color-mix(in srgb, var(--silver-50) 9%, transparent); border-color:var(--edge-dark); color:var(--brand-tint-2); }

/* ---------- 06 · GRILA BENTO ---------- */
.bento{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); }

/* ---------- 07 · BARA DE SUS ---------- */
.topbar{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--canvas) 74%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  border-bottom:var(--hair) solid transparent;
  transition:border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.topbar.is-pinned{ border-bottom-color:var(--edge); background:color-mix(in srgb, var(--canvas) 92%, transparent); }
.topbar__bar{ height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.brandmark{ display:flex; align-items:center; gap:var(--s3); flex:none; min-width:0; }
.brandmark__logo{ height:38px; width:38px; flex:none; border-radius:var(--r-sm); transition:transform var(--t2) var(--ease-out); }
.brandmark:hover .brandmark__logo{ transform:scale(1.06); }
.brandmark__txt{ display:grid; line-height:1.14; min-width:0; }
.brandmark__name{ font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-0.02em; color:var(--ink-900); }
.brandmark__role{ font-size:var(--fs-mono); letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--fg-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.menu{ display:none; }
.menu__rail{
  display:flex; align-items:center; gap:2px;
  padding:4px;
  border-radius:var(--r-pill);
  border:var(--hair) solid var(--edge);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
}
.menu__link{
  display:block; padding:0.42rem 0.72rem;
  border-radius:var(--r-pill);
  font-size:0.8125rem; font-weight:600; color:var(--fg-soft);
  white-space:nowrap;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease);
}
.menu__link:hover{ background:var(--surface-hi); color:var(--ink-900); }
.menu__link[aria-current="true"]{ background:var(--ink-900); color:var(--fg-on-dark); }

.topbar__side{ display:flex; align-items:center; gap:var(--s3); flex:none; }
.led{
  display:none; align-items:center; gap:var(--s2);
  padding:0.36rem 0.72rem;
  border-radius:var(--r-pill);
  border:var(--hair) solid var(--edge);
  background:var(--surface);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--fg-soft);
}
.led__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--glacier-400); }
.led[data-open="true"] .led__dot{ background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.led[data-open="true"]{ color:var(--accent-text); border-color:var(--edge-warm); }
.topbar__cta{ display:none; }

.grip{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge);
  background:var(--surface);
  cursor:pointer;
  transition:background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.grip:hover{ border-color:var(--edge-warm); }
.grip__box{ width:18px; height:12px; position:relative; }
.grip__box i{ position:absolute; left:0; width:100%; height:1.6px; border-radius:2px; background:var(--ink-900); transition:transform var(--t2) var(--ease-out), opacity var(--t1) var(--ease); }
.grip__box i:nth-child(1){ top:0; }
.grip__box i:nth-child(2){ top:5.2px; }
.grip__box i:nth-child(3){ top:10.4px; }
.grip[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.2px) rotate(45deg); }
.grip[aria-expanded="true"] i:nth-child(2){ opacity:0; transform:scaleX(.3); }
.grip[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.2px) rotate(-45deg); }

/* sertar mobil — tot din dale */
.sheet{
  position:fixed; inset:var(--topbar-h) 0 0 0; z-index:110;
  background:color-mix(in srgb, var(--canvas) 97%, transparent);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  padding:var(--s5) var(--pad) var(--s7);
  overflow-y:auto;
  display:grid; align-content:start; gap:var(--gap);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease-out), visibility var(--t2);
}
.sheet.is-open{ opacity:1; visibility:visible; transform:none; }
.sheet__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.sheet__tile{
  display:grid; align-content:space-between; gap:var(--s5);
  min-height:96px;
  padding:var(--s4);
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge);
  background:var(--surface);
  box-shadow:var(--lift-1);
  transition:border-color var(--t2) var(--ease), transform var(--t2) var(--ease-out);
}
.sheet__tile:hover,.sheet__tile:focus-visible{ border-color:var(--edge-warm); transform:translateY(-2px); }
.sheet__tile:first-child{ grid-column:1 / -1; }
.sheet__n{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); color:var(--accent-text); }
.sheet__t{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-0.02em; }
.sheet__foot{ display:grid; gap:var(--s3); padding:var(--s5); border-radius:var(--r-tile); border:var(--hair) solid var(--edge-dark); background:var(--ink-900); color:var(--fg-on-dark); }
.sheet__foot a:not(.action){ color:var(--fg-on-dark-soft); font-size:var(--fs-sm); }
.sheet__foot a:not(.action):hover{ color:var(--brand-tint-2); }

@media (min-width:980px){
  .menu{ display:block; }
  .topbar__cta{ display:inline-flex; }
  .grip{ display:none; }
  .sheet{ display:none; }
}
/* 980–1179px: cele opt intrări încap doar strâns. Subtitlul mărcii dispare,
   link-urile și butonul se subțiază — ferestrele care nu sunt maximizate
   primesc tot macheta de desktop, nu sertarul de telefon. */
@media (min-width:980px) and (max-width:1179.98px){
  .brandmark__role{ display:none; }
  .menu__link{ padding:0.42rem; font-size:0.76rem; }
  .topbar__cta{ padding:0.56rem 0.9rem; font-size:0.8rem; }
  .topbar__cta svg{ width:13px; height:13px; }
}
@media (min-width:1380px){
  .led{ display:inline-flex; }
}

/* ---------- 08 · HERO (#acasa) — clusterul bento ---------- */
.hero{ padding-block:clamp(1.25rem,0.6rem + 2.4vw,2.5rem) 0; }
.bento--hero{ grid-template-areas: "id" "shot" "clock" "bar" "cta"; }
.tile--id{ grid-area:id; }
.tile--shot{ grid-area:shot; min-height:360px; }
.tile--clock{ grid-area:clock; }
.tile--bar{ grid-area:bar; }
.tile--cta{ grid-area:cta; }

@media (min-width:760px){
  .bento--hero{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas: "id    id    shot  shot" "bar   bar   shot  shot" "clock clock cta   cta"; grid-template-rows:auto auto auto; }
  .tile--shot{ min-height:0; }
}
@media (min-width:1080px){
  .bento--hero{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "id    id    id    id    shot shot"
      "id    id    id    id    shot shot"
      "bar   bar   clock clock cta  cta";
    grid-template-rows:minmax(0,1fr) auto auto;
    min-height:min(76vh,700px);
  }
}

.tile--id{ justify-content:space-between; gap:var(--s5); padding:clamp(1.25rem,0.8rem + 1.8vw,2.4rem); }
.tile--id h1{ font-size:var(--fs-mega); line-height:var(--lh-tight); letter-spacing:-0.045em; font-weight:300; }
.tile--id h1 b{ display:block; font-weight:700; color:var(--ink-900); }
.tile--id h1 span{ display:inline-flex; align-items:center; gap:0.35em; font-weight:300; color:var(--accent-text); }
.tile--id h1 span::before{ content:""; width:0.42em; height:0.42em; border-radius:3px; background:var(--accent); flex:none; }
.tile--id .intro{ max-width:48ch; }
.id__row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }

.tile--shot{ padding:0; } /* scena foto: vezi secțiunea 18 */

.tile--bar{ flex-direction:row; align-items:center; gap:var(--s4); }
.bar__txt{ display:grid; gap:2px; min-width:0; }
.bar__k{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.bar__v{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-0.02em; }

.clock__grid{ display:grid; gap:var(--s5); align-content:space-between; height:100%; }
.clock__now{
  display:flex; align-items:baseline; gap:var(--s2);
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.1rem,1.4rem + 2.2vw,3rem); line-height:1;
  letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums lining-nums;
}
.clock__now small{ font-family:var(--font-ui); font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.clock__state{ display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); font-weight:600; }
.clock__state .led__dot{ background:var(--glacier-400); flex:none; }
.clock[data-open="true"] .clock__state{ color:var(--accent-text); }
.clock[data-open="true"] .led__dot{ background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.clock__program{ font-size:var(--fs-sm); color:var(--fg-soft); }

.tile--cta{ justify-content:space-between; }
.tile--cta .cta__txt{ display:grid; gap:var(--s3); }
.tile--cta h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,1rem + 1vw,1.7rem); letter-spacing:-0.025em; line-height:1.16; }
.tile--cta p{ font-size:var(--fs-sm); color:color-mix(in srgb, var(--surface-hi) 90%, var(--brand-tint-2)); }
.tile--cta .action{ align-self:flex-start; }

/* CONTAINER QUERIES — dalele hero se rearanjează după propria lățime */
@container tile (min-width:420px){
  .clock__now small{ white-space:nowrap; }
  .bar__v{ font-size:1.2rem; }
}
@container tile (min-width:620px){
  /* abia de la 620px starea încape pe aceeași linie cu ora, fără să se rupă */
  .clock__grid{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); }
  .clock__grid > *{ min-width:0; }
  .clock__now{ flex:none; }
}
@container tile (min-width:560px){
  .tile--cta{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s5); }
  .tile--cta .action{ align-self:center; }
}

/* ---------- 09 · BARA DE ÎNCREDERE ---------- */
/* sub 480px „CONFIDENȚIALITATE" nu încape pe o jumătate de ecran — o coloană */
.bento--trust{ grid-template-columns:minmax(0,1fr); }
@media (min-width:480px){ .bento--trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .bento--trust{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile--metric{ gap:var(--s3); }
.metric__v{ color:var(--ink-900); }
.metric__k{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.tile--metric .glyph{ width:34px; height:34px; border-radius:var(--r-sm); }
.tile--metric .glyph svg{ width:17px; height:17px; }
@container tile (min-width:250px){
  .tile--metric{ flex-direction:row; align-items:center; gap:var(--s4); }
  .metric__txt{ display:grid; gap:2px; min-width:0; }
}
@container tile (min-width:340px){
  .tile--metric .metric__v{ font-size:clamp(2.2rem,1.4rem + 2vw,2.9rem); }
}

/* ---------- 10 · MISIUNE ---------- */
.bento--mission{ grid-template-areas: "text" "shot" "note" "wide"; }
.tile--mText{ grid-area:text; }
.tile--mShot{ grid-area:shot; min-height:320px; }
.tile--mNote{ grid-area:note; }
.tile--mWide{ grid-area:wide; min-height:200px; }
@media (min-width:760px){
  .bento--mission{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas: "text text shot shot" "note wide wide wide"; }
  .tile--mShot{ min-height:0; }
}
@media (min-width:1080px){
  .bento--mission{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-areas: "text text text text shot shot" "note note wide wide shot shot"; grid-template-rows:auto auto; }
}
.tile--mText{ gap:var(--s5); padding:clamp(1.25rem,0.8rem + 1.6vw,2.2rem); }
.tile--mText p{ max-width:62ch; }
.mission__split{ height:var(--hair); background:var(--edge); border:0; margin:0; }
.tile--mNote{ background:var(--canvas-deep); }
.tile--mNote .tile__title{ font-size:1.05rem; }

/* ---------- 11 · MOTTO ---------- */
.motto{ padding-block:0 var(--rack-y); }
.tile--motto{ align-items:center; text-align:center; gap:var(--s5); padding:clamp(2.25rem,1.2rem + 5vw,5rem) clamp(1.25rem,0.6rem + 3vw,3.5rem); }
.motto__mark{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge-dark);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  color:var(--brand-tint-2);
  font-family:var(--font-display); font-size:1.9rem; line-height:1;
  padding-top:0.5rem;
}
.tile--motto blockquote{ font-family:var(--font-display); font-weight:300; font-size:var(--fs-quote); line-height:1.05; letter-spacing:-0.045em; max-width:18ch; color:var(--fg-on-dark); }
.tile--motto blockquote em{ font-style:normal; color:var(--brand-tint-2); }
.tile--motto figcaption{
  display:flex; align-items:center; gap:var(--s3);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--fg-on-dark-soft);
}
.tile--motto figcaption::before,.tile--motto figcaption::after{ content:""; width:22px; height:var(--hair); background:var(--edge-dark); }

/* ---------- 12 · DOMENII DE PRACTICĂ ---------- */
.bento--practice{ grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){
  .bento--practice{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1180px){
  /* Trei coloane egale = două rânduri pline din exact șase domenii. Dalele
     late de tip span-2 lăsau AEGRM (o singură frază) întinsă pe un rând întreg. */
  .bento--practice{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.tile--area{ gap:var(--s4); min-height:210px; }
.area__body{ display:grid; gap:var(--s3); align-content:start; }
.area__n{ font-family:var(--font-display); font-weight:300; font-size:1rem; letter-spacing:0.06em; color:var(--glacier-600); font-variant-numeric:tabular-nums lining-nums; }
.tile--area:hover .area__n{ color:var(--accent); }
.area__title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); letter-spacing:-0.024em; line-height:1.2; }
.area__desc{ color:var(--fg-soft); font-size:var(--fs-sm); max-width:58ch; }
.area__arrow{
  margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--accent-text);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease-out);
}
.area__arrow svg{ width:13px; height:13px; }
.tile--area:hover .area__arrow,.tile--area:focus-within .area__arrow{ opacity:1; transform:none; }

/* CONTAINER QUERIES — dalele late (span 2) arată altfel decât cele înguste,
   la ACEEAȘI lățime de viewport. Asta e demonstrația conceptului. */
@container tile (min-width:430px){
  .tile--area{ min-height:240px; }
  .area__top{ display:flex; align-items:center; gap:var(--s4); }
  .area__title{ font-size:clamp(1.3rem,1.05rem + 0.9vw,1.85rem); }
  .area__desc{ font-size:var(--fs-body); }
  .tile--area .glyph{ width:48px; height:48px; }
  .tile--area .glyph svg{ width:24px; height:24px; }
  /* dalele largi au un subsol propriu, ca să nu se termine în gol */
  .area__arrow{ opacity:1; transform:none; }
}
@container tile (min-width:700px){
  .tile--area{ min-height:260px; }
  .area__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); align-items:start; }
  .area__desc{ max-width:none; }
}

/* ---------- 13 · PROCES ---------- */
.bento--flow{ grid-template-areas: "s1" "s2" "s3" "s4" "media"; }
.tile--s1{ grid-area:s1; } .tile--s2{ grid-area:s2; }
.tile--s3{ grid-area:s3; } .tile--s4{ grid-area:s4; }
.tile--fMedia{ grid-area:media; min-height:240px; }
@media (min-width:640px){
  .bento--flow{ grid-template-columns:1fr 1fr 1.05fr; grid-template-areas: "s1 s2 media" "s3 s4 media"; }
  .tile--fMedia{ min-height:0; }
}
@media (min-width:1080px){
  .bento--flow{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-areas: "s1 s1 s2 s2 media media" "s3 s3 s4 s4 media media"; }
  .tile--fMedia{ min-height:0; }
}
.tile--step{ gap:var(--s3); min-height:180px; }
.step__n{
  display:grid; place-items:center;
  width:44px; height:44px; flex:none;
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge);
  background:var(--surface-hi);
  font-family:var(--font-display); font-weight:500; font-size:1.05rem;
  color:var(--accent-text);
  font-variant-numeric:tabular-nums lining-nums;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.tile--step:hover .step__n{ background:var(--accent); color:var(--surface-hi); border-color:var(--accent); }
.step__title{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-0.022em; }
.step__desc{ color:var(--fg-soft); font-size:var(--fs-sm); }
.step__rail{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--edge); }
.step__rail::before{ content:""; display:block; height:100%; width:0; background:var(--accent); transition:width var(--t3) var(--ease-out); }
.tile--step:hover .step__rail::before{ width:100%; }
@container tile (min-width:380px){
  .tile--step{ min-height:150px; }
  .step__head{ display:flex; align-items:center; gap:var(--s4); }
  .step__title{ font-size:1.3rem; }
}
.tile--fMedia{ padding:0; } /* scena foto: vezi secțiunea 18 */

/* ---------- 14 · ÎNTREBĂRI FRECVENTE ---------- */
.bento--faq{ grid-template-areas: "q1" "q2" "q3" "q4" "aside" "media"; }
.tile--q1{ grid-area:q1; } .tile--q2{ grid-area:q2; }
.tile--q3{ grid-area:q3; } .tile--q4{ grid-area:q4; }
.tile--fqAside{ grid-area:aside; }
.tile--fqMedia{ grid-area:media; min-height:200px; }
@media (min-width:1080px){
  .bento--faq{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "q1 q1 q1 q1 aside aside"
      "q2 q2 q2 q2 aside aside"
      "q3 q3 q3 q3 media media"
      "q4 q4 q4 q4 media media";
    grid-template-rows:auto auto auto minmax(0,1fr);
  }
  .tile--fqMedia{ min-height:210px; }
  /* rândurile sunt înălțate de dalele din dreapta; întrebarea se așază la mijloc
     ca bara să nu pară goală */
  .tile--qa{ justify-content:center; }
}
.tile--qa{ padding:0; gap:0; }
.qa__toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:clamp(1rem,0.8rem + 0.7vw,1.45rem) clamp(1.05rem,0.7rem + 1.2vw,1.75rem);
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.02rem,0.96rem + 0.4vw,1.28rem);
  letter-spacing:-0.022em; line-height:1.28;
  color:var(--ink-900);
  transition:color var(--t1) var(--ease);
}
.qa__toggle:hover{ color:var(--accent-text); }
.qa__sign{
  position:relative; width:26px; height:26px; flex:none;
  border-radius:var(--r-sm);
  border:var(--hair) solid var(--edge);
  background:var(--surface-hi);
  transition:background var(--t2) var(--ease), border-color var(--t2) var(--ease), transform var(--t2) var(--ease-out);
}
.qa__sign::before,.qa__sign::after{
  content:""; position:absolute; top:50%; left:50%;
  width:11px; height:1.6px; border-radius:2px;
  background:var(--ink-900);
  transform:translate(-50%,-50%);
  transition:transform var(--t2) var(--ease-out), opacity var(--t1) var(--ease), background var(--t2) var(--ease);
}
.qa__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.qa__drop{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t2) var(--ease-out); }
.qa__drop > div{ overflow:hidden; }
.qa__drop p{ padding:0 clamp(1.05rem,0.7rem + 1.2vw,1.75rem) clamp(1rem,0.8rem + 0.7vw,1.45rem); color:var(--fg-soft); max-width:68ch; }
.qa__drop.is-open{ grid-template-rows:1fr; }
/* :has() — starea dalei este dedusă din starea butonului dinăuntru */
.tile--qa:has(.qa__toggle[aria-expanded="true"]){ background:var(--surface-hi); border-color:var(--edge-warm); box-shadow:var(--lift-2); }
.tile--qa:has(.qa__toggle[aria-expanded="true"]) .qa__toggle{ color:var(--accent-text); }
.tile--qa:has(.qa__toggle[aria-expanded="true"]) .qa__sign{ background:var(--accent); border-color:var(--accent); transform:rotate(180deg); }
.tile--qa:has(.qa__toggle[aria-expanded="true"]) .qa__sign::before,
.tile--qa:has(.qa__toggle[aria-expanded="true"]) .qa__sign::after{ background:var(--surface-hi); }
.tile--qa:has(.qa__toggle[aria-expanded="true"]) .qa__sign::after{ opacity:0; }
@container tile (min-width:600px){
  .qa__toggle{ font-size:clamp(1.12rem,1rem + 0.5vw,1.4rem); }
  .qa__sign{ width:30px; height:30px; }
}
.tile--fqAside{ background:var(--canvas-deep); gap:var(--s4); }
.tile--fqAside ul{ display:grid; gap:var(--s3); }
.tile--fqAside li{ display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-sm); }
.tile--fqAside li svg{ width:15px; height:15px; color:var(--accent); flex:none; }
.tile--fqMedia{ padding:0; } /* scena foto: vezi secțiunea 18 */

/* ---------- 15 · CONTACT ---------- */
.bento--contact{ grid-template-areas: "form" "info" "hours" "map"; }
.tile--form{ grid-area:form; }
.tile--info{ grid-area:info; }
.tile--hours{ grid-area:hours; }
.tile--map{ grid-area:map; min-height:220px; }
@media (min-width:760px){
  .bento--contact{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas: "form form form form" "info info hours hours" "map  map  map   map"; }
}
@media (min-width:1080px){
  .bento--contact{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "info  info  form form form form"
      "hours hours form form form form"
      "map   map   form form form form";
    grid-template-rows:auto auto minmax(140px,1fr);
  }
  .tile--map{ min-height:0; }
}
.tile--form{ gap:var(--s5); padding:clamp(1.25rem,0.8rem + 1.6vw,2.2rem); }
.tile--info{ gap:var(--s4); }
.coords{ display:grid; gap:var(--s3); }
.coords__row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:start; }
.coords__ico{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  border:var(--hair) solid var(--edge);
  background:var(--surface-hi);
  color:var(--accent);
}
.coords__ico svg{ width:15px; height:15px; }
.coords__k{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.coords__v{ font-weight:600; font-size:var(--fs-sm); }
.coords__v a{ border-bottom:var(--hair) solid var(--edge-strong); transition:color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.coords__v a:hover{ color:var(--accent-text); border-color:var(--accent); }
@container tile (min-width:360px){
  .coords{ gap:var(--s4); }
  .coords__v{ font-size:var(--fs-body); }
}
.tile--hours{ background:var(--canvas-deep); gap:var(--s3); }
.hours__list{ display:grid; gap:var(--s2); }
.hours__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding-block:var(--s2); border-top:var(--hair) solid var(--edge); font-size:var(--fs-sm); }
.hours__row:first-child{ border-top:0; }
.hours__row b{ font-weight:600; font-variant-numeric:tabular-nums; }
.hours__row[data-today="true"]{ color:var(--accent-text); }
.tile--map{ padding:0; } /* scena foto: vezi secțiunea 18 */

/* formular */
.wire{ display:grid; gap:var(--s5); }
.wire__pair{ display:grid; gap:var(--s5); }
@container tile (min-width:520px){
  .wire__pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.slot{ display:grid; gap:var(--s2); }
.slot__label{ display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-soft); }
.slot__label i{ font-style:normal; color:var(--accent); }
.slot input,.slot textarea{
  width:100%;
  padding:0.78rem 0.95rem;
  background:var(--surface-hi);
  border:var(--hair) solid var(--edge);
  border-radius:var(--r-md);
  font-size:var(--fs-body); color:var(--ink-900);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background var(--t2) var(--ease);
}
.slot textarea{ resize:vertical; min-height:132px; line-height:1.58; }
.slot input::placeholder,.slot textarea::placeholder{ color:var(--glacier-600); }
.slot input:focus,.slot textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* :has() — eticheta se aprinde când câmpul e activ */
.slot:has(input:focus) .slot__label,
.slot:has(textarea:focus) .slot__label{ color:var(--accent-text); }
.slot:has([aria-invalid="true"]) input,
.slot:has([aria-invalid="true"]) textarea{ border-color:var(--danger); background:var(--accent-wash); }
.slot__note{ font-size:var(--fs-xs); color:var(--danger); min-height:1em; font-weight:600; }

.consent{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3);
  align-items:start; cursor:pointer;
  padding:var(--s4);
  border-radius:var(--r-md);
  border:var(--hair) solid var(--edge);
  background:var(--canvas-deep);
  transition:border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.consent input{ position:absolute; opacity:0; width:1px; height:1px; }
.consent__box{
  width:20px; height:20px; margin-top:1px; flex:none;
  display:grid; place-items:center;
  border-radius:6px;
  border:var(--hair) solid var(--edge-strong);
  background:var(--surface-hi);
  transition:background var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.consent__box svg{ width:12px; height:12px; color:var(--surface-hi); opacity:0; transform:scale(.5); transition:opacity var(--t1) var(--ease), transform var(--t1) var(--ease-out); }
.consent:has(input:checked){ border-color:var(--edge-warm); background:var(--accent-wash); }
.consent:has(input:checked) .consent__box{ background:var(--accent); border-color:var(--accent); }
.consent:has(input:checked) .consent__box svg{ opacity:1; transform:none; }
.consent:has(input:focus-visible) .consent__box{ outline:2px solid var(--accent); outline-offset:3px; }
.consent__txt{ font-size:var(--fs-sm); color:var(--fg-soft); }
.consent__txt a{ color:var(--accent-text); font-weight:600; border-bottom:var(--hair) solid var(--edge-warm); }
.slot:has(> .consent[data-invalid="true"]) .slot__note{ min-height:1em; }
.consent[data-invalid="true"]{ border-color:var(--danger); }

.wire__send{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }
.wire__status{ font-size:var(--fs-sm); min-height:1.5em; font-weight:600; }
.wire__status[data-state="ok"]{ color:var(--success); }
.wire__status[data-state="err"]{ color:var(--danger); }

/* ---------- 16 · SUBSOL ---------- */
.baseboard{ padding-block:0 var(--s6); }
.bento--foot{ grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){
  .bento--foot{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tile--fBrand{ grid-column:span 2; }
}
@media (min-width:1080px){
  .bento--foot{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .tile--fBrand{ grid-column:span 3; }
}
.tile--fBrand{ gap:var(--s4); }
.fBrand__lockup{ display:flex; align-items:center; gap:var(--s4); }
.fBrand__logo{ height:52px; width:52px; flex:none; border-radius:var(--r-md); }
.fBrand__name{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-0.025em; line-height:1.2; color:var(--fg-on-dark); }
.fBrand__name span{ display:block; font-weight:300; font-size:0.85rem; letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--fg-on-dark-soft); }
.fList{ display:grid; gap:var(--s2); }
.fList a{ font-size:var(--fs-sm); color:var(--fg-soft); overflow-wrap:anywhere; transition:color var(--t1) var(--ease); }
.fList a:hover{ color:var(--accent-text); }
.tile--fLegal{ gap:var(--s3); }
.legalbar{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  justify-content:space-between; align-items:center;
  margin-top:var(--gap);
  padding:var(--s4) clamp(1.05rem,0.7rem + 1.2vw,1.75rem);
  border-radius:var(--r-tile);
  border:var(--hair) solid var(--edge);
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  font-size:var(--fs-xs); color:var(--fg-soft);
}
.legalbar ul{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.legalbar a{ border-bottom:var(--hair) solid transparent; transition:color var(--t1) var(--ease), border-color var(--t1) var(--ease); }
.legalbar a:hover{ color:var(--accent-text); border-color:var(--edge-warm); }
.privacy{ font-size:var(--fs-sm); color:var(--fg-soft); max-width:74ch; scroll-margin-top:calc(var(--topbar-h) + var(--s5)); }
.privacy strong{ color:var(--ink-900); }

/* ---------- 18 · SCENE FOTO — decupaje așezate în contexte din paletă ----------
   Fotografiile sunt decupaje WebP cu alpha (assets/foto/cut). Fiecare stă într-o
   scenă desenată din tokenii dalei: placă, arcadă, grilaj, lumină radială, pupitru.
   Se înclină CADRUL (placa), niciodată persoana. Portretele nu se afișează
   niciodată peste ~native/1.3 px ca să nu se înmoaie la 2x. */
.scene{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* 18.1 · HERO — portret în picioare, în oglindă (privește spre titlu), pe arcadă glacier */
.tile--shot{
  min-height:0; aspect-ratio:4 / 5;
  background:
    radial-gradient(64% 46% at 58% 26%, color-mix(in srgb, var(--surface-hi) 76%, transparent) 0%, transparent 72%),
    linear-gradient(168deg, var(--glacier-100) 0%, var(--glacier-200) 100%);
  isolation:isolate;
}
.tile--shot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--glacier-400) 30%, transparent) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, color-mix(in srgb, var(--glacier-400) 30%, transparent) var(--hair), transparent var(--hair));
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 30%, transparent 96%);
}
.shot__arch{
  position:absolute; z-index:0; left:50%; bottom:-4%;
  width:70%; height:78%;
  border-radius:999px 999px var(--r-tile) var(--r-tile);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-hi) 88%, transparent) 0%, color-mix(in srgb, var(--glacier-50) 72%, transparent) 100%);
  border:var(--hair) solid color-mix(in srgb, var(--surface-hi) 85%, transparent);
  box-shadow:var(--lift-2);
  transform:translateX(-44%) perspective(1100px) rotateY(-10deg);
  transform-origin:50% 100%;
}
.shot__arch::after{
  content:""; position:absolute; inset:-16px -16px 0 -16px;
  border-radius:inherit;
  border:var(--hair) solid color-mix(in srgb, var(--glacier-400) 60%, transparent);
  border-bottom:0;
}
.shot__tick{
  position:absolute; z-index:0; left:9%; top:9%;
  width:10px; height:10px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.tile--shot .shot__fig{
  position:absolute; z-index:1; left:54%; bottom:0;
  height:auto; width:auto; max-height:98%; max-width:min(384px, 94%);
  transform:translateX(-50%);
  filter:drop-shadow(0 26px 30px color-mix(in srgb, var(--glacier-800) 36%, transparent));
}
.tile--shot .tile__caption{ z-index:3; }
@media (min-width:760px){ .tile--shot{ aspect-ratio:auto; } }

/* 18.2 · MISIUNE — la birou: placă rotită (dală în dală) + pupitru care ascunde marginea decupajului */
.tile--mShot{
  --desk-h:clamp(56px, 10%, 76px);
  min-height:0; aspect-ratio:4 / 5;
  padding:0;
  background:var(--surface-hi);
  isolation:isolate;
}
.tile--mShot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, transparent 0 45px, color-mix(in srgb, var(--glacier-400) 30%, transparent) 45px 46px);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 90%);
  mask-image:linear-gradient(to bottom, #000, transparent 90%);
}
.mShot__plate{
  position:absolute; z-index:0; left:50%; top:14%;
  width:86%; aspect-ratio:1;
  border-radius:30%;
  background:linear-gradient(160deg, var(--glacier-100), var(--glacier-200));
  border:var(--hair) solid color-mix(in srgb, var(--glacier-400) 50%, transparent);
  box-shadow:var(--lift-1);
  transform:translateX(-50%) rotate(-6deg);
}
.tile--mShot .mShot__fig{
  position:absolute; z-index:1; left:50%; bottom:var(--desk-h);
  height:auto; width:auto; max-height:82%; max-width:min(487px, 118%);
  transform:translate(-50%, 6.5%);
  filter:drop-shadow(0 18px 22px color-mix(in srgb, var(--glacier-800) 30%, transparent));
}
.mShot__desk{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:var(--desk-h);
  background:linear-gradient(180deg, var(--glacier-200), var(--glacier-100));
  border-top:var(--hair) solid color-mix(in srgb, var(--glacier-600) 55%, transparent);
}
.mShot__desk::before{ content:""; position:absolute; left:0; top:-1px; width:38%; height:3px; background:var(--accent); border-radius:0 2px 2px 0; }
.tile--mShot .tile__caption{ z-index:3; }
@media (min-width:760px){ .tile--mShot{ aspect-ratio:auto; } }

/* 18.3 · MISIUNE — natură statică: cărțile ies din colțul stânga-sus, ciocănelul stă pe placă */
.tile--mWide{
  background:linear-gradient(150deg, var(--glacier-50) 0%, var(--glacier-100) 45%, var(--glacier-200) 100%);
  isolation:isolate;
}
.tile--mWide::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 70% at 22% 20%, color-mix(in srgb, var(--surface-hi) 82%, transparent), transparent 70%);
}
.mWide__plate{
  position:absolute; z-index:0; right:-8%; bottom:-26%;
  width:64%; height:74%;
  border-radius:var(--r-tile);
  background:color-mix(in srgb, var(--surface-hi) 58%, transparent);
  border:var(--hair) solid color-mix(in srgb, var(--surface-hi) 85%, transparent);
  box-shadow:var(--lift-1);
  transform:rotate(-3deg);
}
.tile--mWide .mWide__obj{
  position:absolute; z-index:1; left:-12%; top:-22%;
  width:150%; max-width:none; height:auto; object-fit:fill;
  filter:drop-shadow(0 14px 18px color-mix(in srgb, var(--glacier-800) 32%, transparent));
}
.tile--mWide .tile__caption{ z-index:3; }
@container tile (min-width:560px){
  .tile--mWide .mWide__obj{ width:auto; height:150%; left:2%; top:-26%; }
}

/* 18.4 · PROCES — consultație: bust pe dală bordo, lumină radială, cadru-fir înclinat */
.tile--fMedia{
  min-height:240px;
  background:var(--wine-900);
  isolation:isolate;
}
.tile--fMedia::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(54% 62% at 70% 40%, color-mix(in srgb, var(--wine-400) 72%, transparent) 0%, transparent 72%),
    radial-gradient(44% 44% at 12% 100%, color-mix(in srgb, var(--brand-burgundy) 46%, transparent) 0%, transparent 70%);
}
.tile--fMedia .fMedia__frame{
  position:absolute; z-index:0; inset:8% 9% -14% 9%;
  border-radius:var(--r-tile);
  border:var(--hair) solid color-mix(in srgb, var(--wine-400) 78%, transparent);
  transform:perspective(1000px) rotateY(8deg) rotate(-2deg);
  transform-origin:100% 100%;
}
.tile--fMedia .fMedia__fig{
  position:absolute; z-index:1; right:-2%; bottom:-2%;
  height:auto; width:auto; max-height:104%; max-width:min(408px, 82%);
  filter:drop-shadow(-10px 0 26px color-mix(in srgb, var(--wine-400) 60%, transparent))
         drop-shadow(0 18px 22px color-mix(in srgb, var(--wine-950) 70%, transparent));
}
.tile--fMedia .tile__caption{ z-index:3; }

/* 18.5 · ÎNTREBĂRI — ciocănel pe tavă rotită, iese prin marginea dreaptă */
.tile--fqMedia{
  background:var(--canvas-deep);
  isolation:isolate;
}
.tile--fqMedia::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 90% at 76% 40%, color-mix(in srgb, var(--surface-hi) 72%, transparent), transparent 70%);
}
.fqMedia__plate{
  position:absolute; z-index:0; left:7%; right:-5%; top:14%; bottom:12%;
  border-radius:var(--r-tile);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-hi) 72%, transparent), color-mix(in srgb, var(--glacier-100) 40%, transparent));
  border:var(--hair) solid color-mix(in srgb, var(--glacier-400) 45%, transparent);
  box-shadow:var(--lift-1);
  transform:rotate(-3deg);
}
.tile--fqMedia .fqMedia__obj{
  position:absolute; z-index:1; right:-5%; bottom:clamp(30px, 30%, 74px);
  width:min(84%, 500px); height:auto; max-width:none; object-fit:fill;
  transform:rotate(-6deg);
  transform-origin:70% 100%;
  filter:drop-shadow(0 16px 18px color-mix(in srgb, var(--glacier-800) 42%, transparent));
}
.tile--fqMedia .tile__caption{ z-index:3; right:auto; max-width:calc(100% - 2 * var(--s3)); }

/* 18.6 · CONTACT — la birou, pe grilaj tip hartă, cu reper crimson */
.tile--map{
  min-height:220px;
  background:var(--glacier-100);
  isolation:isolate;
}
.tile--map::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--glacier-400) 34%, transparent) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, color-mix(in srgb, var(--glacier-400) 34%, transparent) var(--hair), transparent var(--hair));
  background-size:46px 46px;
  background-position:14px 10px;
}
.map__plate{
  position:absolute; z-index:0; left:-8%; top:-18%;
  width:64%; height:96%;
  border-radius:var(--r-tile);
  background:color-mix(in srgb, var(--surface-hi) 62%, transparent);
  border:var(--hair) solid color-mix(in srgb, var(--surface-hi) 88%, transparent);
  transform:rotate(4deg);
}
.map__pin{
  position:absolute; z-index:0; left:22%; top:30%;
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
             0 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent);
}
.tile--map .map__fig{
  position:absolute; z-index:1; right:-4%; bottom:-1%;
  height:auto; width:auto; max-height:104%; max-width:min(453px, 80%);
  filter:drop-shadow(0 16px 20px color-mix(in srgb, var(--glacier-800) 32%, transparent));
}
.tile--map .tile__caption{ z-index:3; }

/* ==========================================================================
   19 · CONȚINUT EXTINS — preluat integral de pe simonajeflea.ro
   Liste de servicii pe domenii, parcurs profesional, documente, articole.
   ========================================================================== */

/* 19.1 · listele de servicii din dalele de practică */
.area__lead{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--fg-dim); line-height:1.45;
}
.area__list{ display:grid; gap:var(--s2); }
.area__list li{ position:relative; padding-left:1.05rem; font-size:var(--fs-sm); color:var(--fg-soft); line-height:1.5; }
.area__list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:5px; height:5px; border-radius:2px;
  background:var(--accent); opacity:.55;
  transition:opacity var(--t2) var(--ease);
}
.tile--area:hover .area__list li::before,
.tile--area:focus-within .area__list li::before{ opacity:1; }
@container tile (min-width:640px){
  .area__body{ row-gap:var(--s4); }
  .area__lead,.area__list{ grid-column:1 / -1; }
}

/* 19.2 · PARCURS PROFESIONAL (#parcurs) */
.bento--cv{ grid-template-areas:"bio" "shot" "edu" "xp" "note"; }
.tile--bio{ grid-area:bio; }
.tile--cvShot{ grid-area:shot; min-height:330px; padding:0; }
.tile--edu{ grid-area:edu; }
.tile--xp{ grid-area:xp; }
.tile--cvNote{ grid-area:note; }
@media (min-width:760px){
  .bento--cv{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:
      "bio  bio  shot shot"
      "edu  edu  xp   xp"
      "note note note note";
  }
  .tile--cvShot{ min-height:0; }
}
@media (min-width:1100px){
  .bento--cv{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "bio  bio  bio  bio  shot shot"
      "edu  edu  edu  xp   xp   xp"
      "note note note note note note";
  }
}
.cv__name{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);
  letter-spacing:-0.03em; line-height:1.14; color:var(--ink-900);
}
.cv__tags{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.cv__body{ display:grid; gap:var(--s4); }
.cv__body p{ color:var(--fg-soft); font-size:var(--fs-sm); max-width:82ch; }

/* linia de timp folosită la educație + experiență */
.rail{ position:relative; display:grid; gap:var(--s4); padding-left:1.6rem; }
.rail::before{ content:""; position:absolute; left:5px; top:0.7em; bottom:0.7em; width:var(--hair); background:color-mix(in srgb, var(--glacier-400) 52%, transparent); }
.rail li{ position:relative; display:grid; gap:1px; }
.rail li::before{
  content:""; position:absolute; left:-1.6rem; top:0.36em;
  width:9px; height:9px; border-radius:50%;
  background:var(--surface-hi); border:2px solid var(--accent);
}
.rail__k{ font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-0.02em; line-height:1.28; color:var(--ink-900); }
.rail__v{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--fg-soft); }

/* dala întunecată cu cele trei arii de expertiză completată */
.expertise{ display:grid; gap:var(--s5); }
@media (min-width:760px){ .expertise{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6); } }
.expertise li{ display:grid; align-content:start; gap:var(--s2); padding-left:var(--s4); border-left:2px solid var(--accent); }
.expertise b{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-0.022em; color:var(--fg-on-dark); }
.expertise span{ font-size:var(--fs-sm); color:var(--fg-on-dark-soft); }
.tile--ink .rail__k{ color:var(--fg-on-dark); }
.tile--ink .rail__v{ color:var(--fg-on-dark-soft); }

/* scena foto a secțiunii de parcurs */
.cvShot__plate{
  position:absolute; z-index:0; inset:12% 8% 0 10%;
  border-radius:var(--r-tile);
  background:linear-gradient(170deg, var(--glacier-100), var(--brand-tint));
  border:var(--hair) solid color-mix(in srgb, var(--surface-hi) 82%, transparent);
  transform:rotate(-3deg);
}
.cvShot__fig{
  position:absolute; z-index:1; left:50%; bottom:0;
  transform:translateX(-50%);
  height:auto; width:auto; max-height:98%; max-width:min(92%,420px);
  filter:drop-shadow(0 18px 22px color-mix(in srgb, var(--glacier-800) 34%, transparent));
}
.tile--cvShot .tile__caption{ z-index:3; }

/* 19.3 · DOCUMENTE (#documente) */
.bento--docs{ grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .bento--docs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .bento--docs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tile--doc{ gap:var(--s4); min-height:180px; }
.doc__title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-0.022em; line-height:1.32; }
.doc__meta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--fg-soft);
}
.doc__meta svg{ width:13px; height:13px; flex:none; color:var(--accent); transition:transform var(--t2) var(--ease-out); }
.tile--doc:hover .doc__meta{ color:var(--accent-text); }
.tile--doc:hover .doc__meta svg{ transform:translate(2px,-2px); }

/* 19.3b · pagini dedicate (documente, articole, confidențialitate) */
.crumb{ margin-block-end:var(--s5); }
.pageCta{
  margin-block-start:var(--gap);
  display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;
  gap:var(--s5) var(--s7);
}
.pageCta__copy{ display:grid; gap:var(--s3); max-width:62ch; }
.pageCta .tile__title{ color:var(--surface-hi); }
.pageCta .tile__text{ color:color-mix(in srgb, var(--surface-hi) 88%, var(--brand-tint-2)); }

/* 19.3c · politica de confidențialitate */
.bento--legal{ grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1080px){ .bento--legal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.legal{ gap:var(--s4); }
.legal--wide{ grid-column:1 / -1; }
.legal__h{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent-text); }
.legal__h--onDark{ color:var(--brand-tint-2); }
.legal__body{ display:grid; gap:var(--s4); font-size:var(--fs-sm); color:var(--fg-soft); max-width:92ch; }
.tile--ink .legal__body{ color:color-mix(in srgb, var(--fg-on-dark) 82%, transparent); }

/* 19.3 · ARTICOLE (#articole) */
.bento--posts{ grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .bento--posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1400px){ .bento--posts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tile--post{ gap:var(--s4); }
.tile--postWide{ grid-column:1 / -1; }
/* pe trei coloane dala lată ocupă doar două, ca să nu rămână rânduri ciobite */
@media (min-width:1400px){ .tile--postWide{ grid-column:span 2; } }
.post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.post__date{ font-size:var(--fs-mono); font-weight:700; letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--fg-soft); font-variant-numeric:lining-nums; }
.post__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.08rem,1rem + 0.5vw,1.38rem); letter-spacing:-0.026em; line-height:1.24; }
.post__text{ display:grid; gap:var(--s4); font-size:var(--fs-sm); color:var(--fg-soft); }
.post__foot{ margin-top:auto; padding-top:var(--s2); }
/* textul lung curge pe două coloane de ziar, nu pe rânduri de grid */
@media (min-width:1080px){
  .tile--postWide .post__text{ display:block; columns:2; column-gap:var(--s7); }
  .tile--postWide .post__text p{ break-inside:avoid; margin-block-end:var(--s4); }
  .tile--postWide .post__text p:last-child{ margin-block-end:0; }
}
/* rândul cu trimiterea spre pagina completă de articole */
.postsMore{ margin-block-start:var(--s6); display:flex; justify-content:center; }

/* ---------- 17 · APARIȚIE + REDUCED MOTION ---------- */
.has-js [data-rise]{ opacity:0; transform:translateY(16px) scale(.988); transition:opacity var(--t3) var(--ease-out), transform var(--t3) var(--ease-out); transition-delay:calc(var(--i,0) * 55ms); }
.has-js [data-rise].is-shown{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .has-js [data-rise]{ opacity:1 !important; transform:none !important; }
}