/* ══════════════════════════════════════════════════════
   SECTION 04 — "Why building a magnetic brand is a no-brainer."

   Page canvas: 1440px wide
   Frame 28 node 181:3719 — x=-2, y=3271, w=1443, h=932
   Content Frame 50 node 181:4208 — x=195, y=148 (relative to Frame 28)
   Content: w=1128, h=636

   Background layers:
     .s4__texture  — star/grain texture (color-dodge, same as all sections)
     .s4__mesh     — 3D diamond/crystal geometric SVG (multiply blend)
                     x=-110px from section left, y=165px from section top
                     width=1041px, height=682px

   Sub-components:
     .s4__header   — eyebrow + headline (full-width) + subtitle (688px, centred)
     .s4__cards    — flex row, 4 cards + 3 dividers, justify-between
     .s4__card     — backdrop-blur card, flex-col, 244px wide
     .s4__divider  — 1×197px vertical separator between cards
   ══════════════════════════════════════════════════════ */


/* ── Section shell ── */
.s4 {
  position: relative;
  width: 100%;
  background: #150d00;
  padding: 148px 0;
  min-height: 932px;
  overflow: hidden;
  isolation: isolate; /* ensures mix-blend-mode on children blends against #150d00 */
}

/* Background star/grain texture — color-dodge, above mesh (via DOM order) */
.s4__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  overflow: hidden;
}
.s4__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 3D mountain/crystal mesh background image — extends 80px beyond top/bottom
   so the scroll parallax (translateY in main.js) has room to move visibly.
   .s4 has overflow:hidden so the bleed is clipped. */
.s4__mesh {
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
.s4__mesh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(0.38);
  will-change: transform;
}


/* ════════════════════════════════════════
   CONTENT WRAPPER
   Frame 50 — 1128px centred
   ════════════════════════════════════════ */

.s4__inner {
  position: relative;
  z-index: 1;
  width: 1128px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
}


/* ════════════════════════════════════════
   HEADER — eyebrow + headline + subtitle
   ════════════════════════════════════════ */

.s4__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

/* Eyebrow: Inter SemiBold 12px, gold, uppercase, tracking 3.264px */
.s4__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3.264px;
  line-height: 16.32px;
  color: var(--color-gold);
  margin: 0;
}

/* Headline: Excon Regular 64px, gradient, second line gold */
.s4__headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 86px;
  letter-spacing: -4px;
  margin: 0;
  background: linear-gradient(to bottom, #ffffff 19.478%, #c0c0c0 93.976%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: 100%;
}

.s4__hl-gold {
  display: block;
  -webkit-text-fill-color: var(--color-gold);
  color: var(--color-gold);
}

/* Subtitle: Inter Medium 18px, muted white, 688px wide */
.s4__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.70);
  width: 688px;
  text-align: center;
  margin: 14px 0 0; /* 30px total gap from title group (30-16=14px extra) */
}


/* ════════════════════════════════════════
   CARDS ROW — 4 cards with 3 dividers
   Total: 4 × 244px + 3 × 1px ≈ 976px within 1128px
   justify-between spreads them to full width
   ════════════════════════════════════════ */

.s4__cards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ── Individual card ── */
.s4__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 244px;
  padding: 20px 8px;
  border-radius: 16px;
  backdrop-filter: blur(22.4px);
  -webkit-backdrop-filter: blur(22.4px);
  flex-shrink: 0;
}

/* Icon container — 69×69px, soft gold background */
.s4__card-icon {
  width: 69px;
  height: 69px;
  border-radius: 20px;
  background: rgba(213, 153, 62, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s4__card-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

/* Card text area */
.s4__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Card title: Excon Medium 20px, white */
.s4__card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 25.2px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

/* Card description: Inter Regular 14px */
.s4__card-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.5px;
  color: rgba(245, 237, 224, 0.70);
  text-align: center;
  margin: 0;
}

/* ── Vertical divider between cards ── */
.s4__divider {
  width: 1px;
  height: 197px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}