/* ── Shared base: variables, reset, common components ── */
:root {
  --green: #6B8F65;
  --green-light: #B2C9AE;
  --green-pale: #E0EAE0;
  --green-dark: #4A6844;
  --pink: #D4899E;
  --pink-light: #F2CDD7;
  --pink-pale: #FBF0F3;
  --pink-dark: #B5607A;
  --pig-pink: #FF96B8;
  --red-light: #E0A99C;
  --red-pale: #F5D6CE;
  --bg: #FAF6ED;
  --white: #FFFFFF;
  --text: #2C3E2D;
  --text-mid: #5E7A5E;
  --text-soft: #94AD8E;
  --border: #D6DFD0;
  --shadow-sm: 0 2px 12px rgba(44,62,45,0.05);
  --shadow-md: 0 8px 30px rgba(44,62,45,0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Shared components ── */
.logo {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--green-dark);
  display: inline-block;
}
.logo::after {
  content: '.';
  color: var(--pig-pink);
}

.btn-primary-lg {
  display: inline-block;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 2rem;
  border-radius: 14px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
  font-family: inherit;
  border: none;
}
.btn-primary-lg:hover {
  background: #3D5938; transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(94,138,80,0.35);
}

.btn-ghost-lg {
  display: inline-block;
  color: var(--text-mid);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: none;
  background: none;
  transition: color 0.25s, transform 0.25s;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}
.btn-ghost-lg:hover {
  color: var(--green-dark);
  text-decoration-color: var(--green);
  transform: translateY(-1px);
}

.btn-sm {
  display: inline-block;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-sm:hover {
  background: #3D5938; transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(94,138,80,0.25);
}

.btn-outline-sm {
  display: inline-block;
  color: var(--text-mid);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, background 0.25s;
}
.btn-outline-sm:hover {
  border-color: var(--green); color: var(--green-dark);
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--green-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover {
  background: #3D5938; transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(94,138,80,0.3);
}

.btn-secondary {
  background: var(--white);
  color: var(--text-mid);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  cursor: pointer;
  font-family: inherit;
}
.btn-secondary:hover {
  border-color: var(--green); transform: translateY(-2px);
  background: var(--green-pale);
}

/* ── Pig mascot component ── */
.pig-stage{--pig-scale:1;position:relative;width:calc(440px*var(--pig-scale));height:calc(460px*var(--pig-scale));font-family:system-ui,sans-serif}
.pig-stage *{box-sizing:border-box}
.pig-stage .pig-inner{position:absolute;inset:0;transform:scale(var(--pig-scale));transform-origin:top left;width:440px;height:460px}
.pig-shadow{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:300px;height:46px;background:rgba(214,120,160,.22);border-radius:50%;filter:blur(7px)}
.pig{position:absolute;bottom:0;left:0;width:440px;height:460px;animation:pigFloat 4.2s ease-in-out infinite}
.pig div{position:absolute}
.pig-foot{bottom:34px;width:60px;height:52px;background:#f7a8c4;border-radius:26px 26px 18px 18px;box-shadow:inset 0 -6px 0 rgba(208,99,140,.25)}
.pig-foot.l{left:120px}.pig-foot.r{right:120px}
.pig-tail{bottom:180px;right:34px;width:44px;height:44px;border:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M 9,31 C 9,11 27,5 39,15 C 51,25 49,41 39,47 C 29,53 17,49 15,41 C 13,33 21,31 27,33' fill='none' stroke='%23f7add0' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='33' r='3.5' fill='%23f0a0be'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:16% 55%;animation:tailWag 2.6s ease-in-out infinite}
.pig-tail::before{display:none}
.pig-tail::after{display:none}
.pig-body{bottom:48px;left:50%;transform:translateX(-50%);width:300px;height:250px;background:linear-gradient(165deg,#ffd4e4,#ffc2d9 60%,#ffb4ce);border-radius:50% 50% 46% 46%;box-shadow:inset -22px -26px 40px rgba(231,131,170,.3),inset 14px 14px 30px rgba(255,255,255,.55)}
.pig-tummy{bottom:70px;left:50%;transform:translateX(-50%);width:150px;height:120px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);border-radius:50%}
.pig-arm{bottom:150px;width:60px;height:48px}
.pig-arm.l{left:54px;background:linear-gradient(160deg,#ffd0e1,#ffbcd4);border-radius:30px 18px 24px 28px;box-shadow:inset -6px -8px 12px rgba(231,131,170,.25)}
.pig-arm.r{right:54px;background:linear-gradient(200deg,#ffd0e1,#ffbcd4);border-radius:18px 30px 28px 24px;box-shadow:inset 6px -8px 12px rgba(231,131,170,.25)}
.pig-ear{top:54px;width:64px;height:74px;border-radius:54% 54% 46% 46%/70% 70% 34% 34%;transform-origin:bottom center}
.pig-ear.l{left:106px;background:linear-gradient(160deg,#ffc6dc,#ff9fc1);animation:earWiggleL 3.6s ease-in-out infinite;box-shadow:inset -4px -6px 10px rgba(208,99,140,.25)}
.pig-ear.r{right:106px;background:linear-gradient(200deg,#ffc6dc,#ff9fc1);animation:earWiggleR 3.6s ease-in-out infinite;box-shadow:inset 4px -6px 10px rgba(208,99,140,.25)}
.pig-ear-inner{top:18px;left:50%;transform:translateX(-50%);width:26px;height:40px;background:#f48bb0;border-radius:54% 54% 46% 46%/64% 64% 36% 36%}
.pig-head{top:74px;left:50%;transform:translateX(-50%);width:276px;height:248px;background:linear-gradient(160deg,#ffd9e7,#ffc6db 58%,#ffb8d0);border-radius:50% 50% 48% 48%;box-shadow:inset -20px -22px 38px rgba(231,131,170,.28),inset 16px 16px 30px rgba(255,255,255,.6);z-index:2}
.pig-cheek{top:128px;width:56px;height:40px;background:radial-gradient(circle,#ff9bbe,rgba(255,155,190,0) 70%);border-radius:50%}
.pig-cheek.l{left:24px}.pig-cheek.r{right:24px}
.pig-eye{top:100px;width:38px;height:38px;background:#3a2230;border-radius:50%;animation:pigBlink 5s ease-in-out infinite;transform-origin:center}
.pig-eye.l{left:40px}.pig-eye.r{right:40px}
.pig-eye .shine1{top:6px;left:6px;width:13px;height:13px;background:#fff;border-radius:50%;transition:transform .15s ease-out}
.pig-eye .shine2{bottom:7px;right:8px;width:7px;height:7px;background:rgba(255,255,255,.7);border-radius:50%;transition:transform .15s ease-out}
.pig-snout{top:96px;left:50%;transform:translateX(-50%);width:118px;height:84px;background:linear-gradient(160deg,#ffb3cd,#ff96b8);border-radius:50%;box-shadow:inset 0 -8px 14px rgba(208,99,140,.3),inset 0 8px 12px rgba(255,255,255,.5),0 4px 8px rgba(208,99,140,.2)}
.pig-nostril{top:50%;transform:translateY(-50%);width:20px;height:30px;background:#d9608c;border-radius:50%}
.pig-nostril.l{left:30px}.pig-nostril.r{right:30px}
@keyframes pigFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes pigBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes earWiggleL{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-26deg)}}
@keyframes earWiggleR{0%,100%{transform:rotate(18deg)}50%{transform:rotate(26deg)}}
@keyframes tailWag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}

/* Head-only: shift the pig-inner so the head is centered, hide body parts */
.pig-head-stage{width:calc(280px * var(--pig-scale));height:calc(290px * var(--pig-scale))}
.pig-head-stage .pig-inner{transform:scale(var(--pig-scale)) translate(-80px,-40px)}
.pig-head-stage .pig-body,
.pig-head-stage .pig-tummy,
.pig-head-stage .pig-arm,
.pig-head-stage .pig-foot,
.pig-head-stage .pig-tail,
.pig-head-stage .pig-shadow{display:none}