*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: auto
}

body {
  background: #080808;
  color: #e8e6e1;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  line-height: 1.7
}

/* ── GATE ── */
#gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center
}

#gate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.gate-inner {
  position: relative;
  z-index: 2;
  max-width: 560px
}

.gate-pub {
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #2aabee;
  margin-bottom: 2.5rem;
  font-weight: 500
}

.gate-warn {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c0392b;
  margin-bottom: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem
}

.gate-hl {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.18;
  color: #f0ede8;
  margin-bottom: 1.5rem;
  font-weight: 700
}

.gate-body {
  font-size: .9rem;
  line-height: 1.75;
  color: #7a7670;
  margin-bottom: 2.5rem
}

.gate-btn {
  display: inline-block;
  padding: .85rem 3rem;
  background: #f0ede8;
  color: #080808;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .2s, transform .15s
}

.gate-btn:hover {
  background: #d8d5d0;
  transform: translateY(-1px)
}

.gate-sub {
  display: block;
  margin-top: 1.2rem;
  font-size: .7rem;
  color: #555;
  cursor: pointer;
  letter-spacing: .1em;
  text-decoration: underline;
  text-underline-offset: 3px
}

/* ── PROGRESS ── */
#pbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: #2aabee;
  z-index: 600;
  width: 0
}

/* ── NAV ── */
#topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 5vw;
  background: rgba(5, 5, 5, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transform: translateY(-100%)
}

.nav-l {
  display: flex;
  align-items: center;
  gap: .7rem
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0392b;
  animation: nblink 2s ease-in-out infinite
}

@keyframes nblink {
  0%, 100% { opacity: 1 }
  50% { opacity: .25 }
}

.nav-brand {
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #f0ede8;
  font-weight: 500
}

.nav-r {
  font-size: .67rem;
  color: #666;
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* ── HERO ── */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25
}

.hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, .65) 45%, rgba(5, 5, 5, .18) 100%)
}

.hero-body {
  position: relative;
  z-index: 2;
  padding: 0 5vw 8vh;
  max-width: 900px
}

.hero-series {
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #2aabee;
  margin-bottom: 1.5rem;
  font-weight: 500
}

.hero-hl {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5.5vw, 5rem);
  line-height: 1.06;
  color: #f0ede8;
  font-weight: 900;
  margin-bottom: 1.25rem
}

.hero-hl em {
  font-style: italic;
  font-weight: 700;
  color: #90b8d4
}

.hero-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(232, 230, 225, .65);
  max-width: 620px;
  margin-bottom: 1.25rem
}

.hero-byline {
  font-size: .75rem;
  color: #555;
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 1rem;
  display: flex;
  column-gap: 2rem;
  row-gap: 0.75rem;
  flex-wrap: wrap;
  line-height: 1.4
}

.hero-byline strong {
  color: rgba(232, 230, 225, .6)
}

#scrollcue, #d3-scrollcue {
  position: absolute;
  bottom: 2.8rem;
  right: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  z-index: 2
}

#scrollcue span, #d3-scrollcue span {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .3)
}

.sc-line {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, .2);
  animation: scl 1.6s ease-in-out infinite
}

@keyframes scl {
  0%, 100% { transform: scaleY(1); opacity: .5 }
  50% { transform: scaleY(.4); opacity: .1 }
}

/* ── CINEMATIC PANELS ── */
.cinema {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh 5vw;
  position: relative
}

.cinema-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.8vw, 3.2rem);
  line-height: 1.38;
  color: #f0ede8;
  max-width: 780px;
  text-align: center;
  font-style: italic;
  font-weight: 400
}

.cinema-text strong {
  font-style: normal;
  font-weight: 900
}

/* ── CINEMA VIDEO WRAP ── */
.cinema-video-wrap {
  position: relative;
}

.cinema-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cinema-bg video {
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
}

.cinema-bg .cinema-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  pointer-events: none;
}

.cinema-content {
  position: relative;
  z-index: 1;
}

.cinema-content .cinema {
  position: relative;
}

/* ── D3 BUBBLE MAP ── */
.d3-section {
  position: relative;
  z-index: 10;
  padding: 8vh 5vw;
  background: #000;
  opacity: 0;
  transform: translateY(20px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.d3-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: #f0ede8;
  margin-bottom: .5rem;
  text-align: center;
}

.d3-sub {
  font-size: .85rem;
  color: #7a7670;
  text-align: center;
  margin-bottom: 2rem;
}

#bubble-map {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  min-height: 400px;
}

.d3-tooltip {
  position: absolute;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  background: rgba(14, 22, 33, 0.95);
  color: #f0ede8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.2s;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.d3-tooltip-title {
  font-weight: 600;
  color: #2aabee;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}

.d3-tooltip-cat {
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6rem;
}

.d3-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.d3-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: #888;
}

.d3-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── STORY BODY ── */
.story {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 5vw
}

/* ── CHAPTER ── */
.chap {
  margin: 8vh 0 2.5vh;
  opacity: 0;
  transform: translateY(20px)
}

.chap-label {
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #2aabee;
  font-weight: 500;
  margin-bottom: .75rem
}

.chap-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  color: #f0ede8;
  font-weight: 700
}

/* ── NARR ── */
.narr {
  font-size: 1.05rem;
  line-height: 1.88;
  color: #b8b4ae;
  margin: 1.75rem 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

.narr.in-view {
  opacity: 1;
  transform: translateY(0);
}

.narr strong {
  color: #f0ede8;
  font-weight: 500
}

.narr a,
.sl {
  color: #2aabee;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity .2s
}

.narr a:hover,
.sl:hover {
  opacity: .72
}

/* ── FULL BLEED ── */
.full-bleed {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 340px;
  overflow: hidden;
  margin: 4rem 0
}

.full-bleed .story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  display: block
}

.fb-vign {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 8, .55) 0%, transparent 30%, transparent 70%, rgba(8, 8, 8, .55) 100%)
}

.fb-cap {
  position: absolute;
  bottom: 1.25rem;
  left: 5vw;
  font-size: .7rem;
  color: rgba(255, 255, 255, .42);
  font-style: italic;
  letter-spacing: .06em
}

/* ── INLINE IMAGE ── */
.inline-img {
  margin: 2.5rem 0;
  opacity: 0;
  transform: translateY(16px)
}

.inline-img .story-img {
  width: 100%;
  display: block;
  border-radius: 2px;
  max-height: 420px;
  object-fit: cover
}

.inline-img-cap {
  font-size: .72rem;
  color: #555;
  margin-top: .6rem;
  font-style: italic;
  line-height: 1.45
}

/* ── TELEGRAM PHONE FRAME ── */
.tg-phone {
  max-width: 420px;
  margin: 2.5rem auto;
  background: #0c0c0c;
  border-radius: 46px;
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 0 0 7px rgba(255,255,255,.025),
    0 32px 72px rgba(0,0,0,.8)
}

.tg-phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .42rem 1.5rem .36rem;
  font-size: .6rem;
  color: rgba(255,255,255,.72);
  font-family: 'Inter', sans-serif;
  font-weight: 600
}

.tg-phone-screen {
  position: relative;
  border-radius: 32px;
  overflow: hidden
}

.tg-phone .inline-img {
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: #17212b !important
}

.tg-fade-top,
.tg-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 20
}

.tg-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #17212b, transparent)
}

.tg-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #0e1621, transparent)
}

/* ── PHONE MOCKUP ── */
.phone-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0;
  opacity: 0;
  transform: translateY(28px)
}

.phone {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  overflow: visible;
  box-shadow: none;
}

.ph-bar {
  display: none;
}

.ph-back {
  font-size: .8rem;
  color: #2aabee;
  flex-shrink: 0
}

.ph-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff
}

.ph-info {
  flex: 1;
  min-width: 0
}

.ph-name {
  font-size: .8rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ph-sub {
  font-size: .65rem;
  color: #5a6e7e
}

.ph-body {
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='%23ffffff' fill-opacity='0.02' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
  min-height: auto;
}

/* bubbles */
.b {
  max-width: 80%;
  border-radius: 11px;
  padding: .55rem .85rem;
  font-size: .8rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px) scale(.97)
}

.b.r {
  background: #1e2c3a;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  color: #dde3ea
}

.b.s {
  background: #2b5278;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  color: #dde3ea
}

.b.sys {
  align-self: center;
  text-align: center;
  background: rgba(42, 171, 238, .09);
  color: rgba(42, 171, 238, .78);
  font-size: .67rem;
  border-radius: 7px;
  padding: .3rem .7rem;
  max-width: 90%
}

.b.dng {
  background: rgba(192, 57, 43, .14);
  border: 1px solid rgba(192, 57, 43, .22);
  color: #f0a0a0
}

.b.wrn {
  background: rgba(212, 160, 23, .1);
  border: 1px solid rgba(212, 160, 23, .2);
  color: #f0d070
}

.b-snd {
  font-size: .65rem;
  font-weight: 600;
  display: block;
  margin-bottom: .2rem
}

.b-snd.bl {
  color: #2aabee
}

.b-snd.rd {
  color: #e07070
}

.b-snd.gd {
  color: #d4a017
}

.b-t {
  font-size: .58rem;
  color: rgba(255, 255, 255, .25);
  float: right;
  margin-left: .5rem;
  margin-top: .15rem
}

/* ── INLINE CHAT ── */
.ic-wrap {
  margin: 2.5rem 0;
  border-left: 2px solid rgba(42, 171, 238, .2);
  padding-left: 1.5rem
}

.ic-label {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2aabee;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(8px)
}

.ic-messages {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.ic-msg {
  display: flex;
  flex-direction: column;
  max-width: 76%;
  opacity: 0;
  transform: translateY(10px) scale(.98)
}

.ic-msg.recv {
  align-self: flex-start;
  align-items: flex-start
}

.ic-msg.sent {
  align-self: flex-end;
  align-items: flex-end
}

.ic-msg.sys-t {
  align-self: center;
  align-items: center;
  max-width: 90%
}

.ic-name {
  font-size: .65rem;
  font-weight: 600;
  color: #2aabee;
  margin-bottom: .18rem
}

.ic-name.rd {
  color: #e07070
}

.ic-bubble {
  padding: .55rem .9rem;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.55
}

.ic-msg.recv .ic-bubble {
  background: #1e2c3a;
  color: #dde3ea;
  border-bottom-left-radius: 3px
}

.ic-msg.sent .ic-bubble {
  background: #2b5278;
  color: #dde3ea;
  border-bottom-right-radius: 3px
}

.ic-msg.sys-t .ic-bubble {
  background: rgba(42, 171, 238, .08);
  color: rgba(160, 200, 230, .75);
  font-size: .7rem;
  text-align: center;
  border-radius: 7px
}

.ic-msg.dng-t .ic-bubble {
  background: rgba(192, 57, 43, .12);
  border: 1px solid rgba(192, 57, 43, .2);
  color: #f0a0a0
}

.ic-msg.wrn-t .ic-bubble {
  background: rgba(212, 160, 23, .09);
  border: 1px solid rgba(212, 160, 23, .18);
  color: #f0d070
}

.ic-time {
  font-size: .58rem;
  color: rgba(255, 255, 255, .22);
  margin-top: .18rem
}

/* ── PULL QUOTE ── */
.pq {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 5vw;
  opacity: 0
}

.pq-inner {
  max-width: 680px;
  text-align: center
}

.pq-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-style: italic;
  line-height: 1.42;
  color: #f0ede8;
  margin-bottom: 1rem
}

.pq-attr {
  font-size: .78rem;
  color: #555;
  letter-spacing: .08em
}

/* ── STATS ── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin: 4rem 0;
  background: #000;
}

.stat {
  padding: 2.5rem 2rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .07);
  opacity: 0;
  transform: translateY(14px)
}

.stat:last-child {
  border-right: none
}

.stat-n {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: .4rem
}

.stat:nth-child(1) .stat-n {
  color: #c0392b
}

.stat:nth-child(2) .stat-n {
  color: #d4a017
}

.stat:nth-child(3) .stat-n {
  color: #2aabee
}

.stat-d {
  font-size: .77rem;
  color: #555;
  line-height: 1.5
}

/* ── REVEAL LINE ── */
.rl {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-style: italic;
  color: #f0ede8;
  line-height: 1.45;
  border-left: 3px solid #c0392b;
  padding: 1rem 1.5rem;
  margin: 2.5rem 0;
  opacity: 0;
  transform: translateX(-18px)
}

/* ── TIMELINE ── */
.timeline {
  margin: 2.5rem 0;
  padding-left: 1.75rem;
  position: relative
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .07)
}

.tl-i {
  position: relative;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateX(-14px)
}

.tl-dot {
  position: absolute;
  left: -1.6rem;
  top: .42rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0e1621;
  border: 2px solid #2aabee
}

.tl-dot.rd {
  border-color: #c0392b
}

.tl-dot.gn {
  border-color: #27ae60
}

.tl-date {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2aabee;
  margin-bottom: .3rem;
  font-weight: 500
}

.tl-title {
  font-weight: 500;
  font-size: .95rem;
  color: #f0ede8;
  margin-bottom: .3rem
}

.tl-desc {
  font-size: .84rem;
  line-height: 1.65;
  color: #666
}

/* ── VERDICT ── */
.verd {
  margin: 2.5rem 0;
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  border-left: 4px solid #c0392b;
  background: rgba(192, 57, 43, .06);
  opacity: 0;
  transform: translateY(14px)
}

.verd.gn {
  border-color: #27ae60;
  background: rgba(39, 174, 96, .06)
}

.verd-label {
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #c0392b;
  font-weight: 600;
  margin-bottom: .5rem
}

.verd.gn .verd-label {
  color: #27ae60
}

.verd-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(240, 237, 232, .82);
  line-height: 1.55
}

.verd-attr {
  font-size: .73rem;
  color: #555;
  margin-top: .65rem
}

/* ── INFOGRAPHIC PLACEHOLDER ── */
.info-placeholder {
  background: #111318;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
  opacity: 0;
  transform: translateY(14px)
}

.info-placeholder p {
  font-size: .78rem;
  color: #444;
  line-height: 1.6
}

.info-placeholder strong {
  color: #2aabee;
  display: block;
  font-size: .85rem;
  margin-bottom: .5rem
}

/* ── CONCLUSION ── */
.conclusion {
  padding: 12vh 5vw;
  background: linear-gradient(to bottom, #080808, #080a10)
}

.con-inner {
  max-width: 720px;
  margin: 0 auto
}

.con-label {
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #2aabee;
  margin-bottom: 1.2rem;
  opacity: 0
}

.con-hl {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.1;
  color: #f0ede8;
  font-weight: 900;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(22px)
}

.con-body {
  font-size: 1rem;
  line-height: 1.85;
  color: #7a7870;
  margin-bottom: 2.5rem;
  opacity: 0
}

.con-credits {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 1.5rem;
  font-size: .77rem;
  color: #444;
  opacity: 0;
  line-height: 1.8
}

.con-credits strong {
  color: rgba(255, 255, 255, .35)
}

footer {
  padding: 2.5rem 5vw;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem
}

footer p {
  font-size: .72rem;
  color: #383634
}

.ft-brand {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2aabee;
  font-weight: 500
}

@media(max-width:600px) {
  .stats {
    grid-template-columns: 1fr
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
  }

  .phone {
    width: 100%;
    border-radius: 20px
  }
}

/* ── EVOLUTION SECTION ── */
.evolution-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #000;
  padding: 4rem 2rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
  opacity: 0;
  transform: translateY(16px);
}

.evolution-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.evolution-hl {
  color: #fff;
  text-align: center;
  margin-bottom: 3.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
}

.evolution-cap {
  color: rgba(255, 255, 255, .38);
  text-align: center;
  padding: .85rem 0 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .evolution-section {
    padding: 3rem 1rem;
  }
  .evolution-hl {
    margin-bottom: 2rem;
  }
}