/* ==========================================================================
   Tema „Structura” — identitatea MM / KeepBox
   Antracit, off-white, griuri. Geometrie, linii subțiri, fără gradiente și umbre.
   ========================================================================== */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --anthracite:#2A2D31;
  --dark-grey:#4A4E52;
  --light-grey:#D9DADB;
  --off-white:#F4F2ED;
  --white:#FFFFFF;

  --bg:var(--off-white);
  --bg-alt:var(--white);
  --surface:var(--white);
  --surface-2:rgba(42,45,49,.06);
  --stroke:var(--light-grey);
  --stroke-strong:#85898D;
  --tx:var(--anthracite);
  --tx-soft:var(--dark-grey);
  --tx-dim:#5F6468;
  --accent:var(--anthracite);
  --link:var(--anthracite);
  --logo:#2F3740;
  --focus:#2A2D31;
  --focus-ring:rgba(42,45,49,.16);
  --ok:#1F6B45;
  --ok-soft:#E6F1EA;
  --warn:#8A5A00;
  --warn-soft:#FBF1DC;
  --bad:#B3261E;
  --bad-soft:#FBE9E7;

  --btn-bg:var(--anthracite);
  --btn-bg-hover:#16181B;
  --btn-ink:var(--white);
  --btn-ghost-bg:transparent;
  --btn-r:4px;
  --chip-r:4px;
  --chip-on-bg:var(--anthracite);
  --chip-on-line:var(--anthracite);
  --chip-on-ink:var(--white);
  --thumb-r:3px;

  --r-sm:4px;
  --r:6px;
  --r-lg:8px;
  --r-xl:10px;
  --maxw:1240px;
  --nav-h:84px;
  --fw-head:800;
  --ff:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --input-bg:var(--white);
  --art-bg:#EBE7E2;           /* fundalul randărilor de boxe, ca imaginea să se topească în card */
  --hero-rule:rgba(255,255,255,.28);
  --thead-bg:var(--off-white);
  --row-hover:rgba(42,45,49,.035);
  --map-line:rgba(42,45,49,.07);

  --plan-floor:#ECE9E3;
  --plan-wall:var(--anthracite);
  --plan-free:var(--white);
  --plan-free-hover:#DCEBE1;
  --plan-busy:#C9CACB;
  --plan-busy-ink:#4A4E52;
  --plan-focus:#0B57D0;
  --plan-fade:#fff;
  --plan-ink:var(--anthracite);
  --plan-on:var(--anthracite);
  --plan-on-ink:var(--white);

  --calc-out-bg:var(--anthracite);
  --calc-out-ink:var(--white);
  --calc-bar-bg:rgba(255,255,255,.2);
  --calc-bar:var(--white);
  --calc-rule:rgba(255,255,255,.22);
  --calc-ok:#8FD6AC;

  --step-rule:var(--anthracite);
  --step-num:var(--anthracite);

  --cta-bg:var(--anthracite);
  --cta-ink:var(--white);
  --cta-line:var(--anthracite);

  --foot-bg:var(--anthracite);
  --foot-ink:rgba(255,255,255,.72);
  --foot-logo:var(--white);
  --foot-line:rgba(255,255,255,.16);
}

/* Bara de navigare: o placă albă care plutește peste pagină, ca în machetă. */
.nav{top:12px;height:calc(var(--nav-h) - 24px);pointer-events:none}
.nav__inner{pointer-events:auto;background:var(--white);border:1px solid var(--light-grey);border-radius:var(--r-lg);padding:9px 10px 9px 20px;min-height:60px;transition:box-shadow .3s}
.nav.is-stuck .nav__inner{box-shadow:0 10px 30px -12px rgba(42,45,49,.35)}
.nav.is-open{height:auto;align-items:flex-start}

/* Butoanele pe fundal antracit se inversează: alb plin și contur alb. */
.hero .btn--primary,.cta .btn--primary,.calc__out .btn--primary{background:var(--white);color:var(--anthracite)}
.hero .btn--primary:hover,.cta .btn--primary:hover,.calc__out .btn--primary:hover{background:var(--off-white)}
.hero .btn--ghost,.cta .btn--ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.hero .btn--ghost:hover,.cta .btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}

/* Pe suprafețele antracit, conturul de focus e alb: cel antracit nu s-ar vedea. */
.hero :focus-visible,.cta :focus-visible,.calc__out :focus-visible,.foot :focus-visible{outline-color:var(--white)}

/* Hero: coridorul cu boxe, pe toată lățimea. */
.hero{min-height:min(88vh,780px);color:var(--white);background:var(--anthracite);align-items:flex-end;overflow:hidden}
.hero__photo{position:absolute;inset:0}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,28,31,.94) 0%,rgba(26,28,31,.82) 34%,rgba(26,28,31,.3) 68%,rgba(26,28,31,.12) 100%)}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.3rem);max-width:14ch}
.hero__lead{color:rgba(255,255,255,.86)}
.hero__stats{max-width:720px}

.advs{background:var(--white);border-bottom:1px solid var(--light-grey)}

.card:hover{border-color:var(--anthracite)}
.plan__unit.is-free polygon{stroke-width:3}

.cta{border-radius:var(--r-xl)}
/* Grila modulară din fundalul chemării la acțiune: singurul ornament, luat din planul halei. */
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
.cta>*{position:relative}

.phead{background:var(--off-white)}
.acc__q:hover{color:#000}

@media (max-width:960px){
  .nav__inner{padding-right:8px}
  .nav.is-open .nav__inner{padding:9px 12px 12px 20px;box-shadow:0 18px 40px -16px rgba(42,45,49,.45)}
  .nav.is-open .nav__links a{margin-inline:-12px}
}
@media (max-width:760px){
  .hero{min-height:0;padding-top:calc(var(--nav-h) + 150px)}
  .hero__photo::after{background:linear-gradient(180deg,rgba(26,28,31,.25) 0%,rgba(26,28,31,.8) 42%,rgba(26,28,31,.96) 100%)}
  .hero__photo img{object-position:50% 0}
}