/* spark-landing — components: pills, hero bg, cards, gradient cards,
   outcomes columns, solution white cards, code block, mission box. */

/* ============ Buttons / Pills (arrow absolutely left, blue accent) ============ */
.spk-pill, .spk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--spk-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--spk-r-pill);
  transition: transform var(--spk-dur-quick) var(--spk-ease),
              box-shadow var(--spk-dur-base) var(--spk-ease),
              background var(--spk-dur-base) var(--spk-ease),
              color var(--spk-dur-base) var(--spk-ease);
  white-space: nowrap;
}
/* arrow sits isolated on the left (spark pattern: padding-left ~76px) */
.spk-pill--arrow { padding: 16px 34px 16px 76px; }
.spk-pill--arrow .spk-pill__ico {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  display: inline-flex;
}

/* White pill, blue text + blue arrow (hero "Learn More", "API Documentation") */
.spk-pill--light {
  background: #fff; color: var(--spk-blue);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
}
.spk-pill--light .spk-pill__ico { color: var(--spk-blue); }
.spk-pill--light:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0,0,0,0.45); }

/* Solid blue pill (Find Your Use Case, Read More, Login final) */
.spk-pill--blue {
  background: var(--spk-blue); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(4, 111, 249, 0.55);
}
.spk-pill--blue .spk-pill__ico { color: #fff; }
.spk-pill--blue:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(4, 111, 249, 0.7); }

/* Header login — outline pill (white on hero, dark when panel) */
.spk-pill--header {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff; padding: 11px 26px; font-size: 15px;
}
.spk-pill--header:hover { background: #fff; color: var(--spk-navy); border-color: #fff; }
.spk-header.is-scrolled .spk-pill--header { border-color: rgba(245, 114, 76, 0.55); color: var(--spk-ink); }
.spk-header.is-scrolled .spk-pill--header:hover { background: var(--spk-blue); color: #fff; border-color: var(--spk-blue); }

/* Small read-more blue pill (resources) */
.spk-pill--sm { padding: 11px 22px 11px 52px; font-size: 14px; }
.spk-pill--sm .spk-pill__ico { left: 22px; }

.spk-btn--primary { background: var(--spk-blue); color: #fff; padding: 14px 26px; justify-content: center; }

/* Ghost pill — transparent, white outline (case-study cards over dark photo) */
.spk-pill--ghost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.92);
  padding: 15px 32px;
}
.spk-pill--ghost:hover { background: #fff; color: var(--spk-navy); border-color: #fff; transform: translateY(-2px); }

/* ============ Hero background (gradient · rounded bottom · flow + dashes) ============ */
.spk-hero { background: var(--spk-gradient); }
.spk-hero__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.spk-hero__mesh {
  position: absolute; inset: -20% -10%;
  background:
    /* deep navy top band (spark hero is navy-dominant up top, warm toward bottom) */
    linear-gradient(180deg, rgba(11, 22, 78, 0.95) 0%, rgba(11, 22, 78, 0.35) 26%, rgba(11, 22, 78, 0) 48%),
    radial-gradient(60% 44% at 50% -4%, rgba(16, 30, 102, 0.9) 0%, rgba(16, 30, 102, 0) 64%),
    radial-gradient(46% 56% at 88% 34%, rgba(155, 58, 99, 0.42) 0%, rgba(155, 58, 99, 0) 62%),
    radial-gradient(72% 76% at 80% 110%, rgba(245, 114, 76, 0.72) 0%, rgba(245, 114, 76, 0) 60%);
}
/* wavy flow lines (signature spark overlay) */
.spk-hero__flow {
  position: absolute; inset: 0; opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23ffffff' stroke-width='1.2'><path d='M-50 180 C 300 90, 620 270, 980 150 S 1500 60, 1700 200'/><path d='M-50 330 C 320 230, 640 420, 1000 300 S 1520 210, 1700 350'/><path d='M-50 500 C 300 400, 660 600, 1010 470 S 1520 380, 1700 520'/><path d='M-50 670 C 320 560, 640 760, 1000 640 S 1520 540, 1700 690'/></g></svg>");
  background-size: cover;
}
/* spark particles — radiate outward from hero center */
.spk-hero__dash {
  position: absolute; inset: 0; opacity: 0.26;
  background-image: url("../images/hero-particles.svg");
  background-position: center 38%;
  background-repeat: no-repeat;
  background-size: 130% auto;
}
.spk-hero__fade { display: none; }

/* ============ Statement video play button ============ */
.spk-statement__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--spk-navy);
  box-shadow: 0 8px 28px -8px rgba(0,0,0,0.4);
  transition: transform var(--spk-dur-quick) var(--spk-ease);
}
.spk-statement__media:hover .spk-statement__play { transform: translate(-50%, -50%) scale(1.08); }
.spk-statement__play svg { margin-left: 4px; }

/* ============ How It Works — step cards (circle number badge) ============ */
.spk-howitworks { background: var(--spk-gradient-dark); background-color: var(--spk-navy); }
.spk-howitworks__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.spk-howitworks__bg::before {
  content: ""; position: absolute; left: -8%; bottom: -20%;
  width: 50%; height: 80%;
  background: radial-gradient(circle, rgba(245, 114, 76, 0.4) 0%, rgba(245,114,76,0) 65%);
}
.spk-howitworks .spk-container { position: relative; z-index: 1; }
.spk-step-card {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--spk-line-on-dark);
  border-radius: var(--spk-r-grad);
  padding: 36px 34px 40px;
  min-height: 260px;
}
.spk-step-card__n {
  width: 56px; height: 56px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--spk-font-display); font-size: 22px; font-weight: 500;
  color: #fff; margin-bottom: 30px;
}
.spk-step-card__title { font-family: var(--spk-font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 14px; }
.spk-step-card__desc { color: var(--spk-ink-on-dark-muted); font-size: 15px; line-height: 24px; }

/* ============ Competitive — horizontal gradient cards (icon left) ============ */
.spk-grad-card {
  position: relative;
  background: var(--spk-gradient);
  color: #fff;
  border-radius: var(--spk-r-grad);
  padding: 38px 40px;
  min-height: 150px;
  display: flex; align-items: center; gap: 26px;
  overflow: hidden;
  box-shadow: var(--spk-shadow-grad);
  transition: transform var(--spk-dur-base) var(--spk-ease), box-shadow var(--spk-dur-base) var(--spk-ease);
}
.spk-grad-card:hover { transform: translateY(-4px); }
.spk-grad-card__icon { flex: 0 0 auto; color: #fff; opacity: 0.95; }
.spk-grad-card__title { font-family: var(--spk-font-display); font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.spk-grad-card__desc { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 22px; }

/* ============ Outcomes — 3 columns, center active, faded sides ============ */
.spk-outcome-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  opacity: 0.34;
  transition: opacity var(--spk-dur-base) var(--spk-ease);
}
.spk-outcome-card.is-active { opacity: 1; }
.spk-outcome-card__icon { color: var(--spk-navy); opacity: 0.85; }
.spk-outcome-card__stat { font-family: var(--spk-font-display); font-size: 20px; font-weight: 600; color: var(--spk-ink); }
.spk-outcome-card__role { font-size: 14px; color: var(--spk-ink-dim); margin-top: -8px; }
.spk-outcome-card__quote { font-size: 15px; line-height: 24px; color: var(--spk-ink-muted); }
.spk-outcome-card__link { color: var(--spk-blue); font-weight: 600; font-size: 14px; }

.spk-carousel-btn {
  width: 52px; height: 52px; border-radius: 999px;
  border: 1.5px solid var(--spk-blue);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--spk-blue); background: transparent;
  transition: background var(--spk-dur-quick) var(--spk-ease), color var(--spk-dur-quick) var(--spk-ease);
}
.spk-carousel-btn:hover { background: var(--spk-blue); color: #fff; }

/* ============ Use case marquee tiles (landscape, uniform height) ============ */
.spk-uc-tile {
  position: relative; flex: 0 0 380px; height: 220px;
  border-radius: var(--spk-r-panel); overflow: hidden; background: var(--spk-bg-soft);
}
.spk-uc-tile img { width: 100%; height: 100%; object-fit: cover; }
.spk-uc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,22,70,0) 42%, rgba(13,22,70,0.72) 100%); pointer-events: none; }
.spk-uc-tile__label {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; color: #fff;
  font-family: var(--spk-font-display); font-weight: 600; font-size: 20px; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.spk-uc-tile .spk-wf-block { border-radius: 0; height: 100%; }
@media (max-width: 600px) { .spk-uc-tile { flex-basis: 280px; height: 170px; } }

/* ============ Solution — white cards ============ */
.spk-sol-card {
  background: #fff; border-radius: var(--spk-r-card);
  padding: 34px 38px;
}
.spk-sol-card__title { font-family: var(--spk-font-display); font-size: 28px; font-weight: 500; color: var(--spk-ink); margin-bottom: 10px; }
.spk-sol-card__desc { color: var(--spk-ink-muted); font-size: 15px; line-height: 23px; max-width: 460px; }

/* ============ Code section ============ */
.spk-code__block {
  background: var(--spk-bg-code);
  border-radius: var(--spk-r-code);
  padding: 38px; max-width: 760px; margin: 0 auto;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6);
  text-align: left;
}
.spk-code__dots { display: flex; gap: 9px; margin-bottom: 24px; }
.spk-code__dots span { width: 12px; height: 12px; border-radius: 999px; }
.spk-code__dots span:first-child { background: #FF5F57; }
.spk-code__dots span:nth-child(2) { background: #FEBC2E; }
.spk-code__dots span:nth-child(3) { background: #28C840; }
.spk-code__pre { font-family: var(--spk-font-mono); font-size: 26px; line-height: 1.5; color: #fff; margin: 0; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 600px) { .spk-code__pre { font-size: 18px; } .spk-code__block { padding: 26px; } }
.spk-code__pre .tok-arg { color: #FF9A4C; }
.spk-code__pre .tok-arg2 { color: #7BB3FF; }
.spk-code__cursor { display: inline-block; width: 2px; height: 1em; background: #fff; margin-left: 1px; vertical-align: -2px; animation: spk-blink 1.1s steps(1) infinite; }
@keyframes spk-blink { 50% { opacity: 0; } }

/* ============ Resources cards (clean: art + bold title only) ============ */
.spk-res-card { display: flex; flex-direction: column; gap: 20px; background: none; }
.spk-res-card__media {
  display: block; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: var(--spk-r-code);
}
.spk-res-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--spk-dur-slow) var(--spk-ease); }
.spk-res-card:hover .spk-res-card__media img { transform: scale(1.04); }
.spk-res-card__title { font-family: var(--spk-font-display); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; color: var(--spk-ink); }

/* ============ Mission box (deep navy, clean — matches dark sections up top) ============ */
.spk-mission__bg { position: absolute; inset: 0; background: var(--spk-gradient-dark); background-color: var(--spk-navy); }