/* myservices.ro — v1
   Lumea vizuală: „fișa de audit" — hârtie rece, linii-hairline, mono pentru măsurători,
   un singur accent albastru-de-pix. Light implicit (se citește ziua, la birou/telefon);
   dark prin prefers-color-scheme. Fără fonturi externe (TODO: woff2 self-hostat). */

:root {
  --paper: #f7f8fa;
  --paper-raised: #ffffff;
  --ink: #14161c;
  --ink-soft: #4c5260;
  --line: #d9dde4;
  --line-strong: #b8bec9;
  --accent: #2b50c8;
  --accent-ink: #1d3da3;
  --cta: #c9430e;          /* roșu-portocaliu: contrast de nuanță cu paleta albastră — butonul SARE */
  --cta-hover: #b03a0c;
  --accent-contrast: #ffffff;
  --band-ink: #101623;      /* panoul închis (proces) */
  --band-paper: #e9ebf0;
  --bad: #b3261e;
  --ok: #1a7f4b;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --font-sans: "Rubik", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;  /* fontul referinței — clar, citeț, geometric */
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }  /* fallback; JS o setează EXACT la înălțimea barei */
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.7 var(--font-sans);   /* 4.12: text mare, curat — ca la referință */
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-contrast); }
img { max-width: 100%; }

.wrap { max-width: 1380px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.1; font-weight: 700; }  /* 4.12 raport ≥1.3 față de corp; 15.10: titlul folosește lățimea, fără coloană îngustă */
h3 { font-size: 22px; font-weight: 650; }
p { max-width: 68ch; }

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  line-height: 1.2;
  position: absolute; left: 12px; top: -72px; z-index: 100;
  background: var(--accent); color: var(--accent-contrast);
  padding: 10px 16px; border-radius: 6px; text-decoration: none;
  transition: top 150ms var(--ease);
}
.skip:focus-visible { top: 12px; }

/* ─── butoane ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  font: 650 19px/1 var(--font-sans);
  text-decoration: none;
  border: none;
  border-radius: 8px;
  padding: 15px 26px;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.btn-primary {
  background: var(--cta);
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cta) 70%, transparent);
}
.btn-primary:hover { background: var(--cta-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--cta); }
  .nav-links a:hover { color: var(--ink); }
}
.btn:active { transform: scale(0.98); }
.btn-small { padding: 11px 20px; font-size: 19px; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-small:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn-small:hover { border-color: var(--ink); }
}
.btn-block { width: 100%; }

/* ─── bara de sus ─────────────────────────────────────── */
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--paper-raised); cursor: pointer; place-items: center; }
.burger svg { display: block; }
.burger[aria-expanded="true"] .i-open { display: none; }
.burger:not([aria-expanded="true"]) .i-close { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo {
  font: 650 19px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.logo span { color: var(--accent-ink); }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 19px; color: var(--ink); text-decoration: none;
  transition: color 150ms var(--ease);
}

/* ─── hero ────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(52px, 9vh, 110px) clamp(48px, 7vh, 88px);
}
h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.028em;
}
.hero-sub { margin-top: 24px; font-size: 22px; color: var(--ink-soft); max-width: 54ch; }
.hero-cta { margin-top: 34px; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 26px; text-align: center;
  box-shadow: 0 22px 44px -34px rgba(16,22,35,.35); }
.hero-cta .cta-note { margin-inline: auto; }
.cta-note { margin-top: 14px; font-size: 19px; color: var(--ink); max-width: 50ch; }
.hero-strip {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  margin-top: 38px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 600 19px/1.5 var(--font-sans);
  color: var(--ink);
}
.hero-strip span:not(:last-child)::after { content: "·"; margin-inline: 12px; color: var(--accent-ink); }

/* fișa de audit */
.sheet {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 30px 24px;
  box-shadow: 0 24px 48px -32px rgba(16, 22, 35, 0.35);
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-strong);
}
.sheet-title { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.sheet-tag { font: 700 12px/1 var(--font-sans); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.sheet-rows { list-style: none; }
.sheet-rows li {
  display: grid;
  grid-template-columns: 1fr 84px 64px;
  gap: 16px; align-items: center;
  padding-block: 17px;
  border-bottom: 1px solid var(--line);
}
.cr { font-size: 16px; line-height: 1.4; }
.cr em { font-style: normal; color: var(--ink-soft); font-size: 12px; display: block; }
.score { display: block; height: 8px; border-radius: 3px; background: var(--band-paper); overflow: hidden; }
.score i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--w));
}
.val { font: 700 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.val em { font-style: normal; color: var(--ink-soft); }
.verdict-bad { color: var(--bad); }
.sheet-foot { padding-block: 14px 4px; }
.stamp { font: 700 16px/1.3 var(--font-sans); color: var(--accent-ink); }
.sheet-cap { margin-top: 10px; font-size: 16px; color: var(--ink-soft); line-height: 1.45; }

/* motion autorat: scorurile se completează la încărcare, în cascadă */
.score i { animation: fill 600ms var(--ease) backwards; }
.sheet-rows li:nth-child(1) .score i { animation-delay: 350ms; }
.sheet-rows li:nth-child(2) .score i { animation-delay: 430ms; }
.sheet-rows li:nth-child(3) .score i { animation-delay: 510ms; }
.sheet-rows li:nth-child(4) .score i { animation-delay: 590ms; }
@keyframes fill { from { transform: scaleX(0); } }

.rise { opacity: 0; transform: translateY(12px); animation: rise 280ms var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1 { animation-delay: 60ms; }
.d2 { animation-delay: 130ms; }
.d3 { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: fade 200ms ease forwards; transform: none; }
  .score i { animation: none; }
  @keyframes fade { to { opacity: 1; } }
}

/* ─── secțiuni ────────────────────────────────────────── */
.sec { padding-block: clamp(56px, 9vh, 104px); border-top: 1px solid var(--line); }
.sec-intro { margin-top: 18px; color: var(--ink-soft); }
.sec-close { margin-top: 34px; font-weight: 500; max-width: 62ch; }

/* simptomele — două coloane, citat + mecanism */
.symptoms {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin-top: 14px;
}
.symptoms li { padding-block: 26px; border-bottom: 1px solid var(--line); }
.symptoms blockquote {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.symptoms p { font-size: 19px; color: var(--ink-soft); }

/* serviciile — rânduri asimetrice: durerea | serviciul */
.services { margin-top: 10px; }
.svc {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: clamp(24px, 4vw, 64px);
  padding-block: 34px;
  border-bottom: 1px solid var(--line);
}
.svc:first-child { border-top: 1px solid var(--line); margin-top: 24px; }
.svc-pain blockquote {
  font-size: 22px;
  font-weight: 600; letter-spacing: -0.018em; line-height: 1.3;
  color: var(--ink);
  max-width: 20ch;
}
.svc-body h3 { font-size: 22px; margin-bottom: 10px; }
.svc-body h3::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--accent); margin-top: 10px;
}
.svc-body p { margin-top: 10px; color: var(--ink-soft); font-size: 19px; }
.svc-deliver { font: 500 16px/1.5 var(--font-sans); color: var(--ink); }

/* procesul — banda închisă (momentul de culoare committed) */
.proc-band {
  background: var(--band-ink);
  color: #e8eaf0;
  padding-block: clamp(56px, 9vh, 100px);
}
.proc-band h2 { color: #fff; }
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 40px;
}
.steps li { counter-increment: step; border-top: 1px solid #303a4d; padding-top: 18px; }
.steps li::before {
  content: counter(step);
  font: 700 16px/1 var(--font-sans);
  color: #9db1ff;
  display: inline-block;
  margin-bottom: 12px;
}
.steps h3 { color: #fff; margin-bottom: 8px; }
.steps p { font-size: 19px; color: #aeb6c6; }

/* mostrele */
.samples {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin-top: 16px;
}
.samples li { padding-block: 26px; border-bottom: 1px solid var(--line); }
.tag {
  display: inline-block;
  font: 700 12px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 5px 9px; border-radius: 4px;
  margin-bottom: 12px;
}
.tag-demo { background: var(--band-paper); color: var(--ink-soft); }
.tag-real { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.samples h3 { margin-bottom: 8px; }
.samples p { font-size: 19px; color: var(--ink-soft); }

/* despre */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: clamp(24px, 4vw, 64px);
  margin-top: 22px;
}
.about-lead { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; max-width: 24ch; }
.about-body p { color: var(--ink-soft); font-size: 19px; }
.about-body p + p { margin-top: 14px; font-weight: 500; color: var(--ink); }

/* faq */
.faq { margin-top: 22px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding-block: 18px;
  font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font: 400 22px/1 var(--font-sans);
  color: var(--accent-ink);
  transition: transform 180ms var(--ease);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--ink-soft); font-size: 19px; max-width: 64ch; }

/* cta final */
.cta-band {
  background: var(--accent);
  color: var(--accent-contrast);
  padding-block: clamp(56px, 9vh, 100px);
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.cta-copy h2 { color: inherit; max-width: 20ch; }
.cta-copy p { margin-top: 16px; color: color-mix(in srgb, var(--accent-contrast) 84%, var(--accent)); max-width: 44ch; }
.cta-alt a { color: inherit; font-weight: 600; }

.form {
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 28px 56px -36px rgba(10, 14, 24, 0.5);
}
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 16px; font-weight: 600; }
.field input, .field textarea {
  font: 400 19px/1.5 var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 150ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.field textarea { resize: vertical; }
.hint { font-size: 16px; color: var(--ink-soft); }
.form .btn-primary { margin-top: 4px; }
.form-note { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }
.form-note a { font-weight: 600; }

/* footer */
.foot { border-top: 1px solid var(--line); }
.foot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-block: 26px;
  font-size: 16px; color: var(--ink-soft);
}
.foot a { color: var(--ink-soft); }

/* ─── responsive ─────────────────────────────────────── */
@media (max-width: 920px) {
  .burger { display: grid; }
  .topbar-in { gap: 14px; }
  .nav-links { display: none; }
  .topbar.menu-open .nav-links { display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    background: var(--paper-raised); border-bottom: 1px solid var(--line);
    padding: 8px 20px 18px; gap: 16px; box-shadow: 0 24px 40px -28px rgba(16,22,35,.35); }
  .hero { grid-template-columns: 1fr; padding-block: 40px 56px; }
  .sheet { max-width: 560px; }
  .symptoms, .samples { grid-template-columns: 1fr; }
  .svc, .about-grid, .cta-grid { grid-template-columns: 1fr; gap: 18px; }
  .svc-pain blockquote, .about-lead { max-width: none; }
  .steps { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .nav-links { display: none; }
}
@media (max-width: 480px) {
  .btn { padding: 14px 20px; width: 100%; }
  .btn-small { width: auto; }
  .hero-cta, .sec-cta { padding: 24px 18px; }
  .sheet-rows li { grid-template-columns: 1fr 56px 52px; gap: 10px; }
}

/* v2 — secțiuni noi: povestea, pentru-cine, lista numerotată, promisiunea de răspuns */
.story-quote{border-left:3px solid var(--accent);padding:.35rem 0 .35rem 1rem;
  font-size:22px;font-style:italic;margin:1.1rem 0}
.who{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.4rem}
.who > div{border-top:2px solid var(--line,#d8d8d8);padding-top:1rem}
.who h3{margin:0 0 .7rem;font-size:19px}
.who ul{margin:0;padding:0;list-style:none}
.who li{padding:.45rem 0 .45rem 1.5rem;position:relative;border-bottom:1px solid var(--line,#e5e5e5)}
.who li:last-child{border-bottom:0}
.who-da li::before{content:"✓";position:absolute;left:0;color:var(--accent,#2b50c8);font-weight:700}
.who-nu li::before{content:"—";position:absolute;left:0;opacity:.55;font-weight:700}
.gains{counter-reset:g;margin:1.2rem 0 0;padding:0;list-style:none}
.gains li{counter-increment:g;position:relative;padding:.55rem 0 .55rem 2.4rem;
  border-bottom:1px solid var(--line,#e5e5e5)}
.gains li:last-child{border-bottom:0}
.gains li::before{content:counter(g);position:absolute;left:0;top:.5rem;width:1.6rem;height:1.6rem;
  display:grid;place-items:center;font-size:16px;font-weight:700;
  border:1.5px solid var(--accent,#2b50c8);border-radius:50%;color:var(--accent,#2b50c8)}
.reply-promise{font-size:16px;opacity:.85;margin-top:.6rem}
@media (max-width:700px){.who{grid-template-columns:1fr}}

/* v2.1 — vizual: miniaturi pentru mostre, monogramă la Despre, refren de butoane */
.samples li{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start}
.samples li .tag{grid-column:2}
.samples li h3,.samples li p{grid-column:2}
.thumb{grid-column:1;grid-row:1 / span 3;width:96px;height:120px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--paper-raised);
  box-shadow:0 10px 24px -16px rgba(16,22,35,.45);overflow:hidden}
.thumb svg{display:block;width:100%;height:100%}
.sec-cta{margin-top:48px;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:16px;padding:38px 30px;box-shadow:0 22px 44px -34px rgba(16,22,35,.35)}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font:700 24px/1 var(--font-sans);
  letter-spacing:-.02em;margin-bottom:14px;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (max-width:480px){.samples li{grid-template-columns:72px 1fr;gap:12px}
  .thumb{width:72px;height:92px}}

/* v2.2 — stratul vizual DIN CURS (4.12 formatarea, 8.1 hero, 4.11 CTA) */
/* marker de evidențiere pe ideile-cheie — echivalentul „făcut cu roșu/evidențiat" din 4.12 */
.hl{color:var(--accent-ink);font-weight:700}
.hl-cost{color:var(--bad);font-weight:650}
/* 4.11: CTA-ul reduce efortul perceput — microcopy imediat sub buton */
.btn-sub{margin-top:12px;font:600 19px/1.4 var(--font-sans);color:var(--ink)}
/* 8.1: banda descriptivă sub butonul de acțiune, pe TOATE ecranele */
.band-desc{margin-top:12px;font:500 16px/1.5 var(--font-sans);color:var(--ink-soft);
  border-top:1px dashed var(--line-strong);padding-top:9px;max-width:56ch}
.band-desc b{color:var(--accent-ink);font-weight:650}

/* v2.3 — back to top */
.totop{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;
  display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop svg{display:block}
@media (hover:hover) and (pointer:fine){.totop:hover{transform:translateY(-2px)}}
@media (max-width:480px){.totop{right:14px;bottom:14px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity 150ms ease}}

/* v2.4 — ritmul centrat validat pe Nordvik (obs. Dragos 12.08): titlurile de secțiune,
   închiderile și blocurile de CTA nu mai stau ancorate stânga cu spațiu mort în dreapta */
.sec > h2, .proc-band h2 { margin-inline: auto; text-align: center; }
.sec-intro, .sec-close { margin-inline: auto; text-align: center; }
.sec-cta { text-align: center; }
.sec-cta .btn-sub, .sec-cta .band-desc { margin-inline: auto; }
.about-grid { text-align: left; }   /* conținutul pe coloane rămâne la stânga */
.faq { text-align: left; }

/* v2.5 — culoare în scris, ca la referință (4.12: ideile-cheie marcate cu culoare) */
.acc{color:var(--accent-ink)}
.pain{color:var(--bad)}
h1 .acc, h2 .acc{font-weight:inherit}

/* v2.6 — sublinierea frazelor psihologice (4.12: bold/italic/subliniat, alternate) */
.u{text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:2px;text-underline-offset:4px}

/* v2.7 — pe banda albastră, numerele și liniile listei devin albe (erau accent-pe-accent, invizibile) */
.cta-band .gains li{border-color:rgba(255,255,255,.28)}
.cta-band .gains li::before{border-color:#fff;color:#fff}

/* v2.8 — headerul mobil pe tiparul standard: logo stânga, hamburger extrema dreaptă,
   NIMIC altceva în bară; CTA-ul se mută în meniul deschis (obs. Dragos 12.08) */
.menu-cta{display:none}
@media (max-width: 920px){
  .topbar .btn-small{display:none}
  .topbar.menu-open .nav-links .menu-cta{display:flex;width:100%;justify-content:center;margin-top:6px}
}