/* ─── Verkkosivupalvelun sommitelmat ──────────────────────────────────────
   Esimerkkityö selainkehyksessä, joka liukenee mustaan, toimialarivi, prosessi
   ja paketit. Kaikki mitat tokeneista. */

.v-hero { padding-bottom: 0; }
.v-hero .s-display { max-width: 16ch; }

/* ─── Esimerkkityön näyttö ────────────────────────────────────────────────
   Näyttö seisoo valkoisella kuten hero ja hukkuu alaosastaan savuun. Savu on
   SVG-suodattimia (feTurbulence + feDisplacementMap): kiinteä musta massa, jonka
   reuna on kohinalla pilvimäinen, ja sen yllä harvenevia haituvia. Massa on
   matalimmillaan keskellä näytön alla ja nousee kaarena sivureunoja kohti, jolloin
   näytön alakulmat katoavat savuun eikä väliin jää suoraa rajaa. */
.v-stage { position: relative; overflow: hidden; isolation: isolate; padding-top: var(--s-section-y); background: var(--s-paper); }
.v-stage__inner { position: relative; z-index: 1; padding-inline: var(--s-gutter); }

.v-stage__frame {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin-bottom: clamp(-240px, -14vw, -96px);
}

.v-stage .m-frame { position: relative; box-shadow: none; }

.v-stage__smoke {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: clamp(240px, 28vw, 420px);
  pointer-events: none;
}

.v-smoke { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-smoke--m { display: none; }

@media (max-width: 700px) {
  .v-hero .s-actions > .s-btn--secondary { display: none; }
  .v-stage__frame { margin-bottom: -56px; }
  .v-stage__smoke { height: 170px; }
  .v-smoke--d { display: none; }
  .v-smoke--m { display: block; }
}

.v-logos { overflow: hidden; padding-block: var(--s-7) var(--s-section-y); }

.v-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.v-marquee { display: flex; width: max-content; animation: v-marquee 60s linear infinite; }
.v-marquee__track { display: flex; align-items: center; }

.v-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
  padding-right: clamp(28px, 3vw, 48px);
  color: var(--s-on-black-2);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: var(--s-fw-medium);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.v-marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--s-pink-300); opacity: 0.7; }

@keyframes v-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .v-marquee { animation: none; }
}

/* ─── Ominaisuudet ────────────────────────────────────────────────────────*/
.v-features { row-gap: clamp(40px, 4vw, 56px); }
.v-feature { display: flex; flex-direction: column; gap: var(--s-3); }
.v-feature .s-icontile { margin-bottom: var(--s-2); }
.v-feature .s-subtitle { font-size: 1.1875rem; line-height: 1.3; }
.v-feature .s-text { font-size: var(--s-fs-ui); line-height: 1.55; max-width: 40ch; }

/* ─── Prosessi ────────────────────────────────────────────────────────────
   Neljä tummaa korttia. Alareunan viiva täyttyy vaihe vaiheelta. */
.v-steps { gap: var(--s-4); }

.v-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 240px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--s-rule-dark);
  border-radius: var(--s-radius-lg);
  background: var(--s-black-2);
}

.v-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: var(--s-6); }
.v-step__tag { padding: 3px 10px; border-radius: 999px; background: var(--s-accent-soft); color: var(--s-pink-100); font-size: 12px; }
.v-step .s-text { max-width: 44ch; }

.v-step__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--s-pink-300) var(--v-p), rgba(255, 255, 255, 0.06) var(--v-p));
}

/* ─── Sisällönmuokkaus ───────────────────────────────────────────────────*/
.v-stacked__media {
  width: min(100%, 1120px);
  margin: var(--s-head-gap) auto 0;
  padding: clamp(10px, 1.4vw, 16px);
  border: 1px solid var(--s-rule);
  border-radius: 24px;
  background: var(--s-surface);
}

.v-stacked__media .m-cms { box-shadow: none; }
.v-panel .m-scale { max-width: 480px; }



/* Sivureunat tummuvat valon alaosassa, jolloin valo on kirkkain näytön vieressä
   eikä levity verhoksi koko leveydelle. Maski pitää yläosan valkoisena. */
.v-stage__light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--s-black) 0%, rgba(9, 9, 11, 0) 34%, rgba(9, 9, 11, 0) 66%, var(--s-black) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 70%);
  opacity: 0.85;
}