EduAI — Education AI

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EduAI — Education AI</title>

<style>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7ff;
  color:#172033;
}

header{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:white;
  padding:18px;
  text-align:center;
  box-shadow:0 4px 15px #0002;
}

header h1{
  font-size:30px;
}

header p{
  margin-top:5px;
  opacity:.9;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.hero{
  background:white;
  border-radius:22px;
  padding:25px;
  margin-bottom:20px;
  box-shadow:0 5px 20px #0001;
  text-align:center;
}

.hero h2{
  font-size:28px;
  color:#4f46e5;
}

.hero p{
  margin:10px 0 20px;
  color:#667085;
}

.section-title{
  margin:25px 0 15px;
}

.classes{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.class-btn{
  border:0;
  background:white