/* Pet & Me - SEO landings shared styles */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1a1a1a;line-height:1.6;background:#fff}
[dir="rtl"]{text-align:right}

/* Header */
.seo-header{background:linear-gradient(135deg,#2e7d32,#4caf50);color:#fff;padding:48px 20px 56px;text-align:center}
.seo-header .logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;margin-bottom:18px;color:#fff;text-decoration:none}
.seo-header .logo img{width:36px;height:36px;border-radius:8px;background:#fff;padding:4px}
.seo-header h1{font-size:34px;line-height:1.2;max-width:880px;margin:0 auto 14px;font-weight:800}
.seo-header p.tagline{max-width:760px;margin:0 auto 24px;font-size:17px;opacity:.95}
.seo-header .cta{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}
.seo-header .cta a{background:#fff;color:#2e7d32;padding:12px 22px;border-radius:30px;text-decoration:none;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .15s}
.seo-header .cta a:hover{transform:translateY(-2px)}
.seo-header .cta a.alt{background:transparent;color:#fff;border:2px solid #fff}

/* Lang switcher */
.lang-switch{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px}
.lang-switch a{color:#fff;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:14px;font-size:13px;text-decoration:none;font-weight:600}
.lang-switch a.active{background:#fff;color:#2e7d32}

/* Sections */
.seo-section{max-width:920px;margin:0 auto;padding:40px 22px}
.seo-section h2{font-size:26px;color:#2e7d32;margin:28px 0 12px;font-weight:700}
.seo-section h3{font-size:19px;margin:20px 0 8px;color:#222}
.seo-section p{margin:0 0 14px;font-size:16px;color:#333}
.seo-section ul{padding-inline-start:22px;margin:0 0 16px}
.seo-section li{margin-bottom:6px}

/* Cards */
.seo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.seo-card{background:#f7faf7;border-left:4px solid #4caf50;padding:18px;border-radius:8px}
[dir="rtl"] .seo-card{border-left:none;border-right:4px solid #4caf50}
.seo-card strong{color:#2e7d32;display:block;margin-bottom:6px;font-size:16px}

/* FAQ */
.faq{margin:18px 0}
.faq details{background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:14px 18px;margin-bottom:10px}
.faq details[open]{background:#f1f8f1;border-color:#a5d6a7}
.faq summary{cursor:pointer;font-weight:600;color:#2e7d32;font-size:16px}
.faq p{margin-top:10px;color:#444}

/* CTA box */
.cta-box{background:linear-gradient(135deg,#1b5e20,#43a047);color:#fff;border-radius:14px;padding:28px;text-align:center;margin:30px 0}
.cta-box h3{color:#fff;margin-bottom:10px;font-size:22px}
.cta-box a{display:inline-block;background:#fff;color:#1b5e20;padding:11px 22px;border-radius:24px;text-decoration:none;font-weight:700;margin-top:10px}

/* Footer */
footer{background:#212121;color:#bbb;text-align:center;padding:30px 18px;font-size:14px;margin-top:30px}
footer a{color:#81c784;text-decoration:none;margin:0 8px}

/* Hide other languages by default (JS reveals current) */
.lang-block{display:none}
.lang-block.active{display:block}

@media(max-width:600px){
  .seo-header h1{font-size:26px}
  .seo-header{padding:32px 16px 40px}
  .seo-section{padding:28px 16px}
}