/* pedometrul: obiectul e CSS pur, zero imagini in pagina. Fundal aproape negru, contrast > 7:1. */
:root {
  --fundal: #0b0b0c;
  --hirtie: #f2efe9;
  --stins: #b5b1a8;
  --linia: #26262a;
  --accent-lumina: #e8e4d8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fundal);
  color: var(--hirtie);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.15rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hirtie); text-underline-offset: 3px; }
.sare-la { position: absolute; left: -9999px; }
.sare-la:focus { left: 1rem; top: 1rem; background: var(--hirtie); color: var(--fundal); padding: .5rem 1rem; z-index: 100; }

.bara-sus { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; }
.brand { font-weight: 700; letter-spacing: .04em; }
.link-demo { color: var(--stins); font-size: .95rem; }

main { max-width: 62rem; margin: 0 auto; padding: 0 1.4rem 4rem; }

/* --- HERO --- */
.ero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; padding: 4rem 0 3rem; }
.ero h1 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; }
.linie-accent { border-bottom: 6px solid var(--accent-lumina); display: inline-block; }
.ero .sub { color: var(--stins); margin: 1rem 0 2rem; font-size: 1.25rem; }

.start { display: grid; gap: .7rem; max-width: 26rem; }
.eticheta { font-size: .95rem; color: var(--stins); letter-spacing: .02em; }
.linie-handle { display: flex; align-items: center; border: 1px solid var(--linia); border-radius: .6rem; background: #121214; }
.linie-handle .at { padding: .8rem .2rem .8rem 1rem; color: var(--stins); font-weight: 700; }
.linie-handle input { flex: 1; background: transparent; border: 0; color: var(--hirtie); font-size: 1.25rem; padding: .8rem 1rem .8rem .2rem; min-width: 0; }
.linie-handle:focus-within { border-color: var(--hirtie); outline: 2px solid var(--hirtie); outline-offset: 2px; }
input[type="email"], input[type="text"]#email { width: 100%; border: 1px solid var(--linia); border-radius: .6rem; background: #121214; color: var(--hirtie); font-size: 1.2rem; padding: .8rem 1rem; }
input:focus-visible { outline: 2px solid var(--hirtie); outline-offset: 2px; }

.buton-mare { margin-top: .4rem; background: var(--hirtie); color: var(--fundal); border: 0; border-radius: .6rem; padding: 1rem 1.6rem; font-size: 1.25rem; font-weight: 800; cursor: pointer; letter-spacing: .01em; }
.buton-mare:hover { transform: translateY(-1px); }
.buton-mare:focus-visible { outline: 3px solid var(--accent-lumina); outline-offset: 3px; }
.onest { color: var(--stins); font-size: .95rem; }
.eroare { color: #ff9a8a; font-size: .95rem; }

/* --- PEDOMETRUL (obiectul) --- */
.pedometru { display: grid; justify-items: center; gap: .8rem; }
.cadran {
  width: clamp(220px, 26vw, 300px); aspect-ratio: 1;
  border-radius: 50%;
  background: #121214;
  border: 3px solid #2c2c30;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 8px #0e0e10, inset 0 -14px 30px rgba(0,0,0,.7);
}
.tambur { position: absolute; inset: 22% 0; display: flex; justify-content: center; }
.coloana { height: 100%; overflow: hidden; width: .95em; font-size: clamp(3.4rem, 8vw, 4.6rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.coloana span { display: block; height: 1em; line-height: 1; text-align: center; color: var(--hirtie); }
.coloana { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.fanta { position: absolute; left: 8%; right: 8%; top: 47%; height: 2px; background: var(--accent-lumina); opacity: .5; }
.uri { display: flex; gap: .45rem; }
.uri span { width: 2rem; height: .5rem; border-radius: 4px; background: #26262a; }
.uri span.plin { background: var(--accent-lumina); }
.sub-cadran { color: var(--stins); font-size: 1rem; letter-spacing: .03em; }

/* --- PAȘII --- */
.pas { padding: 2.5rem 0; border-top: 1px solid var(--linia); }
.pas h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.4rem; }
.sub-pas { color: var(--stins); margin-bottom: .8rem; }
.grila-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.grila-op button {
  background: #121214; color: var(--hirtie); border: 1px solid var(--linia);
  border-radius: .6rem; padding: 1.1rem 1rem; font-size: 1.15rem; cursor: pointer; text-align: left;
}
.grila-op button:hover { border-color: var(--hirtie); transform: translateY(-1px); }
.grila-op button:focus-visible { outline: 3px solid var(--accent-lumina); outline-offset: 2px; }
.bife { border: 0; margin-top: 1.6rem; display: grid; gap: .6rem; }
.bifă { display: flex; gap: .6rem; align-items: flex-start; color: var(--hirtie); font-size: 1.05rem; }
.bifă input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--hirtie); }
.bifă a { color: var(--stins); }

/* --- SCORUL --- */
.scor { padding: 3rem 0; border-top: 1px solid var(--linia); }
.scor .pedometru { margin: 0 auto 1.6rem; }
.scor h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 2rem; }
.piloni { display: grid; gap: .8rem; margin-bottom: 2.4rem; }
.pilon { display: grid; grid-template-columns: 11rem 1fr 3.4rem; gap: .9rem; align-items: center; }
.pilon .nume { font-size: 1rem; color: var(--stins); }
.pilon .bara { height: .8rem; background: #1a1a1d; border-radius: 6px; overflow: hidden; }
.pilon .bara i { display: block; height: 100%; background: var(--accent-lumina); width: 0; transition: width 1s ease; }
.pilon .valoare { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.pilon .valoare small { color: var(--stins); font-weight: 400; }

.defecte { display: grid; gap: 1rem; margin-bottom: 2rem; }
.defect { border: 1px solid var(--linia); border-left: 4px solid var(--accent-lumina); border-radius: .6rem; padding: 1.1rem 1.2rem; background: #121214; }
.defect h4 { font-size: 1.05rem; margin-bottom: .3rem; }
.defect h4 small { color: var(--stins); font-weight: 400; }
.defect p { color: #d8d4cb; font-size: 1.05rem; }

.prima-miscare { border: 2px solid var(--accent-lumina); border-radius: .6rem; padding: 1.2rem 1.4rem; margin-bottom: 2.6rem; }
.prima-miscare h3 { margin-bottom: .3rem; letter-spacing: .02em; }
.prima-miscare p { font-size: 1.15rem; }

/* --- EMAIL GATE --- */
.gate-email { border-top: 1px solid var(--linia); padding-top: 2.4rem; }
.gate-email h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .5rem; }
.gate-email > p { color: var(--stins); margin-bottom: 1.6rem; max-width: 38rem; }
#form-lead { display: grid; gap: .8rem; max-width: 30rem; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
#gate-ok { margin-top: 1rem; color: var(--hirtie); font-size: 1.1rem; }

/* --- PICIOR --- */
.picior { border-top: 1px solid var(--linia); padding: 2rem 1.4rem 3rem; display: grid; gap: .6rem; max-width: 62rem; margin: 0 auto; color: var(--stins); font-size: .95rem; }

/* --- REVEAL PER SECTIUNE (P-K: per componenta, nu global) --- */
.reveala { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveala.vizibila { opacity: 1; transform: none; }

/* --- P-M: kill-switch sub 900px + mobil --- */
@media (max-width: 900px) {
  .ero { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 2rem; }
  .ero-obiect { order: -1; }
  .pedometru { display: none; }
  .bară-mica { display: flex; align-items: center; gap: .8rem; justify-content: center; font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: .6rem; border: 1px solid var(--linia); border-radius: .6rem; background: #121214; }
  .pilon { grid-template-columns: 8rem 1fr 3rem; }
}
@media (min-width: 901px) {
  .bară-mica { display: none; }
}

/* --- P-K: reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .coloana { transition: none; }
  .pilon .bara i { transition: none; }
  .reveala { opacity: 1; transform: none; transition: none; }
  .buton-mare:hover, .grila-op button:hover { transform: none; }
}