:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --panel2:#f8fafc;
  --text: #111827;
  --muted:#475569;
  --hover:#1e3a8a;
  --accent:#16a34a;
  --danger:#ef4444;
  --border:#e5e7eb;
  --ring: rgba(30,58,138,0.25);
  --shadow: 0 6px 24px rgba(0,0,0,0.08);
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{
  font-size:16px;
  scroll-behavior:smooth;
}
body{
  margin:0;
  font-family: Inter, system-ui,-apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container{width:min(1400px,95%);margin-inline:auto;}
h1,h2,h3,h4,h5{line-height:1.2;}
h1{font-size:clamp(2rem,3.4vw,3.2rem);}
h2{font-size:clamp(1.4rem,2.6vw,2.2rem);}
h3{font-size:clamp(1.2rem,2vw,1.5rem);}
p,li{font-size:clamp(.95rem,1.5vw,1rem);}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:12px;padding:.9rem 1.1rem;font-weight:700;letter-spacing:.2px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  color:var(--text);transition:all .2s ease;
}
.btn.small{padding:.6rem .8rem;font-size:.9rem;}
.btn.solid{
  background:#111827;
  color:#ffffff;
  box-shadow:var(--shadow);
  border-color:#111827;
}
.btn.solid:hover{transform:translateY(-1px);filter:brightness(1.02);}
.btn.ghost{
  background:transparent;
  border-color:#cbd5e1;
  color:var(--text);
}
.btn.ghost:hover{
  border-color:#94a3b8;
  background:#f1f5f9;
  color:var(--hover);
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text);}
.brand-mark{display:inline-flex;width:50px;height:50px;}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
.brand-text{font-family:"Plus Jakarta Sans",Inter,system-ui;font-weight:800;font-size:1.05rem;letter-spacing:.4px;color:var(--text)}
.brand-tagline{color:var(--muted);font-size:.8rem;margin-left:.35rem;}
.main-nav{display:flex;align-items:center;gap:1.2rem;}
.main-nav ul{display:flex;list-style:none;gap:1rem;padding:0;margin:0;}
.main-nav a{color:#334155;text-decoration:none;font-weight:600;}
.main-nav a:hover{color:var(--hover);}
.main-nav a.active{color:var(--hover);}
.nav-cta{display:flex;gap:.6rem;}
.nav-toggle{
  display:none;background:none;border:0;width:44px;height:44px;
  border-radius:10px;color:var(--text);cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:#111827;margin:7px 8px;}
@media (max-width:900px){
  .nav-toggle{display:inline-block;}
  .main-nav{
    position:fixed;inset:64px 0 auto 0;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--border);
    padding:1.2rem;
    transform:translateY(-120%);
    transition:transform .25s ease;
    flex-direction:column;align-items:stretch;gap:1rem;
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;}
  .nav-cta{flex-direction:column;}
}
.hero{
  position:relative;
  overflow:hidden;
  min-height:560px;
  padding:3.5rem 0 2rem;
  background: radial-gradient(1000px 400px at 20% -40%, #f1f5f9, rgba(255,255,255,0) 65%);
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.8fr);
  gap:2rem;
  align-items:flex-start;
  min-height: clamp(520px, 68vh, 780px);
}
.hero-copy{max-width:820px;}
.hero h1{margin:0 0 .6rem;}
.hero p{color:#334155;max-width:56ch;}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem;}
.hero-media{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-video{
  position:absolute;
  top:0; right:0; bottom:0;
  width:60vw;
  min-width:560px;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.05) contrast(1.02);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, #f8fafc 0%, #f8fafc 42%, rgba(248,250,252,0) 64%);
}
@media (max-width:1100px){
  .hero-video{width:58vw; min-width:480px;}
  .hero-media::after{background:linear-gradient(90deg, #f8fafc 0%, #f8fafc 48%, rgba(248,250,252,0) 72%);}
}

@media (min-width:1200px){
  .hero-copy{
    max-width:70%;
    flex-basis:70%;
  }
}
.hero-mobile-video{display:none;margin-top:1rem;}
.hero-mobile-video .mobile-video{
  width:100%;
  display:block;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  filter:saturate(1.05) contrast(1.02);
}
.hero-panel{display:flex;flex-direction:column;gap:1rem;}
.panel-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.2rem;
  box-shadow:var(--shadow);
}
.panel-card h3{margin-top:0;margin-bottom:.6rem;color:#0f172a;}
.panel-card ol{margin:0 0 1rem 0;padding:0;color:#334155;}
.how-steps{
  list-style:none;
  margin:0 0 1rem 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
.how-steps li{
  width:100%;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.65rem .75rem;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
  font-weight:600;
  color:#0f172a;
  box-shadow:0 4px 14px rgba(15,23,42,0.06);
}
.step-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.step-icon img{width:22px;height:22px;object-fit:contain;}
.panel-card .btn{
  display:inline-flex;
  margin-left:0;
  margin-right:auto;
}
@media (max-width:980px){
  .hero{min-height:auto;padding:2.5rem 0 1.5rem;}
  .hero-inner{grid-template-columns:1fr;min-height:auto;}
  .hero-media{display:none;}
  .hero-copy{text-align:center;margin:0 auto;}
  .hero p{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero-mobile-video{display:block;}
  .hero-panel{order:2;margin-top:1.5rem;}
  .panel-card{text-align:center;}
  .how-steps{grid-template-columns:1fr;text-align:center;}
  .how-steps li{
    justify-content:center;
    flex-direction:column;
  }
  .panel-card .btn{margin:0 auto;}
}

@media (min-width:900px){
  .how-steps{grid-template-columns:repeat(2, minmax(220px,1fr));}
}
.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.stat{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:1.1rem .9rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:var(--shadow);
  gap:.4rem;
  min-height:150px;
}
.stat-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stat-icon img{width:26px;height:26px;object-fit:contain;display:block;}
.stat-value{font-weight:800;font-size:1.2rem;line-height:1.1;color:#0f172a;}
.stat-label{color:var(--muted);font-size:.9rem;}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem;justify-content:flex-start;}
.badge{
  display:flex;align-items:center;gap:.4rem;
  background:#f8fafc;border:1px solid var(--border);
  padding:.45rem .6rem;border-radius:999px;color:#0f172a;
}
.badge svg,
.badge img{width:20px;height:20px;display:inline-block;}
.badge svg *{stroke:currentColor;}
.badges.rotator-enabled{
  position:relative;
  display:inline-block;
  width:fit-content;
  min-height:0;
}
.badges.rotator-enabled .badge{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
  white-space:nowrap;
}
.badges.rotator-enabled .badge.active{
  position:relative;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
@media (max-width:900px){
  .badges{justify-content:center;}
  .badges.rotator-enabled{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
  .badges.rotator-enabled .badge,
  .badges.rotator-enabled .badge.active{
    left:50%;
    transform:translate(-50%,6px);
  }
  .badges.rotator-enabled .badge.active{transform:translate(-50%,0);}
  .stats{grid-template-columns:1fr;}
}
.areas{padding:2.2rem 0;}
.section-head h2{margin:.2rem 0;}
.section-head p{color:#334155;}
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;margin-top:1rem;align-items:stretch;
}
.category-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;padding:1rem;
  display:grid;grid-template-rows:1fr auto;gap:.8rem;
  box-shadow:var(--shadow);min-height:180px;
}
.category-card.is-highlight{outline:2px solid #0f172a; box-shadow:0 12px 30px rgba(15,23,42,0.2);}
.category-card-body{display:grid;gap:.6rem;}
.category-card-head{display:flex;align-items:center;gap:.6rem;}
.category-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;
  background:#ffffff;
  border:1px solid #e2e8f0;color:#0f172a;
}
.category-icon.sm{width:28px;height:28px;font-size:16px;border-radius:8px;margin-right:.25rem;vertical-align:middle;}
.category-card h4{margin:0;color:#0f172a;}
.category-card .clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-height:3.1em;
}
.category-card-foot{display:flex;align-items:center;justify-content:space-between;}
.category-card .pill{
  padding:.25rem .5rem;border:1px solid #e2e8f0;
  border-radius:999px;color:#0f172a;background:#ffffff;
}
.cta-band{
  padding:2rem 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#f8fafc;
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;text-align:center;
}
.cta-inner h2{flex:1 1 100%;}
.cta-actions{display:flex;justify-content:center;gap:.6rem;}
@media (max-width:800px){
  .cta-inner{flex-direction:column;align-items:flex-start;text-align:left;}
}
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 0;background:#ffffff;
}
.footer-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;text-align:left;
}
.footer-col h5{margin:.2rem 0 .6rem;}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col a{color:#1f2937;text-decoration:none;font-weight:600;}
.footer-col a:hover{color:var(--hover);}
.footer-col form label{display:block;margin-bottom:.5rem;}
.footer-col input,.footer-col textarea{
  width:100%;background:#ffffff;border:1px solid #cbd5e1;color:var(--text);
  border-radius:12px;padding:.6rem .8rem;outline:none;
}
.footer-col input:focus,.footer-col textarea:focus{
  border-color:#94a3b8;box-shadow:0 0 0 4px var(--ring);
}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1rem;z-index:60;
}
.modal.open{display:flex;}
.modal-content{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  width:min(980px,96vw);max-height:86vh;overflow:auto;padding:1rem 1.1rem;
  box-shadow:var(--shadow);
}
.modal-close{
  position:sticky;top:0;float:right;background:transparent;border:0;
  color:var(--muted);font-size:1.1rem;cursor:pointer;
}
.modal h3{margin:.2rem 0 .2rem;display:flex;align-items:center;gap:.4rem;color:#0f172a;}
.modal .meta{color:var(--muted);}
.modal .modal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.modal .modal-left{min-width:320px;}
.modal .modal-tools{display:flex;align-items:center;gap:.6rem;}
.modal .modal-search{position:relative;}
.modal .modal-search input{
  background:#ffffff;border:1px solid #cbd5e1;color:var(--text);
  padding:.6rem .9rem;border-radius:12px;width:min(360px,70vw);outline:none;
}
.modal .modal-search input:focus{
  border-color:#94a3b8;box-shadow:0 0 0 4px var(--ring);
}
.modal .modal-search button{
  position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#64748b;cursor:pointer;padding:.25rem .45rem;
}
.modal .pricing-toggle{
  display:inline-flex;align-items:center;gap:.9rem;
  border:1px solid #cbd5e1;border-radius:999px;padding:.35rem .6rem;background:#ffffff;
}
.modal .pricing-toggle label{display:flex;align-items:center;gap:.45rem;cursor:pointer;color:#0f172a;font-weight:600;}
.modal .pricing-toggle input{
  appearance:none;width:16px;height:16px;border:2px solid #94a3b8;border-radius:50%;position:relative;background:#ffffff;
}
.modal .pricing-toggle input:checked{border-color:transparent;}
.modal .pricing-toggle input:checked::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  background: var(--hover);
}
.modal .course-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:.9rem;margin-top:.8rem;
}
.course-item{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:.9rem;
  display:grid;gap:.6rem;
  grid-template-rows:auto auto 1fr auto auto;
  box-shadow:var(--shadow);
}
.course-item h5{margin:0;font-size:1rem;font-weight:800;color:#0f172a;}
.course-item .meta{display:flex;gap:.45rem;flex-wrap:wrap;font-size:.9rem;color:var(--muted);}
.pill{padding:.25rem .5rem;border:1px solid #e2e8f0;border-radius:999px;color:#0f172a;background:#ffffff;}
.course-item .desc{color:#334155;margin:.1rem 0 .2rem;}
.course-item .price-row{display:flex;align-items:baseline;justify-content:space-between;}
.price{font-size:1.15rem;font-weight:800;color:#0f172a;}
.small-note{color:#64748b;font-size:.85rem;}
.course-item .actions{display:flex;gap:.6rem;}
.course-item .actions .btn{flex:1;}
@media (max-width:480px){
  .btn{padding:0.75rem 0.9rem;font-size:0.9rem;}
  .hero h1{font-size:1.75rem;}
  .nav-toggle{width:40px;height:40px;}
  .category-card{padding:0.8rem;}
  .stats{grid-template-columns:repeat(3, minmax(0,1fr));}
  .stat{padding:.7rem;}
  .stat-value{font-size:1rem;}
  .stat-label{font-size:.75rem;}
  .modal-content{padding:0.8rem;}
}