/* Alpetri Real Estate
   Paleta si tipografia sunt fixate in DESIGN.md. Daca fisierul asta contrazice
   DESIGN.md, fisierul asta greseste. */

/* ---------- fonturi, self-hosted, nu Google Fonts la runtime ---------- */
/* Doua fisiere, cu unicode-range, exact cum le serveste Google. Fisierul
   latin-ext e cel care duce a, i, s, t cu diacritice romanesti, inclusiv
   U+0219 si U+021B (virgula dedesubt, nu sedila). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --ink:        oklch(14% 0.020 258);
  --ink-2:      oklch(19% 0.022 258);
  --concrete:   oklch(62% 0.012 72);
  --concrete-d: oklch(44% 0.014 72);
  --limestone:  oklch(94% 0.012 78);
  --amber:      oklch(78% 0.155 68);
  --amber-hi:   oklch(86% 0.130 72);
  --amber-d:    oklch(52% 0.135 55);   /* acelasi accent, coborat ca sa aiba contrast pe travertin */
  --line:       oklch(32% 0.014 258);
  --line-lt:    oklch(86% 0.012 78);

  --disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --hero-vh: 640vh;          /* 4 clipuri x 5s = 20s, la raportul de 32vh/s */
  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1440px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--limestone);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  overflow-x: hidden;          /* plasa de siguranta, nu inlocuieste verificarea la 390px */
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--amber); color: var(--ink); }

/* Proprietati logice peste tot. Shorthand-ul `padding` intr-o regula ulterioara
   omoara padding-ul orizontal al containerului si tot continutul ajunge lipit
   de marginea ferestrei. */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.band { padding-block: clamp(72px, 11vw, 168px); }
.band-tight { padding-block: clamp(48px, 7vw, 104px); }

/* ---------- tipografie ---------- */
.display {
  font-variation-settings: 'wdth' 125, 'wght' 780;
  text-transform: uppercase;
  letter-spacing: .005em;
  /* 1.15, nu 1.0. In romana S si T au virgula dedesubt, iar in Archivo ea
     coboara 0.29em sub linia de baza (masurat). Cu inaltimea capitalei de
     ~0.72em, un interliniaj de 1.0 lasa doar 0.28em liberi, adica sub pragul
     necesar: la titluri pe mai multe randuri virgola cade peste randul urmator.
     1.15 lasa 0.43em. Valoarea e specifica limbii, nu familiei. */
  line-height: 1.15;
  margin: 0;
}
h2.sec {
  font-variation-settings: 'wdth' 112, 'wght' 640;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4.2rem);
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 .6em;
  text-wrap: balance;
}
.lede {
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem);
  color: var(--concrete);
  max-width: 62ch;
}
.num { font-variation-settings: 'wdth' 100, 'wght' 500; font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gut); padding-block: 18px;
  /* mix-blend-mode: difference a fost scos. Functiona cat timp eroul era
     intunecat; peste cerul palid al vilei da un maro spalacit si marca dispare.
     Acum: alb cu umbra peste video, si fundal plin dupa ce se trece de erou. */
  color: #fff;
  transition: background-color .3s ease;
}
.hdr::before {                         /* banda de contrast doar sub header */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 96px;
  background: linear-gradient(180deg, oklch(14% .02 258 / .58), oklch(14% .02 258 / 0));
  pointer-events: none; z-index: -1;
  transition: opacity .3s ease;
}
.hdr.solid { background: oklch(14% .02 258 / .94); }
.hdr.solid::before { opacity: 0; }
.mark {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .82rem; color: #fff;
  text-shadow: 0 1px 12px oklch(10% .02 258 / .7);
}
/* Cat timp cartonul de titlu tine numele pe tot ecranul, aceeasi marca scrisa
   marunt in coltul de sus e o repetitie. Intra cand pleaca el. JS pune
   .revealed pe header. */
.hdr .mark { opacity: 0; transition: opacity .5s ease; }
.hdr.revealed .mark { opacity: 1; }
.mark span { font-variation-settings: 'wdth' 125, 'wght' 400; }
.hdr-tel {
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-variant-numeric: tabular-nums;
  font-size: .82rem; letter-spacing: .04em; color: #fff;
  text-shadow: 0 1px 12px oklch(10% .02 258 / .7);
}
.hdr.solid .mark, .hdr.solid .hdr-tel { text-shadow: none; }
.hdr-tel:hover { color: var(--amber); }

/* ---------- hero ---------- */
.hero { height: var(--hero-vh); position: relative; }
.hero-sticky {
  position: sticky; inset-block-start: 0;
  height: 100svh;                      /* svh, altfel bara browserului de pe telefon face salt */
  overflow: hidden;
}
.hero-sticky video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Fara filtru. Clientul a cerut explicit videoul curat, nu in ceata.
     Contrastul pentru text se obtine local, doar in banda de jos unde sta
     textul, nu prin intunecarea intregului cadru. */
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    oklch(14% .02 258 / .22) 0%,   oklch(14% .02 258 / .04) 14%,
    oklch(14% .02 258 / 0)   34%,  oklch(14% .02 258 / 0)   52%,
    oklch(14% .02 258 / .58) 78%,  oklch(14% .02 258 / .90) 100%);
}
/* ---------- cartonul de titlu ----------
   Site-ul incepe cu numele. Valul de cerneala sta peste tot cadrul si se
   ridica in primele procente de scroll, iar logotipul mai ramane putin peste
   imagine si apoi pleaca. Cele doua opacitati sunt conduse din JS prin --veil
   si --wm, ca sa fie legate de scrub, nu de un timer. */
.hero-intro {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center;
  pointer-events: none;
}
.hero-intro::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  opacity: var(--veil, 1);
}
.wm {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gut);
  opacity: var(--wm, 1);
}
/* textLength blocheaza marca exact pe latimea coloanei de continut, la orice
   ecran. font-size in vw ar nimeri aproape, dar niciodata fix, iar un logotip
   care nu se aliniaza cu grila nu arata desenat, arata scris. */
.wm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-svg text {
  fill: #fff;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 125, 'wght' 860;
  font-size: 200px;
}
.wm-sub {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin-block-start: clamp(12px, 1.8vh, 22px);
  padding-block-start: clamp(10px, 1.4vh, 18px);
  border-block-start: 1px solid oklch(100% 0 0 / .3);
  font-variation-settings: 'wdth' 112, 'wght' 560;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(.6rem, .54rem + .3vw, .78rem);
  color: oklch(100% 0 0 / .78);
}
@media (max-width: 620px) {
  /* Pe ecran inalt si ingust marca nu poate creste, e legata de latimea
     coloanei. Centrata, ramanea un bloc mic in mijlocul unui cadru gol; jos
     citeste ca afis. Randurile se stivuiesc, nu se ascund. */
  .hero-intro { align-content: end; padding-block-end: 30vh; }
  .wm-sub { display: block; letter-spacing: .13em; }
  .wm-sub span { display: block; }
  .wm-sub span + span { margin-block-start: 5px; color: oklch(100% 0 0 / .55); }
}

.hero-content {
  position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: clamp(74px, 12vh, 128px);
  max-width: var(--maxw); margin-inline: auto;
  will-change: transform, opacity;
}
/* Cele patru mesaje stau unul peste altul si cresc in sus de la aceeasi linie
   de baza, ca schimbarea sa nu miste nimic pe ecran. */
.hero-line {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding-inline: var(--gut);
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.hero-line.on { opacity: 1; transform: none; pointer-events: auto; }
.hero h1 {
  font-size: clamp(1.6rem, 1rem + 1.9vw, 2.8rem);
  color: #fff;
  text-shadow: 0 2px 28px oklch(10% .02 258 / .8), 0 1px 3px oklch(10% .02 258 / .55);
  max-width: 24ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero-sub {
  margin-block-start: clamp(10px, 1.6vh, 18px);
  max-width: 48ch;
  color: oklch(92% .01 78 / .92);
  text-shadow: 0 1px 24px oklch(10% .02 258 / .8);
  font-size: clamp(.98rem, .93rem + .3vw, 1.2rem);
}

/* indicatorul de stadiu, citeste progresul scrub-ului */
.stage {
  position: absolute; z-index: 2;
  inset-block-end: clamp(22px, 4vh, 48px); inset-inline: 0;
  padding-inline: var(--gut);
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.stage-now {
  font-variation-settings: 'wdth' 112, 'wght' 700;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: clamp(.72rem, .68rem + .2vw, .84rem);
  color: var(--amber);
  min-width: 9ch;                      /* nu sare layoutul cand se schimba cuvantul */
}
.stage-bar {
  flex: 1; max-width: 380px; height: 2px;
  background: oklch(100% 0 0 / .22); position: relative;
}
.stage-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--amber); }
.stage-hint {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: oklch(100% 0 0 / .5);
}
@media (max-width: 700px) { .stage-hint { display: none; } }

/* ---------- marquee ---------- */
.marquee-band { padding-block: clamp(26px, 4vw, 54px); overflow: hidden; border-block: 1px solid var(--line); }
.marquee { display: flex; width: max-content; will-change: transform; }
.marquee span {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  letter-spacing: .01em;
  padding-inline-end: .5em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(78% .155 68 / .55);
  white-space: nowrap;
}
.marquee span b { -webkit-text-stroke: 0; color: var(--amber); font-variation-settings: 'wdth' 125, 'wght' 800; }
@media (max-width: 900px) { .marquee span { -webkit-text-stroke-width: .7px; } }

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) { .story { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.story-body p { margin-block: 0 1.1em; color: var(--concrete); }
.story-body p:last-child { margin-block-end: 0; }
.story-body strong { color: var(--limestone); font-variation-settings: 'wdth' 100, 'wght' 600; }

/* ---------- oferta ----------
   Randuri cu rigle, nu carduri. Pe travertin, ca pagina sa nu fie patru benzi
   intunecate la rand: erou inchis, concept inchis, oferta deschisa, fondator
   inchis, conversie chihlimbar. */
.offer { background: var(--limestone); color: var(--ink); }
.offer h2.sec { color: var(--ink); }
.offer .lede { color: var(--concrete-d); }
.offer h3 {
  margin: 0 0 .4em;
  font-variation-settings: 'wdth' 112, 'wght' 660;
  font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem);
  letter-spacing: .005em; line-height: 1.25;
}
.offer p { color: var(--concrete-d); }

/* comisionul: o singura cifra tabulara intr-un rand, nu un card de statistica */
.fee {
  display: grid; grid-template-columns: 1fr; gap: 4px clamp(24px, 4vw, 56px);
  margin-block-start: clamp(40px, 6vw, 80px);
  padding-block: clamp(22px, 3vw, 38px);
  border-block: 1px solid var(--line-lt);
}
@media (min-width: 760px) { .fee { grid-template-columns: minmax(0, 9.5rem) 1fr; align-items: start; } }
.offer .fee-fig {
  margin: 0;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(3rem, 1.6rem + 6vw, 6.4rem);
  line-height: .88; letter-spacing: -.01em;
  color: var(--ink);
}
.fee-body p { margin: 0; max-width: 54ch; }

.offer-list { margin-block-start: clamp(6px, 1vw, 14px); }
.offer-row {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 16px;
  padding-block: clamp(20px, 2.6vw, 34px);
  border-block-end: 1px solid var(--line-lt);
}
/* Peste 760px jgheabul e acelasi cu al randului de comision, altfel coloana de
   text a comisionului porneste cu 22px mai la dreapta decat restul listei si
   se vede ca doua liste lipite. */
@media (min-width: 760px) {
  .offer-row { grid-template-columns: minmax(0, 9.5rem) 1fr; gap: 0 clamp(24px, 4vw, 56px); }
}
.offer .offer-idx {
  margin: 0;
  font-variation-settings: 'wdth' 112, 'wght' 640;
  font-size: .82rem; letter-spacing: .1em;
  color: var(--amber-d);
  padding-block-start: .35em;
}
.offer-row p { margin: 0; max-width: 62ch; }
.offer-tag {
  display: inline-block; vertical-align: .18em;
  margin-inline-start: .7em;
  font-variation-settings: 'wdth' 112, 'wght' 660;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .6rem; color: var(--amber-d);
  border: 1px solid oklch(52% .135 55 / .45);
  padding: .35em .6em .48em;
}
.offer .offer-close {
  margin-block-start: clamp(28px, 4vw, 52px);
  max-width: 46ch;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  color: var(--ink);
}

/* ---------- broker fondator ---------- */
.founder { background: var(--ink-2); border-block: 1px solid var(--line); }
.founder-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.5vw, 56px); }
/* Coloana fotografiei e fixa, nu fractionara: pe ecran lat o coloana in fr
   crestea odata cu pagina si poza ajungea sa domine textul. */
/* 380px, nu 300. Fotografia nu se mai decupeaza, deci nu mai e un portret
   strans pe cap si bust: e un cadru cu context, iar la 300px chipul ajungea
   prea mic ca sa se citeasca. Cand o poza iese mica in coloana, se lateste
   coloana. */
@media (min-width: 900px) { .founder-grid { grid-template-columns: 380px 1fr; align-items: start; } }
.founder-photo { margin: 0; max-width: 300px; }   /* pe mobil nu ocupa toata latimea */
@media (min-width: 900px) { .founder-photo { max-width: none; } }
.founder-photo img {
  /* Nicio taiere. Fara aspect-ratio si fara object-fit, poza se vede intreaga,
     la raportul ei, oricare ar fi el: coloana da latimea, inaltimea urmeaza.
     Clientul a cerut explicit sa nu se decupeze nimic din fotografie.

     height:auto ramane obligatoriu. Atributele width/height de pe <img> se
     mapeaza ca presentational hints pe CSS width si height, iar fara auto
     hint-ul de inaltime ramane activ si poza iese intinsa pe verticala.

     Cele doua atribute de pe <img> trebuie sa fie dimensiunile reale ale
     fisierului. Din ele isi rezerva browserul locul inainte sa descarce poza;
     daca nu se potrivesc, pagina sare cand imaginea ajunge. */
  width: 100%; height: auto;
  filter: saturate(.96);
}
.founder-role {
  margin: 0 0 .5em;
  font-variation-settings: 'wdth' 112, 'wght' 660;
  text-transform: uppercase; letter-spacing: .11em;
  font-size: .72rem; color: var(--amber);
}
.founder-body h2.sec { margin-block-end: .45em; }
.founder-body p { margin-block: 0 1.05em; color: var(--concrete); max-width: 58ch; }
.founder-body strong { color: var(--limestone); font-variation-settings: 'wdth' 100, 'wght' 600; }
.founder-tel {
  display: inline-block; margin-block-start: 6px;
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  letter-spacing: .02em; color: var(--limestone);
  border-block-end: 2px solid var(--amber); padding-block-end: 4px;
  transition: color .2s ease;
}
.founder-tel:hover { color: var(--amber); }

/* ---------- conversie, drenata in chihlimbar ---------- */
.convert { background: var(--amber); color: var(--ink); }
.convert h2.sec { color: var(--ink); }
.convert .lede { color: oklch(30% .05 68); }
.convert-grid { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 44px); margin-block-start: clamp(28px, 4vw, 56px); }
@media (min-width: 780px) { .convert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .convert-grid { grid-template-columns: 1.2fr .8fr .8fr; } }
.convert dl { margin: 0; border-block-start: 1px solid oklch(30% .05 68 / .28); }
.convert dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 12px; border-block-end: 1px solid oklch(30% .05 68 / .28);
}
.convert dt { color: oklch(32% .05 68); font-size: .9rem; }
.convert dd { margin: 0; font-variation-settings: 'wdth' 100, 'wght' 600; font-variant-numeric: tabular-nums; }
.tel-big {
  display: inline-block; margin-block-start: 8px;
  font-variation-settings: 'wdth' 118, 'wght' 780;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1rem + 3.2vw, 3.4rem);
  letter-spacing: .005em; line-height: 1; color: var(--ink);
  border-block-end: 3px solid var(--ink); padding-block-end: 6px;
  transition: opacity .2s ease;
}
.tel-big:hover { opacity: .62; }

/* ---------- footer ---------- */
.ftr { border-block-start: 1px solid var(--line); }
.ftr-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: 1.4fr .8fr .8fr; } }
.ftr h4 {
  margin: 0 0 14px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--concrete-d); font-variation-settings: 'wdth' 100, 'wght' 600;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-block-end: 8px; color: var(--concrete); }
.ftr a:hover { color: var(--amber); }
.ftr-legal {
  margin-block-start: clamp(36px, 5vw, 72px); padding-block-start: 20px;
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .78rem; color: var(--concrete-d);
}

/* ---------- reveal ---------- */
.fade { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.fade.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  .hero { height: 100svh; }
  /* Fara inaltime de derulare progresul ramane 0, deci JS nu ridica niciodata
     valul si pagina ar sta acoperita. Aici cartonul devine static: un voal
     partial peste primul cadru, cu numele lizibil peste el. */
  .hero-intro::before { opacity: .58; }
  .wm { opacity: 1; }
  .hdr .mark { opacity: 1; }
}