:root {
  --blue:#a7c7e7;
  --cream:#f9f6ee;
  --soft:#bdbdbd;
  --text:#333;
  --brown:#4e342e;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden;line-height:1.6}

/* BACKGROUND BLOBS (sunset & moon glow) */
.bg{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}
.blob{position:absolute;border-radius:50%;opacity:0.25;filter:blur(60px);animation:float 12s infinite ease-in-out}
.blob.a{width:420px;height:420px;background:var(--blue);top:-120px;left:-100px}
.blob.b{width:340px;height:340px;background:var(--brown);bottom:-120px;right:-90px}
.blob.c{width:260px;height:260px;background:var(--soft);top:45%;left:60%}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}

/* FADE-IN */
.fade-in{opacity:0;transform:translateY(20px);transition:all .8s ease}
.fade-in.visible{opacity:1;transform:none}

/* HEADER */
header{text-align:center;padding:120px 20px 80px}
header .logo-wrap img{width:160px;max-width:35%;border-radius:50%;margin:0 auto 20px;display:block;box-shadow:0 0 20px rgba(167,199,231,.4)}
h1{color:var(--brown);font-size:2rem;font-weight:700;margin-bottom:6px}
h2{font-size:1.25rem;font-weight:600;margin-bottom:10px}
.lead{max-width:650px;margin:0 auto 25px;color:#555}
.btn{background:var(--brown);color:#fff;border:none;padding:12px 28px;border-radius:25px;cursor:pointer;font-weight:600;font-size:.95rem;transition:.3s}
.btn:hover{background:var(--blue)}

/* FLOATING LOGO ANIMATION (moonlight effect) */
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 25px rgba(167,199,231,.4); }
  50% { transform: translateY(-8px); box-shadow: 0 0 35px rgba(167,199,231,.6); }
}
header .logo-wrap img {
  width: 160px;
  max-width: 35%;
  border-radius: 50%;
  display: block;
  margin: 0 auto 20px;
  animation: floatLogo 6s ease-in-out infinite;
}

/* SECTIONS */
section{text-align:center;padding:80px 20px}
section h2{color:var(--brown);font-size:1.6rem;margin-bottom:10px}
section p{color:#555;max-width:640px;margin:0 auto 40px}

/* SERVICES */
.services{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.card{background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.08);overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 18px rgba(0,0,0,.15)}
.card img{width:100%;height:180px;object-fit:cover}
.card h3{color:var(--brown);margin:18px 0 8px;font-size:1.1rem}
.card p{font-size:.95rem;color:#555;padding:0 16px 24px}

/* DEMO */
.demo-box{background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.08);max-width:600px;margin:0 auto;padding:24px}
.demo-box img{width:100%;border-radius:8px;margin-bottom:20px}

/* MODAL */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;padding:20px;z-index:100}
.modal-overlay.show{display:flex}
.modal-content{background:#fff;border-radius:12px;max-width:650px;width:100%;padding:32px;position:relative;max-height:90vh;overflow-y:auto;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer}
.walk-card{margin-top:25px}
.walk-card img{width:100%;border-radius:8px;margin-bottom:10px}
.walk-card strong{display:block;color:var(--brown);margin-bottom:6px}
.walk-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}

/* CONTACT */
#contact form{max-width:600px;margin:20px auto;text-align:left;display:flex;flex-direction:column;gap:12px}
#contact input,#contact textarea{width:100%;padding:10px;border:1px solid var(--soft);border-radius:6px;font-family:inherit}
#contact button{align-self:center;margin-top:10px}

/* SOCIAL */
#social{text-align:center;padding:50px 20px 30px;background:#fff;border-top:1px solid #eee}
#social h3{color:var(--brown);font-size:1.2rem;margin-bottom:20px}
.social-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.social-links a{font-size:1.5rem;text-decoration:none;color:var(--brown);transition:.3s}
.social-links a:hover{color:var(--blue);transform:scale(1.2)}

/* FOOTER */
footer{text-align:center;padding:40px 10px;background:#fff;color:#777;font-size:.9rem;border-top:1px solid #eee}
footer a{color:var(--brown);font-weight:600;text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--blue)}

/* ZOOM OVERLAY */
.zoom-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}
.zoom-overlay img {
  max-width: 90%; max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(167,199,231,0.5);
  animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* RESPONSIVE */
@media(max-width:768px){
 header{padding-top:90px}
 header .logo-wrap img{width:110px}
 h1{font-size:1.5rem}
 h2{font-size:1.1rem}
 .card img{height:140px}
}

@media (max-width: 768px) {
  header { padding-top: 80px; }
  header .logo-wrap img { width: 100px; }
  .services { grid-template-columns: 1fr; gap: 20px; }
  .card img { height: auto; }
  .modal-content { width: 90%; max-height: 80vh; padding: 20px; }
  .demo-box { padding: 16px; }
  #contact form { width: 90%; }
}