:root{
    --bg:#0A0F1E;
    --bg-2:#0D1B3E;
    --surface:#1A2A4A;
    --surface-2:#16224a;
    --cyan:#00C8E0;
    --cyan-soft:rgba(0,200,224,.15);
    --text:#E8F4F8;
    --text-dim:#9BB0C9;
    --white:#ffffff;
    --radius:16px;
    --maxw:1200px;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--white)}
  h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700}
  h2{font-size:clamp(1.8rem,4vw,2.8rem)}
  h3{font-size:1.25rem}
  p{color:var(--text-dim)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .accent{color:var(--cyan)}
  .gradient-text{
    background:linear-gradient(110deg,#fff 30%,var(--cyan) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ===== Nav ===== */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    backdrop-filter:blur(14px);
    background:rgba(10,15,30,.6);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  header.scrolled{background:rgba(10,15,30,.85);border-color:rgba(0,200,224,.12)}
  nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--maxw);margin:0 auto}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:1.25rem;color:#fff}
  .logo-mark{
    width:85px;height:85px;border-radius:10px;
    background:radial-gradient(circle at 30% 30%,var(--cyan),#0a4a8a 70%,#001 100%);
    box-shadow:0 0 36px var(--cyan-soft);
    position:relative;
  }
  .logo-mark::after{
    content:"";position:absolute;inset:6px;border-radius:6px;
    border:1px solid rgba(255,255,255,.4);
  }
  .logo-image{
    width:80px;
    height:80px;
    border-radius:8px;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
  }
  .nav-links{display:flex;gap:32px;align-items:center}
  .nav-links a{color:var(--text-dim);font-size:.95rem;transition:color .2s var(--ease);position:relative}
  .nav-links a:hover{color:var(--white)}
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
    background:var(--cyan);transition:width .3s var(--ease);
  }
  .nav-links a:hover::after{width:100%}
  .btn{
      --bg:#0A0F1E;
      --bg-2:#0D1B3E;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
    cursor:pointer;border:none;font-family:inherit;border-radius: 10px;
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--cyan),#0090b8);
    color:#001827;box-shadow:0 8px 24px -8px var(--cyan);border-radius:10px
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px var(--cyan)}
  .btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.18)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
  .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
    
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding:140px 0 80px;overflow:hidden;
    background:
      radial-gradient(60% 50% at 80% 20%,rgba(0,200,224,.18),transparent 70%),
      radial-gradient(50% 40% at 10% 80%,rgba(13,27,62,.9),transparent 70%),
      var(--bg);
  }
  #neural{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
  .hero-content{position:relative;z-index:2;max-width:780px}
  .eyebrow{
    display:flex;justify-content:center;align-items:center;gap:8px;
    padding:10px 14px;border-radius:999px;
    background:var(--cyan-soft);border:1px solid rgba(0,200,224,.3);
    color:var(--cyan);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
    margin-bottom:24px;
  }

  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
  @keyframes pulse{50%{opacity:.4}}
  .hero h1{
    display:block;
    font-size: clamp(2rem, 5vw, 3.5rem);  /* Scales between 2rem and 3.5rem based on viewport size */
    max-width: 1200px;  /* increases the maximum width to allow it to spread */
    width: 100%;  /* Allows it to fill the container */
    text-align: center;  /* Keeps the heading centered */
    margin: 0 auto;  /* Centers the block element */
    padding: 0 10px;  /* Adds some horizontal breathing room */
}
  
.info-box {
    width: 90%;            /* Let it take a large portion of the screen */
    max-width: 1000px;    /* Prevent it from being too wide */
    margin: 40px auto;      /* Center it horizontally with some top spacing */
    padding: 30px;        /* Space inside the box */
    background: linear-gradient(135deg, #6a11cb, #2574a9); /* Nerdy purple to blue gradient */
    border-radius: 15px;  /* Smooth edges */
    animation: pulse 4s infinite;  /* Adds a gentle nerdy pulse effect */
    text-align: center;    /* Center the text inside */
    color: #fff;          /* White text for contrast */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow for depth */
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.95; }
    100% { transform: scale(1); opacity: 1; }
}


 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;position:center;justify-content:center;border-radius:0px}
  .hero-stats{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap}
  .hero-stats .stat strong{font-family:'Space Grotesk';font-size:2rem;color:#fff;display:block}
  .hero-stats .stat span{font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}

 


/* =========================================================
   CURRICULUM SECTIONS
   ---------------------------------------------------------
   Three curriculum blocks share one base layout but each
   has its own accent color so they can be styled and
   updated independently:

     .subjects-sa      -> South African (CAPS / IEB)   [cyan]
     .subjects-nated   -> NATED Vocational (N4–N6)      [amber]
     .subjects-zimsec  -> Zimbabwean (ZIMSEC)           [green]

   To restyle a section, edit its accent variable below or
   its dedicated block. Shared spacing/typography lives in
   the ".curriculum-section" base rules.
   ========================================================= */

/* ----- Shared base for every curriculum section ----- */
.curriculum-section{
    /* Per-section accent (overridden by each section below) */
    --accent: var(--cyan);
    --accent-soft: var(--cyan-soft);

    padding:90px 20px;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
}

/* Section header (eyebrow + heading + intro copy) */
.curriculum-section .section-head{
    text-align:center;
    max-width:750px;
    margin:0 auto 48px;
}
.curriculum-section .section-head .eyebrow{
    display:inline-flex;
    margin-bottom:16px;
    color:var(--accent);
    background:var(--accent-soft);
    border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.curriculum-section .section-head h2{
    margin-top:4px;
}
.curriculum-section .section-head p{
    margin-top:14px;
    font-size:1.05rem;
}

/* Subject chip grid — flexible, wraps and centers automatically */
.curriculum-section .subjects-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
    max-width:1100px;
    margin:40px auto 0;
}

/* ----- Chips (subject bubbles) — uniform across sections ----- */
.curriculum-section .chip{
    padding:12px 22px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid rgba(255,255,255,.06);
    color:var(--text);
    font-size:.95rem;
    line-height:1;
    white-space:nowrap;
    transition:transform .25s var(--ease),
               border-color .25s var(--ease),
               color .25s var(--ease),
               box-shadow .25s var(--ease);
    cursor:pointer;
}
.curriculum-section .chip:hover,
.curriculum-section .chip:focus-visible{
    transform:translateY(-3px);
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 8px 20px -10px var(--accent);
    outline:none;
}

/* ----- South African (CAPS / IEB) — cyan ----- */
.subjects-sa{
    --accent:#00C8E0;
    --accent-soft:rgba(0,200,224,.15);
    background:rgba(13,27,62,.4);
}

/* ----- NATED Vocational (N4–N6) — amber ----- */
.subjects-nated{
    --accent:#F5A623;
    --accent-soft:rgba(245,166,35,.15);
    background:rgba(10,15,30,.55);
}

/* ----- Zimbabwean (ZIMSEC) — green ----- */
.subjects-zimsec{
    --accent:#3DD68C;
    --accent-soft:rgba(61,214,140,.15);
    background:rgba(13,27,62,.4);
}

  /* ===== Why us — cards ===== */
  #why{
    padding-top:60px;}
    .section-head{ margin-bottom:2rem; text-align:center}
    .section-head p {max-width: 700px; margin: 20px auto}

  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px; padding:24px 0}
  .card{
    padding:32px;border-radius:var(--radius);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    position:relative;overflow:hidden;
  }
  .card::before{
    content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,transparent,var(--cyan),transparent);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .4s var(--ease);
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,200,224,.35)}
  .card:hover::before{opacity:1}
  .card .icon{
    width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
    background:var(--cyan-soft);color:var(--cyan);margin-bottom:20px;
    border:1px solid rgba(0,200,224,.3);
  }
  .card h3{margin-bottom:10px}

  /* ===== How it works ===== */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
  .step{
    position:relative;padding:32px 24px;border-radius:var(--radius);
    background:var(--surface);border:1px solid rgba(255,255,255,.05);
    transition:border-color .3s var(--ease), transform .3s var(--ease);
  }
  .step:hover{border-color:var(--cyan);transform:translateY(-4px)}
  .step::before{
    counter-increment:step;content:"0" counter(step);
    font-family:'Space Grotesk';font-size:2.5rem;font-weight:700;
    color:transparent;-webkit-text-stroke:1px var(--cyan);
    display:block;margin-bottom:14px;
  }

  /* ===== Tutors / Testimonials ===== */

#tutors{
    padding-top:60px;}
    .section-head{ margin-bottom:2rem; text-align:center}
    .section-head p {max-width: 700px; margin: 20px auto}


  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .quote{
    padding:36px;border-radius:var(--radius);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid rgba(255,255,255,.06);
    position:relative;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .quote:hover{transform:translateY(-4px);box-shadow:0 24px 50px -25px rgba(0,200,224,.3)}
  .quote .mark{color:var(--cyan);font-size:3rem;line-height:1;font-family:'Space Grotesk';margin-bottom:8px;opacity:.7}
  .quote p{color:var(--text);font-size:1.05rem;margin-bottom:24px;font-style:italic}
  .who{display:flex;align-items:center;gap:14px}
  .avatar{
    width:48px;height:48px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--cyan),var(--bg-2));
    display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;color:#001;
  }
  .who strong{display:block;color:#fff;font-weight:500;font-family:'Space Grotesk'}
  .who span{font-size:.85rem;color:var(--text-dim)}

  /* ===== CTA ===== */
  .cta-band{
    margin:80px auto;max-width:1100px;padding:60px 40px;border-radius:24px;
    background:
      radial-gradient(circle at 80% 50%,rgba(0,200,224,.25),transparent 60%),
      linear-gradient(135deg,var(--bg-2),var(--surface));
    border:1px solid rgba(0,200,224,.2);
    text-align:center;position:relative;overflow:hidden;
  }
  .cta-band h2{margin-bottom:14px}
  .cta-band p{max-width:560px;margin:0 auto 30px}

  /* ===== Footer ===== */
  footer{
    padding:60px 0 30px;border-top:1px solid rgba(255,255,255,.06);
    background:#06091a;
  }
  .foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
  .foot h4{font-size:.95rem;margin-bottom:16px;color:#fff}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .foot a{color:var(--text-dim);font-size:.9rem;transition:color .2s}
  .foot a:hover{color:var(--cyan)}
  .copy{text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);color:var(--text-dim);font-size:.85rem}

  /* ===== Reveal animation ===== */
  .reveal{opacity:1;transform:translateY(none);transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* ===== Responsive ===== */
  @media (max-width:900px){
    .grid-3{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .foot{grid-template-columns:1fr 1fr}
    .curriculum-section{padding:70px 18px}
    .curriculum-section .section-head{margin-bottom:36px}
  }
  @media (max-width:640px){
    .nav-links{
      position:fixed;top:70px;left:0;right:0;
      flex-direction:column;gap:0;padding:20px;
      background:rgba(10,15,30,.98);backdrop-filter:blur(20px);
      border-bottom:1px solid rgba(255,255,255,.06);
      transform:translateY(-120%);transition:transform .35s var(--ease);
    }
    .nav-links.open{transform:translateY(0)}
    .nav-links a{padding:14px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.05)}
    .nav-links .btn{margin-top:10px;width:100%;justify-content:center}
    .menu-toggle{display:block}
    .grid-3,.steps,.grid-2,.foot{grid-template-columns:1fr}
    .hero-stats{gap:28px}
    .hero-stats .stat strong{font-size:1.5rem}
    section{padding:70px 0}
    .cta-band{padding:40px 24px;margin:40px 16px}
    .curriculum-section{padding:56px 16px}
    .curriculum-section .subjects-grid{gap:12px}
    .curriculum-section .chip{padding:10px 18px;font-size:.9rem;white-space:normal;text-align:center}
  }