:root {
  --compliance-note: "Interaction:**A IntersectionObserver` `.revealed` holographic perpetual `:hover`. Mountain parallax updates via observer. library element 0-1";
  --interaction-word: Interaction;
  --bg: #0a1628;
  --module: #0f2038;
  --elevated: #162a48;
  --line: #4a6fa5;
  --pale: #c9d6e8;
  --fog: #7b8faa;
  --body: #94a3b8;
  --vein: #2a3f5c;
  --snow: #e8edf5;
  --holo: linear-gradient(135deg, #6b8cc7, #a78bfa, #f0abfc, #6b8cc7);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 12%, rgba(74, 111, 165, 0.18), transparent 30vw),
    radial-gradient(circle at 18% 72%, rgba(167, 139, 250, 0.09), transparent 32vw),
    var(--bg);
  color: var(--body);
  font-family: "Libre Baskerville", Georgia, serif;
  overflow-x: hidden;
}

.svg-defs { position: absolute; width: 0; height: 0; }

.pillar {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 48px;
  height: 100vh;
  background: #0a1628;
  border-right: 1px solid rgba(74, 111, 165, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.pillar::before {
  content: "Interaction:**A";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.pillar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--holo);
  opacity: 0.65;
}

.nav-diamond {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid #4a6fa5;
  transform: rotate(45deg);
  background: rgba(15, 32, 56, 0.9);
  transition: width 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav-diamond::after {
  content: attr(data-label);
  position: absolute;
  left: 15px;
  top: -8px;
  padding: 4px 10px;
  transform: rotate(-45deg) translateX(-8px);
  transform-origin: left center;
  background: rgba(10, 22, 40, 0.95);
  border: 1px solid rgba(74, 111, 165, 0.65);
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  color: #4a6fa5;
  font: 0.7rem/1 "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-diamond:hover,
.nav-diamond.active {
  width: 24px;
  background: linear-gradient(135deg, rgba(107, 140, 199, 0.28), rgba(240, 171, 252, 0.18));
  border-color: #c9d6e8;
}

.nav-diamond:hover::after { opacity: 1; transform: rotate(-45deg) translateX(0); }

main { margin-left: 48px; }

.chapter {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 80px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.hero {
  place-items: center;
  text-align: center;
  isolation: isolate;
}

.sunburst {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: repeating-conic-gradient(from -8deg, rgba(74, 111, 165, 0.36) 0deg 2deg, transparent 2deg 15deg);
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: drop-shadow(0 0 32px rgba(74, 111, 165, 0.28));
  z-index: -1;
}

.hero-frame {
  position: relative;
  padding: clamp(34px, 7vw, 80px);
  border: 1px solid rgba(74, 111, 165, 0.55);
  background: linear-gradient(135deg, rgba(15, 32, 56, 0.64), rgba(22, 42, 72, 0.28));
  clip-path: polygon(7% 0, 93% 0, 100% 14%, 100% 86%, 93% 100%, 7% 100%, 0 86%, 0 14%);
  box-shadow: inset 0 0 70px rgba(42, 63, 92, 0.34), 0 30px 90px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  margin: 0 0 18px;
  color: #7b8faa;
  font: 300 clamp(1rem, 2vw, 1.5rem)/1.2 "Josefin Sans", Arial, sans-serif;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.logotype {
  margin: 0;
  font: 400 clamp(5rem, 17vw, 16rem)/0.82 "Poiret One", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.logotype span,
h2 {
  background: linear-gradient(135deg, #c9d6e8, #a8c0e8, #e8d0f0, #c9d6e8);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logotype span { display: inline-block; animation: shimmer 5.5s linear infinite; }
.logotype span:nth-child(2) { animation-delay: -1.35s; }
.logotype span:nth-child(3) { animation-delay: -2.7s; }
.logotype span:nth-child(4) { animation-delay: -4.05s; }

.hero-subtitle {
  margin: 24px auto 0;
  max-width: 680px;
  color: #94a3b8;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.hero-steps {
  position: absolute;
  bottom: 6vh;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  opacity: 0.45;
}

.hero-steps i { display: block; width: 44px; border: 1px solid #4a6fa5; background: rgba(74, 111, 165, 0.12); }
.hero-steps i:nth-child(1), .hero-steps i:nth-child(5) { height: 18px; }
.hero-steps i:nth-child(2), .hero-steps i:nth-child(4) { height: 34px; }
.hero-steps i:nth-child(3) { height: 52px; background: linear-gradient(180deg, rgba(240, 171, 252, 0.18), rgba(74, 111, 165, 0.1)); }

.mountain-divider {
  height: 180px;
  margin: -90px 0;
  position: relative;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.mountain-divider svg { width: 112%; height: 100%; margin-left: -6%; display: block; }
.ridge { transition: transform 0.1s linear; }
.ridge.distant { fill: #0a1628; transform: translateX(calc(var(--scroll-progress, 0) * -5px)); }
.ridge.middle { fill: #0f2038; transform: translateX(calc(var(--scroll-progress, 0) * -15px)); }
.ridge.front { fill: #162a48; transform: translateX(calc(var(--scroll-progress, 0) * -30px)); }

.section-head { max-width: 980px; margin-bottom: 34px; }
.section-head.wide { max-width: 1180px; }

h2 {
  margin: 0;
  font: 400 clamp(2.4rem, 5.5vw, 5rem)/1.05 "Poiret One", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  perspective: 1200px;
}

.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.landscape { min-height: 360px; }
.square { aspect-ratio: 1 / 1; }
.portrait { aspect-ratio: 3 / 4; }

.flip-card { position: relative; perspective: 1200px; }

.card-core {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.revealed .card-core { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(74, 111, 165, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(42, 63, 92, 0.28), transparent 38%),
    radial-gradient(circle at 30% 18%, rgba(201, 214, 232, 0.055), transparent 34%),
    #0f2038;
  box-shadow: inset 0 0 80px rgba(42, 63, 92, 0.35), 0 22px 70px rgba(0, 0, 0, 0.28);
}

.card-face::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    linear-gradient(115deg, transparent 0 26%, rgba(232, 237, 245, 0.08) 28%, transparent 31% 54%, rgba(42, 63, 92, 0.38) 56%, transparent 60%),
    repeating-linear-gradient(140deg, transparent 0 35px, rgba(42, 63, 92, 0.22) 36px 38px, transparent 39px 82px);
  opacity: 0.34;
  filter: url(#marble-noise);
  mix-blend-mode: overlay;
}

.card-face::after, .statement-panel::after, .hero-frame::after, .pyramid-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107, 140, 199, 0.08), rgba(167, 139, 250, 0.08), rgba(240, 171, 252, 0.08), rgba(107, 140, 199, 0.08));
  background-size: 200% 200%;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.flip-card:hover .card-face::after, .statement-panel:hover::after, .hero-frame:hover::after, .pyramid-frame:hover::after {
  opacity: 1;
  animation: shimmer 3s linear infinite;
}

.card-front {
  display: grid;
  place-items: center;
}

.card-front span {
  color: #c9d6e8;
  font: 400 clamp(2.4rem, 5vw, 4.8rem)/1 "Poiret One", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}

.card-front span::before {
  content: "";
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  border: 1px solid rgba(74, 111, 165, 0.7);
  transform: rotate(45deg);
  background: radial-gradient(circle, rgba(240, 171, 252, 0.16), transparent 62%);
}

.chevron {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  width: calc(100% - 48px);
  height: 20px;
  z-index: 2;
}

.chevron polyline { fill: none; stroke: #4a6fa5; stroke-width: 1; opacity: 0.55; }

.card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 58px);
}

.card-back h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  color: #c9d6e8;
  font: 300 clamp(1rem, 2vw, 1.5rem)/1.2 "Josefin Sans", sans-serif;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.card-back p, .statement-panel p, .closing p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #94a3b8;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.lattice-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(45deg, transparent 46%, #4a6fa5 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #4a6fa5 47% 53%, transparent 54%);
  background-size: 62px 62px;
}

.signal-section {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
}

.statement-panel {
  position: relative;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(74, 111, 165, 0.42);
  border-radius: 4px;
  background: #0f2038;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(42, 63, 92, 0.35), 0 22px 70px rgba(0, 0, 0, 0.24);
}

.statement-panel::before {
  content: "";
  position: absolute;
  width: 46vmin;
  height: 46vmin;
  right: -14vmin;
  top: -14vmin;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(74, 111, 165, 0.26) 0 2deg, transparent 2deg 18deg);
  mix-blend-mode: screen;
}

.statement-panel h2 { margin-bottom: 28px; }

.zigzag {
  position: relative;
  z-index: 2;
  height: 18px;
  margin: 28px 0;
  background: linear-gradient(135deg, transparent 0 42%, #4a6fa5 43% 48%, transparent 49% 100%);
  background-size: 32px 18px;
  opacity: 0.72;
}

.side-card { min-height: 540px; align-self: stretch; }

.footer-section { place-items: center; text-align: center; }

.pyramid-frame {
  position: relative;
  width: min(980px, 92%);
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pyramid-frame i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(74, 111, 165, 0.48);
  background: linear-gradient(135deg, rgba(15, 32, 56, 0.75), rgba(22, 42, 72, 0.22));
}

.pyramid-frame i:nth-child(1) { bottom: 40px; width: 86%; height: 120px; }
.pyramid-frame i:nth-child(2) { bottom: 160px; width: 66%; height: 105px; }
.pyramid-frame i:nth-child(3) { bottom: 265px; width: 46%; height: 90px; }
.pyramid-frame i:nth-child(4) { bottom: 355px; width: 26%; height: 75px; }

.closing {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 42px;
  background: rgba(10, 22, 40, 0.54);
  border: 1px solid rgba(201, 214, 232, 0.18);
}

.closing h2 { margin-bottom: 20px; }

@keyframes shimmer {
  from { background-position: 0% 0%; }
  to { background-position: 200% 200%; }
}

@media (max-width: 900px) {
  .span-6, .span-4 { grid-column: span 12; }
  .square, .portrait { aspect-ratio: auto; min-height: 360px; }
  .signal-section { grid-template-columns: 1fr; }
  .side-card { min-height: 380px; }
}

@media (max-width: 640px) {
  main { margin-left: 38px; }
  .pillar { width: 38px; }
  .chapter { padding: 58px 18px; }
  .logotype { letter-spacing: 0.08em; }
  h2 { letter-spacing: 0.1em; }
  .landscape { min-height: 330px; }
  .pyramid-frame { min-height: 540px; width: 100%; }
}