:root{
  --cream:#FFF7F0;
  --cream-2:#F8F9FA;
  --ink:#2F3136;
  --muted:#6B6E76;
  --lupo-red:#FF4A3D;
  --lupo-red-dark:#E1372B;
  --card:#ffffff;
  --ring:0 0 0 0.2rem rgba(255,74,61,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 1200px at 50% -10%, var(--cream) 0%, var(--cream-2) 70%);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{width:90%;max-width:1100px;margin-inline:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--ring)}

.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{height:72px;width:auto;object-fit:contain;display:block}
.nav a{margin-left:18px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--ink)}
.btn{display:inline-block;border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:700}
.btn.primary{background:var(--lupo-red);color:#fff}
.btn.primary:hover{background:var(--lupo-red-dark)}
.btn.secondary{border:2px solid var(--lupo-red);color:var(--lupo-red);background:transparent}
.btn.secondary:hover{background:#ffe7e4}
.btn.small{padding:8px 12px;font-weight:600}

.hero{padding:56px 0;text-align:center}
.hero-title{
  font-family:'Fredoka',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,5vw,48px);
  margin:0 0 8px;
}
.hero-sub{margin:0 auto 16px;max-width:740px;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:18px 0 6px}

.heart-wrap{margin-top:24px;height:42px;display:flex;justify-content:center}
.heart{
  width:28px;height:28px;display:inline-block;
  background: radial-gradient(circle at 35% 35%, #fff 0 8%, var(--lupo-red) 35%);
  clip-path: path("M14 26 C 14 24, 2 18, 2 9 C 2 4.5, 5.5 2, 9 4 C 11 5, 13 7, 14 8 C 14 8, 16 6, 18 5 C 21.5 3, 25 5.5, 25 9 C 25 18, 14 24, 14 26 Z");
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
  animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{
  0%,95%,100%{transform:scale(1);box-shadow:none;opacity:.9}
  40%{transform:scale(1.08);box-shadow:0 0 18px rgba(255,74,61,.35);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .heart{animation:none}
}

.section{padding:56px 0}
.section.light{background:#ffffffcc}
h2{
  font-family:'Fredoka',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(22px,4.2vw,34px);
  margin:0 0 10px;
}
.muted{color:var(--muted)}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:14px}
.card{background:#fff;border:1px solid #f0f0f0;border-radius:14px;padding:16px}
.card h3{margin:6px 0 6px}
.quote{
  margin:20px auto 0;max-width:760px;padding:16px 18px;background:#fff;
  border-left:4px solid var(--lupo-red);border-radius:10px;color:#444
}

.coming{position:relative;overflow:hidden}
.soon-anim{position:relative;height:60px;margin-top:10px}
.sparkle,.sparkle:after,.sparkle:before{
  position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff8;
  transform:translate(-50%,-50%);
  animation:drift 6s linear infinite;
}
.s2{animation-delay:1.2s}.s3{animation-delay:2.4s}
@keyframes drift{
  0%{transform:translate(-50%,-50%) scale(.6);opacity:.5}
  50%{transform:translate(-30%,-80%) scale(1);opacity:.9}
  100%{transform:translate(20%,-140%) scale(.6);opacity:0}
}
body.calm-on .sparkle{animation:none;opacity:.35}

.lupo-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-top:28px
}
.lupo-gallery figure{
  margin:0;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  opacity:0;animation:fadeInUp 1s ease forwards;
}
.lupo-gallery figure:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.lupo-gallery img{width:100%;height:auto;display:block}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
body.calm-on .lupo-gallery figure{animation:none;opacity:1}

.contact{text-align:center}

.footer{border-top:1px solid #eee;background:#fff}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;flex-wrap:wrap
}
.foot-links a,.social a{color:var(--muted);text-decoration:none;margin-right:12px}
.foot-links a:hover,.social a:hover{color:var(--ink)}

.calm-btn{
  margin-top:10px;border:2px solid #ddd;background:#fff;border-radius:999px;
  padding:8px 12px;font-weight:600;color:#666;cursor:pointer
}

/* Responsive header stacking */
@media (max-width: 820px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .logo{height:60px}
  .nav{display:flex;flex-wrap:wrap;gap:12px}
}