/* ============================================================
   TEMEI — Consultanță imobiliară
   Sistem vizual: ALBASTRU DE COPIE (cianotipie)
   Emulsie albastră pensulată pe hârtie · desen alb · grotesc condensat
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* emulsie — trei niveluri, ca să se vadă unde a trecut pensula */
  --ground: #04121F;   /* coala neexpusă — fondul paginii */
  --ink-900:#04121F;
  --ink-800:#082336;
  --ink-700:#0C3252;
  --ink-600:#144568;
  --ink-500:#1E5F8A;

  /* hârtie expusă */
  --paper:  #DEEBF4;
  --paper-2:#C0D8E8;
  --wash:   #7FA9C6;   /* etichete tehnice pe fond închis */
  --wash-2: #3E5F76;   /* aceleași, pe hârtie developată */

  --alarm:  #E4573D;   /* ștampilă / semnal, pe fond închis */
  --alarm-2:#F08A70;
  --alarm-p:#AE3820;   /* varianta pentru panourile deschise */

  --line:   rgba(222,235,244,.22);
  --line-2: rgba(222,235,244,.10);
  --line-3: rgba(222,235,244,.055);

  /* pozitiv (hârtie developată) */
  --pos-bg: #D3E4F0;
  --pos-fg: #082336;
  --pos-line:rgba(8,35,54,.20);
  --pos-line-2:rgba(8,35,54,.10);
  --pos-dim:rgba(8,35,54,.72);

  /* condensat static, nu axă variabilă — cade curat pe Arial Narrow dacă
     fontul web nu ajunge (rețea proastă, blocat de firewall, offline) */
  --disp:"Barlow Condensed","Arial Narrow","Helvetica Neue Condensed",
         "Liberation Sans Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --d0: clamp(3rem, 9.2vw, 8.6rem);
  --d1: clamp(2.4rem, 6.4vw, 5.9rem);
  --d2: clamp(1.95rem, 4.4vw, 3.9rem);
  --d3: clamp(1.5rem, 2.8vw, 2.45rem);
  --d4: clamp(1.15rem, 1.8vw, 1.6rem);
  --body: clamp(.975rem,.3vw + .9rem,1.075rem);
  --body-l: clamp(1.08rem,.65vw + .93rem,1.35rem);
  --meta: .655rem;

  --max: 1600px;
  --gut: clamp(1.05rem, 3.6vw, 3.75rem);
  --sec: clamp(4.5rem, 9vw, 9.5rem);

  --e:   cubic-bezier(.19,1,.22,1);
  --e-io:cubic-bezier(.7,0,.3,1);
  --nav: 60px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ground); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ground); color:var(--paper);
  font-family:var(--sans); font-size:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--alarm); color:var(--paper); }

/* ---------- 2. PRIMITIVE ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); position:relative; }
.sec{ padding-block:var(--sec); position:relative; }
.sec--s{ padding-block:clamp(3rem,6vw,6rem); }
.g{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.9rem,2vw,2.2rem); }

/* Titluri — grotesc condensat, majuscule.
   Interliniaj ≥ .92: majusculele românești (Ă Â Î Ș Ț) au nevoie de aer
   deasupra și dedesubt, altfel semnele se taie. */
.h0,.h1,.h2,.h3{
  margin:0; font-family:var(--disp); font-weight:700; font-stretch:condensed;
  letter-spacing:-.012em; line-height:.98; text-transform:uppercase;
}
.h0{ font-size:var(--d0); line-height:.92; letter-spacing:-.022em; }
.h1{ font-size:var(--d1); line-height:.94; letter-spacing:-.018em; }
.h2{ font-size:var(--d2); line-height:.96; }
.h3{ font-size:var(--d3); }

/* titluri „scrise", nu strigate */
.t1,.t2{ margin:0; font-family:var(--sans); font-weight:600; letter-spacing:-.02em; line-height:1.1; text-transform:none; }
.t1{ font-size:var(--d3); }
.t2{ font-size:var(--d4); }

.lead{ font-size:var(--body-l); line-height:1.45; color:var(--paper); max-width:36ch; }
.p{ margin:0 0 1.05em; max-width:64ch; color:rgba(222,235,244,.74); }
.p--hi{ color:var(--paper); }
.p:last-child{ margin-bottom:0; }

.m{ font-family:var(--mono); font-size:var(--meta); letter-spacing:.14em; text-transform:uppercase; color:var(--wash); margin:0; font-weight:400; }
.m--hi{ color:var(--paper); }
.m--al{ color:var(--alarm-2); }

/* etichetă de secțiune, în chenar — în locul lui „01 — SECȚIUNE" */
.ref{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono);
  font-size:var(--meta); letter-spacing:.14em; text-transform:uppercase; color:var(--wash);
  border:1px solid var(--line); padding:.32rem .5rem; margin:0;
}
.ref b{ color:var(--paper); font-weight:400; }

/* ---------- 3. FOND: grilă de plan + granulație ---------- */
/* grila e tipărită peste toată coala, inclusiv peste câmpurile de emulsie */
.grid-bg{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(var(--line-3) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-3) 1px,transparent 1px),
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:19px 19px,19px 19px,114px 114px,114px 114px;
}
.grain{
  position:fixed; inset:0; z-index:9996; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:var(--grain); background-size:170px 170px;
}
/* wash neuniform de emulsie */
.wash-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(20,69,104,.42), transparent 62%),
    radial-gradient(80% 60% at 88% 96%, rgba(20,69,104,.3), transparent 66%);
}
main,.nav,.foot{ position:relative; z-index:1; }

/* repere de tipar în colțuri */
.regs{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.regs i{ position:absolute; width:15px; height:15px; opacity:.4; }
.regs i::before,.regs i::after{ content:""; position:absolute; background:var(--wash); }
.regs i::before{ left:50%; top:0; width:1px; height:100%; }
.regs i::after{ top:50%; left:0; height:1px; width:100%; }
.regs i:nth-child(1){ left:14px; top:14px; }
.regs i:nth-child(2){ right:14px; top:14px; }
.regs i:nth-child(3){ left:14px; bottom:14px; }
.regs i:nth-child(4){ right:14px; bottom:14px; }
@media (max-width:900px){ .regs{ display:none; } }

/* ---------- 4. CÂMP DE EMULSIE (margini pensulate) ---------- */
/* overflow-x:clip taie doar bavura laterală a pensulei, o păstrează pe cea de sus/jos */
.field{ position:relative; overflow-x:clip; }
.field__bg{
  position:absolute; left:-34px; right:-34px; top:-26px; bottom:-26px; z-index:-1;
  background:var(--ink-700);
  filter:url(#brush);
}
.field--deep .field__bg{ background:var(--ink-800); }
.field--pos .field__bg{ background:var(--pos-bg); }
@media (max-width:760px){ .field__bg{ filter:none; left:-14px; right:-14px; } }

/* panou pozitiv: hârtie developată */
.pos{ background:var(--pos-bg); color:var(--pos-fg); position:relative; z-index:1; }
.pos .p{ color:var(--pos-dim); }
.pos .p--hi,.pos .lead{ color:var(--pos-fg); }
.pos .m{ color:var(--wash-2); }
.pos .m--hi{ color:var(--pos-fg); }
.pos .m--al{ color:var(--alarm-p); }
.pos :focus-visible{ outline-color:var(--alarm-p); }
.pos .ref{ border-color:var(--pos-line); color:var(--wash-2); }
.pos .ref b{ color:var(--pos-fg); }
.pos ::selection{ background:var(--pos-fg); color:var(--pos-bg); }
.pos .dw{ stroke:var(--pos-fg); }
.pos .dwt{ fill:var(--wash-2); }

/* ---------- 5. LINIE DE COTĂ (separator) ---------- */
.dim{ position:relative; height:34px; margin-block:0; }
.dim::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.dim i{ position:absolute; top:calc(50% - 6px); width:1px; height:12px; background:var(--line); }
.dim i:first-child{ left:0; } .dim i:last-child{ right:0; }
.dim span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--ground); padding-inline:.7rem;
  font-family:var(--mono); font-size:var(--meta); letter-spacing:.16em; text-transform:uppercase; color:var(--wash);
}
.pos .dim::before,.pos .dim i{ background:var(--pos-line); }
.pos .dim span{ background:var(--pos-bg); color:var(--wash-2); }

/* ---------- 6. ȘTAMPILĂ ---------- */
.stamp{
  display:inline-block; border:1.5px solid var(--alarm); color:var(--alarm-2);
  padding:.42rem .7rem; font-family:var(--mono); font-size:var(--meta);
  letter-spacing:.18em; text-transform:uppercase; line-height:1.25;
  transform:rotate(-3.2deg); transform-origin:left center;
}
.stamp b{ display:block; font-weight:500; letter-spacing:.1em; }
.stamp--pl{ border-color:var(--line); color:var(--paper); transform:rotate(2deg); }
.pos .stamp{ color:var(--alarm-p); border-color:var(--alarm-p); }
.pos .stamp--pl{ border-color:var(--pos-line); color:var(--pos-fg); }

/* ---------- 7. BUTOANE ---------- */
.btn{
  --bg:var(--paper); --fg:var(--ink-900); --bd:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.65rem;
  padding:.82rem 1.25rem; border:1px solid var(--bd); background:transparent; color:var(--fg);
  cursor:pointer; overflow:hidden; isolation:isolate; border-radius:0;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; line-height:1;
  white-space:nowrap; transition:color .4s var(--e);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--bg); transition:transform .5s var(--e); }
.btn:hover::before{ transform:translateY(-101%); }
.btn:hover{ color:var(--bd); }
.btn svg{ width:13px; height:13px; transition:transform .45s var(--e); }
.btn:hover svg{ transform:translateX(4px); }
.btn--o{ --bg:transparent; --fg:var(--paper); --bd:var(--line); }
.btn--o::before{ background:var(--paper); transform:translateY(101%); }
.btn--o:hover::before{ transform:translateY(0); }
.btn--o:hover{ color:var(--ink-900); }
.btn--al{ --bg:var(--alarm); --fg:var(--paper); --bd:var(--alarm); }
.btn--s{ padding:.6rem .9rem; font-size:.63rem; }
.pos .btn{ --bg:var(--pos-fg); --fg:var(--pos-bg); --bd:var(--pos-fg); }
.pos .btn--o{ --bg:transparent; --fg:var(--pos-fg); --bd:var(--pos-line); }
.pos .btn--o::before{ background:var(--pos-fg); }
.pos .btn--o:hover{ color:var(--pos-bg); }

.lnk{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono);
  font-size:var(--meta); letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.35rem; border-bottom:1px solid var(--line); color:var(--paper);
  transition:gap .4s var(--e), border-color .4s, color .4s;
}
.lnk:hover{ gap:.9rem; color:var(--alarm-2); border-color:var(--alarm); }
.pos .lnk{ color:var(--pos-fg); border-color:var(--pos-line); }
.pos .lnk:hover{ color:var(--alarm-p); border-color:var(--alarm-p); }

/* ---------- 8. NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:900; transition:background .45s, border-color .45s; border-bottom:1px solid transparent; }
.nav.stuck{ background:rgba(4,18,31,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; height:var(--nav); }
.brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brand svg{ width:26px; height:26px; flex:none; }
.brand b{ font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:1.3rem; letter-spacing:.05em; text-transform:uppercase; line-height:1; }
.brand span{ font-family:var(--mono); font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--wash); }
@media (max-width:600px){ .brand span{ display:none; } }

.nav__l{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.9rem); }
.nav__l a{
  font-family:var(--mono); font-size:var(--meta); letter-spacing:.13em; text-transform:uppercase;
  color:rgba(222,235,244,.68); padding-block:.3rem; position:relative; transition:color .3s;
}
.nav__l a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--alarm); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--e); }
.nav__l a:hover{ color:var(--paper); }
.nav__l a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__l a[aria-current="page"]{ color:var(--paper); }
.nav__l a[aria-current="page"]::after{ transform:scaleX(1); background:var(--paper); }
.nav__r{ display:flex; align-items:center; gap:.85rem; flex:none; }
@media (max-width:1080px){ .nav__l,.nav__r .btn{ display:none; } }

.burger{ display:none; width:40px; height:40px; border:1px solid var(--line); background:transparent; cursor:pointer; position:relative; flex:none; }
.burger i{ position:absolute; left:11px; width:18px; height:1px; background:var(--paper); transition:transform .4s var(--e); }
.burger i:nth-child(1){ top:17px; } .burger i:nth-child(2){ top:22px; }
.burger.x i:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.burger.x i:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:block; } }

.sheet{
  position:fixed; inset:0; z-index:890; background:var(--ink-900);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--e); visibility:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:var(--nav) var(--gut) 2rem;
}
.sheet.open{ clip-path:inset(0); visibility:visible; }
.sheet a.big{
  display:flex; align-items:baseline; gap:.9rem; padding-block:.28rem;
  font-family:var(--disp); font-weight:700; font-stretch:condensed; text-transform:uppercase;
  font-size:clamp(2.1rem,11vw,3.8rem); line-height:1.1; letter-spacing:-.005em;
  opacity:0; transform:translateY(20px); transition:opacity .5s var(--e), transform .5s var(--e);
}
.sheet.open a.big{ opacity:1; transform:none; transition-delay:calc(.14s + var(--i)*.055s); }
.sheet__f{ margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.9rem 1.8rem; }
.sheet__f a{ font-family:var(--mono); font-size:var(--meta); letter-spacing:.13em; text-transform:uppercase; color:var(--wash); }

/* ---------- 9. HERO ---------- */
.hero{ padding-top:calc(var(--nav) + clamp(3rem,7vw,6rem)); padding-bottom:clamp(2.5rem,5vw,4rem); position:relative; }
.hero__g{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; }
@media (max-width:980px){ .hero__g{ grid-template-columns:1fr; align-items:start; gap:2.2rem; } }
.hero h1{ margin:.9rem 0 0; }
.hero h1 em{ font-style:normal; color:var(--alarm-2); }
.hero__d{ position:relative; }
.hero__d svg{ width:100%; height:auto; overflow:visible; }

/* bandă densă de specificații */
.spec{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
.spec > div{ padding:.95rem 0; border-left:1px solid var(--line); padding-left:clamp(.6rem,1.3vw,1.2rem); }
.spec > div:first-child{ border-left:0; padding-left:0; }
.spec dt{ font-family:var(--mono); font-size:.56rem; letter-spacing:.17em; text-transform:uppercase; color:var(--wash); }
.spec dd{ margin:.3rem 0 0; font-size:.83rem; font-weight:500; line-height:1.3; }
/* variantă cu două coloane, ca linia de sus să nu curgă peste celule goale */
.spec--2{ grid-template-columns:repeat(2,1fr); max-width:400px; }
@media (max-width:900px){
  .spec{ grid-template-columns:repeat(2,1fr); }
  .spec > div:nth-child(odd){ border-left:0; padding-left:0; }
  .spec > div{ border-bottom:1px solid var(--line); }
}

/* ---------- 10. PAGE HEAD ---------- */
.phead{ padding-top:calc(var(--nav) + clamp(3.5rem,8vw,7rem)); padding-bottom:clamp(2rem,4vw,3.5rem); }
.phead h1{ margin:1.1rem 0 0; }
.phead h1 em{ font-style:normal; color:var(--alarm-2); }
.phead__row{ display:flex; flex-wrap:wrap; gap:1.4rem 2.5rem; align-items:flex-end; justify-content:space-between; margin-top:2rem; }

/* ---------- 11. MARQUEE ---------- */
.marq{ overflow:hidden; border-block:1px solid var(--line); padding-block:.75rem; }
.marq__t{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.marq:hover .marq__t{ animation-play-state:paused; }
.marq__t span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:rgba(222,235,244,.62); padding-inline:1.3rem; display:inline-flex; align-items:center; gap:1.3rem; white-space:nowrap; }
.marq__t span::after{ content:""; width:1px; height:9px; background:var(--alarm); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------- 12. LISTĂ-CUPRINS ---------- */
.idx{ border-top:1px solid var(--line); }
.idx__r{
  display:grid; grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(.9rem,2.5vw,2.6rem); align-items:baseline;
  padding-block:clamp(.95rem,1.7vw,1.35rem); border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .5s var(--e);
}
.idx__r::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--alarm); transition:width .55s var(--e); }
.idx__r:hover{ padding-left:.9rem; }
.idx__r:hover::before{ width:100%; }
.idx__n{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; color:var(--alarm-2); }
.idx__t{ font-weight:600; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.22; letter-spacing:-.012em; }
.idx__d{ font-size:.86rem; line-height:1.5; color:rgba(222,235,244,.66); }
.pos .idx,.pos .idx__r{ border-color:var(--pos-line); }
.pos .idx__d{ color:var(--pos-dim); }
.pos .idx__n{ color:var(--alarm-p); }
@media (max-width:820px){
  .idx__r{ grid-template-columns:3rem 1fr; }
  .idx__d{ grid-column:2; }
}

/* ---------- 13. CARDURI DECALATE ---------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.8rem); align-items:start; }
@media (max-width:900px){ .svc{ grid-template-columns:1fr; } }
.svc__c{ border:1px solid var(--line); padding:clamp(1.1rem,2vw,1.7rem); position:relative; transition:border-color .5s, background .5s; }
.svc__c:nth-child(2){ margin-top:clamp(1.5rem,4vw,3.5rem); }
.svc__c:nth-child(3){ margin-top:clamp(3rem,8vw,7rem); }
@media (max-width:900px){ .svc__c:nth-child(n){ margin-top:0; } }
.svc__c:hover{ border-color:var(--wash); background:rgba(222,235,244,.035); }
.svc__c svg{ width:100%; max-width:150px; height:auto; margin:1.4rem 0; }
.svc__c h3{ margin:0 0 .55rem; font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:1.7rem; line-height:1.05; text-transform:uppercase; letter-spacing:-.005em; }
.svc__c p{ margin:0 0 1.3rem; font-size:.87rem; line-height:1.5; color:rgba(222,235,244,.68); }

/* ---------- 14. PLANȘE ---------- */
.dw{ fill:none; stroke:var(--paper); stroke-width:1.4; stroke-linecap:square; }
.dw--t{ stroke-width:.75; opacity:.55; }
.dw--al{ stroke:var(--alarm); }
.dw--m{ opacity:.34; }
.dwt{ font-family:var(--mono); font-size:7.5px; letter-spacing:.15em; fill:rgba(222,235,244,.5); text-transform:uppercase; }
.dwt--al{ fill:var(--alarm-2); }
/* la fel: fără JS desenele sunt trasate complet din prima */
.js svg .draw{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 1.6s var(--e); transition-delay:calc(var(--i,0)*80ms); }
.js svg.in .draw{ stroke-dashoffset:0; }

.plate{ border:1px solid var(--line); padding:clamp(1rem,2vw,1.6rem); position:relative; }
.plate__h{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.9rem; }
.plate__h b{ font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:1.35rem; line-height:1.1; text-transform:uppercase; letter-spacing:0; }
.plate__f{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.plate__f p{ margin:0; font-size:.85rem; color:rgba(222,235,244,.7); }
.pos .plate,.pos .plate__f{ border-color:var(--pos-line); }
.pos .plate__f p{ color:var(--pos-dim); }
.bar{ height:2px; background:rgba(222,235,244,.16); margin-top:.85rem; overflow:hidden; }
.pos .bar{ background:rgba(8,35,54,.14); }
.bar i{ display:block; height:100%; background:var(--alarm); width:var(--w,50%); }
.js .bar i{ width:0; transition:width 1.3s var(--e) .2s; }
.js .in .bar i{ width:var(--w,50%); }
.barl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.56rem; letter-spacing:.13em; text-transform:uppercase; color:var(--wash); margin-top:.45rem; }
.pos .barl{ color:var(--wash-2); }

/* ---------- 15. SLOTURI FOTO ---------- */
.ph{ position:relative; overflow:hidden; background:rgba(4,18,31,.4); border:1px solid var(--line); }
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-3) 1px,transparent 1px),linear-gradient(90deg,var(--line-3) 1px,transparent 1px);
  background-size:26px 26px;
}
.ph::after{
  content:attr(data-ph); position:absolute; left:.85rem; right:.85rem; bottom:.8rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(222,235,244,.42); line-height:1.65;
}
.ph > img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; filter:saturate(.25) sepia(.35) hue-rotate(163deg) brightness(.92) contrast(1.12); }
.ph > .ph__x{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; }
.ph > .ph__x svg{ width:min(42%,150px); height:auto; opacity:.3; }
.pos .ph{ background:rgba(8,35,54,.06); border-color:var(--pos-line); }
.pos .ph::after{ color:var(--wash-2); }
.ph--45{ aspect-ratio:4/5; } .ph--32{ aspect-ratio:3/2; } .ph--34{ aspect-ratio:3/4; } .ph--11{ aspect-ratio:1/1; }

/* ---------- 16. HOTSPOT ---------- */
.hs__pt{
  position:absolute; z-index:4; width:26px; height:26px; margin:-13px 0 0 -13px; padding:0;
  border-radius:50%; border:1px solid var(--alarm); background:rgba(8,35,54,.8); cursor:pointer;
  display:grid; place-items:center; font-family:var(--mono); font-size:.58rem; color:var(--alarm-2);
  transition:transform .4s var(--e), background .3s, color .3s;
}
.hs__pt::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--alarm); animation:ping 2.6s var(--e) infinite; }
@keyframes ping{ 0%{transform:scale(1);opacity:.75} 70%{transform:scale(2);opacity:0} 100%{opacity:0} }
.hs__pt:hover,.hs__pt.on{ transform:scale(1.2); background:var(--alarm); color:var(--paper); }
.hs__pt.on::after{ animation:none; opacity:0; }
.hs__p{ border:1px solid var(--line); padding:clamp(1.1rem,2vw,1.6rem); min-height:180px; display:flex; flex-direction:column; justify-content:center; }
.hs__p h3{ margin:.7rem 0 .5rem; font-size:1.2rem; font-weight:600; letter-spacing:-.012em; line-height:1.2; }
.hs__p p{ margin:0; font-size:.88rem; color:rgba(222,235,244,.7); }
.pos .hs__p{ border-color:var(--pos-line); }
.pos .hs__p p{ color:var(--pos-dim); }
.pos .hs__pt{ background:rgba(211,228,240,.92); border-color:var(--alarm-p); color:var(--alarm-p); }
.pos .hs__pt::after{ border-color:var(--alarm-p); }
.pos .hs__pt.on,.pos .hs__pt:hover{ background:var(--alarm-p); color:var(--paper); }
.hs__p > div{ animation:fu .5s var(--e); }
@keyframes fu{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ---------- 17. PAȘI ---------- */
.step{ display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:clamp(1.2rem,3.5vw,4rem); padding-block:clamp(2.4rem,5.5vw,5.5rem); border-top:1px solid var(--line); }
@media (max-width:900px){ .step{ grid-template-columns:1fr; gap:1.4rem; } }
.step__l{ position:sticky; top:calc(var(--nav) + 2.5rem); align-self:start; }
@media (max-width:900px){ .step__l{ position:static; } }
.step__n{
  display:block; font-family:var(--disp); font-weight:700; font-stretch:condensed;
  font-size:clamp(3.2rem,7.5vw,6.5rem); line-height:.9; letter-spacing:-.02em;
  color:var(--paper); -webkit-text-stroke:1px var(--paper); margin-bottom:.9rem;
  transition:color .7s var(--e), -webkit-text-stroke-color .7s;
}
.js .step__n{ color:transparent; -webkit-text-stroke-color:var(--wash); }
.js .step.in .step__n{ color:var(--paper); -webkit-text-stroke-color:var(--paper); }
.step h2{ margin:0 0 .8rem; font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:clamp(1.7rem,3.2vw,2.9rem); text-transform:uppercase; letter-spacing:-.008em; line-height:1; }
.li{ list-style:none; margin:1.4rem 0 0; padding:0; }
.li li{ position:relative; padding:.72rem 0 .72rem 1.7rem; border-top:1px solid var(--line-2); font-size:.89rem; color:rgba(222,235,244,.72); }
.li li::before{ content:""; position:absolute; left:0; top:1.2rem; width:8px; height:1px; background:var(--alarm); }
.pos .li li{ border-color:var(--pos-line-2); color:var(--pos-dim); }
.cols2{ column-count:2; column-gap:clamp(1.4rem,3vw,3rem); }
.cols2 > li{ break-inside:avoid; }
@media (max-width:760px){ .cols2{ column-count:1; } }

/* ---------- 18. ACORDEON ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__i{ border-bottom:1px solid var(--line); }
.acc__b{ width:100%; background:none; border:0; cursor:pointer; text-align:left; display:grid; grid-template-columns:2.6rem 1fr 1.4rem; align-items:center; gap:.9rem; padding:clamp(.95rem,1.7vw,1.35rem) 0; }
.acc__b .n{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--alarm-2); }
.acc__b .t{ font-size:clamp(1rem,1.6vw,1.28rem); font-weight:600; line-height:1.25; letter-spacing:-.012em; }
.acc__b .s{ position:relative; width:12px; height:12px; justify-self:end; }
.acc__b .s::before,.acc__b .s::after{ content:""; position:absolute; background:var(--paper); transition:transform .45s var(--e); }
.acc__b .s::before{ left:0; top:5.5px; width:12px; height:1px; }
.acc__b .s::after{ top:0; left:5.5px; height:12px; width:1px; }
.acc__i.open .s::after{ transform:scaleY(0); }
.acc__i.open .s::before{ background:var(--alarm); }
.pos .acc__i.open .s::before{ background:var(--alarm-p); }
.acc__p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e); }
.acc__i.open .acc__p{ grid-template-rows:1fr; }
.acc__p > div{ overflow:hidden; }
.acc__p p{ margin:0 0 1.3rem; padding-left:3.5rem; max-width:68ch; font-size:.9rem; color:rgba(222,235,244,.72); }
.pos .acc,.pos .acc__i{ border-color:var(--pos-line); }
.pos .acc__b .s::before,.pos .acc__b .s::after{ background:var(--pos-fg); }
.pos .acc__b .n{ color:var(--alarm-p); }
.pos .acc__p p{ color:var(--pos-dim); }
@media (max-width:700px){ .acc__b{ grid-template-columns:1.9rem 1fr 1.2rem; } .acc__p p{ padding-left:0; } }

/* ---------- 19. COMPARAȚIE ---------- */
.vs{ border-top:1px solid var(--line); }
.vs__h,.vs__r{ display:grid; grid-template-columns:.75fr 1fr 1fr; gap:clamp(.8rem,2.5vw,2.4rem); }
.vs__h{ padding-bottom:.7rem; }
.vs__h span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wash); }
.vs__h span:last-child{ color:var(--alarm-2); }
.vs__r{ padding-block:clamp(.9rem,1.6vw,1.3rem); border-bottom:1px solid var(--line); align-items:start; }
.vs__r > *{ margin:0; }
.vs__k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wash); padding-top:.25em; }
.vs__a{ font-size:.89rem; color:rgba(222,235,244,.45); }
.vs__b{ font-size:.89rem; color:var(--paper); position:relative; padding-left:1.1rem; }
.vs__b::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--alarm); }
.pos .vs,.pos .vs__r{ border-color:var(--pos-line); }
.pos .vs__h span{ color:var(--wash-2); }
.pos .vs__h span:last-child{ color:var(--alarm-p); }
.pos .vs__k{ color:var(--wash-2); }
.pos .vs__a{ color:rgba(8,35,54,.72); }
.pos .vs__b{ color:var(--pos-fg); }
.pos .vs__b::before{ background:var(--alarm-p); }
@media (max-width:760px){ .vs__h{ display:none; } .vs__r{ grid-template-columns:1fr; gap:.35rem; } .vs__a::before{ content:"Agenție — "; font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; } }

/* ---------- 20. DEFINIȚIE ---------- */
.defn{ border:1.5px solid var(--line); padding:clamp(1.3rem,3vw,2.6rem); position:relative; }
.defn h2{ margin:0; font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:clamp(2.8rem,7.5vw,6rem); text-transform:lowercase; letter-spacing:-.02em; line-height:.96; }
.defn__k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--alarm-2); text-transform:uppercase; margin:.5rem 0 0; }
.defn ol{ list-style:none; counter-reset:d; margin:1.5rem 0 0; padding:0; }
.defn ol li{ counter-increment:d; position:relative; padding:.8rem 0 .8rem 2rem; border-top:1px solid var(--line-2); font-size:.98rem; color:rgba(222,235,244,.74); }
.defn ol li::before{ content:counter(d); position:absolute; left:0; top:.85rem; font-family:var(--mono); font-size:.6rem; color:var(--alarm-2); letter-spacing:.1em; }
.defn ol li b{ color:var(--paper); font-weight:600; }

/* ---------- 21. PRINCIPII ---------- */
.prin{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
@media (max-width:760px){ .prin{ grid-template-columns:1fr; } }
.prin__i{ padding:clamp(1.5rem,3vw,2.6rem) clamp(1rem,2.5vw,2.5rem) clamp(1.5rem,3vw,2.6rem) 0; border-bottom:1px solid var(--line); }
.prin__i:nth-child(even){ border-left:1px solid var(--line); padding-left:clamp(1rem,2.5vw,2.5rem); }
@media (max-width:760px){ .prin__i:nth-child(even){ border-left:0; padding-left:0; } }
.prin__i h2,.prin__i h3{ margin:.7rem 0 .5rem; font-family:var(--disp); font-weight:700; font-stretch:condensed; font-size:clamp(1.45rem,2.4vw,2.1rem); text-transform:uppercase; letter-spacing:-.004em; line-height:1.06; }
.prin__i p{ margin:0; font-size:.88rem; color:rgba(222,235,244,.68); max-width:42ch; }
.pos .prin,.pos .prin__i{ border-color:var(--pos-line); }
.pos .prin__i p{ color:var(--pos-dim); }

/* ---------- 22. FORMULAR ---------- */
.form{ display:grid; gap:clamp(1.4rem,2.6vw,2.2rem); }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.6vw,2.2rem); }
@media (max-width:700px){ .f2{ grid-template-columns:1fr; } }
.f > label{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wash-2); margin-bottom:.6rem; }
.f > label i{ font-style:normal; color:var(--alarm-p); margin-right:.5rem; }
.f input,.f textarea,.f select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--pos-line);
  padding:.55rem 0; font:inherit; font-size:1rem; color:var(--pos-fg); border-radius:0;
  transition:border-color .4s;
}
.f textarea{ resize:vertical; min-height:100px; }
.f input:focus,.f textarea:focus,.f select:focus{ outline:0; border-bottom-color:var(--alarm-p); box-shadow:0 1px 0 0 var(--alarm-p); }
.f input::placeholder,.f textarea::placeholder{ color:var(--wash-2); opacity:.75; }
.f.err input,.f.err textarea{ border-bottom-color:var(--alarm-p); }
.f .msg{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--alarm-p); margin-top:.45rem; display:none; }
.f.err .msg{ display:block; }
.f select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:1.8rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--pos-fg) 50%),linear-gradient(135deg,var(--pos-fg) 50%,transparent 50%);
  background-position:calc(100% - 8px) 1.2rem,calc(100% - 4px) 1.2rem; background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{ display:inline-block; padding:.55rem .9rem; border:1px solid var(--pos-line); font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .35s var(--e); user-select:none; }
.chip input:checked + span{ background:var(--pos-fg); color:var(--pos-bg); border-color:var(--pos-fg); }
.chip input:focus-visible + span{ outline:2px solid var(--alarm); outline-offset:2px; }
.check{ display:flex !important; gap:.7rem; align-items:flex-start; cursor:pointer; }
.f > label.check{ font-family:var(--sans); font-size:.82rem; letter-spacing:0; text-transform:none; color:var(--pos-dim); margin-bottom:0; line-height:1.5; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{ width:16px; height:16px; border:1px solid var(--pos-line); flex:none; margin-top:.2rem; position:relative; transition:background .3s,border-color .3s; }
.check input:checked + .box{ background:var(--pos-fg); border-color:var(--pos-fg); }
.check .box::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--pos-bg); border-width:0 1.5px 1.5px 0; transform:rotate(45deg) scale(0); transition:transform .3s var(--e); }
.check input:checked + .box::after{ transform:rotate(45deg) scale(1); }
.check .tx{ font-size:.82rem; line-height:1.55; }
.f.err .check .box{ border-color:var(--alarm-p); }
.chip input:focus-visible + span{ outline:2px solid var(--alarm-p); outline-offset:2px; }
.formout{ border:1.5px solid var(--alarm-p); padding:clamp(1rem,2vw,1.5rem); margin-top:1.5rem; }
.formout p:last-child{ margin-bottom:0; }

.dl{ border-top:1px solid var(--line); }
.dl__r{ display:grid; grid-template-columns:8rem 1fr; gap:.9rem; padding-block:.85rem; border-bottom:1px solid var(--line); align-items:baseline; }
.dl__r dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wash); }
.dl__r dd{ margin:0; font-size:.93rem; }
.dl__r dd a:hover{ color:var(--alarm-2); }
.pos .dl,.pos .dl__r{ border-color:var(--pos-line); }
.pos .dl__r dt{ color:var(--wash-2); }
@media (max-width:520px){ .dl__r{ grid-template-columns:1fr; gap:.25rem; } }

/* ---------- 23. BLOC DE TITLU (footer) ---------- */
.foot{ border-top:1px solid var(--line); }
.tb{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; }
@media (max-width:900px){ .tb{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tb{ grid-template-columns:1fr; } }
.tb__c{ padding:clamp(1.2rem,2.4vw,2rem) clamp(1rem,2vw,1.8rem) clamp(1.4rem,2.6vw,2.2rem) 0; border-left:1px solid var(--line); padding-left:clamp(1rem,2vw,1.8rem); }
.tb__c:first-child{ border-left:0; padding-left:0; }
@media (max-width:900px){ .tb__c:nth-child(odd){ border-left:0; padding-left:0; } .tb__c{ border-bottom:1px solid var(--line-2); } }
@media (max-width:560px){ .tb__c{ border-left:0; padding-left:0; } }
.tb h2{ margin:0 0 .9rem; font-family:var(--mono); font-weight:400; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--wash); }
.tb ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.tb ul a,.tb ul span{ font-size:.88rem; color:rgba(222,235,244,.78); transition:color .3s; }
.tb ul a:hover{ color:var(--alarm-2); }
.foot__end{ display:flex; flex-wrap:wrap; gap:.7rem 1.8rem; justify-content:space-between; padding-block:1.1rem; border-top:1px solid var(--line); }
.foot__end p{ margin:0; font-family:var(--mono); font-size:.56rem; letter-spacing:.15em; text-transform:uppercase; color:var(--wash); }
.foot__end a:hover{ color:var(--alarm-2); }

/* ---------- 24. REVEAL / PROGRES ----------
   Animațiile de intrare pornesc DOAR dacă JavaScript-ul a rulat: clasa .js e
   pusă de un script inline din <head>. Dacă scriptul nu se încarcă — rețea
   proastă, extensie care blochează, JS oprit — pagina rămâne întreagă și
   lizibilă, doar fără mișcare. */
.js [data-r]{ opacity:0; transform:translateY(20px); transition:opacity .85s var(--e), transform .85s var(--e); transition-delay:var(--d,0ms); }
.js [data-r].in{ opacity:1; transform:none; }
.js [data-r="f"]{ transform:none; }
/* aer sus și jos ca semnele de pe Ă Â Î Ș Ț să nu fie tăiate de overflow */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.18em .06em .16em; margin:-.18em -.06em -.16em; }
.js .split .w > i{ display:inline-block; font-style:inherit; transform:translateY(105%); transition:transform .9s var(--e); transition-delay:calc(var(--i)*32ms); }
.js .split.in .w > i{ transform:none; }

.prog{ position:fixed; top:0; left:0; height:2px; background:var(--alarm); z-index:950; width:0; }

@media (prefers-reduced-motion:reduce){
  .js [data-r],.js [data-r].in{ opacity:1 !important; transform:none !important; }
  .js .split .w > i{ transform:none !important; }
  .js svg .draw{ stroke-dashoffset:0 !important; }
  .js .bar i{ width:var(--w,50%) !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vo .3s var(--e-io) both; }
::view-transition-new(root){ animation:vn .45s var(--e) both; }
@keyframes vo{ to{ opacity:0; } }
@keyframes vn{ from{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } }

/* ---------- 25. UTILITARE ---------- */
.mt1{margin-top:.6rem}.mt2{margin-top:1.2rem}.mt3{margin-top:2rem}.mt4{margin-top:3rem}.mt5{margin-top:clamp(2.8rem,5.5vw,5rem)}
.mb2{margin-bottom:1.2rem}.mb3{margin-bottom:2rem}.mb4{margin-bottom:3rem}.mb5{margin-bottom:clamp(2.8rem,5.5vw,5rem)}
.mx30{max-width:30ch}.mx40{max-width:40ch}.mx52{max-width:52ch}
.fx{display:flex}.fw{flex-wrap:wrap}.g1{gap:.7rem}.g2{gap:1.5rem}.ac{align-items:center}.ab{align-items:flex-end}.jb{justify-content:space-between}
.c12{grid-column-end:span 12}.c9{grid-column-end:span 9}.c8{grid-column-end:span 8}.c7{grid-column-end:span 7}.c6{grid-column-end:span 6}.c5{grid-column-end:span 5}.c4{grid-column-end:span 4}.c3{grid-column-end:span 3}.c2{grid-column-end:span 2}
.s2{grid-column-start:2}.s3{grid-column-start:3}.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}.s10{grid-column-start:10}.s11{grid-column-start:11}
@media (max-width:900px){
  .c9,.c8,.c7,.c6,.c5,.c4,.c3,.c2{ grid-column-end:span 12; }
  .s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11{ grid-column-start:auto; }
}
.sticky{ position:sticky; top:calc(var(--nav) + 2.5rem); align-self:start; }
@media (max-width:900px){ .sticky{ position:static; } }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--alarm); outline-offset:3px; }
.skip{ position:absolute; left:.7rem; top:-4rem; z-index:1000; background:var(--paper); color:var(--ink-900); padding:.6rem .9rem; transition:top .3s; }
.skip:focus{ top:.7rem; }
.defs{ position:absolute; width:0; height:0; overflow:hidden; }