/* ============================================================
   HELIOCASTLE — PILLARS STRIP
   The four-up band under the hero, plus the About panel.
   ============================================================ */

/* ============================================================
   PILLARS STRIP
   ============================================================ */

.strip {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.92), rgb(var(--bg-rgb) / 0.92));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.strip-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.45fr;
  max-width: 1500px;
  margin: 0 auto;
}

.pillar {
  padding: clamp(36px, 3.4vw, 56px) clamp(26px, 2.4vw, 44px);
  border-left: 1px solid var(--line);
  transition: background 0.5s var(--ease);
}
.pillar:first-child { border-left: none; }
.pillar:hover { background: rgb(var(--ink-rgb) / 0.018); }

.pillar-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin-bottom: 22px;
  filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.25));
}
.pillar-icon svg { width: 100%; height: 100%; }

.pillar h3 {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pillar p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }

.pillar--about h4 {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mini-rule {
  display: block;
  width: 30px;
  height: 1.5px;
  background: var(--gold);
  margin: 14px 0 16px;
}
.pillar--about p { margin-bottom: 20px; }