/* ==========================================================================
   Home page
   ========================================================================== */

/* ---- Hero ---- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background:
    radial-gradient(ellipse 900px 600px at 82% 18%, rgba(201,162,75,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(140,31,46,0.10), transparent 60%),
    var(--ink);
  overflow: hidden;
}
.hero-crest{
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}
.hero-crest img{ width: 100%; height: auto; }
@media (max-width: 780px){
  .hero-crest{ display: none; }
}
.hero-inner{ position: relative; z-index: 2; max-width: 780px; }
.hero-title{
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.04;
  margin: 26px 0 26px;
}
.hero-lede{
  font-size: 17px;
  color: var(--parchment-dim);
  max-width: 520px;
  line-height: 1.75;
}
.hero-scroll{
  position: absolute;
  left: 32px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.hero-scroll span{
  width: 1px; height: 46px;
  background: linear-gradient(var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll span::after{
  content:'';
  position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold-bright);
  animation: scrollDrip 2.6s ease-in-out infinite;
}
@keyframes scrollDrip{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}
.hero-scroll em{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}
@media (max-width: 720px){
  .hero-scroll{ display: none; }
}

/* ---- Pillars ---- */
.pillar-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar-card{
  background: var(--ink);
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  transition: background .35s var(--ease);
}
.pillar-card:hover{ background: var(--ink-soft); }
.pillar-index{
  position: absolute;
  top: 28px; right: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--parchment-faint);
  letter-spacing: 0.1em;
}
.pillar-media{
  height: 240px;
}
.pillar-media img{ max-height: 168px; max-width: 88%; }
.pillar-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}
.pillar-body h3{
  font-size: 26px;
  margin: 8px 0 12px;
  transition: color .3s var(--ease);
}
.pillar-body p{
  color: var(--parchment-dim);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 34ch;
}
.pillar-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.pillar-card svg{ width: 14px; height: 14px; transition: transform .3s var(--ease); }
.pillar-card:hover .pillar-link{ gap: 12px; }
.pillar-card:hover svg{ transform: translateX(3px); }

/* per-card accent on hover, via data-accent */
.pillar-card[data-accent="bhd"]:hover{ box-shadow: inset 3px 0 0 var(--crimson-bright); }
.pillar-card[data-accent="bhd"]:hover h3{ color: var(--crimson-bright); }
.pillar-card[data-accent="silicon"]:hover{ box-shadow: inset 3px 0 0 var(--azure); }
.pillar-card[data-accent="silicon"]:hover h3{ color: #6f97e6; }
.pillar-card[data-accent="zxp"]:hover{ box-shadow: inset 3px 0 0 var(--orange); }
.pillar-card[data-accent="zxp"]:hover h3{ color: var(--orange); }
.pillar-card[data-accent="slift"]:hover{ box-shadow: inset 3px 0 0 var(--steel); }
.pillar-card[data-accent="slift"]:hover h3{ color: var(--parchment); }

@media (max-width: 720px){
  .pillar-grid{ grid-template-columns: 1fr; }
  .pillar-card{ padding: 34px 28px; }
}

/* ---- Identity strip ---- */
.identity{ background: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.identity-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.identity-stat{ text-align: left; }
.identity-num{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--gold-bright);
  line-height: 1;
}
.identity-label{
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--parchment-dim);
  line-height: 1.6;
}
@media (max-width: 780px){
  .identity-grid{ grid-template-columns: 1fr 1fr; row-gap: 44px; }
}