:root{
  --bg:#0b0e13;
  --surface:#101522;
  --soft:#0f1420;
  --muted:#9aa3b2;
  --text:#f5f7fb;
  --brand:#9b8cff; /* purple accent like Knowvation */
  --accent:#22d3ee; /* cyan secondary */
  --success:#34d399;
  --ring:#1f2940;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav-wrap{position:sticky;top:0;z-index:60;background:rgba(11,14,19,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--ring)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
.nav .links{display:flex;gap:16px;align-items:center}
.btn{padding:12px 16px;border-radius:12px;border:1px solid var(--ring);background:var(--soft);color:#e6e9f2;display:inline-flex;gap:8px;align-items:center}
.btn.primary{background:linear-gradient(135deg,var(--brand),#6ee7b7);border:none;color:#0b0e13;font-weight:900;box-shadow:var(--shadow)}
.btn.ghost{background:transparent}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:28px 0}
.hero h1{font-size:50px;line-height:1.05;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px}
.badge{font-size:12px;padding:4px 10px;border:1px solid var(--ring);border-radius:999px;color:#cdd5e1;display:inline-flex;gap:8px;align-items:center}
.hero-art{aspect-ratio:4/3;border-radius:22px;border:1px solid var(--ring);position:relative;overflow:hidden;box-shadow:var(--shadow);
  background: radial-gradient(900px 500px at -10% -20%, #1b1e4b, transparent),
              radial-gradient(700px 400px at 110% 10%, #0aa, transparent);}
.hero-bubbles div{position:absolute;border-radius:999px;filter:blur(1px);opacity:.55;animation:float 8s ease-in-out infinite}
.hero-bubbles div:nth-child(1){width:120px;height:120px;left:10%;top:10%;background:#9b8cff33;animation-duration:9s}
.hero-bubbles div:nth-child(2){width:80px;height:80px;left:65%;top:15%;background:#22d3ee33;animation-duration:7s}
.hero-bubbles div:nth-child(3){width:150px;height:150px;left:40%;top:50%;background:#34d39933;animation-duration:11s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.section{padding:36px 0}
.section .title{font-size:32px;margin:0 0 8px}
.p{color:var(--muted)}
.card{background:linear-gradient(180deg,#12182a,#0b0e13);border:1px solid var(--ring);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.tab{padding:10px 14px;border-radius:999px;border:1px solid var(--ring);cursor:pointer}
.tab.active{background:var(--brand);color:#0b0e13;border:none;font-weight:800}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course{transition:transform .2s ease, box-shadow .2s ease}
.course:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.course .meta{display:flex;gap:10px;color:#c5ceff;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpis .num{font-size:28px;font-weight:900}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{font-size:34px;font-weight:900}
.faq dt{background:#0f1526;border:1px solid var(--ring);padding:14px;border-radius:12px;margin:10px 0;cursor:pointer}
.faq dd{margin:0 0 12px 0;padding:0 12px 12px 12px;color:var(--muted);display:none}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,#202a40,transparent);margin:28px 0}
.footer{padding:28px 0;border-top:1px solid var(--ring);color:var(--muted);margin-top:28px}
.float-wa{position:fixed;right:18px;bottom:18px;background:#25d366;color:#041423;border-radius:999px;padding:12px 16px;border:none;font-weight:900;box-shadow:var(--shadow)}

.reveal{opacity:0;transform:translateY(12px);transition:all .6s ease}
.reveal.show{opacity:1;transform:none}

@media(max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid-3, .course-grid, .kpis, .pricing{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}


/* --- Mobile-first improvements (<= 640px) --- */
@media (max-width: 640px){
  .container{padding:16px}
  .nav{gap:8px}
  .logo{font-size:16px}
  .nav .links{gap:8px;overflow-x:auto;white-space:nowrap;padding-bottom:6px}
  .nav .links a{display:inline-flex}
  .hero h1{font-size:32px}
  .hero p{font-size:15px}
  .btn{width:100%;justify-content:center;padding:14px 16px;border-radius:14px}
  .btn.primary{font-weight:800}
  .badge{font-size:11px}
  .grid-3,.grid-2,.course-grid,.kpis,.pricing{grid-template-columns:1fr;gap:14px}
  .card{padding:16px;border-radius:14px}
  .section{padding:28px 0}
  .title{font-size:26px}
  .float-wa{right:12px;bottom:12px;padding:12px;border-radius:999px}
  input,select,textarea{font-size:16px} /* prevent iOS zoom */
}
/* Make tabs horizontally scrollable on small screens */
.tabs{overflow-x:auto;white-space:nowrap;padding-bottom:6px}
.tab{display:inline-flex}