:root{
      --bg:#ffffff; /* warm off-white */
      --card:#ffffff;
      --accent:#ff8800; /* orange */
      --accent-light:#ffd699;
      --text:#333;
      --muted:#666;
      --radius:16px;
      --shadow:0 6px 16px rgba(0,0,0,0.1);
      font-family:"Comic Sans MS", "Comic Neue", cursive, sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);color:var(--text);line-height:1.5}
    .container{max-width:1000px;margin:0 auto;padding:20px}

    header{display:flex;align-items:center;gap:12px;padding:12px;background:#0096C7;color:white;border-radius:var(--radius);box-shadow:var(--shadow)}
    .logo{font-size:28px;font-weight:bold}
    nav{margin-left:auto;display:flex;gap:14px}
    nav a{color:white;text-decoration:none;font-weight:bold;padding:6px 10px;border-radius:10px;transition:background 0.2s}
    nav a:hover{background:rgba(255,255,255,0.2)}

    .hero{text-align:center;padding:40px 20px}
    .hero h1{font-size:40px;color:var(--accent)}
    .hero p{font-size:18px;color:var(--muted);margin-top:10px}
    .btn{display:inline-block;margin:10px;padding:12px 20px;background:var(--accent);color:white;font-weight:bold;border-radius:var(--radius);text-decoration:none;box-shadow:var(--shadow);transition:transform 0.2s}
    .btn:hover{transform:scale(1.05)}
    .btn.secondary{background:white;color:var(--accent);border:2px solid var(--accent)}

    .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:30px}
    .feature{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .feature h3{color:var(--accent);margin-bottom:8px}
	.btn {
  		background-color: #0096C7; 
  		color: white; 
	}

    section{margin-top:40px}
    h2{text-align:center;color:var(--accent)}

    footer{margin-top:40px;text-align:center;padding:20px;background:#0096C7;border-radius:var(--radius)}
    footer p{color:#fff)}

    /* playful animation */
    .bounce{animation:bounce 2s infinite}
    @keyframes bounce{
      0%,20%,50%,80%,100%{transform:translateY(0)}
      40%{transform:translateY(-12px)}
      60%{transform:translateY(-6px)}
    }