*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-light:  #3B82F6;
  --blue-soft:   #EFF6FF;
  --blue-mid:    #DBEAFE;
  --blue-border: #BFDBFE;
  --white:       #FFFFFF;
  --off-white:   #F8FAFF;
  --text:        #0F172A;
  --text-mid:    #334155;
  --text-light:  #64748B;
  --amber:       #F59E0B;
  --green:       #16A34A;
  --red:         #DC2626;
  --purple:      #8B5CF6;
}

html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; background:var(--white); color:var(--text); overflow-x:hidden; }

/* Navbar styles now live in public-shell.css (shared across all public pages). */

/* ══ BUTTONS ══ */
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; border:none; cursor:pointer; padding:0.9rem 2rem; border-radius:10px; font-weight:700; font-size:0.95rem; font-family:'Inter',sans-serif; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 22px rgba(37,99,235,0.32); transition:transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(37,99,235,0.42); }

.btn-secondary { background:#fff; color:var(--blue); border:2px solid var(--blue-border); padding:0.9rem 2rem; border-radius:10px; font-weight:700; font-size:0.95rem; font-family:'Inter',sans-serif; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.btn-secondary:hover { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 4px 14px rgba(37,99,235,0.12); }

/* ══ PAGE HERO ══ */
.page-hero { min-height:56vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:9rem 6% 5rem; background:linear-gradient(160deg,#F0F7FF 0%,#FFFFFF 55%,#EEF4FF 100%); text-align:center; }
.page-hero::before { content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(rgba(37,99,235,0.055) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,0.055) 1px,transparent 1px); background-size:48px 48px; }
.page-hero::after { content:''; position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse 70% 60% at 50% 30%,rgba(37,99,235,0.09) 0%,transparent 70%), radial-gradient(ellipse 40% 35% at 80% 80%,rgba(96,165,250,0.08) 0%,transparent 60%); }
.particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle { position:absolute; border-radius:50%; background:rgba(37,99,235,0.15); animation:particleRise linear infinite; }
@keyframes particleRise { 0% { transform:translateY(100vh) scale(0); opacity:0; } 10% { opacity:1; } 90% { opacity:0.5; } 100% { transform:translateY(-80px) scale(1.1); opacity:0; } }

.hero-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--blue-soft); border:1.5px solid var(--blue-border); padding:0.4rem 1rem; border-radius:100px; font-size:0.78rem; font-weight:700; color:var(--blue); margin-bottom:1.5rem; letter-spacing:0.02em; animation:fadeDown 0.6s ease both; }
.eyebrow::before { content:''; width:7px; height:7px; background:var(--blue); border-radius:50%; animation:pulse 2s infinite; }
.page-hero h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:700; line-height:1.1; color:var(--text); margin-bottom:1.3rem; animation:fadeUp 0.7s 0.1s ease both; }
.page-hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--blue) 0%,#60a5fa 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p { font-size:1.05rem; color:var(--text-light); line-height:1.75; animation:fadeUp 0.7s 0.2s ease both; max-width:580px; margin:0 auto 2rem; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp 0.7s 0.3s ease both; }

/* ══ STATS STRIP ══ */
.stats-strip { background:var(--blue); padding:3rem 6%; }
.stats-inner { max-width:1000px; margin:0 auto; display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:2rem; }
.stat-item { text-align:center; }
.stat-num { font-family:'Space Grotesk',sans-serif; font-size:2.6rem; font-weight:700; color:#fff; line-height:1; }
.stat-num span { color:#BFDBFE; }
.stat-lbl { font-size:0.82rem; color:rgba(255,255,255,0.7); margin-top:5px; }
.stat-div { width:1px; height:50px; background:rgba(255,255,255,0.2); }

/* ══ SECTIONS ══ */
section { padding:6rem 6%; }
.section-inner { max-width:1200px; margin:0 auto; }
.sec-eyebrow { font-size:0.73rem; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:var(--blue); margin-bottom:0.8rem; }
.sec-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:700; line-height:1.2; color:var(--text); margin-bottom:1rem; }
.sec-desc { font-size:1rem; color:var(--text-light); line-height:1.75; max-width:540px; }

/* ══ CATEGORY CARDS ══ */
#categories { background:var(--off-white); }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3.5rem; }
.cat-card {
  background:#fff; border:1.5px solid #E8F0FD; border-radius:18px; padding:2rem;
  text-align:center; text-decoration:none; color:inherit;
  transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position:relative; overflow:hidden;
}
.cat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:opacity 0.3s; }
.cat-card:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(37,99,235,0.12); border-color:var(--blue-border); }
.cat-card:hover::before { opacity:1; }
.cat-icon { width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 1rem; }
.cat-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:0.3rem; }
.cat-count { font-size:0.82rem; color:var(--text-light); }

/* ══ FILTER BAR ══ */
#browse { background:#fff; }
.filter-bar {
  display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center;
  margin-bottom:2.5rem; padding:1.25rem;
  background:var(--off-white); border:1.5px solid var(--blue-border);
  border-radius:14px;
}
.filter-bar .fsearch { position:relative; flex:1; min-width:200px; }
.filter-bar .fsearch-icon { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); font-size:0.9rem; color:var(--text-light); }
.filter-bar input, .filter-bar select {
  background:#fff; border:1.5px solid #DDE6F5; border-radius:8px;
  padding:0.6rem 0.8rem; font-family:'Inter',sans-serif; font-size:0.84rem;
  color:var(--text); outline:none; transition:border-color 0.2s;
}
.filter-bar input:focus, .filter-bar select:focus { border-color:var(--blue); }
.filter-bar .fsearch input { width:100%; padding-left:2rem; }
.filter-bar select { cursor:pointer; }
.filter-btn {
  background:var(--blue); color:#fff; border:none; border-radius:8px;
  padding:0.6rem 1.2rem; font-family:'Inter',sans-serif; font-size:0.84rem;
  font-weight:700; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s;
}
.filter-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,99,235,0.3); }
.filter-reset { background:transparent !important; color:var(--text-mid) !important; border:1.5px solid var(--blue-border) !important; }

/* ══ RESOURCE CARDS ══ */
.resources-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.resource-card {
  background:var(--off-white); border:1.5px solid #E8F0FD;
  border-radius:16px; padding:1.75rem;
  display:flex; flex-direction:column; gap:0.75rem;
  transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position:relative; overflow:hidden;
}
.resource-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),#60a5fa); opacity:0; transition:opacity 0.3s; }
.resource-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(37,99,235,0.10); border-color:var(--blue-border); background:#fff; }
.resource-card:hover::before { opacity:1; }

.res-card-header { display:flex; align-items:center; gap:0.75rem; }
.res-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.res-type-badge { font-size:0.72rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:100px; border:1px solid; }
.res-title { font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; line-height:1.4; }
.res-desc { font-size:0.82rem; color:var(--text-light); line-height:1.6; flex:1; }
.res-meta { display:flex; align-items:center; gap:0.6rem; padding-top:0.75rem; border-top:1px solid var(--blue-mid); margin-top:auto; }
.res-meta-subject { font-size:0.78rem; font-weight:600; color:var(--blue); }
.res-meta-author { font-size:0.72rem; color:var(--text-light); }
.res-link {
  display:inline-flex; align-items:center; gap:6px; padding:0.5rem 1rem;
  border-radius:8px; font-size:0.82rem; font-weight:700; text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s;
}
.res-link:hover { transform:translateY(-1px); }

.empty-state { grid-column:1/-1; text-align:center; padding:3rem; color:var(--text-light); }
.empty-state-icon { font-size:3rem; margin-bottom:1rem; opacity:0.4; }

/* ══ PAGINATION ══ */
.pagination { display:flex; justify-content:center; gap:0.5rem; margin-top:3rem; flex-wrap:wrap; }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 0.75rem; border-radius:10px; border:1.5px solid var(--blue-border); font-size:0.86rem; font-weight:600; text-decoration:none; color:var(--text-mid); transition:all 0.2s; }
.pagination a:hover { border-color:var(--blue); background:var(--blue-soft); color:var(--blue); }
.pagination .active { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; border-color:var(--blue); box-shadow:0 4px 14px rgba(37,99,235,0.3); }
.pagination .disabled { opacity:0.4; cursor:not-allowed; }

/* ══ LOGIN PROMPT ══ */
.login-banner {
  background:linear-gradient(135deg,var(--blue-soft),#EEF4FF);
  border:1.5px solid var(--blue-border); border-radius:18px;
  padding:2.5rem; text-align:center; margin-bottom:3rem;
  position:relative; overflow:hidden;
}
.login-banner::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),#60a5fa); }
.login-banner h3 { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; }
.login-banner p { font-size:0.9rem; color:var(--text-light); margin-bottom:1.5rem; }

/* ══ CTA ══ */
#cta { background:var(--off-white); padding:6rem 6%; }
.cta-box { max-width:800px; margin:0 auto; text-align:center; background:linear-gradient(135deg,var(--blue-soft) 0%,#EEF4FF 100%); border:1.5px solid var(--blue-border); border-radius:24px; padding:4rem 3rem; position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),#60a5fa); }
.cta-box::after { content:''; position:absolute; bottom:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:rgba(37,99,235,0.06); }
.cta-box h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; color:var(--text); margin-bottom:0.75rem; position:relative; z-index:1; }
.cta-box p { color:var(--text-light); font-size:1.02rem; margin-bottom:2rem; position:relative; z-index:1; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* Footer styles now live in public-shell.css (shared across all public pages). */

/* ══ ANIMATIONS ══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══ RESPONSIVE ══ */
@media (max-width:1024px) { .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .cat-grid { grid-template-columns:1fr 1fr; }
  .resources-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:2rem; }
  .stat-div { display:none; }
}
@media (max-width:600px) {
  .cat-grid { grid-template-columns:1fr; }
  .resources-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .cta-box { padding:2.5rem 1.5rem; }
  .filter-bar { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important} }