:root{
    --bg:            #0B1120;
    --surface:       #131C31;
    --surface-2:     #1A2540;
    --border:        #263356;
    --text:          #E7ECF5;
    --text-muted:    #94A3B8;
    --accent:       #F2B705;
    --accent-tag:    #0F9BE8;
    --accent-soft:   #F2B70522;
    --teal:          #2DD4BF;
    --radius:        14px;

    --font-display:  'Space Grotesk', sans-serif;
    --font-brand:     'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:     'Inter', 'Hind Siliguri', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
  }

  *{ box-sizing:border-box; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.65;
  }

  h1,h2,h3,h4,.font-display{ font-family:var(--font-display); }

  .mono{ font-family:var(--font-mono); letter-spacing:.02em; }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.8rem;
    color:var(--accent);
    text-transform:none;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1rem;
  }
  .eyebrow::before{ content:"//"; color:var(--teal); }

  a{ text-decoration:none; }

  /* ---------- Navbar ---------- */
  .navbar-custom{
    background:rgba(11,17,32,.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .navbar-brand-custom{
    font-family:var(--font-brand);
    font-weight:700;
    font-size:1.50rem;
    color:var(--text) !important;
  }
  .navbar-brand-custom span{ color:var(--accent); }
  .nav-link-custom{
    color:var(--text-muted) !important;
    font-weight:500;
    font-size:.95rem;
    padding:.5rem 1rem !important;
  }
  .nav-link-custom:hover{ color:var(--text) !important; }
  .btn-accent{
    background:var(--accent);
    color:#0B1120;
    font-weight:600;
    border:none;
    padding:.6rem 1.4rem;
    border-radius:8px;
    transition:.2s;
  }
  .btn-accent:hover{ background:#ffce33; color:#0B1120; transform:translateY(-1px); }
  .btn-outline-custom{
    border:1px solid var(--border);
    color:var(--text);
    padding:.6rem 1.4rem;
    border-radius:8px;
    font-weight:500;
  }
  .btn-outline-custom:hover{ border-color:var(--accent); color:var(--accent); }

  /* ---------- Hero ---------- */
  .hero{
    padding:7rem 0 5rem;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 50% at 80% -10%, #F2B70518, transparent),
      radial-gradient(ellipse 50% 40% at 0% 20%, #2DD4BF14, transparent);
  }
  .hero h1{
    font-size:clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight:700;
    line-height:1.15;
    margin-bottom:1.25rem;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent-tag);
  }
  .hero p.lead-custom{
    color:var(--text-muted);
    font-size:1.1rem;
    max-width:520px;
    margin-bottom:2rem;
  }
  .stat-row{ display:flex; gap:2.2rem; margin-top:2.5rem; flex-wrap:wrap; }
  .stat-item .num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:var(--text); }
  .stat-item .label{ font-size:.82rem; color:var(--text-muted); }

  /* terminal window signature element */
  .term-window{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 30px 60px -20px #00000080;
    overflow:hidden;
  }
  .term-bar{
    display:flex;
    align-items:center;
    gap:.4rem;
    padding:.7rem 1rem;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
  }
  .term-dot{ width:11px; height:11px; border-radius:50%; }
  .term-bar .title{
    margin-left:auto; margin-right:auto;
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--text-muted);
  }
  .term-body{
    padding:1.4rem;
    font-family:var(--font-mono);
    font-size:.86rem;
    color:#CBD5E1;
  }
  .term-body .k{ color:#F472B6; }
  .term-body .s{ color:var(--teal); }
  .term-body .c{ color:var(--text-muted); }
  .term-body .fn{ color:var(--accent); }
  .cursor-blink{
    display:inline-block; width:8px; height:1.1em; background:var(--accent);
    animation:blink 1s steps(1) infinite; vertical-align:text-bottom;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  /* ---------- Generic section ---------- */
  section{ padding:5.5rem 0; }
  .section-head{ max-width:640px; margin-bottom:3rem; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700;color:var(--accent-tag); }
  .section-head p{ color:var(--text-muted); }
  .section-alt{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

  /* ---------- Cards ---------- */
  .card-custom{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.75rem;
    height:100%;
    transition:.2s;
  }
  .card-custom:hover{ border-color:#3a4a76; transform:translateY(-3px); }
  .card-icon{
    width:42px; height:42px;
    border-radius:10px;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1rem;
    font-size:1.05rem;
  }
  .card-custom h5{ font-family:var(--font-display); font-weight:600; margin-bottom:.5rem; }
  .card-custom p{ color:var(--text-muted); font-size:.92rem; margin:0; }

  /* ---------- Modules timeline ---------- */
  .module-item{
    display:flex;
    gap:1.5rem;
    padding:1.5rem 0;
    border-bottom:1px solid var(--border);
  }
  .module-item:last-child{ border-bottom:none; }
  .module-num{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--accent);
    min-width:70px;
  }
  .module-item h6{ font-family:var(--font-display); font-weight:600; margin-bottom:.35rem; }
  .module-item .tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
  .tag-pill{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--teal);
    background:#2DD4BF14;
    border:1px solid #2DD4BF33;
    padding:.2rem .6rem;
    border-radius:20px;
  }

  /* ---------- Projects grid ---------- */
  .project-card{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--surface);
  }
  .project-thumb{
    height:150px;
    background:linear-gradient(135deg, var(--surface-2), #0B1120);
    display:flex; align-items:center; justify-content:center;
    color:var(--border);
    font-size:2rem;
    border-bottom:1px solid var(--border);
  }
  .project-card .body{ padding:1rem 1.1rem; }
  .project-card h6{ font-weight:600; margin-bottom:.2rem; font-family:var(--font-display); }
  .project-card span{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); }

  /* ---------- Steps ---------- */
  .step-card{ position:relative; padding-left:.2rem; }
  .step-num{
    font-family:var(--font-display);
    font-size:2.4rem;
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1.4px var(--border);
    line-height:1;
    margin-bottom:.75rem;
  }

  /* ---------- Instructor ---------- */
  .instructor-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2rem;
    display:flex;
    gap:1.5rem;
    align-items:flex-start;
  }
  .instructor-avatar{
    width:72px; height:72px; border-radius:50%;
    background:var(--surface-2);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:1.3rem;
    color:var(--accent);
    flex-shrink:0;
  }

  /* ---------- Testimonials ---------- */
  .testi-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.6rem;
    height:100%;
  }
  .testi-card p{ color:#CBD5E1; font-size:.92rem; }
  .testi-user{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
  .testi-avatar{
    width:38px; height:38px; border-radius:50%;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:.8rem; color:var(--teal);
  }
  .testi-name{ font-size:.85rem; font-weight:600; }
  .testi-role{ font-size:.75rem; color:var(--text-muted); }

  /* ---------- FAQ ---------- */
  #faq h2 {
    color: #ff5733; /* Fallback color */
    color: var(--accent-tag);
  }
  .accordion-custom .accordion-item{
    background:transparent;
    border:1px solid var(--border);
    border-radius:10px !important;
    margin-bottom:.7rem;
    overflow:hidden;
  }
  .accordion-custom .accordion-button{
    background:var(--surface);
    color:var(--text);
    font-weight:600;
    font-family:var(--font-display);
    font-size:.98rem;
  }
  .accordion-custom .accordion-button:not(.collapsed){
    background:var(--surface-2);
    color:var(--accent);
    box-shadow:none;
  }
  .accordion-custom .accordion-button::after{ filter:invert(1) brightness(1.6); }
  .accordion-custom .accordion-body{
    background:var(--surface);
    color:var(--text-muted);
    font-size:.9rem;
  }

  /* ---------- Pricing / CTA ---------- */
  #pricing h2 {
    color: #ff5733; /* Fallback color */
    color: var(--accent-tag);
  }
  .pricing-card{
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border);
    border-radius:20px;
    padding:3rem 2.5rem;
    position:relative;
    overflow:hidden;
  }
  .pricing-card::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 90% 0%, #F2B70522, transparent 60%);
  }
  .price-tag{ font-family:var(--font-mono); font-size:3rem; font-weight:600; color:var(--accent); }
  .price-tag sup{ font-size:1rem; }
  .check-list li{
    display:flex; align-items:center; gap:.6rem;
    padding:.4rem 0;
    color:#CBD5E1;
    font-size:.92rem;
  }
  .check-list i{ color:var(--teal); }

  /* ---------- Footer ---------- */
  footer{
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:3rem 0 1.5rem;
    color:var(--text-muted);
    font-size:.88rem;
  }
  footer a{ color:var(--text-muted); }
  footer a:hover{ color:var(--accent); }
  .social-icon{
    width:36px; height:36px; border-radius:8px;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted);
  }
  .social-icon:hover{ color:var(--accent); border-color:var(--accent); }

  ::selection{ background:var(--accent); color:#0B1120; }