/* ============================================
   Shared Vendor Landscape - Stylesheet
   DNSai core_pallete design system — Dark Mode
   Reusable across all cybersecurity landscape pages
   ============================================ */

/* RESET & VARIABLES */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Core palette — dark mode (default) */
  --body-bg:#000000;
  --section-alt:#111111;
  --surface:#1a1a1a;
  --card-bg:#222222;
  --text-primary:#ffffff;
  --text-secondary:#cccccc;
  --text-muted:#999999;
  --text-dimmed:#999999;
  --text-placeholder:#888888;
  --border-default:#333333;
  --border-emphasis:#555555;
  --accent:#26c4ff;
  --accent-blue:#0054ff;
  --brand-gradient:linear-gradient(90deg, #26c4ff 0%, #0054ff 100%);
  --footer-bg:#191919;
  /* Status colors */
  --color-success:#00c853;
  --color-warning:#ffab00;
  --color-error:#ff1744;
  --color-info:#40a8ff;
  /* Shadows — dark mode */
  --shadow:none;
  --shadow-md:0 4px 6px rgba(0,0,0,.3);
  --shadow-lg:0 10px 25px rgba(0,0,0,.4);
  /* Card hover glow — dark mode uses blue glow */
  --card-hover-shadow:0 4px 15px rgba(0,84,255,.4);
  /* Button styles */
  --btn-primary-bg:linear-gradient(90deg, #26c4ff 0%, #0054ff 100%);
  --btn-primary-hover:linear-gradient(90deg, #0048d4 0%, #007aff 100%);
  --btn-primary-glow:0 4px 15px rgba(0,84,255,.4);
  --btn-secondary-bg:linear-gradient(to bottom, #0054FF, #0447D3);
  --btn-outline-color:#26c4ff;
  --btn-disabled-bg:#5a5a5a;
  --btn-disabled-text:#999999;
  /* Feature card gradient */
  --feature-card-bg:linear-gradient(135deg, #0a2a54, #104a8a);
  /* Radii (unchanged) */
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  /* Header */
  --header-bg:linear-gradient(135deg,#000000 0%,#0a1628 40%,#0054ff 100%);
  --header-text:rgba(255,255,255,.7);
  --header-stat-label:rgba(255,255,255,.6);
  --search-focus-bg:rgba(255,255,255,.1);
  --search-icon-color:rgba(255,255,255,.4);
  /* Notable card */
  --notable-bg:linear-gradient(135deg,#1a1a0a,#2a2510);
  --notable-border:#5a4a1a;
  --notable-text:#f5d78e;
  --notable-strong:#fbbf24;
  /* Focus ring */
  --focus-ring:0 0 0 3px rgba(38,196,255,.3);
  /* Cat nav shadow */
  --cat-nav-shadow:0 1px 3px rgba(0,0,0,.3);
  /* Modal */
  --modal-shadow:-10px 0 40px rgba(0,0,0,.5);
}

/* LIGHT MODE */
[data-theme="light"]{
  --body-bg:#ffffff;
  --section-alt:#f1f1f1;
  --surface:#f9f9f9;
  --card-bg:#f9f9f9;
  --text-primary:#000000;
  --text-secondary:#282828;
  --text-muted:#555555;
  --text-dimmed:#666666;
  --text-placeholder:#999999;
  --border-default:#cccccc;
  --border-emphasis:#e5e5e5;
  --accent:#0054ff;
  --accent-blue:#0054ff;
  --footer-bg:#E6E6E6;
  --shadow:none;
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,.12);
  --card-hover-shadow:0 4px 16px rgba(0,0,0,.12);
  --btn-outline-color:#0054ff;
  --btn-disabled-bg:#d0d0d0;
  --btn-disabled-text:#999999;
  --feature-card-bg:linear-gradient(135deg,#e8f0ff,#d0e0ff);
  --header-bg:linear-gradient(135deg,#e8f4ff 0%,#d0e8ff 40%,#0054ff 100%);
  --header-text:rgba(0,0,0,.6);
  --header-stat-label:rgba(0,0,0,.5);
  --search-focus-bg:rgba(255,255,255,.8);
  --search-icon-color:rgba(0,0,0,.35);
  --notable-bg:linear-gradient(135deg,#fffbeb,#fef3c7);
  --notable-border:#d4a017;
  --notable-text:#92400e;
  --notable-strong:#b45309;
  --focus-ring:0 0 0 3px rgba(0,84,255,.2);
  --cat-nav-shadow:0 1px 3px rgba(0,0,0,.08);
  --modal-shadow:-10px 0 40px rgba(0,0,0,.15);
}

/* Light mode feature-card border visibility */
[data-theme="light"] .feature-card { border-color: rgba(0,84,255,.15); }
[data-theme="light"] .feature-card:hover { border-color: var(--accent); }
/* Light mode modal logo fallback distinction */
[data-theme="light"] .modal-logo .logo-fallback { background: #f0f0f0; }

/* SITE-WIDE CROSS-LANDSCAPE NAV */
.site-nav{background:#0a0a0a;border-bottom:1px solid #222;font-size:.8rem;position:relative;z-index:200}
.site-nav-inner{max-width:1400px;margin:0 auto;padding:.4rem 1.5rem;display:flex;align-items:center;
  justify-content:space-between}
.sn-home{color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:.35rem;
  font-weight:600;font-size:.8rem;padding:.25rem .5rem;border-radius:6px;transition:all .2s}
.sn-home:hover{background:rgba(38,196,255,.1);color:#fff}
.sn-home.sn-active{color:#fff;background:rgba(38,196,255,.15)}
.sn-home svg{flex-shrink:0}
.sn-dropdown{position:relative}
.sn-toggle{background:none;border:1px solid #333;color:#ccc;padding:.3rem .7rem;border-radius:6px;
  cursor:pointer;font-family:inherit;font-size:.78rem;display:flex;align-items:center;gap:.3rem;
  transition:all .2s}
.sn-toggle:hover{border-color:#555;color:#fff;background:rgba(255,255,255,.05)}
.sn-toggle svg{transition:transform .2s}
.sn-open .sn-toggle{border-color:var(--accent);color:#fff;background:rgba(38,196,255,.08)}
.sn-open .sn-toggle svg{transform:rotate(180deg)}
.sn-menu{display:none;position:absolute;right:0;top:calc(100% + .4rem);background:#111;
  border:1px solid #333;border-radius:10px;padding:.6rem;min-width:580px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  columns:2;column-gap:.5rem}
.sn-open .sn-menu{display:block}
.sn-group{break-inside:avoid;margin-bottom:.5rem}
.sn-group-title{color:#666;font-size:.65rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;padding:.2rem .5rem;margin-bottom:.1rem}
.sn-link{display:block;color:#bbb;text-decoration:none;padding:.25rem .5rem;border-radius:5px;
  font-size:.78rem;transition:all .15s;white-space:nowrap}
.sn-link:hover{background:rgba(38,196,255,.1);color:#fff}
.sn-link.sn-active{color:var(--accent);font-weight:600;background:rgba(38,196,255,.08)}

/* Light mode site nav */
[data-theme="light"] .site-nav{background:#f5f5f5;border-bottom-color:#ddd}
[data-theme="light"] .sn-home{color:var(--accent)}
[data-theme="light"] .sn-home:hover{background:rgba(0,84,255,.08);color:#000}
[data-theme="light"] .sn-home.sn-active{color:#000;background:rgba(0,84,255,.1)}
[data-theme="light"] .sn-toggle{border-color:#ccc;color:#555}
[data-theme="light"] .sn-toggle:hover{border-color:#999;color:#000;background:rgba(0,0,0,.03)}
[data-theme="light"] .sn-open .sn-toggle{border-color:var(--accent);color:#000;background:rgba(0,84,255,.06)}
[data-theme="light"] .sn-menu{background:#fff;border-color:#ddd;box-shadow:0 8px 30px rgba(0,0,0,.12)}
[data-theme="light"] .sn-group-title{color:#999}
[data-theme="light"] .sn-link{color:#555}
[data-theme="light"] .sn-link:hover{background:rgba(0,84,255,.06);color:#000}
[data-theme="light"] .sn-link.sn-active{color:var(--accent);background:rgba(0,84,255,.06)}

/* Site nav responsive */
@media(max-width:640px){
  .sn-menu{min-width:0;width:auto;left:-4rem;right:-.5rem;columns:1;max-width:calc(100% + 5rem)}
  .sn-home span{display:none}
}

/* ================================================
   VENDOR DIRECTORY NAVIGATION (vd- prefix)
   Secondary nav bar for vendor directory pages
   ================================================ */
.vd-nav{background:linear-gradient(180deg,var(--surface) 0%,var(--card-bg) 100%);
  border-bottom:1px solid var(--border-default);position:sticky;top:70px;z-index:200}
.vd-nav-inner{max-width:1400px;margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;
  gap:.75rem;flex-wrap:wrap}

/* Home Link */
.vd-nav-home{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);text-decoration:none;
  font-size:.78rem;font-weight:600;padding:.4rem .7rem;border-radius:6px;transition:all .2s ease;
  background:rgba(38,196,255,.08);border:1px solid rgba(38,196,255,.15)}
.vd-nav-home:hover{background:rgba(38,196,255,.15);color:var(--accent)}
.vd-nav-home.vd-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.vd-nav-home svg{flex-shrink:0;opacity:.8}

/* Nav Links Container */
.vd-nav-links{display:flex;align-items:center;gap:.5rem;margin-left:auto}

/* Individual Nav Link */
.vd-nav-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-secondary);
  text-decoration:none;font-size:.75rem;font-weight:500;padding:.4rem .65rem;border-radius:6px;
  transition:all .2s ease;border:1px solid transparent}
.vd-nav-link:hover{color:var(--text-primary);background:var(--surface);border-color:var(--border-default)}
.vd-nav-link.vd-active{color:var(--accent);background:rgba(38,196,255,.08);border-color:rgba(38,196,255,.2)}
.vd-nav-link svg{flex-shrink:0;opacity:.7}
.vd-nav-link:hover svg,.vd-nav-link.vd-active svg{opacity:1}

/* Dropdown */
.vd-nav-dropdown{position:relative}
.vd-nav-dropdown-toggle{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-secondary);
  background:var(--card-bg);border:1px solid var(--border-default);font-size:.75rem;font-weight:500;
  padding:.4rem .7rem;border-radius:6px;cursor:pointer;transition:all .2s ease;font-family:inherit;
  white-space:nowrap}
.vd-nav-dropdown-toggle:hover{color:var(--text-primary);border-color:var(--border-emphasis)}
.vd-nav-dropdown-toggle.vd-active{color:var(--accent);border-color:rgba(38,196,255,.3);
  background:rgba(38,196,255,.05)}
.vd-nav-dropdown.vd-open .vd-nav-dropdown-toggle{color:var(--accent);border-color:var(--accent);
  background:rgba(38,196,255,.1)}
.vd-chevron{transition:transform .2s ease;opacity:.6}
.vd-nav-dropdown.vd-open .vd-chevron{transform:rotate(180deg)}

/* Dropdown Menu */
.vd-nav-dropdown-menu{display:none;position:absolute;top:calc(100% + .4rem);left:0;min-width:280px;
  max-height:70vh;overflow-y:auto;background:var(--card-bg);border:1px solid var(--border-default);
  border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:.5rem;z-index:100;
  columns:2;column-gap:.5rem}
.vd-nav-dropdown.vd-open .vd-nav-dropdown-menu{display:block}

/* Dropdown Group */
.vd-dropdown-group{break-inside:avoid;margin-bottom:.5rem}
.vd-dropdown-group-title{display:block;font-size:.62rem;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;padding:.3rem .5rem;margin-bottom:.15rem}
.vd-dropdown-link{display:block;color:var(--text-secondary);text-decoration:none;font-size:.72rem;
  padding:.35rem .5rem;border-radius:5px;transition:all .15s ease;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vd-dropdown-link:hover{color:var(--text-primary);background:var(--surface)}
.vd-dropdown-link.vd-active{color:var(--accent);background:rgba(38,196,255,.1);font-weight:600}

/* Category Badge */
.vd-nav-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;
  background:var(--surface);border:1px solid var(--border-default);padding:.25rem .6rem;
  border-radius:20px;margin-left:.5rem}
.vd-badge-label{color:var(--text-muted);font-weight:500}
.vd-badge-value{color:var(--accent);font-weight:600}

/* Light mode adjustments */
[data-theme="light"] .vd-nav{background:linear-gradient(180deg,#fff 0%,#f9f9f9 100%)}
[data-theme="light"] .vd-nav-dropdown-menu{box-shadow:0 8px 30px rgba(0,0,0,.1)}

/* Responsive */
@media(max-width:768px){
  .vd-nav-inner{padding:.4rem .75rem}
  .vd-nav-home span{display:none}
  .vd-nav-link span{display:none}
  .vd-nav-dropdown-menu{columns:1;min-width:220px;left:auto;right:0}
  .vd-nav-badge{display:none}
}
@media(max-width:480px){
  .vd-nav-links{gap:.35rem}
  .vd-nav-dropdown-toggle{padding:.35rem .5rem}
  .vd-nav-link{padding:.35rem .5rem}
}

html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--body-bg);color:var(--text-primary);line-height:1.5;min-height:100vh;
  transition:background-color .35s ease,color .35s ease;overflow-x:hidden;overflow-x:clip;
  padding-top:70px}

/* Account for fixed main nav - main nav is ~58px high */
.nav-menu + .vd-nav,
.site-main{margin-top:0}

/* ================================================
   MAIN NAV MENU OVERRIDES
   Black background with theme-aware text colors
   Complete styling for all nav elements
   ================================================ */

/* Base nav-menu container */
.nav-menu{
  background:#000000 !important;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  border-bottom:1px solid #333;
}

/* --- HAMBURGER MENU ICON --- */
.nav-menu .menu-icon{
  color:#ffffff !important;
  font-size:1.5rem;
  cursor:pointer;
  padding:0.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  transition:color .2s ease,background .2s ease;
}
.nav-menu .menu-icon:hover{
  color:var(--accent) !important;
  background:rgba(255,255,255,.1);
  border-radius:6px;
}

/* --- MODE SWITCH (Logo + Theme Toggle) --- */
.nav-menu .mode-switch{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.nav-menu .nav-brand-link{
  display:flex;
  align-items:center;
}
.nav-menu .nav-logo{
  width:30px;
  height:30px;
}
/* Theme toggle checkbox styling */
.nav-menu .mode-switch input[type="checkbox"]{
  position:relative;
  width:40px;
  height:20px;
  appearance:none;
  -webkit-appearance:none;
  background:#444;
  border-radius:20px;
  cursor:pointer;
  transition:background .3s ease;
}
.nav-menu .mode-switch input[type="checkbox"]::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform .3s ease;
}
.nav-menu .mode-switch input[type="checkbox"]:checked{
  background:var(--accent);
}
.nav-menu .mode-switch input[type="checkbox"]:checked::before{
  transform:translateX(20px);
}
.nav-menu .mode-switch label{
  color:#ffffff;
  font-size:0.75rem;
  cursor:pointer;
}

/* --- NAV LINKS --- */
.nav-menu .nav-links{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.nav-menu .nav-links a{
  color:#ffffff !important;
  text-decoration:none;
  padding:0.5rem 0.75rem;
  font-size:0.85rem;
  border-radius:6px;
  transition:color .2s ease,background .2s ease;
}
.nav-menu .nav-links a:hover{
  color:var(--accent) !important;
  background:rgba(255,255,255,.1);
}
.nav-menu .nav-links a.vd-active{
  color:var(--accent) !important;
  background:rgba(38,196,255,.15);
}

/* --- NAV DROPDOWN --- */
.nav-menu .nav-dropdown{
  position:relative;
}
.nav-menu .nav-dropdown-toggle{
  color:#ffffff !important;
  padding:0.5rem 0.75rem;
  font-size:0.85rem;
  cursor:pointer;
  border-radius:6px;
  transition:color .2s ease,background .2s ease;
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
}
.nav-menu .nav-dropdown-toggle:hover{
  color:var(--accent) !important;
  background:rgba(255,255,255,.1);
}
.nav-menu .nav-dropdown-toggle::after{
  content:'▼';
  font-size:0.6rem;
  margin-left:0.25rem;
  opacity:0.7;
}

/* --- NAV DROPDOWN MENU --- */
.nav-menu .nav-dropdown-menu{
  background:#111111 !important;
  border:1px solid #333;
  border-radius:8px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  padding:0.5rem;
  min-width:200px;
}
.nav-menu .nav-dropdown-menu a{
  color:#cccccc !important;
  display:block;
  padding:0.5rem 0.75rem;
  font-size:0.8rem;
  border-radius:4px;
  transition:color .2s ease,background .2s ease;
}
.nav-menu .nav-dropdown-menu a:hover{
  color:#ffffff !important;
  background:rgba(38,196,255,.15);
}
.nav-menu .nav-dropdown-menu a.vd-active{
  color:var(--accent) !important;
  background:rgba(38,196,255,.1);
}
.nav-menu .dropdown-section-header{
  color:#888888 !important;
  font-size:0.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:0.5rem 0.75rem 0.25rem;
  display:block;
}
.nav-menu .dropdown-divider{
  height:1px;
  background:#333;
  margin:0.5rem 0;
}

/* --- NAV SEARCH --- */
.nav-menu .nav-search{
  display:flex;
  align-items:center;
}
.nav-menu .nav-search form{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.nav-menu .nav-search-input{
  background:#222222 !important;
  border:1px solid #444 !important;
  color:#ffffff !important;
  padding:0.4rem 0.75rem;
  font-size:0.85rem;
  border-radius:6px;
  outline:none;
  transition:border-color .2s ease,background .2s ease;
}
.nav-menu .nav-search-input::placeholder{
  color:#888888 !important;
}
.nav-menu .nav-search-input:focus{
  border-color:var(--accent) !important;
  background:#2a2a2a !important;
}
.nav-menu .nav-submit-button{
  background:var(--accent) !important;
  color:#000000 !important;
  border:none;
  padding:0.4rem 0.75rem;
  font-size:0.8rem;
  font-weight:600;
  border-radius:6px;
  cursor:pointer;
  transition:background .2s ease,transform .1s ease;
}
.nav-menu .nav-submit-button:hover{
  background:#4ad4ff !important;
  transform:translateY(-1px);
}

/* ================================================
   LIGHT MODE OVERRIDES
   Keep black nav background, ensure all text visible
   ================================================ */
[data-theme="light"] .nav-menu{
  background:#000000 !important;
  border-bottom-color:#333;
}

/* Light mode - hamburger icon */
[data-theme="light"] .nav-menu .menu-icon{
  color:#ffffff !important;
}
[data-theme="light"] .nav-menu .menu-icon:hover{
  color:var(--accent) !important;
}

/* Light mode - mode switch */
[data-theme="light"] .nav-menu .mode-switch label{
  color:#ffffff;
}
[data-theme="light"] .nav-menu .mode-switch input[type="checkbox"]{
  background:#444;
}
[data-theme="light"] .nav-menu .mode-switch input[type="checkbox"]:checked{
  background:var(--accent);
}

/* Light mode - nav links */
[data-theme="light"] .nav-menu .nav-links a{
  color:#ffffff !important;
}
[data-theme="light"] .nav-menu .nav-links a:hover{
  color:var(--accent) !important;
}
[data-theme="light"] .nav-menu .nav-links a.vd-active{
  color:var(--accent) !important;
}

/* Light mode - dropdown toggle */
[data-theme="light"] .nav-menu .nav-dropdown-toggle{
  color:#ffffff !important;
}
[data-theme="light"] .nav-menu .nav-dropdown-toggle:hover{
  color:var(--accent) !important;
}

/* Light mode - dropdown menu */
[data-theme="light"] .nav-menu .nav-dropdown-menu{
  background:#111111 !important;
  border-color:#333;
}
[data-theme="light"] .nav-menu .nav-dropdown-menu a{
  color:#cccccc !important;
}
[data-theme="light"] .nav-menu .nav-dropdown-menu a:hover{
  color:#ffffff !important;
}
[data-theme="light"] .nav-menu .nav-dropdown-menu a.vd-active{
  color:var(--accent) !important;
}
[data-theme="light"] .nav-menu .dropdown-section-header{
  color:#888888 !important;
}
[data-theme="light"] .nav-menu .dropdown-divider{
  background:#333;
}

/* Light mode - search */
[data-theme="light"] .nav-menu .nav-search-input{
  background:#222222 !important;
  border-color:#444 !important;
  color:#ffffff !important;
}
[data-theme="light"] .nav-menu .nav-search-input::placeholder{
  color:#888888 !important;
}
[data-theme="light"] .nav-menu .nav-search-input:focus{
  border-color:var(--accent) !important;
}
[data-theme="light"] .nav-menu .nav-submit-button{
  background:var(--accent) !important;
  color:#000000 !important;
}
[data-theme="light"] .nav-menu .nav-submit-button:hover{
  background:#4ad4ff !important;
}

/* Smooth transitions for all nav elements */
.nav-menu,
.nav-menu .menu-icon,
.nav-menu .nav-links a,
.nav-menu .nav-dropdown-toggle,
.nav-menu .nav-dropdown-menu,
.nav-menu .nav-dropdown-menu a,
.nav-menu .nav-search-input,
.nav-menu .nav-submit-button,
.nav-menu .mode-switch input[type="checkbox"]{
  transition:color .35s ease,background-color .35s ease,border-color .35s ease;
}
/* Smooth theme transitions for key surfaces */
.header,.cat-nav,.main,.footer,.search-input,.modal-desc,.modal-notable,.modal-market,.landscape-legend,
.cat-pill,.modal-close button{transition:background-color .35s ease,color .35s ease,border-color .35s ease}

/* HEADER */
.header{background:var(--header-bg);
  color:#fff;padding:1.5rem 1.5rem 1.25rem;position:relative;overflow:hidden}
.header::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;
  background:radial-gradient(circle,rgba(38,196,255,.08) 0%,transparent 70%);pointer-events:none}
.header-inner{max-width:1400px;margin:0 auto;position:relative;z-index:1}
.header h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem;line-height:1.3}
.header p{color:var(--header-text);font-size:.82rem;line-height:1.5;margin-bottom:1rem;max-width:600px}
.search-wrap{position:relative;max-width:480px;margin-bottom:0}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--search-icon-color);
  width:16px;height:16px}
.search-input{width:100%;padding:.6rem .9rem .6rem 2.4rem;border:1px solid var(--border-default);
  border-radius:8px;background:var(--surface);color:var(--text-primary);font-size:.85rem;outline:none;
  transition:all .2s}
.search-input::placeholder{color:var(--text-placeholder);font-size:.82rem}
.search-input:focus{background:var(--search-focus-bg);border-color:var(--accent);
  box-shadow:var(--focus-ring)}
.search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border:none;background:var(--border-default);color:var(--text-secondary);border-radius:50%;
  cursor:pointer;font-size:14px;line-height:20px;text-align:center;padding:0;margin:0;
  transition:all .2s}
.search-clear:hover{background:var(--border-emphasis);color:var(--text-primary)}
.search-clear:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* SEARCH HINTS */
.search-hints{margin-top:6px;font-size:11px;color:#888;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.search-hints-label{margin-right:2px;flex-shrink:0}
.search-hint-btn{
  all:unset;display:inline-block;box-sizing:border-box;
  background:#333;color:#ccc;padding:4px 10px;border-radius:4px;
  font-size:10px;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .15s,color .15s}
.search-hint-btn:hover{background:var(--accent);color:#fff}
[data-theme="light"] .search-hint-btn{background:#e0e0e0;color:#444}
[data-theme="light"] .search-hint-btn:hover{background:var(--accent);color:#fff}

/* THEME TOGGLE */
[data-theme="light"] .header{color:#000}
[data-theme="light"] .header h1{color:#000}
[data-theme="light"] .stat-num{color:var(--accent)}
[data-theme="light"] .search-input{background:#ffffff}
[data-theme="light"] .cat-card,
[data-theme="light"] .vendor-card,
[data-theme="light"] .featured-card{box-shadow:0 2px 8px rgba(0,0,0,.08)}
[data-theme="light"] .featured-card .logo-wrap{background:#fff}
[data-theme="light"] .vendor-card .vendor-icon{background:#fff}

/* CATEGORY NAV */
.cat-nav{background:var(--surface);border-bottom:1px solid var(--border-default);position:sticky;top:125px;z-index:90}
.cat-nav-inner{max-width:1400px;margin:0 auto;padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cat-pill{
  all:unset;display:inline-flex;align-items:center;box-sizing:border-box;
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;
  border:1px solid #555;background:transparent;color:#aaa;white-space:nowrap;
  transition:all .15s ease}
.cat-pill:hover{border-color:#888;color:#fff;background:rgba(255,255,255,.05)}
.cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-pill .pill-count{background:rgba(255,255,255,.15);padding:2px 7px;border-radius:10px;
  font-size:10px;margin-left:6px;font-weight:400}
.cat-pill.active .pill-count{background:rgba(255,255,255,.25)}
[data-theme="light"] .cat-pill{border-color:#d0d0d0;color:#555;background:#fff}
[data-theme="light"] .cat-pill:hover{border-color:#999;color:#333;background:#f5f5f5}
[data-theme="light"] .cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="light"] .cat-pill .pill-count{background:rgba(0,0,0,.08)}

/* MAIN */
.main{max-width:1400px;margin:0 auto;padding:1.5rem}
.section-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem}
.section-title .title-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border-default) 0%,transparent 100%)}
.section-subtitle{font-size:.82rem;color:var(--text-secondary);margin-bottom:1.25rem;margin-top:-.5rem;
  font-weight:400;letter-spacing:.01em}

/* CATEGORY OVERVIEW CARDS */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-bottom:2rem}
.cat-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;cursor:pointer;
  border:1.5px solid var(--border-default);transition:all .25s;position:relative;overflow:hidden}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--card-hover-shadow);border-color:var(--border-emphasis)}
.cat-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.cat-card-accent{position:absolute;top:0;left:0;right:0;height:3px}
.cat-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.6rem}
.cat-card-name{font-size:.95rem;font-weight:700;color:var(--text-primary);line-height:1.3;flex:1}
.cat-card-count{font-size:1.5rem;font-weight:800;color:var(--text-muted);line-height:1}
.cat-card-vendors{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.cat-card-vendor{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--text-secondary);
  background:var(--surface);padding:.2rem .5rem;border-radius:50px}
.cat-card-vendor img{width:14px;height:14px;border-radius:3px;object-fit:contain}

/* FEATURED VENDORS */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.featured-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;cursor:pointer;
  border:1px solid var(--border-default);transition:all .25s ease;text-align:center;position:relative;
  box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.featured-card:hover{transform:translateY(-3px);box-shadow:var(--card-hover-shadow);border-color:var(--accent)}
.featured-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.featured-card .logo-wrap{width:100%;height:80px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.75rem;background:var(--surface);border-radius:var(--radius-sm);padding:.5rem;
  border:1px solid var(--border-default)}
.featured-card .logo-wrap img{max-width:90%;max-height:65px;object-fit:contain}
.featured-card .logo-fallback{font-size:1.5rem;font-weight:800;color:var(--text-muted);display:flex;
  align-items:center;justify-content:center;width:100%;height:100%}
.featured-card .vendor-name{font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:.3rem}
.featured-card .vendor-market{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600}
.featured-cat-tag{font-size:.65rem;font-weight:600;padding:.25rem .7rem;border-radius:20px;
  border:1px solid;display:inline-block;margin-bottom:.4rem;letter-spacing:.02em;
  background:rgba(255,255,255,0.1)}
[data-theme="light"] .featured-cat-tag{background:rgba(0,0,0,0.05)}
[data-theme="dark"] .featured-cat-tag,
:root:not([data-theme="light"]) .featured-cat-tag{color:#2FBBE5 !important;border-color:#2FBBE5 !important}

/* VENDOR GRID */
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.85rem;margin-bottom:2rem}
.vendor-card{background:var(--card-bg);border-radius:var(--radius);padding:1rem;cursor:pointer;
  border:1px solid var(--border-default);transition:all .25s ease;display:flex;gap:.85rem;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.vendor-card:hover{box-shadow:var(--card-hover-shadow);border-color:var(--accent);transform:translateY(-2px)}
.vendor-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.vendor-card .cat-stripe{position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:0 2px 2px 0}
.vendor-card .vendor-icon{width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);
  border:1px solid var(--border-default);box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.vendor-card .vendor-icon img{width:100%;height:100%;object-fit:contain}
.vendor-card .vendor-icon .fallback{font-size:.85rem;font-weight:700;color:var(--text-muted)}
.vendor-card .vendor-info{flex:1;min-width:0}
.vendor-card .vendor-name{font-size:.88rem;font-weight:600;color:var(--text-primary);margin-bottom:.2rem;
  display:flex;align-items:center;gap:.4rem}
.vendor-card .vendor-desc{font-size:.75rem;color:var(--text-secondary);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vendor-card .vendor-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.vendor-card .vendor-tags .tag{font-size:.64rem;padding:.15rem .5rem;border-radius:20px;font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,0.1)}

/* MODAL */
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(0,0,0,.7);z-index:1000;opacity:0;
  visibility:hidden;transition:all .3s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-backdrop.active{opacity:1;visibility:visible}
.modal{position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);background:var(--surface);z-index:1001;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);overflow-y:auto;
  box-shadow:var(--modal-shadow);border-left:1px solid var(--border-default)}
.modal.active{transform:translateX(0)}
.modal-close{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;padding:1rem 1.25rem .5rem}
.modal-close button{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--border-default);background:var(--card-bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-secondary);transition:all .2s}
.modal-close button:hover{background:var(--border-default);border-color:var(--border-emphasis)}
.modal-close button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.modal-body{padding:0 2rem 2rem}
.modal-logo{width:100%;max-height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.modal-logo img{max-width:220px;max-height:90px;object-fit:contain}
.modal-logo .logo-fallback{font-size:2.5rem;font-weight:800;color:var(--text-muted);background:var(--card-bg);
  padding:1rem 2rem;border-radius:var(--radius)}
.modal-cat{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:50px;
  font-size:.75rem;font-weight:600;color:#fff;margin-bottom:.75rem}
.modal-name{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem;letter-spacing:-.02em}
.modal-domain{font-size:.85rem;color:var(--accent);margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem}
.modal-domain a{color:var(--accent);text-decoration:none}
.modal-domain a:hover{text-decoration:underline}
.modal-desc{font-size:.92rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1.25rem;
  padding:1rem;background:var(--card-bg);border-radius:var(--radius-sm);border:1px solid var(--border-default)}
.modal-section{margin-bottom:1.25rem}
.modal-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin-bottom:.5rem}
.modal-market{display:inline-flex;padding:.35rem .75rem;border-radius:var(--radius-xs);
  font-size:.82rem;font-weight:500;background:var(--card-bg);color:var(--text-primary);border:1px solid var(--border-default)}
.modal-caps{display:flex;flex-wrap:wrap;gap:.4rem}
.modal-cap{padding:.3rem .65rem;border-radius:50px;font-size:.73rem;font-weight:600;color:#fff}
.modal-notable{padding:1rem;background:var(--notable-bg);border:1px solid var(--notable-border);
  border-radius:var(--radius-sm);font-size:.85rem;color:var(--notable-text);line-height:1.5}
.modal-notable strong{color:var(--notable-strong)}

/* CROSS-NICHE REFERENCES */
.modal-cross-ref-links{display:flex;flex-wrap:wrap;gap:.4rem}
.cross-ref-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;
  border-radius:var(--radius-xs);font-size:.82rem;font-weight:500;
  background:var(--card-bg);color:var(--text-primary);border:1px solid var(--border-default);
  text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.cross-ref-link:hover{border-color:var(--accent);color:var(--accent);background:var(--hover-bg)}
.cross-ref-link svg{flex-shrink:0;opacity:.6}
.cross-ref-link:hover svg{opacity:1}

/* EMPTY STATE */
.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}
.empty-state svg{width:48px;height:48px;margin-bottom:1rem;opacity:.4}
.empty-state p{font-size:.95rem}

/* BUTTONS */
.btn-primary{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:.6rem 1.4rem;border-radius:50px;border:none;background:var(--btn-primary-bg);color:#fff;
  font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:var(--btn-primary-glow)}
.btn-primary:hover{background:var(--btn-primary-hover);box-shadow:0 6px 20px rgba(0,84,255,.5)}
.btn-primary:focus-visible{outline:none;box-shadow:var(--btn-primary-glow),var(--focus-ring)}

.btn-secondary{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:.6rem 1.4rem;border-radius:50px;border:none;background:var(--btn-secondary-bg);color:#fff;
  font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s}
.btn-secondary:hover{filter:brightness(1.1)}
.btn-secondary:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.btn-outline{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:.5rem 1.2rem;border-radius:50px;border:1.5px solid var(--btn-outline-color);
  background:transparent;color:var(--btn-outline-color);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s}
.btn-outline:hover{background:var(--btn-outline-color);color:#fff}
.btn-outline:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.btn-disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-outline:disabled{
  background:var(--btn-disabled-bg);color:var(--btn-disabled-text);cursor:not-allowed;
  box-shadow:none;border-color:transparent;filter:none}

/* FEATURE CARD (gradient highlight variant) */
.feature-card{background:var(--feature-card-bg);border-color:rgba(38,196,255,.2)}
.feature-card:hover{border-color:var(--accent)}

/* STATUS UTILITY CLASSES */
.text-success{color:var(--color-success)}
.text-warning{color:var(--color-warning)}
.text-error{color:var(--color-error)}
.text-info{color:var(--color-info)}
.bg-success{background:var(--color-success)}
.bg-warning{background:var(--color-warning)}
.bg-error{background:var(--color-error)}
.bg-info{background:var(--color-info)}

/* BACK BUTTON (outline/ghost style) */
.back-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:50px;
  border:1.5px solid var(--btn-outline-color);background:transparent;font-size:.82rem;font-weight:500;
  color:var(--btn-outline-color);cursor:pointer;transition:all .2s;margin-bottom:1rem}
.back-btn:hover{background:var(--btn-outline-color);color:#fff}
.back-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* FOOTER */
.footer{background:var(--footer-bg);color:var(--text-muted);padding:1.5rem;text-align:center;font-size:.8rem;
  border-top:1px solid var(--border-default)}

/* RESPONSIVE */
@media(max-width:768px){
  .header{padding:2rem 1rem 1.25rem}
  .header h1{font-size:1.5rem}
  .header p{font-size:.85rem;margin-bottom:1.25rem}
  .main{padding:1rem}
  .cat-grid{grid-template-columns:1fr}
  .featured-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .vendor-grid{grid-template-columns:1fr}
  .modal{width:100%}
  .modal-body{padding:0 1.25rem 1.5rem}
  .cat-nav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cat-nav-inner::-webkit-scrollbar{display:none}
}
@media(max-width:480px){
  .header{padding:1.5rem .75rem 1rem}
  .header h1{font-size:1.25rem}
  .header p{font-size:.8rem;margin-bottom:1rem;max-width:none}
  .main{padding:.75rem}
  .featured-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .modal-body{padding:0 1rem 1.25rem}
  .cat-nav-inner{padding:6px 8px;gap:3px}
  .cat-pill{font-size:10px;padding:2px 8px}
  .search-wrap{max-width:none}
  .section-title{font-size:1rem}
  .landscape-legend{padding:.75rem 1rem;gap:.4rem .65rem}
}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-in{animation:fadeUp .35s ease forwards}
.animate-in:nth-child(1){animation-delay:0s}
.animate-in:nth-child(2){animation-delay:.04s}
.animate-in:nth-child(3){animation-delay:.08s}
.animate-in:nth-child(4){animation-delay:.12s}
.animate-in:nth-child(5){animation-delay:.16s}
.animate-in:nth-child(6){animation-delay:.2s}
.animate-in:nth-child(7){animation-delay:.24s}
.animate-in:nth-child(8){animation-delay:.28s}
.animate-in:nth-child(9){animation-delay:.32s}
.animate-in:nth-child(10){animation-delay:.36s}

/* VIEW TOGGLE */
.view-controls{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.view-controls .result-count{font-size:.82rem;color:var(--text-muted);margin-left:auto}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-emphasis)}

/* LANDSCAPE LEGEND */
.landscape-legend{display:flex;flex-wrap:wrap;gap:.5rem .85rem;padding:1rem 1.25rem;
  background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border-default);margin-bottom:1.5rem}
.legend-item{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--text-secondary)}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}