/* ===== SIH 2026 PS Explorer (page-specific styles) ===== */
.sih-ps-explorer {
  color: var(--color-body); position: relative;
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  --glass-bg-solid: rgba(255,255,255,.055);
  --glass-border: rgba(255,255,255,.16);
  --glass-border-hover: rgba(255,255,255,.3);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.14);
  --glass-blur: blur(16px) saturate(150%);
  /* Design tokens: one consistent radius scale, used everywhere instead of ad-hoc values */
  --radius-pill: 999px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  /* Neutral surface tone, used to de-color secondary badges (category, signal dots) so the
     verdict emoji stays the one color signal per card, matching a single-accent-color system */
  --neutral-chip-bg: rgba(255,255,255,.07);
  --neutral-chip-border: rgba(255,255,255,.14);
  --neutral-chip-text: var(--color-body);
}
/* Shared glass surface, reused by search, filters, cards and popup panels */
.sih-glass {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}

/* ---------- Hero ---------- */
.sih-hero { position: relative; padding: 170px 0 50px; text-align: center; overflow: hidden; }
.sih-hero-glow {
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--color-primary-alt) 0%, transparent 70%);
  opacity: .18; filter: blur(40px);
}
.sih-hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
}
/* Ambient orb field: slow-drifting soft-blurred color blobs instead of a sparse particle canvas.
   No CDN/WebGL dependency, no chance of rendering thin or failing to load, and it reads closer to
   the soft-focus gradient backgrounds premium product pages use (Linear, Stripe, Vercel) than a
   scattering of tiny dots did. */
.sih-hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; will-change: transform; }
.hero-orb-1 {
  width: 480px; height: 480px; top: -120px; left: 8%; background: radial-gradient(circle at 35% 35%, var(--color-primary), transparent 70%);
  animation: heroOrbDrift1 22s ease-in-out infinite;
}
.hero-orb-2 {
  width: 380px; height: 380px; top: 20%; right: 6%; background: radial-gradient(circle at 40% 40%, #1ba2db, transparent 70%);
  opacity: .22; animation: heroOrbDrift2 26s ease-in-out infinite;
}
.hero-orb-3 {
  width: 320px; height: 320px; bottom: -140px; left: 42%; background: radial-gradient(circle at 50% 50%, #ff8659, transparent 70%);
  opacity: .2; animation: heroOrbDrift3 30s ease-in-out infinite;
}
@keyframes heroOrbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 50px) scale(1.12); }
}
@keyframes heroOrbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(1.08); }
}
@keyframes heroOrbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}
.sih-hero .container { position: relative; z-index: 1; }
.sih-scroll-cue {
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 34px; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1;
  color: var(--color-gray); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  text-decoration: none; transition: color .2s;
}
.sih-scroll-cue:hover { color: var(--color-primary); }
.sih-scroll-cue i { animation: sihScrollBounce 1.8s ease-in-out infinite; font-size: 14px; }
@keyframes sihScrollBounce {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50% { transform: translateY(7px); opacity: 1; }
}

@media (min-width: 992px) {
  .sih-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 130px 0 90px; }
}

/* Hero entrance animation, plays once on load (above the fold, not scroll-triggered) */
.hero-anim { opacity: 0; transform: translateY(18px); animation: heroFadeUp .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-anim-1 { animation-delay: .05s; }
.hero-anim-2 { animation-delay: .18s; }
.hero-anim-3 { animation-delay: .32s; }
.hero-anim-4 { animation-delay: .46s; }
.hero-anim-5 { animation-delay: .7s; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }
.sih-hero .subtitle {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  letter-spacing: 3px; color: var(--color-primary); font-size: 14px; margin-bottom: 16px; position: relative;
}
.sih-hero .subtitle:before, .sih-hero .subtitle:after { content: ""; width: 28px; height: 1px; background: var(--color-primary); opacity: .6; }
.sih-hero .title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 6.5vw, 68px); color: var(--color-heading); line-height: 1.1; margin-bottom: 20px; letter-spacing: .5px;
}
/* Crisp gradient fill, no bloom. A tight single shadow for a hint of depth reads as considered
   typography; the wide multi-layer glow it had before read as neon rather than premium. */
.sih-hero .title .accent {
  background: linear-gradient(180deg, #ffc9a8 0%, #fc4c1f 55%, #d5490f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-primary);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: inline-block;
}
.sih-hero .desc {
  max-width: 700px; margin: 0 auto 44px; color: var(--color-body); font-size: 19px; line-height: 1.65;
}
.sih-hero-stats {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1;
}
/* Glossy glass finish: a real diagonal highlight baked into the surface (not just on hover),
   plus a brighter top edge and a soft cast shadow underneath, so these read as lit, curved glass
   rather than a flat tinted rectangle. */
.sih-hero-stats > div {
  position: relative; text-align: center; min-width: 152px; padding: 24px 22px 20px; border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 32%, rgba(255,255,255,.01) 55%, rgba(255,255,255,.05) 100%),
    var(--glass-bg);
  border: 1px solid var(--glass-border); overflow: hidden;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), 0 14px 30px -20px rgba(0,0,0,.6);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sih-hero-stats > div:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: .55;
}
/* Slow-moving shine sweep, same family as the card hover shine, but gentle and continuous here
   since these boxes are static hero furniture rather than interactive list items. */
.sih-hero-stats > div:after {
  content: ""; position: absolute; top: -30%; left: -70%; width: 40%; height: 160%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35) 45%, rgba(255,255,255,.1) 55%, transparent);
  transform: skewX(-18deg); pointer-events: none; mix-blend-mode: overlay;
  animation: statSheenSweep 7s ease-in-out infinite;
}
.sih-hero-stats > div:nth-child(2):after { animation-delay: 1.4s; }
.sih-hero-stats > div:nth-child(3):after { animation-delay: 2.8s; }
.sih-hero-stats > div:nth-child(4):after { animation-delay: 4.2s; }
@keyframes statSheenSweep {
  0%, 15% { left: -70%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .sih-hero-stats > div:after { animation: none; display: none; }
}
.sih-hero-stats > div:hover {
  border-color: var(--glass-border-hover); transform: translateY(-4px);
  box-shadow: var(--glass-inset), 0 20px 38px -18px var(--color-primary-alt);
}
.sih-hero-stats .stat-icon {
  display: block; font-size: 17px; color: var(--color-primary); opacity: .85; margin-bottom: 10px;
}
.sih-hero-stats .counter.title {
  display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 42px; color: var(--color-heading);
  line-height: 1; margin-bottom: 8px; letter-spacing: .5px;
}
.sih-hero-stats .split-num .split { color: var(--color-gray); margin: 0 3px; font-size: 24px; }
.sih-hero-stats .label { font-size: 12px; color: var(--color-gray); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
@media (max-width: 767px) {
  .sih-hero-stats { gap: 10px; }
  .sih-hero-stats > div { min-width: 130px; padding: 18px 16px 16px; }
  .sih-hero-stats .counter.title { font-size: 32px; }
}

/* ---------- Webinar feature ---------- */
.sih-webinar-feature {
  position: relative; padding: 72px 0; margin: 20px 0 0; overflow: hidden;
  background: var(--color-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.sih-webinar-feature:before {
  content: ""; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 700px; height: 400px;
  background: radial-gradient(ellipse at center, var(--color-primary-alt) 0%, transparent 70%);
  opacity: .12; filter: blur(50px); pointer-events: none; z-index: 0;
}
/* Full-width banner ribbon above both columns, unifies the section under one strong announcement
   instead of it reading as two loose halves. Same gradient language as the tab-active state and
   section icons elsewhere, so it feels like part of the same design system, not a new motif. */
.webinar-banner-ribbon {
  /* Deeper, more evenly saturated gradient than the light-peach one this started as: that lighter
     end was too close to white for the white text sitting on top of it to read cleanly. */
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px; width: fit-content; margin: 0 auto 44px; background: linear-gradient(150deg, var(--color-primary), #b3300f);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .6px; font-size: 14px;
  text-transform: uppercase; padding: 13px 26px; border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px -16px var(--color-primary-alt);
}
.ribbon-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ribbon-live i { font-size: 8px; animation: ribbonPulse 1.6s ease-in-out infinite; }
@keyframes ribbonPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ribbon-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.55); flex: 0 0 auto; }

.webinar-feature-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
}
/* The text column gets the same visual weight as the framed image next to it: its own bordered
   glass panel instead of loose text floating on bare background. This is the main fix for the
   density imbalance between the two sides. */
.webinar-copy {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
  padding: 34px 32px;
}
.webinar-copy h2 { color: var(--color-heading); font-size: 30px; margin: 0 0 14px; font-family: 'Rajdhani', sans-serif; font-weight: 700; line-height: 1.15; }
.webinar-copy > p { color: var(--color-body); margin: 0 0 20px; font-size: 17px; line-height: 1.75; }
.webinar-presenter {
  display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 0 26px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-pill);
  padding: 7px 18px 7px 7px;
}
.webinar-presenter img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-primary); flex: 0 0 auto; }
.webinar-presenter span { font-size: 14px; color: var(--color-body); line-height: 1.4; }
.webinar-presenter strong { color: var(--color-heading); }
.webinar-points { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.webinar-points li { display: flex; align-items: flex-start; gap: 8px; color: var(--color-body); font-size: 16px; line-height: 1.5; }
.webinar-points li i { color: var(--color-primary); font-size: 13px; flex: 0 0 14px; width: 14px; text-align: center; margin-top: 3px; }
.webinar-urgency {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; font-size: 13px; font-weight: 700;
  color: #FF8F3C; background: #FF8F3C14; border: 1px solid #FF8F3C3e; padding: 7px 14px; border-radius: var(--radius-pill);
}
.webinar-urgency i { font-size: 12px; }
.webinar-cta .btn-text { font-size: 16px; font-weight: 700; }

/* Visual frame + scroll reveal + hover */
.webinar-visual-link { display: block; text-decoration: none; }
.webinar-visual {
  position: relative; border-radius: var(--radius-lg); padding: 8px; border: 1px solid var(--color-border);
  background: linear-gradient(160deg, #ffffff0d, transparent); overflow: hidden; cursor: pointer;
  box-shadow: 0 26px 60px -26px var(--color-primary-alt), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow .3s ease;
}
/* No perpetual pulse loop: a static, quality shadow with a hover-only lift reads calmer and more
   premium than something that never stops animating on a page that isn't otherwise in motion. */
.webinar-visual:hover { box-shadow: 0 30px 70px -24px var(--color-primary-alt), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.webinar-img {
  display: none; width: 100%; height: auto; border-radius: var(--radius-md); object-fit: cover;
  opacity: 0; transform: scale(.88); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.webinar-img-desk { display: block; }
.webinar-visual.is-revealed .webinar-img { opacity: 1; transform: scale(1); }
.webinar-visual.is-revealed:hover .webinar-img { transform: scale(1.045); }
.webinar-hover-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); z-index: 2;
  background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 700; padding: 14px 30px; border-radius: var(--radius-pill);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
.webinar-visual:hover .webinar-hover-hint { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Generic fade-up scroll reveal, used by webinar copy and grid cards */
.reveal-fade-up[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-fade-up[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
  .webinar-feature-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .sih-webinar-feature { padding: 48px 0; }
  .webinar-banner-ribbon { font-size: 12px; padding: 11px 18px; gap: 10px; margin-bottom: 32px; }
  .webinar-copy { padding: 26px 22px; }
  .webinar-copy h2 { font-size: 25px; }
  .webinar-img-desk { display: none; }
  .webinar-img-phone { display: block; max-width: 340px; margin: 0 auto; }
}

/* ---------- Toolbar ---------- */
.sih-toolbar-wrap { margin-top: 52px; margin-bottom: 30px; }
.sih-section-heading {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: 22px; color: var(--color-heading);
}
.sih-section-heading:before { content: ""; flex: 0 0 4px; width: 4px; height: 20px; background: var(--color-primary); border-radius: 2px; }
@media (max-width: 767px) {
  .sih-section-heading { font-size: 18px; margin-bottom: 16px; }
}
.sih-search-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sih-search-box {
  flex: 1 1 260px; display: flex; align-items: center; gap: 10px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 0 16px; transition: border-color .2s, box-shadow .2s;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
  /* Explicit height + box-sizing everywhere, not just on mobile: bundle.css's global reset sets
     a plain `input { height: 40px; }` and `input[type=search] { width: 270px; }`. Those are lower
     specificity than these rules so they lose on paper, but pinning height/width explicitly here
     removes any ambiguity rather than relying on padding-driven auto height. */
  height: 50px; box-sizing: border-box;
}
.sih-search-box:focus-within { border-color: var(--color-primary); box-shadow: var(--glass-inset), 0 0 0 3px var(--color-primary-alt); }
.sih-search-box i { color: var(--color-gray); font-size: 14px; flex: 0 0 auto; }
.sih-search-box input[type="search"] {
  flex: 1 1 auto; width: 100%; height: 100%; background: transparent; border: none; color: var(--color-heading); padding: 0;
  font-family: 'Rubik', sans-serif; font-size: 17px; outline: none; line-height: normal;
  -webkit-appearance: none; appearance: none; min-height: 0; box-sizing: border-box;
}
.sih-search-box input[type="search"]::placeholder { color: var(--color-gray); }
.sih-search-box input[type="search"]::-webkit-search-decoration,
.sih-search-box input[type="search"]::-webkit-search-cancel-button,
.sih-search-box input[type="search"]::-webkit-search-results-button,
.sih-search-box input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

.sih-select {
  color-scheme: dark;
  background-color: #201f20;
  background-image: var(--glass-bg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fc4c1f'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat; background-position: 0 0, right 16px center; background-size: 100% 100%, auto;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
  border: 1px solid var(--glass-border); color: var(--color-heading);
  padding: 0 38px 0 16px; height: 50px; box-sizing: border-box; border-radius: var(--radius-sm); font-family: 'Rubik', sans-serif; font-size: 16px;
  cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s;
}
.sih-select:hover, .sih-select:focus { border-color: var(--color-primary); outline: none; }
.sih-select option { background-color: #201f20; color: var(--color-heading); }

.sih-filter-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
  color: var(--color-heading); padding: 0 20px; height: 50px; box-sizing: border-box; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: border-color .2s, color .2s;
}
.sih-filter-toggle:hover, .sih-filter-toggle[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.sih-filter-count {
  background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.sih-filter-count.is-hidden { display: none; }

.sih-filter-drawer {
  display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .2s ease, margin .25s ease;
  margin-top: 0;
}
.sih-filter-drawer.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.sih-filter-drawer > * { min-height: 0; overflow: hidden; }
.sih-filter-drawer-inner { }
.sih-filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
}
.sih-clear-btn {
  background: transparent; border: none; color: var(--color-gray); font-size: 12px; padding: 10px 4px 2px;
  cursor: pointer; text-decoration: underline;
}
.sih-clear-btn:hover { color: var(--color-primary); }

.sih-active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sih-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary-alt); color: #fff;
  font-size: 12px; padding: 5px 8px 5px 12px; border-radius: var(--radius-pill);
}
.sih-chip button {
  background: #ffffff33; border: none; color: #fff; width: 16px; height: 16px; border-radius: 50%;
  cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
#psResultCount { font-size: 13px; color: var(--color-gray); margin-top: 14px; }
#psResultCount b { color: var(--color-primary); }

/* ---------- Grid ---------- */
.sih-grid-section { padding: 30px 0 90px; position: relative; }
.sih-grid-section:before, .sih-grid-section:after {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(110px); opacity: .08;
}
.sih-grid-section:before { top: 10%; left: 4%; background: var(--color-primary); }
.sih-grid-section:after { bottom: 8%; right: 4%; background: #1BA2DB; }
.sih-ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; position: relative; z-index: 1; }

.sih-ps-card {
  position: relative; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025)), rgba(27, 27, 28, 0.42);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 24px 22px 20px; cursor: pointer; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
  display: flex; flex-direction: column; gap: 11px; overflow: hidden;
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--glass-inset), 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}
.sih-ps-card[data-reveal] { opacity: 0; transform: translateY(26px); }
.sih-ps-card[data-reveal].is-revealed { animation: cardRevealIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cardRevealIn { to { opacity: 1; transform: translateY(0); } }
.sih-ps-card.reveal-stagger-1.is-revealed { animation-delay: 0s; }
.sih-ps-card.reveal-stagger-2.is-revealed { animation-delay: .06s; }
.sih-ps-card.reveal-stagger-3.is-revealed { animation-delay: .12s; }
.sih-ps-card.reveal-stagger-4.is-revealed { animation-delay: .18s; }
.sih-ps-card.reveal-stagger-5.is-revealed { animation-delay: .24s; }
.sih-ps-card.reveal-stagger-6.is-revealed { animation-delay: .3s; }
.sih-ps-card.reveal-stagger-7.is-revealed { animation-delay: .36s; }
.sih-ps-card.reveal-stagger-8.is-revealed { animation-delay: .42s; }
.sih-ps-card:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: .8; z-index: 2;
}
/* Glass shine: a soft diagonal highlight that sweeps across the card on hover, instead of a
   colored glow underneath it. Reads as light passing over glass, not a drop-shadow effect. */
.sih-ps-card:after {
  content: ""; position: absolute; top: -20%; left: -60%; width: 45%; height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.5) 45%, rgba(255,255,255,.15) 55%, transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 1;
  mix-blend-mode: overlay;
  transition: left .75s cubic-bezier(.2,.8,.2,1);
}
.sih-ps-card:hover:after { left: 120%; }
.sih-ps-card:hover {
  border-color: var(--glass-border-hover); transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.04)), rgba(32, 32, 33, 0.5);
  box-shadow: var(--glass-inset), 0 18px 34px -18px rgba(0, 0, 0, 0.6);
}
.sih-ps-card .ps-top-row { display: flex; justify-content: space-between; align-items: center; }

/* PS number as a small quiet ID chip, not bare colored text, so it reads as a tag rather than
   competing with the verdict emoji for attention. */
.sih-ps-card .ps-number {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--color-heading); font-size: 13px; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 5px 11px 5px 8px; border-radius: var(--radius-pill);
}
.ps-verdict-emoji { font-size: 13px; line-height: 1; }

/* Category capsule: the one place on the card allowed a glossy, "gel button" glow, since the
   user explicitly wants this element to read as colored and dimensional. Two hues total (brand
   orange for Hardware, the site's existing secondary blue for Software), each with the same
   gradient + inner highlight + outer glow treatment, so the style is unified even as the hue flips. */
.sih-ps-card .ps-category {
  font-size: 11px; font-weight: 700; padding: 6px 13px 6px 11px; border-radius: var(--radius-pill); letter-spacing: .4px;
  display: inline-flex; align-items: center; gap: 6px; color: #fff; border: 1px solid transparent;
}
.sih-ps-card .ps-category i { font-size: 10px; opacity: .9; }
.ps-category.software {
  background: linear-gradient(150deg, #2ab2e8, #1476a8);
  border-color: #5cc6f1a0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 10px -6px rgba(0,0,0,.35), 0 4px 16px -6px #1ba2dbaa;
}
.ps-category.hardware {
  background: linear-gradient(150deg, #ff9d5c, var(--color-primary));
  border-color: #ffb385a0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 10px -6px rgba(0,0,0,.35), 0 4px 16px -6px var(--color-primary-alt);
}

.sih-ps-card .ps-title {
  color: var(--color-heading); font-size: 18px; line-height: 1.38; font-weight: 600; font-family: 'Rubik', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sih-ps-card .ps-org, .sih-ps-card .ps-theme { display: inline-flex; align-items: center; gap: 7px; width: fit-content; }
.sih-ps-card .ps-org { color: var(--color-gray); font-size: 13px; }
.sih-ps-card .ps-org i { font-size: 11px; opacity: .7; }
.sih-ps-card .ps-theme {
  font-size: 12px; color: var(--color-body); font-weight: 500;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09); padding: 5px 12px 5px 10px; border-radius: var(--radius-pill);
}
.sih-ps-card .ps-theme i { font-size: 10px; color: var(--color-primary); opacity: .8; }

/* Signal chips: a mild tier-tinted gradient background (low alpha, restrained) plus one solid
   dot, so the tier is still legible at a glance without repainting the whole card in saturated
   color. Same 5-tier palette used elsewhere on the page (green/blue/gray/amber/red). */
.sih-ps-card .ps-signal-strip {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
}
.ps-verdict-chip { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: .3px; border: 1px solid transparent; flex: 0 0 auto; }
.ps-signal-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-signal-item {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-body); font-weight: 600; white-space: nowrap;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); border: 1px solid transparent;
}
.ps-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.ps-signal-item.tier-breakthrough, .ps-signal-item.tier-low {
  background: linear-gradient(135deg, #3EB75E22, #3EB75E08); border-color: #3EB75E2e;
}
.ps-signal-item.tier-breakthrough .ps-dot, .ps-signal-item.tier-low .ps-dot { background: #3EB75E; }
.ps-signal-item.tier-moderate { background: linear-gradient(135deg, #1BA2DB22, #1BA2DB08); border-color: #1BA2DB2e; }
.ps-signal-item.tier-moderate .ps-dot { background: #1BA2DB; }
.ps-signal-item.tier-incremental { background: linear-gradient(135deg, #9F9F9F1c, #9F9F9F08); border-color: #9F9F9F26; }
.ps-signal-item.tier-incremental .ps-dot { background: #9F9F9F; }
.ps-signal-item.tier-medium { background: linear-gradient(135deg, #FF8F3C22, #FF8F3C08); border-color: #FF8F3C2e; }
.ps-signal-item.tier-medium .ps-dot { background: #FF8F3C; }
.ps-signal-item.tier-high { background: linear-gradient(135deg, #ff5b5e22, #ff5b5e08); border-color: #ff5b5e2e; }
.ps-signal-item.tier-high .ps-dot { background: #ff5b5e; }

.sih-ps-card .ps-meta-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-gray); }
.sih-ps-card .ps-meta-row .deadline-soon { color: #ff8f3c; font-weight: 600; }

#psLoadMoreWrap { text-align: center; margin-top: 44px; }
#psLoadMoreWrap.is-hidden { display: none; }

.sih-empty-state { text-align: center; padding: 70px 20px; color: var(--color-gray); grid-column: 1/-1; font-size: 17px; }

/* ---------- FAQ ---------- */
.sih-faq-section { padding: 10px 0 80px; }
.sih-faq-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.sih-faq-item {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-inset);
  overflow: hidden; transition: border-color .2s ease;
}
.sih-faq-item[open] { border-color: var(--glass-border-hover); }
.sih-faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 50px 18px 20px; position: relative;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 17px; color: var(--color-heading); line-height: 1.4;
}
.sih-faq-item summary::-webkit-details-marker { display: none; }
.sih-faq-item summary:after {
  content: "\002B"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--color-primary); font-size: 20px; font-weight: 400; transition: transform .25s ease;
}
.sih-faq-item[open] summary:after { transform: translateY(-50%) rotate(45deg); }
.sih-faq-item p { margin: 0; padding: 0 20px 20px; color: var(--color-body); font-size: 16px; line-height: 1.7; }
.sih-faq-item p a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sih-faq-item p a:hover { color: var(--color-heading); }

/* ---------- Detail overlay/panel ---------- */
.sih-detail-overlay {
  position: fixed; inset: 0; background: rgba(3,3,3,0.78); backdrop-filter: blur(3px); z-index: 9999; display: none;
  align-items: flex-start; justify-content: flex-end;
}
.sih-detail-overlay.is-open { display: flex; }
.sih-detail-panel {
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--color-secondary);
  width: min(720px, 100%); height: 100%; overflow-y: auto;
  padding: 30px 32px 60px; position: relative; border-left: 1px solid var(--glass-border);
  animation: sihSlideIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sihSlideIn { from { transform: translateX(50px); opacity:0; } to { transform: translateX(0); opacity:1; } }
.sih-detail-close {
  position: absolute; top: 26px; right: 28px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-heading); width: 38px; height: 38px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 3;
  transition: border-color .2s, color .2s;
}
.sih-detail-close:hover { color: var(--color-primary); border-color: var(--color-primary); }

#sihDetailHead { padding-right: 50px; }
.d-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-ps-number {
  color: var(--color-heading); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; font-size: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 5px 12px; border-radius: var(--radius-pill);
}
.d-verdict-pill {
  font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: .3px;
  text-transform: uppercase; border: 1px solid transparent;
}
.d-title {
  color: var(--color-heading); font-size: 25px; margin: 8px 0 16px; line-height: 1.32; font-family: 'Rubik', sans-serif; font-weight: 600;
}
/* Two calmer rows instead of one undifferentiated pile of identical gray pills: org/category/theme
   (what this PS is) reads first, deadline/ideas (the stakes) reads second, each icon-led for a
   quick scan instead of having to read every chip's text to tell them apart. */
.d-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.d-meta-row-stats { margin-bottom: 22px; }
.d-meta-row span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  padding: 6px 13px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); color: var(--color-body);
  border: 1px solid var(--color-border);
}
.d-meta-row span i { font-size: 11px; color: var(--color-gray); }
.d-meta-row-stats span.is-soon { background: #FF8F3C14; border-color: #FF8F3C3e; color: #FF8F3C; }
.d-meta-row-stats span.is-soon i { color: #FF8F3C; }

/* Verdict color system, shared by cards, head pill and evaluator tab */
.verdict-green { background: #3EB75E1a; color: #3EB75E; border-color: #3EB75E44; }
.verdict-yellow { background: #FF8F3C1a; color: #FF8F3C; border-color: #FF8F3C44; }
.verdict-red { background: #FF00031a; color: #ff5b5e; border-color: #ff5b5e44; }

/* Tabs, always wrap so every tab stays visible regardless of panel width, no hidden-scroll dead end for mouse users */
.sih-tab-bar {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start;
  gap: 8px; margin: 6px 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
}
.sih-tab-btn {
  flex: 0 0 auto; width: auto; max-width: max-content;
  background: #ffffff08; border: 1px solid var(--color-border); color: var(--color-gray); font-size: 13px; font-weight: 600;
  padding: 8px 16px; cursor: pointer; white-space: nowrap; text-align: left; position: relative; font-family: 'Rubik', sans-serif;
  border-radius: var(--radius-pill); transition: color .2s, background .2s, border-color .2s;
}
.sih-tab-btn:hover { color: var(--color-heading); border-color: var(--color-gray); }
.sih-tab-btn.is-active {
  color: #fff; border-color: transparent; background: linear-gradient(150deg, #ff8659, var(--color-primary));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -6px var(--color-primary-alt);
}
.sih-tab-panel { display: none; animation: sihFadeIn .2s ease; }
.sih-tab-panel.is-active { display: block; }
@keyframes sihFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.sih-tab-panel h3 {
  color: var(--color-heading); font-size: 16px; margin: 26px 0 12px; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .3px;
  display: flex; align-items: center; gap: 9px;
}
.sih-tab-panel h3:first-child { margin-top: 0; }
.sih-tab-panel h3 i {
  font-size: 12px; color: #fff; background: linear-gradient(150deg, #ff8659, var(--color-primary));
  width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.sih-tab-panel p { color: var(--color-body); font-size: 17px; line-height: 1.72; }
.sih-tab-panel ul.d-bullets { padding-left: 0; list-style: none; margin: 0; }
.sih-tab-panel ul.d-bullets li {
  color: var(--color-body); font-size: 16px; line-height: 1.6; padding: 10px 0 10px 24px; position: relative;
  border-bottom: 1px solid var(--color-border);
}
.sih-tab-panel ul.d-bullets li:before { content: "\2192"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

.d-tier-callout { display: flex; align-items: flex-start; gap: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 18px 20px; margin-bottom: 14px; }
/* Base badge shape lives here, unscoped, so it applies everywhere a .tier-badge is used
   (tier callouts AND the evaluator scorecard rows). Previously scoped to ".d-tier-callout .tier-badge"
   only, which silently dropped padding/radius/border-width on the scorecard rows and left the
   background nearly invisible (10% alpha color with no padding to give it a shape to sit in). */
.tier-badge {
  font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid transparent; flex: 0 0 auto; white-space: nowrap; line-height: 1.4;
}
.d-tier-callout p { margin: 0; font-size: 16px; }
.d-effort-score { font-size: 13px; color: var(--color-gray); margin-top: 4px; }
.d-note { font-size: 15px; color: var(--color-body); line-height: 1.65; margin: 0 0 14px; }
.d-why-matters { background: #ffffff0d; border-left: 2px solid var(--color-primary); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 18px; }

.tier-badge.crowd-low { background: #3EB75E1a; color: #3EB75E; border-color: #3EB75E44; }
.tier-badge.crowd-medium { background: #1BA2DB1a; color: #1BA2DB; border-color: #1BA2DB44; }
.tier-badge.crowd-high { background: #FF8F3C1a; color: #FF8F3C; border-color: #FF8F3C44; }
.tier-badge.crowd-very-high { background: #FF00031a; color: #ff5b5e; border-color: #ff5b5e44; }

.tier-badge.feas-strong { background: #3EB75E1a; color: #3EB75E; border-color: #3EB75E44; }
.tier-badge.feas-workable { background: #1BA2DB1a; color: #1BA2DB; border-color: #1BA2DB44; }
.tier-badge.feas-tight { background: #FF00031a; color: #ff5b5e; border-color: #ff5b5e44; }
.tier-badge.impact-direct { background: #3EB75E1a; color: #3EB75E; border-color: #3EB75E44; }
.tier-badge.impact-indirect { background: #9F9F9F1a; color: #9F9F9F; border-color: #9F9F9F44; }
.tier-badge.arch-straightforward { background: #3EB75E1a; color: #3EB75E; border-color: #3EB75E44; }
.tier-badge.arch-multi-layer { background: #1BA2DB1a; color: #1BA2DB; border-color: #1BA2DB44; }
.tier-badge.arch-complex-integration { background: #FF8F3C1a; color: #FF8F3C; border-color: #FF8F3C44; }

/* Evaluation Scorecard */
.d-scorecard { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.d-score-row { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 14px 18px; }
.d-score-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.d-score-label { color: var(--color-heading); font-size: 15px; font-weight: 700; font-family: 'Rajdhani', sans-serif; letter-spacing: .3px; }
.d-score-row p { margin: 0; font-size: 15px; line-height: 1.65; }

/* SWOT */
.d-swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.d-swot-cell { border-radius: var(--radius-md); padding: 16px 18px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.d-swot-cell h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .3px; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.d-swot-cell ul { margin: 0; padding-left: 18px; }
.d-swot-cell li { color: var(--color-body); font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.d-swot-cell.s-strength h4 { color: #3EB75E; }
.d-swot-cell.s-weakness h4 { color: #ff5b5e; }
.d-swot-cell.s-opportunity h4 { color: #1BA2DB; }
.d-swot-cell.s-threat h4 { color: #FF8F3C; }

/* Evaluator / Verdict */
.d-verdict-block {
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; border: 1px solid var(--glass-border);
  display: flex; align-items: flex-start; gap: 14px; background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.d-verdict-block .d-verdict-tier {
  font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: var(--radius-pill); flex: 0 0 auto; letter-spacing: .5px;
  background: rgba(0,0,0,.28);
}
.d-verdict-block p { margin: 0; font-size: 16px; }
.d-verdict-detail li { border-bottom: 1px solid var(--color-border); }
.d-verdict-detail strong { color: var(--color-heading); }
.sih-tab-panel ul.d-eval-questions li:before { content: "Q"; font-size: 11px; font-weight: 700; }

.d-phase-block { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 18px 20px; margin-bottom: 14px; }
.d-phase-block h4 {
  color: var(--color-primary); font-size: 14px; letter-spacing: .3px; margin: 0 0 10px; font-family: 'Rajdhani', sans-serif;
  font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.d-phase-block h4:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 8px var(--color-primary-alt); }
.d-phase-block ul { margin: 0; padding-left: 20px; }
.d-phase-block li { color: var(--color-body); font-size: 16px; line-height: 1.65; margin-bottom: 6px; }

.d-cta-block { background: linear-gradient(135deg, var(--color-primary-alt), var(--color-primary)); border-radius: var(--radius-md); padding: 22px 24px; margin-top: 22px; }
.d-cta-block h4 { color: #fff; font-size: 17px; margin: 0 0 6px; font-family: 'Rubik', sans-serif; }
.d-cta-block p { color: #ffffffcc; font-size: 16px; margin: 0 0 16px; }
.d-cta-block .tmp-btn { background: #fff; color: var(--color-primary); }
.d-cta-block.d-cta-ebook { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.d-cta-block.d-cta-ebook h4 { color: var(--color-heading); }
.d-cta-block.d-cta-ebook p { color: var(--color-body); }
.d-cta-block.d-cta-ebook .tmp-btn { background: var(--color-primary); color: #fff; }

.d-source-note { font-size: 12px; color: var(--color-gray); margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.d-source-note a { color: var(--color-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .sih-scroll-cue { display: none; }
}
@media (max-width: 767px) {
  .sih-hero { padding: 130px 0 34px; }
  .sih-search-row { flex-direction: column; }
  .sih-search-box, .sih-select, .sih-filter-toggle { width: 100%; }
  .sih-filter-grid { grid-template-columns: 1fr; }
  .sih-detail-panel { padding: 24px 20px 50px; }
  .d-title { font-size: 21px; }
  .sih-tab-btn { font-size: 12px; padding: 7px 12px; }
  .d-swot-grid { grid-template-columns: 1fr; }
  .d-tier-callout { flex-direction: column; }
  .d-verdict-block { flex-direction: column; }
}