/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  font-size: 17px
}

body {
  font-family: 'Tajawal', sans-serif;
  background: #1a1a1a;
  color: #f0edf5;
  min-height: 100vh;
  overflow: hidden;
  direction: rtl
}

/* ===== CATHY DOLL BRAND IDENTITY =====
   Extracted from cathydoll.me official website
   Primary: #FA7598 (signature pink)
   Secondary: #A8FFFB (mint/aqua)
   Dark: #1A1A1A
   Light: #FFFFFF / #F2F2F2
   This creates psychological alignment with Cathy Doll's brand
*/
:root {
  --bg-deep: #1a1a1a;
  --bg-card: rgba(30, 30, 30, .95);
  --bg-card-hover: rgba(40, 40, 40, .95);
  --accent-pink: #FA7598;
  --accent-pink-light: #fca0b5;
  --accent-pink-dark: #e8536f;
  --accent-mint: #A8FFFB;
  --accent-mint-dark: #7ae0dc;
  --accent-white: #ffffff;
  --accent-light: #F2F2F2;
  --text-primary: #f5f2f8;
  --text-secondary: rgba(245, 242, 248, .7);
  --text-muted: rgba(245, 242, 248, .45);
  --border-subtle: rgba(250, 117, 152, .12);
  --border-pink: rgba(250, 117, 152, .3);
  --glow-pink: rgba(250, 117, 152, .15);
  --glow-mint: rgba(168, 255, 251, .1);
  --gradient-pink: linear-gradient(135deg, #FA7598, #fca0b5);
  --gradient-mint: linear-gradient(135deg, #A8FFFB, #7ae0dc);
  --gradient-bg: linear-gradient(135deg, #1a1a1a, #2a2a2a, #1a1a1a);
}

/* ===== COVER SCREEN ===== */
.cover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2030 30%, #2a1a28 60%, #1a1a1a 100%);
  transition: all 1.2s cubic-bezier(.77, 0, .18, 1)
}

.cover.opening {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0;
  pointer-events: none
}

.cover-content {
  text-align: center;
  z-index: 2;
  position: relative
}

.cover-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none
}

.cover-particles .particle {
  position: absolute;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  opacity: .4
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-30px) scale(1.2)
  }
}

.logo-svg {
  width: 180px;
  height: 180px;
  margin-bottom: 28px;
  animation: pulseLogo 3s ease-in-out infinite
}

@keyframes pulseLogo {

  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(250, 117, 152, .3))
  }

  50% {
    filter: drop-shadow(0 0 50px rgba(250, 117, 152, .6))
  }
}

.cover-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  background: var(--gradient-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px
}

.cover-subtitle {
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  color: var(--accent-mint);
  font-weight: 500;
  margin-bottom: 18px
}

.cover-tagline {
  font-size: 1.1rem;
  color: var(--text-secondary);
  letter-spacing: 3px;
  margin-bottom: 44px
}

.open-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 52px;
  border: 2px solid var(--accent-pink);
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .2), rgba(250, 117, 152, .05));
  color: #fff;
  font-family: 'Tajawal';
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .4s;
  box-shadow: 0 8px 32px rgba(250, 117, 152, .2);
  backdrop-filter: blur(10px)
}

.open-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 48px rgba(250, 117, 152, .35);
  background: linear-gradient(135deg, rgba(250, 117, 152, .35), rgba(250, 117, 152, .15));
  color: #fff
}

.open-btn:active {
  transform: scale(.97)
}

/* ===== BOOK CONTAINER ===== */
.book {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--gradient-bg);
  z-index: 100
}

.book.hidden {
  display: none
}

.book.book-opening {
  animation: bookOpen 1s cubic-bezier(.77, 0, .18, 1) forwards
}

@keyframes bookOpen {
  0% {
    transform: perspective(2000px) rotateY(90deg);
    opacity: 0
  }

  100% {
    transform: perspective(2000px) rotateY(0);
    opacity: 1
  }
}

/* ===== NAVIGATION ===== */
.book-nav {
  background: rgba(26, 26, 26, .97);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(20px);
  padding: 10px 0;
  z-index: 10;
  position: relative
}

.nav-inner {
  display: flex;
  gap: 5px;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none
}

.nav-inner::-webkit-scrollbar {
  display: none
}

.nav-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 24px;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Tajawal';
  font-size: .95rem;
  cursor: pointer;
  transition: all .3s;
  white-space: nowrap
}

.nav-tab:hover {
  color: #fff;
  background: rgba(250, 117, 152, .08)
}

.nav-tab.active {
  background: var(--gradient-pink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(250, 117, 152, .3)
}

/* Language Toggle */
.lang-toggle {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 2px solid var(--accent-pink);
  border-radius: 24px;
  background: rgba(250, 117, 152, .1);
  color: #fff;
  font-family: 'Tajawal';
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  white-space: nowrap;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 6px
}

.lang-toggle:hover {
  background: rgba(250, 117, 152, .25);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(250, 117, 152, .25)
}

.lang-flag {
  font-size: 1.1rem
}

.cover-lang-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 10px 22px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Tajawal';
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px
}

.cover-lang-toggle:hover {
  background: rgba(255, 255, 255, .15);
  border-color: var(--accent-pink);
  transform: translateY(-2px)
}

/* LTR Direction overrides */
[dir="ltr"] .page-inner {
  text-align: left
}

[dir="ltr"] .page-header {
  text-align: left
}

[dir="ltr"] .summary-hero,
[dir="ltr"] .investment-box,
[dir="ltr"] .letter {
  text-align: left
}

[dir="ltr"] .dist-arrow {
  transform: scaleX(1)
}

/* ===== BOOK WRAPPER ===== */
.book-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  padding: 20px
}

.book-spine {
  display: none
}

.pages-container {
  flex: 1;
  position: relative;
  perspective: 2000px
}

/* ===== PAGES ===== */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(30deg) scale(.9);
  transition: all .7s cubic-bezier(.77, 0, .18, 1);
  transform-origin: right center;
  padding: 10px
}

.page.active {
  opacity: 1;
  pointer-events: auto;
  transform: rotateY(0) scale(1)
}

.page.flip-out-left {
  transform: rotateY(-40deg) scale(.9);
  opacity: 0
}

.page.flip-out-right {
  transform: rotateY(40deg) scale(.9);
  opacity: 0
}

.page.flip-in-from-right {
  transform: rotateY(30deg) scale(.9);
  opacity: 0
}

.page.flip-in-from-left {
  transform: rotateY(-30deg) scale(.9);
  opacity: 0
}

.page-inner {
  width: 100%;
  max-width: 960px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  padding: 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 117, 152, .25) transparent
}

.page-inner::-webkit-scrollbar {
  width: 6px
}

.page-inner::-webkit-scrollbar-track {
  background: transparent
}

.page-inner::-webkit-scrollbar-thumb {
  background: rgba(250, 117, 152, .25);
  border-radius: 3px
}

/* Page Header */
.page-header {
  margin-bottom: 32px;
  position: relative
}

.page-number {
  display: inline-block;
  background: var(--gradient-pink);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 10px
}

.page-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--accent-pink-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.page-accent {
  width: 70px;
  height: 3px;
  background: var(--gradient-pink);
  border-radius: 2px;
  margin-top: 12px
}

/* ===== PAGE ARROWS ===== */
.page-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 18px;
  background: rgba(26, 26, 26, .97);
  border-top: 1px solid var(--border-subtle)
}

.arrow-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--border-pink);
  border-radius: 30px;
  background: transparent;
  color: var(--accent-pink-light);
  font-family: 'Tajawal';
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s
}

.arrow-btn:hover:not(:disabled) {
  background: rgba(250, 117, 152, .08);
  border-color: var(--accent-pink);
  transform: translateY(-2px)
}

.arrow-btn:disabled {
  opacity: .3;
  cursor: not-allowed
}

.page-indicator {
  font-size: 1rem;
  color: var(--text-secondary);
  min-width: 70px;
  text-align: center
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s cubic-bezier(.23, 1, .32, 1)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

/* ===== PRODUCT IMAGES ===== */
.product-showcase {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0
}

.product-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  padding: 8px;
  transition: all .4s;
  border: 1px solid var(--border-subtle)
}

.product-img:hover {
  transform: scale(1.1) translateY(-6px);
  box-shadow: 0 12px 32px rgba(250, 117, 152, .2);
  border-color: var(--accent-pink)
}

.product-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px 0;
  padding: 20px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  overflow: hidden
}

.product-banner img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 14px;
  flex-shrink: 0
}

.product-banner-info {
  flex: 1
}

.product-banner-info h4 {
  color: var(--accent-pink);
  font-size: 1.1rem;
  margin-bottom: 6px
}

.product-banner-info p {
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.7
}

/* ===== PAGE 0: EXECUTIVE SUMMARY ===== */
.summary-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .05);
  border: 1px solid var(--border-subtle)
}

.summary-icon svg {
  width: 80px;
  height: 80px
}

.summary-lead {
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--text-secondary)
}

.summary-lead strong {
  color: var(--accent-pink)
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 28px
}

.stat-card {
  background: linear-gradient(145deg, rgba(250, 117, 152, .07), rgba(250, 117, 152, .02));
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  transition: all .3s
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--glow-pink);
  border-color: var(--accent-pink)
}

.stat-icon {
  font-size: 1.8rem;
  margin-bottom: 10px
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff
}

.stat-unit {
  font-size: .95rem;
  color: var(--accent-pink);
  font-weight: 700
}

.stat-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 6px
}

.investment-box {
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 24px
}

.investment-box h3 {
  color: var(--accent-pink);
  font-size: 1.2rem;
  margin-bottom: 18px
}

.invest-grid {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.invest-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px
}

.invest-label {
  flex: 1;
  min-width: 110px;
  font-size: 1rem;
  color: var(--text-secondary)
}

.invest-value {
  font-weight: 700;
  color: #fff;
  font-size: 1rem
}

.invest-bar {
  flex-basis: 100%;
  height: 7px;
  background: rgba(255, 255, 255, .05);
  border-radius: 4px;
  overflow: hidden
}

.invest-fill {
  height: 100%;
  background: var(--gradient-pink);
  border-radius: 4px;
  transition: width 1.5s ease
}

.targets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px
}

.target-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 30px;
  background: rgba(250, 117, 152, .06);
  border: 1px solid var(--border-subtle);
  font-size: .95rem;
  transition: all .3s
}

.target-pill:hover {
  background: rgba(250, 117, 152, .12);
  border-color: var(--accent-pink)
}

.pill-icon {
  font-size: 1.2rem
}

.vision-box {
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .1), rgba(168, 255, 251, .05));
  border: 1px solid var(--border-pink);
  text-align: center
}

.vision-quote {
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--accent-mint);
  font-style: italic
}

/* ===== PAGE 1: MARKET ===== */
.market-hero {
  text-align: center;
  margin-bottom: 32px;
  padding: 28px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(250, 117, 152, .08), transparent)
}

.big-num {
  font-size: 3.8rem;
  font-weight: 900;
  background: var(--gradient-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.big-unit {
  font-size: 1.3rem;
  color: var(--accent-pink);
  display: block
}

.market-hero p {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 1rem
}

.market-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  flex-wrap: wrap
}

.timeline-point {
  text-align: center;
  padding: 14px 24px;
  border-radius: 14px;
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  min-width: 110px
}

.timeline-point.highlight {
  background: rgba(250, 117, 152, .12);
  border-color: var(--accent-pink);
  box-shadow: 0 0 24px var(--glow-pink)
}

.tp-year {
  font-size: .9rem;
  color: var(--text-muted)
}

.tp-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff
}

.timeline-line {
  width: 45px;
  height: 2px;
  background: var(--gradient-pink);
  flex-shrink: 0
}

.market-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px
}

.m-card {
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all .3s
}

.m-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-pink)
}

.m-card-icon {
  font-size: 2rem;
  margin-bottom: 10px
}

.m-card h4 {
  font-size: .95rem;
  color: var(--accent-pink);
  margin-bottom: 6px
}

.m-card-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff
}

.m-card-detail {
  font-size: .85rem;
  color: var(--text-muted)
}

.opportunity-box {
  padding: 24px;
  border-radius: 16px;
  background: rgba(168, 255, 251, .04);
  border: 1px solid rgba(168, 255, 251, .15)
}

.opportunity-box h3 {
  color: var(--accent-mint);
  font-size: 1.1rem;
  margin-bottom: 16px
}

.opp-items {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.opp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem
}

.opp-badge {
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(250, 117, 152, .1);
  color: var(--accent-pink);
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0
}

.challenge-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(168, 255, 251, .04);
  border: 1px solid rgba(168, 255, 251, .12);
  margin-top: 18px
}

.note-icon {
  font-size: 1.3rem
}

.challenge-note p {
  font-size: .95rem;
  color: var(--text-secondary)
}

/* ===== PAGE 2: COMPETITORS ===== */
.price-range {
  text-align: center;
  margin-bottom: 28px
}

.price-range>span {
  font-size: .95rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 10px
}

.price-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto
}

.price-min,
.price-max {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-pink)
}

.price-fill {
  flex: 1;
  height: 8px;
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-pink), var(--accent-pink-dark));
  border-radius: 4px
}

.competitor-table {
  margin-bottom: 28px;
  overflow-x: auto
}

.comp-row {
  display: grid;
  grid-template-columns: 1.2fr .7fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: .92rem;
  align-items: center;
  transition: all .3s
}

.comp-row:not(.comp-header):hover {
  background: rgba(250, 117, 152, .04)
}

.comp-header {
  background: rgba(250, 117, 152, .1);
  color: var(--accent-pink);
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 6px
}

.comp-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #fff
}

.comp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0
}

.comp-opp {
  color: var(--accent-mint);
  font-weight: 600
}

.swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px
}

.swot-card {
  padding: 18px;
  border-radius: 16px;
  transition: all .3s
}

.swot-card:hover {
  transform: translateY(-3px)
}

.swot-card h4 {
  font-size: 1rem;
  margin-bottom: 8px
}

.swot-card p {
  font-size: .9rem;
  color: var(--text-secondary)
}

.swot-s {
  background: rgba(168, 255, 251, .07);
  border: 1px solid rgba(168, 255, 251, .18)
}

.swot-w {
  background: rgba(250, 117, 152, .07);
  border: 1px solid rgba(250, 117, 152, .18)
}

.swot-o {
  background: rgba(250, 117, 152, .07);
  border: 1px solid rgba(250, 117, 152, .18)
}

.swot-t {
  background: rgba(168, 255, 251, .07);
  border: 1px solid rgba(168, 255, 251, .18)
}

.goal-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .12), rgba(250, 117, 152, .04));
  border: 1px solid var(--border-pink);
  font-size: 1.05rem;
  font-weight: 600
}

.goal-icon {
  font-size: 1.4rem
}

/* ===== PAGE 3: SEGMENTS ===== */
.segment-split {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 32px
}

.segment-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .4s
}

.segment-circle:hover {
  transform: scale(1.1)
}

.b2c {
  background: linear-gradient(135deg, rgba(250, 117, 152, .18), rgba(250, 117, 152, .05));
  border: 2px solid var(--accent-pink)
}

.b2b {
  background: linear-gradient(135deg, rgba(168, 255, 251, .15), rgba(168, 255, 251, .05));
  border: 2px solid var(--accent-mint)
}

.seg-percent {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff
}

.seg-label {
  font-size: .9rem;
  color: var(--text-secondary)
}

.segment-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.seg-card {
  padding: 24px;
  border-radius: 18px;
  transition: all .3s
}

.seg-card:hover {
  transform: translateY(-3px)
}

.b2c-card {
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle)
}

.b2b-card {
  background: rgba(168, 255, 251, .04);
  border: 1px solid rgba(168, 255, 251, .1)
}

.seg-card h3 {
  font-size: 1.05rem;
  margin-bottom: 16px;
  color: #fff
}

.seg-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px
}

.seg-info {
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03)
}

.seg-info-label {
  display: block;
  font-size: .8rem;
  color: var(--text-muted)
}

.seg-info-val {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: #fff
}

.seg-big-number {
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(250, 117, 152, .06)
}

.seg-big {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-pink)
}

.b2b-channels {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.b2b-ch {
  display: flex;
  align-items: center;
  gap: 12px
}

.b2b-bar {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(168, 255, 251, .25), rgba(168, 255, 251, .08));
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: .9rem;
  color: #fff;
  width: var(--w);
  max-width: var(--w);
  transition: max-width 1s ease
}

.b2b-pct {
  font-weight: 700;
  color: var(--accent-mint);
  font-size: 1rem
}

/* ===== PAGE 4: POSITIONING ===== */
.positioning-hero {
  text-align: center;
  margin-bottom: 36px;
  padding: 36px 24px;
  border-radius: 22px;
  background: radial-gradient(ellipse, rgba(250, 117, 152, .06), transparent);
  border: 1px solid var(--border-subtle)
}

.pos-quote {
  font-size: 1.3rem;
  line-height: 2.1;
  color: var(--accent-pink-light);
  position: relative
}

.quote-mark {
  font-size: 3.5rem;
  color: rgba(250, 117, 152, .3);
  vertical-align: middle;
  line-height: 0
}

.usp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 32px
}

.usp-card {
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  transition: all .4s
}

.usp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px var(--glow-pink);
  border-color: var(--accent-pink)
}

.usp-icon {
  font-size: 2.8rem;
  margin-bottom: 14px
}

.usp-card h4 {
  color: var(--accent-pink);
  font-size: 1.1rem;
  margin-bottom: 10px
}

.usp-card p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7
}

.hashtag-box {
  text-align: center;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .12), rgba(168, 255, 251, .06));
  border: 1px solid var(--border-pink)
}

.hashtag {
  font-size: 2.2rem;
  font-weight: 900;
  background: var(--gradient-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px
}

.hashtag-msg {
  color: var(--text-secondary);
  font-size: 1.1rem
}

/* ===== PAGE 5: DISTRIBUTION ===== */
.dist-structure {
  margin-bottom: 32px
}

.dist-structure h3 {
  color: var(--accent-pink);
  font-size: 1.1rem;
  margin-bottom: 18px
}

.dist-bars {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.dist-bar-item {
  display: flex;
  align-items: center;
  gap: 16px
}

.dist-bar-label {
  min-width: 80px;
  font-size: .95rem;
  color: var(--text-secondary)
}

.dist-bar-track {
  flex: 1;
  height: 32px;
  background: rgba(255, 255, 255, .04);
  border-radius: 16px;
  overflow: hidden
}

.dist-bar-fill {
  height: 100%;
  background: var(--gradient-pink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  width: 0;
  transition: width 1.5s cubic-bezier(.23, 1, .32, 1)
}

.dist-bar-fill.animated {
  width: var(--target)
}

.dist-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap
}

.dist-phase {
  padding: 24px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  text-align: center;
  min-width: 180px;
  transition: all .3s
}

.dist-phase.highlight {
  border-color: var(--accent-pink);
  box-shadow: 0 0 32px var(--glow-pink)
}

.phase-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 20px;
  background: rgba(250, 117, 152, .15);
  color: var(--accent-pink);
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 12px
}

.phase-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff
}

.phase-label {
  font-size: .9rem;
  color: var(--text-muted)
}

.phase-progress {
  height: 6px;
  background: rgba(255, 255, 255, .05);
  border-radius: 3px;
  margin-top: 12px;
  overflow: hidden
}

.phase-fill {
  height: 100%;
  background: var(--gradient-pink);
  border-radius: 3px
}

.dist-arrow {
  font-size: 1.6rem;
  color: var(--accent-pink)
}

.coverage-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(168, 255, 251, .06), rgba(168, 255, 251, .02));
  border: 1px solid rgba(168, 255, 251, .18);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-mint)
}

/* ===== PAGE 6: CHAINS ===== */
.chains-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.chain-category {
  padding: 20px;
  border-radius: 16px;
  background: rgba(250, 117, 152, .03);
  border: 1px solid var(--border-subtle);
  transition: all .3s
}

.chain-category:hover {
  border-color: rgba(250, 117, 152, .2)
}

.chain-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px
}

.chain-icon {
  font-size: 1.6rem
}

.chain-cat-header h3 {
  font-size: 1rem;
  color: var(--accent-pink)
}

.chain-items {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.chain-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  transition: all .3s
}

.chain-item:hover {
  background: rgba(250, 117, 152, .05)
}

.chain-name {
  font-weight: 600;
  color: #fff;
  font-size: .95rem
}

.chain-detail {
  font-size: .85rem;
  color: var(--text-muted)
}

/* ===== PAGE 7: MARKETING ===== */
.marketing-budget {
  text-align: center;
  margin-bottom: 28px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .05);
  border: 1px solid var(--border-subtle)
}

.budget-label {
  display: block;
  font-size: .95rem;
  color: var(--text-muted);
  margin-bottom: 6px
}

.budget-val {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--accent-pink)
}

.marketing-channels {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px
}

.mkt-channel {
  padding: 18px;
  border-radius: 16px;
  background: rgba(250, 117, 152, .03);
  border: 1px solid var(--border-subtle);
  transition: all .3s
}

.mkt-channel:hover {
  border-color: var(--accent-pink)
}

.mkt-ch-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px
}

.mkt-icon {
  font-size: 1.3rem
}

.mkt-ch-header span:nth-child(2) {
  flex: 1;
  font-weight: 600;
  color: #fff;
  font-size: 1rem
}

.mkt-pct {
  font-weight: 800;
  color: var(--accent-pink);
  font-size: 1rem
}

.mkt-ch-detail {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 10px
}

.mkt-bar {
  height: 7px;
  background: rgba(255, 255, 255, .04);
  border-radius: 4px;
  overflow: hidden
}

.mkt-fill {
  height: 100%;
  background: var(--gradient-pink);
  border-radius: 4px;
  width: 0;
  transition: width 1.5s ease
}

.mkt-fill.animated {
  width: var(--w)
}

.marketing-targets {
  display: flex;
  justify-content: center;
  gap: 48px
}

.mkt-target {
  text-align: center
}

.mkt-t-val {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff
}

.mkt-t-unit {
  font-size: 1rem;
  color: var(--accent-pink);
  font-weight: 700
}

.mkt-t-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 6px
}

/* ===== PAGE 8: LAUNCH ===== */
.launch-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.launch-phase {
  padding: 24px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .03);
  border: 1px solid var(--border-subtle);
  transition: all .3s
}

.launch-phase:hover {
  transform: translateY(-3px);
  border-color: var(--accent-pink)
}

.highlight-phase {
  background: rgba(250, 117, 152, .08);
  border-color: var(--accent-pink);
  box-shadow: 0 0 32px var(--glow-pink)
}

.lp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px
}

.lp-badge {
  padding: 5px 14px;
  border-radius: 14px;
  font-size: .8rem;
  font-weight: 700;
  color: #fff
}

.lp-1 {
  background: #FA7598
}

.lp-2 {
  background: #fca0b5
}

.lp-3 {
  background: #A8FFFB;
  color: #1a1a1a
}

.lp-4 {
  background: var(--gradient-pink)
}

.lp-months {
  font-size: .85rem;
  color: var(--text-muted)
}

.launch-phase h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 6px
}

.launch-phase p {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 14px
}

.lp-stats {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  margin-bottom: 10px
}

.lp-budget {
  color: var(--accent-pink);
  font-weight: 600
}

.lp-goal {
  color: var(--accent-mint);
  font-weight: 600
}

.lp-progress {
  height: 5px;
  background: rgba(255, 255, 255, .04);
  border-radius: 3px;
  overflow: hidden
}

.lp-fill {
  height: 100%;
  background: var(--gradient-pink);
  border-radius: 3px
}

/* ===== PAGE 9: BUDGET ===== */
.budget-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 32px
}

.budget-circle {
  position: relative;
  width: 210px;
  height: 210px
}

.budget-chart {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.budget-seg {
  transition: stroke-dasharray 1.5s ease
}

.budget-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.bc-val {
  font-size: 2rem;
  font-weight: 900;
  color: #fff
}

.bc-label {
  font-size: .85rem;
  color: var(--text-muted)
}

.budget-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px
}

.budget-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: all .3s
}

.budget-item:hover {
  background: rgba(250, 117, 152, .04)
}

.bi-color {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  flex-shrink: 0
}

.bi-info {
  flex: 1
}

.bi-name {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: #fff
}

.bi-detail {
  display: block;
  font-size: .8rem;
  color: var(--text-muted)
}

.bi-pct {
  font-weight: 800;
  color: var(--accent-pink);
  font-size: 1rem;
  min-width: 44px;
  text-align: center
}

.bi-amount {
  font-size: .9rem;
  color: var(--text-secondary);
  min-width: 90px;
  text-align: left
}

.budget-total-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .1), rgba(250, 117, 152, .04));
  border: 1px solid var(--border-pink);
  font-size: 1.1rem
}

.budget-total-box strong {
  color: var(--accent-pink);
  font-size: 1.2rem
}

/* ===== PAGE 10: KPIs ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 18px
}

.kpi-card {
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  transition: all .4s
}

.kpi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px var(--glow-pink);
  border-color: var(--accent-pink)
}

.kpi-icon-wrap {
  font-size: 1.6rem;
  margin-bottom: 12px
}

.kpi-val {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff
}

.kpi-unit {
  font-size: .95rem;
  color: var(--accent-pink);
  font-weight: 700
}

.kpi-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 8px
}

.kpi-range {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 6px
}

/* ===== PAGE 11: PROTECTION ===== */
.protection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.protect-card {
  padding: 28px;
  border-radius: 18px;
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  text-align: center;
  transition: all .4s
}

.protect-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-pink)
}

.protect-icon {
  font-size: 2.2rem;
  margin-bottom: 14px
}

.protect-card h4 {
  color: var(--accent-pink);
  font-size: 1.05rem;
  margin-bottom: 10px
}

.protect-card p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7
}

/* ===== PAGE 12: EXPANSION ===== */
.expansion-hero {
  margin-bottom: 36px
}

.exp-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 36px;
  border-radius: 22px;
  background: rgba(250, 117, 152, .03);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap
}

.exp-point {
  text-align: center;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border-subtle);
  min-width: 150px;
  transition: all .3s
}

.exp-point:hover {
  transform: scale(1.05)
}

.active-point {
  border-color: var(--accent-mint);
  box-shadow: 0 0 24px rgba(168, 255, 251, .1)
}

.exp-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: 10px
}

.active-point .exp-dot {
  background: var(--accent-mint);
  box-shadow: 0 0 12px var(--accent-mint)
}

.uae .exp-dot {
  background: var(--accent-pink);
  box-shadow: 0 0 12px var(--accent-pink)
}

.exp-country {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px
}

.exp-status {
  display: block;
  font-size: .85rem;
  color: var(--text-muted)
}

.exp-arrow {
  flex-shrink: 0
}

.exp-arrow svg path {
  stroke: var(--accent-pink)
}

.exp-arrow svg polygon {
  fill: var(--accent-pink)
}

.expansion-stats {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap
}

.exp-stat {
  text-align: center;
  padding: 24px;
  border-radius: 16px;
  background: rgba(250, 117, 152, .04);
  border: 1px solid var(--border-subtle);
  min-width: 140px;
  transition: all .3s
}

.exp-stat:hover {
  transform: translateY(-3px)
}

.exp-val {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-pink)
}

.exp-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 6px
}

/* ===== PAGE 13: PROPOSAL ===== */
.letter {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 36px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden
}

.letter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(250, 117, 152, .1), transparent);
  border-radius: 50%
}

.letter-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle)
}

.letter-to {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-pink);
  margin-bottom: 10px
}

.letter-subject {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7
}

.letter-body {
  margin-bottom: 28px
}

.letter-body p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 14px
}

.letter-body strong {
  color: var(--accent-pink)
}

.letter-benefits {
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(168, 255, 251, .03);
  border: 1px solid rgba(168, 255, 251, .1)
}

.letter-benefits h4 {
  color: var(--accent-mint);
  font-size: 1rem;
  margin-bottom: 14px
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: .95rem
}

.benefit-check {
  font-size: 1.1rem
}

.letter-footer {
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle)
}

.letter-footer p {
  font-size: .95rem;
  color: var(--text-secondary);
  margin-bottom: 14px
}

.letter-signature {
  text-align: center
}

.sig-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff
}

.sig-company {
  font-size: .95rem;
  color: var(--accent-pink)
}

.cta-section {
  text-align: center;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(250, 117, 152, .12), rgba(168, 255, 251, .06));
  border: 1px solid var(--border-pink)
}

.cta-text {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 14px
}

.cta-hashtag {
  font-size: 2.2rem;
  font-weight: 900;
  background: var(--gradient-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pulseLogo 3s ease-in-out infinite
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  html {
    font-size: 15px
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .segment-details {
    grid-template-columns: 1fr
  }

  .swot-grid {
    grid-template-columns: 1fr
  }

  .chains-section {
    grid-template-columns: 1fr
  }

  .launch-phases {
    grid-template-columns: 1fr
  }

  .protection-grid {
    grid-template-columns: 1fr
  }

  .competitor-table {
    font-size: .82rem
  }

  .comp-row {
    grid-template-columns: 1fr .6fr .8fr .8fr .8fr
  }

  .book-wrapper {
    padding: 10px 6px
  }

  .page-inner {
    padding: 24px 18px
  }

  .segment-split {
    gap: 24px
  }

  .segment-circle {
    width: 100px;
    height: 100px
  }

  .seg-percent {
    font-size: 1.7rem
  }

  .product-img {
    width: 90px;
    height: 90px
  }
}

@media(max-width:480px) {
  html {
    font-size: 14px
  }

  .stats-grid {
    grid-template-columns: 1fr
  }

  .market-cards {
    grid-template-columns: 1fr 1fr
  }

  .comp-row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 5px
  }

  .comp-header {
    display: none
  }

  .competitor-table .comp-row:not(.comp-header) {
    background: rgba(250, 117, 152, .03);
    margin-bottom: 8px;
    border-radius: 14px
  }

  .usp-cards {
    grid-template-columns: 1fr
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr
  }

  .product-showcase {
    gap: 10px
  }

  .product-img {
    width: 80px;
    height: 80px
  }
}

/* ===== SLIDE THEMES – Matching cathydoll.me Banner Styles ===== */

/* --- THEME: NAVY (Dark Blue — POM POM BOY style) --- */
.theme-navy .page-inner {
  background: linear-gradient(145deg, #0b1929 0%, #0f2035 50%, #0a1525 100%);
  border-color: rgba(100, 160, 255, .12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(100, 160, 255, .06)
}

.theme-navy .page-number {
  background: linear-gradient(135deg, #4a8fdd, #6ab0f7)
}

.theme-navy .page-title {
  background: linear-gradient(135deg, #ffffff, #b0d4ff);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-navy .page-accent {
  background: linear-gradient(90deg, #4a8fdd, #6ab0f7)
}

.theme-navy .stat-card,
.theme-navy .m-card,
.theme-navy .usp-card,
.theme-navy .kpi-card,
.theme-navy .chain-category,
.theme-navy .protect-card,
.theme-navy .exp-stat {
  background: linear-gradient(145deg, rgba(74, 143, 221, .08), rgba(74, 143, 221, .02));
  border-color: rgba(74, 143, 221, .15)
}

.theme-navy .stat-card:hover,
.theme-navy .m-card:hover,
.theme-navy .usp-card:hover,
.theme-navy .kpi-card:hover,
.theme-navy .protect-card:hover {
  box-shadow: 0 12px 40px rgba(74, 143, 221, .2);
  border-color: rgba(106, 176, 247, .4)
}

.theme-navy .stat-unit,
.theme-navy .m-card h4,
.theme-navy .usp-card h4,
.theme-navy .chain-cat-header h3,
.theme-navy .investment-box h3,
.theme-navy .protect-card h4,
.theme-navy .product-banner-info h4 {
  color: #6ab0f7
}

.theme-navy .summary-hero,
.theme-navy .investment-box,
.theme-navy .marketing-budget {
  background: rgba(74, 143, 221, .06);
  border-color: rgba(74, 143, 221, .15)
}

.theme-navy .summary-lead strong {
  color: #6ab0f7
}

.theme-navy .target-pill {
  background: rgba(74, 143, 221, .08);
  border-color: rgba(74, 143, 221, .15)
}

.theme-navy .target-pill:hover {
  background: rgba(74, 143, 221, .15);
  border-color: #6ab0f7
}

.theme-navy .vision-box {
  background: linear-gradient(135deg, rgba(74, 143, 221, .1), rgba(100, 200, 250, .05));
  border-color: rgba(74, 143, 221, .25)
}

.theme-navy .vision-quote {
  color: #90ccff
}

.theme-navy .product-img {
  background: rgba(74, 143, 221, .06);
  border-color: rgba(74, 143, 221, .12)
}

.theme-navy .product-img:hover {
  box-shadow: 0 12px 32px rgba(74, 143, 221, .25);
  border-color: #6ab0f7
}

.theme-navy .product-banner {
  background: rgba(74, 143, 221, .05);
  border-color: rgba(74, 143, 221, .12)
}

.theme-navy .segment-circle.b2c {
  background: linear-gradient(135deg, rgba(74, 143, 221, .18), rgba(74, 143, 221, .05));
  border-color: #6ab0f7
}

.theme-navy .seg-card.b2c-card {
  background: rgba(74, 143, 221, .05);
  border-color: rgba(74, 143, 221, .12)
}

.theme-navy .seg-big {
  color: #6ab0f7
}

.theme-navy .budget-val,
.theme-navy .bi-pct,
.theme-navy .kpi-unit,
.theme-navy .mkt-pct,
.theme-navy .lp-budget,
.theme-navy .exp-val {
  color: #6ab0f7
}

.theme-navy .invest-fill,
.theme-navy .dist-bar-fill,
.theme-navy .mkt-fill,
.theme-navy .lp-fill,
.theme-navy .phase-fill {
  background: linear-gradient(90deg, #4a8fdd, #6ab0f7)
}

.theme-navy .hashtag-box {
  background: linear-gradient(135deg, rgba(74, 143, 221, .1), rgba(100, 200, 250, .05));
  border-color: rgba(74, 143, 221, .25)
}

.theme-navy .hashtag {
  background: linear-gradient(135deg, #4a8fdd, #6ab0f7);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-navy .cta-section {
  background: linear-gradient(135deg, rgba(74, 143, 221, .12), rgba(100, 200, 250, .06));
  border-color: rgba(74, 143, 221, .25)
}

.theme-navy .cta-hashtag {
  background: linear-gradient(135deg, #4a8fdd, #6ab0f7);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-navy .budget-total-box {
  background: linear-gradient(135deg, rgba(74, 143, 221, .1), rgba(74, 143, 221, .04));
  border-color: rgba(74, 143, 221, .25)
}

.theme-navy .chain-item:hover {
  background: rgba(74, 143, 221, .06)
}

.theme-navy .mkt-channel {
  background: rgba(74, 143, 221, .04);
  border-color: rgba(74, 143, 221, .1)
}

.theme-navy .mkt-channel:hover {
  border-color: #6ab0f7
}

.theme-navy .launch-phase {
  background: rgba(74, 143, 221, .04);
  border-color: rgba(74, 143, 221, .1)
}

.theme-navy .launch-phase:hover {
  border-color: #6ab0f7
}

.theme-navy .highlight-phase {
  background: rgba(74, 143, 221, .1);
  border-color: #6ab0f7;
  box-shadow: 0 0 32px rgba(74, 143, 221, .15)
}

.theme-navy .budget-item:hover {
  background: rgba(74, 143, 221, .05)
}

.theme-navy .goal-banner {
  background: linear-gradient(135deg, rgba(74, 143, 221, .12), rgba(74, 143, 221, .04));
  border-color: rgba(74, 143, 221, .25)
}

.theme-navy .comp-header {
  background: rgba(74, 143, 221, .12);
  color: #6ab0f7
}

.theme-navy .letter {
  background: rgba(74, 143, 221, .03);
  border-color: rgba(74, 143, 221, .12)
}

.theme-navy .letter::before {
  background: radial-gradient(circle, rgba(74, 143, 221, .1), transparent)
}

.theme-navy .letter-to {
  color: #6ab0f7
}

.theme-navy .letter-body strong {
  color: #6ab0f7
}

.theme-navy .letter-benefits {
  background: rgba(100, 200, 250, .04);
  border-color: rgba(100, 200, 250, .12)
}

.theme-navy .letter-benefits h4 {
  color: #90ccff
}

.theme-navy .sig-company {
  color: #6ab0f7
}

.theme-navy .dist-phase {
  background: rgba(74, 143, 221, .04);
  border-color: rgba(74, 143, 221, .1)
}

.theme-navy .dist-phase.highlight {
  border-color: #6ab0f7;
  box-shadow: 0 0 32px rgba(74, 143, 221, .15)
}

.theme-navy .phase-badge {
  background: rgba(74, 143, 221, .18);
  color: #6ab0f7
}

.theme-navy .coverage-badge {
  background: linear-gradient(135deg, rgba(100, 200, 250, .08), rgba(100, 200, 250, .02));
  border-color: rgba(100, 200, 250, .2);
  color: #90ccff
}

.theme-navy .exp-point {
  background: rgba(74, 143, 221, .03);
  border-color: rgba(74, 143, 221, .1)
}

.theme-navy .active-point {
  border-color: #90ccff;
  box-shadow: 0 0 24px rgba(100, 200, 250, .1)
}

.theme-navy .active-point .exp-dot {
  background: #90ccff;
  box-shadow: 0 0 12px #90ccff
}

.theme-navy .swot-s,
.theme-navy .swot-t {
  background: rgba(100, 200, 250, .07);
  border-color: rgba(100, 200, 250, .18)
}

.theme-navy .swot-w,
.theme-navy .swot-o {
  background: rgba(74, 143, 221, .07);
  border-color: rgba(74, 143, 221, .18)
}

.theme-navy .opp-badge {
  background: rgba(74, 143, 221, .12);
  color: #6ab0f7
}

.theme-navy .challenge-note {
  background: rgba(100, 200, 250, .05);
  border-color: rgba(100, 200, 250, .12)
}

/* --- THEME: PINK (Soft Pastel — POM POM GIRL style) --- */
.theme-pink .page-inner {
  background: linear-gradient(145deg, #2a1520 0%, #301828 50%, #25121e 100%);
  border-color: rgba(250, 117, 152, .15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(250, 117, 152, .06)
}

.theme-pink .page-number {
  background: linear-gradient(135deg, #FA7598, #ff9ab8)
}

.theme-pink .page-title {
  background: linear-gradient(135deg, #ffffff, #ffb8cb);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-pink .page-accent {
  background: linear-gradient(90deg, #FA7598, #ff9ab8)
}

.theme-pink .stat-card,
.theme-pink .m-card,
.theme-pink .usp-card,
.theme-pink .kpi-card,
.theme-pink .chain-category,
.theme-pink .protect-card,
.theme-pink .exp-stat {
  background: linear-gradient(145deg, rgba(250, 117, 152, .1), rgba(250, 117, 152, .03));
  border-color: rgba(250, 117, 152, .18)
}

.theme-pink .stat-card:hover,
.theme-pink .m-card:hover,
.theme-pink .usp-card:hover,
.theme-pink .kpi-card:hover,
.theme-pink .protect-card:hover {
  box-shadow: 0 12px 40px rgba(250, 117, 152, .25);
  border-color: rgba(250, 117, 152, .4)
}

.theme-pink .stat-unit,
.theme-pink .m-card h4,
.theme-pink .usp-card h4,
.theme-pink .chain-cat-header h3,
.theme-pink .investment-box h3,
.theme-pink .protect-card h4,
.theme-pink .product-banner-info h4 {
  color: #ff9ab8
}

.theme-pink .summary-hero,
.theme-pink .investment-box,
.theme-pink .marketing-budget {
  background: rgba(250, 117, 152, .08);
  border-color: rgba(250, 117, 152, .18)
}

.theme-pink .summary-lead strong {
  color: #ff9ab8
}

.theme-pink .target-pill {
  background: rgba(250, 117, 152, .1);
  border-color: rgba(250, 117, 152, .18)
}

.theme-pink .target-pill:hover {
  background: rgba(250, 117, 152, .18);
  border-color: #ff9ab8
}

.theme-pink .vision-box {
  background: linear-gradient(135deg, rgba(250, 117, 152, .12), rgba(255, 180, 200, .06));
  border-color: rgba(250, 117, 152, .3)
}

.theme-pink .vision-quote {
  color: #ffb8cb
}

.theme-pink .product-img {
  background: rgba(250, 117, 152, .08);
  border-color: rgba(250, 117, 152, .15)
}

.theme-pink .product-img:hover {
  box-shadow: 0 12px 32px rgba(250, 117, 152, .3);
  border-color: #ff9ab8
}

.theme-pink .product-banner {
  background: rgba(250, 117, 152, .06);
  border-color: rgba(250, 117, 152, .15)
}

.theme-pink .segment-circle.b2c {
  background: linear-gradient(135deg, rgba(250, 117, 152, .2), rgba(250, 117, 152, .06));
  border-color: #ff9ab8
}

.theme-pink .seg-card.b2c-card {
  background: rgba(250, 117, 152, .06);
  border-color: rgba(250, 117, 152, .15)
}

.theme-pink .seg-big {
  color: #ff9ab8
}

.theme-pink .budget-val,
.theme-pink .bi-pct,
.theme-pink .kpi-unit,
.theme-pink .mkt-pct,
.theme-pink .lp-budget,
.theme-pink .exp-val {
  color: #ff9ab8
}

.theme-pink .invest-fill,
.theme-pink .dist-bar-fill,
.theme-pink .mkt-fill,
.theme-pink .lp-fill,
.theme-pink .phase-fill {
  background: linear-gradient(90deg, #FA7598, #ff9ab8)
}

.theme-pink .hashtag-box {
  background: linear-gradient(135deg, rgba(250, 117, 152, .15), rgba(255, 180, 200, .08));
  border-color: rgba(250, 117, 152, .3)
}

.theme-pink .hashtag {
  background: linear-gradient(135deg, #FA7598, #ff9ab8);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-pink .cta-section {
  background: linear-gradient(135deg, rgba(250, 117, 152, .15), rgba(255, 180, 200, .08));
  border-color: rgba(250, 117, 152, .3)
}

.theme-pink .cta-hashtag {
  background: linear-gradient(135deg, #FA7598, #ff9ab8);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-pink .budget-total-box {
  background: linear-gradient(135deg, rgba(250, 117, 152, .12), rgba(250, 117, 152, .05));
  border-color: rgba(250, 117, 152, .3)
}

.theme-pink .chain-item:hover {
  background: rgba(250, 117, 152, .06)
}

.theme-pink .mkt-channel {
  background: rgba(250, 117, 152, .05);
  border-color: rgba(250, 117, 152, .12)
}

.theme-pink .mkt-channel:hover {
  border-color: #ff9ab8
}

.theme-pink .launch-phase {
  background: rgba(250, 117, 152, .05);
  border-color: rgba(250, 117, 152, .12)
}

.theme-pink .launch-phase:hover {
  border-color: #ff9ab8
}

.theme-pink .highlight-phase {
  background: rgba(250, 117, 152, .12);
  border-color: #ff9ab8;
  box-shadow: 0 0 32px rgba(250, 117, 152, .2)
}

.theme-pink .budget-item:hover {
  background: rgba(250, 117, 152, .06)
}

.theme-pink .goal-banner {
  background: linear-gradient(135deg, rgba(250, 117, 152, .15), rgba(250, 117, 152, .05));
  border-color: rgba(250, 117, 152, .3)
}

.theme-pink .comp-header {
  background: rgba(250, 117, 152, .12);
  color: #ff9ab8
}

.theme-pink .letter {
  background: rgba(250, 117, 152, .04);
  border-color: rgba(250, 117, 152, .15)
}

.theme-pink .letter::before {
  background: radial-gradient(circle, rgba(250, 117, 152, .12), transparent)
}

.theme-pink .letter-to {
  color: #ff9ab8
}

.theme-pink .letter-body strong {
  color: #ff9ab8
}

.theme-pink .letter-benefits {
  background: rgba(255, 180, 200, .05);
  border-color: rgba(255, 180, 200, .12)
}

.theme-pink .letter-benefits h4 {
  color: #ffb8cb
}

.theme-pink .sig-company {
  color: #ff9ab8
}

.theme-pink .dist-phase {
  background: rgba(250, 117, 152, .05);
  border-color: rgba(250, 117, 152, .12)
}

.theme-pink .dist-phase.highlight {
  border-color: #ff9ab8;
  box-shadow: 0 0 32px rgba(250, 117, 152, .2)
}

.theme-pink .phase-badge {
  background: rgba(250, 117, 152, .2);
  color: #ff9ab8
}

.theme-pink .coverage-badge {
  background: linear-gradient(135deg, rgba(255, 180, 200, .1), rgba(255, 180, 200, .03));
  border-color: rgba(255, 180, 200, .2);
  color: #ffb8cb
}

.theme-pink .exp-point {
  background: rgba(250, 117, 152, .04);
  border-color: rgba(250, 117, 152, .12)
}

.theme-pink .active-point {
  border-color: #ffb8cb;
  box-shadow: 0 0 24px rgba(255, 180, 200, .1)
}

.theme-pink .active-point .exp-dot {
  background: #ffb8cb;
  box-shadow: 0 0 12px #ffb8cb
}

.theme-pink .swot-s,
.theme-pink .swot-t {
  background: rgba(255, 180, 200, .08);
  border-color: rgba(255, 180, 200, .2)
}

.theme-pink .swot-w,
.theme-pink .swot-o {
  background: rgba(250, 117, 152, .08);
  border-color: rgba(250, 117, 152, .2)
}

.theme-pink .opp-badge {
  background: rgba(250, 117, 152, .12);
  color: #ff9ab8
}

.theme-pink .challenge-note {
  background: rgba(255, 180, 200, .05);
  border-color: rgba(255, 180, 200, .12)
}

/* Pink sparkle overlay */
.theme-pink .page-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .03) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(250, 117, 152, .04) 0%, transparent 35%),
    radial-gradient(circle at 50% 10%, rgba(255, 200, 220, .03) 0%, transparent 30%);
  pointer-events: none;
  border-radius: 24px;
  z-index: 0
}

.theme-pink .page-inner {
  position: relative
}

.theme-pink .page-inner>* {
  position: relative;
  z-index: 1
}

/* --- THEME: PURPLE (Lavender/Violet — Collagen/GLOW style) --- */
.theme-purple .page-inner {
  background: linear-gradient(145deg, #1e1530 0%, #261840 50%, #1a1228 100%);
  border-color: rgba(155, 111, 212, .15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(155, 111, 212, .06)
}

.theme-purple .page-number {
  background: linear-gradient(135deg, #9B6FD4, #b891e8)
}

.theme-purple .page-title {
  background: linear-gradient(135deg, #ffffff, #d4b8f0);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-purple .page-accent {
  background: linear-gradient(90deg, #9B6FD4, #b891e8)
}

.theme-purple .stat-card,
.theme-purple .m-card,
.theme-purple .usp-card,
.theme-purple .kpi-card,
.theme-purple .chain-category,
.theme-purple .protect-card,
.theme-purple .exp-stat {
  background: linear-gradient(145deg, rgba(155, 111, 212, .08), rgba(155, 111, 212, .02));
  border-color: rgba(155, 111, 212, .15)
}

.theme-purple .stat-card:hover,
.theme-purple .m-card:hover,
.theme-purple .usp-card:hover,
.theme-purple .kpi-card:hover,
.theme-purple .protect-card:hover {
  box-shadow: 0 12px 40px rgba(155, 111, 212, .2);
  border-color: rgba(155, 111, 212, .4)
}

.theme-purple .stat-unit,
.theme-purple .m-card h4,
.theme-purple .usp-card h4,
.theme-purple .chain-cat-header h3,
.theme-purple .investment-box h3,
.theme-purple .protect-card h4,
.theme-purple .product-banner-info h4 {
  color: #b891e8
}

.theme-purple .summary-hero,
.theme-purple .investment-box,
.theme-purple .marketing-budget {
  background: rgba(155, 111, 212, .06);
  border-color: rgba(155, 111, 212, .15)
}

.theme-purple .summary-lead strong {
  color: #b891e8
}

.theme-purple .target-pill {
  background: rgba(155, 111, 212, .08);
  border-color: rgba(155, 111, 212, .15)
}

.theme-purple .target-pill:hover {
  background: rgba(155, 111, 212, .15);
  border-color: #b891e8
}

.theme-purple .vision-box {
  background: linear-gradient(135deg, rgba(155, 111, 212, .1), rgba(200, 160, 240, .05));
  border-color: rgba(155, 111, 212, .25)
}

.theme-purple .vision-quote {
  color: #d4b8f0
}

.theme-purple .product-img {
  background: rgba(155, 111, 212, .06);
  border-color: rgba(155, 111, 212, .12)
}

.theme-purple .product-img:hover {
  box-shadow: 0 12px 32px rgba(155, 111, 212, .25);
  border-color: #b891e8
}

.theme-purple .product-banner {
  background: rgba(155, 111, 212, .05);
  border-color: rgba(155, 111, 212, .12)
}

.theme-purple .segment-circle.b2c {
  background: linear-gradient(135deg, rgba(155, 111, 212, .18), rgba(155, 111, 212, .05));
  border-color: #b891e8
}

.theme-purple .seg-card.b2c-card {
  background: rgba(155, 111, 212, .05);
  border-color: rgba(155, 111, 212, .12)
}

.theme-purple .seg-big {
  color: #b891e8
}

.theme-purple .budget-val,
.theme-purple .bi-pct,
.theme-purple .kpi-unit,
.theme-purple .mkt-pct,
.theme-purple .lp-budget,
.theme-purple .exp-val {
  color: #b891e8
}

.theme-purple .invest-fill,
.theme-purple .dist-bar-fill,
.theme-purple .mkt-fill,
.theme-purple .lp-fill,
.theme-purple .phase-fill {
  background: linear-gradient(90deg, #9B6FD4, #b891e8)
}

.theme-purple .hashtag-box {
  background: linear-gradient(135deg, rgba(155, 111, 212, .12), rgba(200, 160, 240, .06));
  border-color: rgba(155, 111, 212, .25)
}

.theme-purple .hashtag {
  background: linear-gradient(135deg, #9B6FD4, #b891e8);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-purple .cta-section {
  background: linear-gradient(135deg, rgba(155, 111, 212, .12), rgba(200, 160, 240, .06));
  border-color: rgba(155, 111, 212, .25)
}

.theme-purple .cta-hashtag {
  background: linear-gradient(135deg, #9B6FD4, #b891e8);
  -webkit-background-clip: text;
  background-clip: text
}

.theme-purple .budget-total-box {
  background: linear-gradient(135deg, rgba(155, 111, 212, .1), rgba(155, 111, 212, .04));
  border-color: rgba(155, 111, 212, .25)
}

.theme-purple .chain-item:hover {
  background: rgba(155, 111, 212, .06)
}

.theme-purple .mkt-channel {
  background: rgba(155, 111, 212, .04);
  border-color: rgba(155, 111, 212, .1)
}

.theme-purple .mkt-channel:hover {
  border-color: #b891e8
}

.theme-purple .launch-phase {
  background: rgba(155, 111, 212, .04);
  border-color: rgba(155, 111, 212, .1)
}

.theme-purple .launch-phase:hover {
  border-color: #b891e8
}

.theme-purple .highlight-phase {
  background: rgba(155, 111, 212, .1);
  border-color: #b891e8;
  box-shadow: 0 0 32px rgba(155, 111, 212, .15)
}

.theme-purple .budget-item:hover {
  background: rgba(155, 111, 212, .05)
}

.theme-purple .goal-banner {
  background: linear-gradient(135deg, rgba(155, 111, 212, .12), rgba(155, 111, 212, .04));
  border-color: rgba(155, 111, 212, .25)
}

.theme-purple .comp-header {
  background: rgba(155, 111, 212, .12);
  color: #b891e8
}

.theme-purple .letter {
  background: rgba(155, 111, 212, .03);
  border-color: rgba(155, 111, 212, .12)
}

.theme-purple .letter::before {
  background: radial-gradient(circle, rgba(155, 111, 212, .1), transparent)
}

.theme-purple .letter-to {
  color: #b891e8
}

.theme-purple .letter-body strong {
  color: #b891e8
}

.theme-purple .letter-benefits {
  background: rgba(200, 160, 240, .04);
  border-color: rgba(200, 160, 240, .12)
}

.theme-purple .letter-benefits h4 {
  color: #d4b8f0
}

.theme-purple .sig-company {
  color: #b891e8
}

.theme-purple .dist-phase {
  background: rgba(155, 111, 212, .04);
  border-color: rgba(155, 111, 212, .1)
}

.theme-purple .dist-phase.highlight {
  border-color: #b891e8;
  box-shadow: 0 0 32px rgba(155, 111, 212, .15)
}

.theme-purple .phase-badge {
  background: rgba(155, 111, 212, .18);
  color: #b891e8
}

.theme-purple .coverage-badge {
  background: linear-gradient(135deg, rgba(200, 160, 240, .08), rgba(200, 160, 240, .02));
  border-color: rgba(200, 160, 240, .2);
  color: #d4b8f0
}

.theme-purple .exp-point {
  background: rgba(155, 111, 212, .03);
  border-color: rgba(155, 111, 212, .1)
}

.theme-purple .active-point {
  border-color: #d4b8f0;
  box-shadow: 0 0 24px rgba(200, 160, 240, .1)
}

.theme-purple .active-point .exp-dot {
  background: #d4b8f0;
  box-shadow: 0 0 12px #d4b8f0
}

.theme-purple .swot-s,
.theme-purple .swot-t {
  background: rgba(200, 160, 240, .07);
  border-color: rgba(200, 160, 240, .18)
}

.theme-purple .swot-w,
.theme-purple .swot-o {
  background: rgba(155, 111, 212, .07);
  border-color: rgba(155, 111, 212, .18)
}

.theme-purple .opp-badge {
  background: rgba(155, 111, 212, .12);
  color: #b891e8
}

.theme-purple .challenge-note {
  background: rgba(200, 160, 240, .05);
  border-color: rgba(200, 160, 240, .12)
}

/* Purple holographic overlay */
.theme-purple .page-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(200, 160, 240, .04) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(155, 111, 212, .03) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(180, 140, 255, .03) 0%, transparent 30%);
  pointer-events: none;
  border-radius: 24px;
  z-index: 0
}

.theme-purple .page-inner {
  position: relative
}

.theme-purple .page-inner>* {
  position: relative;
  z-index: 1
}