/* ── Design System ──────────────────────────────────────────────────────── */
:root{
  --green:#2d5016;
  --green-mid:#4a7c2f;
  --green-light:#e8f2e0;
  --terra:#d97757;
  --white:#ffffff;
  --off-white:#f8f8f6;
  --text:#1a1a1a;
  --muted:#666666;
  --light:#999999;
  --border:#e5e5e5;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.10);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --container:1200px;
  --header-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit}

.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:60;background:rgba(245,240,235,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e0d8ce}
.header-inner{min-height:80px;display:flex;align-items:center;gap:0;padding:8px 0}
.brand{flex-shrink:0;margin:0 28px;display:flex;align-items:center}
.nav--left{flex:1;display:flex;align-items:center;gap:2px}
.nav--right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px}
.nav--left a,.nav--right a{padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);transition:.2s ease;white-space:nowrap}
.nav--left a:hover,.nav--left a.active,.nav--right a:hover,.nav--right a.active{color:var(--text);background:rgba(0,0,0,.05)}
.nav-contact{padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);transition:.2s ease;display:inline-flex;align-items:center;gap:5px}
.nav-contact:hover,.nav-contact.active{color:var(--text)}
/* Iconita de telefon: verdele marcii. A fost emoji, care se randeaza cu paleta fixa a
   sistemului si NU poate fi colorat din CSS — de aceea aparea rosu. Acum e un SVG cu
   `stroke:currentColor`, deci mosteneste culoarea de aici. */
.nav-phone{color:var(--green);flex-shrink:0}
.nav-contact:hover .nav-phone,.nav-contact.active .nav-phone{color:var(--green-mid)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;z-index:70;margin-left:auto}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:.2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;gap:2px;padding:12px 16px 16px;background:rgba(245,240,235,.97);border-top:1px solid #e0d8ce}
.nav-mobile a{padding:10px 14px;border-radius:8px;font-size:14px;color:var(--muted)}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--text);background:rgba(0,0,0,.05)}
.nav-mobile.nav-open{display:flex}
@media(max-width:860px){
  .nav--left,.nav--right{display:none}
  .nav-toggle{display:flex}
  .brand{margin:0 auto}
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{padding:80px 0 96px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--green);background:var(--green-light);padding:6px 14px;border-radius:999px}
.hero-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.hero h1{margin-top:20px;font-family:'Playfair Display',serif;font-size:clamp(40px,5.5vw,68px);line-height:1.0;letter-spacing:-.5px;color:var(--text)}
.hero h1 em{color:var(--green);font-style:italic}
.hero-sub{margin-top:20px;font-size:17px;line-height:1.75;color:var(--muted);max-width:52ch}
.hero-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.stats{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.stat{padding:20px;background:var(--white);text-align:center}
.stat strong{display:block;font-size:32px;font-weight:700;color:var(--green);line-height:1;font-family:'Playfair Display',serif}
.stat span{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--muted)}
.hero-visual{position:relative}
.hero-image{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}

/* ── Carusel hero ───────────────────────────────────────────────────────────
   Derulare nativa cu scroll-snap. Fara JavaScript, pozele raman utilizabile
   prin tragere cu degetul; butoanele si bulinele doar imping aceeasi derulare. */
.hero-carusel{position:relative}
.hero-carusel-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.hero-carusel-pista::-webkit-scrollbar{display:none}
/* Inaltimea se scrie AICI, nu se lasa mostenita de la `.hero-image img` de mai jos:
   caruselul ar depinde de ordinea regulilor in fisier si s-ar sparge tacut la o reordonare. */
.hero-carusel-pista img{flex:0 0 100%;width:100%;height:480px;object-fit:cover;
  scroll-snap-align:center;display:block}

.hero-carusel-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.18);transition:.2s ease;opacity:0}
.hero-carusel:hover .hero-carusel-nav,.hero-carusel-nav:focus-visible{opacity:1}
.hero-carusel-nav:hover{background:#fff}
.hero-carusel-nav svg{width:18px;height:18px}
.hero-carusel-nav.prev{left:12px}
.hero-carusel-nav.next{right:12px}

/* Umbra: pe un cer alb sau un perete tencuit, bulinele albe translucide dispareau. */
.hero-carusel-buline{position:absolute;bottom:14px;left:0;right:0;
  display:flex;justify-content:center;gap:7px;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.hero-carusel-buline span{width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.55);transition:.2s ease}
.hero-carusel-buline span.activ{background:#fff;width:20px;border-radius:999px}

/* Pe ecrane cu atingere sagetile stau mereu vizibile: „hover" nu exista acolo, iar fara asta
   ar fi complet inaccesibile.
   ⚠️ `any-hover` si `pointer:coarse`, nu doar `hover:none`: pe un laptop cu ecran tactil
   pointerul principal e mausul, deci `hover:none` nu se aplica — iar cine atinge ecranul nu
   vede nicio sageata. Si 44px, nu 40, ca sa treaca pragul de tinta de atingere. */
@media (any-hover:none),(pointer:coarse){
  .hero-carusel-nav{opacity:1;background:rgba(255,255,255,.85);width:44px;height:44px}
  .hero-carusel-nav svg{width:20px;height:20px}
}

/* Hero-ul pe telefon: 480px fix inseamna o decupare verticala ingusta dintr-o randare
   panoramica — subiectul se pierde. */
@media (max-width:760px){
  .hero-image img,.hero-carusel-pista img{height:clamp(260px,62vw,360px)}
}
.hero-image img{width:100%;height:480px;object-fit:cover;display:block}
.hero-badge{position:absolute;bottom:24px;left:24px;background:white;border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-md)}
.hero-badge strong{display:block;font-size:13px;font-weight:700;color:var(--text)}
.hero-badge span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.countdown-wrap{margin-top:24px}
.countdown-wrap p{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.timebox{padding:16px 8px;border-radius:var(--radius-sm);text-align:center;background:var(--off-white);border:1px solid var(--border)}
.num{font-size:28px;font-weight:700;color:var(--green);line-height:1;font-family:'Playfair Display',serif}
.lbl{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--light);margin-top:4px}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;border:0;transition:.2s ease;min-height:44px;touch-action:manipulation}
.btn-primary{background:var(--green);color:var(--white)}
.btn-primary:hover{background:var(--green-mid);transform:translateY(-1px);box-shadow:0 8px 24px rgba(45,80,22,.20)}
.btn-secondary{background:var(--white);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}

/* ── Section ──────────────────────────────────────────────────────────────── */
.section{padding:80px 0;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:0}
.section-alt{background:var(--off-white)}
.section-head{max-width:680px;margin-bottom:48px}
.section-head .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.section-head h2{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.4px;color:var(--text)}
.section-head h2 em{color:var(--green);font-style:italic}
.section-head p{margin-top:14px;font-size:16px;line-height:1.8;color:var(--muted)}

/* ── Page hero ───────────────────────────────────────────────────────────── */
.page-hero{padding:60px 0 40px;border-bottom:1px solid var(--border);background:var(--off-white)}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--green)}
.page-hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.page-hero h1{margin-top:16px;font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,52px);line-height:1.1;letter-spacing:-.4px;color:var(--text)}
.page-hero h1 em{color:var(--green);font-style:italic}
.page-hero p{margin-top:12px;max-width:60ch;font-size:16px;line-height:1.8;color:var(--muted)}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.card-pad{padding:28px}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ── Pillar cards (Despre) ───────────────────────────────────────────────── */
.pillar{padding:28px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white);transition:.2s ease}
.pillar:hover{border-color:var(--green-light);box-shadow:var(--shadow-md);transform:translateY(-4px)}
/* Iconitele cardurilor: SVG cu contur, nu emoji. `color` se mosteneste de SVG prin
   `currentColor`, deci se schimba dintr-un singur loc. */
.pillar-icon{line-height:1;margin-bottom:16px;color:var(--green)}
.pillar-icon svg{width:30px;height:30px;display:block}
.pillar h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px}
.pillar p{font-size:14px;line-height:1.7;color:var(--muted)}

/* ── Timeline ────────────────────────────────────────────────────────────── */
.timeline{display:grid;gap:0}
.timeline-item{display:flex;gap:20px;padding:20px 0}
.timeline-item:not(:last-child){border-bottom:1px solid var(--border)}
.tl-dot{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:14px;font-weight:700;border:2px solid var(--border);background:var(--white)}
.tl-dot.done{background:var(--green);color:var(--white);border-color:var(--green)}
.tl-dot.active{background:var(--terra);color:var(--white);border-color:var(--terra)}
.tl-body{flex:1}
.tl-body h4{font-size:15px;font-weight:700;color:var(--text)}
.tl-body p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.6}
.tl-date{font-size:12px;color:var(--light);margin-top:4px}

/* ── POI / Location ──────────────────────────────────────────────────────── */
.poi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.poi-item{display:flex;gap:12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center}
.poi-item:hover{border-color:var(--green-light);background:var(--off-white)}
.poi-icon{font-size:22px;flex-shrink:0}
.poi-label{font-size:14px;font-weight:600;color:var(--text)}
.poi-dist{font-size:12px;color:var(--muted);margin-top:2px}
.distances-list{display:grid;gap:10px;margin-top:24px}
.dist-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:var(--radius-sm);background:var(--off-white)}
.dist-item span{font-size:14px;color:var(--muted)}
.dist-item strong{font-size:14px;font-weight:700;color:var(--green)}

/* ── Facilities ──────────────────────────────────────────────────────────── */
.facilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facility{padding:24px;border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;transition:.2s ease}
.facility:hover{border-color:var(--green-light);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.facility-icon{font-size:32px;margin-bottom:12px}
.facility h3{font-size:14px;font-weight:700;color:var(--text)}
.facility p{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}

/* ── Packages / Finisaje ─────────────────────────────────────────────────── */
/* ⚠️ `auto-fit`, nu un număr fix de coloane: câte pachete sunt se hotărăște în cod, iar pe
   2026-09-28 „La roșu" a fost scos și au rămas două. Cu `repeat(3,1fr)`, treimea din dreapta
   rămânea goală — pagina arăta ca și cum ar lipsi un card. */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.package{border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:.2s ease}
.package.featured{border-color:var(--green);background:var(--off-white)}
.package-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--green-light);color:var(--green);margin-bottom:16px}
.package.featured .package-badge{background:var(--green);color:var(--white)}
/* ⚠️ Linia despărțitoare stă pe SUBTITLU, nu pe preț.
   Era pe `.package-price`, iar din 2026-09-28 prețul lipsește cu totul când nu e completat
   (`@if` în șablon) — deci cardul rămânea fără nicio linie între antet și listă. Subtitlul e
   întotdeauna acolo. */
.package h3{font-family:'Playfair Display',serif;font-size:28px;color:var(--text);
  margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.package-price{font-size:14px;color:var(--muted);margin-top:-12px;margin-bottom:20px}
.package-list{display:grid;gap:10px}
.package-list li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--text);list-style:none}
.package-list li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0}
.package-list li.excluded::before{content:"—";color:var(--light)}
.package-list li.excluded{color:var(--light)}
.partners{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.partner-tag{font-size:12px;font-weight:600;color:var(--muted);padding:6px 14px;border:1px solid var(--border);border-radius:999px}

/* Linkul către Google Maps de sub butonul hărții.
   ⚠️ Era un `<a>` de 13px fără padding — vreo 20px înălțime, sub pragul de 44px. Contează mai
   mult decât pare: e singura cale spre hartă pentru cine a citit nota despre Google și a ales
   să NU încarce iframe-ul. Adică exact omul cel mai atent la ce-i ceri. */
.harta-extern{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 14px;font-size:13px;color:var(--green);text-decoration:underline;
  touch-action:manipulation}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-item{overflow:hidden;border-radius:var(--radius-md);cursor:pointer}
.gallery-item img{width:100%;height:240px;object-fit:cover;display:block;transition:.3s ease}
.gallery-item:hover img{transform:scale(1.04)}

/* ── Phases ──────────────────────────────────────────────────────────────── */
.phases-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:16px}
.phase-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;border-radius:8px;border:1px solid var(--border);background:var(--white);cursor:pointer;transition:.2s ease;text-align:left;min-width:120px}
.phase-tab:hover{border-color:var(--green-light);background:var(--off-white)}
.phase-tab.active{border-color:var(--green);background:var(--green-light)}
.phase-tab-dot{width:8px;height:8px;border-radius:50%;margin-bottom:4px}
.phase-tab-dot.completed{background:#22c55e}
.phase-tab-dot.in_progress{background:var(--terra)}
.phase-tab-dot.planned{background:var(--border)}
.phase-tab-label{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.phase-tab-date{font-size:11px;color:var(--muted)}
.phase-panel{display:none}
.phase-panel.active{display:block}
.phase-panel-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;background:var(--white)}
.phase-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.phase-big-pct{font-size:56px;font-weight:700;color:var(--green);line-height:1;font-family:'Playfair Display',serif;flex-shrink:0}
.phase-big-pct span{font-size:24px}
.phase-status-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:8px}
.phase-status-badge.completed{background:#dcfce7;color:#16a34a}
.phase-status-badge.in_progress{background:#fef3c7;color:#d97706}
.phase-status-badge.planned{background:var(--off-white);color:var(--muted)}
.phase-bar-lg{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin:16px 0}
.phase-bar-fill-lg{height:100%;border-radius:4px;background:var(--green);transition:width .6s ease}

/* ── Houses ──────────────────────────────────────────────────────────────── */
.houses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.house-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:.2s ease;background:var(--white)}
.house-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.house-cover{height:220px;background:linear-gradient(135deg,var(--green),var(--green-mid));position:relative;overflow:hidden}
.house-cover img{width:100%;height:100%;object-fit:cover}
.house-content{padding:24px}
.house-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.house-top h3{font-family:'Playfair Display',serif;font-size:22px;color:var(--text)}
.tag{font-size:11px;font-weight:700;color:var(--green);padding:4px 12px;border-radius:999px;background:var(--green-light);white-space:nowrap}
.tag.sold{background:#fee2e2;color:#dc2626}
.tag.reserved{background:#fef3c7;color:#d97706}
.meta{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.meta-box{padding:10px;border-radius:8px;background:var(--off-white);text-align:center}
.meta-box strong{display:block;font-size:18px;font-weight:700;color:var(--text)}
.meta-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:3px}
.house-actions{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:16px;transition:.2s ease}
.back-link:hover{color:var(--green)}
.price-tag{display:block;font-size:26px;font-weight:700;color:var(--green);margin-top:10px;font-family:'Playfair Display',serif}

/* ── Developer ───────────────────────────────────────────────────────────── */
.dev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:32px}
.dev-stat{padding:24px;background:var(--white);text-align:center}
/* Mai mic din 2026-10-07: la 36px, titluri ca „Certificat de urbanism: rețele” se rupeau pe trei rânduri. */
.dev-stat strong{display:block;font-size:clamp(18px,1.8vw,22px);font-weight:700;color:var(--green);line-height:1.2;font-family:'Playfair Display',serif;text-wrap:balance;overflow-wrap:break-word}
.dev-stat span{display:block;font-size:13px;color:var(--muted);margin-top:6px}
/* Anexele de pe Dezvoltator (2026-10-07): cod QR · titlu și descriere · „Descarcă PDF”.
   `--qr`: 112px se scanează de pe monitor (la 88px un cod de act dă ~2 pixeli pe modul). */
.anexe-lista{display:grid;gap:12px;--qr:112px}
.anexa-rand{display:flex;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white);transition:border-color .2s ease}
/* Rândul nu e un link — doar butonul. Bordura verde urmează butonul, nu cursorul pe tot rândul. */
.anexa-rand:has(.anexa-buton:hover),.anexa-rand:focus-within{border-color:var(--green)}
/* Colțuri drepte: rotunjite tăiau pătratele de reper ale unui cod decupat strâns. */
.anexa-qr{width:var(--qr);height:var(--qr);object-fit:contain;flex-shrink:0;background:#fff}
/* Fără cod QR, iconița ține locul lui: titlurile încep la fel pe toate rândurile. */
.anexa-icon{flex-shrink:0;margin-inline:calc((var(--qr) - 28px) / 2)}
.anexa-text{flex:1;min-width:0}
.anexa-text strong{display:block;font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px;overflow-wrap:anywhere}
.anexa-text span{display:block;font-size:14px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.anexa-buton{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;padding:11px 20px;border-radius:999px;background:var(--green);color:var(--white);font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s ease;touch-action:manipulation}
.anexa-buton:hover{background:var(--green-mid)}
.anexa-buton:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (max-width:640px){
  .anexe-lista{--qr:72px}
  .anexa-rand{flex-wrap:wrap;gap:14px;padding:16px}
  .anexa-buton{width:100%;justify-content:center}
}
/* Codul QR de pe pagina Dezvoltator (2026-10-07). Fond alb chiar si langa casetele gri:
   un QR pe fond colorat se scaneaza mai greu. */
.dezv-qr{margin:0;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white);text-align:center}
.dezv-qr img{width:min(200px,100%);height:auto;margin:0 auto}
.dezv-qr figcaption{font-size:13px;line-height:1.5;color:var(--muted);margin-top:10px}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-info h3{font-family:'Playfair Display',serif;font-size:28px;color:var(--text);margin-bottom:16px}
.contact-list{display:grid;gap:12px;margin-top:20px}
.contact-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm)}
/* Iconițele de contact sunt SVG cu `stroke="currentColor"`, nu emoji: `font-size` nu le mai
   dimensionează (au width/height proprii), dar `color` le dă culoarea conturului — fără el
   moșteneau negrul textului și arătau a greu, nu a accent. `line-height:0` scoate spațiul
   fantomă de sub linia de bază, ca să se alinieze cu titlul de alături. */
.contact-item-icon{color:var(--green);line-height:0;flex-shrink:0;margin-top:3px}

/* Harta Google, încărcată la cerere. Înălțimea e aici tocmai ca să poată fi schimbată pe
   telefon; pe ecran mic, 420px ar fi înghițit toată pagina. */
/* Planurile caselor, pe fișa fiecărei case (`house-detail.blade.php`). `auto-fit` și nu trei
   coloane fixe: pe telefon se așază singure unul sub altul, fără niciun `@media`.
   (Până la 2026-09-28 grila asta era și pe prima pagină, într-o secțiune ștearsă de atunci.) */
.planuri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:8px}
.planuri-grid figure{margin:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--white);transition:border-color .2s ease}
.planuri-grid a:hover figure{border-color:var(--green)}
/* `aspect-ratio` + `contain`: planurile au proporții diferite, iar `cover` le-ar fi tăiat
   tocmai marginile unde stau cotele. Mai bine spațiu gol decât un plan ciuntit. */
.planuri-grid img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--off-white);display:block;max-width:100%}
.planuri-grid figcaption{padding:12px 14px;font-size:13.5px;color:var(--muted);text-align:center;border-top:1px solid var(--border)}

/* Un plan încărcat ca PDF. Stă aici, nu în șablon, fiindcă îl folosesc DOUĂ pagini: fișa casei
   și fereastra de pe /case.

   ⚠️ `align-self:start` — altfel se întinde pe înălțimea rândului. Un nivel poate avea și
   imagine, și PDF, iar căsuța cu un rând de text devenea un dreptunghi bordurat de ~310px,
   cât figura de alături.

   ⚠️ `min-height` și `line-height` scrise pe fățiș: fără ele înălțimea ieșea 45px — peste
   pragul de 44px, dar numai fiindcă browserul alege singur `line-height:normal`. */
.plan-pdf{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  align-self:start;min-height:56px;line-height:1.35;border-radius:var(--radius-md);
  border:1px solid var(--border);color:var(--green);font-weight:600;font-size:14px;
  text-decoration:none;text-align:center}
.plan-pdf:hover{background:var(--green-light);border-color:var(--green)}

.harta-cadru{width:100%;height:420px;border:0;display:block}
@media (max-width:640px){.harta-cadru{height:300px}}
/* ⚠️ Din 2026-09-28 harta nu mai e o secțiune pe toată lățimea: stă în coloana din dreapta a
   unei `.cards-2`, care rămâne pe DOUĂ coloane până la 760px. În banda de mai jos coloana are
   ~300–430px, iar 420px înălțime făceau din hartă o fâșie verticală — cazul cel mai frecvent
   fiind tableta în picioare (768px). Regula de 640px de deasupra rămâne pentru telefon, unde
   `.cards-2` s-a strans deja la o coloană. */
@media (min-width:761px) and (max-width:1100px){.harta-cadru{height:340px}}
.contact-item strong{font-size:13px;font-weight:700;color:var(--text);display:block}
.contact-item span{font-size:13px;color:var(--muted);margin-top:2px;display:block}
.channels{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.channel-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--text);transition:.2s ease;background:var(--white)}
.channel-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}
.form-wrap{background:var(--off-white);border-radius:var(--radius-lg);padding:32px}
.form-wrap h3{font-family:'Playfair Display',serif;font-size:24px;color:var(--text);margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:8px;background:var(--white);color:var(--text);outline:none;transition:.2s ease;font-size:14px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(45,80,22,.08)}
.form-actions{margin-top:16px}
.form-note{margin-top:10px;font-size:12px;color:var(--light);line-height:1.6}
.success{display:none;margin-top:12px;padding:12px 16px;border-radius:8px;background:#dcfce7;border:1px solid #86efac;color:#16a34a;font-size:14px;line-height:1.6}
.success.success-flash{display:block}
.field-error{display:block;margin-top:4px;font-size:12px;color:#dc2626;font-weight:600}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:0}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-item:first-child{padding-top:0}
.faq-q{font-size:15px;font-weight:700;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;user-select:none}
.faq-q::after{content:"+";font-size:20px;color:var(--green);flex-shrink:0;font-weight:300;transition:.2s ease}
.faq-item.open .faq-q::after{content:"−"}
.faq-a{font-size:14px;line-height:1.8;color:var(--muted);margin-top:12px;display:none}
.faq-item.open .faq-a{display:block}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--text);color:rgba(255,255,255,.7);padding:56px 0 24px}

/* Prima coloană e mai lată (marca + rândul juridic), restul se împart egal.
   `auto-fit` ar fi lăsat coloanele să se întindă când una lipsește — aici numărul lor variază,
   fiindcă o coloană fără linkuri nu se randează deloc. */
.footer-sus{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;padding-bottom:40px}

.footer-marca{max-width:380px}
.footer-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
/* Logo ALB in subsol.

   Sigla e verde inchis pe fundal deschis; in subsolul negru se pierdea aproape complet —
   se vedea doar conturul copacului. `brightness(0)` o face integral neagra, iar `invert(1)`
   o intoarce in alb curat, indiferent ce culori are fisierul. Asa ramane o singura sigla de
   intretinut: nu trebuie generata si tinuta la zi o a doua varianta, care s-ar putea desincroniza
   la urmatoarea schimbare de identitate vizuala.

   `opacity` urca de la .9 la 1: la .9 pe negru, albul devenea gri. */
.footer-logo img{height:30px;width:auto;opacity:1;filter:brightness(0) invert(1)}
.footer-logo span{font-family:'Playfair Display',serif;font-size:17px;color:var(--white)}
.footer-juridic{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.55);margin:0 0 18px}

.footer-social{display:flex;gap:10px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75);transition:.2s ease}
.footer-social a:hover{border-color:var(--white);color:var(--white)}

.footer-coloana{display:flex;flex-direction:column;gap:11px}
.footer-coloana h3{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 4px}
.footer-coloana a{font-size:14px;color:rgba(255,255,255,.8);transition:.2s ease}
.footer-coloana a:hover{color:var(--white)}

.footer-jos{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45)}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.55);transition:.2s ease}
.footer-links a:hover{color:var(--white)}

/* ── Reveal animation ────────────────────────────────────────────────────── */
/* ⚠️ Ascuns DOAR cu clasa `js` pe <html> (pusă în <head>). Fără ea, un script care nu pornește
   lăsa tot conținutul `.reveal` transparent — pagina arăta goală, fără nicio eroare vizibilă. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .houses,.cards-3{grid-template-columns:repeat(2,1fr)}
  .cards-4,.facilities-grid,.dev-stats{grid-template-columns:repeat(2,1fr)}
  /* Cu trei pachete, o coloană avea sens aici. Cu două, încap alături pe toată banda asta. */
  .packages{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .poi-grid{grid-template-columns:1fr}
  .footer-sus{grid-template-columns:repeat(3,1fr)}
  .footer-marca{grid-column:1/-1;max-width:none}
}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav{display:none;position:fixed;top:var(--header-h);left:0;right:0;z-index:58;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--border);padding:12px 16px 20px}
  .nav.nav-open{display:flex}
  .nav a{padding:12px 16px;border-radius:8px;font-size:15px;min-height:44px}
  .hero{padding:48px 0 64px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:1}
  .houses,.cards-3,.cards-2{grid-template-columns:1fr}
  .section{padding:56px 0}
  .page-hero{padding:40px 0 28px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:200px}
  .packages{grid-template-columns:1fr}
}
@media(max-width:560px){
  .container{width:min(var(--container),calc(100% - 24px))}
  .stats{grid-template-columns:1fr}
  .cards-4,.facilities-grid{grid-template-columns:1fr 1fr}
  /* `.dev-stats` rămâne pe 2 coloane (regula de la 1100px). Cu 24px de margine, „Certificat de
     urbanism: rețele” avea ~126px la 375px și se rupea pe 3 rânduri — exact ce se ceruse reparat. */
  .dev-stat{padding:18px 12px}
  .hero-actions,.house-actions{flex-direction:column}
  .hero-actions .btn,.house-actions .btn{width:100%;justify-content:center}
  .channels{flex-direction:column}
  .channel-btn{justify-content:center}
  /* Pe telefon coloanele trec una sub alta; marca ocupă toată lățimea. */
  .footer-sus{grid-template-columns:1fr;gap:28px;padding-bottom:28px}
  .footer-marca{max-width:none}
  .footer-jos{flex-direction:column;gap:12px}
  .footer-links{gap:10px}
}
/* Sub 360px două coloane nu mai încap nici la 18px: câte o cifră pe rând. */
@media(max-width:359px){.dev-stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── Pret pe etape (pagina principala) ──────────────────────────────────────
   Panou inchis la culoare, ca sa se desprinda de restul paginii: e singurul loc
   de pe pagina principala unde se cere o decizie de bani. */
.pret-etape{background:var(--white)}
.pret-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pret-text{background:#1c2b1a;color:#e8ece6;padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.pret-eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9bb894;margin-bottom:18px}
.pret-text h2{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,36px);line-height:1.15;color:#fff;margin:0 0 18px}
.pret-text p{font-size:15px;line-height:1.8;color:#b9c5b4;margin:0}

.pret-card{background:#16240f;padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.pret-eticheta{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#9bb894}
.pret-suma{font-family:'Playfair Display',serif;font-size:clamp(40px,6vw,60px);line-height:1;color:#fff;font-weight:700}
.pret-suma span{font-size:.5em;font-weight:400;color:#9bb894;margin-left:6px}
.pret-urmator{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:600;
  background:rgba(155,184,148,.16);color:#c3d6bc;padding:5px 11px;border-radius:6px}

.pret-bara{margin:10px 0 2px}
.pret-bara-linie{height:3px;background:rgba(255,255,255,.14);border-radius:2px;position:relative}
.pret-bara-umplut{height:100%;background:#9bb894;border-radius:2px;transition:width .4s ease}
.pret-bara-puncte{display:flex;justify-content:space-between;margin-top:-6px}
.pret-bara-puncte span{width:9px;height:9px;border-radius:50%;background:#3c4a37;border:2px solid #16240f}
.pret-bara-puncte span.activ{background:#c3d6bc}

.pret-cta{margin-top:10px;justify-content:center;text-transform:uppercase;letter-spacing:.5px;font-size:13px}
.pret-nota{font-size:11.5px;line-height:1.6;color:#8d9a88;margin:0}

@media (max-width:880px){
  .pret-grid{grid-template-columns:1fr}
  .pret-text,.pret-card{padding:32px 24px}
}

/* ── Masterplan: randare aeriana cu pastile ─────────────────────────────────
   Pastilele se aseaza in PROCENTE peste imagine, deci raman pe casa lor la
   orice latime de ecran. Pozitiile vin din baza de date, per casa. */
.masterplan{position:relative;line-height:0}
/* `aspect-ratio`: pana se incarca imaginea, containerul are inaltime 0 si toate cele 14
   pastile `absolute` stau ingramadite in colt, apoi sar la locul lor. */
.masterplan-img{width:100%;height:auto;display:block;border-radius:12px;
  aspect-ratio:1600/702;background:#e8e4d8}
.masterplan-indiciu{display:none;text-align:center;font-size:12px;color:#6b6455;margin:8px 0 0}
.masterplan-pin{position:absolute;transform:translate(-50%,-50%);
  width:clamp(26px,3.2vw,40px);height:clamp(26px,3.2vw,40px);
  border-radius:50%;border:2px solid rgba(255,255,255,.9);cursor:pointer;
  color:#fff;font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(12px,1.5vw,19px);line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .18s ease,box-shadow .18s ease;
  padding:0}
.masterplan-pin:hover{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 5px 16px rgba(0,0,0,.45)}
/* Conturul de focalizare e obligatoriu: pastilele sunt butoane si se poate ajunge
   la ele cu tastatura, spre deosebire de grilajul de `div`-uri de dinainte. */
.masterplan-pin:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ── Comutator de limba ─────────────────────────────────────────────────────
   Doua etichete scurte, nu un meniu derulant: cu doua limbi, un derulant cere
   doua apasari pentru ceva ce incape intr-una. */
.nav-limbi{display:flex;gap:2px;align-items:center;margin-left:10px;
  border:1px solid var(--border);border-radius:8px;padding:2px;flex-shrink:0}
.nav-limbi a{font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--muted);
  padding:4px 10px;border-radius:6px;transition:.15s ease;line-height:1.4;
  display:flex;align-items:center;min-height:36px}
.nav-limbi a:hover{color:var(--text)}
.nav-limbi a.activ{background:var(--green);color:#fff}
@media (max-width:980px){
  /* Langa butonul de meniu, nu inauntru: limba trebuie sa se poata schimba fara sa
     deschizi meniul, altfel un vorbitor de rusa trebuie sa ghiceasca unde e. */
  .nav-limbi{margin-left:auto;margin-right:8px}
  .nav-limbi a{min-height:40px;padding:4px 12px}
}

/* ⚠️ O SINGURA margine `auto` pe rand. Sub 860px erau patru (doua pe `.brand`, una pe
   `.nav-limbi`, una pe `.nav-toggle`), iar spatiul liber se imparte intre toate — deci sigla
   „centrata" ajungea la un sfert din latime, cu un gol mare dupa ea. */
@media (max-width:860px){
  .brand{margin:0 auto 0 0}
  .nav-toggle{margin-left:0}
}

/* ── Masterplanul pe telefon ────────────────────────────────────────────────
   La latimea ecranului, randarea unui cartier intreg are ~132px inaltime, iar
   pastilele ajung la 3px una de alta — imposibil de nimerit cu degetul, si
   imposibil de marit fara sa se suprapuna. Planul se deruleaza orizontal, la o
   latime la care casele sunt lizibile si pastilele au 44px cu spatiu intre ele. */
@media (max-width:760px){
  .masterplan-scroll{overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch}
  .masterplan{min-width:760px}
  .masterplan-pin{width:44px;height:44px;font-size:20px}
  .masterplan-indiciu{display:block}
}

/* ── Grila cardurilor de pe prima pagina ────────────────────────────────────
   Era stil in linie in sablon, deci niciun media query nu o putea atinge. */
.pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
/* Plasa de siguranta: titlurile vin din administrare, iar un cuvant lung ar fi
   iesit din caseta si ar fi fost taiat de `body{overflow-x:hidden}` — adica ar fi
   disparut fara urma. */
.pillar h3{overflow-wrap:anywhere}
@media (max-width:560px){ .pillar{padding:20px} }
@media (max-width:420px){ .pillar-grid{grid-template-columns:1fr} }

/* ── Bara de etape din sectiunea de pret ────────────────────────────────────
   Bulinele au `space-between`, deci centrul primei e la jumatate de bulina de
   margine, iar umplutura masura de la 0%. La ultima etapa trecea vizibil dincolo
   de centrul ultimei buline. */
.pret-bara-linie{margin:0 4.5px}

/* Butonul se rupea pe doua randuri la 360px, cu majuscule si spatiere de litere. */
@media (max-width:560px){
  .pret-cta{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.35}
}

/* ── Pagina „Cum cumpar” (2026-10-07) ───────────────────────────────────────── */
.cum-subtitlu{margin-top:64px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green)}
/* Fara blocul de pret (sectiunea de pret stinsa), pasii incep sectiunea: fara golul de sus. */
.cum-subtitlu:first-child{margin-top:0}

/* „Pretul pe etape” (2026-10-09), in locul paragrafelor de inceput. Etapa curenta e
   verde inchis, celelalte deschise; insigna „Economisiti” e calda, ca sa se vada suma. */
.cpe-sus{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.cpe-sus-singur{grid-template-columns:1fr}
.cpe-sus-singur .cpe-intro{max-width:760px}
.cpe-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.cpe-intro h2{font-family:'Playfair Display',serif;font-size:clamp(28px,3.6vw,42px);line-height:1.15;letter-spacing:-.3px;color:var(--text)}
.cpe-intro p{margin-top:16px;font-size:16px;line-height:1.8;color:var(--muted)}
.cpe-exemplu{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:center;padding:12px;border-radius:var(--radius-md);background:var(--off-white)}
.cpe-exemplu img{width:100%;height:auto;aspect-ratio:10/9;object-fit:cover;border-radius:var(--radius-sm)}
.cpe-exemplu-eticheta{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.cpe-exemplu strong{display:block;margin:6px 0 8px;font-size:17px;line-height:1.3;color:var(--text)}
.cpe-exemplu p{font-size:13.5px;line-height:1.6;color:var(--muted)}
/* Tinta de atingere de ~44px: padding vertical, cu margin negativ ca textul sa ramana pe loc. */
.cpe-exemplu a{display:inline-block;margin-top:-4px;padding:14px 0;font-size:13.5px;font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cpe-exemplu a:hover{color:var(--green)}
.cpe-exemplu a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

.cpe-etape{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
.cpe-etapa{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--off-white)}
.cpe-etapa-sus{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.cpe-nr{font-size:12px;font-weight:700;color:var(--muted)}
.cpe-acum{padding:3px 10px;border-radius:999px;background:#c9dfb8;color:#1c2b1a;font-size:11.5px;font-weight:700}
.cpe-etapa h3{font-size:15px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
/* `margin-top:auto` impinge pretul in jos: cifrele stau pe aceeasi linie in toate cardurile,
   chiar daca un nume de etapa se rupe pe doua randuri. */
.cpe-pret{margin-top:auto;padding-top:6px;font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.3px;line-height:1.1;color:var(--text);white-space:nowrap}
.cpe-delta{min-height:2.8em;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* `12px`, nu `999px`: pe trei coloane insigna se poate rupe pe doua randuri si devenea ovala. */
.cpe-insigna{padding:5px 12px;border-radius:12px;background:#f6e6d6;color:#7a3e1d;font-size:12.5px;font-weight:700}
.cpe-insigna-gri{background:#ececea;color:#444}
.cpe-curenta{border-color:var(--green);background:var(--green)}
.cpe-curenta .cpe-nr,.cpe-curenta .cpe-delta{color:#c9dfb8}
.cpe-curenta h3,.cpe-curenta .cpe-pret{color:#fff}
.cpe-curenta .cpe-insigna{background:#c9dfb8;color:#1c2b1a}
/* O etapa trecuta: pretul ei nu se mai poate cumpara. Ramane vizibila, dar stearsa — cu
   culori, nu cu `opacity`: la .6 textul gri cobora la 2,4:1, sub pragul de citire. */
.cpe-trecuta{background:var(--white)}
.cpe-trecuta .cpe-pret{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}

/* Preturile pe aceeasi linie in toate cardurile de pe un rand. `margin-top:auto` le alinia doar
   cand partea de sub pret avea aceeasi inaltime peste tot; pe telefon o insigna rupta pe doua
   randuri le decala cu 14–18px. Cu subgrid, fiecare rand (eticheta, nume, pret, crestere,
   insigna) e comun tuturor cardurilor de pe acelasi rand. Fara subgrid (iOS < 16) ramane
   aranjarea de mai sus. */
@supports (grid-template-rows:subgrid){
  .cpe-etape{row-gap:10px}
  .cpe-etapa{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:8px;justify-items:start;align-items:start}
  .cpe-etapa-sus{grid-row:1;justify-self:stretch}
  .cpe-etapa h3{grid-row:2}
  .cpe-pret{grid-row:3;margin-top:0;align-self:end}
  .cpe-delta{grid-row:4;min-height:0}
  .cpe-insigna{grid-row:5}
}
.cpe-nota{margin-top:20px;font-size:13px;line-height:1.6;color:var(--muted)}
.cum-pasi{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:16px}
.cum-pas{padding:24px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white)}
.cum-pas-nr{display:block;font-family:'Playfair Display',serif;font-size:34px;font-weight:700;line-height:1;color:var(--green)}
.cum-pas h3{margin:14px 0 8px;font-size:17px;font-weight:700;color:var(--text)}
.cum-pas p{font-size:14px;line-height:1.7;color:var(--muted)}

.cum-echipa{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cum-membru{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white)}
.cum-rol{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green)}
.cum-membru strong{font-family:'Playfair Display',serif;font-size:20px;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.cum-membru p{font-size:14px;line-height:1.75;color:var(--muted)}
.cum-membru small{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}

/* Intrebarile: `<details>` nativ peste stilul `.faq` existent (care astepta o clasa `.open`
   pusa din JavaScript). Sageata implicita a browserului se ascunde; „+”/„−” raman ale noastre. */
.cum-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
/* Tinta de atingere: spatiul vine din `summary`, nu din `<details>`, ca tot randul intrebarii
   sa se poata apasa (cu padding pe `<details>`, doar textul de ~24px raspundea). */
details.faq-item{padding:0}
details.faq-item:first-child{padding-top:0}
summary.faq-q{list-style:none;padding:18px 0}
details.faq-item .faq-a{margin:0 0 18px}
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
details.faq-item .faq-a{display:block}
details.faq-item[open] .faq-q::after{content:"−"}

/* Lista cu bife: blocul voucherului, fereastra lui si camerele video. */
.cum-lista{list-style:none;display:grid;gap:10px;margin:20px 0}
.cum-lista li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6}
.cum-lista li::before{content:"✓";flex-shrink:0;font-weight:700;color:var(--green)}

.cum-live{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cum-live-cadru{position:relative;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg)}
.cum-live-cadru img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cum-live-insigna{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;letter-spacing:.6px}
.cum-live-insigna::before{content:"";width:8px;height:8px;border-radius:50%;background:#e53935;animation:cumPuls 1.6s ease-in-out infinite}
.cum-live-eticheta{position:absolute;left:14px;bottom:14px;right:14px;width:max-content;max-width:calc(100% - 28px);
  padding:5px 10px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px}
@keyframes cumPuls{50%{opacity:.35}}

/* Blocul voucherului: inchis la culoare, ca sectiunea de pret — e o oferta, nu text de citit. */
.voucher-bloc{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
  padding:48px 44px;border-radius:var(--radius-lg);background:#1c2b1a;color:#e8ece6;box-shadow:var(--shadow-lg)}
.voucher-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9bb894}
.voucher-bloc h2{margin:14px 0 16px;font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,36px);line-height:1.15;color:#fff}
.voucher-bloc p{font-size:15px;line-height:1.8;color:#b9c5b4}
.voucher-bloc .cum-lista li{color:#e8ece6}
.voucher-bloc .cum-lista li::before{color:#9bb894}
.voucher-bloc .cum-lista a,.voucher-popup .cum-lista a{text-decoration:underline;text-underline-offset:3px}
.voucher-bloc .cum-lista a{color:#c3d6bc}
.btn-deschis{background:#e8f2e0;color:#1c2b1a}
.btn-deschis:hover{background:#fff;transform:translateY(-1px)}
.btn-contur{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-contur:hover{border-color:#fff}

.voucher-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;aspect-ratio:1.6/1;
  padding:26px;border-radius:18px;background:linear-gradient(135deg,#f6f2e8,#dccfb2);color:#1c2b1a;
  box-shadow:0 22px 50px rgba(0,0,0,.35);transform:rotate(-3deg)}
.voucher-card-sus{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.voucher-card-suma{display:block;font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,50px);font-weight:700;line-height:1}
.voucher-card-jos{display:block;margin-top:6px;font-size:14px}
.voucher-card-partener{padding-top:10px;border-top:1px solid rgba(28,43,26,.2);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}

/* Fereastra de la deschiderea site-ului. `<dialog>` nativ; `::backdrop` e fundalul. */
.voucher-popup{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;
  padding:32px 28px 28px;border:0;border-radius:var(--radius-lg);background:#1c2b1a;color:#e8ece6;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.voucher-popup::backdrop{background:rgba(0,0,0,.6)}
.voucher-popup .voucher-card{max-width:280px;margin:0 auto 22px;transform:rotate(-2deg)}
.voucher-popup h2{margin:10px 0 12px;font-family:'Playfair Display',serif;font-size:clamp(22px,4vw,28px);line-height:1.2;color:#fff}
.voucher-popup p{font-size:15px;line-height:1.7;color:#b9c5b4}
.voucher-popup .cum-lista{margin:16px 0}
.voucher-popup .cum-lista li{color:#e8ece6;font-size:14.5px}
.voucher-popup .cum-lista li::before{color:#9bb894}
.voucher-popup .cum-lista a{color:#c3d6bc}
.voucher-popup-butoane{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.voucher-popup-inchide{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.voucher-popup-inchide:hover{background:rgba(255,255,255,.2)}
.voucher-popup-inchide:focus-visible,.voucher-popup .btn:focus-visible{outline:2px solid #c3d6bc;outline-offset:2px}

@media (max-width:1100px){
  .cum-pasi{grid-template-columns:repeat(2,1fr)}
  .cpe-etape{grid-template-columns:repeat(3,1fr);column-gap:10px}
}
/* Intre 861 si 1100px coloana cardului „Exemplu de calcul” e ingusta: poza deasupra textului. */
@media (min-width:861px) and (max-width:1100px){
  .cpe-exemplu{grid-template-columns:1fr}
  .cpe-exemplu img{aspect-ratio:16/10}
}
@media (max-width:860px){
  .cpe-sus,.cum-faq,.cum-live,.voucher-bloc{grid-template-columns:1fr;gap:32px}
  .cum-echipa{grid-template-columns:1fr}
  .voucher-card{max-width:340px}
}
@media (max-width:560px){
  .cum-pasi{grid-template-columns:1fr}
  /* Doua coloane si pe telefon: cinci carduri unul sub altul ar fi un ecran intreg de derulat. */
  .cpe-etape{grid-template-columns:repeat(2,1fr);gap:10px}
  .cpe-etapa{padding:16px 14px}
  /* La 360px „Economisiți 20 000 €” nu încape pe un rând: rupt, colțurile rotunde de tot arătau a ovală. */
  .cpe-insigna{font-size:11.5px;padding:4px 10px;border-radius:10px}
  .cpe-exemplu{grid-template-columns:1fr}
  .cpe-exemplu img{aspect-ratio:16/10}
}
/* Sub 360px (ex. ecranul exterior al telefoanelor pliabile) pretul nu mai incapea in card. */
@media (max-width:359px){
  .cpe-etapa{padding:14px 12px}
  .cpe-pret{font-size:18px}
  .voucher-bloc{padding:32px 22px}
  .voucher-card{transform:none}
  /* Sus mai mult loc: cardul rotit acoperea butonul × la 360–385px (lățimea ferestrei e
     aproape cea a cardului), iar atingerea cădea pe card. */
  .voucher-popup{padding:64px 20px 22px}
  .voucher-popup-butoane .btn{width:100%;justify-content:center}
}

/* ── Calculatorul pe tipuri de casa (2026-10-07) ────────────────────────────
   File TIP 1 / TIP 2 deasupra pretului, ca in macheta proprietarului. Fiecare tip
   are panoul lui; `hidden` le ascunde pe celelalte. */
.pret-tipuri{display:flex;gap:10px;flex-wrap:wrap}
.pret-tip{border:0;border-radius:8px;padding:10px 18px;min-height:44px;cursor:pointer;
  font-size:14px;font-weight:500;background:#b8bcb3;color:#3a4036;transition:background .15s ease,color .15s ease}
.pret-tip:hover{background:#c9ccc4}
.pret-tip[aria-selected="true"]{background:var(--green);color:#fff}
.pret-tip:focus-visible{outline:2px solid #c3d6bc;outline-offset:2px}
.pret-panou{display:flex;flex-direction:column;gap:14px}
.pret-panou[hidden]{display:none}
.pret-panou:focus-visible{outline:2px solid #c3d6bc;outline-offset:6px;border-radius:6px}

/* Etichetele de sub buline: pretul de pornire la prima, „+6.000” la celelalte.
   Pozitionate in procente (ca bulinele cu `space-between`), deci raman sub bulina
   lor la orice latime. Prima se aliniaza la stanga, ultima la dreapta, ca sa nu
   iasa din card. */
.pret-bara-etichete{position:relative;height:18px;margin:0 4.5px;font-size:12.5px;line-height:18px}
.pret-bara-etichete span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-weight:600;color:#e8ece6}
.pret-bara-etichete span:first-child{transform:none;font-weight:400;color:#8d9a88}
.pret-bara-etichete span:last-child:not(:first-child){transform:translateX(-100%)}
@media (max-width:420px){ .pret-bara-etichete{font-size:11px} }
/* Unde randul e ingust (telefoane pana la ~400px si banda 881–960px, cand cardul de pret
   are doar jumatate din latime), pretul de pornire se atingea de „+6.000”. Coboara pe un
   al doilea rand, sub celelalte etichete. */
@media (max-width:400px),(min-width:881px) and (max-width:960px){
  .pret-bara-etichete{height:36px}
  .pret-bara-etichete span:first-child{top:18px}
}