:root{--bg:#ffffff;--txt:#0f172a;--muted:#475569;--accent:#ef4444;--accent2:#f59e0b}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--txt);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:28px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.badge{font-size:12px;color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));padding:6px 10px;border-radius:999px}
.lang{display:flex;align-items:center;gap:8px}
select{padding:8px;border-radius:10px;border:1px solid #e5e7eb}

/* Full-background hero */
.hero{position:relative;isolation:isolate;min-height:clamp(520px,66vh,760px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,247,237,0.82) 0%, rgba(255,247,237,0.48) 32%, rgba(0,0,0,0.12) 100%),
    url('../assets/hero-bg.jpg');
  background-size:cover;background-position:50% 50%;z-index:-1}
.hero .inner{width:100%;max-width:1200px;margin:0 auto;padding:40px 28px;display:grid;grid-template-columns:1fr;gap:20px}
.hero h1{font-size:clamp(30px,3.7vw,56px);margin:0 0 10px}
.hero p{color:var(--muted);font-size:clamp(15px,2vw,18px);margin:0 0 18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:700;background:var(--accent);color:#fff;transition:transform .06s,opacity .2s}
.btn.secondary{background:var(--accent2)}
.btn:hover{transform:translateY(-1px);opacity:.96}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid #ffe4e6;border-radius:16px;padding:22px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px}

.seo{background:#fff;border:1px solid #ffe4e6;border-radius:16px;padding:22px;margin-top:28px}
.seo h2{margin:0 0 8px}
.seo p{color:var(--muted);line-height:1.6;margin:0 0 6px}
.seo ul{margin:0 0 8px 18px;padding:0}
.seo li{margin:4px 0;color:var(--muted);font-size:14px}

.footer{margin-top:36px;color:#6b7280;font-size:13px}
img,svg{max-width:100%;height:auto;display:block}

@media (min-width: 992px){
  .hero .inner{grid-template-columns:1.1fr 0.9fr}
}
@media (max-width: 820px){
  .features{grid-template-columns:1fr}
}


/* === Mobile hero fix (added by ChatGPT on 2025-10-03) === */
.hero, .hero-bg, .hero-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
  .hero {
    min-height: 68vh !important;
    height: 68vh !important;
    background-position: center top !important; /* show pets better on phones */
  }
  .hero .container, .hero .content, .hero-content {
    padding-top: 10vh !important;
    padding-bottom: 6vh !important;
  }
  .hero h1 {
    font-size: clamp(26px, 6.2vw, 34px) !important;
    line-height: 1.15 !important;
  }
  .hero p.lead, .hero .subhead, .hero p {
    font-size: clamp(14px, 3.8vw, 17px) !important;
  }
  .hero .cta-row, .hero .buttons {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .hero .btn, .hero .button {
    padding: 12px 18px !important;
    font-size: 16px !important;
  }
}
/* === End mobile hero fix === */



/* Image hero fallback */
.hero img.hero-img, img.hero, .hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@media (min-width: 769px) {
  .hero img.hero-img, img.hero, .hero > img {
    object-position: center center;
  }
}



/* === Mobile-specific hero image swap (added by ChatGPT) === */
@media (max-width: 768px) {
  .hero::before{
    background-image:
      linear-gradient(180deg, rgba(255,247,237,0.88) 0%, rgba(255,247,237,0.48) 35%, rgba(0,0,0,0.10) 100%),
      url('../assets/hero-bg-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  .hero{min-height: 70vh !important;}
}
/* === End mobile-specific hero image swap === */