/* ============================================================
   Extras: trust band, conditions cloud, how-it-works,
   kinetic rotating word
   Loader + scroll-progress live in components.css — they paint
   above the fold, and extras.css is deferred via media=print.
   ============================================================ */

/* ---------- TRUST BAND ---------- */
.trust-band {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  background:
    linear-gradient(180deg, oklch(0.13 0.005 60 / 0), oklch(0.18 0.006 60 / 0.5), oklch(0.13 0.005 60 / 0));
}
.trust-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fg-2);
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
.trust-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: oklch(0.82 0.12 78 / 0.10);
  border: 1px solid oklch(0.82 0.12 78 / 0.22);
  color: var(--accent);
  display: grid; place-items: center;
}
@media (max-width: 900px) {
  .trust-row { justify-content: flex-start; }
}

/* ---------- STATS BAND ---------- */
.stats-band {
  padding: 56px 0;
  border-bottom: 1px solid var(--hairline);
}
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: end;
}
.stat-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 4px;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--fg);
}
.stat-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
}
@media (max-width: 760px) {
  .stats-band { padding: 40px 0; }
  .stats-row { grid-template-columns: 1fr; gap: 28px; }
  .stat-num { font-size: 48px; }
}

/* ---------- CONDITIONS CLOUD ---------- */
.cond-cloud {
  display: flex; flex-wrap: wrap; gap: 12px;
  max-width: 1080px;
}
.cond-chip {
  display: inline-flex; align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, oklch(0.20 0.008 60), oklch(0.15 0.006 60));
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.cond-chip::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 110%, oklch(0.82 0.12 78 / 0.5), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.cond-chip:hover {
  border-color: oklch(0.82 0.12 78 / 0.5);
  color: var(--fg);
  transform: translateY(-2px);
}
.cond-chip:hover::before { opacity: 1; }
.cond-chip > * { position: relative; z-index: 1; }
.cond-md { font-size: 18px; padding: 16px 26px; }
.cond-lg { font-size: 24px; padding: 18px 30px; font-family: var(--serif); font-style: italic; letter-spacing: -0.01em; color: var(--fg); }
.cond-lg { background: linear-gradient(180deg, oklch(0.22 0.01 60), oklch(0.16 0.008 60)); border-color: var(--hairline-2); }

/* ---------- HOW IT WORKS ---------- */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 24px; }
}
.how-rail {
  position: absolute; top: 38px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-2), var(--hairline-2), transparent);
  z-index: 0;
}
@media (max-width: 900px) { .how-rail { display: none; } }

.how-step {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(0.18 0.008 60), oklch(0.13 0.005 60));
  border: 1px solid var(--hairline);
  z-index: 1;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s;
}
.how-step:hover { transform: translateY(-6px); border-color: var(--hairline-2); }

.how-marker {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.how-marker-num {
  font-family: var(--serif);
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.how-marker-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: oklch(0.82 0.12 78 / 0.10);
  border: 1px solid oklch(0.82 0.12 78 / 0.25);
  color: var(--accent);
  display: grid; place-items: center;
  margin-left: auto;
}
.how-title {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.how-desc {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- KINETIC ROTATING WORD ---------- */
.kinetic-word {
  display: inline-grid;
  position: relative;
  vertical-align: baseline;
}
.kinetic-word > * { grid-area: 1 / 1; }
.kinetic-w {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotateX(60deg);
  transform-origin: center bottom;
  transition: opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.65s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.kinetic-w.is-in {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
.kinetic-spacer {
  visibility: hidden;
  font-family: var(--serif);
  font-style: italic;
  white-space: nowrap;
}

/* Add subtle accent under hero headline */
.hero-title { position: relative; }

/* Make hero accent (.) inline w kinetic word */
.hero-title .kinetic-word::after {
  content: ".";
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  position: absolute;
  right: -0.15em;
  bottom: 0;
}