/* ================================================================
   EXTOLEM — HOW IT WORKS SECTION
   File: /assets/css/how-it-works.css
   ================================================================ */

.ex-hiw {
  position: relative;
  width: 100%;
  padding: 120px 40px 130px;
  background-color: var(--ex-bg);
  overflow: hidden;
  isolation: isolate;
}

.ex-hiw::before,
.ex-hiw::after {
  content: ''; position: absolute; left: 0; right: 0; height: 100px; pointer-events: none; z-index: 0;
}
.ex-hiw::before { top: 0;    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%); }
.ex-hiw::after  { bottom: 0; background: linear-gradient(0deg,   var(--ex-bg-2) 0%, transparent 100%); }

.ex-hiw-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(25,245,195,0.045) 0%, transparent 65%);
  filter: blur(70px); pointer-events: none; z-index: 0;
}

/* Inner */
.ex-hiw-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
}

/* Header */
.ex-hiw-header {
  text-align: center; max-width: 740px; margin: 0 auto 80px;
}

.ex-hiw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ex-mint);
  background: var(--ex-mint-dim); border: 1px solid var(--ex-border-mint);
  padding: 5px 14px 5px 10px; border-radius: var(--ex-r-full); margin-bottom: 24px;
}
.ex-hiw-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ex-mint); box-shadow: 0 0 7px var(--ex-mint);
  flex-shrink: 0; animation: ex-hiw-pulse 2.2s ease infinite;
}
@keyframes ex-hiw-pulse {
  0%,100% { box-shadow: 0 0 5px var(--ex-mint); }
  50%      { box-shadow: 0 0 13px var(--ex-mint), 0 0 22px rgba(25,245,195,0.38); }
}

.ex-hiw-h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 800;
  line-height: 1.13; letter-spacing: -0.03em; color: var(--ex-text); margin-bottom: 20px;
}
.ex-hiw-h2 .ex-hiw-grad {
  background: var(--ex-grad-hero);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ex-hiw-sub {
  font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.78;
  color: var(--ex-text-muted); max-width: 600px; margin: 0 auto;
}

/* ================================================================
   TIMELINE TRACK
   ================================================================ */
.ex-hiw-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Connecting line behind all steps */
.ex-hiw-track::before {
  content: '';
  position: absolute;
  top: 36px; /* vertically centered with step number circle */
  left: 36px;
  right: 36px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--ex-mint) 0%,
    var(--ex-blue) 50%,
    var(--ex-purple) 100%
  );
  opacity: 0.22;
  z-index: 0;
}

/* ================================================================
   STEP CARD
   ================================================================ */
.ex-hiw-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  z-index: 1;
  cursor: default;
}

/* Step number circle */
.ex-hiw-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; letter-spacing: -0.03em;
  margin-bottom: 24px; flex-shrink: 0;
  position: relative;
  transition: transform 0.3s var(--ex-ease-spring), box-shadow 0.3s var(--ex-ease);
}

/* Each step has its own color */
.ex-hiw-step--1 .ex-hiw-num { background: rgba(25,245,195,0.1);  border: 1.5px solid rgba(25,245,195,0.35); color: var(--ex-mint);   box-shadow: 0 0 0 8px rgba(25,245,195,0.04); }
.ex-hiw-step--2 .ex-hiw-num { background: rgba(74,125,255,0.1);  border: 1.5px solid rgba(74,125,255,0.35); color: var(--ex-blue);   box-shadow: 0 0 0 8px rgba(74,125,255,0.04); }
.ex-hiw-step--3 .ex-hiw-num { background: rgba(0,191,166,0.1);   border: 1.5px solid rgba(0,191,166,0.35);  color: var(--ex-teal);   box-shadow: 0 0 0 8px rgba(0,191,166,0.04); }
.ex-hiw-step--4 .ex-hiw-num { background: rgba(118,87,255,0.1);  border: 1.5px solid rgba(118,87,255,0.35); color: var(--ex-purple); box-shadow: 0 0 0 8px rgba(118,87,255,0.04); }
.ex-hiw-step--5 .ex-hiw-num { background: rgba(255,209,102,0.1); border: 1.5px solid rgba(255,209,102,0.35); color: var(--ex-gold);  box-shadow: 0 0 0 8px rgba(255,209,102,0.04); }

.ex-hiw-step:hover .ex-hiw-num { transform: scale(1.1); }
.ex-hiw-step--1:hover .ex-hiw-num { box-shadow: 0 0 0 12px rgba(25,245,195,0.07),  0 0 32px rgba(25,245,195,0.2); }
.ex-hiw-step--2:hover .ex-hiw-num { box-shadow: 0 0 0 12px rgba(74,125,255,0.07),  0 0 32px rgba(74,125,255,0.2); }
.ex-hiw-step--3:hover .ex-hiw-num { box-shadow: 0 0 0 12px rgba(0,191,166,0.07),   0 0 32px rgba(0,191,166,0.2); }
.ex-hiw-step--4:hover .ex-hiw-num { box-shadow: 0 0 0 12px rgba(118,87,255,0.07),  0 0 32px rgba(118,87,255,0.2); }
.ex-hiw-step--5:hover .ex-hiw-num { box-shadow: 0 0 0 12px rgba(255,209,102,0.07), 0 0 32px rgba(255,209,102,0.2); }

/* Step label */
.ex-hiw-step-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 4px;
}
.ex-hiw-step--1 .ex-hiw-step-label { color: var(--ex-mint); }
.ex-hiw-step--2 .ex-hiw-step-label { color: var(--ex-blue); }
.ex-hiw-step--3 .ex-hiw-step-label { color: var(--ex-teal); }
.ex-hiw-step--4 .ex-hiw-step-label { color: var(--ex-purple); }
.ex-hiw-step--5 .ex-hiw-step-label { color: var(--ex-gold); }

/* Step title */
.ex-hiw-step-title {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ex-text); margin-bottom: 10px; line-height: 1.2;
}

/* Step copy */
.ex-hiw-step-copy {
  font-size: 0.82rem; line-height: 1.65;
  color: var(--ex-text-muted); max-width: 190px; margin: 0 auto;
  transition: color 0.22s var(--ex-ease);
}
.ex-hiw-step:hover .ex-hiw-step-copy { color: var(--ex-text); }

/* ================================================================
   CARD VARIANT — shown below on mobile / optional desktop alt
   Used on tablet where horizontal track collapses
   ================================================================ */
.ex-hiw-card-grid {
  display: none; /* hidden on desktop — track is used instead */
  grid-template-columns: 1fr;
  gap: 14px;
}

.ex-hiw-card {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--ex-panel);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-r-lg);
  padding: 22px 22px;
  transition: var(--ex-t);
  position: relative; overflow: hidden;
}
.ex-hiw-card:hover {
  background: var(--ex-panel-strong);
  border-color: var(--ex-border-mint);
  transform: translateX(4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ex-hiw-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
.ex-hiw-card--1::before { background: var(--ex-mint); }
.ex-hiw-card--2::before { background: var(--ex-blue); }
.ex-hiw-card--3::before { background: var(--ex-teal); }
.ex-hiw-card--4::before { background: var(--ex-purple); }
.ex-hiw-card--5::before { background: var(--ex-gold); }

.ex-hiw-card-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 900; flex-shrink: 0;
}
.ex-hiw-card--1 .ex-hiw-card-num { background: rgba(25,245,195,0.1);  color: var(--ex-mint); }
.ex-hiw-card--2 .ex-hiw-card-num { background: rgba(74,125,255,0.1);  color: var(--ex-blue); }
.ex-hiw-card--3 .ex-hiw-card-num { background: rgba(0,191,166,0.1);   color: var(--ex-teal); }
.ex-hiw-card--4 .ex-hiw-card-num { background: rgba(118,87,255,0.1);  color: var(--ex-purple); }
.ex-hiw-card--5 .ex-hiw-card-num { background: rgba(255,209,102,0.1); color: var(--ex-gold); }

.ex-hiw-card-body { flex: 1; }
.ex-hiw-card-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 3px;
}
.ex-hiw-card--1 .ex-hiw-card-label { color: var(--ex-mint); }
.ex-hiw-card--2 .ex-hiw-card-label { color: var(--ex-blue); }
.ex-hiw-card--3 .ex-hiw-card-label { color: var(--ex-teal); }
.ex-hiw-card--4 .ex-hiw-card-label { color: var(--ex-purple); }
.ex-hiw-card--5 .ex-hiw-card-label { color: var(--ex-gold); }

.ex-hiw-card-title { font-size: 0.95rem; font-weight: 700; color: var(--ex-text); margin-bottom: 5px; }
.ex-hiw-card-copy  { font-size: 0.8rem; line-height: 1.6; color: var(--ex-text-muted); }

/* ================================================================
   BOTTOM PROOF BAR
   ================================================================ */
.ex-hiw-proof {
  margin-top: 72px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  background: var(--ex-panel);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-r-xl);
  padding: 28px 40px;
  position: relative; overflow: hidden;
}
.ex-hiw-proof::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ex-mint-glow), transparent);
}
.ex-hiw-proof-item {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding: 0 20px;
}
.ex-hiw-proof-item + .ex-hiw-proof-item { border-left: 1px solid var(--ex-border); }
.ex-hiw-proof-num {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--ex-text);
}
.ex-hiw-proof-num span { color: var(--ex-mint); font-size: 70%; }
.ex-hiw-proof-lbl { font-size: 0.78rem; font-weight: 500; color: var(--ex-text-muted); line-height: 1.4; max-width: 130px; }

.ex-hiw-proof-cta {
  flex-shrink: 0; margin-left: 32px; padding-left: 32px;
  border-left: 1px solid var(--ex-border);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.ex-hiw-proof-cta-lbl { font-size: 0.82rem; color: var(--ex-text-muted); font-weight: 500; max-width: 170px; line-height: 1.5; }
.ex-hiw-proof-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ex-grad-mint); color: #05080D;
  font-family: var(--ex-font); font-size: 0.875rem; font-weight: 800;
  padding: 11px 22px; border-radius: var(--ex-r-full); text-decoration: none;
  transition: transform 0.25s var(--ex-ease-spring), box-shadow 0.28s var(--ex-ease);
  box-shadow: 0 4px 16px rgba(25,245,195,0.27); white-space: nowrap;
}
.ex-hiw-proof-btn:hover { color: #05080D; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(25,245,195,0.4); }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.ex-hiw-header .ex-hiw-eyebrow,
.ex-hiw-header .ex-hiw-h2,
.ex-hiw-header .ex-hiw-sub {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s var(--ex-ease-out), transform 0.6s var(--ex-ease-out);
}
.ex-hiw-header .ex-hiw-eyebrow { transition-delay: 0s; }
.ex-hiw-header .ex-hiw-h2      { transition-delay: 0.1s; }
.ex-hiw-header .ex-hiw-sub     { transition-delay: 0.18s; }
.ex-hiw-header.is-visible .ex-hiw-eyebrow,
.ex-hiw-header.is-visible .ex-hiw-h2,
.ex-hiw-header.is-visible .ex-hiw-sub { opacity: 1; transform: translateY(0); }

.ex-hiw-step, .ex-hiw-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.55s var(--ex-ease-out), transform 0.55s var(--ex-ease-out), background 0.28s var(--ex-ease), border-color 0.28s var(--ex-ease), box-shadow 0.28s var(--ex-ease);
}
.ex-hiw-step--1, .ex-hiw-card--1 { transition-delay: 0.04s; }
.ex-hiw-step--2, .ex-hiw-card--2 { transition-delay: 0.12s; }
.ex-hiw-step--3, .ex-hiw-card--3 { transition-delay: 0.20s; }
.ex-hiw-step--4, .ex-hiw-card--4 { transition-delay: 0.28s; }
.ex-hiw-step--5, .ex-hiw-card--5 { transition-delay: 0.36s; }

.ex-hiw-track.is-visible .ex-hiw-step,
.ex-hiw-card-grid.is-visible .ex-hiw-card { opacity: 1; transform: translateY(0); }

.ex-hiw-proof { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ex-ease-out) 0.2s, transform 0.6s var(--ex-ease-out) 0.2s; }
.ex-hiw-proof.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .ex-hiw { padding: 100px 28px 110px; }
  .ex-hiw-step-copy { max-width: 160px; }
}

@media (max-width: 860px) {
  .ex-hiw { padding: 80px 24px 90px; }
  /* Switch to card layout */
  .ex-hiw-track     { display: none; }
  .ex-hiw-card-grid { display: grid; }
  .ex-hiw-proof { flex-wrap: wrap; gap: 20px; padding: 24px; }
  .ex-hiw-proof-item + .ex-hiw-proof-item { border-left: none; border-top: 1px solid var(--ex-border); padding-top: 16px; }
  .ex-hiw-proof-item:first-child { border-top: none; }
  .ex-hiw-proof-cta { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px solid var(--ex-border); padding-top: 20px; width: 100%; }
}

@media (max-width: 500px) {
  .ex-hiw { padding: 70px 20px 80px; }
  .ex-hiw-proof-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-hiw-eyebrow-dot { animation: none !important; }
  .ex-hiw-header .ex-hiw-eyebrow, .ex-hiw-header .ex-hiw-h2, .ex-hiw-header .ex-hiw-sub,
  .ex-hiw-step, .ex-hiw-card, .ex-hiw-proof { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ex-hiw-step:hover .ex-hiw-num { transform: none !important; }
}