/* ============================================================
   Trzy Małe Świnki — style
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oregano&family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  --pink:       #fdeef0;
  --pink-2:     #fbe0e4;
  --card:       #ffffff;
  --brown:      #7a4a3a;
  --ink:        #4a2f27;
  --text:       #5a453e;
  --text-soft:  #7d655c;
  --line:       #f3d9dc;

  --hay-bg:     #fffddf;
  --hay-line:   #ede5b0;
  --plank-bg:   #e2fffe;
  --plank-line: #b9e6e4;
  --brick-bg:   #ffe6d5;
  --brick-line: #f0c6a5;

  --font-display: 'Oregano', cursive;
  --font-body: 'Quicksand', -apple-system, sans-serif;

  --radius: 14px;
  --shadow: 0 14px 30px -18px rgba(122,74,58,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:500;
  color:var(--text);
  background:var(--pink);
  line-height:1.7;
}
img{max-width:100%;display:block;}

.hero-banner img {
   margin: 0 auto;
}


.wrap{max-width:1040px;margin:0 auto;padding:0 28px;}
a{color:var(--brown);}

/* ---------- top bar ---------- */
.topbar{background:var(--brown);color:#fbe6e0;font-size:14px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 28px;}
.topbar a{color:#fbe6e0;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{
  padding:50px 0 20px;
  text-align:center;
}
.hero-banner{max-width:560px;margin:0 auto;}

/* ---------- intro ---------- */
.intro{padding:20px 0 46px;}
.intro p{
  text-align:center;
  max-width:680px;
  margin:0 auto 14px;
  color:var(--text-soft);
  font-size:1.05rem;
}

/* ---------- section heading ---------- */
.section-heading{text-align:center;margin:0 auto 34px;max-width:760px;}
.section-heading h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2rem;
  margin:0;
  color:var(--brown);
  line-height:1.4;
}

section{padding:44px 0;}

/* ---------- materials row ---------- */
.materials{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-bottom:10px;}
.material{text-align:center;}
.material img{width:88px;margin:0 auto 10px;}
.material span{
  font-family:var(--font-display);
  color:var(--brown);
  font-size:1.2rem;
}

/* ---------- info card ---------- */
.card{
  border-radius:var(--radius);
  padding:30px 28px 26px;
  box-shadow:var(--shadow);
  text-align:center;
  height:100%;
}
.card.hay{background:var(--hay-bg);border:1px solid var(--hay-line);}
.card.plank{background:var(--plank-bg);border:1px solid var(--plank-line);}
.card.brick{background:var(--brick-bg);border:1px solid var(--brick-line);}
.card h4{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.4rem;
  color:var(--ink);
  margin:0 0 16px;
}
.card img.card-icon{margin:0 auto 16px;}
.card p{color:var(--text);margin:0 0 10px;}
.card p em{color:var(--text-soft);}
.card .gain{
  font-weight:700;color:var(--brown);
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.card .gain img{height:32px;width:auto;max-width:none;}

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:26px;}
.card-grid.single{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto;}
@media (max-width:700px){.card-grid{grid-template-columns:1fr;}}

.stage-transition{
  text-align:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  max-width:720px;
  margin:0 auto 30px;
}

/* ---------- exchange rates ---------- */
.exchange-grid{
  display:flex;
  justify-content:center;
  gap:50px;
  flex-wrap:wrap;
  margin:20px 0 10px;
}
.exchange-grid img{max-height:70px;width:auto;}

/* ---------- postępy panel ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
  max-width:500px;
  margin:0 auto;
  text-align:center;
}
.panel h3{
  font-family:var(--font-display);
  font-weight:400;
  margin:0 0 4px;
  font-size:1.5rem;
  color:var(--brown);
}
.panel p{color:var(--text-soft);}
.progress-row{display:flex;gap:10px;margin-top:10px;}
.progress-row input[type=password]{
  flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:24px;
  background:#fff;font-family:var(--font-body);font-size:14px;padding-left:18px;
}
.progress-row input[type=password]:focus{outline:2px solid var(--brown);outline-offset:1px;}
.btn{
  background:var(--brown);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;
}
.btn:hover{background:#5f3a2d;}
.form-msg{margin-top:12px;font-size:13.5px;}
.form-msg.error{color:#a12939;}
.form-msg.ok{color:#2b6b3f;}

/* ---------- grade badges ---------- */
.grades{display:flex;flex-direction:column;align-items:center;gap:22px;}
.grade-row{display:flex;align-items:center;gap:18px;}
.grade-row img{height:64px;width:auto;}

/* ---------- the end ---------- */
.the-end{text-align:center;padding:30px 0 60px;}
.the-end img{max-width:280px;margin:0 auto;}

/* ---------- footer ---------- */
footer{background:var(--brown);color:#fbe6e0;text-align:center;padding:26px 0;font-size:13px;}
footer a{color:#ffd9c9;}