@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy: #10203A;
  --navy-deep: #0A1628;
  --cream: #FAF6EF;
  --ink: #1B2430;
  --amber: #E2A63B;
  --amber-soft: #F2D9A8;
  --line: #E4DFD3;
  --muted: #5B5445;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3{font-family:'Sora', sans-serif;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
code, pre{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* NAV */
header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:40px; height:40px; border-radius:8px;
  background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; font-size:16px;
}
.brand-name{font-family:'Sora'; font-weight:700; font-size:18px;}
.brand-tag{font-size:12px; color:#7A7261;}
.nav-links{display:flex; gap:36px; font-size:15px; font-weight:500;}
.nav-links a{border-bottom:2px solid transparent; padding-bottom:4px;}
.nav-links a:hover, .nav-links a.active{border-color:var(--amber);}

footer{
  background:var(--navy-deep);
  color:#8494AC;
  padding:32px 0;
  font-size:14px;
  text-align:center;
}

/* HERO (home) */
.hero{background:var(--navy); color:var(--cream); padding:80px 0 0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; align-items:end; gap:40px;}
.eyebrow{color:var(--amber-soft); font-size:15px; margin-bottom:20px;}
.hero h1{font-size:52px; font-weight:800; line-height:1.15; margin-bottom:24px;}
.hero p{font-size:17px; color:#C9D1DE; max-width:480px; margin-bottom:36px;}
.cta-row{display:flex; gap:16px; margin-bottom:56px; flex-wrap:wrap;}
.btn-primary, .btn-secondary{display:inline-block; padding:14px 26px; border-radius:6px; font-weight:600; font-size:15px;}
.btn-primary{background:var(--amber); color:var(--navy-deep);}
.btn-primary:hover{background:#eeb655;}
.btn-secondary{border:1px solid #3A4A66; color:var(--cream);}
.btn-secondary:hover{border-color:var(--amber-soft);}
.hero-figure{position:relative; justify-self:end;}
.hero-figure img{border-radius:14px 14px 0 0; display:block; width:100%; max-width:340px;}
.figure-caption{background:var(--navy-deep); border-top:1px solid #24344E; max-width:340px; padding:14px 18px; border-radius:0 0 10px 10px;}
.figure-caption .name{font-weight:600; font-size:15px;}
.figure-caption .role{font-size:13px; color:#9BAAC0;}
.stats{border-top:1px solid #24344E; display:flex; gap:60px; padding:28px 0; margin-top:24px;}
.stat-num{font-family:'Sora'; font-size:26px; font-weight:700; color:var(--amber-soft);}
.stat-label{font-size:13px; color:#9BAAC0;}

/* PATH (home) */
.path{padding:96px 0;}
.path-head{max-width:560px; margin-bottom:56px;}
.path-head .kicker{color:#A08A4B; font-weight:600; margin-bottom:10px; font-size:14px;}
.path-head h2{font-size:34px; font-weight:700; margin-bottom:14px;}
.path-head p{color:var(--muted); font-size:16px;}
.path-list{border-top:1px solid var(--line);}
.path-item{display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:24px; padding:32px 0; border-bottom:1px solid var(--line); transition:background .15s ease;}
.path-item:hover{background:#F3EEE1;}
.path-index{font-family:'Sora'; font-weight:700; font-size:15px; color:#B7AD95;}
.path-title{font-family:'Sora'; font-size:20px; font-weight:700; margin-bottom:6px;}
.path-desc{font-size:14.5px; color:var(--muted); max-width:520px;}
.path-link{font-weight:600; font-size:14.5px; color:var(--navy); white-space:nowrap; border-bottom:1px solid var(--navy); padding-bottom:2px;}

/* MENTOR (home) */
.mentor{background:#F1ECE0; padding:96px 0;}
.mentor-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
.mentor-photo{border-radius:16px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(16,32,58,0.35);}
.mentor-kicker{color:#A08A4B; font-weight:600; margin-bottom:14px; font-size:14px;}
.mentor h2{font-size:32px; font-weight:700; line-height:1.3; margin-bottom:18px;}
.mentor p{color:var(--muted); font-size:16px; max-width:480px;}

/* COURSE PAGE */
.course-hero{
  background:var(--navy); color:var(--cream); padding:64px 0;
}
.course-hero .kicker{color:var(--amber-soft); font-size:14px; font-weight:600; margin-bottom:14px;}
.course-hero h1{font-size:40px; font-weight:800; margin-bottom:14px;}
.course-hero p{color:#C9D1DE; max-width:600px; font-size:16px;}
.course-meta{display:flex; gap:28px; margin-top:28px; flex-wrap:wrap;}
.course-meta div{font-size:13px; color:#9BAAC0;}
.course-meta strong{display:block; font-family:'Sora'; color:var(--amber-soft); font-size:18px;}

.lessons{padding:72px 0;}
.lessons h2{font-size:26px; font-weight:700; margin-bottom:36px;}
.lesson-list{border-top:1px solid var(--line);}
.lesson{
  display:grid; grid-template-columns:48px 1fr; gap:20px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.lesson-num{font-family:'JetBrains Mono'; color:var(--amber); font-weight:500; font-size:14px; padding-top:2px;}
.lesson-title{font-family:'Sora'; font-weight:700; font-size:17px; margin-bottom:6px;}
.lesson-desc{color:var(--muted); font-size:14.5px; margin-bottom:12px;}
.lesson-code{
  background:var(--navy-deep); color:#D9E2F1; border-radius:8px;
  padding:16px 18px; font-size:13.5px; overflow-x:auto;
}
.lesson-code .tag{color:#7FB6E8;}
.lesson-code .attr{color:var(--amber-soft);}
.lesson-code .str{color:#B7D99A;}

.crumb{padding:20px 0 0; font-size:14px; color:var(--muted);}
.crumb a{color:var(--navy); font-weight:600;}

/* TAG REFERENCE GRID */
.tagref{padding:72px 0; background:#F1ECE0;}
.tagref h2{font-size:26px; font-weight:700; margin-bottom:8px;}
.tagref > .wrap > p{color:var(--muted); font-size:15px; margin-bottom:36px; max-width:600px;}
.tagref-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.tagref-group{background:var(--cream); padding:24px 26px;}
.tagref-group h3{font-family:'Sora'; font-size:15px; font-weight:700; margin-bottom:14px; color:var(--navy);}
.tagref-group ul{list-style:none;}
.tagref-group li{
  display:flex; gap:10px; padding:6px 0; font-size:14px; border-bottom:1px dashed var(--line);
}
.tagref-group li:last-child{border-bottom:none;}
.tagref-group code{
  background:var(--navy-deep); color:var(--amber-soft); padding:2px 7px; border-radius:4px;
  font-size:12.5px; white-space:nowrap; height:fit-content;
}
.tagref-group span{color:var(--muted);}

/* PROJECT SECTION */
.project{padding:80px 0;}
.project-head{max-width:640px; margin-bottom:36px;}
.project-head .kicker{color:#A08A4B; font-weight:600; margin-bottom:10px; font-size:14px;}
.project-head h2{font-size:28px; font-weight:700; margin-bottom:12px;}
.project-head p{color:var(--muted); font-size:15px;}
.project-body{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.project-code{
  background:var(--navy-deep); color:#D9E2F1; padding:24px;
  font-size:12.5px; overflow:auto; max-height:520px;
}
.project-code .tab{
  color:#7FB6E8; font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; margin:18px 0 8px; opacity:.7;
}
.project-code .tab:first-child{margin-top:0;}
.project-code pre{white-space:pre-wrap; word-break:break-word;}
.project-output{
  background:#fff; display:flex; flex-direction:column;
}
.project-output-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:10px 16px; border-bottom:1px solid var(--line); background:#F7F4EC;
}
.project-output iframe{
  border:none; width:100%; flex:1; min-height:420px; background:#fff;
}
@media (max-width:860px){
  .tagref-grid{grid-template-columns:1fr;}
  .project-body{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-figure{justify-self:start; margin-top:40px;}
  .hero h1{font-size:38px;}
  .mentor-grid{grid-template-columns:1fr;}
  .path-item{grid-template-columns:1fr; gap:8px;}
  .nav-links{display:flex; gap:18px; font-size:13px;}
  .stats{gap:32px; flex-wrap:wrap;}
  .course-hero h1{font-size:30px;}
  .lesson{grid-template-columns:1fr;}
}

/* PRELOADER */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-ring-wrap{
  position:relative;
  width:220px; height:220px;
  margin-bottom:28px;
}
.loader-photo{
  position:absolute; inset:14px;
  border-radius:50%;
  overflow:hidden;
}
.loader-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.loader-ring-wrap svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.loader-ring-bg{
  fill:none; stroke:#1E2E4A; stroke-width:4;
}
.loader-ring-progress{
  fill:none; stroke:var(--amber); stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:653;
  stroke-dashoffset:653;
  animation:ringFill 2.2s ease forwards;
}
@keyframes ringFill{
  to{stroke-dashoffset:0;}
}
.loader-text{
  font-family:'Sora', sans-serif;
  color:var(--cream);
  font-size:16px;
  font-weight:600;
  text-align:center;
  opacity:0;
  animation:loaderTextIn .6s ease 1.9s forwards;
}
.loader-text span{color:var(--amber-soft);}
@keyframes loaderTextIn{
  to{opacity:1;}
}
body.loading{overflow:hidden;}