/* ============================================================================
   ETALON Data — foaie de stil comună
   Stil clasic-modern: titluri cu serifă, corp sobru, accent bordo ETALON.
   ============================================================================ */

:root{
  --paper:#FAFBFB; --card:#FFFFFF; --sunk:#F1F3F4;
  --ink:#15181B; --ink2:#3A4046; --muted:#6B7278; --faint:#9AA1A5;
  --rule:#E3E6E7; --rule2:#D2D6D8;
  --etalon:#7A2231; --etalon-l:#9E2D3F;
  --accent:#1F4E79;           /* albastru sobru pentru vizualizări de date */
  --accent-l:#3C7BB0;
  --good:#12614F;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.w{max-width:1080px; margin:0 auto; padding:0 28px}

h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.14; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(30px,5vw,52px); font-weight:700}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:20px}
p{margin:0}

.lbl{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--etalon)}

/* ── nav ───────────────────────────────────────────────────────────── */
nav{position:sticky; top:0; z-index:50; background:rgba(250,251,251,.88);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--rule)}
nav .in{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--serif);
  font-weight:700; font-size:20px; letter-spacing:.02em}
.brand svg{width:26px; height:26px; display:block}
.brand small{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase; margin-left:-4px}
.nl{display:flex; gap:26px}
.nl a{font-size:14.5px; color:var(--ink2); padding:6px 0; border-bottom:2px solid transparent}
.nl a:hover{color:var(--ink)}
.nl a.on{color:var(--ink); border-bottom-color:var(--etalon)}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--etalon); color:#fff;
  font-family:var(--sans); font-size:14px; font-weight:500; padding:10px 18px; border-radius:2px;
  border:1px solid var(--etalon); cursor:pointer; transition:.15s}
.btn:hover{background:var(--etalon-l); border-color:var(--etalon-l)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--ink); background:transparent}
.navtoggle{display:none}
.navright{display:flex; align-items:center; gap:20px}
.langsw{display:inline-flex; border:1px solid var(--rule2); border-radius:2px; overflow:hidden}
.langsw button{font-family:var(--mono); font-size:12px; letter-spacing:.06em; background:transparent;
  border:none; color:var(--muted); padding:6px 10px; cursor:pointer; transition:.12s}
.langsw button:hover{color:var(--ink)}
.langsw button.on{background:var(--etalon); color:#fff}
.langsw button + button{border-left:1px solid var(--rule2)}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{padding:62px 0 20px}
.hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.rule-top{width:46px; height:3px; background:var(--etalon); margin-bottom:20px}
.hero h1{margin-top:14px}
.lede{font-size:19px; line-height:1.55; color:var(--ink2); max-width:40ch; margin-top:18px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.sub{font-size:13.5px; color:var(--muted); margin-top:18px; max-width:46ch}

.portrait{position:relative}
.portrait img{width:100%; border-radius:3px; filter:grayscale(100%) contrast(1.02);
  border:1px solid var(--rule)}
.portrait .tag{position:absolute; left:-1px; bottom:22px; background:var(--card);
  border:1px solid var(--rule); border-left:3px solid var(--etalon);
  padding:10px 16px; max-width:76%}
.portrait .tag .nm{font-family:var(--serif); font-weight:700; font-size:16px}
.portrait .tag .rl{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; margin-top:2px}

/* ── facts strip ───────────────────────────────────────────────────── */
.facts{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--card); margin-top:34px}
.facts .g{display:grid; grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 24px; border-left:1px solid var(--rule)}
.fact:first-child{border-left:none; padding-left:0}
.fact .n{font-family:var(--serif); font-weight:700; font-size:21px}
.fact .t{font-size:13px; color:var(--muted); margin-top:5px; line-height:1.45}

/* ── sections ──────────────────────────────────────────────────────── */
section{padding:66px 0}
section.alt{background:var(--card); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.sh{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.sh .ln{flex:1; height:1px; background:var(--rule2)}
section > .w > h2{max-width:20ch}
.intro{font-size:17px; color:var(--ink2); max-width:62ch; margin-top:14px}

/* ── carduri servicii ──────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:36px}
.card{background:var(--card); padding:26px 24px; transition:.15s}
.card:hover{background:#fff}
.card .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--etalon)}
.card h3{margin:11px 0 9px}
.card p{font-size:14px; color:var(--muted); line-height:1.5}

/* ── stack tehnologic ──────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.chip{font-family:var(--mono); font-size:13px; color:var(--ink2); background:var(--card);
  border:1px solid var(--rule2); border-radius:2px; padding:8px 14px}
.chip b{color:var(--etalon); font-weight:600}

/* ── feature / vizualizări ─────────────────────────────────────────── */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; margin-top:40px}
.feature .tick{display:flex; gap:10px; margin-top:14px; font-size:14.5px; color:var(--ink2)}
.feature .tick i{color:var(--etalon); font-style:normal; font-weight:700}
.vizbox{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:22px}
.vizcap{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin-top:12px}

/* ── steps / cum lucrez ────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:34px}
.step .n{font-family:var(--mono); font-size:13px; color:var(--etalon); margin-bottom:10px}
.step h3{margin-bottom:8px}
.step p{font-size:14px; color:var(--muted); line-height:1.5}

/* ── bandă CTA ─────────────────────────────────────────────────────── */
.band{background:var(--ink); color:#fff; padding:52px 0}
.band .in{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.band h3{font-size:25px; color:#fff; max-width:24ch}
.band p{color:#B9BEC1; margin-top:8px; font-size:15px}
.band .btn{background:#fff; color:var(--ink); border-color:#fff}
.band .btn:hover{background:#EDEFF0; border-color:#EDEFF0}

/* ── contact ───────────────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:38px}
.cfield{border-top:1px solid var(--rule); padding:20px 0}
.cfield .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}
.cfield .v{font-size:19px; margin-top:6px; font-family:var(--serif); font-weight:600}
.cfield .v a{border-bottom:1px solid var(--rule2)}
.cfield .v a:hover{border-bottom-color:var(--etalon); color:var(--etalon)}

/* ── footer ────────────────────────────────────────────────────────── */
footer{background:#101315; color:#D6DADC; padding:46px 0 34px}
footer .in{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start}
footer .brand{color:#fff}
footer .brand small{color:#8F979D}
footer p.d{font-size:13px; color:#8F979D; max-width:40ch; margin-top:12px}
.fl{display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end}
.fl a{font-size:14px; color:#B9BEC1}
.fl a:hover{color:#fff}
.fine{grid-column:1/-1; border-top:1px solid #23282B; margin-top:26px; padding-top:18px;
  font-size:12px; color:#737A7E}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:820px){
  .hero .grid{grid-template-columns:1fr; gap:34px}
  .portrait{max-width:380px}
  .facts .g{grid-template-columns:repeat(2,1fr)}
  .fact{border-left:none; border-top:1px solid var(--rule); padding-left:0}
  .fact:nth-child(2){border-top:1px solid var(--rule)}
  .cards{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr; gap:26px}
  .steps{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr; gap:26px}
  footer .in{grid-template-columns:1fr}
  .fl{justify-content:flex-start}
  .nl{display:none}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .facts .g{grid-template-columns:1fr}
}