*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F1FAEE;font-family:'Work Sans',sans-serif;font-weight:400;font-size:16px;line-height:1.75;color:#2B2D42;overflow-x:hidden}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:40px}
.hero-left{flex:0 0 50%;display:flex;align-items:center;justify-content:center}
.atom-svg{width:300px;height:300px}
.nucleus{stroke-dasharray:380;stroke-dashoffset:380}
.hero.visible .nucleus{animation:drawNucleus 1.5s ease-out forwards}
@keyframes drawNucleus{to{stroke-dashoffset:0}}
.electron{opacity:0;transform-origin:center}
.hero.visible .electron{animation:bounceIn 0.3s ease forwards}
.hero.visible .electron:nth-child(2){animation-delay:1.5s}
.hero.visible .electron:nth-child(3){animation-delay:1.6s}
.hero.visible .electron:nth-child(4){animation-delay:1.7s}
.hero.visible .electron:nth-child(5){animation-delay:1.8s}
.hero.visible .electron:nth-child(6){animation-delay:1.9s}
.hero.visible .electron:nth-child(7){animation-delay:2.0s}
@keyframes bounceIn{0%{opacity:0;transform:scale(0)}80%{transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.hero-divider{width:4px;height:200px;background:#E63946;flex-shrink:0;margin:0 40px}
.hero-right{flex:1}
h1{font-family:'Josefin Sans',sans-serif;font-weight:700;font-size:64px;color:#1D3557;margin-bottom:0;line-height:1}
.hero-ext{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:32px;color:#457B9D;display:block;margin-bottom:16px}
.hero-sub{color:#2B2D42;max-width:400px}
.section-label{font-family:'Work Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#E63946;display:block;margin-bottom:8px}
.section-label.light{color:#F4A261}
.split-section{display:flex;align-items:flex-start;padding:80px 40px;max-width:1000px;margin:0 auto;gap:60px;opacity:0;transform:translateY(20px);transition:all 0.5s ease}
.split-section.visible{opacity:1;transform:translateY(0)}
.split-left{flex:0 0 280px}
.split-right{flex:1}
.split-right p{margin-bottom:14px}
h2{font-family:'Josefin Sans',sans-serif;font-weight:700;font-size:36px;color:#1D3557;margin-bottom:12px;line-height:1.2}
h2.light{color:#F1FAEE}
.stacked-section{padding:80px 40px}
.section-dark{background:#1D3557}
.section-dark p{color:#F1FAEE;opacity:0.85}
.stacked-inner{max-width:900px;margin:0 auto;opacity:0;transform:translateY(20px);transition:all 0.5s ease}
.stacked-inner.visible{opacity:1;transform:translateY(0)}
.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.lesson-card{background:rgba(255,255,255,0.08);padding:24px;border:1px solid rgba(255,255,255,0.1);position:relative;overflow:hidden}
.card-accent{position:absolute;top:0;left:0;width:100%;height:4px}
h3{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:18px;color:#F1FAEE;margin-bottom:8px}
.lesson-card p{font-size:14px;color:#FFFFFF;opacity:0.75}
@media(max-width:768px){.hero{flex-direction:column;text-align:center;gap:20px}.hero-divider{width:200px;height:4px;margin:0}.hero-left{flex:0 0 auto}h1{font-size:40px}h2{font-size:28px}.split-section{flex-direction:column;gap:20px}.split-left{flex:0 0 auto}.lesson-grid{grid-template-columns:1fr}.atom-svg{width:200px;height:200px}}