/* Stefan Stoean brand — design tokens preluate din site-ul principal */
:root{
  --bg:#0B0B0B;
  --surface:#141414;
  --elevated:#161618;
  --line:#1F2024;
  --line-hover:rgba(255,255,255,0.12);
  --text:#F6F6F6;
  --text-2:#C3C3C3;
  --muted:#9BA0AA;
  --faint:#6F7480;
  --cyan:#24BBF2;
  --cyan-deep:#0D9FD9;
  --cyan-border:#0D4A67;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Instrument Sans",Inter,ui-sans-serif,system-ui,sans-serif;
  line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-deep)}
::selection{background:var(--cyan);color:#000}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Top bar */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;border-bottom:1px solid var(--line);background:var(--bg);
}
.brand{
  font-weight:700;font-size:22px;letter-spacing:-0.5px;color:#fff;
}
.brand .brand-accent{color:var(--cyan)}
.who{color:var(--muted);font-size:14px}
.who a{color:var(--text-2)}
.who a:hover{color:var(--cyan)}

.wrap{max-width:1040px;margin:0 auto;padding:40px 20px}

/* Eyebrow pill */
.eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 14px;border-radius:999px;
  background:rgba(36,187,242,0.08);border:1px solid rgba(36,187,242,0.25);
  color:var(--cyan);font-size:12px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:20px;
}

/* Hero card */
.hero{
  max-width:600px;margin:9vh auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:48px 36px;
}
.hero h1{
  margin:0 0 14px;font-weight:700;color:#fff;
  font-size:clamp(28px,4.5vw,40px);line-height:1.1;letter-spacing:-1px;
}
.hero p{color:var(--text-2);font-size:16px;line-height:1.6;margin:0 0 28px}

/* Butoane — CTA cyan cu bezel gradient (stil Stefan) */
.btn-bezel{
  display:inline-block;padding:2px;border-radius:14px;margin:6px;
  background:linear-gradient(180deg,rgba(255,255,255,0.35),rgba(255,255,255,0.04) 60%,rgba(0,0,0,0));
}
.btn-bezel:active{transform:translateY(1px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;font-weight:700;font-size:16px;line-height:16px;
  padding:12px 22px;border-radius:12px;
  background:var(--elevated);color:var(--text);border:1px solid var(--line);
  transition:transform .15s cubic-bezier(0.4,0,0.2,1),box-shadow .15s ease,border-color .3s ease,color .3s ease;
}
.btn:hover{color:var(--text);border-color:var(--line-hover);text-decoration:none}
.btn-primary,.btn-discord{
  background:var(--cyan);color:#000;border:4px solid var(--cyan-border);
  box-shadow:rgba(13,62,74,0.5) 0 1px 2px 0,inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover,.btn-discord:hover{color:#000;border-color:var(--cyan-border);filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{border-color:rgba(36,187,242,0.3);color:var(--cyan)}

/* Lecții */
.course h1{
  font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.1;
  font-size:clamp(26px,3.5vw,36px);margin:0 0 26px;
}
.empty{color:var(--muted)}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.lesson{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s ease;
}
.lesson:hover{border-color:var(--line-hover)}
.lesson h2{
  font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.2px;
  margin:0;padding:14px 16px;border-bottom:1px solid var(--line);
}
.lesson video{width:100%;height:auto;display:block;background:#000;aspect-ratio:16/9}

.foot{
  color:var(--faint);text-align:center;padding:28px;font-size:13px;
  border-top:1px solid var(--line);margin-top:48px;letter-spacing:0.02em;
}

@media(max-width:520px){
  .wrap{padding:24px 14px}
  .hero{margin:6vh auto;padding:32px 22px}
}