/* Aceleasi valori ca in panou (style.php), ca site-ul si panoul sa arate a
   acelasi produs. Daca schimbi aici, schimba si acolo. */
:root {
  --bg:       #01141B;
  --bg-2:     #031C25;
  --surface:  #062430;
  --line:     #103A49;
  --line-2:   #17495B;
  --text:     #DCE7EA;
  --muted:    #9BBFCB;   /* era #82A6B2 */
  --dim:      #77A0AE;   /* era #5B7F8B - avea 3.7:1 pe card, prea putin */
  --accent:   #0E9BC7;
  --accent-2: #47C7E2;
  --fill:     #008DBA;
  --fill-line:#0FA4CE;
  --amber:    #ffb454;
  --red:      #ff6b6b;
  --green:    #3FD09A;
  --head-bg:  rgba(1, 20, 27, .86);
  --shadow:   rgba(0, 0, 0, .45);
  --on-fill:  #F2FAFD;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}

/* ---- light ----------------------------------------------------------------

   Same palette as the panel's light mode, for the same reason the dark ones
   match: one product, not two. Rebuilt from the light end rather than inverted
   - the accents that read well on near-black are far too pale on white, so
   every one of them was darkened until it carries its own weight on a card. */

:root[data-theme="light"] {
  --bg:       #F1F6F9;
  --bg-2:     #E9F1F5;
  --surface:  #FFFFFF;
  --line:     #D6E3EA;
  --line-2:   #BFD2DC;
  --text:     #0A2028;
  --muted:    #48656F;
  --dim:      #5E7C87;
  --accent:   #0A7CA3;
  --accent-2: #086689;
  --fill:     #0A7CA3;
  --fill-line:#0E9BC7;
  --amber:    #96610A;
  --red:      #C22F2F;
  --green:    #0C7150;
  --head-bg:  rgba(255, 255, 255, .88);
  --shadow:   rgba(10, 32, 40, .16);
  --on-fill:  #F2FAFD;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:       #F1F6F9;
    --bg-2:     #E9F1F5;
    --surface:  #FFFFFF;
    --line:     #D6E3EA;
    --line-2:   #BFD2DC;
    --text:     #0A2028;
    --muted:    #48656F;
    --dim:      #5E7C87;
    --accent:   #0A7CA3;
    --accent-2: #086689;
    --fill:     #0A7CA3;
    --fill-line:#0E9BC7;
    --amber:    #96610A;
    --red:      #C22F2F;
    --green:    #0C7150;
    --head-bg:  rgba(255, 255, 255, .88);
    --shadow:   rgba(10, 32, 40, .16);
    --on-fill:  #F2FAFD;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

/*
   ---------------------------------------------------------------------------
   MARIMEA DE PORNIRE A PAGINII
   ---------------------------------------------------------------------------

   Un site NU poate schimba zoom-ul browserului - ala e setarea omului si nu se
   atinge din cod, si bine ca e asa. Dar poate sa se deseneze el insusi mai
   mare, si iese acelasi lucru vazut de pe scaun.

   "zoom" chiar reasaza pagina, nu o intinde ca pe o poza: literele raman clare
   si randurile se rup unde trebuie. "transform: scale" ar fi facut textul
   neclar si ar fi scos bare de derulare pe orizontala.

   De ce in doua trepte, si nu 1.25 peste tot:

   Continutul are 1120 de pixeli latime. Marit cu un sfert, are nevoie de
   aproape 1400 ca sa stea comod. Pus fara conditie, pe un laptop de 1366 ar fi
   inghesuit tot pana la margini, iar pe telefon ar fi fost de-a dreptul rau -
   acolo pagina e oricum cat ecranul, si un sfert in plus doar ar fi taiat din
   ea. Asa, ecranele mari primesc sfertul intreg, cele mijlocii o parte din el,
   iar telefonul ramane cum era.

   Firefox stie "zoom" abia din 126; pe unul mai vechi pagina se vede pur si
   simplu la marimea de baza, fara sa se strice nimic.
*/
@media (min-width: 1360px) { body { zoom: 1.12; } }
@media (min-width: 1600px) { body { zoom: 1.25; } }

html {
  scroll-behavior: smooth;

  /* Antetul e lipit sus, deci o ancora (#checks) ar duce titlul chiar sub el.
     Se lasa loc cat tine bara plus putin aer. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.7 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--text); }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--mono);
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 18px;
}

.lead { color: var(--muted); font-size: 21px; }

/* ---------- header ---------- */

header.site {
  /* ---- the bar stays dark in both themes ----

     Custom properties inherit, so redefining them here is enough: every link,
     border and button inside the bar picks up the dark values without a single
     extra rule, and light mode changes nothing above the fold.

     It is a deliberate look, not a shortcut - but it also solves a real
     problem. The wordmark is drawn for a dark ground: half of it is a pale
     grey that all but disappears on white. A light bar would need a second
     logo, and the second logo is the thing nobody remembers to update. */
  --bg:       #01141B;
  --bg-2:     #062430;
  --surface:  #062430;
  --panel:    #062430;
  --panel-2:  #0A2E3C;
  --line:     #103A49;
  --line-2:   #17495B;
  --text:     #DCE7EA;
  --muted:    #9BBFCB;
  --dim:      #77A0AE;
  --accent:   #0E9BC7;
  --accent-2: #47C7E2;
  --fill:     #008DBA;
  --fill-line:#0FA4CE;
  --head-bg:  rgba(1, 20, 27, .86);
  --on-fill:  #F2FAFD;
  color-scheme: dark;
  color: var(--text);

  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--head-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

header.site .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  /* 80, nu 66: logo-ul din antet a crescut de la 24 la 40 de pixeli, si la
     inaltimea veche ar fi stat strans intre marginile barii. */
  height: 80px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand:hover { color: var(--text); }
.brand span { color: var(--accent-2); }
.brand svg { display: block; }
.brand img { display: block; width: auto; }

nav.site { display: flex; gap: 30px; margin-left: auto; align-items: center; }

/* ---- the light/dark button ----
   Only one of the two icons is ever shown: the one that says what pressing it
   would give you. With no choice made the page follows the operating system,
   so the icon has to follow it too - hence the media query as well as the
   attribute rule. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--muted);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

/* 18, nu 16: langa un logo de 40 de pixeli navigatia parea de doua ori mai
   mica decat era. Si putina greutate in plus - la culoarea stinsa, 400 se
   subtia prea tare pe fundal inchis. */
/*
   :not(.btn) NU e de prisos, si merita spus de ce.

   Sublinierea de dedesubt se face cu un border-bottom transparent, pus pe orice
   legatura din navigatie. Butonul de "Client area" e tot o legatura, deci il
   prindea si pe el - iar ca sa i-l scot scrisesem "nav.site a.btn {
   border-bottom: none }". Numai ca selectorul ala are specificitate mai mare
   decat ".btn.login", asa ca stergea si conturul PROPRIU al butonului, cel de
   jos. Butonul iesea cu trei laturi.

   Asa se rezolva la radacina: regula nici nu-l atinge, in loc sa o desfacem pe
   urma. O regula care trebuie anulata imediat dupa ce a fost scrisa e semn ca
   era pusa prea larg.
*/
nav.site a:not(.btn) {
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
nav.site a:not(.btn):hover { color: var(--text); }

/* Pagina pe care esti se vede, nu se ghiceste. */
nav.site a.on:not(.btn) { color: var(--text); border-bottom-color: var(--accent); }

/*
   Butonul de login.

   Pastila cu contur, nu dreptunghi umplut. Umplut, sta in antet mai apasat
   decat logo-ul si trage ochiul de la el; asa ramane limpede ca e o cale, nu
   un indemn.

   Scutul e desenat aici, in cod, nu adus ca imagine: ia culoarea din paleta
   singur, e clar pe orice ecran si nu mai e un fisier de tinut in pas cu
   restul. E acelasi semn ca in logo - scut cu bifa.
*/
.btn.login {
  padding: 7px 24px 7px 7px;
  gap: 11px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(14, 155, 199, .10);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
}

.btn.login .ico {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 155, 199, .26);
  color: var(--accent-2);
  transition: background .16s, color .16s;
}
.btn.login .ico svg { width: 17px; height: 17px; display: block; }

.btn.login:hover {
  background: rgba(14, 155, 199, .20);
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 8px 22px rgba(14, 155, 199, .28);
  transform: translateY(-1px);
}
.btn.login:hover .ico { background: var(--accent); color: #F2FAFD; }
.btn.login:active { transform: translateY(0); box-shadow: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--text); }

/*
   Butonul principal.

   Nu o singura culoare turnata intr-un dreptunghi: un degrade de sus in jos,
   o dunga subtire de lumina pe muchia de sus si o umbra colorata dedesubt.
   Alea trei fac diferenta dintre "chenar cu text" si ceva ce pare ca se poate
   apasa. Umbra e in albastrul butonului, nu neagra - pe fundal inchis o umbra
   neagra nu se vede deloc.
*/
.btn.primary {
  background: linear-gradient(180deg, #10A6D0 0%, #0182AC 100%);
  border-color: #34C0E0;
  color: #F2FAFD;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 141, 186, .32),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #24B8E0 0%, #0691BE 100%);
  border-color: #5FD3EE;
  color: #fff;
  box-shadow: 0 10px 26px rgba(14, 155, 199, .46),
              inset 0 1px 0 rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}
.btn.primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 141, 186, .32); }

.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.btn.small { padding: 9px 18px; font-size: 16px; }

@media (max-width: 780px) {
  nav.site { gap: 18px; }
  nav.site a.hide-sm { display: none; }
}

/* ---------- hero ---------- */

.hero { padding: 92px 0 72px; border-bottom: 1px solid var(--line); }

.hero .row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero h1 { font-size: 58px; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--accent-2); }
.hero p { font-size: 21px; color: var(--muted); margin: 22px 0 34px; max-width: 34em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero { padding: 60px 0 48px; }
  .hero .row { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 42px; }
  .hero p { font-size: 19px; }
}

/* ---------- terminal card ---------- */

.term {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px var(--shadow);
}

.term .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; }
.term .bar b { margin-left: 8px; font: 500 13px var(--mono); color: var(--dim); letter-spacing: .04em; }

.term .body { padding: 16px; font: 13.5px/1.85 var(--mono); overflow-x: auto; }
.term .body div { white-space: pre; }
.term .t-dim { color: var(--dim); }
.term .t-red { color: var(--red); }
.term .t-amber { color: var(--amber); }
.term .t-green { color: var(--green); }
.term .t-accent { color: var(--accent-2); }

/* ---------- sections ---------- */

section { padding: 84px 0; border-bottom: 1px solid var(--line); }
section.tight { padding: 60px 0; }
section h2 { font-size: 38px; font-weight: 700; }
section > .wrap > p.lead { margin: 18px 0 0; max-width: 40em; }

/* Intertitlu in interiorul unei sectiuni: mai mic decat h2, dar cu aer
   deasupra, ca sa se vada ca incepe alt subiect, nu ca e o continuare. */
section h3.sub {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 64px 0 0;
}

@media (max-width: 900px) {
  section { padding: 56px 0; }
  section h2 { font-size: 31px; }
}

.cards { display: grid; gap: 18px; margin-top: 44px; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .cards.c2, .cards.c3 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.card h3 { font-size: 19px; font-weight: 650; margin-bottom: 10px; }
.card p  { color: var(--muted); font-size: 17px; margin: 0; }
.card .k { font: 13px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 12px; }

/* numbered steps */

.steps { counter-reset: step; display: grid; gap: 20px; margin-top: 44px; grid-template-columns: repeat(3, 1fr); }
.steps .s { position: relative; padding-top: 22px; border-top: 2px solid var(--line-2); }
.steps .s:before {
  counter-increment: step;
  content: "0" counter(step);
  font: 600 13px var(--mono);
  color: var(--accent-2);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 10px;
}
.steps .s h3 { font-size: 19px; margin-bottom: 8px; }
.steps .s p { color: var(--muted); font-size: 17px; margin: 0; }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* table */

.tbl { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 17px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.tbl td:first-child { white-space: nowrap; font-family: var(--mono); font-size: 14px; color: var(--text); }
.tbl td:last-child { color: var(--muted); }
.tbl-scroll { overflow-x: auto; }

/* faq */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; color: var(--accent-2); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary:after { content: "\2013"; }
.faq p { color: var(--muted); margin: 0 0 20px; max-width: 62em; font-size: 17px; }

/* pricing */

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 780px) { .plans { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(14,155,199,.30); }
.plan .tag {
  align-self: flex-start;
  font: 600 12px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(14,155,199,.45);
  background: rgba(14,155,199,.12);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 16px;
}
.plan h3 { font-size: 22px; margin-bottom: 6px; }
.plan .blurb { color: var(--muted); font-size: 17px; margin: 0 0 22px; }
.plan .price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.plan .price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .period { color: var(--dim); font-size: 15px; margin: 4px 0 24px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; }
.plan li { color: var(--muted); font-size: 17px; padding: 7px 0 7px 26px; position: relative; }
.plan li:before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.plan .btn { margin-top: auto; }

/* cta band */

.band { padding: 76px 0; text-align: center; }
.band h2 { font-size: 32px; }
.band p { color: var(--muted); margin: 16px auto 30px; max-width: 34em; }

/* contact */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid a.big,
.contact-grid .big { font-size: 19px; font-weight: 600; font-family: var(--mono); }

/* ---- copy button ----

   The label carries the state, not just the icon: "Copied" is read by everyone,
   a tick that appears for a second and a half is not. Both icons live in the
   button and only one is ever shown, so the width does not jump when they
   swap. */
.copy-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--muted);
  font: 600 13px/1 inherit; font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.copy-btn svg { width: 15px; height: 15px; display: block; flex: none; }
.copy-btn .i-done { display: none; }
.copy-btn.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.copy-btn.done .i-copy { display: none; }
.copy-btn.done .i-done { display: block; }

/* footer */

footer.site {
  padding: 34px 0;
  color: var(--dim);
  font-size: 15px;
  display: flex;
}
footer.site .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
footer.site a { color: var(--muted); }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }