:root {
    --ink: #0a1628; --deep: #071020; --teal: #00c4a7; --teal-dim: #009e86;
    --amber: #f5a623; --slate: #1e3a5f; --slate-light: #2b5180;
    --mist: #e8f4f0; --white: #f9fbfc; --gray: #8fa8c0;
    --mono: 'Space Mono', monospace; --sans: 'Sora', sans-serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--deep); color:var(--white); font-family:var(--sans); overflow-x:hidden; }
  nav {
    position:fixed; top:0; left:0; right:0; z-index:999;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 4rem;
    background:rgba(7,16,32,0.85); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,196,167,0.15);
  }
  .nav-logo { font-family:var(--mono); font-size:1.1rem; color:var(--teal); text-decoration:none; letter-spacing:0.08em; }
  .nav-logo span { color:var(--white); }
  .nav-links { display:flex; gap:2rem; list-style:none; }
  .nav-links a { color:var(--gray); text-decoration:none; font-size:0.85rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; transition:color 0.2s; }
  .nav-links a:hover, .nav-links a.active { color:var(--teal); }
  .nav-cta { background:var(--teal); color:var(--deep) !important; padding:0.5rem 1.2rem; border-radius:4px; font-weight:700 !important; }

  .page-header {
    padding: 10rem 4rem 5rem;
    background: var(--ink);
    position: relative;
    overflow: hidden;
  }
  .page-header::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(0,196,167,0.07) 0%, transparent 70%);
    pointer-events:none;
  }
  .page-header-grid {
    position:absolute; inset:0;
    background-image: linear-gradient(rgba(0,196,167,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,196,167,0.03) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events:none;
  }
  .section-tag { font-family:var(--mono); font-size:0.72rem; color:var(--teal); letter-spacing:0.25em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
  .section-tag::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--teal); }
  .page-title { font-size:clamp(2rem,4vw,3.5rem); font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-bottom:1rem; }
  .page-title em { font-style:normal; color:var(--teal); }
  .page-sub { color:var(--gray); font-size:1rem; line-height:1.8; max-width:520px; }

  .courses-section { padding:5rem 4rem; max-width:1200px; margin:0 auto; }
  .filter-bar { display:flex; gap:1rem; margin-bottom:3rem; flex-wrap:wrap; }
  .filter-btn {
    background:transparent; border:1px solid rgba(255,255,255,0.1);
    color:var(--gray); font-family:var(--sans); font-size:0.8rem;
    font-weight:600; padding:0.5rem 1.2rem; border-radius:3px;
    cursor:pointer; transition:all 0.2s; letter-spacing:0.08em; text-transform:uppercase;
  }
  .filter-btn:hover, .filter-btn.active { border-color:var(--teal); color:var(--teal); background:rgba(0,196,167,0.06); }

  .courses-list { display:grid; gap:1.5rem; }
  .course-row {
    background:var(--ink); border:1px solid rgba(0,196,167,0.1);
    border-radius:6px; overflow:hidden; display:grid;
    grid-template-columns:240px 1fr auto;
    text-decoration:none; color:inherit;
    transition:all 0.3s;
  }
  .course-row:hover { border-color:rgba(0,196,167,0.4); transform:translateX(4px); }
  .course-row-thumb {
    height:100%; min-height:160px;
    display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; position:relative;
  }
  .course-row-thumb::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to right, transparent 60%, rgba(10,22,40,0.6) 100%);
  }
  .bg1 { background:linear-gradient(135deg, #0a2a4a, #1e5080); }
  .bg2 { background:linear-gradient(135deg, #0a3020, #1a6040); }
  .bg3 { background:linear-gradient(135deg, #2a1a0a, #5a3010); }
  .bg4 { background:linear-gradient(135deg, #1a0a2a, #401a60); }
  .bg5 { background:linear-gradient(135deg, #0a2020, #1a4840); }
  .bg6 { background:linear-gradient(135deg, #2a0a0a, #601a1a); }
  .bg7 { background:linear-gradient(135deg, #0a1a2a, #1a3860); }
  .course-row-body { padding:1.5rem 2rem; display:flex; flex-direction:column; justify-content:center; }
  .course-row-level { font-family:var(--mono); font-size:0.65rem; color:var(--gray); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:0.4rem; }
  .course-row-title { font-size:1.15rem; font-weight:700; margin-bottom:0.6rem; line-height:1.3; }
  .course-row-desc { font-size:0.875rem; color:var(--gray); line-height:1.7; margin-bottom:0.75rem; }
  .course-row-tags { display:flex; gap:0.4rem; flex-wrap:wrap; }
  .ctag { background:rgba(0,196,167,0.06); border:1px solid rgba(0,196,167,0.18); color:var(--teal); padding:0.2rem 0.6rem; border-radius:3px; font-size:0.7rem; font-family:var(--mono); }
  .course-row-side { padding:1.5rem 2rem; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:0.75rem; min-width:160px; border-left:1px solid rgba(255,255,255,0.05); }
  .course-price { font-family:var(--mono); font-size:1.3rem; color:var(--teal); font-weight:700; }
  .course-rating { color:var(--amber); font-size:0.85rem; }
  .course-students { font-size:0.78rem; color:var(--gray); }
  .badge-hot { background:var(--teal); color:var(--deep); font-family:var(--mono); font-size:0.65rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:3px; letter-spacing:0.1em; }
  .badge-new { background:var(--amber); color:var(--deep); font-family:var(--mono); font-size:0.65rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:3px; letter-spacing:0.1em; }
  .badge-post { background-color: #f10404; color:#ffffff; font-family:var(--mono); font-size:0.65rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:3px; letter-spacing:0.1em; }

  footer { background:var(--deep); border-top:1px solid rgba(0,196,167,0.1); padding:3rem 4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
  .footer-logo { font-family:var(--mono); color:var(--teal); font-size:1rem; text-decoration:none; }
  .footer-copy { color:var(--gray); font-size:0.8rem; }
  .footer-links { display:flex; gap:1.5rem; }
  .footer-links a { color:var(--gray); text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
  .footer-links a:hover { color:var(--teal); }

  @media(max-width:900px) {
    nav { padding:1rem 2rem; }
    .nav-links { display:none; }
    .page-header { padding:8rem 2rem 3rem; }
    .courses-section { padding:3rem 2rem; }
    .course-row { grid-template-columns:1fr; }
    .course-row-thumb { min-height:140px; }
    .course-row-side { border-left:none; border-top:1px solid rgba(255,255,255,0.05); flex-direction:row; }
    footer { flex-direction:column; align-items:flex-start; padding:2rem; }
  }