/* Invictus — foaia de stil a site-ului de prezentare.
   Culorile sunt cele din aplicație: invictus-android/.../ui/theme/Theme.kt,
   paleta DarkInvictusColors. Nu se descarcă nimic din afară. */

:root {
  /* Fundalul paginii: gri-închis, nu negru. Aplicația folosește negru curat
     (bun pe OLED, la un ecran ținut în mână); o pagină web citită ziua, pe un
     monitor, e mai odihnitoare pe un gri. Macheta de telefon de mai jos
     păstrează culorile reale ale aplicației — ea chiar arată aplicația. */
  --fundal-sus: #1e2128;
  --fundal-jos: #15171c;
  --fundal: #15171c;

  /* accent = iOSBlueDark */
  --accent: #0a84ff;
  /* Accentul ca text: pe suprafețele deschise, #0a84ff scade la 4.15:1 pe
     card, sub pragul de 4.5. Varianta asta trece la 5.3:1. */
  --accent-text: #3d9bff;
  /* outgoingBubbleTop / iOSBlueDeepDark */
  --accent-clar: #2b92ff;
  --accent-adanc: #0060df;
  /* online */
  --verde: #30d158;
  /* destructive */
  --rosu: #ff453a;
  --chihlimbar: #d9913f; /* din avatarPalette */

  /* Text. Cu fundalul ridicat, gri-urile aplicației (#8e8e93 / #636366) se
     apropie prea mult de el — al doilea pica sub 4.5:1 chiar și pe negru.
     Ambele au fost deschise până trec pragul pe suprafața cea mai deschisă
     de pe pagină (cardul). */
  --text: #f2f2f7;
  --text-secundar: #a8a8b0;
  --text-tertiar: #8e8e95;

  /* Suprafețele urcă odată cu fundalul, altfel se topesc în el: pe un fond
     gri, cardurile trebuie să fie mai deschise decât pagina, nu mai închise. */
  --bara: rgba(23, 26, 32, 0.82);
  --luciu: rgba(255, 255, 255, 0.08);
  --contur: rgba(255, 255, 255, 0.13);
  --panou: rgba(38, 43, 53, 0.75);
  --separator: rgba(255, 255, 255, 0.11);

  /* Paleta reală a aplicației, folosită doar în macheta de telefon. */
  --app-fundal-sus: #090a0d;
  --app-fundal-jos: #000000;
  --app-bara: rgba(12, 12, 15, 0.72);
  --app-contur: rgba(255, 255, 255, 0.12);
  --app-text-secundar: #8e8e93;
  --bula-primita: rgba(38, 38, 40, 0.72);

  --lat: 1080px;
  --raza: 18px;
  --raza-mica: 12px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

*,
*::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: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--fundal);
  /* Gri abia albăstruit sus, gri curat jos. Aura albastră a fost slăbită de la
     0.16 la 0.10: pe un fond mai deschis ieșea în față. */
  background-image:
    radial-gradient(1100px 620px at 50% -10%, rgba(10, 132, 255, 0.10), transparent 62%),
    linear-gradient(180deg, var(--fundal-sus) 0%, var(--fundal-jos) 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.invizibil {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sari-la-continut {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  padding: 10px 18px;
  /* Albastrul deschis dă doar 3.65:1 cu alb. Cel adânc urcă la 5.6:1. */
  background: var(--accent-adanc);
  color: #fff;
  border-radius: 0 0 10px 10px;
  transition: transform 0.16s ease;
}
.sari-la-continut:focus { transform: translate(-50%, 0); }

/* ---------- structură ---------- */

.invelis {
  width: 100%;
  max-width: var(--lat);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 84px 0;
  border-top: 1px solid var(--separator);
  /* Bara lipită sus are 60px: fără asta, o ancoră din meniu ar ascunde titlul
     secțiunii sub ea. */
  scroll-margin-top: 68px;
}
section:first-of-type { border-top: 0; }

.eticheta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

h1 { font-size: clamp(38px, 6.4vw, 68px); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 650; }
h3 { font-size: 19px; font-weight: 620; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }

.subtitlu {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--text-secundar);
  max-width: 60ch;
}

.intro {
  color: var(--text-secundar);
  max-width: 68ch;
  margin-bottom: 44px;
}

/* ---------- bara de sus ---------- */

header.bara {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bara);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--contur);
}

.bara .invelis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 60px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 660;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.marca:hover { text-decoration: none; }
.marca svg { display: block; }

nav.meniu ul {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.meniu a {
  font-size: 15px;
  color: var(--text-secundar);
}
nav.meniu a:hover {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 720px) {
  nav.meniu { display: none; }
}

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

.hero {
  padding: clamp(64px, 10vw, 116px) 0 88px;
  border-top: 0;
}

.hero-grila {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.hero h1 { max-width: 14ch; }

.hero .subtitlu { margin-bottom: 28px; }

.stare-linie {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  margin-bottom: 26px;
  font-size: 13.5px;
  color: var(--text-secundar);
  background: var(--luciu);
  border: 1px solid var(--contur);
  border-radius: 999px;
}
.bulina {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chihlimbar);
  box-shadow: 0 0 0 4px rgba(217, 145, 63, 0.16);
  flex: none;
}

.butoane {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.buton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.buton:hover { text-decoration: none; }

.buton-plin {
  /* Capătul deschis al gradientului dădea doar 3.15:1 cu text alb. Coborât
     până unde tot butonul trece de 4.5:1, fără să iasă din albastrul mărcii. */
  background: linear-gradient(180deg, #0f6fe0, var(--accent-adanc));
  color: #fff;
}
.buton-plin:hover { background: linear-gradient(180deg, #1272e8, #0a63e0); }

.buton-gol {
  background: var(--luciu);
  border-color: var(--contur);
  color: var(--text);
}
.buton-gol:hover { background: rgba(255, 255, 255, 0.14); }

.nota-mica {
  font-size: 13.5px;
  color: var(--text-tertiar);
  margin: 0;
}

/* ---------- telefonul din hero ---------- */

.telefon {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 320 / 660;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ecran {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--app-fundal-sus), var(--app-fundal-jos));
  display: flex;
  flex-direction: column;
}

.ecran-bara {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  background: var(--app-bara);
  border-bottom: 1px solid var(--app-contur);
  flex: none;
}
.ecran-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3e8fe0, #1f5fcc);
  flex: none;
}
.ecran-nume {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.ecran-sub {
  font-size: 11px;
  color: var(--app-text-secundar);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ecran-sub::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

.fir {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 14px;
  overflow: hidden;
}

.bula {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 18px;
}
.bula-primita {
  align-self: flex-start;
  background: var(--bula-primita);
  border-bottom-left-radius: 5px;
  color: var(--text);
}
.bula-trimisa {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(43, 146, 255, 0.72), rgba(0, 96, 223, 0.72));
  border-bottom-right-radius: 5px;
  color: #fff;
}
.bula-vreme {
  align-self: center;
  font-size: 10.5px;
  color: var(--app-text-secundar);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  padding: 2px 0;
}

.ecran-compozitor {
  flex: none;
  margin: 0 12px 14px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--app-text-secundar);
  background: rgba(28, 28, 30, 0.72);
  border: 1px solid var(--app-contur);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .hero-grila {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero h1 { max-width: none; }
  .telefon { max-width: 270px; }
}

/* ---------- carduri ---------- */

.grila {
  display: grid;
  gap: 18px;
}
.grila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--panou);
  border: 1px solid var(--contur);
  border-radius: var(--raza);
  padding: 26px 24px;
}
.card h3 { margin-bottom: 8px; }
.card p {
  color: var(--text-secundar);
  font-size: 15.5px;
  margin: 0;
}
.card p + p { margin-top: 10px; }

.pictograma {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: var(--raza-mica);
  background: rgba(10, 132, 255, 0.14);
  border: 1px solid rgba(10, 132, 255, 0.28);
  color: var(--accent);
}
.pictograma svg { display: block; }

@media (max-width: 900px) {
  .grila-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grila-3, .grila-2 { grid-template-columns: 1fr; }
}

/* ---------- lanțul criptografic ---------- */

.lant {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.veriga {
  background: var(--panou);
  border: 1px solid var(--contur);
  border-radius: var(--raza);
  padding: 22px;
}
.veriga h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.veriga .cheie {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-text);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 10px;
}
.veriga p {
  font-size: 14.5px;
  color: var(--text-secundar);
  margin: 0;
}

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

/* ---------- tabel ---------- */

.tabel-invelis {
  overflow-x: auto;
  border: 1px solid var(--contur);
  border-radius: var(--raza);
  background: var(--panou);
}

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
th, td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--separator);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiar);
}
td:first-child { color: var(--text); font-weight: 550; width: 34%; }
td:last-child { color: var(--text-secundar); }

/* Pe telefon tabelul se desface în blocuri: derularea laterală ar tăia exact
   coloana care contează, cea cu motivul. */
@media (max-width: 640px) {
  .tabel-invelis { overflow-x: visible; }
  table { min-width: 0; }
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: auto; }
  table tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--separator);
  }
  table tr:last-child { border-bottom: 0; }
  table td { border-bottom: 0; padding: 4px 20px; }
  table td:first-child {
    width: auto;
    font-weight: 600;
    padding-top: 14px;
  }
  table td:last-child { padding-bottom: 14px; font-size: 14.5px; }
}

/* ---------- două coloane: ce vede / ce nu vede ---------- */

.doua {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .doua { grid-template-columns: 1fr; }
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-size: 15.5px;
  color: var(--text-secundar);
}
.lista li:last-child { margin-bottom: 0; }
.lista li strong { color: var(--text); font-weight: 550; }

.lista-da li::before,
.lista-nu li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 15px;
}
.lista-da li::before { content: "—"; color: var(--verde); }
.lista-nu li::before { content: "—"; color: var(--chihlimbar); }

.card-verde { border-color: rgba(48, 209, 88, 0.3); }
.card-chihlimbar { border-color: rgba(217, 145, 63, 0.32); }

.card > h3 .punct {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: 2px;
}
.punct-verde { background: var(--verde); }
.punct-chihlimbar { background: var(--chihlimbar); }

/* ---------- portofel ---------- */

.retea {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 8px 8px 0;
  border-radius: 999px;
  background: var(--luciu);
  border: 1px solid var(--contur);
  font-size: 14px;
}
.retea b { font-weight: 620; color: var(--text); }
.retea span { color: var(--text-secundar); font-size: 13px; }

/* ---------- stare / etape ---------- */

.etape {
  list-style: none;
  margin: 0;
  padding: 0;
}
.etape li {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--separator);
  align-items: baseline;
}
.etape li:last-child { border-bottom: 0; }

.insigna {
  display: inline-flex;
  /* Insigna se strânge pe conținut, nu se întinde pe toată coloana: altfel
     eticheta cea mai lungă atinge exact marginea și se taie. */
  justify-self: start;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.insigna::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.insigna-gata {
  color: var(--verde);
  background: rgba(48, 209, 88, 0.12);
  border: 1px solid rgba(48, 209, 88, 0.3);
}
.insigna-lucru {
  color: var(--chihlimbar);
  background: rgba(217, 145, 63, 0.12);
  border: 1px solid rgba(217, 145, 63, 0.3);
}
.insigna-urmeaza {
  color: var(--text-secundar);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--contur);
}

.etape .continut strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.etape .continut span {
  color: var(--text-secundar);
  font-size: 15px;
}

@media (max-width: 620px) {
  .etape li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- casetă de avertizare / onestitate ---------- */

.caseta {
  background: var(--panou);
  border: 1px solid var(--contur);
  border-left: 3px solid var(--chihlimbar);
  border-radius: var(--raza-mica);
  padding: 20px 22px;
  margin-top: 26px;
}
.caseta p {
  margin: 0;
  font-size: 15px;
  color: var(--text-secundar);
}
.caseta p + p { margin-top: 10px; }
.caseta strong { color: var(--text); }

/* ---------- subsol ---------- */

footer {
  border-top: 1px solid var(--separator);
  padding: 44px 0 56px;
  color: var(--text-tertiar);
  font-size: 14px;
}
footer .invelis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
footer p { margin: 0; max-width: 58ch; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--contur);
  color: var(--text);
}

/* ---------- rețele sociale, în subsol ---------- */

.subsol-jos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--separator);
}

.retele {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pictograme monocrome, nu logourile colorate ale platformelor: subsolul
   rămâne liniștit, iar culoarea vine din text, deci trece prin aceleași
   verificări de contrast ca restul paginii. */
.retele a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-tertiar);
  border: 1px solid transparent;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.retele a:hover {
  color: var(--text);
  background: var(--luciu);
  border-color: var(--contur);
  text-decoration: none;
}
.retele svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.subsol-jos .nota-mica { margin: 0; }

/* Tabelul comparativ are trei coloane. Stivuit pe telefon, fără antet, nu s-ar
   mai ști care celulă e „aplicația obișnuită" și care e Invictus — de aceea
   fiecare își poartă eticheta cu ea. */
@media (max-width: 640px) {
  .tabel-comparativ td[data-eticheta]::before {
    content: attr(data-eticheta);
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiar);
  }
  .tabel-comparativ td[data-eticheta] { padding-top: 8px; }
  .tabel-comparativ td[data-eticheta="Invictus"]::before { color: var(--accent-text); }
}