/*
    Deliberate single-theme (dark terminal) design — matches the user's
    supplied logo exactly, so no light-mode variant / prefers-color-scheme.
    Every color is still declared explicitly so the page holds on any host ground.
  */
  :root{
    --bg:#070907;
    --bg-raised:#0d100c;
    --bg-raised-2:#12160f;
    --green:#39ff14;
    --green-dim:#1f8f16;
    --green-glow: rgba(57,255,20,0.35);
    --white:#eef2ec;
    --grey:#7c8a7a;
    --grey-dim:#4d564a;
    --border: rgba(57,255,20,0.28);
    --border-soft: rgba(238,242,236,0.12);
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--bg); color:var(--white);
    font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    line-height:1.65; font-size:15px;
  }
  ::selection{ background:var(--green); color:#04140a; }

  [lang-en]{ display:none !important; }
  html.show-en [lang-nl]{ display:none !important; }
  html.show-en span[lang-en], html.show-en a[lang-en]{ display:inline !important; }
  html.show-en p[lang-en], html.show-en h2[lang-en], html.show-en h3[lang-en], html.show-en div[lang-en]{ display:block !important; }
  html.show-en li[lang-en]{ display:list-item !important; }
  html.show-en .eyebrow[lang-en]{ display:inline-block !important; }
  html.show-en .who[lang-en]{ display:block !important; }

  a{ color:var(--green); }

  .glow{ text-shadow: 0 0 18px var(--green-glow); }

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px clamp(20px,5vw,56px);
    background:rgba(7,9,7,0.88); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand svg{ width:30px; height:30px; flex:none; }
  .brand .word{ font-weight:700; font-size:1.05rem; letter-spacing:0.01em; }
  .brand .word .ly{ color:var(--green); }

  .langbar{ display:flex; gap:6px; }
  .langbar button{
    font-family:inherit; font-size:0.74rem; letter-spacing:0.04em;
    border:1px solid var(--border-soft); background:transparent; color:var(--grey);
    padding:6px 13px; border-radius:3px; cursor:pointer;
  }
  .langbar button.active{ background:var(--green); color:#04140a; border-color:var(--green); font-weight:700; }
  .langbar button:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

  section{ padding:clamp(48px,7vw,84px) clamp(20px,5vw,56px); }
  .wrap{ max-width:920px; margin:0 auto; }

  /* ---------- terminal window chrome ---------- */
  .term{
    background:var(--bg-raised); border:1px solid var(--border-soft);
    border-radius:6px; overflow:hidden;
  }
  .term-bar{
    display:flex; align-items:center; gap:8px;
    padding:9px 14px; background:var(--bg-raised-2); border-bottom:1px solid var(--border-soft);
  }
  .term-dot{ width:9px; height:9px; border-radius:50%; background:var(--grey-dim); }
  .term-title{
    margin-left:8px; font-size:0.72rem; color:var(--grey); letter-spacing:0.02em;
  }

  /* ---------- hero ---------- */
  .hero .wrap{ max-width:960px; }
  .eyebrow{
    font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--green);
    display:inline-block; margin-bottom:20px;
  }
  .eyebrow::before{ content:"["; color:var(--grey-dim); }
  .eyebrow::after{ content:"]"; color:var(--grey-dim); }
  .hero h1{
    font-size:clamp(2.6rem,8vw,4.4rem); font-weight:800; letter-spacing:-0.01em;
    margin:0 0 20px; line-height:1; color:var(--white);
  }
  .hero h1 .ly{ color:var(--green); }
  .hero h1 .cursor{
    display:inline-block; width:0.5em; background:var(--green); margin-left:0.08em;
    animation:blink 1.1s steps(1) infinite;
  }
  @media (prefers-reduced-motion:reduce){ .hero h1 .cursor{ animation:none; opacity:1; } }
  @keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

  .tagline{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--white); max-width:38ch; margin:0 0 14px; font-weight:500; }
  .subline{ font-size:0.96rem; color:var(--grey); max-width:56ch; margin:0 0 40px; }

  .term-demo .term-body{ padding:20px 22px; font-size:0.92rem; }
  .term-demo .line{ margin:0 0 12px; white-space:pre-wrap; }
  .term-demo .line:last-child{ margin-bottom:0; }
  .term-demo .prompt{ color:var(--green); }
  .term-demo .user-text{ color:var(--white); }
  .term-demo .out{ color:var(--grey); padding-left:1.6em; }

  .stats{ display:flex; flex-wrap:wrap; margin-top:44px; border-top:1px solid var(--border-soft); }
  .stats .stat{
    flex:1 1 140px; padding:20px 16px 0 0; border-right:1px solid var(--border-soft);
  }
  .stats .stat:last-child{ border-right:none; }
  .stats .num{ font-weight:700; font-size:1.7rem; color:var(--green); display:block; margin-bottom:2px; }
  .stats .label{ font-size:0.78rem; color:var(--grey); }

  /* ---------- section headings ---------- */
  h2{
    font-size:clamp(1.4rem,3vw,1.85rem); font-weight:700; margin:0 0 20px; color:var(--white);
    display:flex; align-items:baseline; gap:10px;
  }
  h2::before{ content:"$"; color:var(--green); font-weight:700; }
  .lede{ font-size:1rem; color:var(--grey); max-width:62ch; margin:0; }

  section.alt{ background:var(--bg-raised); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

  /* ---------- features ---------- */
  .features{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:32px; }
  .feature{ background:var(--bg); border:1px solid var(--border-soft); border-radius:6px; padding:22px 22px 20px; }
  .feature .fnum{ font-size:0.78rem; color:var(--green); letter-spacing:0.04em; margin-bottom:10px; display:block; }
  .feature h3{ font-size:1.02rem; font-weight:700; margin:0 0 8px; color:var(--white); }
  .feature p{ font-size:0.88rem; color:var(--grey); margin:0; }

  /* ---------- curriculum ---------- */
  .curriculum{ display:flex; flex-direction:column; margin-top:8px; }
  .lesson-row{
    display:grid; grid-template-columns:64px 1fr; gap:20px;
    padding:20px 0; border-bottom:1px solid var(--border-soft);
  }
  .lesson-row:first-child{ padding-top:0; }
  .lesson-row:last-child{ border-bottom:none; }
  .lesson-row .lnum{ font-weight:700; font-size:1rem; color:var(--green); line-height:1.6; }
  .lesson-row .lnum::before{ content:"["; color:var(--grey-dim); }
  .lesson-row .lnum::after{ content:"]"; color:var(--grey-dim); }
  .lesson-row h3{ font-size:0.98rem; font-weight:700; margin:0 0 5px; color:var(--white); }
  .lesson-row p{ font-size:0.86rem; color:var(--grey); margin:0; max-width:58ch; }

  /* ---------- pricing ---------- */
  .price-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
  .price-card{
    background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:6px; padding:26px 24px;
    display:flex; flex-direction:column;
  }
  .price-card.highlight{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
  .price-card .ptag{ font-size:0.72rem; letter-spacing:0.05em; color:var(--grey); margin-bottom:14px; display:block; }
  .price-card .ptag::before{ content:"// "; color:var(--grey-dim); }
  .price-card .pamount{ font-weight:800; font-size:2.1rem; color:var(--white); line-height:1; margin-bottom:8px; }
  .price-card .pamount .unit{ font-size:0.85rem; font-weight:500; color:var(--grey); }
  .price-card .pdesc{ font-size:0.88rem; color:var(--grey); margin:8px 0 0; }
  .price-note{ font-size:0.82rem; color:var(--grey-dim); margin-top:18px; }
  .price-note::before{ content:"# "; }

  .pay-btn{
    display:block; margin-top:auto; font-family:inherit; font-size:0.8rem; font-weight:700;
    letter-spacing:0.03em; text-decoration:none; text-align:center;
    padding:10px 0; width:100%; border-radius:4px; border:1px solid var(--green); color:var(--green);
    background:transparent; cursor:pointer; box-sizing:border-box;
  }
  .price-card .pdesc{ margin-bottom:18px; }
  .pay-btn:hover{ background:var(--green); color:#04140a; }
  .pay-btn[data-disabled="true"]{ border-color:var(--border-soft); color:var(--grey-dim); cursor:not-allowed; }
  .pay-btn[data-disabled="true"]:hover{ background:transparent; color:var(--grey-dim); }

  /* ---------- signup form ---------- */
  .paid-banner{
    background:var(--green); color:#04140a; font-weight:700; font-size:0.88rem;
    padding:14px 18px; border-radius:6px; margin-bottom:20px;
  }
  .term-form .term-body{ padding:26px 26px 28px; }
  .field{ margin-bottom:18px; }
  .field-label{ display:block; font-size:0.76rem; color:var(--green); margin-bottom:6px; }
  .field-label::before{ content:"> "; color:var(--grey-dim); }
  .field input, .field select{
    width:100%; background:var(--bg); border:1px solid var(--border-soft); color:var(--white);
    font-family:inherit; font-size:0.9rem; padding:10px 12px; border-radius:4px; box-sizing:border-box;
  }
  .field input:focus, .field select:focus{ outline:none; border-color:var(--green); }
  .submit-btn{
    font-family:inherit; font-weight:700; font-size:0.88rem; letter-spacing:0.03em;
    background:var(--green); color:#04140a; border:none; border-radius:4px;
    padding:12px 22px; cursor:pointer; margin-top:4px;
  }
  .submit-btn:hover{ filter:brightness(1.1); }
  .submit-btn:disabled{ opacity:0.6; cursor:not-allowed; filter:none; }
  .form-note{ font-size:0.76rem; color:var(--grey-dim); margin-top:14px; }

  /* ---------- CTA ---------- */
  .cta h2::before{ content:"$"; }
  .cta p{ color:var(--grey); max-width:56ch; font-size:0.98rem; }
  .cta .badgepair{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
  .cta .badgepair span{
    font-size:0.74rem; letter-spacing:0.03em; border:1px solid var(--border);
    color:var(--green); border-radius:3px; padding:7px 13px;
  }

  .foot{ padding:22px clamp(20px,5vw,56px) 36px; font-size:0.8rem; color:var(--grey-dim); }

  @media (max-width: 720px){
    .features{ grid-template-columns:1fr; }
    .price-cards{ grid-template-columns:1fr; }
    .stats .stat{ flex:1 1 45%; }
  }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:2px; margin-top:32px; }
.faq details{
  background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:6px;
  padding:18px 20px;
}
.faq details[open]{ border-color:var(--border); }
.faq summary{
  cursor:pointer; list-style:none; font-weight:700; font-size:0.95rem; color:var(--white);
  display:flex; align-items:baseline; gap:10px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q:"; color:var(--green); font-weight:700; flex:none; }
.faq .a{ margin:12px 0 0 24px; font-size:0.9rem; color:var(--grey); }
.faq .a::before{ content:"A: "; color:var(--grey-dim); }

/* ---------- footer links ---------- */
.foot{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.foot a{ color:var(--grey-dim); text-decoration:underline; }
.foot a:hover{ color:var(--green); }
.foot .sep{ color:var(--grey-dim); }

/* ---------- document pages (privacy / terms) ---------- */
.doc .wrap{ max-width:760px; }
.doc h2{ display:block; }
.doc h2::before{ content:none; }
.doc h3{ font-size:1.05rem; font-weight:700; color:var(--white); margin:28px 0 10px; }
.doc h3:first-of-type{ margin-top:0; }
.doc p, .doc li{ font-size:0.92rem; color:var(--grey); }
.doc p{ margin:0 0 14px; }
.doc ul{ margin:0 0 14px; padding-left:1.3em; }
.doc li{ margin-bottom:6px; }
.doc strong{ color:var(--white); }
.doc .updated{ font-size:0.78rem; color:var(--grey-dim); margin-bottom:32px; }