/* =====================================================================
   Serpwarden v2 components (x-*): steps timeline, reported-results cards
   with counters, compact inner-page hero, hero chips.
   New class names only - existing rules in style.css are untouched.
   ===================================================================== */

/* ---- compact inner hero ---- */
.x-h1{margin-top:1.25rem;font-size:clamp(2.1rem,3.6vw,3.3rem);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--color-snow)}
.x-lead{margin-top:1.5rem;max-width:36rem;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.65;color:var(--color-mist)}
.x-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.x-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--color-mist);
  background:rgb(255 255 255/.04);border:1px solid var(--color-line);transition:border-color .3s,color .3s,background .3s}
.x-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-teal);box-shadow:0 0 10px var(--color-teal)}
.x-chip:hover{border-color:rgb(46 230 197/.45);color:var(--color-snow);background:rgb(46 230 197/.06)}

/* ---- steps timeline (dark) ---- */
.x-steps{--p:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:2rem;margin-top:3.5rem}
.x-steps::before,.x-steps::after{content:"";position:absolute;left:0;right:0;top:27px;height:2px;border-radius:2px}
.x-steps::before{background:var(--color-line)}
.x-steps::after{background:linear-gradient(90deg,var(--color-teal),var(--color-teal-deep) 50%,var(--color-violet));transform-origin:0 50%;transform:scaleX(var(--p));box-shadow:0 0 14px rgb(46 230 197/.45)}
.x-step{position:relative;z-index:1}
.x-step__dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.5rem;font-family:var(--font-mono);font-size:.95rem;font-weight:600;
  color:var(--color-fog);background:var(--color-void);box-shadow:inset 0 0 0 2px var(--color-line);transition:background .6s,color .6s,box-shadow .6s,transform .6s}
.x-step.lit .x-step__dot{background:var(--color-teal);color:var(--color-void);box-shadow:0 0 0 8px rgb(46 230 197/.14),0 0 32px rgb(46 230 197/.55);transform:scale(1.04)}
.x-step small{display:block;margin-bottom:.4rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-teal)}
.x-step h3{font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--color-snow)}
.x-step p{margin-top:.6rem;font-size:.97rem;line-height:1.6;color:var(--color-fog);max-width:22rem}
.x-steps--5 .x-step h3{font-size:1.3rem}
.x-steps--5 .x-step p{font-size:.92rem}

/* ---- reported results cards ---- */
.x-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:3rem}
.x-cases--single{grid-template-columns:minmax(0,52rem)}
.x-case{position:relative;overflow:hidden;border-radius:28px;padding:2.4rem;border:1px solid var(--color-line);
  background:linear-gradient(160deg,rgb(255 255 255/.07),rgb(255 255 255/.02));transition:border-color .5s,transform .5s}
.x-case:hover{border-color:rgb(46 230 197/.35)}
.x-case--b:hover{border-color:rgb(255 93 108/.35)}
.x-case__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.x-case__type{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-teal)}
.x-case--b .x-case__type{color:#ff9aa5}
.x-badge{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;background:rgb(46 230 197/.12);color:var(--color-teal)}
.x-case--b .x-badge{background:rgb(255 93 108/.15);color:#ff8a96}
.x-case h3{font-family:var(--font-display);font-size:1.55rem;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--color-snow);max-width:30rem}
.x-case>p{margin-top:.6rem;color:var(--color-fog);font-size:.97rem;line-height:1.6;max-width:34rem}
.x-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1.9rem}
.x-kpi{padding:1.15rem 1rem;border-radius:18px;background:rgb(0 0 0/.22);border:1px solid var(--color-line)}
.x-kpi strong{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(110deg,var(--color-teal),#8ff7e6 45%,var(--color-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.x-case--b .x-kpi strong{background:linear-gradient(110deg,#ffb3bb,var(--color-alert) 60%,var(--color-amber));-webkit-background-clip:text;background-clip:text}
.x-kpi span{display:block;margin-top:.55rem;font-size:.82rem;line-height:1.35;color:var(--color-fog)}
.x-spark{position:absolute;right:-10px;top:28px;width:260px;height:90px;opacity:.35;pointer-events:none}
.x-spark path{fill:none;stroke:var(--color-teal);stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.4s cubic-bezier(.22,1,.36,1)}
.x-case--b .x-spark path{stroke:var(--color-alert)}
.x-case.in .x-spark path{stroke-dashoffset:0}
.x-case__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-weight:600;color:var(--color-teal);transition:gap .3s}
.x-case__link:hover{gap:.8rem}
.x-case__link svg{width:16px;height:16px}
.x-note{display:flex;gap:.55rem;align-items:flex-start;margin-top:1.5rem;font-size:.84rem;line-height:1.5;color:var(--color-fog);max-width:52rem}
.x-note svg{width:16px;height:16px;flex:none;margin-top:2px}

/* ---- responsive ---- */
@media (max-width:1023px){
  .x-steps{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .x-steps::before,.x-steps::after{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .x-steps::after{transform-origin:50% 0;transform:scaleY(var(--p))}
  .x-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:1.25rem;align-items:start}
  .x-step__dot{grid-row:1/span 3;margin:0}
  .x-step p{max-width:none}
  .x-cases{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .x-case{padding:1.7rem 1.4rem;border-radius:22px}
  .x-kpis{gap:.5rem}
  .x-kpi{padding:.9rem .7rem}
  .x-kpi span{font-size:.74rem}
  .x-chips{margin-top:1.4rem}
}
@media (max-width:420px){
  .x-h1{font-size:2.05rem}
  .x-kpis{grid-template-columns:minmax(0,1fr)}
  .x-kpi{display:flex;align-items:baseline;gap:.75rem}
  .x-kpi span{margin-top:0}
  .x-step{grid-template-columns:46px minmax(0,1fr);column-gap:1rem}
  .x-step__dot{width:46px;height:46px;font-size:.82rem}
  .x-steps::before,.x-steps::after{left:22px;top:23px;bottom:23px}
  .x-step h3{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .x-spark path{stroke-dashoffset:0;transition:none}
  .x-step__dot{transition:none}
}