/* home-sectiuni.css — doar pagina de acasa (index.html). Se incarca DUPA <style>-ul inline.
   Cuprinde: reordonarea hero-ului, accentul din 03, fereastra Boosted App (04),
   eprubeta Boosted Labs (05). Tokeni: cei din panou.css (--or, --bl, --gn, --mg, --disp*, --sink*). */

/* ---------- HERO: titlu -> display -> subtitlu -> butoane, totul la stanga ---------- */
.hero__cap{display:flex; flex-direction:column; align-items:stretch; gap:22px}
.hero__cap .rulanta{width:100%; max-width:760px}
.hero__cap .hero__calificare{max-width:62ch}
.hero__cta{text-align:left}
.hero__cta-row{justify-content:flex-start}

/* ---------- 03: accent tipografic ---------- */
#war-room-master h2 .acc{color:var(--or)}
#war-room-master .wrm-jos{justify-content:flex-start}
#war-room-master .shead .sdek{max-width:74ch}

/* ---------- 04: Boosted App = o fereastra, trei module ---------- */
.appf{padding:0; overflow:hidden}
.appf__bara{display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--disprule); background:rgba(255,255,255,.025)}
.appf__puncte{display:flex; gap:6px}
.appf__puncte i{width:9px; height:9px; border-radius:50%; background:var(--disprule); display:block}
.appf__nume{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--dispink2)}
.appf__pret{margin-left:auto; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.appf__pret b{font-family:var(--mono); font-size:26px; letter-spacing:-.03em; color:var(--or); font-weight:600; line-height:1}
.appf__pret span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dispink2); text-transform:uppercase}
.appf__corp{display:grid; grid-template-columns:230px 1fr; min-height:300px}
.appf__nav{display:flex; flex-direction:column; gap:6px; padding:14px; border-right:1px solid var(--disprule); background:rgba(0,0,0,.18)}
.appf__tab{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:11px 12px; border:1px solid transparent; border-radius:8px; color:var(--dispink2)}
.appf__tab svg{grid-row:1 / span 2; width:24px; height:24px; color:var(--fam,var(--dispink2))}
.appf__tn{font-weight:700; font-size:15px; color:var(--dispink)}
.appf__tp{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dispink2)}
.appf__tab:hover{background:rgba(255,255,255,.04)}
.appf__tab:focus-visible{outline:2px solid var(--or); outline-offset:2px}
.appf__tab.is-activ{border-color:var(--fam,var(--or)); background:rgba(255,255,255,.05)}
.appf__tab.is-activ .appf__tp{color:var(--fam,var(--dispink))}
.appf__nav-n{margin-top:auto; padding:10px 6px 0; font-size:12.5px; line-height:1.45; color:var(--dispink2)}
.appf__ecran{position:relative; padding:26px 30px}
.appf__panou{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.appf__panou h3{margin:0; font-size:22px; color:var(--dispink)}
.appf__panou p{margin:0; max-width:52ch; color:var(--dispink2); font-size:15px; line-height:1.55}
.appf__mock{display:flex; flex-wrap:wrap; gap:8px}
.appf__mock span{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--disprule); border-radius:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--dispink); background:rgba(255,255,255,.03)}
.appf__mock i{width:7px; height:7px; background:var(--fam); display:block; box-shadow:0 0 7px var(--fam)}
.appf__pret-m{margin-top:auto; display:flex; align-items:baseline; gap:10px; padding-top:6px}
.appf__pret-m .cifra{font-size:34px; color:var(--fam,var(--dispink)); line-height:1}
.appf__pret-m .lbl{color:var(--dispink2)}
/* fara JS: cele trei module se vad toate, unul sub altul */
html:not(.js) .appf__panou + .appf__panou{margin-top:26px; padding-top:26px; border-top:1px solid var(--disprule)}
.js .appf__panou{display:none}
.js .appf__panou.is-activ{display:flex; animation:appf-in .32s ease both}
@keyframes appf-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (max-width:760px){
  .appf__corp{grid-template-columns:1fr}
  .appf__nav{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--disprule); padding:10px}
  .appf__tab{flex:1 1 30%; grid-template-columns:22px 1fr; padding:9px 10px}
  .appf__tn{font-size:14px}
  .appf__nav-n{display:none}
  .appf__ecran{padding:20px 16px}
  .appf__pret b{font-size:22px}
  .appf__nume{display:none}
}
@media (max-width:420px){.appf__tab{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.js .appf__panou.is-activ{animation:none}}

/* ---------- 05: Labs — pixelii treburilor manuale se reasambleaza intr-un aparat ----------
   Desenul e pe canvas (assets/home-sectiuni.js): glifele vin din sprite-ul de pictograme
   (p-factura, p-chat, p-mana -> p-aparat), deci animatia vorbeste aceeasi limba 12x12
   ca restul site-ului. Aici stau doar cadrul, ecranul "RULEAZA" si pasii. */
.labsx{padding:22px 22px 18px}
.labsx__scena{position:relative; width:100%; max-width:820px; margin:0 auto}
.labsx__px{display:block; width:100%; height:auto; aspect-ratio:640 / 300}
.labsx__ecran{position:absolute; left:73%; top:34%; width:25%; min-width:120px; padding:12px 12px 10px;
  display:flex; flex-direction:column; gap:7px; border:1px solid var(--disprule); border-radius:10px;
  background:linear-gradient(180deg,#0f1114,#16181B); box-shadow:0 18px 40px -20px #000;
  transition:opacity .4s ease, transform .4s ease}
.labsx--js .labsx__ecran{opacity:0; transform:translateY(8px) scale(.96)}
.labsx--js .labsx__ecran.is-on{opacity:1; transform:none}
.labsx__ec-cap{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--dispink)}
.labsx__ec-cap i{width:7px; height:7px; background:var(--gn); box-shadow:0 0 8px var(--gn); animation:labsx-led 1.4s steps(2,end) infinite}
@keyframes labsx-led{50%{opacity:.25}}
.labsx__ec-rand{display:flex; flex-direction:column; gap:6px; margin:6px 0 10px}
.labsx__ec-rand b{display:block; height:5px; background:var(--disprule); overflow:hidden; position:relative}
.labsx__ec-rand b::after{content:""; position:absolute; inset:0; background:var(--bl); transform-origin:left; animation:labsx-bar 2.6s steps(8,end) infinite}
.labsx__ec-rand b:nth-child(2)::after{background:var(--or); animation-delay:.5s}
.labsx__ec-rand b:nth-child(3)::after{background:var(--gn); animation-delay:1s}
@keyframes labsx-bar{0%{transform:scaleX(.125)}60%,100%{transform:scaleX(1)}}
.labsx__ec-ok{margin-top:auto; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gn)}
.labsx__ec-ok svg{width:16px; height:16px}
.labsx__pasi{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--disprule); display:grid; grid-template-columns:repeat(3,1fr); gap:14px 22px}
.labsx__pasi li{display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:start; transition:opacity .3s ease}
.labsx__pasi li svg{grid-row:1 / span 2; width:28px; height:28px; color:var(--fam,var(--or)); transition:filter .3s ease}
.labsx__pasi .vi__d{margin-top:3px}
/* pasul in curs se aprinde, ceilalti se sting; fara JS toti raman aprinsi */
.labsx--js .labsx__pasi li{opacity:.45}
.labsx--js .labsx__pasi li.is-pas{opacity:1}
.labsx--js .labsx__pasi li.is-pas svg{filter:drop-shadow(0 0 6px currentColor)}
@media (max-width:760px){
  .labsx{padding:16px 12px 14px}
  .labsx__ecran{left:66%; top:30%; width:32%; min-width:0; padding:6px 7px; gap:4px}
  .labsx__ec-cap{font-size:8px; letter-spacing:.1em}
  .labsx__ec-rand{margin:3px 0 5px; gap:4px}
  .labsx__ec-ok{font-size:8.5px}
  .labsx__ec-ok svg{width:11px; height:11px}
  .labsx__pasi{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .labsx__ec-cap i,.labsx__ec-rand b::after{animation:none !important}
  .labsx__ec-rand b::after{transform:none}
  .labsx--js .labsx__pasi li{opacity:1}
}