/* ============================================================
   Na ratunek Szmaragdowemu Oczku — style
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Atma:wght@400;500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --pond:       #0f5c52;
  --pond-2:     #14786c;
  --moss:       #3f7d54;
  --sun:        #d9a339;
  --sky:        #f0f8f5;
  --card:       #ffffff;
  --ink:        #163a34;
  --text:       #2c433d;
  --text-soft:  #58695f;
  --line:       #dcece5;

  --yellow-bg:  #fdf7e2;
  --yellow-line:#e9d38c;
  --blue-bg:    #e9f3fb;
  --blue-line:  #b3d2ea;
  --green-bg:   #e8f6ec;
  --green-line: #a9dab9;

  --font-display: 'Atma', cursive;
  --font-body: 'Mulish', -apple-system, sans-serif;

  --radius: 10px;
  --shadow: 0 12px 28px -16px rgba(15,92,82,.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--sky);
  line-height:1.68;
}
img{max-width:100%;display:block;}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px;}
a{color:var(--pond-2);}

/* ---------- top bar ---------- */
.topbar{background:var(--pond);color:#dff2ec;font-size:14px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 28px;}
.topbar a{color:#dff2ec;text-decoration:none;opacity:.9;}
.topbar a:hover{opacity:1;}
.topbar .home-link{display:flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:uppercase;font-size:12px;}
.logo-mark{flex:0 0 auto;color:inherit;}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg, #ffffff 0%, var(--sky) 100%);
  padding:50px 0 14px;
  text-align:center;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem, 4.6vw, 3rem);
  color:var(--pond);
  margin:0 0 10px;
}
.hero .subtitle{
  font-size:15px;
  color:var(--text-soft);
  font-weight:600;
  margin:0 0 8px;
}
.hero .rule{width:70px;height:3px;background:var(--sun);margin:18px auto 0;border-radius:2px;}

/* ---------- comic / story ---------- */
.story{padding:36px 0 50px;}
.story-panel{
  display:flex;
  gap:36px;
  align-items:center;
  margin-bottom:34px;
}
.story-panel.rev{flex-direction:row-reverse;}
.story-panel img{width:190px;flex:0 0 auto;}
.story-panel .story-text{flex:1;}
.story-panel .char-name{
  font-family:var(--font-display);
  color:var(--pond-2);
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 6px;
}
.story-panel p{margin:0;text-align:center;color:var(--text-soft);}
.story-panel.text-only p{text-align:center;}
.story-cta{
  text-align:center;
  font-weight:700;
  color:var(--ink);
  font-size:1.05rem;
  max-width:640px;
  margin:20px auto 0;
}
@media (max-width:680px){
  .story-panel, .story-panel.rev{flex-direction:column;text-align:center;}
  .story-panel img{width:150px;}
}

/* ---------- section heading ---------- */
.section-heading{text-align:center;margin:0 0 30px;}
.section-heading h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.9rem;
  margin:0 0 8px;
  color:var(--pond);
}
.section-heading .rule{width:50px;height:3px;background:var(--sun);margin:0 auto;border-radius:2px;}

section{padding:52px 0;}

/* ---------- postępy panel ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.panel h3{
  font-family:var(--font-display);
  font-weight:700;
  margin:0 0 4px;
  font-size:1.3rem;
  color:var(--pond);
}
.panel .panel-rule{width:40px;height:3px;background:var(--sun);margin:12px auto 18px;border-radius:2px;}
.panel p{color:var(--text-soft);}
.progress-row{display:flex;gap:10px;margin-top:6px;}
.progress-row input[type=password]{
  flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;font-family:var(--font-body);font-size:14px;
}
.progress-row input[type=password]:focus{outline:2px solid var(--sun);outline-offset:1px;}
.btn{
  background:var(--pond);color:#fff;border:none;padding:11px 22px;border-radius:24px;
  font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;
  transition:background .15s ease;white-space:nowrap;text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--pond-2);}
.form-msg{margin-top:12px;font-size:13.5px;}
.form-msg.error{color:#a12939;}
.form-msg.ok{color:#2b6b3f;}

/* ---------- harmonogram ---------- */
.harmonogram{text-align:center;}
.harmonogram img{margin:0 auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);}

/* ---------- colored info boxes ---------- */
.box{
  border-radius:var(--radius);
  padding:34px 32px;
  box-shadow:var(--shadow);
}
.box.yellow{background:var(--yellow-bg);border:1px solid var(--yellow-line);}
.box.blue{background:var(--blue-bg);border:1px solid var(--blue-line);}
.box.green{background:var(--green-bg);border:1px solid var(--green-line);}
.box h2, .box h3{color:var(--ink);}

/* ---------- task blocks ---------- */
.task{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  margin-bottom:30px;
}
.task h3.task-title{
  font-family:var(--font-display);
  text-align:center;
  color:var(--pond);
  font-size:1.5rem;
  margin:0 0 20px;
}
.task-flex{display:flex;gap:30px;align-items:flex-start;}
.task-flex .speech-bubble{flex:0 0 180px;text-align:center;}
.task-flex .speech-bubble .bubble{
  background:#fff;border:2px solid var(--pond);border-radius:16px;
  padding:8px 12px;font-size:13px;font-weight:700;color:var(--pond);
  margin-bottom:8px;display:inline-block;
}
.task-flex .task-body{flex:1;}
.task-flex .task-body p{text-align:justify;color:var(--text-soft);margin:0;}
@media (max-width:680px){.task-flex{flex-direction:column;align-items:center;text-align:center;}}

.task-cols{display:flex;gap:30px;}
.task-cols > div{flex:1;}
.task-cols h3.task-title{margin-bottom:14px;}
@media (max-width:680px){.task-cols{flex-direction:column;}}

.reward-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px dashed var(--line);
}
@media (max-width:680px){.reward-grid{grid-template-columns:1fr;}}
.reward-item{text-align:center;}
.reward-item .icons{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:8px;}
.reward-item .icons img{height:64px;width:auto;max-width:none;}
.reward-item .label{font-size:13.5px;color:var(--text-soft);}
.reward-item .label strong{color:var(--ink);}
.reward-desc{text-align:center;}
.reward-desc .label-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.reward-desc p{font-size:13.5px;color:var(--text-soft);margin:0;}

.note{
  text-align:center;color:var(--text-soft);font-size:14px;
  max-width:680px;margin:26px auto 0;padding-top:20px;border-top:1px dashed var(--line);
}

/* ---------- tiers (klasy naszyjnika) ---------- */
.tier{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:26px 28px;
  margin-bottom:20px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:26px;
  align-items:center;
}
@media (max-width:680px){.tier{grid-template-columns:1fr;text-align:center;}}
.tier h4{
  font-family:var(--font-display);
  color:var(--pond);
  font-size:1.3rem;
  text-align:center;
  margin:0 0 26px;
  grid-column:1/-1;
}
.tier-icons{display:flex;flex-direction:column;gap:6px;align-items:center;}
.tier-icons .row{display:flex;align-items:center;gap:8px;justify-content:center;}
.tier-icons .row img.qty{height:26px;width:auto;max-width:none;}
.tier-icons .row img.item{height:34px;width:auto;max-width:none;}
.tier-text p{color:var(--text-soft);text-align:justify;margin:0 0 10px;}
.tier-explain{
  font-size:13.5px;font-style:italic;color:var(--text-soft);
  background:var(--sky);padding:12px 14px;border-radius:8px;
}

/* ---------- footer ---------- */
footer{background:var(--pond);color:#dff2ec;text-align:center;padding:26px 0;font-size:13px;}
footer a{color:var(--sun);}
footer p{max-width:640px;margin:0 auto;}