* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: Georgia, serif; background: #fff8ec; color: #3b2a1a; line-height: 1.6; }
h1, h2, h3 { font-family: "Trebuchet MS", sans-serif; }
section { max-width: 1000px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; }
h2 { font-size: 2.2rem; margin-bottom: 1rem; color: #c0561e; }

.hero { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffcf70 0%, #ff9a5a 60%, #fff8ec 100%); position: relative; overflow: hidden; text-align: center; padding: 2rem; }
.sun { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: #fff3b0;
  box-shadow: 0 0 120px 60px #ffe680; top: 55%; animation: rise 3s ease-out forwards; z-index: 0; }
@keyframes rise { to { top: 8%; } }
.hero h1 { font-size: clamp(3rem, 12vw, 8rem); color: #fff; text-shadow: 0 4px 0 #c0561e; z-index: 1; }
.tag { font-size: 1.3rem; z-index: 1; margin-bottom: 2rem; }
.btn { z-index: 1; display: inline-block; background: #c0561e; color: #fff; border: none; padding: .9rem 1.8rem;
  border-radius: 999px; font-size: 1.1rem; text-decoration: none; cursor: pointer; transition: transform .2s; }
.btn:hover { transform: scale(1.07) rotate(-2deg); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.card { background: #fff; border-radius: 18px; padding: 1.5rem; box-shadow: 0 6px 18px rgba(192,86,30,.12); transition: transform .25s; }
.card:hover { transform: translateY(-6px); }
.card span { font-size: 3rem; display: block; }

.egg-section { background: #fff1c9; border-radius: 30px; }
.eggs { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
.eggs button { width: 110px; height: 140px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; border: 3px solid #f0d9a8;
  background: #fffdf6; font-size: 1rem; cursor: pointer; font-family: inherit; transition: background .2s; }
.eggs button small { display: block; color: #a07850; }
.eggs button:hover, .eggs button.active { background: #ffd34d; }
.timer { font-size: 4rem; font-family: monospace; color: #c0561e; }
.timer.done { animation: shake .4s infinite; }
@keyframes shake { 50% { transform: rotate(3deg); } }

.pick { font-size: 2rem; margin-top: 1.5rem; min-height: 3rem; }
.facts ul { text-align: left; max-width: 700px; margin: 0 auto; list-style: none; padding: 0; }
.facts li { background: #fff; margin: .8rem 0; padding: 1rem 1.2rem; border-left: 6px solid #ffb347; border-radius: 10px; }
footer { text-align: center; padding: 2rem; background: #3b2a1a; color: #ffcf70; }