/* ============================================================
   CASHEENO — home page sections
   Shared primitives (.cs-sec/.cs-h1/.cs-card/.cs-chip/…) now live in
   cs-ui.css so other pages can use them. This file is home-only.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.cs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: stretch;
  gap: clamp(2.5rem, 4.5vw, 3.75rem);
}
@media (max-width: 980px) {
  .cs-hero__grid { align-items: start; }
}
@media (max-width: 980px) {
  .cs-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Explicit steps rather than one uniform gap: the eyebrow sits close to the
   headline, the headline breathes, and the stats separate as a block. */
.cs-hero__copy { display: grid; gap: 0; justify-items: start; }
.cs-hero__copy > .cs-eyebrow  { margin-bottom: 1.6rem; }
.cs-hero__copy > .cs-h1       { margin-bottom: 1.4rem; }
.cs-hero__copy > .cs-hero__lede { margin-bottom: 2.1rem; }
.cs-hero__copy > .cs-hero__actions { margin-bottom: 2.6rem; }

.cs-hero__lede { max-width: 46ch; }
.cs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

.cs-bento {
  display: grid;
  /* Asymmetric bottom row: the pipeline list is narrow by nature, so the extra
     width goes to the capability chips, which need it to pack evenly. */
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: 1fr auto;
  align-items: stretch;
  height: 100%;
  gap: .85rem;
}
@media (max-width: 980px) {
  .cs-bento { height: auto; }
}
/* min-width:0 stops the pre's intrinsic width forcing the grid column wide. */
.cs-bento > .cs-panel { display: flex; flex-direction: column; min-width: 0; }
.cs-bento .cs-mini { flex: 1; display: flex; flex-direction: column; }
.cs-bento__wide { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .cs-bento { grid-template-columns: minmax(0, 1fr); }
}

.cs-panel {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #0E1118;
  box-shadow: var(--cs-shadow-lg);
  overflow: hidden;
}
.cs-panel__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--cs-line);
  background: rgba(255, 255, 255, .022);
}
.cs-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); flex: none; }
.cs-dot:nth-child(1) { background: #FF5F57; }
.cs-dot:nth-child(2) { background: #FEBC2E; }
.cs-dot:nth-child(3) { background: #28C840; }
.cs-panel__name {
  margin-left: .35rem;
  font-family: var(--cs-mono);
  font-size: .74rem;
  color: var(--cs-fg-dim);
}

.cs-code {
  margin: 0;
  flex: 1;
  padding: 1.05rem 1.15rem 1.25rem;
  font-family: var(--cs-mono);
  font-size: clamp(.66rem, 1.35vw, .8rem);
  line-height: 1.85;
  color: #C9D1E4;
  /* hidden, not auto: an overflow-scroll container with no focusable children
     becomes tabbable in Firefox, which would drop focus inside aria-hidden. */
  overflow: hidden;
  tab-size: 2;
}
.cs-line { display: block; white-space: pre; }

/* Typewriter. Lines start unclipped so the code is fully readable with no JS;
   cs-ui.js adds .is-typing and drives each line with a steps() animation whose
   step count matches its character count. Monospace makes 1ch exact.
   clip-path rather than width: revealing by width relayouts the panel once per
   character, right while the hero is painting. */
.cs-code.is-typing .cs-line {
  position: relative;
  clip-path: inset(0 100% 0 0);
}
@keyframes cs-type {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* The caret is a sibling of the clipped text, so the clip never eats it. It
   covers the same distance over the same duration - linear rather than
   stepped, which is at most half a character out and imperceptible.
   animation-duration accepts a custom property, so JS only sets --n and --dur. */
.cs-code.is-typing .cs-line::after {
  content: "";
  position: absolute;
  top: .15em;
  bottom: .15em;
  left: 0;
  width: 2px;
  background: var(--cs-brand-text);
  opacity: 0;
}
.cs-code.is-typing .cs-line.is-writing::after {
  animation: cs-caret-move var(--dur, 1s) linear both,
             cs-caret .7s steps(2) infinite;
}
@keyframes cs-caret-move {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--n, 0) * 1ch)); }
}
@keyframes cs-caret {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.cs-code .k { color: #C084FC; }  /* keyword  */
.cs-code .f { color: #60A5FA; }  /* function */
.cs-code .s { color: #34D399; }  /* string   */
.cs-code .c { color: #7F899E; font-style: italic; }

.cs-mini { padding: 1.05rem 1.15rem 1.2rem; }
.cs-mini__title {
  font-family: var(--cs-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
  margin-bottom: .9rem;
}

.cs-steps { display: grid; gap: .6rem; }
.cs-steps li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--cs-fg-muted);
}
.cs-tick {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: rgba(45, 212, 167, .16);
  color: var(--cs-mint);
}
.cs-tick svg { width: 10px; height: 10px; }
/* Steps land one after another, in time with the code finishing typing. */
.cs-steps li .cs-tick {
  animation: cs-stage .45s var(--cs-ease) calc(2.6s + var(--i, 0) * .5s) both;
}
@keyframes cs-stage {
  from { opacity: .2; transform: scale(.6); }
  to   { opacity: 1;  transform: none; }
}
.cs-steps li.is-live .cs-tick {
  background: rgba(192, 38, 211, .18);
  color: var(--cs-brand-text);
  animation: cs-stage .45s var(--cs-ease) calc(2.6s + var(--i, 0) * .5s) both,
             cs-blink 1.6s var(--cs-ease) calc(3.05s + var(--i, 0) * .5s) infinite;
}
@keyframes cs-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cs-steps time { margin-left: auto; font-family: var(--cs-mono); font-size: .72rem; color: var(--cs-fg-dim); }


/* ============================================================
   MARQUEE — stack strip
   ============================================================ */
.cs-marquee {
  position: relative;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-block: 1px solid var(--cs-line);
  background: var(--cs-bg-soft);
  overflow: hidden;
}
/* Label and pause control share one centred row, inside the page container,
   so the control reads as part of the strip rather than floating over it. */
.cs-marquee__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  max-width: var(--cs-maxw);
  margin: 0 auto 1.35rem;
  padding-inline: var(--cs-pad);
}
.cs-marquee__label {
  font-family: var(--cs-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
}
.cs-marquee__track {
  display: flex;
  width: max-content;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  gap: clamp(2rem, 5vw, 3.5rem);
  animation: cs-slide 42s linear infinite;
}
.cs-marquee:hover .cs-marquee__track,
.cs-marquee:focus-within .cs-marquee__track,
.cs-marquee.is-paused .cs-marquee__track { animation-play-state: paused; }
.cs-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  flex: none;
}
.cs-marquee__group span {
  font-size: clamp(.95rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--cs-fg-dim);
  white-space: nowrap;
  transition: color .2s var(--cs-ease);
}
.cs-marquee__group span:hover { color: var(--cs-fg); }
@keyframes cs-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - clamp(1rem, 2.5vw, 1.75rem)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.cs-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1rem;
}
.cs-service {
  padding: 1.6rem 1.5rem 1.75rem;
  display: grid;
  gap: .8rem;
  align-content: start;
  transition: transform .3s var(--cs-ease), border-color .3s var(--cs-ease);
}
.cs-service::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--cs-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--cs-ease);
  pointer-events: none;
}
.cs-service:hover { transform: translateY(-4px); }
.cs-service:hover::after { opacity: .85; }

.cs-service__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #fff;
  background: var(--cs-grad-soft);
  border: 1px solid rgba(192, 38, 211, .3);
}
.cs-service__icon svg { width: 21px; height: 21px; }
.cs-service p { color: var(--cs-fg-muted); font-size: .94rem; }
.cs-service ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .25rem;
}
.cs-service li {
  font-family: var(--cs-mono);
  font-size: .69rem;
  color: var(--cs-fg-dim);
  padding: .25rem .55rem;
  border: 1px solid var(--cs-line);
  border-radius: 6px;
}

/* ============================================================
   WORK — product grid
   ============================================================ */
.cs-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 306px), 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.cs-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* the art must clip to the card radius */
  transition: transform .3s var(--cs-ease), border-color .3s var(--cs-ease),
              box-shadow .3s var(--cs-ease);
}
.cs-product:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 38, 211, .34);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
}

.cs-product__art {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(.85rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--cs-line);
  background:
    radial-gradient(78% 86% at 50% 8%, rgba(192, 38, 211, .17), transparent 68%),
    rgba(255, 255, 255, .022);
}
.cs-product__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 250px;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5));
}

.cs-product__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: 1.3rem 1.35rem 1.4rem;
  flex: 1;
}
.cs-product__kicker {
  font-family: var(--cs-mono);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cs-brand-text);
}
.cs-product__name {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
}
.cs-product__desc {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--cs-fg-muted);
}
.cs-product__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.cs-product__tags .cs-chip { font-size: .67rem; padding: .28rem .55rem; }

/* Links pinned to the bottom so every card's badge row sits on one line. */
.cs-product__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .9rem;
}
.cs-product__links a { display: inline-flex; align-items: center; }
.cs-product__links img {
  display: block;
  height: 34px;
  width: auto;
  opacity: .94;
  transition: opacity .2s var(--cs-ease), transform .2s var(--cs-ease);
}
.cs-product__links a:hover img { opacity: 1; transform: translateY(-2px); }

.cs-product .cs-product__web {
  gap: .4rem;
  height: 34px;
  padding: 0 .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cs-fg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--cs-line-strong);
  border-radius: 8px;
  transition: background-color .2s var(--cs-ease), transform .2s var(--cs-ease);
}
.cs-product .cs-product__web:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-2px);
}
.cs-product__web svg { width: .85em; height: .85em; }

.cs-product__note {
  font-family: var(--cs-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cs-fg-dim);
}

/* ============================================================
   PROCESS
   ============================================================ */
.cs-process {
  display: grid;
  /* Explicit tracks rather than auto-fit: Chrome resolves the percentage in
     `minmax(min(100%, X), 1fr)` inside an auto-repeat as `auto`, which sized
     tracks to max-content and orphaned step 05 onto a row of its own. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  counter-reset: cs-step;
}
.cs-step {
  position: relative;
  padding-top: 2.6rem;
  counter-increment: cs-step;
}
.cs-step::before {
  content: "0" counter(cs-step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--cs-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--cs-brand-text);
}
.cs-step::after {
  content: "";
  position: absolute;
  top: 1.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cs-line-strong), transparent);
}
.cs-step h3 { margin-bottom: .5rem; }
.cs-step p { color: var(--cs-fg-muted); font-size: .92rem; }

/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */
.cs-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1rem;
}
.cs-model { padding: 1.7rem 1.6rem; display: grid; gap: .85rem; align-content: start; }
.cs-model--flag {
  background:
    linear-gradient(180deg, rgba(192, 38, 211, .12), rgba(124, 58, 237, .05)),
    var(--cs-surface);
  border-color: rgba(192, 38, 211, .35);
}
.cs-model__tag {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  font-family: var(--cs-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 100px;
  color: #fff;
  background: var(--cs-grad);
}
.cs-model p { color: var(--cs-fg-muted); font-size: .93rem; }
.cs-model ul { display: grid; gap: .5rem; margin-top: .3rem; }
.cs-model li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .89rem;
  color: var(--cs-fg-muted);
}
.cs-model li svg { width: 15px; height: 15px; flex: none; margin-top: .28em; color: var(--cs-mint); }

/* ============================================================
   TESTIMONIALS — scroll-snap rail, no carousel library
   ============================================================ */
.cs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 380px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: .35rem 1.5rem;
  padding-inline: var(--cs-pad);
  margin-inline: calc(var(--cs-pad) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--cs-line-strong) transparent;
  overscroll-behavior-x: contain;
}
.cs-rail::-webkit-scrollbar { height: 6px; }
.cs-rail::-webkit-scrollbar-thumb { background: var(--cs-line-strong); border-radius: 100px; }
.cs-quote {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1.6rem 1.5rem;
}
.cs-quote__mark { width: 26px; height: 20px; color: var(--cs-brand); opacity: .55; }
.cs-quote blockquote {
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--cs-fg);
}
.cs-quote figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .86rem;
  color: var(--cs-fg-dim);
}
.cs-quote figcaption img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cs-line);
}

/* ============================================================
   CTA
   ============================================================ */

/* Marquee pause button - SC 2.2.2 needs a mechanism everyone can reach,
   not just a mouse hover. Hidden when there is no motion to pause. */
.cs-marquee__pause {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font-family: var(--cs-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cs-line);
  border-radius: 100px;
  cursor: pointer;
  transition: color .2s var(--cs-ease), border-color .2s var(--cs-ease);
}
.cs-marquee__pause:hover { color: var(--cs-fg); border-color: var(--cs-line-strong); }
.cs-marquee__pause svg { width: 11px; height: 11px; }
.cs-marquee__pause .cs-ic-play { display: none; }
.cs-marquee__pause[aria-pressed="true"] .cs-ic-play { display: block; }
.cs-marquee__pause[aria-pressed="true"] .cs-ic-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-marquee__pause { display: none; }
}

/* Label is read by AT and by sighted users on wide screens; the icon alone
   carries it in the tight space beside the marquee. */
.cs-marquee__pausetext { line-height: 1; }
@media (max-width: 600px) {
  .cs-marquee__pausetext {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
}

/* Reviewer initial - replaces the oversized remote avatars. */
.cs-quote__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cs-fg);
  background: var(--cs-grad-soft);
  border: 1px solid rgba(192, 38, 211, .3);
}

@media (max-width: 1040px) { .cs-process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cs-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .cs-process { grid-template-columns: minmax(0, 1fr); } }

/* Denser chips inside the bento only; the case-study chips stay full size. */
.cs-bento .cs-chip {
  font-size: .68rem;
  padding: .3rem .55rem;
}
.cs-bento .cs-chips { gap: .35rem; }

/* ============================================================
   SERVICES — featured specialty card + richer card treatment
   ============================================================ */
.cs-service--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  background:
    radial-gradient(90% 140% at 88% 10%, rgba(192, 38, 211, .18), transparent 62%),
    radial-gradient(70% 120% at 4% 96%, rgba(59, 130, 246, .12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
    var(--cs-surface);
  border-color: rgba(192, 38, 211, .32);
}
.cs-service--feature:hover { transform: none; }
.cs-service--feature::after { display: none; }

.cs-feature__body { display: grid; justify-items: start; gap: 1rem; }

.cs-feature__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--cs-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  padding: .38rem .8rem;
  border-radius: 100px;
  background: var(--cs-grad);
}
.cs-feature__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
}
.cs-service--feature p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 58ch;
  color: var(--cs-fg-muted);
}
.cs-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .15rem;
}
.cs-feature__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--cs-brand-text);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--cs-ease), gap .2s var(--cs-ease);
}
.cs-feature__link:hover { border-bottom-color: currentColor; gap: .7rem; }
.cs-feature__link svg { width: 1em; height: 1em; }

.cs-feature__art {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cs-feature__art::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 38, 211, .22), transparent 68%);
}
.cs-feature__art svg { width: 100%; height: auto; }
@media (max-width: 760px) {
  .cs-service--feature { grid-template-columns: minmax(0, 1fr); }
  .cs-feature__art { display: none; }
}

/* Featured-card art motion — the same tiles as the puzzle mockup, settling. */
.cs-fga-1 { animation: cs-fga-pop 5s var(--cs-ease) infinite; transform-origin: 95px 83px; }
.cs-fga-2 { animation: cs-fga-pop 5s var(--cs-ease) .5s infinite; transform-origin: 41px 137px; }
.cs-fga-3 { animation: cs-fga-pop 5s var(--cs-ease) 1s infinite; transform-origin: 149px 137px; }
/* Floor at .3 rather than 0: the composition should always read, even in the
   frames between pops. */
@keyframes cs-fga-pop {
  0%, 6%   { opacity: .3; transform: scale(.82); }
  16%, 78% { opacity: 1;  transform: scale(1); }
  90%,100% { opacity: .3; transform: scale(.82); }
}
.cs-fga-coin { animation: cs-fga-float 4.5s var(--cs-ease) infinite; }
@keyframes cs-fga-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.cs-fga-spark { animation: cs-fga-spark 3.2s var(--cs-ease) infinite; transform-origin: 212px 164px; }
@keyframes cs-fga-spark {
  0%, 100% { opacity: .35; transform: scale(.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-fga-1, .cs-fga-2, .cs-fga-3, .cs-fga-coin, .cs-fga-spark { animation: none; opacity: 1; }
}

/* Standard service cards: clearer affordance and a warmer icon on hover. */
.cs-service__icon {
  transition: transform .3s var(--cs-ease), border-color .3s var(--cs-ease),
              box-shadow .3s var(--cs-ease);
}
.cs-service:not(.cs-service--feature):hover .cs-service__icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(192, 38, 211, .55);
  box-shadow: 0 10px 26px -12px rgba(192, 38, 211, .9);
}
.cs-service:not(.cs-service--feature) .cs-h3 {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cs-service:not(.cs-service--feature) .cs-h3::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--cs-ease), transform .25s var(--cs-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-service:not(.cs-service--feature):hover .cs-h3::after {
  opacity: .7;
  transform: translateX(0);
}

.cs-fga-bar {
  transform-origin: 18px 185px;
  animation: cs-fga-fill 5s var(--cs-ease) infinite;
}
@keyframes cs-fga-fill {
  0%, 8%   { transform: scaleX(.35); }
  60%,100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-fga-bar { animation: none; }
}