:root{
  --bg:#0f1724; --card:#0b1220; --accent:#4f46e5; --muted:#94a3b8; --glass:rgba(255,255,255,0.04);
  --radius:14px; --maxW:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Helvetica,Arial; margin:0; background:linear-gradient(180deg,#041127 0%, #071126 60%); color:#e6eef8; -webkit-font-smoothing:antialiased}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:20px;max-width:var(--maxW);margin:0 auto}
.logo{font-weight:700;letter-spacing:0.4px}
.logo span{color:var(--accent)}
nav a{margin-left:18px;text-decoration:none;color:var(--muted)}
nav a.cta{background:var(--accent);padding:8px 12px;border-radius:10px;color:#fff}
.hamburger{display:none}
.hero{padding:80px 20px;text-align:center;max-width:900px;margin:0 auto}
.hero h1{font-size:2.2rem;margin:0 0 12px}
.hero p{margin:0 0 22px;color:var(--muted)}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;background:var(--accent);color:white}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.cards-section{padding:40px 20px;max-width:var(--maxW);margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.course-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;backdrop-filter:blur(6px);border:1px solid var(--glass);transition:transform 220ms cubic-bezier(.2,.9,.3,1),box-shadow 220ms}
.course-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(10,10,20,0.6)}
.course-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted)}
.instructors{padding:30px 20px}
.instructor-list{display:flex;gap:12px}
.instructor-card{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));min-width:200px}
.avatar{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);margin-bottom:8px}
.signup{padding:40px 20px;max-width:600px;margin:0 auto}
.form label{display:block;margin-bottom:12px}
.form input,.form select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.form-actions{margin-top:14px}
.site-footer{text-align:center;padding:18px;color:var(--muted)}

/* Reveal animation utilities */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 600ms ease, transform 600ms ease; will-change: opacity, transform;}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:120ms}
.reveal.delay-2{transition-delay:240ms}

/* Responsive */
@media (max-width:700px){
  .instructor-list{flex-direction:column}
  .hamburger{display:block}
  nav{display:none}
  
  .pix {width:120%;height:500px; }
  .herotext {width:100%;z-index:1;margin-top:-60%;}
  .flash-text {font-size:32px;font-family:arial black;}
  .dots-container {margin-top: -10%;}
  .header-img { position: absolute;top: 5%;left: 50%;transform: translate(-50%, -50%);}
  .header-text-main {display:none;}
  .header-text-sub {display:none;}
  .ivd-img {width: 120%;height:auto;margin-top: 0%;opacity: 1;}
}