/* ================= RESOURCES-PAGE NAV VARIANT ================= */
/* This page uses a simpler nav (.nav-right) instead of the full .nav-links / hamburger menu */
.nav-right{ display:flex; gap:10px; align-items:center; }

/* ================= HERO ================= */
.res-hero{ padding:56px 6% 40px; max-width:1280px; margin:0 auto; }
.res-hero-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:32px; align-items:center; }
.res-hero-illustration{ width:100%; max-width:260px; margin:0 auto; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; color:var(--indigo);
  background:var(--indigo-50); border:1px solid var(--indigo-100);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--indigo); }
.res-hero h1{ font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--ink); margin-bottom:14px; max-width:640px; }
.res-hero h1 em{
  font-style:normal;
  color:var(--indigo);
  position:relative;
  display:inline-block;
  z-index:1;
}
.res-hero h1 em::after{
  content:'';
  position:absolute;
  left:-2%; bottom:6%;
  width:104%; height:28%;
  background:var(--indigo-100);
  z-index:-1;
  border-radius:4px;
  transform:rotate(-1.5deg);
}
.res-hero p{ color:var(--slate); font-size:1rem; line-height:1.65; max-width:560px; margin-bottom:28px; }
.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.h-stat .num{ font-family:'Lexend',sans-serif; font-size:1.4rem; font-weight:700; color:var(--ink); }
.h-stat .lbl{ font-size:0.78rem; color:var(--slate); margin-top:2px; }

/* ================= FILTER BAR ================= */
.filter-bar{
  background:#ffffff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:14px 6%; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  position:sticky; top:61px; z-index:90;
}
.filter-label{ font-size:0.78rem; font-weight:600; color:var(--ink-soft); flex-shrink:0; }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.fpill{ padding:6px 15px; border-radius:999px; border:1px solid var(--border); background:none; font-size:0.82rem; font-weight:500; color:var(--slate); cursor:pointer; transition:all 0.15s; }
.fpill:hover{ border-color:var(--indigo); color:var(--indigo); }
.fpill.active{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.search-wrap{ position:relative; margin-left:auto; }
.search-wrap input{ padding:8px 14px 8px 34px; border-radius:8px; border:1px solid var(--border); font-size:0.85rem; outline:none; background:var(--bg); color:var(--ink); width:220px; transition:all 0.15s; }
.search-wrap input:focus{ border-color:var(--indigo); background:#fff; }
.search-wrap input::placeholder{ color:var(--slate); }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); }
.search-icon svg{ width:15px; height:15px; }

/* ================= CONTENT ================= */
.res-content{ padding:40px 6% 80px; max-width:1280px; margin:0 auto; }

/* ================= WA BANNER ================= */
.wa-banner{
  background:var(--ink); border-radius:var(--r-lg); padding:32px 36px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  margin-bottom:48px; flex-wrap:wrap;
}
.wa-banner h2{ font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:6px; }
.wa-banner p{ color:#94A3B8; font-size:0.88rem; max-width:420px; line-height:1.6; }
.btn-wa-large{ display:inline-flex; align-items:center; gap:9px; background:var(--emerald); color:#fff; padding:12px 24px; border-radius:9px; font-weight:600; font-size:0.9rem; text-decoration:none; flex-shrink:0; transition:background 0.15s; }
.btn-wa-large:hover{ background:#0d9c6f; }

/* ================= SECTION HEADER ================= */
.res-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border-2); }
.res-section-title{ font-size:1.1rem; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px; }
.res-section-icon{ width:32px; height:32px; }
.res-section-count{ font-size:0.75rem; color:var(--slate); background:var(--bg); border:1px solid var(--border); padding:3px 10px; border-radius:999px; }
.section-block{ margin-bottom:48px; }
.section-block:last-child{ margin-bottom:0; }

/* ================= GRID + CARD ================= */
.res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.res-card{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--r);
  padding:20px; display:flex; flex-direction:column; gap:11px; box-shadow:0 4px 6px rgba(0,0,0,0.02);
  transition:box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.res-card:hover{ border-color:var(--indigo); box-shadow:0 12px 30px rgba(15,23,42,0.08); transform:translateY(-8px); }
.rc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.rc-icon{ width:38px; height:38px; flex-shrink:0; }
.rc-badges{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.badge{ font-size:0.64rem; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; }
.badge-free{ background:var(--emerald-50); color:#047857; }
.badge-new{ background:var(--amber-50); color:#B45309; }
.badge-hot{ background:var(--indigo-50); color:var(--indigo); }
.rc-title{ font-size:0.92rem; font-weight:600; color:var(--ink); line-height:1.35; }
.rc-desc{ font-size:0.8rem; color:var(--slate); line-height:1.55; }
.rc-meta{ display:flex; gap:12px; flex-wrap:wrap; }
.rc-meta-item{ font-size:0.72rem; color:var(--slate); }
.rc-actions{ display:flex; gap:8px; margin-top:2px; }
.btn-download{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:8px; background:var(--indigo); color:#fff; font-size:0.78rem; font-weight:600; border:none; cursor:pointer; text-decoration:none; transition:background 0.15s; }
.btn-download:hover{ background:var(--indigo-d); }
.btn-preview{ display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border-radius:8px; background:var(--bg); border:1px solid var(--border); color:var(--ink-soft); font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.15s; }
.btn-preview:hover{ border-color:var(--ink); }

/* ================= TOAST ================= */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff; padding:11px 22px; border-radius:999px;
  font-size:0.85rem; font-weight:600; z-index:999; transition:transform 0.3s;
  white-space:nowrap; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

/* ================= CTA HOOK ================= */
.final-cta{
  background:var(--ink); border-radius:var(--r-lg);
  padding:56px 6%; text-align:center;
  max-width:1280px; margin:0 6% 0 6%;
  position:relative; overflow:hidden;
}
@media(min-width:1360px){ .final-cta{ margin-left:auto; margin-right:auto; } }
.final-cta h2{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:#fff; letter-spacing:-0.5px; margin-bottom:14px; }
.final-cta p{ color:#94A3B8; font-size:0.95rem; max-width:460px; margin:0 auto 30px; line-height:1.6; }
.final-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ background:#F1F5F9; }
.btn-ghost-dark{ background:transparent; border:1px solid #334155; color:#fff; }
.btn-ghost-dark:hover{ border-color:#64748B; }

/* ================= RESOURCES-PAGE FOOTER VARIANT ================= */
/* This page uses a simpler single-row footer instead of the multi-column footer */
footer{ background:var(--surface); color:var(--slate); padding:36px 6% 24px; border-top:1px solid var(--border); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; max-width:1280px; margin:0 auto; }
.footer-logo{ font-size:1.02rem; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; text-decoration:none; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ color:var(--ink-soft); text-decoration:none; font-size:0.85rem; transition:color 0.15s; }
.footer-links a:hover{ color:var(--indigo); }
.footer-bottom{ max-width:1280px; margin:22px auto 0; padding-top:18px; border-top:1px solid var(--border); text-align:center; font-size:0.78rem; color:var(--slate); }

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .filter-bar{ top:57px; }
  .wa-banner{ flex-direction:column; text-align:center; }
  .search-wrap{ margin-left:0; width:100%; }
  .search-wrap input{ width:100%; }
  .res-hero-grid{ grid-template-columns:1fr; }
  .res-hero-illustration{ order:-1; max-width:180px; }
  nav{ flex-wrap:wrap; row-gap:10px; }
  .nav-right{ width:100%; flex-wrap:wrap; }
  .nav-right .btn{ flex:1; justify-content:center; }
}
@media(max-width:480px){
  .nav-right{ flex-direction:column; }
}