/* ══════════════════════════════════════════════════════
   SECTION 07 — "What Your Getting / We've equipped you for success"

   Frame 181:4669 — x=156, y=7052 (within Landingpage), w=1128, h=1086
   Section gap: 59px between title-block / content / quote-box

   Background: #150d00 (continuous). Right-side amber orb glow (CSS).

   Layout:
     .s7__title-block  — centred header, eyebrow + headline + subtitle
     .s7__content      — two columns: book card (left 560px) + features (right 528px)
     .s7__quote-box    — full-width gold-border quote box
   ══════════════════════════════════════════════════════ */


/* ── Section shell ── */
.s7 {
  position: relative;
  width: 100%;
  background: #150d00;
  padding: 140px 0 140px;
  overflow: hidden;
  isolation: isolate;
}

/* ── Star/grain texture — color-dodge at 60% (same as s4) ── */
.s7__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  overflow: hidden;
}
.s7__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}


/* ── Right-side orb glow — positioned above the section, glow bleeds in from top-right ── */
.s7__orb {
  position: absolute;
  right: -200px;
  top: 50px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(232, 193, 122, 0.55) 0%,
    rgba(213, 153, 62, 0.25) 35%,
    rgba(213, 153, 62, 0.07) 60%,
    transparent 78%
  );
  box-shadow:
    0px 0px 80px 0px rgba(213, 153, 62, 0.35),
    0px 0px 160px 0px rgba(213, 153, 62, 0.12);
  z-index: 0;
  pointer-events: none;
}


/* ════════════════════════════════════════
   CONTENT WRAPPER — 1128px centred
   ════════════════════════════════════════ */
.s7__inner {
  position: relative;
  z-index: 1;
  width: 1128px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 59px;
}


/* ════════════════════════════════════════
   TITLE BLOCK — centred, eyebrow + headline + subtitle
   ════════════════════════════════════════ */
.s7__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.s7__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;
}

.s7__headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 86px;
  letter-spacing: -4px;
  background: linear-gradient(to bottom, #ffffff 19.478%, #c0c0c0 93.976%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.s7__hl-gold {
  -webkit-text-fill-color: var(--color-gold);
  color: var(--color-gold);
}

.s7__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  width: 688px;
  margin: 14px 0 0;
}


/* ════════════════════════════════════════
   CONTENT ROW — book left + features right
   ════════════════════════════════════════ */
.s7__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ── Workbook card column (left, 560px) ── */
.s7__book-wrap {
  position: relative;
  width: 560px;
  height: 547px;
  flex-shrink: 0;
}

/* Behind-book glow — subtle warm-white halo, power source hidden by book */
.s7__book-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(255, 230, 160, 0.28) 0%,
    rgba(240, 190, 100, 0.18) 35%,
    rgba(213, 153, 62, 0.08) 60%,
    transparent 75%
  );
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* Ambient glow beneath book */
.s7__book-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 560px;
  height: 354px;
  background: rgba(213, 153, 62, 0.14);
  border-radius: 24px;
  filter: blur(40px);
  pointer-events: none;
  transform-origin: bottom center;
}

/* Book container — rotated, centred in wrap */
.s7__book {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  width: 315px;
  height: 419px;
  border-radius: 12px;
  background: #0d1e2e;
  border: 1.23px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 3.785px 25.075px 0px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 1;
}

/* Outer gold border inset */
.s7__book-outer-border {
  position: absolute;
  inset: 14px;
  border: 1.23px solid rgba(213, 153, 62, 0.3);
  border-radius: 12px;
  pointer-events: none;
}

/* Inner gold border inset */
.s7__book-inner-border {
  position: absolute;
  inset: 19px;
  border: 1.23px solid rgba(213, 153, 62, 0.1);
  border-radius: 10px;
  pointer-events: none;
}

/* Corner L-bracket decorations */
.s7__book-corner {
  position: absolute;
  width: 19px;
  height: 19px;
  border-color: rgba(213, 153, 62, 0.5);
  border-style: solid;
  border-width: 0;
}
.s7__book-corner--tl { top: 26px; left: 26px; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 7px; }
.s7__book-corner--tr { top: 22px; right: 20px; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 7px; }
.s7__book-corner--bl { bottom: 30px; left: 20px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 7px; }
.s7__book-corner--br { bottom: 26px; right: 21px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 7px; }

/* Book content area */
.s7__book-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 38px;
}

/* Top decorative line + icon + line */
.s7__book-top-deco {
  display: flex;
  align-items: center;
  gap: 9.5px;
  margin-bottom: 14px;
}

.s7__book-deco-line {
  height: 1.8px;
  width: 38px;
  background: linear-gradient(to right, transparent, rgba(213, 153, 62, 0.6));
}
.s7__book-deco-line--right {
  background: linear-gradient(to left, transparent, rgba(213, 153, 62, 0.6));
}

.s7__book-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Radial Repeat logo */
.s7__book-logo {
  width: 36px;
  height: 36px;
  display: block;
  margin-bottom: 4px;
}

/* "Magnetic Brand" heading */
.s7__book-title {
  font-family: var(--font-display);
  font-size: 29.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.5px;
  white-space: nowrap;
  margin: 0 0 4px;
}
.s7__book-title-white { color: #f5ede0; }
.s7__book-title-gold { color: var(--color-gold); }

/* Separator gradient line */
.s7__book-sep {
  width: 78px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(213, 153, 62, 0.6), transparent);
  margin: 6px 0;
}

/* "BRAND BUILDING WORKBOOK" text */
.s7__book-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: rgba(213, 153, 62, 0.6);
  text-align: center;
  line-height: 1.4;
}

/* Dot separator */
.s7__book-dot-sep {
  display: flex;
  align-items: center;
  gap: 9.7px;
  margin: 14px 0;
}

.s7__book-dot-line {
  height: 1.3px;
  width: 29px;
  background: linear-gradient(to right, transparent, rgba(213, 153, 62, 0.4));
}
.s7__book-dot-line--right {
  background: linear-gradient(to left, transparent, rgba(213, 153, 62, 0.4));
}

.s7__book-dot {
  width: 7.4px;
  height: 7.4px;
  border-radius: 50%;
  background: rgba(213, 153, 62, 0.4);
}

/* "BY INALTUM" text */
.s7__book-byline {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.97px;
  text-transform: uppercase;
  color: rgba(213, 153, 62, 0.54);
  white-space: nowrap;
}

/* "16 SESSIONS" gold badge — positioned on book */
.s7__book-badge {
  position: absolute;
  bottom: 138px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  border-radius: 100px;
  padding: 7px 15px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.64px;
  color: #0d1e2e;
  white-space: nowrap;
}


/* ── Feature cards column (right, 528px) ── */
.s7__features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 528px;
  flex-shrink: 0;
}

/* Single feature card */
.s7__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 23px;
  background: rgba(255, 245, 230, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  backdrop-filter: blur(22.4px);
  -webkit-backdrop-filter: blur(22.4px);
}

/* Icon box */
.s7__feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(213, 153, 62, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s7__feature-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Feature text */
.s7__feature-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s7__feature-title {
  font-family: var(--font-body);
  font-size: 16.8px;
  font-weight: 600;
  line-height: 25.2px;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.s7__feature-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.5px;
  color: rgba(245, 237, 224, 0.7);
  margin: 0;
}


/* ════════════════════════════════════════
   QUOTE BOX — animated border
   Full gold ring always visible; bright spot travels around it.
   ════════════════════════════════════════ */

/* Wrapper — 1px padding reveals ::before as the border ring */
.s7__quote-wrap {
  position: relative;
  border-radius: 17px;
  padding: 1px;
  overflow: hidden;
  box-shadow: 0px 4px 22.8px 0px var(--color-gold);
}

/* Spinning conic-gradient — base 0.65 gold keeps border always visible;
   a bright white-gold spot travels around on top */
.s7__quote-wrap::before {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  width: 200%;
  top: 50%;
  left: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(213, 153, 62, 0.65) 0deg,
    rgba(213, 153, 62, 0.65) 330deg,
    rgba(255, 220, 120, 0.90) 345deg,
    rgba(255, 250, 180, 1.00) 352deg,
    rgba(255, 220, 120, 0.90) 358deg,
    rgba(213, 153, 62, 0.65) 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: s7BorderSpin 4s linear infinite;
  animation-play-state: paused;
}
.s7__quote-wrap.s7--active::before {
  animation-play-state: running;
}

@keyframes s7BorderSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.s7__quote-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 33px;
  border-radius: 16px;
  background: #150d00;
  text-align: center;
}

.s7__quote-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 33.6px;
  color: var(--color-gold);
  margin: 0;
}

.s7__quote-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  width: 844px;
  margin: 0;
}