/* Minimal custom styles to complement Tailwind utilities */
:root { color-scheme: light dark; }

/* Tags and chips (no Tailwind build required) */
.tag, .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  line-height: 1;
  background: #f3f4f6; /* gray-100 */
  color: #374151; /* gray-700 */
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.tag:hover, .chip:hover { background: #e5e7eb; }
.dark .tag, .dark .chip { background: #1f2937; color: #e5e7eb; }
.dark .tag:hover, .dark .chip:hover { background: #111827; }

/* Chip variant */
.chip { border: 1px solid rgba(99,102,241,.35); box-shadow: inset 0 0 0 1px rgba(99,102,241,.15); }
.chip-active { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; border-color: transparent; box-shadow: 0 8px 24px rgba(99,102,241,.35); }
.chip:active { transform: translateY(1px); }

/* Hide native scrollbar where possible */
#heroTrack::-webkit-scrollbar { display: none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* Simple line clamp helpers without plugin */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Sidebar category rows */
.cat-row .cat-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex: none;
  display: inline-flex; align-items:center; justify-content:center; font-weight: 800; color: #fff;
  background-image: linear-gradient(135deg,#6366f1,#8b5cf6);
}
.cat-row .cat-progress { width: 8rem; height: 6px; border-radius: 9999px; background: rgba(107,114,128,.25); overflow: hidden; }
.dark .cat-row .cat-progress { background: rgba(255,255,255,.12); }
.cat-row .cat-progress span { display: block; height: 100%; border-radius: 9999px; background-image: linear-gradient(90deg,#22d3ee,#6366f1,#a78bfa); }
.cat-row .count { font-size: .75rem; font-weight: 700; background:#f3f4f6; color:#374151; padding:.25rem .5rem; border-radius:.5rem; }
.dark .cat-row .count { background:#1f2937; color:#e5e7eb; }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-cloud a {
  text-decoration: none; border-radius: .75rem; padding: .35rem .6rem; font-weight: 700;
  background: linear-gradient(135deg,rgba(99,102,241,.08),rgba(34,211,238,.08));
  color: #4338ca; /* indigo-700 */
}
.dark .tag-cloud a { background: linear-gradient(135deg,rgba(99,102,241,.16),rgba(34,211,238,.16)); color: #c7d2fe; }
.tag-cloud a[data-weight="1"] { font-size: .7rem; opacity:.7 }
.tag-cloud a[data-weight="2"] { font-size: .8rem; }
.tag-cloud a[data-weight="3"] { font-size: .9rem; }
.tag-cloud a[data-weight="4"] { font-size: 1rem; }
.tag-cloud a[data-weight="5"] { font-size: 1.1rem; }

/* Improve image rendering */
img { image-rendering: -webkit-optimize-contrast; }

/* ===== Paperly Color Accents ===== */
:root {
  --g1:#6366f1; /* indigo-500 */
  --g2:#22d3ee; /* cyan-400 */
  --g3:#a78bfa; /* violet-400 */
  --g4:#f472b6; /* pink-400 */
  --g5:#34d399; /* emerald-400 */
  --g6:#f59e0b; /* amber-500 */
}

/* Subtle colorful background */
body {
  background-image:
    radial-gradient(1000px 260px at 110% -120px, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(760px 200px at -120px 0px, rgba(34,211,238,.10), transparent 60%);
  background-repeat: no-repeat;
}
.dark body {
  background-image:
    radial-gradient(1000px 260px at 110% -120px, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(760px 200px at -120px 0px, rgba(34,211,238,.14), transparent 60%);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(90deg, var(--g1), var(--g3), var(--g2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Gradient border wrapper */
.gradient-border { background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); padding: 1px; border-radius: 1rem; }
.gradient-border > .inner { border-radius: calc(1rem - 1px); background: #fff; }
.dark .gradient-border > .inner { background: #0b1020; }

/* Section heading accent bar */
.section-accent { position: relative; padding-bottom: .5rem; }
.section-accent::after { content: ""; position:absolute; left:0; bottom:0; width:88px; height:3px; border-radius:9999px; background: linear-gradient(90deg,var(--g1),var(--g4)); }

/* Ad gradient card */
.ad-gradient { background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(34,211,238,.06)); border: 1px dashed rgba(148,163,184,.5); }
.dark .ad-gradient { background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(34,211,238,.10)); border-color: rgba(148,163,184,.35); }

/* Colorful category chips */
.chip[data-cat-chip="Product"] { background: linear-gradient(135deg,#34d399,#22c55e); color:#fff; border-color: transparent; }
.chip[data-cat-chip="Engineering"] { background: linear-gradient(135deg,#6366f1,#22d3ee); color:#fff; border-color: transparent; }
.chip[data-cat-chip="Leadership"] { background: linear-gradient(135deg,#8b5cf6,#f472b6); color:#fff; border-color: transparent; }
.chip[data-cat-chip="Culture"] { background: linear-gradient(135deg,#f59e0b,#f97316); color:#fff; border-color: transparent; }
.chip[data-cat-chip="Data"] { background: linear-gradient(135deg,#06b6d4,#0ea5e9); color:#fff; border-color: transparent; }
.chip[data-cat-chip="Strategy"] { background: linear-gradient(135deg,#84cc16,#22c55e); color:#fff; border-color: transparent; }
.chip[data-cat-chip="all"] { background: linear-gradient(135deg,var(--g1),var(--g3)); color:#fff; border-color: transparent; }

/* Elevate colorful chips on hover */
.chip:hover { box-shadow: 0 8px 24px rgba(99,102,241,.20); opacity: .95; }

/* Attractive header nav links */
.menu-link { position: relative; padding: .25rem .25rem; font-weight: 600; }
.menu-link::after { content:""; position:absolute; left:.25rem; right:.25rem; bottom:-8px; height:3px; border-radius:9999px; background: linear-gradient(90deg,var(--g1),var(--g4)); opacity:0; transform: translateY(4px); transition: all .2s ease; }
.menu-link:hover::after,
.menu-link:focus-visible::after,
.menu-link[aria-expanded="true"]::after,
.menu-link[aria-current="page"]::after,
.menu-link[data-active="true"]::after { opacity:1; transform: translateY(0); }

/* Brand text color on hover and when selected */
.menu-link:hover,
.menu-link:focus-visible,
.menu-link[aria-expanded="true"],
.menu-link[aria-current="page"],
.menu-link[data-active="true"] { color: #6366f1; }

/* ===== Dropdown polish (excludes mega menu) ===== */
.dropdown-panel { position: relative; overflow: visible; }
.dropdown-panel::before { content:none; }
.dropdown-panel::after { content:""; position:absolute; top:-6px; left:24px; width:10px; height:10px; transform: rotate(45deg); background: inherit; border-left:1px solid rgba(17,24,39,.12); border-top:1px solid rgba(17,24,39,.12); filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.dark .dropdown-panel::after { border-left-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.12); }

/* Clean, single border for dropdowns */
.dropdown-panel, .submenu-panel { border: 1px solid rgba(17,24,39,.12) !important; }
.dark .dropdown-panel, .dark .submenu-panel { border-color: rgba(255,255,255,.12) !important; }

.dropdown-item, .submenu-item { position: relative; border-radius: .5rem; transition: background-color .15s ease, color .15s ease, transform .08s ease; }
.dropdown-item:hover, .dropdown-item:focus-visible { background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(34,211,238,.08)); color:#4338ca; }
.dark .dropdown-item:hover, .dark .dropdown-item:focus-visible { background: linear-gradient(90deg, rgba(99,102,241,.16), rgba(34,211,238,.16)); color:#c7d2fe; }
.dropdown-item::before, .submenu-item::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:9999px; background: linear-gradient(180deg,var(--g1),var(--g4)); opacity:0; transition: opacity .15s ease; }
.dropdown-item:hover::before, .dropdown-item:focus-visible::before, .submenu-item:hover::before, .submenu-item:focus-visible::before { opacity:1; }

.submenu-panel { position: relative; }
.submenu-panel::before { content:none; }
/* Optional small pointer for third-level submenu (left edge) */
.submenu-panel::after { content:""; position:absolute; left:-6px; top:14px; width:10px; height:10px; transform: rotate(45deg); background: inherit; border-right:1px solid rgba(17,24,39,.12); border-top:1px solid rgba(17,24,39,.12); filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.dark .submenu-panel::after { border-right-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.12); }

/* Category rows hover polish */
.cat-row { transition: background-color .15s ease, transform .06s ease; }
.cat-row:hover { background: linear-gradient(90deg, rgba(99,102,241,.05), rgba(34,211,238,.05)); transform: translateX(1px); }
.dark .cat-row:hover { background: linear-gradient(90deg, rgba(99,102,241,.12), rgba(34,211,238,.12)); }

/* Mobile menu helpers */
[data-mobile-toggle] .mobile-chevron { transition: transform .2s ease; }
[data-mobile-toggle][aria-expanded="true"] .mobile-chevron { transform: rotate(90deg); }

/* ===== Hero multi-card slider polish ===== */
.card-accent { position: relative; transition: transform .15s ease, box-shadow .25s ease; }
.card-accent::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; border-top-left-radius:1rem; border-top-right-radius:1rem; background: linear-gradient(90deg,var(--accent1,#6366f1),var(--accent2,#a78bfa)); }
.card-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 40px var(--accentShadow, rgba(2,6,23,.15)); }

.accent-engineering { --accent1:#6366f1; --accent2:#22d3ee; --accentShadow: rgba(99,102,241,.22); }
.accent-featured    { --accent1:#f472b6; --accent2:#a78bfa; --accentShadow: rgba(244,114,182,.22); }
.accent-strategy    { --accent1:#84cc16; --accent2:#22c55e; --accentShadow: rgba(132,204,22,.22); }
.accent-leadership  { --accent1:#8b5cf6; --accent2:#f472b6; --accentShadow: rgba(139,92,246,.22); }
.accent-data        { --accent1:#06b6d4; --accent2:#0ea5e9; --accentShadow: rgba(14,165,233,.22); }
.accent-product     { --accent1:#34d399; --accent2:#22c55e; --accentShadow: rgba(34,197,94,.22); }

.hero-dots { display:flex; gap:.4rem; align-items:center; justify-content:center; }
.hero-dot { width:8px; height:8px; border-radius:9999px; background:#e5e7eb; border:1px solid rgba(17,24,39,.1); transition: all .2s ease; }
.dark .hero-dot { background:#1f2937; border-color: rgba(255,255,255,.12); }
.hero-dot-active { width:22px; border-radius:9999px; background: linear-gradient(90deg,var(--g1),var(--g3)); border-color: transparent; box-shadow: 0 4px 18px rgba(99,102,241,.25); }

/* ===== Footer polish ===== */
.footer-menu { list-style: none; }
.footer-link { position: relative; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; padding:.35rem .5rem; border-radius:.5rem; transition: color .15s ease, background-color .2s ease, box-shadow .25s ease; }
.footer-link::before { content:"›"; font-weight:800; opacity:.45; transform: translateX(0); transition: transform .15s ease, opacity .15s ease; }
.footer-link:hover::before { transform: translateX(2px); opacity:.85; }
.footer-link::after { content:""; position:absolute; left:.5rem; right:.5rem; bottom:-4px; height:2px; background: linear-gradient(90deg,var(--g1),var(--g2)); border-radius:9999px; transform: scaleX(0); transform-origin:left; transition: transform .2s ease; }
.footer-link:hover::after { transform: scaleX(1); }
.footer-link:hover { background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(34,211,238,.08)); box-shadow: 0 8px 18px rgba(2,6,23,.08); }
.dark .footer-link:hover { background: linear-gradient(90deg, rgba(99,102,241,.16), rgba(34,211,238,.16)); }

.social-btn { transition: transform .15s ease, box-shadow .25s ease, background-color .2s ease; }
.social-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 28px rgba(2,6,23,.15); color:#fff; }
.social-btn svg { transition: transform .2s ease; }
.social-btn:hover svg { transform: scale(1.08); }

/* Brand-specific hover treatments */
.social-btn[aria-label="Twitter"]:hover { background:#1DA1F2; box-shadow: 0 12px 26px rgba(29,161,242,.35); }
.social-btn[aria-label="Instagram"]:hover { background:#E4405F; box-shadow: 0 12px 26px rgba(228,64,95,.35); }
.social-btn[aria-label="LinkedIn"]:hover { background:#0A66C2; box-shadow: 0 12px 26px rgba(10,102,194,.35); }
.social-btn[aria-label="GitHub"]:hover { background:#181717; box-shadow: 0 12px 26px rgba(17,24,39,.45); }

.footer-separator { box-shadow: inset 0 -1px 0 rgba(17,24,39,.06); }

/* ===== Spotlight equal heights (large = 2x small + gap) ===== */
#spotlight .spot-large { height: auto; }
#spotlight .spot-small { height: 10rem; }
@media (min-width: 1024px) {
  #spotlight { --spot-gap: 1.25rem; /* matches gap-5 */ --spot-item-h: 10rem; }
  #spotlight .spot-small { height: var(--spot-item-h); }
  #spotlight .spot-large { height: calc((var(--spot-item-h) * 2) + var(--spot-gap)); }
}