:root{
  --ink:#173a5e; --sky1:#7ec8f7; --sky2:#bfe8ff;
  --sun:#ffcb05; --sun2:#f5a623; --grass:#58c24a; --grass2:#3d9b35; --berry:#ee3e38;
  --card:#ffffff; --line:#cfe6f7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.55;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(ellipse 340px 90px at 12% 120px, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 420px 110px at 85% 60px, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 300px 80px at 60% 210px, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 340px, #e8f8ff 100%);
  background-attachment: fixed;
}
h1,h2,h3,.btn,.nav a{font-family:'Baloo 2','Nunito',system-ui,sans-serif}
.wrap{max-width:1020px;margin:0 auto;padding:18px 16px 56px}

.topbar{
  background:linear-gradient(180deg,#2b5a8a,#173a5e);
  border:3px solid #0e2a47; border-radius:18px;
  box-shadow:0 6px 0 rgba(14,42,71,.35), inset 0 2px 0 rgba(255,255,255,.25);
  padding:10px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.topbar .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.ball{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--berry) 0 46%,#173a5e 46% 54%,#fff 54% 100%);
  border:3px solid #0e2a47; position:relative}
.ball::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:#fff;border:3px solid #0e2a47;transform:translate(-50%,-50%)}
.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:7px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08)}
.nav a:hover{background:rgba(255,255,255,.22)}
.nav a.hot{background:linear-gradient(180deg,var(--sun),var(--sun2));color:#4a2f00;border-color:#a86e00}

.hero{
  margin-top:18px;border-radius:26px;padding:30px 30px 26px;text-align:center;color:#fff;
  background:
    radial-gradient(ellipse 500px 160px at 85% -40px, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    linear-gradient(160deg,#3fa7e0 0%, #2b7fc4 45%, #37b6e8 100%);
  border:4px solid #fff; box-shadow:0 10px 0 rgba(23,58,94,.25), 0 22px 44px rgba(23,58,94,.28);
}
.hero img{max-width:480px;width:100%;height:auto;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hero h1{
  margin:18px 0 4px;font-size:2.15rem;line-height:1.12;font-weight:800;
  text-shadow:0 3px 0 rgba(14,42,71,.45)}
.hero p{margin:6px auto 4px;max-width:620px;font-size:1.05rem;font-weight:600;color:#eaf7ff}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-block;text-decoration:none;font-weight:800;font-size:1.12rem;letter-spacing:.02em;
  padding:13px 30px;border-radius:999px;color:#4a2f00;
  background:linear-gradient(180deg,#ffe066,var(--sun) 55%,var(--sun2));
  border:3px solid #a86e00; box-shadow:0 6px 0 #a86e00, 0 12px 22px rgba(0,0,0,.25);
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a86e00}
.btn.blue{color:#fff;background:linear-gradient(180deg,#4db2f0,#2273b8);border-color:#124a7d;box-shadow:0 6px 0 #124a7d,0 12px 22px rgba(0,0,0,.25)}
.btn.blue:active{box-shadow:0 2px 0 #124a7d}
.btn.disabled{background:#d7e6f2;color:#7d99b5;border-color:#b9d2e6;box-shadow:0 6px 0 #b9d2e6;pointer-events:none}
.hero .fineprint{margin-top:12px;font-size:.85rem;color:#cfeaff;font-weight:600}

h2.stroke{
  display:inline-block;margin:38px 0 16px;padding:8px 26px 10px;color:#fff;font-size:1.45rem;font-weight:800;
  background:linear-gradient(180deg,var(--grass),var(--grass2));
  border:3px solid #fff;border-radius:14px;transform:rotate(-1.2deg);
  box-shadow:0 5px 0 rgba(23,58,94,.3); text-shadow:0 2px 0 rgba(0,0,0,.25); letter-spacing:.02em}
h2.stroke.blue{background:linear-gradient(180deg,#4db2f0,#2273b8)}
h2.stroke.red{background:linear-gradient(180deg,#ff7a5c,#e0483e)}
h2.stroke.gold{background:linear-gradient(180deg,#ffd94d,#f0a51f);color:#5b3a00;text-shadow:0 1px 0 rgba(255,255,255,.5)}

.card{
  background:var(--card);border:3px solid var(--line);border-radius:20px;
  padding:20px 22px;margin:12px 0;box-shadow:0 6px 0 rgba(43,90,138,.12)}
.card h3{margin:0 0 6px;font-size:1.12rem;color:var(--ink)}
.card p{margin:6px 0}
.meta{color:#5d7d99;font-size:.9rem;font-weight:600}
ul{margin:8px 0 4px;padding-left:20px}li{margin:4px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:12px 0}
.feature{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 6px 0 rgba(43,90,138,.12)}
.feature .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:10px;border:3px solid rgba(23,58,94,.25)}
.feature h3{margin:0 0 4px;font-size:1.05rem}
.feature p{margin:0;color:#40607e;font-size:.95rem}

.progress{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.progress span{
  border-radius:999px;padding:6px 15px;font-weight:800;font-size:.92rem;
  background:#e6f3fc;color:#7d99b5;border:2px solid #cfe6f7}
.progress span.done{background:linear-gradient(180deg,#6fd95f,var(--grass2));color:#fff;border-color:#2c7a26}
.progress span.now{background:linear-gradient(180deg,#ffe066,var(--sun2));color:#5b3a00;border-color:#a86e00;
  box-shadow:0 0 0 4px rgba(255,203,5,.35)}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:12px 0}
.shot{background:#fff;border:3px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 6px 0 rgba(43,90,138,.12);margin:0}
.shot img{width:100%;height:auto;border-radius:10px;display:block}
.shot figcaption{padding:8px 4px 2px;font-weight:700;color:#40607e;font-size:.92rem;text-align:center}

footer{
  margin-top:44px;text-align:center;color:#40607e;font-size:.86rem;font-weight:600;
  background:rgba(255,255,255,.65);border:3px solid var(--line);border-radius:16px;padding:14px 18px}
@media (max-width:560px){ .hero{padding:22px 16px} .hero h1{font-size:1.6rem} .btn{font-size:1rem;padding:12px 22px} }