/* =====================================================================
   ASN TRICKS — MASTER STYLESHEET
   Table of Contents:
   1.  Reset & Base
   2.  CSS Variables / Theme
   3.  Typography
   4.  Layout / Container / Grid Helpers
   5.  Buttons
   6.  Header / Navigation
   7.  Mobile Menu
   8.  Search Overlayf
   9.  Hero Section
   10. Trust / Features Strip
   11. Section Heading
   12. Hub Cards Grid
   13. CTA Banner
   14. Trending Articles
   15. Newsletter
   16. FAQ Accordion
   17. Footer
   18. Back To Top
   19. Toast / Utility
   20. Animations
   21. Scrollbar
   22. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RESET & BASE (Locked viewport to prevent mobile sliding)
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { 
  scroll-behavior: smooth; 
  -webkit-text-size-adjust: 100%; 
  max-width: 100vw; 
  overflow-x: hidden; 
}
body {
  color: var(--text-body);
  background: var(--bg-page);
  max-width: 100vw;
  overflow-x: hidden;
  overflow-wrap: break-word; /* Prevents long text from breaking layout */
  transition: background-color .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
svg { display: block; }

/* ---------------------------------------------------------------------
   2. CSS VARIABLES / THEME
--------------------------------------------------------------------- */
:root {
  --primary: #241E8C;        
  --primary-deep: #140F5C;   
  --secondary: #4F46E5;      
  --accent: #00C2FF;         
  
  --bg-page: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f7f8fb;
  --bg-header: rgba(255,255,255,.85);
  --border-soft: #ececf2;
  --text-heading: #16161d;
  --text-body: #55566b;
  --text-muted: #90919f;
  
  --shadow-sm: 0 1px 2px rgba(20,20,50,.04);
  --shadow-md: 0 6px 20px rgba(20,20,60,.06);
  --shadow-lg: 0 16px 40px rgba(20,20,60,.10);
  --shadow-brand: 0 10px 24px rgba(36,30,140,.20);

  --gradient-brand: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 65%, var(--accent) 130%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(36,30,140,.06) 0%, rgba(0,194,255,.07) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-text: linear-gradient(95deg, var(--primary) 0%, var(--secondary) 55%, var(--accent) 100%);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container-w: 1080px;
  --header-h: 76px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --font-heading: 'Space Mono', monospace;
  --font-body: 'Outfit', sans-serif;
}

html[data-theme="dark"] {
  --bg-page: #000000;
  --bg-surface: #101014;
  --bg-surface-alt: #18181f;
  --bg-header: rgba(16,16,20,.85);
  --border-soft: #26262f;
  
  --text-heading: #f5f5fa;
  --text-body: #b8b9c7;
  --text-muted: #7c7d8d;
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  
  /* Dark Mode Color Overrides */
  --primary: #818CF8;        
  --primary-deep: #4F46E5;   
  --secondary: #6366F1;      
  
  --gradient-brand-soft: linear-gradient(120deg, rgba(129, 140, 248, .12) 0%, rgba(0,194,255,.10) 100%);
  --gradient-text: linear-gradient(95deg, #818CF8 0%, #A5B4FC 55%, var(--accent) 100%);
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
--------------------------------------------------------------------- */
body { font-family: var(--font-body); font-size: 18px; line-height: 1.8; letter-spacing: 0px; }
p { line-height: 1.8; }
ul, ol { line-height: 1.7; }

h1, h2, h3, h4, h5, h6, .brand-name, .hero-stat .num, .eyebrow, .hub-count, .mega-col-title {
  font-family: var(--font-heading); color: var(--text-heading); line-height: 1.2; letter-spacing: -0.5px; font-weight: 700;
}

/* Desktop Scale */
h1 { font-size: 56px; }
h2 { font-size: 42px; }
h3 { font-size: 34px; }
h4 { font-size: 28px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; }

.text-small { font-size: 16px; }
.text-caption { font-size: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-transform: uppercase;
  color: var(--primary); background: var(--gradient-brand-soft); padding: 6px 16px; border-radius: var(--radius-pill);
}

.text-gradient {
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------------------------
   4. LAYOUT / CONTAINER / GRID HELPERS
--------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------------
   5. BUTTONS
--------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.3px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(36,30,140,.26), 0 0 0 4px rgba(0,194,255,.12); }
.btn-outline { background: transparent; color: var(--text-heading); border: 1.5px solid var(--border-soft); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--primary); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.btn-white:hover { transform: translateY(-3px); }
.btn-ghost-light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 15px; }
.btn-block { width: 100%; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-heading); background: var(--bg-surface-alt); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); font-size: 16px;
}
.icon-btn:hover { background: var(--gradient-brand); color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   6. HEADER / NAVIGATION
--------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000; background: var(--bg-header); border-bottom: 1px solid var(--border-soft);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: box-shadow .3s var(--ease), background .35s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(20,20,60,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-name { font-size: 24px; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 500;
  color: var(--text-body); transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-link:hover, .nav-item.active .nav-link { color: var(--primary); background: var(--gradient-brand-soft); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
.hamburger { display: none; }

/* ---------------------------------------------------------------------
   7. MOBILE MENU
--------------------------------------------------------------------- */
.hamburger { width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; background: var(--bg-surface-alt); font-size: 18px; }
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); height: 100vh; background: var(--bg-surface); z-index: 1200;
  box-shadow: -20px 0 60px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; padding: 22px;
}
.mobile-drawer.is-open { transform: translateX(0); }
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(10,10,20,.5); z-index: 1150; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; backdrop-filter: blur(2px);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer-close { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-surface-alt); display: flex; align-items: center; justify-content: center; }
.drawer-search {
  display: flex; align-items: center; gap: 10px; background: var(--bg-surface-alt); border-radius: var(--radius-pill); padding: 12px 16px; color: var(--text-muted); font-size: 16px; width: 100%;
}
.drawer-link { display: block; padding: 14px 4px; font-weight: 500; font-size: 17px; border-bottom: 1px solid var(--border-soft); }

/* ---------------------------------------------------------------------
   8. SEARCH OVERLAY
--------------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 1300; background: rgba(10,10,25,.55); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-panel {
  width: 100%; max-width: 640px; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(-16px); transition: transform .3s var(--ease);
}
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-field { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border-soft); }
.search-field i.fa-magnifying-glass { color: var(--primary); font-size: 18px; }
.search-field input { flex: 1; border: none; outline: none; background: transparent; font-size: 18px; color: var(--text-heading); }
.search-field input::placeholder { color: var(--text-muted); }
.search-esc { font-size: 12px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-soft); padding: 4px 8px; border-radius: 6px; }
.search-results { max-height: 380px; overflow-y: auto; padding: 10px; }
.search-result-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; transition: background .2s var(--ease);
}
.search-result-item:hover { background: var(--bg-surface-alt); }
.search-result-item .sri-left { display: flex; align-items: center; gap: 12px; }
.search-result-item .sri-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--gradient-brand-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.sri-name { font-weight: 600; font-size: 16px; color: var(--text-heading); }
.sri-name mark { background: transparent; color: var(--primary); font-weight: 800; }
.sri-hub { font-size: 14px; color: var(--text-muted); }
.search-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 16px; }
.search-hint { padding: 16px 22px; font-size: 14px; color: var(--text-muted); border-top: 1px solid var(--border-soft); display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   9. HERO SECTION
--------------------------------------------------------------------- */
.hero { position: relative; background: var(--gradient-hero); padding: 88px 0 100px; overflow: hidden; color: #fff; }
.hero::before { content: ""; position: absolute; filter: blur(10px); width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); top: -180px; right: -120px; border-radius: 50%; }
.hero::after { content: ""; position: absolute; filter: blur(10px); width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); bottom: -160px; left: -100px; border-radius: 50%; }
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: 8px 18px; border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 14px; margin-bottom: 26px; color: #fff;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0,194,255,.25); }
.hero h1 { color: #fff; max-width: 760px; margin: 0 auto 20px; }
.hero h1 .hl { color: #ffe066; -webkit-text-fill-color: #ffe066; }
.hero p.hero-sub { max-width: 560px; margin: 0 auto 38px; color: rgba(255,255,255,.86); font-size: 18px; }
.hero-search {
  max-width: 620px; margin: 0 auto 26px; background: #fff; border-radius: var(--radius-pill);
  padding: 8px 8px 8px 22px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 50px rgba(10,10,40,.35);
}
.hero-search i.fa-magnifying-glass { color: var(--primary); font-size: 18px; }
.hero-search input { flex: 1; border: none; outline: none; height: 50px; font-size: 16px; color: var(--ink-1); }
.hero-search input::placeholder { color: #a2a3b5; }
.hero-search button { flex-shrink: 0; }
.hero-tags { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-tags span.label { font-size: 14px; color: rgba(255,255,255,.7); margin-right: 4px; }
.hero-tag {
  font-size: 14px; font-weight: 500; padding: 8px 16px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-pill); transition: background .2s var(--ease), transform .2s var(--ease);
}
.hero-tag:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: 780px; margin: 0 auto; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 26px 10px; backdrop-filter: blur(6px);
}
.hero-stat { text-align: center; border-right: 1px solid rgba(255,255,255,.16); }
.hero-stat:last-child { border-right: none; }
.hero-stat .num { font-size: 34px; color: #fff; }
.hero-stat .lbl { font-size: 14px; color: rgba(255,255,255,.78); margin-top: 4px; }

/* ---------------------------------------------------------------------
   10. TRUST / FEATURES STRIP
--------------------------------------------------------------------- */
.features-strip { margin-top: -46px; position: relative; z-index: 3; }
.features-card {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.feature-item { display: flex; align-items: center; gap: 14px; padding: 26px 24px; border-right: 1px solid var(--border-soft); transition: background .25s var(--ease); }
.feature-item:last-child { border-right: none; }
.feature-item:hover { background: var(--bg-surface-alt); }
.feature-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--gradient-brand-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.feature-copy .t { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.feature-copy .d { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------------------
   11. SECTION HEADING
--------------------------------------------------------------------- */
.section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 18px; }

/* ---------------------------------------------------------------------
   12. HUB CARDS GRID (Compact & Elevated Design)
--------------------------------------------------------------------- */
.hubs-grid { 
  display: grid; 
  /* Auto-fit makes it scale automatically, creating much smaller, tighter cards */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  gap: 16px; 
}
.hub-card {
  background: var(--bg-surface); 
  /* New Primary Border */
  border: 1.5px solid var(--primary); 
  border-radius: 12px; 
  padding: 16px; /* Reduced padding for compactness */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); 
  display: flex; flex-direction: column; opacity: 0; transform: translateY(24px);
}
.hub-card.in-view { opacity: 1; transform: translateY(0); }
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.hub-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.hub-icon {
  width: 40px; height: 40px; /* Reduced icon size */
  border-radius: 10px; background: var(--gradient-brand); color: #fff; 
  display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: var(--shadow-brand); flex-shrink: 0;
}
.hub-count { font-size: 12px; color: var(--primary); background: var(--gradient-brand-soft); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; font-weight: 700; }
.hub-card h3 { margin-bottom: 4px; font-size: 18px; }
.hub-card h3 a:hover { color: var(--primary); }
.hub-card .hub-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }

.tool-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.tool-list li a {
  display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--text-body);
  padding: 6px 8px; border-radius: 6px; 
  /* Added underline for tools */
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 194, 255, 0.4);
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.tool-list li a i.fa-angle-right { font-size: 10px; color: var(--secondary); transition: transform .2s var(--ease); text-decoration: none; }
.tool-list li a:hover { background: var(--bg-surface-alt); color: var(--primary); padding-left: 12px; text-decoration-color: var(--primary); }
.tool-list li a:hover i.fa-angle-right { transform: translateX(3px); }

.hub-view-all {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--primary); padding: 8px;
  border-radius: var(--radius-pill); border: 1.5px dashed rgba(36, 30, 140, 0.3); transition: background .2s var(--ease), border-color .2s var(--ease);
}
.hub-view-all:hover { background: var(--gradient-brand-soft); border-color: var(--primary); }
.hubs-more { text-align: center; margin-top: 40px; }

/* ---------------------------------------------------------------------
   13. CTA BANNER
--------------------------------------------------------------------- */
.cta-banner { background: var(--gradient-brand); border-radius: var(--radius-lg); padding: 52px 40px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-banner::before { content: ""; position: absolute; inset: 0; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='white' opacity='0.15'/%3E%3C/svg%3E"); }
.cta-banner > * { position: relative; z-index: 2; }
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,.86); max-width: 480px; margin: 0 auto 28px; font-size: 18px; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   14. TRENDING ARTICLES
--------------------------------------------------------------------- */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(0,194,255,.3); }
.article-thumb { height: 150px; background: var(--gradient-brand-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 34px; position: relative; }
.article-thumb .art-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--primary); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-heading);}
.article-body { padding: 20px; }
.article-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.article-body h3 { margin-bottom: 8px; }
.article-body h3 a:hover { color: var(--primary); }
.article-body p { font-size: 16px; color: var(--text-muted); margin-bottom: 14px; }
.article-read { font-size: 15px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
.article-read i { transition: transform .2s var(--ease); font-size: 12px; }
.article-card:hover .article-read i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   15. NEWSLETTER
--------------------------------------------------------------------- */
.newsletter { background: var(--bg-surface-alt); border-radius: var(--radius-lg); padding: 46px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid var(--border-soft); }
.newsletter-copy h3 { margin-bottom: 8px; }
.newsletter-copy p { color: var(--text-muted); font-size: 16px; max-width: 380px; }
.newsletter-form { display: flex; gap: 10px; flex-shrink: 0; }
.newsletter-form input { width: 280px; padding: 14px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-soft); background: var(--bg-surface); outline: none; font-size: 16px; color: var(--text-heading); transition: border-color .2s var(--ease); }
.newsletter-form input:focus { border-color: var(--primary); }

/* ---------------------------------------------------------------------
   16. FAQ ACCORDION
--------------------------------------------------------------------- */
.faq-wrap { max-width: 780px; margin: 0 auto; }
.faq-item { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; font-weight: 600; font-size: 18px; color: var(--text-heading); gap: 16px; width: 100%; text-align: left; }
.faq-q .plus { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--bg-surface-alt); color: var(--primary); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.faq-item.is-open .faq-q .plus { transform: rotate(135deg); background: var(--gradient-brand); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 24px 22px; color: var(--text-muted); font-size: 16px; }
.faq-item.is-open .faq-a { max-height: 240px; }

/* ---------------------------------------------------------------------
   17. FOOTER (Professional Dark Slate Overhaul)
--------------------------------------------------------------------- */
.site-footer { 
  background: #0B0F19; /* Premium Deep Slate */
  color: #94A3B8; 
  margin-top: 40px; 
  border-top: 1px solid #1E293B; 
}
.footer-top { padding: 64px 0 44px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 28px; }

.footer-brand .brand-name span.text-gradient { background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.footer-brand .brand-name { color: #fff !important; }

.footer-about { font-size: 15px; color: #94A3B8; margin: 16px 0 22px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { 
  width: 36px; height: 36px; border-radius: 50%; 
  background: #1E293B; display: flex; align-items: center; justify-content: center; 
  font-size: 14px; color: #F8FAFC; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); 
}
.footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }

.footer-col h4 { color: #F8FAFC; margin-bottom: 20px; font-size: 16px; font-weight: 600; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { font-size: 15px; color: #94A3B8; transition: color .2s var(--ease), padding-left .2s var(--ease); display: inline-block; }
.footer-col ul li a:hover { color: #38BDF8; padding-left: 4px; }

.footer-badges { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.footer-badge { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #94A3B8; }
.footer-badge i { color: #34D399; } /* Emerald success check */

.footer-bottom { border-top: 1px solid #1E293B; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: 14px; color: #64748B; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: 14px; color: #64748B; transition: color .2s var(--ease); }
.footer-legal a:hover { color: #F8FAFC; }

/* ---------------------------------------------------------------------
   18. BACK TO TOP & TOAST
--------------------------------------------------------------------- */
.back-to-top { position: fixed; right: 26px; bottom: 26px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-brand); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--ink-1); color: #fff; padding: 14px 24px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 1400; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast i { color: #6dffb0; }

/* ---------------------------------------------------------------------
   19. ANIMATIONS & SCROLLBAR
--------------------------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px);} to { opacity: 1; transform: translateY(0);} }
.fade-up { animation: fadeUp .7s var(--ease) both; }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; } .delay-4 { animation-delay: .32s; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-surface-alt); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--secondary)); border-radius: 10px; }
.search-results::-webkit-scrollbar { width: 6px; }

/* ---------------------------------------------------------------------
   20. RESPONSIVE MEDIA QUERIES (Layout Locking & Typography Downscaling)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .main-nav, .mega-menu { display: none; }
  .hamburger { display: flex; }
  .header-cta { display: none; }
  .hubs-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .features-card { grid-template-columns: repeat(2, 1fr); }
  .feature-item:nth-child(2) { border-right: none; }
}

@media (max-width: 720px) {
  /* Tablet Typography */
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }
  h5 { font-size: 18px; }
  body, p, ul, ol, input, .hub-desc { font-size: 16px; }

  .hero { padding: 60px 0 76px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .hero-stat { border-right: none; }
  .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); }
  .newsletter { flex-direction: column; text-align: center; }
  .newsletter-form { width: 100%; flex-direction: column; }
  .newsletter-form input { width: 100%; }
  .articles-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 22px; }
  .section { padding: 52px 0; }
  
  .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .footer-about { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 30px; }
}

@media (max-width: 480px) {
  /* Mobile Typography - Drastically scaled down to stop two-word splitting */
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 19px; }
  h4 { font-size: 17px; }
  body, p, ul, ol, input, .btn, .hub-desc, .feature-copy .d, .faq-a-inner { font-size: 15px; }
  
  .brand-name { font-size: 18px; }
  .brand img { width: 34px !important; height: 34px !important; }
  
  /* Overriding Header Inline Styles to stop overflow/sliding */
  .header-inner > div { gap: 12px !important; }
  .header-actions { gap: 6px; }
  .container { padding: 0 16px; } /* Slightly tighter padding on small screens */

  .hero-search { flex-wrap: wrap; border-radius: 18px; padding: 12px; }
  .hero-search input { width: 100%; order: 1; height: 44px; font-size: 15px; }
  .hero-search button { order: 2; width: 100%; }
  .search-overlay { padding: 60px 14px; }
  
  .hero-stat .num { font-size: 24px; }
  .hero-stat .lbl { font-size: 12px; }
  
  /* Features stacking to prevent squishing and sliding */
  .features-card { grid-template-columns: 1fr; }
  .feature-item { padding: 16px 20px; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .feature-item:last-child { border-bottom: none; }
  
  .hub-card { padding: 20px; }

  /* Final Footer Alignment Locks */
  .footer-grid { text-align: center; }
  .footer-brand .brand { justify-content: center; margin-bottom: 16px; }
  .footer-about { margin: 0 auto 20px auto; font-size: 14px; }
  .footer-social { justify-content: center; }
  .footer-badges { align-items: center; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-legal { justify-content: center; }
}