/* Aspect 3D + animații pentru începători */
body{background:radial-gradient(1200px 500px at 50% -120px,rgba(45,212,191,.18),transparent 70%),var(--bg)}
main{perspective:1100px}
.card{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 18px -8px rgba(15,60,56,.28),0 2px 4px rgba(15,60,56,.08);
  transition:transform .18s ease,box-shadow .18s ease;animation:rise .45s both}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}
.card:nth-child(5){animation-delay:.2s}.card:nth-child(n+6){animation-delay:.25s}
a.card:active,.card.lesson:active{transform:translateY(2px) scale(.985) rotateX(4deg);box-shadow:0 2px 6px rgba(15,60,56,.2)}
@keyframes rise{from{opacity:0;transform:translateY(14px) rotateX(-8deg)}to{opacity:1;transform:none}}
.hero{position:relative;overflow:hidden;
  background:radial-gradient(circle at 85% 20%,#5eead4 0,transparent 45%),linear-gradient(135deg,#0f766e,#0b3f3a 85%);
  box-shadow:0 18px 30px -14px rgba(11,63,58,.7)}
.hero>*{position:relative;z-index:2}
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(2px);box-shadow:inset 0 0 22px rgba(255,255,255,.18)}
.hero .btn.alt{box-shadow:0 6px 0 rgba(0,0,0,.22),0 12px 18px rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s}
.btn{box-shadow:0 5px 0 rgba(0,0,0,.18),0 10px 16px -6px rgba(0,0,0,.3);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.mod .ic{background:linear-gradient(145deg,#ffffff,var(--accent) 60%,#bfe9e3);
  box-shadow:0 6px 10px -3px rgba(15,118,110,.45),inset 0 -3px 0 rgba(15,118,110,.18),inset 0 2px 0 #fff;
  transform:perspective(200px) rotateX(8deg) rotateY(-10deg);transition:transform .25s}
.mod:hover .ic,.mod:active .ic{transform:perspective(200px) rotateX(0) rotateY(0) scale(1.06)}
@media (prefers-color-scheme:dark){.mod .ic{background:linear-gradient(145deg,#1d3a37,#12302d);box-shadow:0 6px 12px -3px #000,inset 0 2px 0 rgba(255,255,255,.12)}
  .card{box-shadow:0 10px 20px -10px #000,0 1px 0 rgba(255,255,255,.05) inset}}
.lesson .dot{box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .2s}
.lesson.done .dot{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.25) rotate(-8deg)}}
.flash{transform-style:preserve-3d;min-height:220px;box-shadow:0 22px 30px -16px rgba(15,60,56,.5);animation:flip .5s}
@keyframes flip{from{transform:rotateY(90deg) scale(.9);opacity:.2}to{transform:none;opacity:1}}
.tabs{border-radius:20px 20px 0 0;box-shadow:0 -8px 20px -10px rgba(0,0,0,.3)}
.tabs a span{transition:transform .2s}.tabs a.on span{transform:translateY(-4px) scale(1.2);filter:drop-shadow(0 4px 4px rgba(15,118,110,.45))}
.figbox{border-radius:14px;box-shadow:0 14px 24px -12px rgba(0,0,0,.45);transform:perspective(900px) rotateX(2deg);transition:transform .25s}
.figbox:active{transform:perspective(900px) scale(.98)}
.badge3d{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:99px;background:linear-gradient(#fde68a,#f59e0b);color:#3a2300;font-size:.75rem;font-weight:800;box-shadow:0 3px 0 #b45309}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.vid{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;margin:12px 0;padding:12px;border-radius:14px;background:var(--accent);border:1px solid var(--line);box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.vid .play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.vid b{display:block;font-size:.95rem}.vid small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.ytbox{margin:14px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 10px 18px -10px rgba(0,0,0,.45)}
.ytwrap{position:relative;aspect-ratio:16/9;background:#000}.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytcap{padding:10px 12px}.ytcap b{display:block;font-size:.92rem}.ytcap small{display:block;color:var(--muted);font-size:.82rem;margin:2px 0 6px}
.ytcap a{font-size:.82rem;font-weight:700;color:var(--brand);text-decoration:none}
.scenebox{margin:14px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 10px 18px -10px rgba(0,0,0,.45)}
.scenebox[hidden]{display:none}
.scenehead{padding:10px 12px}.scenehead b{display:block;font-size:.92rem}.scenehead small{display:block;color:var(--muted);font-size:.82rem}
.scenewrap{height:380px;background:#101820}.scenewrap iframe{width:100%;height:100%;border:0;display:block}
.scenelink{display:block;padding:8px 12px;font-size:.82rem;font-weight:700;color:var(--brand);text-decoration:none}