/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Fredoka:wght@400;500;700&display=swap');

:root{
  --bg:#FAF7F0; /* eggshell */
  --fg:#111111;
  --muted:#666666;
  --brand:#ff6600;
  --card:#fafafa;
  --border:#eaeaea;
  --accent:#ffad66;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1080px;margin:0 auto;padding:24px}

header{
  padding:32px 0 16px;
  text-align:center;
}
header img.logo{
  display:block;
  margin:0 auto 12px;
  width:min(420px, 50%);
  height:auto;
}
header p.payoff{
  margin:0;
  font-size:1.2rem;
  font-family: 'Chewy', cursive;
  color:var(--muted);
}

.section{
  padding:48px 0;
  border-top:1px solid var(--border);
}
.section h2{
  margin:0 0 16px;
  font-size:1.8rem;
  font-family: 'Chewy', cursive;
  color:var(--brand);
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
}

.qr-wrap{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.qr-wrap img{
  width:min(300px, 60vw);
  height:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
.qr-actions a.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--bg);
  background:var(--brand);
  font-weight:600;
  font-family: 'Fredoka', sans-serif;
}
.qr-actions a.link{
  display:block;
  margin-top:8px;
  text-decoration:underline;
  color:var(--brand);
  word-break:break-all;
}

.slogan{
  text-align:center;
  font-size:1.8rem;
  font-family: 'Chewy', cursive;
  padding:24px;
  background:linear-gradient(180deg, #fff, #fff7f0);
  border-radius:18px;
  border:1px solid var(--border);
}
.slogan-media{
  margin-top:16px;
}
.slogan-media img{
  display:block;
  margin:0 auto;
  width:min(46%, 980px);
  max-width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid var(--border);
}
@media (max-width: 720px){
  .slogan-media img{ width:100%; border-radius:12px; }
}

.contacts div{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contacts a{
  color:var(--brand);
  text-decoration:none;
  font-family: 'Fredoka', sans-serif;
}
.contacts a:hover{text-decoration:underline}

footer{
  padding:24px 0 48px;
  text-align:center;
  color:var(--muted);
  font-family: 'Fredoka', sans-serif;
}
footer a{ color:var(--brand); }

.about-link {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--brand);
  color: white;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  text-decoration: none;
  font-family: 'Fredoka', sans-serif;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.about-link:hover {
  background: var(--accent, #ffad66);
}