/* ============================================================
   O.V.E.P. — Sistem de design pentru prototipuri (content split)
   Doar alb / negru / gri · Inter · stil sobru, ușor Apple.
   Scop: ierarhie + spacing + consistență. Fără culori, fără brand.
   ============================================================ */

:root{
  /* Tipografie */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Cerneală & griuri (FĂRĂ culoare) */
  --ink:    #0b0b0c;            /* titluri, aproape negru */
  --text:   #2e2e30;            /* corp de text */
  --muted:  #6e6e73;            /* secundar */
  --faint:  #9a9aa0;            /* legende, surse */
  --line:   rgba(0,0,0,.07);    /* border foarte slab */
  --line-2: rgba(0,0,0,.11);    /* border la hover / mai vizibil */
  --bg:     #ffffff;
  --surface:#fafafa;            /* fundal de card foarte slab */
  --surface-2:#f4f4f5;
  --black:  #0b0b0c;

  /* Scară de spacing (bază 4px) — consistență */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Layout */
  --container:1080px;
  --narrow:720px;
  --pad-x: clamp(20px, 5vw, 32px);
  --section-y: clamp(72px, 9vw, 120px);

  /* Forme */
  --radius:18px;
  --radius-sm:12px;
  --pill:999px;
}

/* Reset */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-0.005em;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x)}
.narrow{max-width:var(--narrow)}
.section{padding-block:var(--section-y)}
.section--line{border-top:1px solid var(--line)}
.stack > * + *{margin-top:var(--s4)}
.stack-lg > * + *{margin-top:var(--s6)}

/* ---------- Tipografie & ierarhie ---------- */
h1,h2,h3,h4{color:var(--ink); font-weight:600; letter-spacing:-0.02em; line-height:1.12}
.display{
  font-size:clamp(2.4rem, 5.2vw, 3.9rem);
  font-weight:700; letter-spacing:-0.035em; line-height:1.04;
}
.h2{font-size:clamp(1.75rem, 3.2vw, 2.45rem); font-weight:600; letter-spacing:-0.025em; line-height:1.12}
.h3{font-size:1.18rem; font-weight:600; letter-spacing:-0.015em}
.eyebrow{
  font-size:.78rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; color:var(--muted); display:block;
}
.lead{
  font-size:clamp(1.08rem, 1.6vw, 1.28rem);
  color:var(--muted); line-height:1.55; font-weight:400; letter-spacing:-0.01em;
}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
p{margin:0}
.small{font-size:.9rem}

/* Header de secțiune (pattern repetat — consistență) */
.sec-head{max-width:62ch}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head .lead{margin-top:var(--s4)}
.sec-head + .sec-body{margin-top:var(--s8)}

/* ---------- Bara de prototip (indică cititorul) ---------- */
.proto-bar{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:.78rem; color:var(--muted); text-align:center; padding:.55em var(--pad-x);
  letter-spacing:.01em;
}
.proto-bar b{color:var(--ink); font-weight:600}

/* ---------- Navigație ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:700; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; font-size:1.02rem}
.brand span{color:var(--faint); font-weight:500}
.nav__links{display:flex; gap:var(--s6); list-style:none}
.nav__links a{color:var(--muted); text-decoration:none; font-size:.92rem; transition:color .2s}
.nav__links a:hover{color:var(--ink)}
@media(max-width:860px){ .nav__links{display:none} }

/* ---------- Butoane ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font:inherit; font-size:.95rem; font-weight:500; letter-spacing:-0.01em;
  padding:.72em 1.35em; border-radius:var(--pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:opacity .2s, background .2s, border-color .2s, gap .2s;
}
.btn--primary{background:var(--black); color:#fff}
.btn--primary:hover{opacity:.85}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface); border-color:var(--muted)}
.btn--link{padding:0; background:none; border:none; border-radius:0; color:var(--ink); font-weight:500}
.btn--link:hover{gap:.8em}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(52px,7vw,88px)}
.hero .display{max-width:15ch}
.hero .lead{max-width:48ch; margin-top:var(--s5)}
.hero .btn-row{margin-top:var(--s7)}

/* Chips de rezultat */
.chips{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em .9em; border:1px solid var(--line); border-radius:var(--pill);
  background:var(--surface); font-size:.85rem; color:var(--text);
}
.chip b{font-weight:600; color:var(--ink)}

/* ---------- Bară de încredere ---------- */
.trust{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s4) var(--s7)}
.trust__label{font-size:.78rem; color:var(--faint); text-transform:uppercase; letter-spacing:.11em}
.trust__list{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6)}
.trust__list span{color:var(--muted); font-size:.96rem; font-weight:500}

/* ---------- Grid & carduri ---------- */
.grid{display:grid; gap:var(--s4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s6); transition:border-color .2s, background .2s;
  text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--line-2); background:#fff}
.card .eyebrow{margin-bottom:var(--s4)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--muted); font-size:.98rem}
.card__more{margin-top:var(--s5)}

/* ---------- Statistici / dovezi ---------- */
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s6); display:flex; flex-direction:column;
}
.stat__num{font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; letter-spacing:-0.03em; color:var(--ink); line-height:1.02}
.stat__label{margin-top:var(--s3); color:var(--text); font-weight:500; font-size:1rem}
.stat__src{margin-top:auto; padding-top:var(--s5); color:var(--faint); font-size:.82rem}
.stat__src::before{content:""; display:block; height:1px; background:var(--line); margin-bottom:var(--s4)}

/* ---------- Pași ---------- */
.steps{display:grid; gap:var(--s6)}
.step{display:flex; gap:var(--s5); align-items:flex-start}
.step__n{
  flex:none; width:40px; height:40px; border-radius:var(--pill);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--ink); font-size:.95rem;
}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--muted)}

/* ---------- Split 2 coloane ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start}
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:var(--s7)} }

/* ---------- Listă cu marcaje sobre ---------- */
.ticks{list-style:none; display:grid; gap:var(--s3)}
.ticks li{position:relative; padding-left:1.6em; color:var(--muted)}
.ticks li::before{content:"—"; position:absolute; left:0; color:var(--faint)}

/* ---------- Dosar: rând de studiu ---------- */
.study{padding-block:var(--s6); border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--s6)}
.study:first-child{border-top:0}
@media(max-width:760px){ .study{grid-template-columns:1fr; gap:var(--s4)} }
.study__head .eyebrow{margin-bottom:var(--s3)}
.study__meta{color:var(--faint); font-size:.84rem; margin-top:var(--s3)}
.study dl{display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s5); font-size:.96rem}
.study dt{color:var(--faint)}
.study dd{color:var(--text)}

/* ---------- Callout / disclaimer ---------- */
.callout{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  padding:var(--s6); color:var(--muted); font-size:.96rem;
}
.callout strong{color:var(--ink)}

/* ---------- Marcaj de gol (date lipsă) ---------- */
.gap{color:var(--muted); border-bottom:1px dashed var(--line-2); white-space:nowrap}
.placeholder{
  border:1px dashed var(--line-2); border-radius:var(--radius);
  padding:var(--s6); color:var(--faint); font-size:.95rem; background:transparent;
}
.placeholder b{color:var(--muted); font-weight:600}

/* ---------- Formular ---------- */
.form{display:grid; gap:var(--s4); max-width:540px}
.field{display:grid; gap:var(--s2)}
.field label{font-size:.85rem; color:var(--muted); font-weight:500}
.field input, .field textarea{
  font:inherit; font-size:1rem; padding:.8em 1em;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); width:100%;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--ink)}
.field textarea{min-height:120px; resize:vertical}
.form .small{color:var(--faint)}

/* ---------- CTA centrat ---------- */
.cta{text-align:center}
.cta .h2{max-width:20ch; margin-inline:auto}
.cta .lead{max-width:48ch; margin:var(--s4) auto 0}
.cta .btn-row{margin-top:var(--s7); justify-content:center}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); padding-block:var(--s8); font-size:.92rem; color:var(--muted)}
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s6)}
@media(max-width:760px){ .footer__grid{grid-template-columns:1fr; gap:var(--s7)} }
.footer h4{font-size:.76rem; text-transform:uppercase; letter-spacing:.11em; color:var(--faint); margin-bottom:var(--s4); font-weight:600}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--ink)}
.footer__brand .brand{font-size:1.1rem}
.footer__legal{
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--faint); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
}

/* ---------- Index (hub prototipuri) ---------- */
.index-hero{padding-block:var(--s9) var(--s7)}
.index-card{display:flex; flex-direction:column; min-height:200px}
.index-card .tag{
  display:inline-block; font-size:.72rem; color:var(--muted); border:1px solid var(--line);
  border-radius:var(--pill); padding:.25em .7em; margin-bottom:var(--s4); align-self:flex-start;
}
.index-card .card__more{margin-top:auto}

/* ============================================================
   COMPONENTE SECȚIUNI (idei adaptate din catalogul Relume)
   header · logo · layout · stats · timeline · faq · cta/banner
   ============================================================ */

/* Header de secțiune centrat */
.sec-head--center{max-width:60ch; margin-inline:auto; text-align:center}
.sec-head--center .lead{margin-inline:auto}

/* Breadcrumb subpagini */
.crumbs{font-size:.85rem; color:var(--faint); margin-bottom:var(--s5)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* Hero de subpagină */
.pagehero{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,44px)}
.pagehero .display{max-width:18ch}
.pagehero .lead{max-width:56ch; margin-top:var(--s5)}

/* Logo strip (logo-*) */
.logos{text-align:center}
.logos__label{font-size:.8rem; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--s6)}
.logos__row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s6) var(--s8)}
.logos__row span{color:var(--muted); font-weight:500; font-size:1.05rem}

/* Layout 2 coloane: text + media (layout-*) */
.layout-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.layout-row + .layout-row{margin-top:clamp(48px,7vw,96px)}
.layout-row--rev .layout-row__media{order:-1}
@media(max-width:860px){
  .layout-row{grid-template-columns:1fr; gap:var(--s6)}
  .layout-row--rev .layout-row__media{order:0}
}

/* Media placeholder cu motiv de rezonanță (monocrom, fără imagini reale) */
.media{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); aspect-ratio:4/3; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.media::before{
  content:""; position:absolute; inset:-30%;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(0,0,0,.05) 21px 22px);
}
.media__tag{
  position:relative; font-size:.74rem; color:var(--faint); text-transform:uppercase; letter-spacing:.12em;
  background:var(--bg); padding:.45em .85em; border:1px solid var(--line); border-radius:var(--pill);
}
.media--wide{aspect-ratio:16/9}
.media--tall{aspect-ratio:3/4}
.media--ink{background:#0b0b0c; border-color:#0b0b0c}
.media--ink::before{background:repeating-radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(255,255,255,.07) 21px 22px)}
.media--ink .media__tag{background:#0b0b0c; color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.2)}

/* Stats band (stats-*) */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6)}
@media(max-width:760px){ .metrics{grid-template-columns:repeat(2,1fr); gap:var(--s7) var(--s5)} }
.metric__num{font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-0.03em; color:var(--ink); line-height:1}
.metric__label{margin-top:var(--s3); color:var(--muted); font-size:.95rem}

/* Card cu link (use-case / domeniu) */
.card--link{display:flex; flex-direction:column}
.card--link .card__more{margin-top:auto; padding-top:var(--s5)}
.card__kicker{font-size:.78rem; font-weight:600; color:var(--faint); letter-spacing:.04em; margin-bottom:var(--s3)}

/* Timeline / proces (timeline-*) */
.timeline{display:grid}
.tl{display:grid; grid-template-columns:auto 1fr; gap:var(--s5)}
.tl__rail{display:flex; flex-direction:column; align-items:center}
.tl__dot{
  flex:none; width:42px; height:42px; border-radius:var(--pill); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--ink); background:var(--bg);
}
.tl__line{width:1px; flex:1; background:var(--line); margin:var(--s2) 0}
.tl:last-child .tl__line{display:none}
.tl__body{padding-bottom:var(--s7)}
.tl:last-child .tl__body{padding-bottom:0}
.tl__body h3{margin-bottom:var(--s2)}
.tl__body p{color:var(--muted)}

/* FAQ (faq-*) */
.faq{border-top:1px solid var(--line); max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s5) 0; display:flex; justify-content:space-between;
  gap:var(--s4); align-items:center; font-weight:600; color:var(--ink); font-size:1.06rem; letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; font-size:1.5rem; color:var(--muted); line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq__a{padding:0 0 var(--s5); color:var(--muted); max-width:72ch}

/* Banner / CTA full-width (cta-* / banner-*) */
.banner{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  padding:clamp(36px,6vw,72px); text-align:center;
}
.banner .h2{max-width:22ch; margin-inline:auto}
.banner .lead{max-width:50ch; margin:var(--s4) auto 0}
.banner .btn-row{justify-content:center; margin-top:var(--s7)}
.banner--ink{background:#0b0b0c; border-color:#0b0b0c}
.banner--ink .h2{color:#fff}
.banner--ink .eyebrow{color:rgba(255,255,255,.6)}
.banner--ink .lead{color:rgba(255,255,255,.7)}
.banner--ink .btn--primary{background:#fff; color:#0b0b0c}
.banner--ink .btn--ghost{border-color:rgba(255,255,255,.28); color:#fff}
.banner--ink .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* Quote / testimonial (testimonial-*) */
.quote{max-width:880px; margin-inline:auto; text-align:center}
.quote__text{font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:500; letter-spacing:-0.02em; color:var(--ink); line-height:1.3}
.quote__who{margin-top:var(--s6); color:var(--muted); font-size:.95rem}