:root{
  --bg:#f4f7fb;
  --bg2:#edf3f9;
  --bg3:#e7eef6;

  --text:#17324a;
  --muted:#5f7790;
  --muted2:#7890a8;

  --line:rgba(31,72,110,.12);
  --line2:rgba(79,143,247,.16);

  --panel:rgba(255,255,255,.82);
  --panel2:rgba(255,255,255,.92);

  --blue:#4f8ff7;
  --blue2:#3f7ae0;
  --cyan:#63cde8;
  --teal:#76d9c7;
  --violet:#8d88f7;
  --pink:#e8a9d3;
  --gold:#e8c98d;

  --shadow:0 24px 80px rgba(42,79,112,.10);
  --shadow-soft:0 16px 40px rgba(42,79,112,.08);
  --glow:0 18px 50px rgba(79,143,247,.14);

  --radius:24px;
  --radius-lg:30px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  background:
    radial-gradient(circle at 10% 0%, rgba(99,205,232,.16), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(141,136,247,.10), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(232,169,211,.08), transparent 24%),
    linear-gradient(180deg, #f4f7fb 0%, #eef4fa 38%, #eaf1f8 100%);
  color:var(--text);
  font:16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(circle at 10% 0%, rgba(99,205,232,.16), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(141,136,247,.10), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(232,169,211,.08), transparent 24%),
    linear-gradient(180deg, #f4f7fb 0%, #eef4fa 38%, #eaf1f8 100%);
  color:var(--text);
  font:16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:#8fd6ff;text-decoration:none}
a:hover{color:#dff4ff}
button,input,textarea,select{font:inherit}

.wrap,
.container{
  width:min(calc(100% - 32px), var(--max));
  margin:0 auto;
}

main.container,
.container{
  padding-bottom:88px;
}

/* ===== header ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,72,110,.08);
  box-shadow:0 10px 28px rgba(42,79,112,.08);
}

.site-header-inner{
  width:min(calc(100% - 24px), var(--max));
  margin:0 auto;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
}

.site-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--text);
}

.site-brand-mark{
  width:30px;
  height:30px;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 18px rgba(87,231,255,.14));
}

.site-brand-text{
  font-size:.93rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:#17324a;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.site-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.08);
  background:rgba(255,255,255,.60);
  color:#35516b;
  font-size:.84rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.site-nav-link:hover,
.site-nav-link.active{
  color:#17324a;
  border-color:rgba(79,143,247,.24);
  background:linear-gradient(180deg, rgba(99,205,232,.14), rgba(141,136,247,.10));
  transform:translateY(-1px);
}

.site-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.site-menu-toggle{
  display:none;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(31,72,110,.08);
  background:rgba(255,255,255,.72);
  padding:0;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}

.site-menu-toggle span{
  width:15px;
  height:2px;
  border-radius:999px;
  background:#eef6ff;
  display:block;
}

body > main.container:first-of-type,
body > main:first-of-type{
  margin-top:12px;
}

/* ===== drawer ===== */

body.drawer-open{overflow:hidden}

.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
}

.mobile-drawer.open{
  pointer-events:auto;
}

.mobile-drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,8,14,.72);
  opacity:0;
  transition:opacity .22s ease;
}

.mobile-drawer.open .mobile-drawer-backdrop{
  opacity:1;
}

.mobile-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(84vw, 320px);
  height:100%;
  padding:16px 14px 22px;
  background:
    radial-gradient(circle at top right, rgba(157,125,255,.10), transparent 28%),
    radial-gradient(circle at top left, rgba(87,231,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(10,16,28,.98), rgba(7,12,20,.99));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-18px 0 40px rgba(0,0,0,.28);
  transform:translateX(100%);
  transition:transform .24s ease;
  overflow-y:auto;
}

.mobile-drawer.open .mobile-drawer-panel{
  transform:translateX(0);
}

.mobile-drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.drawer-brand .site-brand-text{
  font-size:.93rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:#17324a;
}

.drawer-close{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.72);
  color:#17324a;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

.mobile-drawer-section + .mobile-drawer-section{
  margin-top:18px;
}

.drawer-heading{
  margin:0 0 8px;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(180,205,235,.78);
}

.drawer-links{
  display:grid;
  gap:8px;
}

.drawer-link{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(31,72,110,.08);
  background:rgba(255,255,255,.68);
  color:#244760;
  font-weight:600;
}

.drawer-link:hover,
.drawer-link.active{
  color:#ffffff;
  border-color:rgba(120,190,255,.35);
  background:rgba(80,160,255,.10);
}

/* ===== surfaces ===== */

.hero-card,
.panel,
.card,
.article-main,
.sidebar,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.search-modal-panel,
.hub-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid rgba(31,72,110,.10);
  border-radius:24px;
  box-shadow:
    0 18px 55px rgba(42,79,112,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
}

.hero{
  padding:72px 0 34px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:42px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,205,232,.16), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(141,136,247,.12), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(232,169,211,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:var(--shadow), 0 18px 60px rgba(79,143,247,.10);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 22%, transparent 42%);
  pointer-events:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.72);
  color:#d7e8ff;
  font-size:.92rem;
}

h1,h2,h3{font-size:1.14rem;color:#1f425f}

h1{
  font-size:clamp(2.3rem, 5vw, 4.8rem);
  background:linear-gradient(90deg,#17324a 0%,#35607e 35%,#5d6fd8 72%,#17324a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}
h3{font-size:1.14rem;color:#1f425f}
p,li{line-height:1.7}

.lead,
.muted,
.card p,
.feature-card p,
.portal-card p{
  color:var(--muted);
}

/* ===== buttons ===== */

.btn,
.search-launch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.70);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}

.btn:hover,
.search-launch:hover{
  transform:translateY(-1px);
  border-color:rgba(143,214,255,.30);
  background:rgba(255,255,255,.07);
}

.btn-primary{
  background:linear-gradient(135deg,#4f8ff7 0%,#63cde8 48%,#8d88f7 100%);
  border-color:transparent;
  box-shadow:var(--glow);
  color:#ffffff;
}

/* ===== layout ===== */

.section{padding:28px 0}

.grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(12,1fr);
}

.card{padding:22px}
.kpi{grid-column:span 3}
.category-card{grid-column:span 4}
.topic-card{grid-column:span 3}

.cards-3,
.feature-grid,
.portal-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.visual-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.visual-card{padding:18px}
.visual-card img{
  border-radius:18px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.68);
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}

.article{padding:32px 0 70px}

.article-shell{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0, 1fr) 320px;
}

.article-main,
.sidebar{
  border-radius:28px;
}

.article-main{padding:34px}
.sidebar{
  padding:22px;
  height:max-content;
  position:sticky;
  top:84px;
}

.article-main h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}
.article-main ul{padding-left:22px}

main ul li::marker,
.panel ul li::marker{
  color:#89d7ff;
}

/* ===== lists / chips ===== */

.badges,
.topic-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
}

.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a{
  font-size:.9rem;
  color:var(--text);
  border:1px solid rgba(31,72,110,.10);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.72);
}

.badge{color:var(--muted)}

.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* ===== search ===== */

.search-layout{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}

.search-panel{padding:28px}
.search-input-wrap{position:relative}

.search-input-wrap input,
.searchbox input,
.mobile-top-search input,
.search-modal-top input{
  width:100%;
  min-height:54px;
  border-radius:18px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.86);
  color:var(--text);
  padding:0 16px;
}

.searchbox{
  margin-top:22px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.searchbox input{flex:1 1 320px}
.searchbox button{
  min-height:52px;
  border:none;
  cursor:pointer;
}

.search-results,
.search-suggestions{
  margin-top:18px;
}

.suggest-list,
.result-list{
  list-style:none;
  padding:0;
  margin:0;
}

.suggest-list li,
.result-list li{
  margin:0 0 12px;
}

.result-item,
.suggest-item{
  display:block;
  padding:16px 18px;
  border:1px solid rgba(31,72,110,.10);
  border-radius:18px;
  background:rgba(255,255,255,.84);
}

.result-item strong,
.suggest-item strong{
  display:block;
  color:var(--text);
}

.result-item span,
.suggest-item span{
  display:block;
  color:var(--muted);
  margin-top:4px;
}

.search-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:72px 16px 24px;
  background:rgba(3,8,14,.72);
  backdrop-filter:blur(14px);
}

.search-modal.is-open{display:flex}

.search-modal-panel{
  width:min(100%, 980px);
  max-height:calc(100vh - 96px);
  overflow:auto;
  padding:22px;
  border-radius:28px;
}

.search-modal-top{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.search-close{
  min-height:56px;
  min-width:56px;
  border-radius:18px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.72);
  color:var(--text);
  cursor:pointer;
}

.kbd{
  display:inline-block;
  border:1px solid rgba(31,72,110,.10);
  border-radius:10px;
  padding:2px 8px;
  font-size:.9rem;
  color:var(--muted);
  background:rgba(255,255,255,.72);
}

/* ===== utility ===== */

.list-clean{
  list-style:none;
  padding:0;
  margin:0;
}
.list-clean li + li{margin-top:10px}

.breadcrumbs,
.breadcrumb-bar{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 16px;
}
.breadcrumbs a,
.breadcrumb-bar a{
  color:var(--muted);
}

.callout{
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.72);
  border-radius:20px;
  padding:18px;
  margin:20px 0;
}

.small{font-size:.95rem}

/* ===== footer ===== */

.footer,
footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding:28px 0 60px;
  color:var(--muted);
  margin-top:42px;
}

.footer-columns{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:18px;
}

.footer-columns h3{font-size:1.14rem;color:#1f425f}
.footer-columns p,
.footer-columns li{color:var(--muted)}
.footer-columns ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-columns li + li{margin-top:8px}

.site-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:10px;
}
.site-footer-links a{color:var(--muted)}

.site-footer-cats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

/* ===== mobile top search ===== */

.mobile-top-search{
  display:none;
}

/* ===== FINAL HARD FIX FOR HUB LINKS ===== */

main > .panel,
main > section.panel{
  width:min(calc(100% - 32px), var(--max));
  margin:28px auto 0 auto;
}

.hub-links,
.link-grid,
.premium-links{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

.hub-links li,
.link-grid li,
.premium-links li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 250px !important;
  width:250px !important;
  max-width:250px !important;
  min-width:250px !important;
}

.hub-links a,
.link-grid a,
.premium-links a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
  min-height:56px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(31,72,110,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
  color:#17324a !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-weight:600 !important;
  position:relative !important;
  overflow:hidden !important;
}

.hub-links a::before,
.link-grid a::before,
.premium-links a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(87,231,255,.07) 26%, rgba(157,125,255,.06) 54%, transparent 72%);
  pointer-events:none;
}

.hub-links a:hover,
.link-grid a:hover,
.premium-links a:hover{
  color:#ffffff !important;
  transform:translateY(-2px);
  border-color:rgba(143,214,255,.36) !important;
  background:linear-gradient(180deg, rgba(83,229,255,.10), rgba(155,124,255,.07)) !important;
}

/* ===== responsive ===== */

@media (max-width:1040px){
  .category-card,.kpi,.topic-card{grid-column:span 6}
  .article-shell{grid-template-columns:1fr}
  .sidebar{position:static}
}

@media (max-width:900px){
  .feature-grid,
  .portal-grid,
  .footer-columns,
  .visual-grid,
  .cards-3{
    grid-template-columns:1fr;
  }
}

@media (max-width:980px){
  .site-nav{display:none}
  .site-menu-toggle{display:inline-flex}
}

@media (max-width:820px){
  /* header should scroll away on mobile */
  .site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,72,110,.08);
  box-shadow:0 10px 28px rgba(42,79,112,.08);
}

  .site-header-inner{
    width:min(calc(100% - 18px), var(--max));
    min-height:46px;
    padding:6px 0;
    gap:10px;
  }

  .site-brand{gap:8px}
  .site-brand-mark{
    width:26px;
    height:26px;
  }

  .site-brand-text{
  font-size:.93rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:#17324a;
}

  .site-menu-toggle{
    width:34px;
    height:34px;
  }

  .site-menu-toggle span{
    width:14px;
  }

  /* only search bar sticks */
  .mobile-top-search{
  display:none;
}

  .mobile-top-search .wrap{
    padding:8px 0;
  }

  .mobile-top-search .searchbox{
    margin:0;
    gap:8px;
    align-items:center;
  }

  .mobile-top-search input{
    flex:1 1 auto;
    min-height:46px;
    border-radius:14px;
  }

  .mobile-top-search button{
    min-height:46px;
    padding:0 12px;
    border-radius:14px;
    white-space:nowrap;
  }

  .mobile-top-search .search-suggestions,
  .mobile-top-search .search-results{
    margin-top:8px;
  }

  .hero .searchbox,
  .hero #searchSuggestions,
  .hero #searchResults{
    display:none !important;
  }

  .hub-links li,
  .link-grid li,
  .premium-links li{
    flex:0 0 calc(50% - 6px) !important;
    width:calc(50% - 6px) !important;
    max-width:calc(50% - 6px) !important;
    min-width:calc(50% - 6px) !important;
  }

  .hub-links a,
  .link-grid a,
  .premium-links a{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
}

@media (max-width:720px){
  .hero-card,.article-main,.sidebar,.card,.panel,.feature-card,.portal-card,.visual-card{
    padding:20px;
  }

  .category-card,.kpi,.topic-card{
    grid-column:span 12;
  }

  .hub-links li,
  .link-grid li,
  .premium-links li{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .hub-links a,
  .link-grid a,
  .premium-links a{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .search-modal{
    padding-top:56px;
  }

  .search-modal-panel{
    padding:16px;
  }
}

@media (prefers-reduced-motion:no-preference){
  .hero-card,
  .card,
  .panel,
  .feature-card,
  .portal-card,
  .visual-card,
  .hub-links a,
  .site-nav-link,
  .btn{
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease,
      color .22s ease;
  }
}



/* =========================================================
   Mobile consistency pass for topic + guide pages
   ========================================================= */

@media (max-width: 820px){
  main,
  main.container{
    width:min(calc(100% - 18px), 1200px);
    margin:0 auto;
  }

  .hero{
    padding:18px 0 22px;
  }

  .hero-card,
  .panel,
  .card,
  .article-main,
  .sidebar,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel{
    border-radius:18px;
  }

  .article{
    padding:18px 0 36px;
  }

  .article-main,
  .sidebar{
    padding:18px;
  }

  .article-main h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}

  h1{
  font-size:clamp(2.3rem, 5vw, 4.8rem);
  background:linear-gradient(90deg,#17324a 0%,#35607e 35%,#5d6fd8 72%,#17324a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

  h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}

  h3{font-size:1.14rem;color:#1f425f}

  .feature-grid,
  .portal-grid,
  .cards-3,
  .visual-grid{
    gap:14px;
  }

  .feature-card,
  .portal-card,
  .visual-card{
    padding:16px;
  }

  .badges,
  .topic-tags,
  .quick-links{
    gap:8px;
  }

  .badge,
  .topic-tags a,
  .quick-links a,
  .site-footer-cats a{
    padding:7px 10px;
    font-size:.86rem;
  }

  .result-item,
.suggest-item{
  display:block;
  padding:16px 18px;
  border:1px solid rgba(31,72,110,.10);
  border-radius:18px;
  background:rgba(255,255,255,.84);
}

  .breadcrumbs,
  .breadcrumb-bar{
    margin-bottom:12px;
    font-size:.9rem;
  }
}



/* =========================================================
   Search / discovery polish
   ========================================================= */

.result-category{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.smart-related-reading .feature-card p,
.search-panel .feature-card p{
  margin-bottom:0;
}

.quick-links a{
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.quick-links a:hover{
  transform:translateY(-1px);
}

.search-panel h2 + p,
.panel h2 + p{
  max-width:900px;
}

@media (max-width: 720px){
  .result-category{
    font-size:.74rem;
    padding:4px 8px;
  }
}



/* ===== Mobile scroll hotfix ===== */
@media (max-width: 980px){
  html,
  body{
  background:
    radial-gradient(circle at 10% 0%, rgba(99,205,232,.16), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(141,136,247,.10), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(232,169,211,.08), transparent 24%),
    linear-gradient(180deg, #f4f7fb 0%, #eef4fa 38%, #eaf1f8 100%);
  color:var(--text);
  font:16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

  .mobile-drawer{
    display:none;
    pointer-events:none !important;
    visibility:hidden;
  }

  .mobile-drawer.open{
    display:block;
    pointer-events:auto !important;
    visibility:visible;
  }

  .site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,72,110,.08);
  box-shadow:0 10px 28px rgba(42,79,112,.08);
}

  .mobile-top-search{
  display:none;
}

  main,
  .wrap,
  .hero,
  .section,
  .panel,
  .card{
    overflow:visible !important;
  }
}

/* =========================================================
   Premium visual pop pass
   Safe override layer
   ========================================================= */

:root{
  --glow-cyan-strong:0 0 0 1px rgba(87,231,255,.10), 0 24px 70px rgba(87,231,255,.12);
  --glow-violet-strong:0 0 0 1px rgba(157,125,255,.09), 0 24px 70px rgba(157,125,255,.14);
  --glow-mix-strong:
    0 26px 80px rgba(47,128,237,.18),
    0 18px 60px rgba(157,125,255,.12),
    0 10px 30px rgba(87,231,255,.10);

  --shadow-card-deep:
    0 24px 70px rgba(0,0,0,.34),
    0 8px 24px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05);

  --shadow-card-hover:
    0 34px 95px rgba(0,0,0,.42),
    0 12px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(135,205,255,.08) inset;

  --hero-glow:
    0 34px 110px rgba(47,128,237,.16),
    0 20px 75px rgba(157,125,255,.14),
    0 12px 45px rgba(87,231,255,.10);
}

/* richer page atmosphere */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 8% 8%, rgba(87,231,255,.06), transparent 18%),
    radial-gradient(circle at 92% 10%, rgba(157,125,255,.08), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255,210,122,.04), transparent 26%);
}

body > *{
  position:relative;
  z-index:1;
}

/* stronger section separation */
.section{
  position:relative;
}

.section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 18%, rgba(135,205,255,.08) 50%, rgba(255,255,255,.03) 82%, transparent 100%);
  pointer-events:none;
  opacity:.55;
}

/* premium header polish */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,72,110,.08);
  box-shadow:0 10px 28px rgba(42,79,112,.08);
}

.site-brand-mark{
  filter:
    drop-shadow(0 8px 20px rgba(87,231,255,.18))
    drop-shadow(0 4px 12px rgba(157,125,255,.10));
}

.site-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.08);
  background:rgba(255,255,255,.60);
  color:#35516b;
  font-size:.84rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.site-nav-link:hover,
.site-nav-link.active{
  color:#17324a;
  border-color:rgba(79,143,247,.24);
  background:linear-gradient(180deg, rgba(99,205,232,.14), rgba(141,136,247,.10));
  transform:translateY(-1px);
}

/* stronger hero */
.hero{
  padding-top:82px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:42px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,205,232,.16), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(141,136,247,.12), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(232,169,211,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:var(--shadow), 0 18px 60px rgba(79,143,247,.10);
}

.hero-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 18%, transparent 82%, rgba(255,255,255,.06));
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  padding:1px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
}

.eyebrow{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.10);
}

/* buttons with more premium glow */
.btn,
.search-launch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.70);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}

.btn-primary{
  background:linear-gradient(135deg,#4f8ff7 0%,#63cde8 48%,#8d88f7 100%);
  border-color:transparent;
  box-shadow:var(--glow);
  color:#ffffff;
}

.btn-primary:hover{
  box-shadow:
    0 28px 70px rgba(47,128,237,.28),
    0 14px 36px rgba(157,125,255,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* stronger cards */
.hero-card,
.panel,
.card,
.article-main,
.sidebar,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.search-modal-panel,
.hub-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid rgba(31,72,110,.10);
  border-radius:24px;
  box-shadow:
    0 18px 55px rgba(42,79,112,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
}

.card,
.panel,
.feature-card,
.portal-card,
.visual-card{
  position:relative;
  overflow:hidden;
}

.card::before,
.panel::before,
.feature-card::before,
.portal-card::before,
.visual-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 20%, transparent 80%, rgba(255,255,255,.025));
  opacity:.75;
}

.card:hover,
.panel:hover,
.feature-card:hover,
.portal-card:hover,
.visual-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card-hover);
  border-color:rgba(145,215,255,.16);
}

/* make homepage topic cards and category cards feel more premium */
.topic-card,
.category-card,
.kpi{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
}

.topic-card h3 a,
.category-card h3 a,
.feature-card h3 a,
.portal-card h3 a{
  color:#f2f8ff;
}

.topic-card:hover h3 a,
.category-card:hover h3 a,
.feature-card:hover h3 a,
.portal-card:hover h3 a{
  color:#fffffffff;
}

/* richer badges and chips */
.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.08);
}

.quick-links a:hover,
.topic-tags a:hover,
.site-footer-cats a:hover{
  transform:translateY(-1px);
  border-color:rgba(135,205,255,.22);
  background:
    linear-gradient(180deg, rgba(87,231,255,.08), rgba(157,125,255,.06));
}

/* stronger hub cards */
.hub-links a,
.link-grid a,
.premium-links a{
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    0 4px 14px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.hub-links a:hover,
.link-grid a:hover,
.premium-links a:hover{
  box-shadow:
    0 24px 46px rgba(0,0,0,.28),
    0 10px 24px rgba(47,128,237,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* search UI feels more premium */
.search-input-wrap input,
.searchbox input,
.mobile-top-search input,
.search-modal-top input{
  width:100%;
  min-height:54px;
  border-radius:18px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.86);
  color:var(--text);
  padding:0 16px;
}

.search-input-wrap input:focus,
.searchbox input:focus,
.mobile-top-search input:focus,
.search-modal-top input:focus{
  outline:none;
  border-color:rgba(135,205,255,.34);
  box-shadow:
    0 0 0 4px rgba(87,231,255,.08),
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* footer with more finish */
.footer,
footer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* visual cards and images */
.visual-card img{
  box-shadow:
    0 20px 42px rgba(0,0,0,.26),
    0 6px 18px rgba(0,0,0,.14);
}

/* homepage feature grids feel deeper */
.feature-card,
.portal-card{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.045), transparent 22%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

/* subtle glow on section headings */
h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}

/* better mobile without breaking your fixes */
@media (max-width: 820px){
  .hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:42px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,205,232,.16), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(141,136,247,.12), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(232,169,211,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:var(--shadow), 0 18px 60px rgba(79,143,247,.10);
}

  .card:hover,
  .panel:hover,
  .feature-card:hover,
  .portal-card:hover,
  .visual-card:hover{
    transform:none;
  }

  .site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,72,110,.08);
  box-shadow:0 10px 28px rgba(42,79,112,.08);
}
}

/* subtle premium motion */
@media (prefers-reduced-motion:no-preference){
  .hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:42px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,205,232,.16), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(141,136,247,.12), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(232,169,211,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:var(--shadow), 0 18px 60px rgba(79,143,247,.10);
}

  @keyframes heroFloatGlow{
    0%{
      box-shadow:
        0 28px 90px rgba(47,128,237,.14),
        0 14px 40px rgba(157,125,255,.10),
        0 8px 24px rgba(0,0,0,.20);
    }
    100%{
      box-shadow:
        0 34px 105px rgba(47,128,237,.18),
        0 18px 52px rgba(157,125,255,.14),
        0 8px 24px rgba(0,0,0,.20);
    }
  }
}


/* =========================================================
   Extra premium 3D micro-polish
   ========================================================= */

.site-nav-link,
.btn,
.search-launch,
.badge,
.quick-links a,
.topic-tags a,
.site-footer-cats a{
  transform:translateZ(0);
}

.site-nav-link:hover,
.btn:hover,
.search-launch:hover{
  box-shadow:
    0 12px 24px rgba(0,0,0,.16),
    0 0 0 1px rgba(135,205,255,.08) inset;
}

.topic-card,
.category-card,
.feature-card,
.portal-card{
  transform-style:preserve-3d;
}

.topic-card:hover,
.category-card:hover,
.feature-card:hover,
.portal-card:hover{
  transform:translateY(-4px) scale(1.01);
}

.hero-card img{
  filter:
    drop-shadow(0 16px 32px rgba(0,0,0,.18))
    drop-shadow(0 6px 16px rgba(87,231,255,.08));
}


/* =========================================================
   Homepage visual escalation pass
   ========================================================= */

/* stronger card top accents */
.panel,
.card,
.feature-card,
.portal-card,
.visual-card,
.topic-card,
.category-card{
  position:relative;
}

.panel::after,
.card::after,
.feature-card::after,
.portal-card::after,
.visual-card::after,
.topic-card::after,
.category-card::after{
  content:"";
  position:absolute;
  top:0;
  left:14px;
  right:14px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(87,231,255,.34) 20%, rgba(157,125,255,.32) 50%, rgba(255,210,122,.24) 78%, transparent 100%);
  pointer-events:none;
  opacity:.95;
}

/* richer homepage category cards */
.category-card{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

.category-card:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(143,214,255,.22);
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 12px 34px rgba(47,128,237,.10),
    0 0 0 1px rgba(135,205,255,.08) inset;
}

.category-card h3{font-size:1.14rem;color:#1f425f}

/* icon accents */
.cluster-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(87,231,255,.12), rgba(157,125,255,.10));
  color:#f8fbff;
  font-size:1rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
  flex:0 0 auto;
}

/* cinematic hero visuals */
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:42px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,205,232,.16), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(141,136,247,.12), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(232,169,211,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:var(--shadow), 0 18px 60px rgba(79,143,247,.10);
}

.hero-visual-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(8px);
  pointer-events:none;
  z-index:1;
}

.hero-orb-1{
  width:220px;
  height:220px;
  top:-70px;
  right:40px;
  background:radial-gradient(circle, rgba(87,231,255,.20) 0%, rgba(87,231,255,.08) 35%, transparent 72%);
}

.hero-orb-2{
  width:260px;
  height:260px;
  bottom:-110px;
  right:-20px;
  background:radial-gradient(circle, rgba(157,125,255,.18) 0%, rgba(255,121,214,.09) 38%, transparent 72%);
}

.hero-grid-glow{
  position:absolute;
  inset:auto 0 0 auto;
  right:24px;
  bottom:18px;
  width:280px;
  height:180px;
  border-radius:22px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(87,231,255,.12), transparent 65%);
  background-size:24px 24px, 24px 24px, auto;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.95), transparent 88%);
  -webkit-mask-image:linear-gradient(180deg, rgba(255,255,255,.95), transparent 88%);
  opacity:.7;
  pointer-events:none;
  z-index:1;
}

/* mini trust row */
.hero-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
  position:relative;
  z-index:2;
}

.mini-stat{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:
    0 12px 26px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.mini-stat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(87,231,255,.16), rgba(157,125,255,.14));
  border:1px solid rgba(31,72,110,.10);
  flex:0 0 auto;
}

.mini-stat strong{
  display:block;
  font-size:.95rem;
  color:#17324a;
}

.mini-stat span:last-child{
  display:block;
  font-size:.86rem;
  color:var(--muted);
  margin-top:2px;
}

/* visual explainer cards */
.visual-teaser-card{
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.036));
}

.visual-teaser-art{
  height:180px;
  border-radius:18px;
  margin-bottom:14px;
  border:1px solid rgba(31,72,110,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 36px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}

.visual-teaser-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 26%, transparent 74%, rgba(255,255,255,.04));
}

.visual-teaser-ai{
  background:
    radial-gradient(circle at 24% 30%, rgba(87,231,255,.26), transparent 20%),
    radial-gradient(circle at 72% 35%, rgba(157,125,255,.22), transparent 22%),
    linear-gradient(180deg, rgba(14,22,40,.95), rgba(10,16,28,.98));
}

.visual-teaser-security{
  background:
    radial-gradient(circle at 24% 30%, rgba(255,121,214,.18), transparent 18%),
    radial-gradient(circle at 70% 55%, rgba(87,231,255,.20), transparent 20%),
    linear-gradient(180deg, rgba(14,22,40,.95), rgba(10,16,28,.98));
}

.visual-teaser-cloud{
  background:
    radial-gradient(circle at 30% 35%, rgba(87,231,255,.22), transparent 20%),
    radial-gradient(circle at 68% 28%, rgba(255,210,122,.14), transparent 18%),
    linear-gradient(180deg, rgba(14,22,40,.95), rgba(10,16,28,.98));
}

.visual-teaser-network{
  background:
    radial-gradient(circle at 20% 70%, rgba(87,231,255,.18), transparent 18%),
    radial-gradient(circle at 75% 28%, rgba(157,125,255,.22), transparent 20%),
    linear-gradient(180deg, rgba(14,22,40,.95), rgba(10,16,28,.98));
}

/* stronger topic cards */
.topic-card{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
}

.topic-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:
    0 30px 82px rgba(0,0,0,.32),
    0 10px 28px rgba(47,128,237,.10),
    0 0 0 1px rgba(135,205,255,.08) inset;
}

/* premium hover polish for feature / portal cards */
.feature-card:hover,
.portal-card:hover,
.visual-card:hover{
  transform:translateY(-4px) scale(1.01);
}

/* homepage only spacing refinements */
.hero-actions{
  position:relative;
  z-index:2;
}

.badges{
  position:relative;
  z-index:2;
}

@media (max-width: 980px){
  .hero-mini-stats{
    grid-template-columns:1fr;
  }

  .hero-grid-glow{
    width:180px;
    height:120px;
    right:10px;
    bottom:12px;
    opacity:.48;
  }

  .hero-orb-1{
    width:150px;
    height:150px;
    top:-40px;
    right:20px;
  }

  .hero-orb-2{
    width:180px;
    height:180px;
    bottom:-70px;
    right:-20px;
  }
}

@media (max-width: 720px){
  .cluster-icon{
    width:30px;
    height:30px;
    font-size:.92rem;
    border-radius:10px;
  }

  .visual-teaser-art{
    height:140px;
  }

  .mini-stat{
    padding:12px;
    border-radius:16px;
  }
}


/* =========================================================
   Premium SVG + thematic homepage escalation
   ========================================================= */

/* animated gradient border treatment */
.hero-card,
.search-panel,
.search-modal-panel,
.panel{
  position:relative;
}

.hero-card::after,
.search-panel::after,
.search-modal-panel::after,
.panel::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg, rgba(87,231,255,.42), rgba(105,184,255,.20), rgba(157,125,255,.34), rgba(255,210,122,.20), rgba(87,231,255,.42));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
  opacity:.55;
}

@media (prefers-reduced-motion:no-preference){
  .hero-card::after,
  .search-panel::after,
  .search-modal-panel::after,
  .panel::after{
    animation:borderFlow 9s linear infinite;
  }

  @keyframes borderFlow{
    0%{background-position:0% 50%}
    100%{background-position:220% 50%}
  }
}

/* SVG cluster icons */
.cluster-icon{
  display:none !important;
}

.cluster-icon-img{
  width:34px;
  height:34px;
  flex:0 0 auto;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.14))
    drop-shadow(0 6px 16px rgba(87,231,255,.08));
}

/* subtle per-category theme accents */
.category-card[data-theme="ai"],
.category-card:has(a[href="/ai/"]){
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.09), transparent 22%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

.category-card[data-theme="cybersecurity"],
.category-card:has(a[href="/cybersecurity/"]){
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.07), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255,121,214,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

.category-card[data-theme="cloud"],
.category-card:has(a[href="/cloud/"]){
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.09), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255,210,122,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

.category-card[data-theme="devices"],
.category-card:has(a[href="/devices/"]){
  background:
    radial-gradient(circle at top left, rgba(255,210,122,.08), transparent 22%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

.category-card[data-theme="privacy"],
.category-card:has(a[href="/privacy/"]){
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.07), transparent 22%),
    radial-gradient(circle at bottom right, rgba(105,240,202,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}

/* richer category hover */
.category-card:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:
    0 38px 100px rgba(0,0,0,.38),
    0 14px 38px rgba(47,128,237,.12),
    0 0 0 1px rgba(135,205,255,.08) inset;
}

/* real explainer thumbnails */
.visual-teaser-card{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.05), transparent 22%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.036));
}

.visual-teaser-thumb{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  margin-bottom:14px;
  border:1px solid rgba(31,72,110,.10);
  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    0 8px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
}

.visual-teaser-card:hover .visual-teaser-thumb{
  transform:translateY(-2px) scale(1.008);
}

/* premium footer */
.premium-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 22%),
    radial-gradient(circle at top right, rgba(157,125,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.premium-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(87,231,255,.28) 22%, rgba(157,125,255,.24) 56%, rgba(255,210,122,.20) 78%, transparent 100%);
  pointer-events:none;
}

.premium-footer-columns{
  position:relative;
  z-index:1;
  margin-bottom:24px;
  padding-bottom:10px;
}

.footer-col h3{font-size:1.14rem;color:#1f425f}

.premium-footer-list li + li{
  margin-top:10px;
}

.premium-footer-list a{
  color:#35516b;
}

.premium-footer-list a:hover{
  color:#ffffff;
}

.premium-footer-bottom{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:18px;
}

/* drawer hub icons */
.drawer-link.has-icon{
  display:flex;
  align-items:center;
  gap:10px;
}

.drawer-link-icon-img{
  width:22px;
  height:22px;
  flex:0 0 auto;
  opacity:.95;
}

/* polish hover for explainer and category assets */
@media (prefers-reduced-motion:no-preference){
  .visual-teaser-thumb,
  .cluster-icon-img{
    transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
  }

  .category-card:hover .cluster-icon-img{
    transform:translateY(-1px) scale(1.06);
    filter:
      drop-shadow(0 12px 24px rgba(0,0,0,.18))
      drop-shadow(0 8px 18px rgba(87,231,255,.12));
  }
}

@media (max-width: 720px){
  .cluster-icon-img{
    width:30px;
    height:30px;
  }

  .visual-teaser-thumb{
    border-radius:16px;
  }
}


/* =========================================================
   Premium network section + footer network polish
   ========================================================= */

.network-panel{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.07), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
}

.network-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:18px;
}

.network-card{
  position:relative;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.network-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 22%, transparent 78%, rgba(255,255,255,.03));
}

.network-card:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(143,214,255,.20);
  box-shadow:
    0 28px 60px rgba(0,0,0,.26),
    0 10px 22px rgba(47,128,237,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.network-card h3{font-size:1.14rem;color:#1f425f}

.network-card h3 a{
  color:#f3f8ff;
}

.network-card h3 a:hover{
  color:#fffffffff;
}

.network-card p{
  margin:0;
  color:var(--muted);
}

.network-mini-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:14px;
}

.network-mini-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#35516b;
  font-size:.84rem;
  font-weight:600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.08);
}

.network-mini-links a:hover{
  transform:translateY(-1px);
  border-color:rgba(135,205,255,.20);
  background:
    linear-gradient(180deg, rgba(87,231,255,.08), rgba(157,125,255,.06));
  color:#ffffff;
}

.premium-footer-columns{
  grid-template-columns:1.15fr 1fr 1fr 1fr;
}

/* fix cluster heading alignment after icon markup cleanup */
.category-card h3{font-size:1.14rem;color:#1f425f}

.category-card h3 a{
  flex:1 1 auto;
}

@media (max-width: 1100px){
  .network-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .premium-footer-columns{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .network-grid{
    grid-template-columns:1fr;
  }

  .premium-footer-columns{
    grid-template-columns:1fr;
  }

  .network-card{
    padding:16px;
    border-radius:18px;
  }
}


/* =========================================================
   Premium network card escalation
   ========================================================= */

.network-card{
  overflow:hidden;
}

.network-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.network-card-mark{
  width:42px;
  height:42px;
  flex:0 0 auto;
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.16))
    drop-shadow(0 6px 14px rgba(87,231,255,.10));
}

.network-card-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#35516b;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}

.network-card::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(87,231,255,.55), rgba(157,125,255,.42), rgba(255,210,122,.28));
  opacity:.9;
  pointer-events:none;
}

.network-card-cme{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}

.network-card-iph{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.07), transparent 24%),
    radial-gradient(circle at bottom right, rgba(105,184,255,.06), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}

.network-card-fqh{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.05), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,210,122,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}

.network-card-bapg{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}

.network-card-ch{
  background:
    radial-gradient(circle at top left, rgba(157,125,255,.08), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,121,214,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}

.network-card h3 a[target="_blank"]::after,
.premium-footer-list a[target="_blank"]::after,
.network-mini-links a[target="_blank"]::after{
  content:" ↗";
  opacity:.72;
  font-size:.92em;
}

.premium-footer{
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.07), transparent 22%),
    radial-gradient(circle at top right, rgba(157,125,255,.09), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.premium-footer-columns .footer-col{
  position:relative;
}

.premium-footer-columns .footer-col::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, rgba(87,231,255,.18), rgba(157,125,255,.10), transparent);
  opacity:.7;
}

@media (max-width: 720px){
  .network-card-mark{
    width:38px;
    height:38px;
  }

  .network-card-kicker{
    font-size:.72rem;
  }
}


/* =========================================================
   Premium desktop hero rail + BenTreder credit
   ========================================================= */

.hero-split{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) 360px;
  gap:22px;
  align-items:start;
}

.hero-card-main{
  min-width:0;
}

.hero-rail{
  position:relative;
}

.hero-rail-card{
  position:sticky;
  top:88px;
  padding:22px;
  border-radius:28px;
  border:1px solid rgba(31,72,110,.10);
  background:
    radial-gradient(circle at top left, rgba(87,231,255,.07), transparent 22%),
    radial-gradient(circle at bottom right, rgba(157,125,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
  box-shadow:
    0 22px 60px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

.hero-rail-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%, transparent 78%, rgba(255,255,255,.03));
}

.hero-rail-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#35516b;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.hero-rail-card h2{font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#17324a}

.hero-rail-search{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.hero-rail-search input{
  flex:1 1 220px;
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(31,72,110,.10);
  background:rgba(255,255,255,.72);
  color:var(--text);
  padding:0 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.10);
}

.hero-rail-links{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.hero-rail-links a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(31,72,110,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#17324a;
  font-weight:600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 20px rgba(0,0,0,.10);
}

.hero-rail-links a:hover{
  transform:translateY(-1px);
  border-color:rgba(143,214,255,.24);
  background:
    linear-gradient(180deg, rgba(87,231,255,.08), rgba(157,125,255,.06));
  color:#ffffff;
}

.premium-footer-bottom a[href*="bentreder.com"]{
  color:#f2f8ff;
  font-weight:700;
}

.premium-footer-bottom a[href*="bentreder.com"]:hover{
  color:#fffffffff;
}

@media (max-width: 1180px){
  .hero-split{
    grid-template-columns:1fr 320px;
  }
}

@media (max-width: 980px){
  .hero-split{
    grid-template-columns:1fr;
  }

  .hero-rail{
    display:none;
  }
}


/* =========================================================
   Premium spacing + hero headline tuning
   ========================================================= */

@media (min-width: 981px){
  .hero{
    padding:52px 0 30px;
  }

  .hero-split{
    grid-template-columns:minmax(0, 1.12fr) 340px;
    gap:26px;
    align-items:start;
  }

  .hero-card,
  .hero-card-main{
    padding:34px 36px;
  }

  .hero-card h1{
    font-size:clamp(2.55rem, 4.4vw, 4.2rem) !important;
    line-height:1.08;
    letter-spacing:-.04em;
    max-width:11.5ch;
    margin-bottom:16px;
  }

  .hero-card .lead{
    max-width:62ch;
    font-size:1.05rem;
    line-height:1.72;
    margin-bottom:18px;
  }

  .hero-card .searchbox{
    margin-top:18px;
  }

  .hero-card .hero-actions{
    margin-top:18px;
  }

  .hero-card .badges{
    margin-top:18px;
  }

  .hero-mini-stats{
    margin-top:18px;
  }

  .hero-rail-card{
    padding:20px 20px 18px;
  }

  .hero-rail-card h2{
    font-size:1.22rem;
    line-height:1.2;
    margin-bottom:10px;
  }

  .hero-rail-links{
    gap:9px;
  }

  .hero-rail-links a{
    padding:11px 13px;
    border-radius:14px;
  }

  .section{
    padding:24px 0;
  }

  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel{
    padding:24px;
  }

  .network-card{
    padding:20px;
  }

  .topic-card,
  .category-card,
  .kpi{
    min-height:100%;
  }
}

.panel h2,
.card h2,
.feature-card h3,
.portal-card h3{
  margin-bottom:12px;
}

.panel p,
.card p,
.feature-card p,
.portal-card p{
  line-height:1.72;
}

.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a,
.network-mini-links a{
  padding:9px 13px;
}

.btn,
.search-launch{
  padding:0 18px;
}

.searchbox{
  gap:12px;
}

.searchbox input{
  min-height:56px;
}

.searchbox button{
  min-height:56px;
}

.feature-grid,
.portal-grid,
.visual-grid,
.cards-3{
  gap:20px;
}

.grid{
  gap:20px;
}

@media (max-width: 980px){
  .hero-card,
  .hero-card-main{
    padding:22px 20px;
  }

  .hero-card h1{
    font-size:clamp(2rem, 8.2vw, 3rem) !important;
    line-height:1.1;
    max-width:12ch;
  }

  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel,
  .network-card{
    padding:18px;
  }

  .searchbox{
    gap:10px;
  }

  .badge,
  .topic-tags a,
  .quick-links a,
  .site-footer-cats a,
  .network-mini-links a{
    padding:8px 11px;
  }
}


/* =========================================================
   Premium light-theme contrast + depth pass
   ========================================================= */

:root{
  --text:#10283d;
  --muted:#4e657b;
  --muted2:#667f96;

  --line:rgba(24,58,92,.16);
  --line2:rgba(79,143,247,.22);

  --shadow:0 26px 80px rgba(37,67,97,.12);
  --shadow-soft:0 18px 42px rgba(37,67,97,.10);
  --glow:0 18px 50px rgba(79,143,247,.16);
}

body{
  color:var(--text) !important;
}

p,
li,
.small,
.muted,
.lead,
.card p,
.feature-card p,
.portal-card p,
.footer,
footer,
.result-item span,
.suggest-item span,
.search-panel p,
.panel p{
  color:var(--muted) !important;
}

h1,
h2,
h3,
.site-brand-text,
.hero-card h1,
.hero-card h2,
.hero-card h3,
.panel h2,
.card h3,
.feature-card h3,
.portal-card h3,
.visual-card h3,
.network-card h3,
.footer h3{
  color:var(--text) !important;
}

a{
  color:#265d8f;
}

a:hover{
  color:#17324a;
}

.site-nav-link,
.drawer-link,
.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a,
.network-mini-links a,
.hero-rail-links a,
.result-category,
.kbd{
  color:#234662 !important;
}

.site-nav-link.active,
.site-nav-link:hover,
.drawer-link.active,
.drawer-link:hover{
  color:#10283d !important;
}

.hero-card,
.panel,
.card,
.article-main,
.sidebar,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.search-modal-panel,
.hub-panel,
.hero-rail-card,
.network-card{
  border:1px solid rgba(24,58,92,.14) !important;
  box-shadow:
    0 18px 44px rgba(37,67,97,.10),
    0 6px 18px rgba(37,67,97,.05),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.hero-card:hover,
.panel:hover,
.card:hover,
.feature-card:hover,
.portal-card:hover,
.visual-card:hover,
.network-card:hover{
  box-shadow:
    0 24px 56px rgba(37,67,97,.14),
    0 10px 24px rgba(37,67,97,.07),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.result-item,
.suggest-item,
.search-close,
.searchbox input,
.mobile-top-search input,
.search-modal-top input,
.hero-rail-search input{
  border:1px solid rgba(24,58,92,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 18px rgba(37,67,97,.06) !important;
  color:var(--text) !important;
}

.searchbox input::placeholder,
.mobile-top-search input::placeholder,
.search-modal-top input::placeholder,
.hero-rail-search input::placeholder{
  color:#6d8398 !important;
}

.btn,
.search-launch{
  border:1px solid rgba(24,58,92,.14) !important;
  background:rgba(255,255,255,.82) !important;
  color:#17324a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 22px rgba(37,67,97,.08) !important;
}

.btn:hover,
.search-launch:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 14px 28px rgba(37,67,97,.10) !important;
}

.btn-primary{
  background:linear-gradient(135deg,#4f8ff7 0%,#63cde8 45%,#8d88f7 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:
    0 14px 34px rgba(79,143,247,.22),
    0 8px 20px rgba(99,205,232,.12) !important;
}

.eyebrow,
.result-category,
.hero-rail-kicker,
.network-card-kicker{
  border:1px solid rgba(24,58,92,.12) !important;
  background:rgba(255,255,255,.70) !important;
  color:#36546d !important;
}

.badge{
  color:#486176 !important;
}

.cluster-icon-img,
.network-card-mark,
.drawer-link-icon-img{
  filter:
    drop-shadow(0 8px 16px rgba(37,67,97,.10))
    drop-shadow(0 4px 10px rgba(79,143,247,.08)) !important;
}

.footer,
footer{
  color:var(--muted) !important;
  border-top:1px solid rgba(24,58,92,.12) !important;
}

.premium-footer{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 -8px 24px rgba(37,67,97,.04) !important;
}

.hub-links a,
.link-grid a,
.premium-links a{
  border:1px solid rgba(24,58,92,.14) !important;
  color:#17324a !important;
  box-shadow:
    0 10px 22px rgba(37,67,97,.08),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.hub-links a:hover,
.link-grid a:hover,
.premium-links a:hover{
  color:#10283d !important;
  border-color:rgba(79,143,247,.24) !important;
  box-shadow:
    0 14px 30px rgba(37,67,97,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.site-header{
  box-shadow:
    0 10px 26px rgba(37,67,97,.08),
    inset 0 -1px 0 rgba(24,58,92,.06) !important;
}

.hero-grid-glow,
.hero-visual-orb{
  opacity:.75;
}


/* =========================================================
   Warm premium refinement pass
   ========================================================= */

:root{
  --bg:#f7f7f4;
  --bg2:#f2f3ef;
  --bg3:#ecefe9;

  --text:#0f2436;
  --muted:#596f82;
  --muted2:#73889a;

  --line:rgba(24,58,92,.14);
  --line2:rgba(98,125,226,.20);

  --shadow:0 24px 70px rgba(41,66,92,.10);
  --shadow-soft:0 16px 38px rgba(41,66,92,.08);
  --glow:0 18px 46px rgba(98,125,226,.12);
}

body{
  background:
    radial-gradient(circle at 10% 0%, rgba(118,217,199,.12), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(141,136,247,.08), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(232,201,141,.10), transparent 24%),
    linear-gradient(180deg, #f7f7f4 0%, #f2f3ef 40%, #ecefe9 100%) !important;
  color:var(--text) !important;
}

p,
li,
.card p,
.panel p,
.feature-card p,
.portal-card p,
.network-card p,
.result-item span,
.suggest-item span{
  color:#466075 !important;
}

.muted,
.lead,
.small,
.footer,
footer{
  color:var(--muted) !important;
}

h1,
h2,
h3{
  color:var(--text) !important;
}

/* subtle blue-lavender top borders on cards */
.hero-card,
.panel,
.card,
.article-main,
.sidebar,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.search-modal-panel,
.hub-panel,
.hero-rail-card,
.network-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
  border:1px solid rgba(24,58,92,.12) !important;
  box-shadow:
    0 16px 40px rgba(41,66,92,.08),
    0 6px 18px rgba(41,66,92,.04),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

.hero-card::before,
.panel::before,
.card::before,
.article-main::before,
.sidebar::before,
.feature-card::before,
.portal-card::before,
.visual-card::before,
.search-panel::before,
.search-modal-panel::before,
.hub-panel::before,
.hero-rail-card::before,
.network-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(
    90deg,
    rgba(99,205,232,.55),
    rgba(98,125,226,.42),
    rgba(141,136,247,.38),
    rgba(232,201,141,.22)
  ) !important;
  pointer-events:none;
}

/* warmer pills and chips */
.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a,
.network-mini-links a,
.hero-rail-links a,
.result-category,
.kbd{
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(24,58,92,.12) !important;
  color:#28475f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 18px rgba(41,66,92,.05) !important;
}

/* buttons tuned to warmer light theme */
.btn,
.search-launch{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(24,58,92,.12) !important;
  color:#17324a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 22px rgba(41,66,92,.06) !important;
}

.btn-primary{
  background:linear-gradient(135deg,#5f8fdc 0%,#77cdb7 42%,#9a92df 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:
    0 14px 30px rgba(95,143,220,.18),
    0 8px 18px rgba(119,205,183,.10) !important;
}

/* search inputs and panels */
.searchbox input,
.mobile-top-search input,
.search-modal-top input,
.hero-rail-search input,
.result-item,
.suggest-item,
.search-close{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(24,58,92,.12) !important;
  color:var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 18px rgba(41,66,92,.05) !important;
}

.searchbox input::placeholder,
.mobile-top-search input::placeholder,
.search-modal-top input::placeholder,
.hero-rail-search input::placeholder{
  color:#728698 !important;
}

/* links */
a{
  color:#2e618f !important;
}

a:hover{
  color:#17324a !important;
}

/* footer tone */
.premium-footer{
  background:
    radial-gradient(circle at top left, rgba(119,205,183,.08), transparent 22%),
    radial-gradient(circle at top right, rgba(154,146,223,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.22)) !important;
  border-top:1px solid rgba(24,58,92,.10) !important;
}

/* reduce the icy feel of glows */
.hero-grid-glow,
.hero-visual-orb{
  opacity:.56 !important;
}


/* =========================================================
   Final layout comfort + width polish
   ========================================================= */

/* make the site breathe a little more */
.wrap,
.container{
  width:min(calc(100% - 24px), 1280px) !important;
}

/* slightly more comfortable vertical rhythm */
.section{
  padding:26px 0 !important;
}

/* cleaner card rhythm */
.panel,
.card,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.network-card,
.hero-rail-card{
  border-radius:22px !important;
  box-shadow:
    0 14px 32px rgba(41,66,92,.07),
    0 4px 12px rgba(41,66,92,.04),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* keep hero strong but less cramped */
@media (min-width: 981px){
  .hero{
    padding:44px 0 24px !important;
  }

  .hero-split{
    grid-template-columns:minmax(0, 1.18fr) 330px !important;
    gap:24px !important;
  }

  .hero-card,
  .hero-card-main{
    padding:30px 30px 28px !important;
  }

  .hero-card h1{
    font-size:clamp(2.35rem, 4vw, 3.65rem) !important;
    line-height:1.08 !important;
    max-width:12.5ch !important;
    margin-bottom:14px !important;
  }

  .hero-card .lead{
    max-width:64ch !important;
    font-size:1rem !important;
    line-height:1.7 !important;
    margin-bottom:16px !important;
  }

  .hero-card .searchbox{
    margin-top:16px !important;
  }

  .hero-card .hero-actions,
  .hero-card .badges,
  .hero-mini-stats{
    margin-top:16px !important;
  }

  .hero-rail-card{
    padding:18px 18px 16px !important;
    top:82px !important;
  }
}

/* wider-feeling cards on small screens */
@media (max-width: 980px){
  main,
  main.container,
  .wrap,
  .container{
    width:min(calc(100% - 14px), 100%) !important;
  }

  .hero{
    padding:18px 0 18px !important;
  }

  .hero-card,
  .hero-card-main{
    padding:18px 16px !important;
    border-radius:18px !important;
  }

  .hero-card h1{
    font-size:clamp(1.9rem, 7.2vw, 2.7rem) !important;
    line-height:1.08 !important;
    max-width:13ch !important;
    margin-bottom:12px !important;
  }

  .hero-card .lead{
    font-size:.98rem !important;
    line-height:1.65 !important;
  }

  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel,
  .network-card{
    padding:16px !important;
    border-radius:16px !important;
  }

  .feature-grid,
  .portal-grid,
  .visual-grid,
  .cards-3,
  .grid{
    gap:14px !important;
  }

  .searchbox{
    gap:8px !important;
  }

  .searchbox input,
  .searchbox button{
    min-height:48px !important;
  }

  .badge,
  .topic-tags a,
  .quick-links a,
  .site-footer-cats a,
  .network-mini-links a{
    padding:7px 10px !important;
    font-size:.82rem !important;
  }

  .section{
    padding:18px 0 !important;
  }
}

/* slightly more separation between big homepage blocks */
main > .section + .section{
  margin-top:2px;
}

/* visual cards can feel richer without getting loud */
.visual-card img,
.visual-teaser-thumb{
  box-shadow:
    0 16px 34px rgba(41,66,92,.09),
    0 6px 14px rgba(41,66,92,.05) !important;
}

/* footer a bit more comfortable */
.footer,
footer{
  padding:30px 0 56px !important;
}


/* =========================================================
   Spacing + rhythm polish pass
   Tighten vertical flow, improve button/card padding,
   keep desktop + mobile feeling premium and responsive
   ========================================================= */

/* global content rhythm */
.section{
  padding:20px 0 !important;
}

main > .section + .section{
  margin-top:0 !important;
}

.wrap,
.container{
  width:min(calc(100% - 28px), 1280px) !important;
}

/* panel/card spacing */
.panel,
.card,
.feature-card,
.portal-card,
.visual-card,
.search-panel,
.network-card,
.hero-rail-card,
.article-main,
.sidebar{
  padding:20px !important;
}

/* slightly tighter big content blocks */
.article{
  padding:22px 0 42px !important;
}

.article-main h2{
  margin-top:22px !important;
  margin-bottom:10px !important;
}

.article-main p,
.panel p,
.card p,
.feature-card p,
.portal-card p,
.visual-card p{
  line-height:1.62 !important;
  margin:0 0 12px !important;
}

.panel h2,
.card h2{
  margin-bottom:12px !important;
}

.feature-card h3,
.portal-card h3,
.visual-card h3,
.network-card h3{
  margin-bottom:8px !important;
}

/* buttons / chips / small links need better breathing room */
.btn,
.search-launch{
  min-height:44px !important;
  padding:0 16px !important;
}

.badge,
.topic-tags a,
.quick-links a,
.site-footer-cats a,
.network-mini-links a,
.hero-rail-links a,
.result-category,
.kbd,
.hub-links a,
.link-grid a,
.premium-links a{
  padding:10px 14px !important;
  line-height:1.35 !important;
}

/* search controls */
.searchbox{
  gap:10px !important;
  margin-top:18px !important;
}

.searchbox input,
.mobile-top-search input,
.search-modal-top input,
.hero-rail-search input{
  min-height:50px !important;
  padding:0 15px !important;
}

.searchbox button{
  min-height:50px !important;
}

/* result / suggestion cards */
.result-item,
.suggest-item{
  padding:14px 16px !important;
}

.result-item strong,
.suggest-item strong{
  margin-bottom:4px;
}

/* hero sizing and spacing */
.hero{
  padding:34px 0 20px !important;
}

.hero-card{
  padding:26px 26px 24px !important;
}

.hero-card h1{
  margin-bottom:12px !important;
  max-width:13ch !important;
}

.hero-card .lead{
  margin-bottom:14px !important;
}

.hero-actions,
.badges,
.hero-mini-stats{
  margin-top:14px !important;
}

/* homepage and hub grids tighter but still premium */
.grid,
.feature-grid,
.portal-grid,
.visual-grid,
.cards-3{
  gap:16px !important;
}

/* topic hub cards */
.category-card,
.topic-card,
.kpi{
  min-height:100%;
}

/* keep hub link cards from feeling cramped */
.hub-links li,
.link-grid li,
.premium-links li{
  min-width:0 !important;
}

.hub-links a,
.link-grid a,
.premium-links a{
  min-height:48px !important;
  border-radius:16px !important;
}

/* footer tighter */
.footer,
footer{
  padding:24px 0 44px !important;
  margin-top:28px !important;
}

.footer p,
footer p{
  margin:0 0 10px !important;
}

/* desktop tuning */
@media (min-width: 981px){
  .hero-split{
    gap:20px !important;
    grid-template-columns:minmax(0, 1.2fr) 320px !important;
  }

  .hero-rail-card{
    padding:18px !important;
  }

  .hero-rail-links{
    gap:8px !important;
  }

  .hero-rail-links a{
    padding:10px 12px !important;
    border-radius:14px !important;
  }

  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel,
  .network-card{
    padding:22px !important;
  }
}

/* tablet/mobile tuning */
@media (max-width: 980px){
  .wrap,
  .container,
  main,
  main.container{
    width:min(calc(100% - 16px), 100%) !important;
  }

  .section{
    padding:14px 0 !important;
  }

  .hero{
    padding:14px 0 14px !important;
  }

  .hero-card,
  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel,
  .network-card,
  .article-main,
  .sidebar{
    padding:16px !important;
    border-radius:18px !important;
  }

  .hero-card h1{
    max-width:14ch !important;
    line-height:1.1 !important;
  }

  .grid,
  .feature-grid,
  .portal-grid,
  .visual-grid,
  .cards-3{
    gap:12px !important;
  }

  .btn,
  .search-launch{
    min-height:42px !important;
    padding:0 14px !important;
  }

  .badge,
  .topic-tags a,
  .quick-links a,
  .site-footer-cats a,
  .network-mini-links a,
  .hero-rail-links a,
  .hub-links a,
  .link-grid a,
  .premium-links a{
    padding:8px 11px !important;
    font-size:.84rem !important;
  }

  .searchbox{
    gap:8px !important;
  }

  .searchbox input,
  .mobile-top-search input,
  .search-modal-top input,
  .hero-rail-search input{
    min-height:46px !important;
    padding:0 13px !important;
  }

  .searchbox button{
    min-height:46px !important;
  }

  .article{
    padding:14px 0 28px !important;
  }

  .article-main h2{
    margin-top:18px !important;
  }

  .footer,
  footer{
    padding:20px 0 36px !important;
    margin-top:18px !important;
  }
}

/* very small screens */
@media (max-width: 640px){
  .hero-card h1{
    font-size:clamp(1.9rem, 7.4vw, 2.6rem) !important;
  }

  .panel,
  .card,
  .feature-card,
  .portal-card,
  .visual-card,
  .search-panel,
  .network-card,
  .article-main{
    padding:14px !important;
  }

  .hub-links a,
  .link-grid a,
  .premium-links a{
    min-height:44px !important;
  }
}


/* =========================================================
   Mobile drawer polish for the lighter premium theme
   ========================================================= */

.mobile-drawer-backdrop{
  background:rgba(20,34,48,.26) !important;
  backdrop-filter:blur(8px);
}

.mobile-drawer-panel{
  background:
    radial-gradient(circle at top right, rgba(154,146,223,.12), transparent 26%),
    radial-gradient(circle at top left, rgba(119,205,183,.10), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,249,245,.95)) !important;
  border-left:1px solid rgba(24,58,92,.12) !important;
  box-shadow:
    -18px 0 42px rgba(37,67,97,.12),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

.mobile-drawer-top{
  margin-bottom:14px !important;
}

.drawer-heading{
  color:#60768b !important;
  font-size:.78rem !important;
  letter-spacing:.08em !important;
}

.drawer-link{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 13px !important;
  border-radius:14px !important;
  border:1px solid rgba(24,58,92,.10) !important;
  background:rgba(255,255,255,.72) !important;
  color:#17324a !important;
  font-weight:700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 8px 18px rgba(37,67,97,.05) !important;
}

.drawer-link:hover,
.drawer-link.active{
  color:#0f2436 !important;
  border-color:rgba(98,125,226,.22) !important;
  background:linear-gradient(180deg, rgba(119,205,183,.12), rgba(154,146,223,.10)) !important;
  transform:translateY(-1px);
}

.drawer-close{
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  border:1px solid rgba(24,58,92,.10) !important;
  background:rgba(255,255,255,.74) !important;
  color:#17324a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 8px 18px rgba(37,67,97,.05) !important;
}

.drawer-brand .site-brand-text{
  color:#17324a !important;
}

@media (max-width: 980px){
  .mobile-drawer-panel{
    width:min(86vw, 340px) !important;
    padding:16px 14px 20px !important;
  }

  .drawer-links{
    gap:9px !important;
  }
}


/* =========================================================
   Search prominence pass
   Mobile top search + drawer search + larger desktop rail
   ========================================================= */

/* make the sticky mobile search feel more intentional */
.mobile-top-search{
  display:block !important;
  position:sticky;
  top:58px;
  z-index:70;
  background:linear-gradient(180deg, rgba(248,249,245,.98), rgba(244,246,241,.95)) !important;
  border-bottom:1px solid rgba(24,58,92,.08) !important;
  box-shadow:0 8px 18px rgba(37,67,97,.05);
}

.mobile-top-search .wrap{
  padding:10px 0 !important;
}

.mobile-top-search .searchbox{
  margin:0 !important;
  gap:8px !important;
  align-items:center;
}

.mobile-top-search input{
  min-height:50px !important;
  padding:0 14px !important;
  font-size:.98rem !important;
  border-radius:16px !important;
}

.mobile-top-search button{
  min-height:50px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  font-weight:700 !important;
}

/* drawer search */
.drawer-search{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.drawer-search input{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(24,58,92,.12);
  background:rgba(255,255,255,.82);
  color:#17324a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 18px rgba(37,67,97,.05);
}

.drawer-search input::placeholder{
  color:#728698;
}

.drawer-search .btn{
  min-height:46px !important;
  width:100%;
  border-radius:14px !important;
}

/* larger desktop search rail */
@media (min-width: 981px){
  .hero-split{
    grid-template-columns:minmax(0, 1.16fr) 370px !important;
    gap:24px !important;
  }

  .hero-rail{
    align-self:start;
  }

  .hero-rail-card{
    padding:22px !important;
    border-radius:20px !important;
    box-shadow:
      0 18px 42px rgba(37,67,97,.08),
      0 8px 22px rgba(37,67,97,.05),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  .hero-rail-kicker{
    margin-bottom:10px !important;
  }

  .hero-rail-card h2{
    font-size:1.28rem !important;
    line-height:1.2 !important;
    margin-bottom:10px !important;
  }

  .hero-rail-card p{
    margin-bottom:12px !important;
  }

  .hero-rail-search{
    display:grid !important;
    gap:10px !important;
    margin-top:12px !important;
  }

  .hero-rail-search input{
    min-height:52px !important;
    padding:0 15px !important;
    border-radius:16px !important;
    font-size:1rem !important;
  }

  .hero-rail-search .btn{
    min-height:48px !important;
    border-radius:16px !important;
  }

  .hero-rail-links{
    margin-top:12px !important;
    gap:9px !important;
  }
}

/* mobile adjustments */
@media (max-width: 980px){
  .mobile-drawer-panel{
    width:min(88vw, 360px) !important;
  }

  .drawer-search input{
    min-height:46px !important;
    font-size:.96rem !important;
  }

  .drawer-search .btn{
    min-height:44px !important;
  }
}


/* =========================================================
   Desktop hero rebalance pass
   Make homepage hero feel wider, calmer, and more premium
   ========================================================= */

@media (min-width: 1100px){
  .hero{
    padding:42px 0 22px !important;
  }

  .wrap,
  .container{
    width:min(calc(100% - 34px), 1320px) !important;
  }

  .hero-split{
    grid-template-columns:minmax(0, 1.34fr) 300px !important;
    gap:26px !important;
    align-items:start !important;
  }

  .hero-card,
  .hero-card-main{
    padding:34px 34px 28px !important;
    min-height:unset !important;
  }

  .hero-card h1{
    font-size:clamp(2.7rem, 4.2vw, 4.1rem) !important;
    line-height:1.04 !important;
    max-width:15ch !important;
    margin-bottom:14px !important;
    letter-spacing:-.045em !important;
  }

  .hero-card .lead{
    max-width:64ch !important;
    font-size:1.02rem !important;
    line-height:1.68 !important;
    margin-bottom:16px !important;
  }

  .hero-card .searchbox{
    max-width:760px !important;
    margin-top:16px !important;
  }

  .hero-card .searchbox input{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  .hero-actions,
  .badges,
  .hero-mini-stats{
    margin-top:16px !important;
  }

  .hero-rail{
    align-self:start !important;
  }

  .hero-rail-card{
    padding:18px 18px 16px !important;
    border-radius:18px !important;
    position:sticky;
    top:82px;
  }

  .hero-rail-kicker{
    margin-bottom:8px !important;
  }

  .hero-rail-card h2{
    font-size:1.12rem !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }

  .hero-rail-card p{
    font-size:.95rem !important;
    line-height:1.55 !important;
    margin-bottom:10px !important;
  }

  .hero-rail-search{
    gap:8px !important;
    margin-top:10px !important;
  }

  .hero-rail-search input{
    min-height:48px !important;
    border-radius:14px !important;
    font-size:.96rem !important;
  }

  .hero-rail-search .btn{
    min-height:44px !important;
    border-radius:14px !important;
  }

  .hero-rail-links{
    gap:8px !important;
    margin-top:10px !important;
  }

  .hero-rail-links a{
    padding:9px 11px !important;
    border-radius:13px !important;
    font-size:.84rem !important;
  }
}

/* extra-wide desktop balance */
@media (min-width: 1360px){
  .hero-split{
    grid-template-columns:minmax(0, 1.42fr) 310px !important;
  }

  .hero-card h1{
    max-width:16ch !important;
  }
}


/* =========================================================
   Desktop width + breakpoint refinement
   Let content breathe more and drop hero rail sooner
   ========================================================= */

@media (min-width: 981px){
  .wrap,
  .container{
    width:min(calc(100% - 40px), 1440px) !important;
  }

  .section{
    padding:18px 0 !important;
  }
}

/* medium desktop / small laptop:
   stop forcing the narrow two-column hero */
@media (min-width: 981px) and (max-width: 1279px){
  .hero-split{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .hero-rail{
    width:100% !important;
  }

  .hero-rail-card{
    position:relative !important;
    top:auto !important;
    max-width:760px !important;
  }

  .hero-card,
  .hero-card-main{
    padding:30px 30px 24px !important;
  }

  .hero-card h1{
    max-width:16ch !important;
    font-size:clamp(2.5rem, 4.4vw, 3.8rem) !important;
  }

  .hero-card .searchbox{
    max-width:820px !important;
  }
}

/* real wide desktop:
   allow the rail, but give the main content more room */
@media (min-width: 1280px){
  .hero-split{
    grid-template-columns:minmax(0, 1.48fr) 290px !important;
    gap:28px !important;
  }

  .hero-card,
  .hero-card-main{
    padding:36px 36px 28px !important;
  }

  .hero-card h1{
    max-width:16.5ch !important;
  }
}


/* =========================================================
   Final homepage desktop micro-tune
   ========================================================= */

@media (min-width: 1280px){
  .hero-split{
    grid-template-columns:minmax(0, 1.62fr) 270px !important;
    gap:30px !important;
  }

  .hero-card,
  .hero-card-main{
    padding:38px 40px 30px !important;
  }

  .hero-card h1{
    max-width:18ch !important;
    font-size:clamp(2.8rem, 4vw, 4.15rem) !important;
    line-height:1.03 !important;
  }

  .hero-card .lead{
    max-width:68ch !important;
  }

  .hero-card .searchbox{
    max-width:900px !important;
  }

  .hero-rail-card{
    padding:16px 16px 14px !important;
  }

  .hero-rail-card h2{
    font-size:1.04rem !important;
  }

  .hero-rail-card p{
    font-size:.92rem !important;
  }
}

/* keep desktop top search from feeling too dominant */
@media (min-width: 981px){
  .mobile-top-search{
    box-shadow:none !important;
    border-bottom:1px solid rgba(24,58,92,.05) !important;
  }

  .mobile-top-search .wrap{
    padding:6px 0 !important;
  }

  .mobile-top-search input,
  .mobile-top-search button{
    min-height:44px !important;
  }
}