/* ============================================
   HAUSTIERZENTRUM — MEGAPAGE
   Buntstift-Skizzen-Ästhetik meets modernes Portal
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --primary: #FF9800;
  --primary-dark: #e67e00;
  --primary-light: #fff3e0;
  --primary-glow: rgba(255,152,0,.15);
  --bg: #faf8f3;
  --bg-alt: #f0ece1;
  --bg-white: #ffffff;
  --text: #1e1e1e;
  --text-muted: #7a7a7a;
  --text-light: #b0a8a0;
  --border: #e0d8c8;
  --border-light: #f0ece1;
  --card-shadow: 0 4px 24px rgba(0,0,0,.06);
  --card-shadow-hover: 0 12px 48px rgba(0,0,0,.1);
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --sketch: 3px dashed var(--primary-light);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
a,button,.nav-toggle,.search-btn,.btn,.amazon-btn,.faq-question,.read-more{min-height:44px;min-width:44px}

/* --- BODY --- */
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(circle at 18px 18px, #e8e3d6 .8px, transparent .8px),
    radial-gradient(circle at 80px 150px, #f0ece1 2px, transparent 2px);
  background-size: 36px 36px, 160px 160px;
  line-height:1.65;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* --- SKETCH DIVIDER --- */
.sketch-divider{
  width:120px;height:4px;
  background:var(--primary);
  border-radius:2px;
  margin:0 auto 1rem;
}

/* --- HEADER --- */
/* --- HEADER / MEGA MENU --- */
.site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:3px solid var(--primary);
  padding:0 1rem;
  position:sticky;
  top:0;
  z-index:1000;
}
.nav-wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:-1px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  flex-shrink:0;
}
.logo span{font-weight:400;color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);}
.logo:hover{text-decoration:none}

/* --- Main Navigation --- */
.main-nav{display:flex;align-items:center}
.nav-links{display:flex;gap:0;list-style:none;align-items:center;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links > li > a{
  color:var(--text);
  font-weight:600;
  font-size:.85rem;
  padding:.4rem 1rem;
  border-radius:50px;
  transition:.2s;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}
.nav-links > li > a .arrow{
  font-size:.6rem;
  transition:transform .25s;
  display:inline-block;
}
.nav-links > li:hover > a .arrow{
  transform:rotate(180deg);
}
.nav-links > li > a:hover,
.nav-links > li > a.active{
  color:#fff;
  background:var(--primary);
  text-decoration:none;
}
.nav-links > li.simple-link > a{
  color:var(--text-muted);
  font-weight:500;
  font-size:.8rem;
}
.nav-links > li.simple-link > a:hover{
  color:#fff;
}

/* --- Mega Dropdown Panel --- */
.mega-panel{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.15), 0 4px 20px rgba(0,0,0,.06);
  min-width:680px;
  max-width:900px;
  padding:0;
  opacity:0;
  visibility:hidden;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--border-light);
  overflow:hidden;
  pointer-events:none;
}
.nav-links > li:hover .mega-panel{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(8px);
  pointer-events:auto;
}
.mega-grid{
  display:grid;
  gap:0;
  padding:1.5rem;
}
.mega-grid.cols-2{grid-template-columns:1fr 1fr}
.mega-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.mega-grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.mega-col{
  padding:0 .8rem;
  border-right:1px solid var(--border-light);
}
.mega-col:last-child{border-right:none}
.mega-col h4{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--primary);
  font-weight:700;
  margin:0 0 .6rem 0;
  padding-bottom:.4rem;
  border-bottom:2px solid var(--primary-light);
}
.mega-col a{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .5rem;
  border-radius:8px;
  color:var(--text);
  font-size:.82rem;
  font-weight:500;
  transition:all .15s;
  text-decoration:none;
  line-height:1.3;
}
.mega-col a:hover{
  background:var(--primary-light);
  color:var(--primary-dark);
  text-decoration:none;
}
.mega-col a .badge{
  font-size:.6rem;
  background:var(--primary);
  color:#fff;
  padding:.1rem .4rem;
  border-radius:20px;
  font-weight:700;
  margin-left:auto;
  animation:pulse-badge 2s infinite;
}
@keyframes pulse-badge{
  0%,100%{opacity:1}
  50%{opacity:.6}
}
.mega-col a .desc{
  font-size:.68rem;
  color:var(--text-muted);
  font-weight:400;
  display:block;
  margin-left:1.6rem;
  margin-top:-.1rem;
}

/* --- Featured Card in Mega --- */
.mega-featured{
  background:linear-gradient(135deg,var(--primary-light),#fff8e1);
  border-radius:12px;
  padding:.8rem 1rem;
  margin-top:.6rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.mega-featured img{
  width:52px;
  height:52px;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
}
.mega-featured .meta{
  flex:1;
}
.mega-featured .meta strong{
  display:block;
  font-size:.82rem;
  color:var(--text);
}
.mega-featured .meta span{
  font-size:.7rem;
  color:var(--text-muted);
}

/* --- Search Button --- */
.search-btn{
  background:none;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  color:var(--text-muted);
  padding:.4rem .6rem;
  border-radius:50px;
  transition:.2s;
  display:flex;
  align-items:center;
}
.search-btn:hover{
  background:var(--primary-light);
  color:var(--primary);
}

/* --- Mobile Toggle --- */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--text);
  padding:.25rem;
}

/* --- Mobile Responsive --- */
@media(max-width:900px){
  .main-nav{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    flex-direction:column;
    padding:1rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    z-index:999;
  }
  .main-nav.open{transform:translateX(0)}
  .nav-links{flex-direction:column;width:100%;gap:0}
  .nav-links > li{width:100%}
  .nav-links > li > a{
    padding:.8rem 1rem;
    border-radius:12px;
    font-size:.95rem;
    justify-content:space-between;
  }
  .nav-links > li > a .arrow{font-size:.8rem}
  .mega-panel{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    border:none;
    border-radius:0;
    min-width:auto;
    max-width:100%;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.16,1,.3,1),padding .35s;
    pointer-events:auto;
    background:var(--bg-alt);
    margin:0;
    border-radius:12px;
  }
  .nav-links > li.open .mega-panel{
    max-height:800px;
    padding:.8rem;
    margin-bottom:.5rem;
  }
  .mega-grid{
    grid-template-columns:1fr 1fr !important;
    padding:.5rem;
    gap:.5rem;
  }
  .mega-col{
    border-right:none;
    padding:0;
  }
  .mega-col h4{font-size:.75rem;margin-bottom:.4rem}
  .mega-col a{padding:.3rem .5rem;font-size:.85rem}
  .search-btn{display:none}
  .nav-toggle{display:block}
  .nav-links > li.simple-link{
    border-top:1px solid var(--border-light);
    padding-top:.5rem;
    margin-top:.3rem;
  }
}
@media(max-width:500px){
  .mega-grid{grid-template-columns:1fr !important}
  .hero-text h1{font-size:1.6rem}
  .hero-inner{padding:2rem 1rem}
  .section-header h2{font-size:1.4rem}
}
@media(max-width:375px){
  .hero-text h1{font-size:1.3rem}
  .hero-text p{font-size:.9rem}
  .hero-inner{padding:1.5rem .8rem}
  .logo{font-size:1.1rem}
  .stat-num{font-size:1.5rem}
}

/* --- MAIN --- */
main{flex:1;width:100%}

/* --- HERO MEGA --- */
.hero-mega{
  max-width:1200px;
  margin:2rem auto 0;
  padding:0 1rem;
  position:relative;
}
.hero-inner{
  background:linear-gradient(160deg,#fff8f0,#fff3e0 40%,#ffe0b2);
  border-radius:var(--radius-xl);
  padding:4rem 3rem;
  position:relative;
  overflow:hidden;
  border:var(--sketch);
}
/* Decorative sketch blobs */
.hero-inner::before{
  content:'🐾';
  position:absolute;
  top:30px;right:60px;
  font-size:6rem;
  opacity:.08;
  transform:rotate(15deg);
}
.hero-inner::after{
  content:'🐾';
  position:absolute;
  bottom:-20px;left:40px;
  font-size:8rem;
  opacity:.06;
  transform:rotate(-10deg);
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,152,0,.12);
  color:var(--primary-dark);
  font-size:.78rem;
  font-weight:700;
  padding:.35rem 1rem;
  border-radius:50px;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:3rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-text h1{
  font-family:var(--font-display);
  font-size:3.2rem;
  line-height:1.15;
  color:var(--primary-dark);
  margin-bottom:1rem;
  font-weight:400;
}
.hero-text h1 strong{color:var(--text);font-weight:400;}
.hero-text p{
  font-size:1.1rem;
  color:var(--text-muted);
  line-height:1.6;
  margin-bottom:2rem;
  max-width:520px;
}
.hero-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  font-size:.9rem;
  padding:.75rem 1.6rem;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:.25s;
  font-family:var(--font);
  text-decoration:none;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 14px var(--primary-glow);
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);text-decoration:none}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:2px solid var(--border);
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);text-decoration:none;transform:translateY(-2px)}
.btn-outline-light{
  background:rgba(255,255,255,.7);
  color:var(--text);
  backdrop-filter:blur(4px);
}
.btn-outline-light:hover{background:#fff;text-decoration:none}
.hero-visual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}
.hero-visual .card-img{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  aspect-ratio:4/3;
}
.hero-visual .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hero-visual .card-img:hover img{transform:scale(1.06)}
.hero-visual .card-img:first-child{grid-column:1/-1;aspect-ratio:16/9}

/* --- STATS BAR --- */
.stats-bar{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
  transform:translateY(-50%);
  position:relative;
  z-index:2;
}
.stats-inner{
  background:var(--bg-white);
  border-radius:var(--radius-md);
  box-shadow:var(--card-shadow);
  border:2px solid var(--border-light);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:1.8rem 2rem;
  gap:1rem;
}
.stat-item{
  text-align:center;
  border-right:1px solid var(--border-light);
  padding:.5rem;
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:400;
  color:var(--primary-dark);
  line-height:1.2;
}
.stat-label{
  font-size:.82rem;
  color:var(--text-muted);
  font-weight:500;
  letter-spacing:.3px;
}

/* --- SECTION COMMON --- */
.section-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}
.section-pad{padding:4rem 0}
.section-header{
  text-align:center;
  margin-bottom:3rem;
}
.section-header h2{
  font-family:var(--font-display);
  font-size:2.2rem;
  color:var(--text);
  margin-bottom:.5rem;
  font-weight:400;
}
.section-header p{
  color:var(--text-muted);
  font-size:1.05rem;
  max-width:600px;
  margin:0 auto;
}

/* --- CATEGORY CARDS --- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-bottom:4rem;
}
.cat-card{
  background:#fff;
  border:2px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:2.5rem 2rem;
  text-align:center;
  transition:.3s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);border-color:var(--primary-light)}
.cat-icon{
  font-size:3.2rem;
  margin-bottom:1rem;
  display:block;
}
.cat-card h3{font-size:1.4rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.cat-card p{font-size:.88rem;color:var(--text-muted);margin-bottom:1rem;line-height:1.5}
.cat-count{
  font-size:.78rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.cat-card::after{
  content:'';
  position:absolute;
  bottom:0;left:20%;right:20%;
  height:3px;
  background:var(--primary);
  border-radius:3px 3px 0 0;
  transform:scaleX(0);
  transition:.3s;
}
.cat-card:hover::after{transform:scaleX(1)}

/* --- FEATURED ARTICLES --- */
.featured-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1.2rem;
  margin-bottom:4rem;
}
.featured-grid .blog-card:first-child{
  grid-row:1/3;
}
.featured-grid .blog-card:first-child .card-img{height:320px}
.featured-grid .blog-card:first-child h2{font-size:1.4rem}
.featured-grid .blog-card:first-child p{font-size:.95rem}

/* --- BLOG CARD (shared) --- */
.blog-card{
  background:#fff;
  border:2px solid var(--border-light);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:.3s;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--primary-light)}
.card-img{
  width:100%;
  height:200px;
  background:var(--bg-alt);
  overflow:hidden;
  flex-shrink:0;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:1.3rem 1.5rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.card-cats{display:flex;gap:.35rem;flex-wrap:wrap}
.card-cats span{
  background:var(--primary);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  padding:.2rem .7rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.card-date{font-size:.78rem;color:var(--text-light);font-weight:500}
.card-body h2{font-size:1.1rem;line-height:1.35;font-weight:700}
.card-body h2 a{color:var(--text)}
.card-body h2 a:hover{color:var(--primary);text-decoration:none}
.card-body p{color:var(--text-muted);font-size:.86rem;flex:1;line-height:1.55}
.card-body .read-more{
  align-self:flex-start;
  font-weight:700;
  color:var(--primary);
  font-size:.82rem;
  padding:.25rem 0;
  border-bottom:2px solid transparent;
  transition:.2s;
  letter-spacing:.2px;
}
.card-body .read-more:hover{border-bottom-color:var(--primary);text-decoration:none}

/* --- ALL ARTICLES GRID --- */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
  margin-bottom:3rem;
}

/* --- NEWSLETTER / CTA --- */
.newsletter-cta{
  background:linear-gradient(160deg,#2d2d2d,#1a1a1a);
  border-radius:var(--radius-xl);
  padding:4rem 3rem;
  text-align:center;
  margin-bottom:3rem;
  position:relative;
  overflow:hidden;
  border:2px solid #444;
}
.newsletter-cta::before{
  content:'';
  position:absolute;
  top:-80px;right:-80px;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,152,0,.06) 0%,transparent 70%);
  border-radius:50%;
}
.newsletter-cta h2{
  font-family:var(--font-display);
  font-size:2rem;
  color:#fff;
  font-weight:400;
  margin-bottom:.5rem;
  position:relative;z-index:1;
}
.newsletter-cta p{
  color:#aaa;
  font-size:1rem;
  margin-bottom:1.8rem;
  position:relative;z-index:1;
}
.newsletter-form{
  display:flex;
  gap:.5rem;
  max-width:460px;
  margin:0 auto;
  position:relative;z-index:1;
}
.newsletter-form input{
  flex:1;
  padding:.9rem 1.2rem;
  border-radius:50px;
  border:2px solid #444;
  background:#333;
  color:#fff;
  font-size:.9rem;
  font-family:var(--font);
  outline:none;
  transition:.2s;
}
.newsletter-form input:focus{border-color:var(--primary);background:#3a3a3a}
.newsletter-form input::placeholder{color:#777}
.newsletter-form button{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:.9rem 1.8rem;
  border-radius:50px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:.2s;
  font-family:var(--font);
  white-space:nowrap;
}
.newsletter-form button:hover{background:var(--primary-dark);transform:translateY(-2px)}

/* --- AFFILIATE / ADS --- */
.affiliate-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-bottom:3rem;
}
.affi-card{
  background:#fff;
  border:2px solid var(--border-light);
  border-radius:var(--radius-md);
  padding:1.8rem 2rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  transition:.3s;
}
.affi-card:hover{box-shadow:var(--card-shadow-hover);border-color:var(--primary-light);transform:translateY(-2px)}
.affi-icon{font-size:2.5rem;flex-shrink:0}
.affi-body h4{font-size:1rem;font-weight:700;margin-bottom:.2rem}
.affi-body p{font-size:.85rem;color:var(--text-muted);line-height:1.4}
.affi-badge{
  display:inline-block;
  background:var(--primary-light);
  color:var(--primary-dark);
  font-size:.7rem;
  font-weight:700;
  padding:.15rem .6rem;
  border-radius:50px;
  margin-top:.3rem;
}

/* --- FOOTER --- */
.site-footer{
  background:#1a1a1a;
  color:#999;
  padding:3.5rem 1rem 2rem;
  margin-top:3rem;
  font-size:.88rem;
}
.footer-wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  margin-bottom:2rem;
}
.footer-brand .logo{font-size:1.3rem;display:inline-block;margin-bottom:.8rem}
.footer-brand p{line-height:1.6;font-size:.85rem}
.footer-col h4{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.5px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-col a{color:#999;font-size:.85rem}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  max-width:1200px;
  margin:0 auto;
  padding-top:1.5rem;
  border-top:1px solid #333;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.8rem;
}

/* --- COOKIE BANNER --- */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#1a1a1a;
  color:#ddd;
  padding:1rem 1.5rem;
  display:none;
  z-index:999;
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
  font-size:.88rem;
}
.cookie-banner.show{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.cookie-banner p{max-width:700px}
.cookie-banner a{color:#FFB74D}
.cookie-banner button{
  background:var(--primary);
  border:none;
  color:#fff;
  font-weight:700;
  padding:.5rem 1.5rem;
  border-radius:50px;
  cursor:pointer;
  font-size:.88rem;
  white-space:nowrap;
}
.cookie-banner button:hover{background:var(--primary-dark)}

/* --- RESPONSIVE --- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-text h1{font-size:2.6rem}
  .hero-visual{max-width:500px;margin:0 auto}
  .featured-grid{grid-template-columns:1fr 1fr}
  .featured-grid .blog-card:first-child{grid-row:auto}
  .featured-grid .blog-card:first-child .card-img{height:200px}
  .footer-wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:rgba(255,255,255,.98);
    flex-direction:column;
    padding:.5rem;
    border-bottom:3px solid var(--primary);
    gap:0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem 1rem;border-radius:8px}
  .nav-toggle{display:block}
  .hero-inner{padding:2.5rem 1.5rem}
  .hero-text h1{font-size:2rem}
  .hero-text p{font-size:1rem}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:.5rem;padding:1.2rem}
  .stat-item:nth-child(2){border-right:none}
  .cat-grid{grid-template-columns:1fr}
  .featured-grid{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .affiliate-section{grid-template-columns:1fr}
  .newsletter-cta{padding:3rem 1.5rem}
  .newsletter-cta h2{font-size:1.6rem}
  .newsletter-form{flex-direction:column}
  .newsletter-form button{width:100%}
  .footer-wrap{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .section-header h2{font-size:1.8rem}
  .hero-visual{display:none}
}

/* ── Filter Tabs ── */
.filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.filter-btn{background:var(--bg-alt);border:2px solid var(--border);border-radius:50px;padding:.5rem 1.2rem;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s;font-family:var(--font);color:var(--text);min-height:44px}
.filter-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* ── Load More ── */
.load-more-wrap{text-align:center;margin-top:2rem}
.load-more-wrap .btn{font-size:1rem;padding:.8rem 2rem}
#loadMoreBtn.hidden{display:none}
/* ── Hide filtered cards ── */
.blog-card.hidden-by-filter{display:none}

.blog-card.hidden-by-pagination{display:none}