/* ══════════════════════════════════════
   THEME TOKENS — DARK (default)
══════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg:          #0d0e16;
  --bg-alt:      #111220;
  --surface:     #fff;
  --surface-2:   #191a2a;
  --surface-3:   #1f2035;
  --border:      rgba(255,255,255,0.07);
  --border-md:   rgba(255,255,255,0.12);
  --border-hi:   rgba(255,255,255,0.18);
  --txt:         #e4e4f0;
  --txt-dim:     rgba(228,228,240,0.28);
  --accent:      #6366f1;
  --accent-2:    #818cf8;
  --accent-dim:  rgba(99,102,241,0.13);
  --accent-glow: rgba(99,102,241,0.35);
  --green:       #10b981;
  --green-dim:   rgba(16,185,129,0.12);
  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,0.12);
  --gold:        #f59e0b;
  --gold-dim:    rgba(245,158,11,0.12);
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-card: none;
  --nav-bg:      rgba(13,14,22,0.85);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --fc: #1b2028;
  --tc: #2a2f39;
  --sc: #222833;

  --bg-card:#100F0C;
  --bg-hover:#181510;
  --amber:#C8922A;
  --amber-dim:rgba(200,146,42,0.12);
  --amber-border:rgba(200,146,42,0.22);
  --amber-border-hi:rgba(200,146,42,0.55);
  --text-1:#EDE8DF;
  --text-2:#8A7E72;
  --text-3:#4A4540;
  --line:rgba(255,255,255,0.06);
}
 
/* ── LIGHT MODE ───────────────────────── */
[data-theme="light"] {
  --bg:          #ffffff;
  --bg-alt:      #f5f5fc;
  --surface:     #fff;
  --surface-2:   #eeeef8;
  --surface-3:   #e5e5f5;
  --border:      rgba(0,0,0,0.07);
  --border-md:   rgba(0,0,0,0.11);
  --border-hi:   rgba(0,0,0,0.18);
  --txt:         #111827;
  --txt-dim:     rgba(17,24,39,0.35);
  --accent:      #5b6af0;
  --accent-2:    #4f54d6;
  --accent-dim:  rgba(91,106,240,0.10);
  --accent-glow: rgba(91,106,240,0.25);
  --green:       #059669;
  --green-dim:   rgba(5,150,105,0.09);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.09);
  --gold:        #d97706;
  --gold-dim:    rgba(217,119,6,0.10);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07);
  --nav-bg:      rgba(255,255,255,0.90);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --bg-card:#100F0C;
  --bg-hover:#181510;
  --amber:#C8922A;
  --amber-dim:rgba(200,146,42,0.12);
  --amber-border:rgba(200,146,42,0.22);
  --amber-border-hi:rgba(200,146,42,0.55);
  --text-1:#EDE8DF;
  --text-2:#8A7E72;
  --text-3:#4A4540;
  --line:rgba(255,255,255,0.06);
}
 
/* ══════════════════════════════════════
   SECTION BASE
══════════════════════════════════════ */
.cs-section {
  padding: 40px 0 40px;
}
 
/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.eyebrow-num {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.eyebrow-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.eyebrow-dot { width: 3px; height: 3px; border-radius: 50%; }
 
/* Section heading — Nitesh style: regular + bold mixed */
.cs-h {
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 8px;
}
.cs-h strong {
  font-weight: 800;
  background: linear-gradient(135deg, #29a587 0%, #111214 55%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-skin .cs-h strong {
  font-weight: 800;
  background: linear-gradient(135deg, #29a587 0%, #ffffff 55%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cs-lead {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 40px;
  line-height: 1.65;
}
 
/* Utility */
.spacer-sm { height: 20px; }
.spacer-md { height: 36px; }
.divider { height: 1px; background: var(--border); margin: 32px 0; }
 
/* Caption + insight */
.cs-caption {
  font-size: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 28px;
  line-height: 1.65;
}
.cs-insight {
  font-size: 16px;
  margin-top: 12px;
  line-height: 1.6;
}
 
/* ══════════════════════════════════════
   PILLS / BADGES
══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.8;
}
.badge-accent  { background: #fff; color: #000; border: 1px solid rgba(99,102,241,0.25); }
.dark-skin .badge-accent {background: #000; color: #fff;}
.badge-green   { background: #fff;  color: #000;    border: 1px solid rgba(16,185,129,0.25); }
.dark-skin .badge-green {background: #000; color: #fff; }
.badge-red     { background: var(--red-dim);    color: var(--red);      border: 1px solid rgba(239,68,68,0.25); }
.badge-gold    { background: var(--gold-dim);   color: var(--gold);     border: 1px solid rgba(245,158,11,0.25); }
.badge-muted   { background: #f0ebe3; border: 1px solid var(--border); color: darkgray; }

.dark-skin .badge-muted {
  background: #000;
}
 
/* ══════════════════════════════════════
   PULL QUOTE
══════════════════════════════════════ */
.pq {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin: 28px 0;
  transition: background 0.3s;
}
.pq p {
  font-style: italic;
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.65;
  margin: 0;
  color: #fff;
}
.pq-attr {
  font-size: 12px;
  margin-top: 8px;
  font-style: normal;
}
 
/* ══════════════════════════════════════
   01 HERO
══════════════════════════════════════ */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  opacity: 1 !important;
  transform: none !important;
}
.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
 
.hero-inner {
  position: relative;
  z-index: 1;
}
 
/* Tags row */
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid #00000057;
  border-radius: 20px;
  transition: border-color 0.25s, background 0.25s;
}
.dark-skin .hero-tag {
  border: 1px solid rgb(255, 255, 255, 0.12);
}
 
/* Hero heading */
.hero-h {
  font-size: clamp(56px, 9vw, 40px);
  font-weight: 800;
  line-height: 1.0;
  text-transform: capitalize;
  margin-bottom: 12px;
}
.hero-h .line-1 { display: block; font-weight: 300; font-size: clamp(22px, 3.5vw, 36px); margin-bottom: 4px; color: #000; }
.hero-h .gradient {
  background: linear-gradient(135deg, #29a587 0%, #111214 55%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-skin .hero-h .gradient {
  background: linear-gradient(135deg, #29a587 0%, #ffffff 55%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-skin .hero-h .line-1 {
  color: #fff;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.65;
  margin: 24px 0 0;
  font-weight: 400;
}
 
/* Stat cards */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dark-skin .hero-stats {
  border: 1px solid #ffffff26;
}
.hstat {
  background: #fcfcfc;
  padding: 24px 20px;
  transition: background 0.25s;
  cursor: default;
}
.dark-skin .hstat {
  background: #1e232b;
}

.hstat:hover { background: #eae8e8; }
.dark-skin .hstat:hover {background: #242b26;}
.hstat-arrow { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.hstat-arrow.up   { color: var(--green); }
.hstat-arrow.down { color: var(--red); }
.hstat-val {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}
.hstat-val span { color: var(--accent); }
.hstat-lbl { font-size: 18px; line-height: 1.45; font-weight: 500; margin-bottom: 10px;}
 
/* Meta row */
.hero-meta {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .hero-meta {
    flex-direction: column;
  }
}

.hm-item {
  /*flex: 1;*/
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  background: #ece6e6;
  transition: background 0.25s;
}

.dark-skin .hm-item { background: #12161d; }
.hm-item:last-child { border-right: none; }
.hm-item:hover { background: #fcfcfc; }

.dark-skin .hm-item:hover { background: #1e232b; }
.hm-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hm-val { font-size: 13px; font-weight: 700; }
 
/* ══════════════════════════════════════
   02 PROBLEM — COMPARISON TABLE
══════════════════════════════════════ */
.cs-table-wrap { overflow-x: auto; margin-top: 28px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.cs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.dark-skin .cs-table-wrap {
  border: 1px solid #afafaf1f; 
}
.cs-table thead th {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #e5e5e5;
  font-weight: 500;
}
.dark-skin .cs-table thead th{ background: #101216; }
.cs-table tbody tr {
  border-bottom: 1px solid #afafaf1f;
  transition: background 0.2s;
  cursor: default;
}
.cs-table tbody tr:last-child { border-bottom: none; }
.cs-table td {
  padding: 14px 16px;
  font-size: 13.5px;
  vertical-align: middle;
  line-height: 1.5;
}
.col-hi { background: #F5f5f5 !important; }
.dark-skin .col-hi {
  background: #1b2028 !important;
}
.col-hi td { color: var(--txt) !important; }
.col-hi-hd { display: flex; align-items: center; gap: 10px; }
.col-hi-hd .badge { flex-shrink: 0; }
.accent-text { color: var(--accent); font-weight: 700; }
.red-text    { color: var(--red); font-weight: 600; }
 
/* ══════════════════════════════════════
   03 JOURNEY — STAT BLOCKS
══════════════════════════════════════ */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 28px 0; }
.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s, background 0.3s, transform 0.25s, box-shadow 0.3s;
  cursor: default;
}

.dark-skin .stat-card {
  background: #15181e;
}
.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(99,102,241,0.12);
}
.stat-big {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.stat-content {}
.stat-title { font-size: 20px; font-weight: 700; margin-bottom: 5px; }
.stat-desc { font-size: 14px; line-height: 1.55; margin: 0; }
.stat-hi { color: var(--accent); font-weight: 700; }
 
/* Journey SVG */
.jmap-wrap {
  margin: 32px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.dark-skin .jmap-wrap {
  background: #15181e;
}

.jmap-wrap svg { display: block; width: 100%; transition: background 0.35s; }
 
/* Journey step nodes */
.journey-nodes {
  display: flex;
  gap: 0;
  margin: 32px 0 0;
  position: relative;
}
.journey-nodes::before {
  content: '';
  position: absolute;
  top: 24px; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--border) 0%,
    var(--border) 18%,
    var(--accent) 36%,
    var(--accent) 64%,
    var(--border) 82%,
    var(--border) 100%);
}
.jn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform 0.25s;
  cursor: default;
}
.jn:hover { transform: translateY(-5px); }
.jn-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
  transition: all 0.3s;
}
.jn:hover .jn-icon { border-color: var(--border-md); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.jn-void .jn-icon {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 16px var(--accent-glow);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 10px var(--accent-glow); }
  50%      { box-shadow: 0 0 28px rgba(99,102,241,0.6); }
}
.jn-badge {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.jn-label { font-size: 11px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
.jn-void .jn-label { color: var(--accent-2); }
.jn-sub { font-size: 10px; line-height: 1.5;}
.jn-void .jn-sub { color: rgba(129,140,248,0.6); }
 
/* ══════════════════════════════════════
   04 COMPETITIVE AUDIT
══════════════════════════════════════ */
.comp-table-wrap { overflow-x: auto; margin-top: 28px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.comp-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.dark-skin .comp-table {
  background: #15181e;
}
.comp-table thead th {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f0ebe3;
  font-weight: 500;
}
.dark-skin .comp-table thead th {
  background: #000000;
}

.comp-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.2s; cursor: default; }
.comp-table tbody tr:last-child { border-bottom: none; }
.comp-table tbody tr:hover { background: #f0ebe3; }
.dark-skin .comp-table tbody tr:hover {
  background: #100f0e;
}
.comp-table tbody tr.dfm-row { background: rgba(249,115,22,0.30); }
.dark-skin .comp-table tbody tr.dfm-row { background: rgba(57,48,41,0.30); }
.comp-table tbody tr.dfm-row:hover { background: rgba(249,115,22,0.45); }
.comp-table td { padding: 16px; font-size: 13.5px; vertical-align: middle; }
.comp-name { font-weight: 700; font-size: 13px; }
.comp-cat {
  font-size: 10px;
  display: block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.tags-stack { display: flex; flex-wrap: wrap; gap: 4px; }
 
/* ══════════════════════════════════════
   05 PERSONA
══════════════════════════════════════ */
.persona-wrap {
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  box-shadow: var(--shadow-card);
  background: #fff1da;
  transition: border-color 0.3s;
}
.dark-skin .persona-wrap {
  background: #090908;
}
.persona-wrap:hover { border-color: var(--border-md); }
.per-left {
  background: #faf9f6;
  border-right: 1px solid var(--border);
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.dark-skin .per-left {
  background: #0d1016;
}
.per-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(16,185,129,0.2));
  border: 2px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.per-name { font-size: 15px; font-weight: 700; }
.per-role {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
.per-quote {
  font-style: italic;
  font-size: 12px;
  line-height: 1.55;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.per-attrs { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 7px; }
.per-attr { display: flex; justify-content: space-between; }
.per-ak {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.per-av { font-size: 11px; font-weight: 700; }
 
.per-right { padding: 28px 26px; display: flex; flex-direction: column; gap: 20px; }
.per-section { }
.per-sec-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.per-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.per-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 7px;
  font-size: 16px;
  line-height: 1.5;
}
.per-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.per-dot.g { background: var(--green); }
.per-dot.r { background: var(--red); }
.trait-bars { display: flex; flex-direction: column; gap: 9px; }
.trait-row { display: flex; align-items: center; gap: 10px; }
.trait-label {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 110px;
  font-weight: 500;
}
.trait-track { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.trait-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.trait-fill.on { transform: scaleX(1); }
.tools-row { display: flex; flex-wrap: wrap; gap: 6px; }
 
/* ══════════════════════════════════════
   06 RATIONALE CARDS
══════════════════════════════════════ */
.rationale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.rat-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s, transform 0.25s, box-shadow 0.3s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.dark-skin .rat-card {
      background: #0d1016;
}
.rat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.rat-card:hover { border-color: var(--border-md); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rat-card:hover::after { opacity: 1; }
.rat-card.span-2 { grid-column: 1 / -1; }
.rat-icon { font-size: 22px; margin-bottom: 12px; }
.rat-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.rat-body { font-size: 13px; line-height: 1.6; margin: 0; max-width: 100%; }
.vs-row { display: flex; gap: 8px; margin-top: 14px; }
.vs-opt {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
}
.vs-opt.rej { background: #f0ebe3; border: 1px solid rgba(239,68,68,0.2); text-decoration: line-through; opacity: 0.7; }
.dark-skin .vs-opt.rej { background: #000000; }
.vs-opt.cho { background: #f1e1c8; border: 1px solid rgba(99,102,241,0.25); }
.dark-skin .vs-opt.cho { background: #222831; }
.vs-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 4px; opacity: 0.8; }
 
/* ══════════════════════════════════════
   07 ITERATION TIMELINE
══════════════════════════════════════ */
.iter-timeline { margin: 44px 0 0; padding-left: 28px; position: relative; }
.iter-timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 14px; bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, var(--border) 0%, var(--accent) 30%, var(--accent) 70%, var(--green) 100%);
}
.iter-item { position: relative; margin-bottom: 52px; }
.iter-item:last-child { margin-bottom: 0; }
.iter-node {
  position: absolute;
  left: -29px; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-md);
  transition: all 0.3s;
}
.iter-item:hover .iter-node { border-color: var(--accent); background: var(--accent-dim); }
.iter-item.pivot .iter-node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.iter-item.final .iter-node { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.iter-phase {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.iter-phase.pivot-lbl { color: var(--accent); }
.iter-phase.final-lbl { color: var(--green); }
.iter-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.iter-body { font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
 
/* Mockup shell */
.mockup {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-top: 16px;
}
.mockup-bar {
  height: 34px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
}
.mbar-dot { width: 9px; height: 9px; border-radius: 50%; }
.mbar-dot.r { background: var(--red); opacity: 0.7; }
.mbar-dot.y { background: var(--gold); opacity: 0.7; }
.mbar-dot.g { background: var(--green); opacity: 0.7; }
.mbar-label {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.mockup-body { padding: 20px; }
 
/* V1 */
.v1-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.v1-tile { background: #f0ebe3; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.v1-num { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.v1-lbl { font-size: 10px; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.v1-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: center; font-size: 12px; }
.v1-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.v1-action { margin-left: auto; color: var(--accent); font-size: 10px; letter-spacing: 0.08em; cursor: pointer; }
.mockup-note {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mockup-note.bad { color: rgba(239,68,68,0.65); }
.mockup-note.good { color: rgba(16,185,129,0.65); }
 
/* V2 prompt */
.v2-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 4px 4px 4px 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 20px var(--accent-glow);
}
.v2-text { flex: 1; font-size: 12px;}
.v2-cursor { display: inline-block; width: 2px; height: 13px; background: var(--accent); animation: blink 1s step-end infinite; vertical-align: middle; margin-left: 1px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.v2-btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
 
.env-rail { display: flex; align-items: stretch; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.env-step { flex: 1; padding: 12px 10px; text-align: center; background: var(--surface-2); border-right: 1px solid var(--border); transition: background 0.25s; }
.env-step:last-child { border-right: none; }
.env-step.env-active { background: var(--accent-dim); border-color: transparent; }
.env-step-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.env-step.env-active .env-step-lbl { color: var(--accent); }
.env-step-name { font-size: 12px; font-weight: 700; color: }
.env-step.env-active .env-step-name { color: var(--txt); }
.env-arrow { display: flex; align-items: center; padding: 0 2px; background: var(--surface); color: var(--accent); font-size: 14px; z-index: 1; font-weight: 700; }
 
/* V3 */
.v3-cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 10px;
  transition: border-color 0.25s;
}
.v3-cmd:hover { border-color: var(--border-md); }
.v3-cmd-ico { font-size: 16px; }
.v3-cmd-name { font-size: 12.5px; font-weight: 700; color: var(--txt); }
.v3-cmd-meta { font-size: 11px; flex: 1; }
.v3-status { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 5px; }
.v3-status::before { content: '●'; font-size: 7px; }
.heal-card {
  background: var(--green-dim);
  border: 1px solid rgba(16,185,129,0.22);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--green);
}
.heal-ico { font-size: 20px; }
.heal-main { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.heal-sub { font-size: 11px; color: rgba(16,185,129,0.65); }
.heal-btn {
  flex-shrink: 0;
  background: var(--green-dim);
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--green);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
}

.bg-radius img {
  border-radius: 40px;
}
 
/* Pivot callout */
.pivot-box {
  background: rgba(255,210,210,0.54);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 16px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.dark-skin .pivot-box {
  background: rgba(39,32,32,0.54);
}
.pivot-box.warn {
  background: var(--gold-dim);
  border-color: rgba(245,158,11,0.25);
}
.pivot-ico { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.pivot-hl { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pivot-box.warn .pivot-hl { color: var(--gold); }
.pivot-body { font-size: 14px; line-height: 1.6; margin: 0; max-width: 100%; }


.dark-skin .pivot-ico {
  filter: brightness(0) invert(1);
}
 
/* ══════════════════════════════════════
   08 OUTCOMES
══════════════════════════════════════ */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 32px 0;
  box-shadow: var(--shadow-card);
}
.oc {
  background: #f1e1c8;
  padding: 28px 20px;
  transition: background 0.25s;
  cursor: default;
}
.dark-skin .oc {
  background: #151920;
}
.oc:hover { background: #e5e5e5; }

.dark-skin .oc:hover {
    background: #11141b;
}
.oc-arr { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.oc-arr.down { color: var(--red); }
.oc-arr.up   { color: var(--green); }
.oc-val { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; }
.oc-lbl { font-size: 16px; line-height: 1.4; font-weight: 500; }
.oc-detail { font-size: 11.5px; margin-top: 6px; line-height: 1.45; }

.dark-skin .oc-val img {
  filter: brightness(0) invert(1);
}
 
.refl-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 32px; }
.refl-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s, transform 0.25s;
  cursor: default;
}
.dark-skin .refl-card {
  background: #151920;
}
.refl-card:hover { border-color: var(--border-md); transform: translateY(-3px); }
.refl-ico { font-size: 20px; margin-bottom: 10px; }
.refl-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.refl-body { font-size: 13px; line-height: 1.6; margin: 0; max-width: 100%; }
 
/* Closing */
.closing {
  text-align: center;
  padding: 72px 36px 56px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}
.closing-eye {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.closing-h {
  font-size: clamp(32px, 5.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--txt);
  margin-bottom: 16px;
  line-height: 1.1;
}
.closing-h .grad {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.closing-sub { font-size: 15px; margin: 0 auto; line-height: 1.65; }
 
/* Footer */
footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 20px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  transition: background 0.35s, border-color 0.35s;
}
.footer-name { font-weight: 700; color: var(--txt); }
.footer-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }
 
/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }



 /* ── CSS variable palettes ── */
  :root {
    --card-bg:       #ECEAE4;
    --title-color:   #1a1a1a;
    --sub-color:     #9A9890;
    --lbl-border:    #1a1a1a;
    --num-color:     #9A9890;
    --title-txt:     #1a1a1a;
 
    /* grey bar */
    --g-fc: #C4C3C0;
    --g-tc: #DCDBD8;
    --g-sc: #AEADA9;
    --g-hfc: #5A8EC7;
    --g-htc: #7AAADE;
    --g-hsc: #4A7DB5;
    --g-acc: #5A8EC7;
 
    /* orange (accent) bar */
    --o-fc: #E55A0C;
    --o-tc: #F07234;
    --o-sc: #C44D09;
    --o-hfc: #FF6E1E;
    --o-htc: #FF9050;
    --o-hsc: #E05B0A;
    --o-acc: #E55A0C;
 
    /* tooltip */
    --tip-bg:     #FFFFFF;
    --tip-border: #D8D6D0;
    --tip-head:   #1a1a1a;
    --tip-divider:#EDEBE5;
    --tip-li:     #777672;
 
    /* toggle */
    --tog-border: #C4C3C0;
    --tog-txt:    #555555;
    --tog-hover:  #D8D6D0;
    --tog-track:  #C4C3C0;
    --tog-thumb:  #ffffff;
  }
 
  .dark {
    --card-bg:       #101216;
    --title-color:   #ECEAE4;
    --sub-color:     #6A6A68;
    --lbl-border:    rgba(255,255,255,0.7);
    --num-color:     #5A5A58;
    --title-txt:     #DCDBD8;
 
    --g-fc: #2E2E3A;
    --g-tc: #3E3E4E;
    --g-sc: #22222E;
    --g-hfc: #4A7DB5;
    --g-htc: #5A8EC7;
    --g-hsc: #3A6DA5;
    --g-acc: #5A8EC7;
 
    --o-fc: #C44D09;
    --o-tc: #E55A0C;
    --o-sc: #A03C07;
    --o-hfc: #E55A0C;
    --o-htc: #F07234;
    --o-hsc: #C44D09;
    --o-acc: #E55A0C;
 
    --tip-bg:     #1E1E28;
    --tip-border: #2E2E3A;
    --tip-head:   #DCDBD8;
    --tip-divider:#2E2E3A;
    --tip-li:     #6A6A68;
 
    --tog-border: #2E2E36;
    --tog-txt:    #aaaaaa;
    --tog-hover:  #2a2a34;
    --tog-track:  #5A8EC7;
    --tog-thumb:  #ffffff;
  }

  .card {
    width: 100%;
    background: #ECEAE4;
    border-radius: 20px;
    padding: clamp(39px, 0vw, 39px) clamp(24px, 3vw, 64px) clamp(32px, 0vw, 52px);
    position: relative;
    transition: background 0.35s ease;
    z-index: 1;
  }

  .dark-skin .card {
    background: #101216;
  }
 
  .chart-title {
    font-size: clamp(13px,1.4vw,16px);
    font-weight: 600;
    color: var(--title-color);
    letter-spacing: -0.01em;
    transition: color 0.35s;
  }
 
  .chart-subtitle {
    font-size: clamp(10px,1vw,12px);
    color: var(--sub-color);
    margin-top: 4px;
    transition: color 0.35s;
  }
  /* ── Bars row ── */
  .bars-row {
    display: flex;
    align-items: flex-end;
    height: clamp(180px, 32vw, 340px);
    gap: clamp(2px, 0.4vw, 5px);
    margin-top: clamp(90px, 6vw, 90px);
  }
 
  /* ── Each step column ── */
  .step {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 100%;
    cursor: pointer;
  }
 
  /* Assign CSS vars per bar type */
  .step.grey  { --fc:var(--g-fc);--tc:var(--g-tc);--sc:var(--g-sc);--hfc:var(--g-hfc);--htc:var(--g-htc);--hsc:var(--g-hsc);--acc:var(--g-acc); }
  .step.orange{ --fc:var(--o-fc);--tc:var(--o-tc);--sc:var(--o-sc);--hfc:var(--o-hfc);--htc:var(--o-htc);--hsc:var(--o-hsc);--acc:var(--o-acc); }
 
  .bar-area {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bh) + var(--sk));
    pointer-events: none;
  }
 
  .bar-front {
    position: absolute;
    bottom: 0; left: 0;
    right: var(--sk); height: var(--bh);
    background: var(--fc);
    transition: background 0.25s ease;
  }
 
  .bar-top {
    position: absolute;
    left: 0; bottom: var(--bh);
    width: 100%; height: var(--sk);
    background: var(--tc);
    clip-path: polygon(
      0 100%,
      calc(100% - var(--sk)) 100%,
      100% 0%,
      var(--sk) 0%
    );
    transition: background 0.25s ease;
  }
 
  .bar-side {
    position: absolute;
    bottom: 0; right: 0;
    width: var(--sk); height: var(--bh);
    background: var(--sc);
    transition: background 0.25s ease;
  }
 
  .step:hover .bar-front { background: var(--hfc); }
  .step:hover .bar-top   { background: var(--htc); }
  .step:hover .bar-side  { background: var(--hsc); }
 
  /* ── Floating label ── */
  .step-lbl {
    position: absolute;
    left: 0;
    bottom: calc(var(--bh) + var(--sk) + 12px);
    padding-left: 7px;
    border-left: 2.5px solid #1a1a1a;
    transition: border-color 0.35s;
  }

  .dark-skin .step-lbl {
    border-left: 2.5px solid #DCDBD8;
  }
 
  .step-num {
    display: block;
    font-size: clamp(6px, 0.75vw, 9px);
    font-weight: 500;
    letter-spacing: 0.09em;
    color: var(--num-color);
    margin-bottom: 3px;
    text-transform: uppercase;
    transition: color 0.35s;
  }
 
  .step-title {
    display: block;
    font-size: clamp(9px, 1vw, 12px);
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.35;
    transition: color 0.35s;
  }

  .dark-skin .step-title {
    color: #DCDBD8;
  }
 
  /* ── Tooltip ── */
  .tip-box {
    position: absolute;
    left: 0;
    bottom: calc(var(--bh) + var(--sk) + var(--lh, 58px) + 22px);
    width: clamp(148px, 16vw, 200px);
    background: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: 11px;
    padding: clamp(9px,1.1vw,13px) clamp(10px,1.2vw,15px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease,
                background 0.35s, border-color 0.35s;
    z-index: 100;
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  }
 
  .dark .tip-box { box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
 
  .step:nth-last-child(-n+2) .tip-box { left: auto; right: 0; }
  .step:hover .tip-box { opacity: 1; transform: translateY(0); }
 
  .tip-head {
    font-size: clamp(10px,1vw,12px);
    font-weight: 600;
    color: var(--tip-head);
    line-height: 1.4;
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tip-divider);
    transition: color 0.35s, border-color 0.35s;
  }
 
  .tip-list { list-style: none; }
 
  .tip-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: clamp(9px, 0.9vw, 11px);
    color: var(--tip-li);
    padding: 3px 0;
    line-height: 1.5;
    transition: color 0.35s;
  }
 
  .tip-list li::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--acc);
    flex-shrink: 0;
    margin-top: 5px;
  }
 
  /* ── Responsive ── */
  @media (max-width: 640px) {
    .step-lbl { padding-left: 4px; border-left-width: 2px; }
    .tip-box  { width: 140px; }
    .step:nth-last-child(-n+3) .tip-box { left: auto; right: 0; }
  }
  @media (max-width: 400px) {
    .tip-box { width: 126px; }
  }

  /* ── PARTICIPANTS ── */
.p-grid{display:flex;gap:14px; justify-content: space-between;}
.pc{grid-column:span 2;min-width: 225px; background: #fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px 22px;cursor:default;transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s,background .35s,box-shadow .35s;position:relative;overflow:hidden}
.pc::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 100% 60% at 50% -10%,var(--amber-dim),transparent 70%);opacity:0;transition:opacity .4s}
.pc:hover{transform:translateY(-4px);border-color:var(--amber-border-hi);background: #f1e1c8;box-shadow:0 12px 40px rgba(0,0,0,.15)}
.pc:hover::before{opacity:1}

.dark-skin .pc {
  background: #12161d;
}
/* center last 2 in row 2 of 6-col grid */
.pc:nth-child(4){grid-column:2/span 2}
.pc:nth-child(5){grid-column:4/span 2}

.pc-idx{font-size:10px;font-weight:500;letter-spacing:.2em;margin-bottom:22px}
.pc-icon{width:38px;height:38px;color:var(--amber);margin-bottom:18px;transition:transform .3s}
.pc:hover .pc-icon{transform:scale(1.12)}
.pc-title{font-size:21px;font-weight:500;line-height:1.2;margin-bottom:10px;letter-spacing:-.01em}
.pc-desc{font-size:12px;font-weight:300;line-height:1.65;color:var(--text-2);max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .35s}
.pc:hover .pc-desc{max-height:100px;opacity:1}
.pc-tag{display:inline-flex;align-items:center;margin-top:18px;padding:3px 10px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:100px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}

/* stagger entrance */
.s1{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:0ms}
.s2{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:55ms}
.s3{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:110ms}
.s4{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:165ms}
.s5{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:220ms}
.s6{animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;animation-delay:275ms}

/* ── KEY QUESTIONS ── */
.q-list{display:flex;flex-direction:column;gap:16px}
.qc{border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .3s}
.qc.open{border-color:var(--amber-border)}
.qc-head{display:flex;align-items:center;gap:14px;padding:20px 22px;cursor:pointer;background: #f1e1c8;transition:background .25s;user-select:none}
.qc-head:hover,.qc.open .qc-head{background: #fff;}
.dark-skin .qc-head:hover, .dark-skin .qc.open .qc-head {
  background: #1b1e24;
}

.dark-skin .qc-head {
    background: #121821;
}
.qc-ico{width:34px;height:34px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--amber)}
.qc-ico svg{width:17px;height:17px}
.qc-title{font-size:20px;font-weight:600;letter-spacing:-.01em;flex:1}
.qc-cnt{font-size:18px;color:var(--text-3);margin-right:10px}
.dark-skin .qc-cnt {
  background: #ffca95;
}


.qc-btn{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.qc.open .qc-btn{background:var(--amber-dim);border-color:var(--amber-border)}
.qc-btn svg{width:11px;height:11px;color:var(--text-3);transition:transform .35s cubic-bezier(.4,0,.2,1),color .3s}
.qc.open .qc-btn svg{transform:rotate(45deg);color:var(--amber)}
.qc-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.qc.open .qc-body{max-height:360px}
.qc-inner{padding:0 22px 22px 22px;border-top:1px solid var(--line)}
.q-items{list-style:none;display:flex;flex-direction:column}
.q-item{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:500;line-height:1.55;transition:color .2s}
.q-item:last-child{border-bottom:none}
.q-dot{width:4px;height:4px;background:var(--amber);border-radius:50%;margin-top:7px;flex-shrink:0}

/* ── KEY FINDINGS ── */
.f-wrap{display:flex;flex-direction:column;gap:28px}
.f-quote{padding:32px 36px;background:var(--bg-card);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;position:relative}
.f-quote::before{content:'"';position:absolute;top:8px;left:18px;font-size:80px;line-height:1;color:var(--amber);opacity:.15}
.f-quote p{font-size:clamp(20px,2.8vw,28px);font-weight:400;line-height:1.45;font-style:italic;padding-left:6px}
.ch-hdr{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ch-lbl2{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.ch-line{height:1px;flex:1;background:var(--line)}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cc{display:flex;align-items:flex-start;gap:16px;padding:15px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:default}
.dark-skin .cc {
  background: #19202b;
}
.cc:hover{border-color:var(--amber-border);transform:translateX(5px)}
.cc-ico{width:30px;height:30px;background:var(--amber-dim);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--amber)}
.cc-ico svg{width:15px;height:15px}
.cc-txt{font-size:14px;font-weight:500;line-height:1.55;padding-top:5px}

.dark-skin .partcipants-cont img {
  filter: brightness(0) invert(1);
}

.dark-skin .pc-title {
  color: #f2be5a;
}