:root{
  --yellow:#ffd51f; --yellow2:#f6b900; --blue:#1789d5; --blue2:#0c5ea8;
  --ink:#1e2630; --paper:#fffdf2; --pink:#ef6f8b; --green:#55a66a;
  --shadow:0 12px 30px rgba(20,40,60,.15); --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:
radial-gradient(circle at 10% 10%,rgba(255,213,31,.18) 0 10%,transparent 11%),
linear-gradient(135deg,#fffdf2,#eef8ff);line-height:1.6}
a{color:inherit}
img{max-width:100%;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,242,.94);backdrop-filter:blur(12px);border-bottom:3px solid var(--yellow)}
.nav{max-width:1180px;margin:auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:1.15rem}
.logo-dot{width:38px;height:38px;background:var(--yellow);border:3px solid #111;border-radius:50%;display:grid;place-items:center}
.menu{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.menu a{padding:8px 11px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem}
.menu a:hover,.menu a.active{background:var(--blue);color:#fff}
.hero{max-width:1180px;margin:35px auto;padding:20px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.hero-card,.card{background:rgba(255,255,255,.86);border:2px solid rgba(23,137,213,.13);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:45px}
.kicker{color:var(--blue2);font-weight:900;text-transform:uppercase;letter-spacing:.12em}
h1{font-size:clamp(2.5rem,6vw,5rem);line-height:.95;margin:12px 0}
h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:0 0 16px}
h3{margin-top:0}
.lead{font-size:1.15rem;color:#4c5663}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:900;background:var(--yellow);border:2px solid #111;margin:6px 5px 0 0}
.btn.blue{background:var(--blue);color:white;border-color:var(--blue2)}
.container{max-width:1180px;margin:0 auto;padding:35px 20px}
.section{margin:55px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{padding:24px}
.stat{font-size:2.5rem;font-weight:900;color:var(--blue)}
.tag{display:inline-block;background:#fff1a8;border:1px solid #e0bd28;padding:5px 10px;border-radius:999px;font-weight:700;margin:3px}
.poster{background:linear-gradient(160deg,var(--yellow),#ffeaa0);border:3px solid #111;border-radius:24px;padding:18px;transform:rotate(1deg)}
.poster img{border:3px solid #111;border-radius:16px;background:#fff}
.timeline{border-left:5px solid var(--yellow);padding-left:22px}
.timeline article{position:relative;margin:0 0 28px}
.timeline article:before{content:"";position:absolute;left:-34px;top:7px;width:14px;height:14px;background:var(--blue);border:3px solid white;border-radius:50%}
.quote{font-size:1.35rem;font-weight:800;padding:25px;border-left:8px solid var(--yellow);background:#fff}
.quiz-option{width:100%;text-align:left;margin:7px 0;padding:12px 15px;border:2px solid #cdd7df;background:white;border-radius:12px;cursor:pointer;font-weight:700}
.quiz-option:hover{border-color:var(--blue)}
.correct{background:#d9f4df!important;border-color:#3c9c58!important}
.wrong{background:#ffe0e5!important;border-color:#db5d72!important}
.progress{height:14px;background:#dfe7ed;border-radius:99px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--blue);width:0}
.gallery{columns:3 260px;column-gap:18px}
.gallery figure{break-inside:avoid;margin:0 0 18px;background:white;padding:10px;border-radius:15px;box-shadow:var(--shadow)}
.gallery figcaption{padding:8px;font-weight:700}
.table{width:100%;border-collapse:collapse;background:white;border-radius:15px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid #e4e8eb;text-align:left}
.table th{background:#fff2a8}
.footer{margin-top:60px;background:#10253a;color:white;padding:35px 20px}
.footer-inner{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.badge{padding:7px 11px;border-radius:9px;background:#1b405d}
.notice{padding:16px;border-radius:14px;background:#e8f5ff;border:2px solid #b5def7}
@media(max-width:800px){.hero-grid,.grid.two,.grid{grid-template-columns:1fr}.menu{display:none}.hero-card{padding:28px}.gallery{columns:2 180px}}