/* ===== Vars ===== */
:root{
  --bg:#f7f8fb; --surface:#fff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  --primary:#1f5cff; --teal:#66c2c9;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background:var(--bg)}
.wrap{width:min(1120px,92%); margin-inline:auto}
a{text-decoration:none; color:inherit}

.fa-header{position:sticky; top:0; background:#f7f8fb; border-bottom:1px solid var(--border); z-index:5}
.fa-header .wrap{display:grid; grid-template-columns:1fr minmax(280px,520px) 1fr; align-items:center; gap:1rem; padding:.6rem 0}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:inherit; padding:.2rem 0}
.brand .logo{display:block; height:44px; max-width:220px; width:auto; object-fit:contain}
.search{display:flex; align-items:center; gap:.4rem; padding:.35rem; border:1px solid #dfe3ea; border-radius:999px; background:#fff}
.search input{flex:1; border:0; outline:0; padding:.4rem .6rem; border-radius:999px}
.search .icon{border:0; background:transparent; padding:.3rem .6rem; cursor:pointer}
.right{display:flex; justify-content:flex-end; align-items:center; gap:1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid #dfe3ea; background:#fff; padding:.7rem 1rem; border-radius:10px; cursor:pointer; font-weight:600}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(31,92,255,.25)}

/* Hero */
.hero{position:relative; height:220px; background:#ddd}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(10%)}
.hero-bg .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35))}

/* Course card */
.main{margin-top:-120px}
.course-card{background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.12); padding:1.1rem 1.2rem; position:relative}
.course-card .header{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.course-card h1{margin:.2rem 0}
.meta{color:#64748b}
.summary{color:#4b5563; max-width:80ch}
.actions{display:flex; justify-content:flex-end; margin-top:.8rem}

/* Content / lessons */
.content{padding:1.4rem 0 2rem}
.content h2{margin:.6rem 0 1rem}
.lessons{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.lesson{background:#fff; border:1px solid #dbeafe; border-radius:10px; padding:1rem; display:flex; align-items:center; justify-content:space-between; box-shadow:0 12px 30px rgba(0,0,0,.06)}
.lesson .title{font-weight:700; color:#334155}
.lesson .len{color:#6b7280}
.lesson:hover{border-color:#a7e2e6}

/* Footer */
.fa-footer{border-top:1px solid var(--border); background:#f7f8fb; margin-top:1rem}
.fa-footer .foot-bottom{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}