/* =================================================================
   MiniCodex — stil jucăuș partajat pentru paginile de nivel (2/3/4)
   Se încarcă DUPĂ CSS-ul paginii (via slot head), deci suprascrie.
   ================================================================= */

/* ---- Hero: 2 coloane când există un stage ---- */
header.hero .hero-inner:has(> .hero-stage),
header.intro .intro-inner:has(> .hero-stage){
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:900px){
  header.hero .hero-inner:has(> .hero-stage),
  header.intro .intro-inner:has(> .hero-stage){ grid-template-columns:1fr; gap:26px; }
}
.hero-stage{ position:relative; min-height:300px; display:flex; align-items:center; justify-content:center; }
.hero-stage::before{ content:""; position:absolute; inset:6% 4%;
  border-radius:46% 54% 56% 44%/52% 46% 54% 48%;
  background:radial-gradient(closest-side at 35% 32%, rgba(20,207,188,.18), transparent 70%),
             radial-gradient(closest-side at 72% 72%, rgba(92,81,162,.24), transparent 72%);
  filter:blur(12px); z-index:0; }

/* ---- Cod care rulează (demo hero) ---- */
.code-win{ position:relative; z-index:1; width:100%; max-width:440px; background:#140f30;
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.75); overflow:hidden;
  font-family:'SF Mono','Fira Code','Consolas',monospace; }
.code-win .cw-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.code-win .cw-dot{ width:11px; height:11px; border-radius:50%; }
.code-win .cw-dot.r{ background:#ff5f57 } .code-win .cw-dot.y{ background:#febc2e } .code-win .cw-dot.g{ background:#28c840 }
.code-win .cw-name{ margin-left:8px; font-size:12px; color:#b9b4dd; }
.code-win .cw-body{ padding:16px 14px 8px; font-size:13.5px; line-height:1.95; }
.code-win .cw-line{ padding:2px 8px; border-radius:6px; color:#d7d3f0; white-space:pre; opacity:.85; }
.code-win .cw-line .kw{ color:#14CFBC } .code-win .cw-line .fn{ color:#FFE830 }
.code-win .cw-line .str{ color:#B59CFF } .code-win .cw-line .num{ color:#7FB0FF } .code-win .cw-line .cm{ color:#6f6a93 }
.code-win .cw-out{ display:flex; align-items:center; gap:10px; padding:10px 16px 16px; min-height:20px; }
.code-win .cw-run{ font-size:12px; font-weight:700; color:#06302c; background:#14CFBC;
  padding:5px 11px; border-radius:8px; font-family:'Segoe UI',system-ui,sans-serif; }
.code-win .cw-output{ font-size:13px; color:#9fe9da; opacity:0; }
.code-win .cw-output .ok{ color:#28c840; font-weight:700; }
.code-win .cw-line{ animation:cwline 7s infinite; }
.code-win .cw-line:nth-child(2){ animation-delay:.7s } .code-win .cw-line:nth-child(3){ animation-delay:1.4s }
.code-win .cw-line:nth-child(4){ animation-delay:2.1s } .code-win .cw-line:nth-child(5){ animation-delay:2.8s }
@keyframes cwline{ 0%,3%{opacity:.85;background:transparent} 5%,11%{opacity:1;background:rgba(20,207,188,.16)} 15%,100%{opacity:.85;background:transparent} }
.code-win .cw-output{ animation:cwout 7s infinite; }
@keyframes cwout{ 0%,42%{opacity:0;transform:translateY(4px)} 50%,90%{opacity:1;transform:none} 96%,100%{opacity:0} }
.code-win .cw-run{ animation:cwrun 7s infinite; }
@keyframes cwrun{ 0%,40%{transform:none} 44%,52%{transform:scale(.93)} 56%,100%{transform:none} }

/* ---- Bară cifre -> carduri ---- */
body:not(:has([data-cert-price])) .stats-strip{ max-width:var(--page-max); margin:24px auto 6px; padding:0 var(--page-pad); background:none; border:0; gap:14px; }
body:not(:has([data-cert-price])) .stats-strip .stat-item{ border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.05);
  padding:20px 16px; transition:transform .18s ease, border-color .2s ease; }
body:not(:has([data-cert-price])) .stats-strip .stat-item:hover{ transform:translateY(-3px); border-color:rgba(20,207,188,.32); }
body:not(:has([data-cert-price])) .stats-strip .stat-item:last-child{ border:1px solid rgba(255,255,255,.08); }

/* ---- Quick facts: badge colorat + bob ---- */
.quick-grid .qcard{ gap:12px; transition:transform .18s ease, border-color .2s ease; }
.quick-grid .qcard:hover{ transform:translateY(-4px); }
.quick-grid .qcard-icon{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; opacity:1; animation:qbob 4.5s ease-in-out infinite; }
.quick-grid .qcard-icon svg{ width:24px; height:24px; }
.quick-grid .qcard:nth-child(1) .qcard-icon{ background:rgba(20,207,188,.16); color:#14CFBC; }
.quick-grid .qcard:nth-child(2) .qcard-icon{ background:rgba(255,232,48,.18); color:#FFE830; animation-delay:.6s; }
.quick-grid .qcard:nth-child(3) .qcard-icon{ background:rgba(124,155,255,.20); color:#9DB8FF; animation-delay:1.2s; }
@keyframes qbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }

/* ---- Platforme/tehnologii: chip colorat cu iconiță ---- */
.modules .mcard:has(.mcard-logo){ display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:14px 16px;
  background:rgba(255,255,255,.05); transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease; }
.modules .mcard:has(.mcard-logo):hover{ transform:translateY(-4px); border-color:rgba(20,207,188,.35); }
.modules .mcard-logo{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  flex:none; background:rgba(20,207,188,.16); color:#14CFBC; animation:mfloat 5s ease-in-out infinite; }
.modules .mcard-logo svg{ width:26px; height:26px; }
.modules .mcard-body{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.modules .mcard strong{ white-space:normal; }
.modules .mcard:nth-child(2) .mcard-logo{ background:rgba(255,232,48,.18); color:#FFE830; animation-delay:.7s; }
.modules .mcard:nth-child(3) .mcard-logo{ background:rgba(169,139,255,.20); color:#B59CFF; animation-delay:1.4s; }
.modules .mcard:nth-child(4) .mcard-logo{ background:rgba(124,155,255,.20); color:#9DB8FF; animation-delay:2.1s; }
.modules .mcard:nth-child(5) .mcard-logo{ background:rgba(255,140,90,.20); color:#FFA877; animation-delay:2.8s; }
@keyframes mfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }

/* ---- Heading: bloc rotunjit ---- */
.prose h2, article.prose h2{ border-left:0; padding-left:0; display:flex; align-items:center; gap:12px; }
.prose h2::before{ content:""; width:10px; height:26px; border-radius:5px; flex:none; background:linear-gradient(180deg,#14CFBC,#5C51A2); }

/* ---- Value cards: bloc colorat care respiră ---- */
.value-grid .vcard{ position:relative; padding-top:18px; transition:transform .18s ease, border-color .2s ease; }
.value-grid .vcard:hover{ transform:translateY(-4px); }
.value-grid .vcard::before{ content:""; display:block; width:34px; height:10px; border-radius:5px; margin-bottom:12px; animation:vpulse 3.2s ease-in-out infinite; }
.value-grid .vcard:nth-child(1)::before{ background:#FFE830; }
.value-grid .vcard:nth-child(2)::before{ background:#14CFBC; animation-delay:.5s; }
.value-grid .vcard:nth-child(3)::before{ background:#A98BFF; animation-delay:1s; }
@keyframes vpulse{ 0%,100%{ width:34px } 50%{ width:46px } }

/* ---- Hero bullets: marcatori-bloc colorați ---- */
.hero-bullets{ list-style:none; padding-left:0; }
.hero-bullets li{ position:relative; padding-left:26px; }
.hero-bullets li::before{ content:""; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:4px; background:#14CFBC; }
.hero-bullets li:nth-child(2)::before{ background:#FFE830; }
.hero-bullets li:nth-child(3)::before{ background:#B59CFF; }

/* ---- Butoane hero mai bold ---- */
.hero-cta .btn, .hero-actions .btn{ padding:13px 24px; border-radius:14px; font-weight:800; font-size:15px; }

/* ---- Badge certificare (nivel 4) ---- */
.cert-stage{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:320px; }
.cert-badge{ width:128px; padding:18px 14px; border-radius:18px; background:#fff;
  border:1px solid rgba(20,16,50,.10); box-shadow:0 16px 34px -20px rgba(0,0,0,.3);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.cert-badge .cb-ico{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.cert-badge .cb-ico svg{ width:28px; height:28px; }
.cert-badge .cb-name{ font-weight:800; font-size:14px; color:#1c1740; font-family:'Segoe UI',system-ui,sans-serif; }
.cert-badge .cb-check{ position:absolute; margin-top:-6px; margin-left:34px; width:22px; height:22px; border-radius:50%;
  background:#28c840; color:#04220b; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900;
  opacity:0; transform:scale(.4); }
.cert-badge:nth-child(1) .cb-ico{ background:rgba(20,207,188,.16); color:#14CFBC; }
.cert-badge:nth-child(2) .cb-ico{ background:rgba(255,232,48,.18); color:#FFE830; }
.cert-badge:nth-child(3) .cb-ico{ background:rgba(124,155,255,.20); color:#9DB8FF; }
.cert-badge{ animation:cbfloat 5s ease-in-out infinite; }
.cert-badge:nth-child(2){ animation-delay:.8s } .cert-badge:nth-child(3){ animation-delay:1.6s }
@keyframes cbfloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.cert-badge .cb-check{ animation:cbcheck 6s ease-in-out infinite; }
.cert-badge:nth-child(2) .cb-check{ animation-delay:.5s } .cert-badge:nth-child(3) .cb-check{ animation-delay:1s }
@keyframes cbcheck{ 0%,25%{opacity:0;transform:scale(.4)} 35%,90%{opacity:1;transform:scale(1)} 97%,100%{opacity:0} }

@media (prefers-reduced-motion:reduce){
  .code-win .cw-line,.code-win .cw-output,.code-win .cw-run,
  .quick-grid .qcard-icon,.modules .mcard-logo,.value-grid .vcard::before,
  .cert-badge,.cert-badge .cb-check{ animation:none !important; }
  .code-win .cw-output{ opacity:1 } .cert-badge .cb-check{ opacity:1; transform:scale(1) }
}

/* ---- Hero cert (nivel 4): 2 coloane când are stage direct ---- */
header.hero:has(> .hero-stage){ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
header.hero:has(> .hero-stage) .hero-watermark{ display:none; }
@media (max-width:900px){ header.hero:has(> .hero-stage){ grid-template-columns:1fr; gap:26px; } }

/* ===================================================================
   Demo-uri distincte pe nivel + carduri cifre pentru cert (light)
   =================================================================== */

/* ---- Nivel 2: mini-joc (sprite care sare după monedă) ---- */
.game-demo{ position:relative; z-index:1; width:100%; max-width:400px; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#243388 0%, #2a1f63 72%); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.75); }
.game-demo .gd-sun{ position:absolute; top:20px; right:26px; width:30px; height:30px; border-radius:50%; background:#FFE830; }
.game-demo .gd-cloud{ position:absolute; top:42px; left:42px; width:48px; height:14px; border-radius:10px; background:rgba(255,255,255,.16); }
.game-demo .gd-cloud::after{ content:""; position:absolute; top:-7px; left:14px; width:22px; height:18px; border-radius:50%; background:rgba(255,255,255,.16); }
.game-demo .gd-ground{ position:absolute; left:0; right:0; bottom:0; height:46px; background:#2e2770; border-top:4px solid #5C51A2; }
.game-demo .gd-hero{ position:absolute; bottom:46px; left:50px; width:42px; height:42px; border-radius:12px; background:#14CFBC; animation:gdjump 2.6s ease-in-out infinite; }
.game-demo .gd-hero .e{ position:absolute; top:13px; width:7px; height:7px; border-radius:50%; background:#06302c; }
.game-demo .gd-hero .e.l{ left:10px } .game-demo .gd-hero .e.r{ right:10px }
.game-demo .gd-hero .m{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:15px; height:8px; border:2.5px solid #06302c; border-top:0; border-radius:0 0 10px 10px; }
.game-demo .gd-coin{ position:absolute; bottom:118px; left:118px; color:#FFE830; font-size:24px; animation:gdcoin 2.6s ease-in-out infinite; }
.game-demo .gd-score{ position:absolute; top:14px; left:16px; font:700 12px 'Segoe UI',system-ui,sans-serif; color:#fff; background:rgba(0,0,0,.28); padding:5px 11px; border-radius:9px; }
@keyframes gdjump{ 0%,45%{ transform:translateY(0) } 60%{ transform:translateY(-66px) } 76%,100%{ transform:translateY(0) } }
@keyframes gdcoin{ 0%,53%{ opacity:1; transform:translateY(0) rotate(0) } 62%{ opacity:0; transform:translateY(-14px) scale(.3) rotate(40deg) } 66%,100%{ opacity:1; transform:translateY(0) } }

/* ---- Nivel 3: vizualizare sortare (bare) ---- */
.algo-demo{ position:relative; z-index:1; width:100%; max-width:400px; border-radius:18px; padding:20px 20px 16px;
  background:#140f30; border:1px solid rgba(255,255,255,.10); box-shadow:0 26px 60px -30px rgba(0,0,0,.75);
  font-family:'SF Mono','Fira Code','Consolas',monospace; }
.algo-demo .ad-top{ display:flex; align-items:center; gap:7px; margin-bottom:18px; }
.algo-demo .ad-top .d{ width:11px; height:11px; border-radius:50%; }
.algo-demo .ad-top .d.r{background:#ff5f57} .algo-demo .ad-top .d.y{background:#febc2e} .algo-demo .ad-top .d.g{background:#28c840}
.algo-demo .ad-name{ margin-left:6px; font-size:12px; color:#b9b4dd; }
.algo-demo .ad-bars{ display:flex; align-items:flex-end; gap:10px; height:140px; }
.algo-demo .bar{ flex:1; border-radius:6px 6px 0 0; height:50%; background:#14CFBC; }
.algo-demo .bar:nth-child(2){ background:#FFE830 } .algo-demo .bar:nth-child(3){ background:#B59CFF }
.algo-demo .bar:nth-child(4){ background:#14CFBC } .algo-demo .bar:nth-child(5){ background:#FFE830 }
.algo-demo .bar:nth-child(1){ animation:ab1 5.5s ease-in-out infinite }
.algo-demo .bar:nth-child(2){ animation:ab2 5.5s ease-in-out infinite }
.algo-demo .bar:nth-child(3){ animation:ab3 5.5s ease-in-out infinite }
.algo-demo .bar:nth-child(4){ animation:ab4 5.5s ease-in-out infinite }
.algo-demo .bar:nth-child(5){ animation:ab5 5.5s ease-in-out infinite }
@keyframes ab1{ 0%,10%{height:80%} 30%,72%{height:25%} 90%,100%{height:80%} }
@keyframes ab2{ 0%,10%{height:35%} 30%,72%{height:45%} 90%,100%{height:35%} }
@keyframes ab3{ 0%,10%{height:100%} 30%,72%{height:65%} 90%,100%{height:100%} }
@keyframes ab4{ 0%,10%{height:50%} 30%,72%{height:82%} 90%,100%{height:50%} }
@keyframes ab5{ 0%,10%{height:60%} 30%,72%{height:100%} 90%,100%{height:60%} }
.algo-demo .ad-label{ margin-top:14px; font:700 12px 'Segoe UI',system-ui,sans-serif; color:#9fe9da; min-height:16px; }
.algo-demo .ad-label .tag{ opacity:0; animation:adtag 5.5s ease-in-out infinite; }
@keyframes adtag{ 0%,30%{opacity:0} 38%,72%{opacity:1} 80%,100%{opacity:0} }

/* ---- Cert pages (temă deschisă): cifre = carduri albe ---- */
body:has([data-cert-price]) .stats-strip{ max-width:var(--page-max); margin:24px auto 6px; padding:0 var(--page-pad);
  background:none; border:0; gap:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
body:has([data-cert-price]) .stats-strip .stat-item{ border:1px solid rgba(20,16,50,.10); border-radius:16px; background:#fff;
  box-shadow:0 16px 34px -22px rgba(0,0,0,.3); padding:20px 16px; transition:transform .18s ease; }
body:has([data-cert-price]) .stats-strip .stat-item:hover{ transform:translateY(-3px); }
body:has([data-cert-price]) .stats-strip .stat-lbl, body:has([data-cert-price]) .stats-strip .stat-label{ color:#4f4a6b; }
body:has([data-cert-price]) .stats-strip .stat-num{ background:none; color:#0f6e56; -webkit-text-fill-color:#0f6e56; }
@media (max-width:680px){ body:has([data-cert-price]) .stats-strip{ grid-template-columns:repeat(2,1fr); } }

@media (prefers-reduced-motion:reduce){
  .game-demo .gd-hero,.game-demo .gd-coin,.algo-demo .bar,.algo-demo .ad-label .tag{ animation:none !important; }
  .algo-demo .ad-label .tag{ opacity:1 }
}