/* ==========================================================================
   Credit Plus — foaie de stil unică
   Concept: "diferența". Pereche de valori, cu golul dintre ele scos în față.
   Aurul apare EXCLUSIV pe cifra diferenței. Nicăieri altundeva.
   ========================================================================== */

:root{
  --ink:#141B3D; --ink-2:#232C57; --ink-3:#39426F;
  --paper:#F5F6F8; --paper-2:#E9ECF3; --line:#DCDFE8;
  --muted:#5B6480;
  --plus:#0E9E7E; --plus-50:#E4F4EF;
  --minus:#C4534B; --minus-50:#FAEDEC;
  --gold:#F0BC4E;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:20px; --maxw:720px; --r:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
body{
  margin:0; background:#fff; color:var(--ink); font-family:var(--ui);
  font-size:16px; line-height:1.6; font-variant-numeric:tabular-nums;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--disp); font-weight:700; margin:0; letter-spacing:-.02em}
h1{font-size:31px; line-height:1.1}
h2{font-size:24px; line-height:1.18; margin:0 0 12px}
h3{font-size:17px; line-height:1.3; font-weight:500}
p{margin:0 0 15px}
a{color:var(--ink)}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{position:static; display:block; background:var(--gold); color:var(--ink);
  padding:12px; text-align:center; font-weight:600}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
section{padding:44px 0}
.muted{color:var(--muted)}
.sm{font-size:14px; line-height:1.55}
.tight{margin-bottom:6px}

/* ---------------------------------------------------------------- marca */
.brand{font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em;
  text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:7px}
.brand em{font-style:normal; color:var(--gold)}
.brand i{width:8px; height:8px; border-radius:50%; background:var(--gold)}

/* ---------------------------------------------------------------- antet */
.nav{background:var(--ink); color:#fff; position:relative; z-index:70}
.nav .in{display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px}
.nav a{color:#fff}
.burger{background:none; border:1px solid rgba(255,255,255,.28); border-radius:7px;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; padding:0}
.burger span{display:block; width:19px; height:1.6px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px;
  height:1.6px; background:#fff}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu{display:none; border-top:1px solid rgba(255,255,255,.14); padding:8px 0 18px}
.menu.open{display:block}
.menu a{display:block; padding:12px 0; text-decoration:none; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.09)}
.menu a[aria-current]{color:var(--gold)}
.menu .grp{font-size:12px; color:#8E98C4; padding:16px 0 4px; font-weight:600}

/* ---------------------------------------------------------------- eroi */
.hero{background:var(--ink); color:#fff}
.hero .wrap{padding-top:30px; padding-bottom:40px}
.hero h1{margin-bottom:12px}
.hero h1 u{text-decoration:none; color:var(--gold)}
.hero .sub{color:#A9B2D4; max-width:36em}
.crumb{font-size:13px; color:#8E98C4; margin-bottom:16px}
.crumb a{color:#A9B2D4}

/* -------------------------------------------------- registrul / calculator */
.ledger{background:var(--ink-2); border-radius:12px; overflow:hidden; margin-top:24px}
.ledger.light{background:#fff; border:1px solid var(--line)}
.ledger-in{padding:16px 18px 4px}
.lrow{display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.11)}
.ledger.light .lrow{border-bottom-color:var(--line)}
.lrow:last-of-type{border-bottom:0}
.lrow label{font-size:14px; color:#C3CAE6; font-weight:500}
.ledger.light .lrow label{color:var(--ink)}
.lrow .box{display:flex; align-items:center; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:7px; transition:border-color .15s}
.ledger.light .lrow .box{background:#fff; border-color:var(--line)}
.lrow .box:focus-within{border-color:var(--gold); background:rgba(240,188,78,.09)}
.ledger.light .lrow .box:focus-within{background:#fff; border-color:var(--ink)}
.lrow input{width:92px; border:0; background:transparent; color:#fff; text-align:right;
  font:700 17px var(--disp); padding:10px 4px 10px 10px}
.ledger.light .lrow input{color:var(--ink)}
.lrow input:focus{outline:0}
.lrow .u{padding:0 10px 0 3px; font-size:13px; color:#8E98C4}
.ledger.light .lrow .u{color:var(--muted)}
.segs{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 0 4px}
.segs input{position:absolute; opacity:0; width:0; height:0}
.segs label{display:flex; align-items:center; justify-content:center; min-height:46px;
  padding:8px; text-align:center; border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; font-weight:500; cursor:pointer; background:#fff; color:var(--ink)}
.segs input:checked+label{border-color:var(--ink); border-width:2px; background:var(--paper)}
.segs input:focus-visible+label{outline:3px solid var(--gold); outline-offset:2px}

/* banda diferenței — elementul semnătură al brandului */
.delta{background:var(--gold); color:var(--ink); padding:16px 18px 18px}
.delta .k{font-size:13px; font-weight:600; margin-bottom:2px}
.delta .n{font-family:var(--disp); font-weight:700; font-size:42px; line-height:1;
  letter-spacing:-.03em}
.delta .n small{font-size:16px; font-weight:500; letter-spacing:0}
.delta .tot{margin-top:8px; font-size:14px; font-weight:500}
.delta.zero{background:var(--paper-2); color:var(--muted)}
.delta.zero .n{color:var(--ink)}
.delta.warn{background:var(--minus-50); color:var(--minus)}
.delta.warn .n{color:var(--ink)}

.bars{display:grid; gap:9px; margin-top:20px}
.bline{display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:11px;
  font-size:13px; color:#A9B2D4}
.bline .t{height:11px; border-radius:99px; background:rgba(255,255,255,.13)}
.on-light .bline{color:var(--muted)}
.on-light .bline .t{background:var(--paper-2)}
.bline .t i{display:block; height:100%; border-radius:99px; width:0;
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.bline .t i.now{background:#6E78A8}
.bline .t i.new{background:var(--plus)}
.bline b{color:#fff; font-weight:600; font-size:14px}
.on-light .bline b{color:var(--ink)}
.note{margin-top:16px; font-size:13px; color:#8E98C4; line-height:1.5}
.on-light .note{color:var(--muted)}

/* ---------------------------------------------------------------- butoane */
.btn{display:block; width:100%; padding:16px 20px; border:0; border-radius:var(--r);
  font:600 16px/1.2 var(--ui); text-align:center; text-decoration:none; cursor:pointer;
  transition:background .15s}
.b-gold{background:var(--gold); color:var(--ink)}
.b-gold:hover{background:#E5AC33}
.b-line{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.32)}
.b-line:hover{background:rgba(255,255,255,.08)}
.b-ink{background:var(--ink); color:#fff}
.b-ink:hover{background:var(--ink-2)}
.b-out{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn+.btn{margin-top:9px}
.cta{margin-top:24px}

/* ---------------------------------------------------------------- liste */
.src{list-style:none; margin:20px 0 0; padding:0}
.src li{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line)}
.src li:first-child{border-top:1px solid var(--line)}
.src h3{margin-bottom:3px; font-weight:600}
.src p{margin:0; font-size:14px; color:var(--muted)}
.tag{font-family:var(--disp); font-weight:700; font-size:14px; white-space:nowrap;
  color:var(--plus)}
.tag.neg{color:var(--minus)}

ul.plain{list-style:none; margin:16px 0; padding:0}
ul.plain li{padding:7px 0 7px 24px; position:relative}
ul.plain li::before{content:"+"; position:absolute; left:3px; top:6px; color:var(--plus);
  font:700 17px var(--disp)}
ul.plain.neg li::before{content:"–"; color:var(--minus)}

/* -------------------------------------------------------------- comparație */
.vs{display:grid; margin-top:22px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden}
.vs>div{padding:20px}
.vs .a{background:var(--paper)}
.vs .b{background:var(--ink); color:#fff}
.vs h3{font-family:var(--disp); font-weight:700; font-size:16px; margin-bottom:10px}
.vs .b h3{color:var(--gold)}
.vs ul{list-style:none; margin:0; padding:0; font-size:15px}
.vs li{padding:6px 0 6px 22px; position:relative}
.vs .a li{color:var(--muted)}
.vs .a li::before{content:"–"; position:absolute; left:4px; color:var(--minus); font-weight:700}
.vs .b li::before{content:"+"; position:absolute; left:2px; color:var(--gold); font-weight:700}

/* ---------------------------------------------------------------- tabel */
.tbl{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.tbl th{text-align:left; background:var(--ink); color:#fff; font-weight:600; font-size:14px;
  padding:11px 12px}
.tbl td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--paper)}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------------------------------------------------------------- pași */
.steps{counter-reset:s; list-style:none; margin:22px 0 0; padding:0}
.steps li{counter-increment:s; display:grid; grid-template-columns:34px 1fr; gap:14px;
  padding-bottom:24px; position:relative}
.steps li::before{content:counter(s); grid-column:1; width:30px; height:30px;
  border-radius:50%; border:1.5px solid var(--ink); font:700 14px/27px var(--disp);
  text-align:center}
.steps li:not(:last-child)::after{content:""; position:absolute; left:15px; top:34px;
  bottom:2px; width:1.5px; background:var(--line)}
.steps h3{margin-bottom:2px; font-weight:600}
.steps p{margin:0; font-size:15px; color:var(--muted)}
.when{font-family:var(--disp); font-weight:500; font-size:13px; color:var(--plus);
  display:block; margin-top:5px}

/* ---------------------------------------------------------------- autoritate */
.who{display:grid; gap:16px; align-items:start; margin-top:20px;
  border:1px solid var(--line); border-radius:10px; padding:20px}
.who .ph{width:96px; height:96px; border-radius:50%; background:var(--paper-2);
  display:grid; place-items:center; font-size:11px; color:var(--muted); text-align:center;
  padding:10px; flex:0 0 auto}
.who h3{font-family:var(--disp); font-weight:700; font-size:18px; margin-bottom:2px}
.who .role{font-size:14px; color:var(--muted); margin-bottom:10px}
.who p{font-size:15px; margin-bottom:10px}

/* ---------------------------------------------------------------- formular */
.form{background:var(--paper)}
.f{margin:0 0 15px}
.f label{display:block; font-size:15px; font-weight:500; margin-bottom:6px}
.f .box{display:flex; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.f .box:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px var(--paper-2)}
.f input,.f textarea{width:100%; border:0; background:transparent; padding:14px 13px;
  font:400 16px var(--ui); color:var(--ink)}
.f textarea{min-height:96px; resize:vertical}
.f input:focus,.f textarea:focus{outline:0}
.drop{display:block; padding:17px; border:1.5px dashed var(--line); border-radius:var(--r);
  text-align:center; font-size:15px; color:var(--muted); cursor:pointer; background:#fff}
.drop:hover{border-color:var(--ink); color:var(--ink)}
.drop input{position:absolute; opacity:0; width:0; height:0}
.ok{display:flex; gap:11px; align-items:flex-start; margin:16px 0; font-size:13px;
  color:var(--muted); line-height:1.5}
.ok input{width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--plus)}
.msg{margin-top:13px; font-size:13px; color:var(--muted)}
.msg.err{color:var(--minus); font-weight:500}
.hp{position:absolute; left:-9999px}

/* ---------------------------------------------------------------- întrebări */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative;
  font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:6px; top:13px; font:700 22px var(--disp);
  color:var(--gold); line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px; color:var(--muted); font-size:15px}

/* ---------------------------------------------------------------- carduri link */
.cards{display:grid; gap:12px; margin-top:20px}
.card{display:block; padding:18px; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; transition:border-color .15s,background .15s}
.card:hover{border-color:var(--ink); background:var(--paper)}
.card h3{font-family:var(--disp); font-weight:700; font-size:17px; margin-bottom:4px}
.card p{margin:0; font-size:14px; color:var(--muted)}

/* ---------------------------------------------------------------- text legal */
.prose h2{font-size:20px; margin-top:30px}
.prose h3{font-size:16px; font-weight:600; margin-top:20px; margin-bottom:6px}
.prose ul{padding-left:22px} .prose li{margin-bottom:6px}
.warnbox{background:var(--minus-50); border-left:3px solid var(--minus); padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0; font-size:14px; margin:18px 0}
.infobox{background:var(--plus-50); border-left:3px solid var(--plus); padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0; font-size:14px; margin:18px 0}

/* ---------------------------------------------------------------- subsol */
footer{background:var(--ink); color:#8E98C4; padding:36px 0 30px; font-size:13px}
footer .brand{color:#fff}
footer a{color:#C3CAE6}
.fnav{margin:20px 0; display:grid; gap:22px}
.fnav div strong{display:block; color:#fff; font-size:12px; margin-bottom:9px; font-weight:600}
.fnav a{display:block; padding:5px 0; text-decoration:none}
.legal{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  line-height:1.65}

/* ---------------------------------------------------------------- bara fixă */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center;
  gap:11px; padding:9px var(--pad) calc(9px + env(safe-area-inset-bottom));
  background:var(--ink); border-top:1px solid rgba(255,255,255,.14)}
.bar .d{flex:1; min-width:0; line-height:1.15}
.bar .d span{display:block; font-size:11px; color:#8E98C4}
.bar .d b{font-family:var(--disp); font-size:18px; color:var(--gold)}
.bar .go{flex:0 0 auto; padding:13px 17px; border-radius:var(--r); background:var(--gold);
  color:var(--ink); font:600 15px var(--ui); text-decoration:none; white-space:nowrap}
.bar .wa{flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); display:grid; place-items:center; color:#fff}
.bar .wa svg{width:22px; height:22px}

/* ---------------------------------------------------------------- desktop */
@media (min-width:760px){
  :root{--pad:34px}
  h1{font-size:44px} h2{font-size:31px}
  section{padding:64px 0}
  .hero .wrap{padding-top:42px; padding-bottom:56px}
  .btn{display:inline-block; width:auto; min-width:250px}
  .btn+.btn{margin:0 0 0 10px}
  .vs{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .delta .n{font-size:54px}
  .who{grid-template-columns:96px 1fr; gap:22px}
  .fnav{grid-template-columns:repeat(3,1fr)}
  body{padding-bottom:0}
  .bar{display:none}
  .burger{display:none}
  .menu{display:flex !important; gap:22px; border:0; padding:0; align-items:center}
  .menu a{border:0; padding:0; font-size:15px}
  .menu .grp{display:none}
  .nav .in{padding-top:18px; padding-bottom:18px}
}

/* ------------------------------------------------- blocul de autoritate */
.who{grid-template-columns:1fr; background:#fff}
.portret{width:120px; height:120px; border-radius:50%; overflow:hidden; position:relative;
  background:var(--paper-2); flex:0 0 auto}
.portret img{width:100%; height:100%; object-fit:cover; display:block}
.portret.gol::after{content:"portret\A assets/adrian-vuta.webp"; white-space:pre-line;
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:10.5px; line-height:1.4; color:var(--muted); padding:12px}
.who .name{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.02em;
  margin:0 0 2px}
.who .role{font-size:14px; color:var(--muted); margin:0 0 12px}
.who .rule{width:44px; height:3px; background:var(--gold); border:0; margin:0 0 14px;
  border-radius:2px}
.who .lines{list-style:none; margin:14px 0 0; padding:0; font-size:14px}
.who .lines li{padding:5px 0 5px 22px; position:relative; color:var(--muted)}
.who .lines li::before{content:"+"; position:absolute; left:3px; top:4px; color:var(--plus);
  font:700 16px var(--disp)}
.who .lines a{font-weight:600; color:var(--ink)}

/* varianta compactă, pentru prima pagină */
.mini{display:flex; gap:16px; align-items:center; margin-top:20px; padding:18px;
  border:1px solid var(--line); border-radius:10px; background:#fff}
.mini .portret{width:74px; height:74px}
.mini .name{font-family:var(--disp); font-weight:700; font-size:17px; margin:0}
.mini p{margin:2px 0 0; font-size:13.5px; color:var(--muted); line-height:1.45}
.mini a{font-weight:600}

@media (min-width:760px){
  .who{grid-template-columns:120px 1fr; gap:26px}
}

/* ---------------------------------------- captura rapidă, sub banda de diferență */
.quick{background:var(--ink-3); padding:16px 18px 18px}
.quick p{margin:0 0 10px; font-size:14px; color:#D5DBEF; font-weight:500}
.quick .row{display:grid; grid-template-columns:1fr; gap:9px}
.quick .box{display:flex; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r)}
.quick .box:focus-within{border-color:var(--gold); background:rgba(240,188,78,.1)}
.quick input{width:100%; border:0; background:transparent; color:#fff; padding:14px 13px;
  font:500 16px var(--ui)}
.quick input::placeholder{color:#8E98C4}
.quick input:focus{outline:0}
.quick button{border:0; border-radius:var(--r); background:var(--gold); color:var(--ink);
  font:600 16px var(--ui); padding:15px 18px; cursor:pointer}
.quick button:hover{background:#E5AC33}
.quick .fine{margin:10px 0 0; font-size:12px; color:#8E98C4; line-height:1.45}
.quick .fine.err{color:#F5B7B1; font-weight:500}
.on-light .quick{background:var(--paper)}
.on-light .quick p{color:var(--ink)}
.on-light .quick .box{background:#fff; border-color:var(--line)}
.on-light .quick input{color:var(--ink)}
.on-light .quick input::placeholder{color:var(--muted)}
.on-light .quick .fine{color:var(--muted)}
.sold{margin-top:12px; font-size:13px; color:#A9B2D4}
.sold b{color:#fff; font-weight:600}
.on-light .sold{color:var(--muted)} .on-light .sold b{color:var(--ink)}

/* ---------------------------------------- cazuri reale */
.cases{display:grid; gap:12px; margin-top:20px}
.case{border:1px solid var(--line); border-radius:10px; padding:18px}
.case .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:10px}
.case .who2{font-weight:600; font-size:15px}
.case .res{font-family:var(--disp); font-weight:700; font-size:17px; color:var(--plus);
  white-space:nowrap}
.case p{margin:0; font-size:14px; color:var(--muted)}
.case .meta{margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}
.case .meta b{color:var(--ink); font-weight:600}

/* ---------------------------------------- monitorizare */
.mono{background:var(--ink); color:#fff; border-radius:12px; padding:22px; margin-top:22px}
.mono h3{font-family:var(--disp); font-weight:700; font-size:19px; color:var(--gold);
  margin-bottom:8px}
.mono p{color:#A9B2D4; font-size:15px}
.mono .quick{background:transparent; padding:12px 0 0}

/* ---------------------------------------- calificator pe paginile de nișă */
.ql{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px}
.ql .h{background:var(--ink); color:#fff; padding:16px 18px}
.ql .h h3{font-family:var(--disp); font-weight:700; font-size:18px; color:#fff}
.ql .h p{margin:4px 0 0; font-size:14px; color:#A9B2D4}
.ql .b{padding:18px}
.ql legend{font-weight:500; font-size:15px; margin-bottom:9px}

@media (min-width:560px){
  .quick .row{grid-template-columns:1fr auto}
}
@media (min-width:760px){
  .cases{grid-template-columns:repeat(3,1fr)}
}

/* ---------------------------------------- simulatorul de risc la dobândă */
.stress{margin-top:20px; padding:16px 18px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13)}
.on-light .stress{background:var(--paper); border-color:var(--line)}
.stress .sh{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14px; color:#C3CAE6; font-weight:500; margin-bottom:12px}
.on-light .stress .sh{color:var(--ink)}
.stress .sh b{font-family:var(--disp); font-size:18px; color:var(--gold)}
.on-light .stress .sh b{color:var(--minus)}
.stress input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; cursor:pointer; margin:0}
.stress input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:99px;
  background:rgba(255,255,255,.18)}
.stress input[type=range]::-moz-range-track{height:6px; border-radius:99px;
  background:rgba(255,255,255,.18)}
.on-light .stress input[type=range]::-webkit-slider-runnable-track{background:var(--paper-2)}
.on-light .stress input[type=range]::-moz-range-track{background:var(--paper-2)}
.stress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--gold); margin-top:-10px; border:3px solid var(--ink)}
.stress input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ink)}
.on-light .stress input[type=range]::-webkit-slider-thumb{border-color:#fff}
.on-light .stress input[type=range]::-moz-range-thumb{border-color:#fff}
.stress .ticks{display:flex; justify-content:space-between; font-size:11px; color:#8E98C4;
  margin:-2px 0 12px}
.on-light .stress .ticks{color:var(--muted)}
.srow{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px;
  color:#A9B2D4; border-bottom:1px solid rgba(255,255,255,.08)}
.on-light .srow{color:var(--muted); border-bottom-color:var(--line)}
.srow:last-of-type{border-bottom:0}
.srow b{font-family:var(--disp); font-size:16px; color:#fff; white-space:nowrap}
.on-light .srow b{color:var(--ink)}
.srow b.up{color:var(--minus)} .srow b.flat{color:var(--plus)}
.snote{margin:10px 0 0; font-size:13px; line-height:1.5; color:#A9B2D4}
.on-light .snote{color:var(--muted)}
.snote.alert{color:var(--gold)} .on-light .snote.alert{color:var(--minus); font-weight:500}

/* ---------------------------------------- pragul de rentabilitate */
.be{margin-top:22px; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.be .bh{padding:16px 18px; background:var(--paper)}
.be .bh h3{font-family:var(--disp); font-weight:700; font-size:17px; margin-bottom:4px}
.be .bh p{margin:0; font-size:14px; color:var(--muted)}
.be .bb{padding:16px 18px}
.months{display:flex; gap:3px; margin:14px 0 8px}
.months i{flex:1; height:26px; border-radius:3px; background:var(--minus-50);
  transition:background .3s}
.months i.paid{background:var(--plus)}
.months i.now{background:var(--gold)}
.beout{font-size:15px; line-height:1.5}
.beout b{font-family:var(--disp); font-size:18px}

/* ---------------------------------------- disponibilitate */
.avail{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500;
  padding:7px 13px; border-radius:99px; background:rgba(255,255,255,.08); color:#C3CAE6;
  margin-bottom:12px}
.on-light .avail{background:var(--paper); color:var(--muted)}
.avail i{width:9px; height:9px; border-radius:50%; background:var(--plus); flex:0 0 auto}
.avail.off i{background:#8E98C4}
.avail.soon i{background:var(--gold)}
.bar .avail{margin:0; padding:0; background:none; font-size:11px; color:#8E98C4}
.bar .avail i{width:7px; height:7px}

/* ---------------------------------------- validare telefon */
.quick .box{position:relative}
.quick .box.valid{border-color:var(--plus)}
.quick .box .tick{position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:0; transition:opacity .2s}
.quick .box.valid .tick{opacity:1}