:root{
    --brand:#6091ba;
    --brand-2:#53a8b6;
    --brand-3:#1d4ed8;
    --ink:#0f172a;
    --muted:#5d6f87;
    --surface:rgba(255,255,255,.9);
    --surface-strong:#ffffff;
    --border:rgba(15,23,42,.08);
    --shadow:0 18px 44px rgba(15,23,42,.08);
    --radius:22px;
  }

  [data-bs-theme="dark"]{
    --ink:#eef5ff;
    --muted:rgba(255,255,255,.74);
    --surface:rgba(15,23,42,.86);
    --surface-strong:rgba(15,23,42,.94);
    --border:rgba(255,255,255,.12);
    --shadow:0 22px 54px rgba(0,0,0,.34);
  }

  .home-page{
    overflow-x:hidden;
    background:
      radial-gradient(1000px 460px at 10% -10%, rgba(96,145,186,.18), transparent 60%),
      radial-gradient(760px 380px at 100% 8%, rgba(83,168,182,.15), transparent 56%),
      linear-gradient(180deg, #f7fbff 0%, #ffffff 55%, #f8fbff 100%);
  }

  [data-bs-theme="dark"] .home-page{
    background:
      radial-gradient(1100px 520px at 8% -8%, rgba(96,145,186,.18), transparent 60%),
      radial-gradient(880px 420px at 100% 4%, rgba(83,168,182,.14), transparent 58%),
      #09111f;
  }

  .home-section{ padding: clamp(2.25rem, 4vw, 4rem) 0; }
  .hero-section{ padding: clamp(1.1rem, 2vw, 1.8rem) 0 clamp(2rem, 4vw, 3rem); }

  .hero-shell,
  .panel-card,
  .feature-card,
  .chapter-card,
  .stats-shell,
  .final-cta{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }

  .hero-shell{
    padding:clamp(1rem, 1.6vw, 1.3rem);
    background:
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)),
      var(--surface);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.4rem .8rem;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(96,145,186,.14), rgba(83,168,182,.12));
    border:1px solid rgba(96,145,186,.2);
    color:#234e77;
    font-size:.82rem;
    font-weight:800;
  }

  [data-bs-theme="dark"] .eyebrow{
    color:#d7eeff;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.12);
  }

  .hero-title{
    margin:.75rem 0 .55rem;
    font-family:'Playfair Display', serif;
    font-size:clamp(1.35rem, 2.7vw, 2.4rem);
    line-height:1.06;
    letter-spacing:-.03em;
    color:var(--ink);
  }

  .hero-title span{
    display:block;
    margin-top:.15rem;
    background:linear-gradient(135deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-weight:700;
  }

  .hero-subtitle,
  .section-subtitle{
    color:var(--muted);
    line-height:1.68;
    font-size:.9rem;
  }

  .hero-subtitle{
    max-width:60ch;
    margin:0;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-top:1rem;
  }

  .btn-home-primary,
  .btn-home-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    padding:.72rem .98rem;
    border-radius:14px;
    font-weight:800;
    font-size:.88rem;
    text-decoration:none;
  }

  .btn-home-primary{
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff;
    border:0;
    box-shadow:0 16px 36px rgba(96,145,186,.28);
  }

  .btn-home-primary:hover{
    color:#fff;
    filter:brightness(1.04);
  }

  .btn-home-secondary{
    background:var(--surface-strong);
    border:1px solid var(--border);
    color:var(--ink);
  }

  .btn-home-secondary:hover{
    color:var(--ink);
    border-color:rgba(96,145,186,.28);
  }

  .hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1rem;
  }

  .hero-pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.46rem .78rem;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    border:1px solid var(--border);
    color:var(--ink);
    font-size:.84rem;
    font-weight:700;
  }

  [data-bs-theme="dark"] .hero-pill{
    background:rgba(255,255,255,.04);
  }

  .hero-explain{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.75rem;
    margin-top:1rem;
  }

  .hero-explain-card{
    padding:.9rem;
    border-radius:18px;
    background:rgba(255,255,255,.72);
    border:1px solid var(--border);
  }

  [data-bs-theme="dark"] .hero-explain-card{
    background:rgba(255,255,255,.04);
  }

  .hero-explain-card strong{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.35rem;
    color:var(--ink);
    font-size:.88rem;
    font-weight:800;
  }

  .hero-explain-card span{
    display:block;
    color:var(--muted);
    font-size:.8rem;
    line-height:1.55;
  }

  .hero-focus{
    margin-top:1rem;
    padding:1rem 1.05rem;
    border-radius:20px;
    background:
      linear-gradient(135deg, rgba(96,145,186,.08), rgba(83,168,182,.06)),
      rgba(255,255,255,.82);
    border:1px solid rgba(96,145,186,.14);
  }

  [data-bs-theme="dark"] .hero-focus{
    background:
      linear-gradient(135deg, rgba(96,145,186,.12), rgba(83,168,182,.08)),
      rgba(255,255,255,.03);
  }

  .hero-focus-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.8rem;
    margin-bottom:.8rem;
  }

  .hero-focus-head strong{
    display:block;
    color:var(--ink);
    font-size:.95rem;
    font-weight:900;
  }

  .hero-focus-head span{
    display:block;
    margin-top:.2rem;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.55;
  }

  .hero-focus-kicker{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.42rem .7rem;
    border-radius:999px;
    background:rgba(255,255,255,.75);
    border:1px solid var(--border);
    color:#295985;
    font-size:.76rem;
    font-weight:800;
    white-space:nowrap;
  }

  .hero-focus-links{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.7rem;
  }

  .hero-focus-link{
    display:flex;
    flex-direction:column;
    gap:.28rem;
    padding:.85rem .95rem;
    border-radius:18px;
    background:rgba(255,255,255,.9);
    border:1px solid var(--border);
    text-decoration:none;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  [data-bs-theme="dark"] .hero-focus-link{
    background:rgba(255,255,255,.04);
  }

  .hero-focus-link:hover{
    transform:translateY(-1px);
    border-color:rgba(96,145,186,.3);
    box-shadow:0 12px 28px rgba(96,145,186,.12);
  }

  .hero-focus-link strong{
    color:var(--ink);
    font-size:.94rem;
    font-weight:900;
  }

  .hero-focus-link span{
    color:var(--muted);
    font-size:.79rem;
    line-height:1.45;
  }

  .home-programme{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(1rem, 2vw, 1.35rem);
  }

  .home-programme-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.8rem;
    margin-top:1rem;
  }

  .home-programme-card{
    display:block;
    height:100%;
    padding:1rem;
    border-radius:18px;
    background:rgba(255,255,255,.74);
    border:1px solid var(--border);
    color:var(--ink);
    text-decoration:none;
  }

  [data-bs-theme="dark"] .home-programme-card{
    background:rgba(255,255,255,.04);
  }

  .home-programme-card:hover{
    color:var(--ink);
    border-color:rgba(96,145,186,.28);
    transform:translateY(-1px);
  }

  .home-programme-card strong{
    display:block;
    font-size:.95rem;
    font-weight:900;
    margin-bottom:.35rem;
  }

  .home-programme-card span{
    display:block;
    color:var(--muted);
    font-size:.84rem;
    line-height:1.55;
  }

  .panel-card{
    height:100%;
    padding:1rem;
    scroll-margin-top:5.5rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92)),
      var(--surface);
  }

  .panel-head{
    display:flex;
    justify-content:space-between;
    gap:.75rem;
    align-items:flex-start;
    margin-bottom:.9rem;
  }

  .panel-head h2,
  .panel-head h3,
  .section-title{
    margin:0;
    font-family:'Playfair Display', serif;
    color:var(--ink);
    letter-spacing:-.02em;
  }

  .panel-head h2,
  .panel-head h3{
    font-size:1.05rem;
  }

  .panel-head p{
    margin:.2rem 0 0;
    color:var(--muted);
    font-size:.84rem;
    line-height:1.55;
  }

  .panel-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.45rem .75rem;
    border-radius:999px;
    background:rgba(96,145,186,.09);
    border:1px solid rgba(96,145,186,.14);
    color:#295985;
    font-size:.8rem;
    font-weight:800;
    white-space:nowrap;
  }

  .panel-kicker{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-bottom:.45rem;
    padding:.28rem .56rem;
    border-radius:999px;
    background:rgba(96,145,186,.08);
    border:1px solid rgba(96,145,186,.14);
    color:#295985;
    font-size:.72rem;
    font-weight:800;
  }

  .group-stack{
    display:flex;
    flex-direction:column;
    gap:.65rem;
  }

  .group-empty{
    padding:1rem;
    border-radius:18px;
    background:rgba(255,255,255,.72);
    border:1px dashed var(--border);
    color:var(--muted);
    font-size:.9rem;
    line-height:1.6;
  }

  [data-bs-theme="dark"] .group-empty{
    background:rgba(255,255,255,.04);
  }

  details.group{
    overflow:hidden;
    border-radius:18px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.74);
  }

  [data-bs-theme="dark"] details.group{
    background:rgba(255,255,255,.04);
  }

  details.group > summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:.75rem;
    padding:.9rem;
    user-select:none;
  }

  details.group > summary::-webkit-details-marker{ display:none; }

  .group-left{
    display:flex;
    gap:.75rem;
    min-width:0;
  }

  .group-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(145deg, rgba(96,145,186,.16), rgba(83,168,182,.1));
    border:1px solid rgba(96,145,186,.14);
    color:var(--ink);
    flex:0 0 auto;
  }

  .group-name{
    margin:0;
    color:var(--ink);
    font-weight:900;
    font-size:.92rem;
  }

  .group-desc{
    margin:.15rem 0 0;
    color:var(--muted);
    font-size:.82rem;
  }

  .group-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 .65rem;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.68);
    color:var(--ink);
    font-size:.76rem;
    font-weight:800;
  }

  .group-body{
    padding:0 .9rem .9rem;
  }

  .class-chips{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.55rem;
  }

  .class-chip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    min-width:0;
    padding:.55rem .85rem;
    min-height:42px;
    border-radius:14px;
    background:rgba(255,255,255,.88);
    border:1px solid var(--border);
    color:var(--ink);
    font-size:.86rem;
    font-weight:900;
    text-decoration:none;
    text-align:center;
    white-space:nowrap;
  }

  .class-chip span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .class-chip:hover{
    color:var(--ink);
    border-color:rgba(96,145,186,.34);
    transform:translateY(-1px);
  }

  .class-chip .dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    flex:0 0 auto;
  }

  .section-label{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-bottom:.65rem;
    padding:.42rem .74rem;
    border-radius:999px;
    background:rgba(96,145,186,.08);
    border:1px solid rgba(96,145,186,.14);
    color:#295985;
    font-size:.8rem;
    font-weight:800;
  }

  .section-title{
    font-size:clamp(1.8rem, 3.1vw, 2.7rem);
  }

  .feature-card,
  .chapter-card{
    height:100%;
    padding:1.1rem;
  }

  .feature-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    margin-bottom:.85rem;
    background:rgba(96,145,186,.11);
    border:1px solid rgba(96,145,186,.14);
    color:var(--brand);
  }

  .feature-card h3,
  .chapter-card h3{
    color:var(--ink);
    font-size:1rem;
    font-weight:800;
    margin-bottom:.45rem;
  }

  .feature-card p,
  .chapter-card p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
    font-size:.9rem;
  }

  .chapter-meta{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-bottom:.8rem;
    padding:.4rem .72rem;
    border-radius:999px;
    background:rgba(96,145,186,.08);
    border:1px solid rgba(96,145,186,.14);
    color:#295985;
    font-size:.76rem;
    font-weight:800;
  }

  .chapter-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    margin-top:1rem;
  }

  .stats-shell{
    padding:1.15rem;
  }

  .stats-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1rem;
  }

  .stat-card{
    padding:1rem;
    border-radius:18px;
    background:rgba(255,255,255,.64);
    border:1px solid var(--border);
  }

  [data-bs-theme="dark"] .stat-card{
    background:rgba(255,255,255,.03);
  }

  .stat-label{
    margin-bottom:.3rem;
    color:var(--muted);
    font-size:.9rem;
  }

  .stat-value{
    color:var(--ink);
    font-size:clamp(1.65rem, 2.6vw, 2.35rem);
    font-weight:900;
    line-height:1;
  }

  .stat-note{
    margin-top:.35rem;
    color:var(--muted);
    font-size:.88rem;
  }

  .final-cta{
    padding:1.5rem;
    text-align:center;
  }

  .premium-shell{
    padding:clamp(1.15rem, 2.2vw, 1.6rem);
    background:
      linear-gradient(135deg, rgba(96,145,186,.10), rgba(83,168,182,.07)),
      var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }

  .premium-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(290px, .85fr);
    gap:1rem;
    align-items:stretch;
  }

  .premium-intro{
    max-width:68ch;
    margin:.55rem 0 0;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.65;
  }

  .premium-plans{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.8rem;
    margin-top:1rem;
  }

  .premium-plan,
  .payment-panel{
    background:rgba(255,255,255,.76);
    border:1px solid var(--border);
    border-radius:18px;
  }

  [data-bs-theme="dark"] .premium-plan,
  [data-bs-theme="dark"] .payment-panel{
    background:rgba(255,255,255,.04);
  }

  .premium-plan{
    padding:1rem;
  }

  .premium-plan.is-featured{
    border-color:rgba(83,168,182,.42);
    box-shadow:0 16px 34px rgba(83,168,182,.12);
  }

  .premium-badge{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-bottom:.55rem;
    padding:.28rem .58rem;
    border-radius:999px;
    background:rgba(83,168,182,.12);
    border:1px solid rgba(83,168,182,.18);
    color:#246675;
    font-size:.72rem;
    font-weight:900;
  }

  [data-bs-theme="dark"] .premium-badge{
    color:#d7f8ff;
  }

  .premium-plan-name{
    margin:0;
    color:var(--ink);
    font-size:.94rem;
    font-weight:900;
  }

  .premium-price{
    display:flex;
    align-items:baseline;
    gap:.3rem;
    margin:.42rem 0;
    color:var(--ink);
  }

  .premium-price strong{
    font-size:clamp(1.7rem, 2.8vw, 2.25rem);
    line-height:1;
    font-weight:900;
  }

  .premium-price span{
    color:var(--muted);
    font-size:.84rem;
  }

  .premium-note{
    margin:0;
    color:var(--muted);
    font-size:.8rem;
    line-height:1.5;
  }

  .premium-payment-chips{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin-top:.75rem;
  }

  .premium-payment-chip{
    display:inline-flex;
    align-items:center;
    gap:.34rem;
    padding:.35rem .58rem;
    background:rgba(255,255,255,.72);
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--ink);
    font-size:.72rem;
    font-weight:800;
  }

  [data-bs-theme="dark"] .premium-payment-chip{
    background:rgba(255,255,255,.04);
  }

  .premium-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-top:1rem;
  }

  .payment-panel{
    height:100%;
    padding:1rem;
  }

  .payment-panel h3{
    margin:0 0 .25rem;
    color:var(--ink);
    font-size:1rem;
    font-weight:900;
  }

  .payment-panel > p{
    margin:0 0 .85rem;
    color:var(--muted);
    font-size:.83rem;
    line-height:1.55;
  }

  .payment-list{
    display:grid;
    gap:.65rem;
  }

  .payment-method{
    display:flex;
    align-items:flex-start;
    gap:.7rem;
    padding:.8rem;
    background:rgba(255,255,255,.74);
    border:1px solid var(--border);
    border-radius:16px;
  }

  [data-bs-theme="dark"] .payment-method{
    background:rgba(255,255,255,.035);
  }

  .payment-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(145deg, rgba(96,145,186,.16), rgba(83,168,182,.11));
    border:1px solid rgba(96,145,186,.15);
    border-radius:13px;
    color:#295985;
    font-size:1.05rem;
  }

  [data-bs-theme="dark"] .payment-icon{
    color:#d7eeff;
  }

  .payment-method strong{
    display:block;
    margin-bottom:.12rem;
    color:var(--ink);
    font-size:.88rem;
    font-weight:900;
  }

  .payment-method span{
    display:block;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.45;
  }

  .payment-security{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    margin-top:.8rem;
    padding:.75rem .8rem;
    background:rgba(34,197,94,.07);
    border:1px solid rgba(34,197,94,.14);
    border-radius:15px;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.5;
  }

  .payment-security i{
    margin-top:.08rem;
    color:#16803b;
  }

  @media (max-width: 991.98px){
    .stats-grid{ grid-template-columns:1fr; }
    .hero-explain{ grid-template-columns:1fr; }
    .hero-focus-links{ grid-template-columns:1fr; }
    .home-programme-grid{ grid-template-columns:1fr; }
    .premium-grid{ grid-template-columns:1fr; }
  }

  @media (max-width: 767.98px){
    .hero-actions,
    .chapter-actions{
      flex-direction:column;
      align-items:stretch;
    }

    .panel-head{
      flex-direction:column;
      align-items:flex-start;
    }

    .hero-focus-head{
      flex-direction:column;
    }

    .class-chips{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .premium-plans{
      grid-template-columns:1fr;
    }

    .premium-actions{
      flex-direction:column;
      align-items:stretch;
    }
  }

/* CSP-safe replacement for former inline style */
.lx-max-64ch {
    max-width: 64ch;
}