/* ============================================================
   SoftPrim Technology — „Atelier de inginerie, la lumina zilei"
   Temă luminoasă petrol · panouri petrol închis pentru demo-uri
   Semantică de culoare: petrol = brand/acțiune · verde = rulează
   · chihlimbar = atenție/alertă. Fără gradiente, fără glow.
   Sans: Geist · Mono: Geist Mono (self-hosted, variable)
   ============================================================ */

@font-face{
  font-family:'Geist';
  src:url('/assets/fonts/GeistVF.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('/assets/fonts/GeistMonoVF.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* suprafețe luminoase */
  --bg:oklch(0.9600 0.0080 215);
  --surface:oklch(0.9840 0.0045 215);
  --surface-2:oklch(0.9330 0.0120 215);
  --ink:oklch(0.2450 0.0400 230);
  --ink-muted:oklch(0.4300 0.0300 230);
  --hairline:oklch(0.8800 0.0140 218);
  --hairline-strong:oklch(0.7900 0.0200 220);

  /* brand: petrol închis */
  --brand:oklch(0.3600 0.0750 220);
  --brand-hover:oklch(0.3050 0.0750 220);
  --brand-ink:oklch(0.9700 0.0080 215);
  --brand-tint:oklch(0.9100 0.0250 218);

  /* panou petrol închis: consola, preview-uri, footer */
  --panel:oklch(0.2450 0.0450 230);
  --panel-2:oklch(0.2050 0.0400 230);
  --panel-ink:oklch(0.9400 0.0100 220);
  --panel-muted:oklch(0.7200 0.0300 225);
  --panel-line:oklch(0.3400 0.0450 228);

  /* semantică */
  --ok:oklch(0.7200 0.1500 158);        /* pe panou închis */
  --ok-deep:oklch(0.4600 0.1100 158);   /* pe fundal deschis */
  --warn:oklch(0.7800 0.1400 75);       /* pe panou închis */
  --warn-deep:oklch(0.5400 0.1200 62);  /* pe fundal deschis */
  --err:oklch(0.5200 0.1800 27);

  /* aliasuri (cookie banner + compat) */
  --bg-raised:var(--surface);
  --bg-sunken:var(--surface-2);
  --accent:var(--brand);
  --accent-hover:var(--brand-hover);
  --accent-ink:var(--brand-ink);

  --font-sans:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --radius:8px;
  --radius-sm:5px;
  --container:1160px;
  --space-section:clamp(68px, 9vw, 118px);

  --shadow-lift:0 10px 28px oklch(0.30 0.04 230 / 0.10);
  --shadow-panel:0 18px 44px oklch(0.28 0.04 230 / 0.16);

  --z-sticky:100;
  --z-modal-backdrop:200;
  --z-modal:210;
  --z-toast:300;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:92px }
html, body{ min-height:100% }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--brand); color:var(--brand-ink) }

h1,h2,h3{ text-wrap:balance; margin:0 }
p{ margin:0; text-wrap:pretty }
a{ color:var(--brand) }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--brand); color:var(--brand-ink);
  padding:10px 16px; font-weight:700; z-index:var(--z-toast);
}
.skip-link:focus{ left:0 }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:clamp(20px, 4vw, 36px);
}

/* dezvăluire la scroll — discretă (doar cu JS activ) */
body.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
body.js .reveal.in{ opacity:1; transform:none }
body.js .service-list .service:nth-child(2){ transition-delay:.06s }
body.js .service-list .service:nth-child(3){ transition-delay:.12s }
body.js .service-list .service:nth-child(4){ transition-delay:.18s }

/* intrare la încărcare (hero) */
.hero-copy > *{ animation:rise .6s cubic-bezier(.22,1,.36,1) both }
.hero-copy > *:nth-child(2){ animation-delay:.07s }
.hero-copy > *:nth-child(3){ animation-delay:.14s }
.hero-copy > *:nth-child(4){ animation-delay:.21s }
.hero-console{ animation:rise .7s .24s cubic-bezier(.22,1,.36,1) both }
@keyframes rise{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.stuck{ border-bottom-color:var(--hairline); box-shadow:0 8px 24px oklch(0.30 0.04 230 / 0.07) }
.site-header .bar{
  display:flex; align-items:center; gap:28px;
  padding-block:15px;
}
.wordmark{
  display:flex; align-items:center; gap:11px;
  font-weight:750; font-size:1.16rem; letter-spacing:-0.015em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.wordmark img{ width:32px; height:32px; border-radius:6px }
.wordmark span{ font-weight:450; color:var(--ink-muted) }
.site-nav{ display:flex; gap:26px; margin-left:auto }
.site-nav a{
  text-decoration:none; color:var(--ink-muted);
  font-size:.95rem; font-weight:500;
  transition:color .15s ease;
}
.site-nav a:hover{ color:var(--brand) }

/* ---------- Butoane ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 .97rem/1 var(--font-sans);
  padding:14px 24px;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px) }
.btn.primary{
  background:var(--brand); color:var(--brand-ink);
}
.btn.primary:hover{ background:var(--brand-hover); box-shadow:var(--shadow-lift) }
.btn.ghost{
  background:transparent; border-color:var(--hairline-strong); color:var(--ink);
}
.btn.ghost:hover{ border-color:var(--brand); color:var(--brand) }
/* butonul de atenție: un singur moment pe pagină, pe banda finală */
.btn.signal{
  background:var(--warn); color:oklch(0.24 0.05 70);
}
.btn.signal:hover{ background:oklch(0.8300 0.1350 78); box-shadow:0 10px 28px oklch(0.2 0.04 230 / 0.35) }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 11fr) minmax(0, 10fr);
  gap:clamp(40px, 6vw, 72px);
  align-items:center;
  padding-block:clamp(52px, 7.5vw, 96px);
}
.hero h1{
  font-size:clamp(2.4rem, 5.2vw, 3.9rem);
  font-weight:730;
  line-height:1.07;
  letter-spacing:-0.025em;
}
.hero h1 em{ font-style:normal; color:var(--brand) }
.hero .lead{
  margin-top:22px;
  font-size:clamp(1.05rem, 1.5vw, 1.17rem);
  line-height:1.7;
  color:var(--ink-muted);
  max-width:54ch;
}
.hero .cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:30px;
}
.hero-contact{
  margin-top:22px;
  font-family:var(--font-mono);
  font-size:.86rem;
  color:var(--ink-muted);
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.hero-contact a{
  color:var(--ink-muted); text-decoration:none;
  border-bottom:1px solid var(--hairline-strong);
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.hero-contact a:hover{ color:var(--brand); border-bottom-color:var(--brand) }

/* ---------- Consola (demo viu, panou petrol închis) ---------- */
.console{
  position:relative;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:.84rem;
  color:var(--panel-ink);
  box-shadow:var(--shadow-panel);
}
.console-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--panel-2);
  border-bottom:1px solid var(--panel-line);
}
.console-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ok); flex-shrink:0;
  animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.console-name{ color:var(--panel-muted); letter-spacing:.02em }
.console-live{
  margin-left:auto;
  font-size:.66rem; font-weight:600; letter-spacing:.09em;
  color:var(--ok);
  border:1px solid oklch(0.72 0.15 158 / 0.45);
  padding:3px 8px; border-radius:4px;
}
.console-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:12px 16px 0;
}
.console-tab{
  font:500 .78rem/1 var(--font-mono);
  letter-spacing:.02em;
  color:var(--panel-muted);
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  padding:7px 12px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.console-tab:hover{ color:var(--panel-ink); border-color:var(--panel-muted) }
.console-tab[aria-selected="true"]{
  color:var(--panel-2); font-weight:700;
  background:var(--panel-ink);
  border-color:var(--panel-ink);
}
.console-log{
  list-style:none; margin:0;
  padding:16px 16px 6px;
  min-height:182px;
}
.console-log li{
  display:flex; gap:14px;
  padding-block:4.5px;
  line-height:1.5;
}
.log-time{ color:var(--panel-muted); flex-shrink:0 }
.log-text{ color:var(--panel-ink); overflow-wrap:anywhere }
.log-text .ok{ color:var(--ok) }
.console-log .caret::after{
  content:''; display:inline-block;
  width:7px; height:14px; margin-left:6px;
  vertical-align:-2px;
  background:var(--ok);
  animation:caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink{ 50%{ opacity:0 } }
.console-result{
  margin:10px 16px 16px;
  padding:12px 14px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  color:var(--panel-ink);
  display:flex; flex-wrap:wrap; gap:6px 16px;
  min-height:20px;
}
.console-result .vs{ color:var(--panel-muted) }
.console-result strong{ font-weight:700; color:var(--ok) }

/* ---------- Bandă integrări ---------- */
.ticker{
  position:relative;
  border-block:1px solid var(--hairline);
  background:var(--surface);
  overflow:hidden;
  padding-block:14px;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track{
  display:flex; gap:48px; width:max-content;
  animation:marquee 40s linear infinite;
  font-family:var(--font-mono);
  font-size:.86rem; letter-spacing:.04em;
  color:var(--ink-muted);
  will-change:transform;
}
.ticker-track span{ display:flex; align-items:center; gap:48px; white-space:nowrap }
.ticker-track i{ font-style:normal; color:var(--hairline-strong) }
@keyframes marquee{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}
.ticker:hover .ticker-track{ animation-play-state:paused }

/* ---------- Secțiuni ---------- */
.section{ padding-block:var(--space-section) }
.section + .section{ padding-top:0 }
.section-head{ max-width:64ch; margin-bottom:clamp(32px, 5vw, 48px) }
.section-head h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.12;
}
.section-head p{
  margin-top:14px;
  color:var(--ink-muted);
  font-size:1.05rem;
}

/* ---------- Blueprint builder ---------- */
.blueprint-grid{
  display:grid;
  grid-template-columns:minmax(0, 10fr) minmax(0, 11fr);
  gap:clamp(28px, 4.5vw, 56px);
  align-items:start;
}
.bp-controls{
  display:grid; gap:26px;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(20px, 2.6vw, 30px);
}
.bp-controls fieldset{ border:none; margin:0; padding:0 }
.bp-controls legend{
  padding:0; margin-bottom:11px;
  font-size:.9rem; font-weight:650;
  color:var(--ink);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ position:relative }
.chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.chip span{
  display:inline-block;
  padding:9px 15px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  font-size:.92rem; font-weight:500;
  color:var(--ink-muted);
  background:var(--bg);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover span{ color:var(--ink); border-color:var(--brand) }
.chip input:checked + span{
  color:var(--brand-ink); font-weight:650;
  background:var(--brand);
  border-color:var(--brand);
}
.chip input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px }
.bp-doc{
  padding:18px 18px 8px;
  display:grid; gap:14px;
}
.bp-row{ display:grid; gap:4px }
.bp-key{
  font-size:.7rem; font-weight:600; letter-spacing:.09em;
  color:var(--warn); text-transform:uppercase;
}
.bp-val{ color:var(--panel-ink); line-height:1.55; overflow-wrap:anywhere }
.bp-val ol{ margin:2px 0 0; padding-left:20px; display:grid; gap:3px }
.bp-estimate{
  margin:14px 18px 0;
  padding:13px 15px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  line-height:1.55;
}
.bp-estimate strong{ font-weight:700; font-size:1.02rem; color:var(--ok) }
.bp-estimate small{ display:block; color:var(--panel-muted); font-size:.74rem; margin-top:3px }
.bp-actions{
  padding:16px 18px 18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
}
.bp-actions .btn.primary{
  background:var(--panel-ink); color:var(--panel-2);
}
.bp-actions .btn.primary:hover{ background:oklch(0.99 0.005 215); box-shadow:none }
.bp-actions .bp-note{
  font-family:var(--font-sans);
  font-size:.85rem; color:var(--panel-muted);
}
@media (prefers-reduced-motion: no-preference){
  .bp-doc.swap{ animation:bp-swap .3s cubic-bezier(.22,1,.36,1) }
  @keyframes bp-swap{
    from{ opacity:0; transform:translateY(5px) }
    to{ opacity:1; transform:none }
  }
}

/* ---------- Servicii ---------- */
.service-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.service{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(22px, 2.6vw, 30px);
  transition:border-color .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.service:hover{
  border-color:var(--hairline-strong);
  box-shadow:var(--shadow-lift);
  transform:translateY(-2px);
}
.service h3{
  font-size:1.28rem; font-weight:670;
  letter-spacing:-0.012em; line-height:1.22;
}
.service p{ margin-top:12px; color:var(--ink-muted) }
.service p strong{ color:var(--ink); font-weight:600 }
.service .svc-ex{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--brand);
  line-height:1.9;
}

/* ---------- Proces (secvență reală, numerotată) ---------- */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3.5vw, 44px);
}
.process-step{
  border-top:2px solid var(--brand);
  padding-top:20px;
}
.process-step .step-no{
  display:inline-block;
  font:650 .9rem/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--brand);
}
.process-step h3{
  margin-top:12px;
  font-size:1.18rem; font-weight:650;
}
.process-step p{
  margin-top:10px;
  color:var(--ink-muted);
  font-size:.97rem;
}
.process-note{
  margin-top:clamp(26px, 4vw, 40px);
  color:var(--ink-muted);
  font-size:.98rem;
  max-width:64ch;
}
.process-note strong{ color:var(--ink); font-weight:600 }

/* ---------- FAQ ---------- */
.faq-list{
  max-width:780px;
  display:grid; gap:10px;
}
.faq-list details{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  transition:border-color .2s ease;
}
.faq-list details:hover{ border-color:var(--hairline-strong) }
.faq-list details[open]{ border-color:var(--brand) }
.faq-list summary{
  list-style:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:17px 20px;
  font-size:1.06rem; font-weight:600;
  cursor:pointer;
}
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list summary .faq-marker{
  font-family:var(--font-mono);
  font-weight:400;
  color:var(--brand);
  flex-shrink:0;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.faq-list details[open] .faq-marker{ transform:rotate(45deg) }
.faq-list .faq-body{
  padding:0 20px 18px;
  color:var(--ink-muted);
  max-width:68ch;
}
.faq-list .faq-body a{ color:var(--brand) }

/* ---------- Banda finală de contact (panou petrol) ---------- */
.contact-cta{
  position:relative;
  text-align:center;
}
.contact-cta .band{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(48px, 7vw, 88px) clamp(24px, 5vw, 72px);
  box-shadow:var(--shadow-panel);
}
.contact-cta h2{
  font-size:clamp(1.95rem, 4.4vw, 3.2rem);
  font-weight:730;
  letter-spacing:-0.025em;
  line-height:1.08;
  max-width:22ch; margin-inline:auto;
  color:var(--panel-ink);
}
.contact-cta h2 em{ font-style:normal; color:var(--warn) }
.contact-cta .lead{
  margin:18px auto 0;
  color:var(--panel-muted);
  max-width:56ch;
  font-size:1.06rem;
}
.contact-cta .cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px;
  margin-top:32px;
}
.contact-cta .btn.ghost{
  border-color:var(--panel-line); color:var(--panel-ink);
}
.contact-cta .btn.ghost:hover{ border-color:var(--panel-muted); color:var(--panel-ink) }
.contact-mail{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:clamp(1rem, 2.2vw, 1.2rem);
}
.contact-mail a{
  color:var(--panel-ink); text-decoration:none;
  border-bottom:1px solid var(--panel-line);
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
.contact-mail a:hover{ color:var(--warn); border-bottom-color:var(--warn) }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--panel-2);
  color:var(--panel-muted);
}
.site-footer .inner{
  display:flex; flex-wrap:wrap; gap:20px 48px;
  justify-content:space-between;
  padding-block:34px 42px;
  font-size:.9rem;
}
.site-footer a{ color:var(--panel-muted); text-decoration:none; transition:color .15s ease }
.site-footer a:hover{ color:var(--panel-ink) }
.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 18px }
.footer-meta{ display:grid; gap:4px }

/* ---------- Modal ---------- */
.modal[aria-hidden="true"]{ display:none }
.modal[aria-hidden="false"]{
  position:fixed; inset:0; display:grid; place-items:center;
  z-index:var(--z-modal); padding:18px;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:oklch(0.20 0.04 230 / 0.55);
  z-index:var(--z-modal-backdrop);
}
.modal-card{
  position:relative; z-index:var(--z-modal);
  width:min(640px, 100%);
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-panel);
}
.modal-card h2{ font-size:1.5rem; font-weight:680; letter-spacing:-0.01em }
.modal-card > .muted{ margin-top:6px }
.modal-close{
  position:absolute; right:12px; top:10px;
  font-size:26px; line-height:1;
  border:none; background:transparent;
  color:var(--ink-muted); cursor:pointer;
  padding:6px 10px; border-radius:var(--radius-sm);
  transition:color .15s ease;
}
.modal-close:hover{ color:var(--ink) }

form{ margin-top:10px }
.field{ margin:16px 0 }
.field label{ display:block; margin-bottom:7px; font-weight:600; font-size:.95rem }
.field input, .field textarea{
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font:400 1rem/1.5 var(--font-sans);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-muted) }
.field input:focus, .field textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px oklch(0.36 0.075 220 / 0.18);
}
.checkbox{ display:flex; align-items:flex-start; gap:10px }
.checkbox input{ width:auto; margin-top:4px; accent-color:var(--brand) }
.checkbox label{ margin:0; font-weight:400; color:var(--ink-muted); font-size:.92rem }
.error{ color:var(--err); font-size:.86rem }
.actions{ display:flex; gap:12px; margin-top:18px; align-items:center; flex-wrap:wrap }
.form-status{ margin-top:12px; color:var(--ink-muted); font-size:.94rem }
.honeypot{ position:absolute; left:-10000px; visibility:hidden }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:18px; right:18px; z-index:var(--z-toast);
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--panel-ink);
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:.95rem;
  box-shadow:var(--shadow-panel);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.toast.show{ opacity:1; transform:none }

/* ---------- Pagini legale ---------- */
.legal-page{ max-width:840px; padding-block:clamp(40px,6vw,72px) }
.legal-page h1{
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  font-weight:720; letter-spacing:-0.02em;
}
.legal-page .updated{
  margin-top:10px;
  font-family:var(--font-mono); font-size:.82rem;
  color:var(--ink-muted);
}
.legal{ margin-top:28px }
.legal section{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  padding:6px 22px 20px; margin-block:14px;
}
.legal h2{ font-size:1.22rem; font-weight:650; margin:18px 0 10px }
.legal p, .legal div, .legal li{ color:var(--ink-muted); line-height:1.7 }
.legal strong{ color:var(--ink); font-weight:600 }
.legal a{ color:var(--brand) }
.legal ul{ margin:10px 0 0; padding-left:20px }
.muted{ color:var(--ink-muted) }

/* ---------- Pagina închisă (internship / 404) ---------- */
.closed-page{
  max-width:680px;
  padding-block:clamp(64px, 10vw, 130px);
}
.closed-page .status-line{
  font-family:var(--font-mono); font-size:.84rem;
  color:var(--ink-muted);
  display:flex; align-items:center; gap:10px;
}
.closed-page .status-line::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--warn-deep);
  flex-shrink:0;
}
.closed-page h1{
  margin-top:18px;
  font-size:clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight:720; letter-spacing:-0.02em; line-height:1.1;
}
.closed-page p{ margin-top:16px; color:var(--ink-muted); max-width:56ch }
.closed-page .cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }

/* ---------- Proiecte (portofoliu live) ---------- */
.projects-list{ display:grid }
.project{
  display:grid;
  grid-template-columns:minmax(0, 9fr) minmax(0, 11fr);
  gap:clamp(28px, 4.5vw, 60px);
  align-items:center;
  padding-block:clamp(30px, 4.5vw, 52px);
}
.projects-list .project:first-child{ padding-top:0 }
.project + .project{ border-top:1px solid var(--hairline) }
.project-flip .project-copy{ order:2 }
.project-flip .project-preview{ order:1 }

.project-type{
  font:600 .74rem/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted);
}
.project-name{
  margin-top:12px;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  font-weight:700; letter-spacing:-0.015em; line-height:1.15;
}
.project-desc{ margin-top:12px; color:var(--ink-muted); max-width:54ch }
.project-growth{ margin-top:14px; max-width:54ch }
.project-growth strong{ font-weight:700 }
.project-growth .growth{ color:var(--ok-deep) }
.project-facts{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--brand);
  line-height:1.9;
}
.project-news{
  margin-top:18px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  background:var(--surface);
  padding:14px 16px;
}
.project-news .news-head{
  display:flex; align-items:center; gap:8px;
  font:650 .72rem/1 var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ok-deep);
}
.news-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ok-deep);
  animation:pulse-dot 2.2s ease-in-out infinite;
}
.project-news ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px }
.project-news li{
  position:relative; padding-left:18px;
  font-size:.92rem; color:var(--ink-muted); line-height:1.5;
}
.project-news li::before{
  content:'▸'; position:absolute; left:0;
  font-family:var(--font-mono); color:var(--brand);
}
.project-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px;
  font-weight:600; font-size:.98rem;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hairline-strong);
  padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.project-link:hover{ color:var(--brand); border-bottom-color:var(--brand) }
.project-link span{ transition:transform .2s cubic-bezier(.22,1,.36,1) }
.project-link:hover span{ transform:translate(2px,-2px) }

/* rama de browser, ruda vizuală a consolei */
.browser{
  position:relative;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:.84rem;
  color:var(--panel-ink);
  box-shadow:var(--shadow-panel);
}
.browser-bar{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--panel-line);
}
.browser-dots{ display:flex; gap:6px; flex-shrink:0 }
.browser-dots i{ width:8px; height:8px; border-radius:50%; background:var(--panel-line) }
.browser-url{
  flex:1; min-width:0;
  text-align:center;
  padding:6px 14px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--panel-muted);
  text-decoration:none;
  font-size:.78rem; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .15s ease, border-color .15s ease;
}
.browser-url:hover{ color:var(--panel-ink); border-color:var(--panel-muted) }

/* preview SPM: monitor de prețuri */
.spm-board{ padding:12px 12px 14px }
.spm-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr);
  gap:10px; align-items:center;
  padding:7px 8px;
  border-radius:4px;
}
.spm-row.head .spm-cell{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--panel-muted);
}
.spm-row:not(.head) + .spm-row{ box-shadow:0 -1px 0 var(--panel-line) }
.spm-row.flash{ animation:spm-flash 1.2s ease-out }
@keyframes spm-flash{
  0%{ background:oklch(0.72 0.15 158 / 0.14) }
  100%{ background:transparent }
}
.spm-cell{ min-width:0 }
.spm-cell-prod{ color:var(--panel-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.spm-cell-tu{ color:var(--panel-muted) }
.spm-cell-conc{ color:var(--panel-ink) }
.spm-cell-pos{ font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.spm-cell-pos.ok{ color:var(--ok) }
.spm-cell-pos.warn{ color:var(--warn) }
.spm-alert{
  margin-top:12px;
  padding:11px 13px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  color:var(--panel-ink);
  font-size:.8rem; line-height:1.5;
}
.spm-alert .ok{ color:var(--ok) }
@media (prefers-reduced-motion: no-preference){
  .spm-alert.swap{ animation:bp-swap .3s cubic-bezier(.22,1,.36,1) }
}

/* preview Dinamic Electric: vitrină + graficul comenzilor */
.de-shop{ padding:12px 12px 14px }
.de-shop > div{ display:grid; gap:12px }
.de-top{ display:flex; align-items:center; gap:12px }
.de-brand{
  font-weight:700; font-size:.8rem; letter-spacing:.05em;
  color:var(--panel-ink); white-space:nowrap;
}
.de-brand b{ color:var(--warn); font-weight:700 }
.de-search{
  flex:1; min-width:0;
  padding:7px 12px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  color:var(--panel-muted);
  font-size:.74rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.de-cats{ display:flex; flex-wrap:wrap; gap:6px }
.de-cats span{
  font-size:.72rem;
  padding:5px 11px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  color:var(--panel-muted);
  white-space:nowrap;
}
.de-cats span:first-child{
  color:var(--panel-2); font-weight:700;
  background:var(--panel-ink);
  border-color:var(--panel-ink);
}
.de-chart{
  margin:0;
  padding:12px 12px 10px;
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
}
.de-chart figcaption{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--panel-muted);
  margin-bottom:8px;
}
.de-chart figcaption .src{ color:var(--panel-ink) }
.de-chart svg{ display:block; width:100%; height:auto }
.de-area{ fill:url(#deArea) }
.de-line{
  fill:none;
  stroke:oklch(0.72 0.15 158);
  stroke-width:2.5;
  stroke-linecap:round;
}
.de-dot-start{ fill:var(--panel-muted) }
.de-dot{ fill:oklch(0.72 0.15 158) }
/* linia se desenează când secțiunea intră în viewport (doar cu JS) */
body.js .de-line{ stroke-dasharray:420; stroke-dashoffset:420 }
body.js .project.in .de-line{ animation:de-draw 1.5s .25s cubic-bezier(.22,1,.36,1) forwards }
body.js .de-area, body.js .de-dot{ opacity:0 }
body.js .project.in .de-area{ animation:de-fade .8s 1.1s ease forwards }
body.js .project.in .de-dot{ animation:de-fade .4s 1.55s ease forwards }
@keyframes de-draw{ to{ stroke-dashoffset:0 } }
@keyframes de-fade{ to{ opacity:1 } }
.de-chart-labels{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:8px;
  font-size:.74rem;
}
.de-from{ color:var(--panel-muted) }
.de-to{ color:var(--ok); font-weight:700 }

/* ===== SoftPrim LiveChat preview ===== */
.lc-chat{ padding:12px }
.lc-chat > div{ display:grid; gap:10px }
.lc-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-2); border:1px solid var(--panel-line);
  border-radius:var(--radius-sm); padding:9px 12px;
}
.lc-title{ font-weight:700; font-size:.8rem; color:var(--panel-ink); letter-spacing:.02em }
.lc-status{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--panel-muted) }
.lc-status i{ width:7px; height:7px; border-radius:50%; background:var(--ok) }
.lc-msgs{ display:grid; gap:8px }
.lc-msg{
  max-width:78%; padding:8px 11px; border-radius:var(--radius-sm);
  font-size:.76rem; line-height:1.45; color:var(--panel-ink);
}
.lc-visitor{
  justify-self:end; background:var(--panel-ink); color:var(--panel-2);
  font-weight:550; border-bottom-right-radius:2px;
}
.lc-agent{
  justify-self:start; background:var(--panel-2);
  border:1px solid var(--panel-line); border-bottom-left-radius:2px;
}
.lc-agent-name{ display:block; font-size:.64rem; color:var(--panel-muted); margin-bottom:3px }
.lc-peek{
  font-size:.7rem; color:var(--panel-muted); font-style:italic;
  border:1px dashed var(--panel-line); border-radius:var(--radius-sm); padding:7px 10px;
}
.lc-peek-label{
  font-style:normal; font-size:.6rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--warn); margin-right:8px;
}
.lc-peek::after{ content:"▌"; color:var(--panel-muted); animation:lc-blink 1.1s steps(1) infinite }
@keyframes lc-blink{ 50%{ opacity:0 } }
.lc-inputbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-2); border:1px solid var(--panel-line);
  border-radius:var(--radius-sm); padding:8px 8px 8px 14px;
  font-size:.74rem; color:var(--panel-muted);
}
.lc-send{
  width:26px; height:26px; border-radius:var(--radius-sm);
  background:var(--panel-ink);
  position:relative;
}
.lc-send::before{
  content:"➤"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--panel-2); font-size:.66rem; font-style:normal;
}

/* previzualizare Oravo: widgetul de programare, în 3 pași */
.or-book{ padding:12px }
.or-book > div{ display:grid; gap:9px }
.or-head{
  display:flex; align-items:center; gap:9px;
  background:var(--panel-2); border:1px solid var(--panel-line);
  border-radius:var(--radius-sm); padding:9px 11px;
}
.or-av{
  width:28px; height:28px; border-radius:var(--radius-sm); flex:none;
  display:grid; place-items:center; font-size:.64rem; font-weight:700;
  background:var(--panel-ink); color:var(--panel-2);
}
.or-biz{ display:grid; line-height:1.3; min-width:0 }
.or-biz b{ font-size:.78rem; color:var(--panel-ink); font-weight:700 }
.or-biz small{ font-size:.66rem; color:var(--panel-muted) }
.or-open{
  margin-left:auto; font-size:.62rem; font-weight:650; white-space:nowrap;
  color:var(--ok); letter-spacing:.02em;
}
.or-step{ display:grid; gap:6px }
.or-label{
  font-size:.6rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em;
  color:var(--panel-muted);
}
.or-chips{ display:flex; flex-wrap:wrap; gap:6px }
.or-chip{
  font-size:.7rem; padding:6px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-line); color:var(--panel-ink); background:transparent;
}
/* slotul ales; „off" = oră deja rezervată, deci indisponibilă */
.or-chip.on{ background:var(--panel-ink); color:var(--panel-2); border-color:transparent; font-weight:650 }
.or-chip.off{ color:var(--panel-muted); opacity:.45; text-decoration:line-through }
.or-day{ display:grid; place-items:center; gap:1px; min-width:38px; padding:5px 8px; line-height:1.2 }
.or-day i{ font-style:normal; font-size:.8rem; font-weight:700 }
.or-confirm{
  text-align:center; font-size:.74rem; font-weight:650; padding:9px 12px;
  border-radius:var(--radius-sm); background:var(--panel-ink); color:var(--panel-2);
}
.or-sms{
  font-size:.68rem; color:var(--panel-muted); font-style:italic;
  border:1px dashed var(--panel-line); border-radius:var(--radius-sm); padding:7px 10px;
}
.or-sms-label{
  font-style:normal; font-size:.6rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ok); margin-right:8px;
}

/* al treilea proiect: lansare nouă, rând compact */
.project-mini{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:18px clamp(24px, 4vw, 56px);
  border-top:1px solid var(--hairline);
  padding-block:clamp(26px, 4vw, 44px);
}
.project-mini .project-mini-name{ margin-top:10px; font-size:1.35rem }
.project-mini-desc{ color:var(--ink-muted); font-size:.95rem; max-width:58ch }
.project-mini .project-link{ margin-top:0; white-space:nowrap }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero{ grid-template-columns:minmax(0,1fr); gap:44px; padding-block:40px 60px }
  .hero .lead{ max-width:60ch }
  .blueprint-grid{ grid-template-columns:minmax(0,1fr) }
  .service-list{ grid-template-columns:minmax(0,1fr) }
  .process-grid{ grid-template-columns:minmax(0,1fr); gap:28px }
  .project{ grid-template-columns:minmax(0,1fr); gap:26px; align-items:start }
  .project-flip .project-copy{ order:1 }
  .project-flip .project-preview{ order:2 }
  .project-mini{ grid-template-columns:minmax(0,1fr); gap:14px }
}
@media (max-width: 640px){
  .site-nav{ display:none }
  .console-log{ min-height:240px }
  .console-log li{ gap:10px }
  .modal-card{ padding:22px 18px }
  .spm-row{ grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr); gap:8px }
  .spm-cell-pos{ display:none }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .console-log .caret::after{ animation:none; opacity:1 }
  .ticker-track{ animation:none }
  body.js .reveal{ opacity:1; transform:none }
}
