/*
  Shinrai Longevity Institute — pagina de prezentare.

  Structura urmează materialul tipărit: antet cu marca, titlu, declarația de
  poziționare, două coloane de conținut și blocul de contact.

  Pe hârtie cele două coloane se citesc alături; pe telefon se așază una sub
  alta, în ordinea în care contează: viziunea înaintea detaliilor de colaborare.

  Fără fonturi externe: pagina se încarcă instantaneu, nu depinde de un alt
  server și nu trimite adresa vizitatorului către terți.
*/

:root {
  --verde: #14342b;
  --verde-inchis: #0e2620;
  --cerneala: #1c2b26;
  --text: #46555055;
  --gri: #5d6b66;
  --linie: #e4e7e5;
  --crem: #f7f3ea;
  --masura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--cerneala);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- antet ---------------------------------- */

.masthead {
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--verde);
  text-decoration: none;
}

.mark { width: 44px; height: 44px; flex: none; }

.wordmark-text { display: flex; flex-direction: column; align-items: flex-start; }

.name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sub {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--gri);
}

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

main {
  max-width: var(--masura);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.hero { border-top: 1px solid var(--linie); padding-top: 2.5rem; }

h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--verde);
}

.lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--gri);
}

.statement {
  margin: 2.25rem 0 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--crem);
  border-left: 3px solid var(--verde);
}

.statement p { margin: 0; max-width: 78ch; }
.statement strong { color: var(--verde); font-weight: 600; }

/* ------------------------------ coloane --------------------------------- */

.columns {
  display: grid;
  gap: 2.5rem 3.5rem;
  grid-template-columns: 1fr;
}

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

.column { display: flex; flex-direction: column; gap: 2.25rem; }

.block h2 {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--verde);
}

.block p { margin: 0; color: var(--gri); }

.vision {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gri);
}

.vision li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
}

.vision li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde);
  opacity: 0.55;
}

/* Etichetele înlocuiesc șirurile despărțite prin puncte din material: pe
   telefon, un rând lung de termeni se rupe urât, iar așa fiecare rămâne
   întreg și lizibil. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--gri);
  background: #fcfcfb;
}

/* ------------------------------ contact --------------------------------- */

.cta {
  margin-top: 1rem;
  background: var(--verde);
  color: #eef2f0;
}

.cta-inner {
  max-width: var(--masura);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 860px) {
  .cta-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.cta-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.contact {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.who { font-weight: 600; color: #fff; }
.role { color: #b6c6c0; font-size: 0.94rem; }

.contact .line {
  margin-top: 0.15rem;
  color: #eef2f0;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 242, 240, 0.25);
  align-self: flex-start;
  /* ținte comode la atingere, pe telefon */
  padding: 0.35rem 0;
}

.contact .line:first-of-type { margin-top: 1.1rem; }
.contact .line:hover { border-bottom-color: #eef2f0; }
.contact .site { margin-top: 0.9rem; color: #b6c6c0; }

.strip {
  margin: 0;
  padding: 1rem 1.5rem 1.6rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #93a8a1;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* --------------------------- preferințe ---------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .contact .line { transition: border-color 0.15s ease; }
}

@media print {
  .cta { background: #fff; color: #000; }
  .cta-title, .who { color: #000; }
  .role, .strip, .contact .line { color: #333; }
}