/* ==========================================================================
   KYPRAX — sistem de stiluri
   Culori: Brand-Kit-v5.8 (brand-tokens.css + brand-project.json).
   Tipografie: sans de sistem pentru text de corp, IBM Plex Mono pentru
   etichete, cifre si accente — mono la dimensiune de corp obeseste ochiul.
   ========================================================================== */

@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-Light.woff2") format("woff2");
             font-weight:300; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
             font-weight:500; font-display:swap; }

:root {
  /* paleta bruta a brandului */
  --ink:#0A0A0B; --paper:#F7F7F5; --sage:#A8B6A2; --deep-sage:#506451;
  --signal-sage:#C7D1C2; --pine:#263A2B; --sage-mist:#EEF2EB; --steel:#6C727A;
  --night:#171C18; --carbon:#222824; --iron:#2D342F; --graphite:#39413B;

  /* roluri — tema deschisa */
  --bg:#F7F7F5; --sunk:#EEF2EB; --panel:#FFFFFF; --panel-2:#FBFCFA;
  --fg:#0A0A0B; --fg-soft:#3E4740; --fg-mut:#6C727A;
  --rule:#DFE4DA; --rule-hi:#C6CEBF;
  --acc:#506451; --acc-deep:#3B4C3D; --acc-wash:#E7EDE4; --on-acc:#F7F7F5;
  --lift:0 1px 1px rgba(10,10,11,.04), 0 10px 26px -18px rgba(10,10,11,.28);
  --lift-hi:0 2px 4px rgba(10,10,11,.05), 0 22px 46px -24px rgba(10,10,11,.40);

  --sans:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,
         system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;

  --page:1140px;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0C0F0D; --sunk:#101413; --panel:#161B18; --panel-2:#1A211C;
    --fg:#EDF1EA; --fg-soft:#A9B3A6; --fg-mut:#79836F;
    --rule:#212823; --rule-hi:#30392F;
    --acc:#C7D1C2; --acc-deep:#DDE5D9; --acc-wash:#1B241C; --on-acc:#0C0F0D;
    --lift:0 1px 2px rgba(0,0,0,.6), 0 12px 30px -20px rgba(0,0,0,.9);
    --lift-hi:0 2px 6px rgba(0,0,0,.7), 0 26px 52px -26px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"] {
  --bg:#0C0F0D; --sunk:#101413; --panel:#161B18; --panel-2:#1A211C;
  --fg:#EDF1EA; --fg-soft:#A9B3A6; --fg-mut:#79836F;
  --rule:#212823; --rule-hi:#30392F;
  --acc:#C7D1C2; --acc-deep:#DDE5D9; --acc-wash:#1B241C; --on-acc:#0C0F0D;
  --lift:0 1px 2px rgba(0,0,0,.6), 0 12px 30px -20px rgba(0,0,0,.9);
  --lift-hi:0 2px 6px rgba(0,0,0,.7), 0 26px 52px -26px rgba(0,0,0,1);
}

/* --- baza ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; }
h1,h2,h3,h4 { text-wrap:balance; margin:0 0 18px; }
h1 { font-size:clamp(38px,5.4vw,64px); line-height:1.02; font-weight:680; letter-spacing:-.038em; }
h2 { font-size:clamp(29px,3.9vw,45px); line-height:1.06; font-weight:665; letter-spacing:-.032em; }
h3 { font-size:20px; line-height:1.3; font-weight:650; letter-spacing:-.016em; margin-bottom:10px; }
h4 { font-size:16px; font-weight:640; letter-spacing:-.01em; margin-bottom:8px; }
p { margin:0 0 16px; color:var(--fg-soft); max-width:62ch; }
p:last-child { margin-bottom:0; }
strong { color:var(--fg); font-weight:650; }
a { color:var(--acc-deep); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; border-radius:3px; }
.num { font-variant-numeric:tabular-nums; font-family:var(--mono); }

.wrap { max-width:var(--page); margin-inline:auto; padding-inline:28px; }
.narrow { max-width:900px; }
section { padding-block:104px; }
@media (max-width:760px) { section { padding-block:68px; } }
.tint { background:var(--sunk); border-block:1px solid var(--rule); }

.eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc-deep); margin:0 0 18px;
  display:flex; align-items:center; gap:11px;
}
.eyebrow::after { content:""; flex:1; height:1px; background:var(--rule); max-width:120px; }
.lede { font-size:19.5px; line-height:1.5; color:var(--fg-soft); max-width:58ch; }
.mut { color:var(--fg-mut); }

/* --- antet --------------------------------------------------------------- */
header.site {
  position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--rule);
}
.hd { max-width:var(--page); margin-inline:auto; padding:12px 28px; display:flex; align-items:center; gap:12px; }
.hd .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.hd .brand img { height:26px; width:auto; display:block; }
.hd nav { margin-left:auto; display:flex; gap:22px; align-items:center; }
.hd nav a { font-size:14.5px; color:var(--fg-soft); text-decoration:none; }
.hd nav a:hover, .hd nav a[aria-current="page"] { color:var(--fg); }
@media (max-width:820px) { .hd nav a.opt { display:none; } }
.mk-dk { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .mk-lt { display:none; }
  :root:not([data-theme="light"]) .mk-dk { display:block; }
}
:root[data-theme="dark"] .mk-lt { display:none; }
:root[data-theme="dark"] .mk-dk { display:block; }

.tbtn { background:transparent; border:1px solid var(--rule-hi); color:var(--fg-mut);
        font:inherit; font-size:12px; padding:5px 9px; border-radius:5px; cursor:pointer; line-height:1; }
.tbtn:hover { color:var(--acc-deep); border-color:var(--acc); }

/* --- butoane ------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:620;
       text-decoration:none; padding:11px 20px; border-radius:6px; border:1px solid transparent;
       background:var(--acc); color:var(--on-acc); transition:filter .15s, transform .15s; }
.btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--acc-deep); border-color:var(--rule-hi); }
.btn.ghost:hover { border-color:var(--acc); filter:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* --- erou intunecat ------------------------------------------------------ */
.hero { background:var(--pine); color:#EDF1EA; overflow:hidden; position:relative; }
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right,rgba(199,209,194,.09) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(199,209,194,.09) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 75% 70% at 75% 10%,#000,transparent 72%);
}
.hero .split { display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center;
               min-height:520px; position:relative; }
@media (max-width:980px) { .hero .split { grid-template-columns:1fr; gap:40px; min-height:0; } }
.hero .txt { padding-block:96px; }
@media (max-width:980px) { .hero .txt { padding-block:64px 0; } }
.hero h1 { color:#F4F8F2; }
.hero .eyebrow { color:var(--signal-sage); }
.hero .eyebrow::after { background:rgba(199,209,194,.22); }
.hero .lede { color:#BCC7B8; }
.hero .btn { background:var(--signal-sage); color:var(--pine); }
.hero .btn.ghost { background:transparent; color:#DDE5D9; border-color:rgba(199,209,194,.32); }
.hero .art { display:flex; align-items:center; justify-content:center; padding-block:40px; }
@media (max-width:980px) { .hero .art { padding-block:0 56px; } }

/* --- carduri ------------------------------------------------------------- */
.grid { display:grid; gap:22px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:12px;
        padding:28px; box-shadow:var(--lift); transition:box-shadow .2s, transform .2s; }
.card:hover { box-shadow:var(--lift-hi); transform:translateY(-2px); }
.card p { font-size:15.5px; }
.card .tag { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
             color:var(--fg-mut); display:block; margin-bottom:14px; }

.plain h3 { margin-bottom:8px; }
.plain p { font-size:15.5px; }

/* --- banda de cifre ------------------------------------------------------ */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
         border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--panel); }
.stat { padding:26px 20px; border-right:1px solid var(--rule); }
.stat:last-child { border-right:0; }
@media (max-width:640px) { .stat { border-right:0; border-bottom:1px solid var(--rule); } }
.stat b { display:block; font-family:var(--mono); font-size:clamp(24px,3vw,32px); font-weight:500;
          color:var(--acc-deep); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:13px; color:var(--fg-mut); margin-top:6px; }

/* --- lista de intrebari -------------------------------------------------- */
.qlist { list-style:none; padding:0; margin:0; display:grid; gap:0; }
.qlist li { padding:18px 0 18px 34px; border-bottom:1px solid var(--rule); position:relative;
            font-size:17.5px; color:var(--fg-soft); }
.qlist li:first-child { border-top:1px solid var(--rule); }
.qlist li::before { content:"→"; position:absolute; left:0; top:18px; color:var(--acc);
                    font-family:var(--mono); }

/* --- afirmatii cu proba -------------------------------------------------- */
.claim { border-left:3px solid var(--acc); padding:4px 0 4px 24px; margin-bottom:38px; }
.claim h3 { font-size:23px; letter-spacing:-.022em; }
.proof { display:block; margin-top:12px; font-family:var(--mono); font-size:12.5px;
         line-height:1.65; color:var(--fg-mut); background:var(--acc-wash);
         border-radius:7px; padding:12px 14px; max-width:62ch; }

/* --- liste --------------------------------------------------------------- */
.checks { list-style:none; padding:0; margin:0; }
.checks li { padding-left:22px; position:relative; margin-bottom:9px; color:var(--fg-soft); font-size:15.5px; }
.checks li::before { content:""; position:absolute; left:2px; top:9px; width:6px; height:6px;
                     border-radius:50%; background:var(--acc); }

/* --- tabel --------------------------------------------------------------- */
.tscroll { overflow-x:auto; border:1px solid var(--rule); border-radius:12px; background:var(--panel); }
table { border-collapse:collapse; width:100%; font-size:15px; }
th,td { text-align:left; padding:14px 20px; border-bottom:1px solid var(--rule); }
th { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
     text-transform:uppercase; color:var(--fg-mut); }
td { color:var(--fg-soft); }
tr:last-child td { border-bottom:0; }

/* --- insigne ------------------------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
         font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px;
         border-radius:999px; background:var(--acc-wash); color:var(--acc-deep); }
.badge i { width:6px; height:6px; border-radius:50%; background:currentColor; display:block; }

/* --- subsol -------------------------------------------------------------- */
footer.site { border-top:1px solid var(--rule); background:var(--sunk); padding-block:56px 30px; }
.fgrid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:36px; }
@media (max-width:820px) { .fgrid { grid-template-columns:1fr 1fr; gap:28px; } }
footer.site h4 { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
                 color:var(--fg-mut); font-weight:500; margin-bottom:14px; }
footer.site ul { list-style:none; padding:0; margin:0; }
footer.site li { margin-bottom:9px; }
footer.site a { color:var(--fg-soft); text-decoration:none; font-size:15px; }
footer.site a:hover { color:var(--acc-deep); }
.legal { margin-top:44px; padding-top:22px; border-top:1px solid var(--rule);
         font-size:13.5px; color:var(--fg-mut); display:flex; flex-wrap:wrap; gap:8px 22px; }

.skip { position:absolute; left:-9999px; background:var(--acc); color:var(--on-acc); padding:10px 16px; z-index:100; }
.skip:focus { left:0; top:0; }