/* Flow AI – uusi ilme (2026-10-04). Ladataan styles.css:n JÄLKEEN.
   Tavoite: ilmavuutta, ei kehysviivoja sivun reunoilla eikä osioiden välillä, ei viivoitusraitoja.
   Korvaa styles.css:n tiukat hairline-ruudukot erillisillä, pyöristetyillä korteilla. */

:root {
  --section-y: clamp(4rem, 2.4rem + 6vw, 8.5rem);
  --card-gap: clamp(16px, 2.2vw, 28px);
  --radius-xl: 28px;
  --color-glow: rgba(245, 73, 39, .08);
}

/* ---------- Kehys ja osioiden väliset viivat pois ---------- */
.shell { border-inline: 0; }
.section { border-bottom: 0; padding-bottom: calc(var(--section-y) * .3); }
.section-head { padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); gap: var(--space-5); }
.section-head + .grid-lines,
.section-head + .case-list,
.section-head + .process-steps,
.section-head + .logo-row,
.section-head + .faq { border-top: 0; }
.divider-hatch { display: none; }
.hero { border-bottom: 0; isolation: isolate; }
.hero__visual { border-top: 0; background: none; }
.site-footer { border-top: 0; background: var(--color-surface); margin-top: var(--section-y); }

/* Pehmeä hehku heron taakse (korvaa viivoituksen) */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: -30%; width: 70%; height: 130%;
  background: radial-gradient(closest-side, var(--color-glow), transparent 70%);
}

/* ---------- Ruudukot: viivat → välit ja pyöristetyt kortit ---------- */
.grid-lines { background: transparent; gap: var(--card-gap); padding-inline: var(--cell-pad); }
.grid-lines > * { border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.grid-lines > .cell-fill { display: none; }
.grid-lines > *:hover { border-color: var(--color-line-strong); }
.booking-grid { background: transparent; gap: var(--card-gap); border: 0; padding-inline: var(--cell-pad); }

/* Case-rivit, prosessi, UKK ilman reunaviivoja */
.case-list { display: grid; gap: var(--card-gap); padding-inline: var(--cell-pad); }
.case-row { border: var(--hairline); border-radius: var(--radius-xl); overflow: hidden; background: #fff; }
.case-row__visual, .case-row--reverse .case-row__visual { border-left: 0; border-right: 0; border-top: 0; }
.process-steps { gap: var(--card-gap); padding-inline: var(--cell-pad); }
.process-step, .process-step:last-child { border: 0; background: var(--color-surface); border-radius: var(--radius-lg); }
.faq-layout > .section-head { border-right: 0; }
.logo-row.platforms-row, .platforms-label { border-top: 0; }
.so-flow { border-top: 0; border-radius: var(--radius-lg); }

/* Kuvitukset ja kuvakortit */
.vm-stage { border-bottom: 0; }

/* ---------- CTA-palkki pyöristettynä saarekkeena ---------- */
.cta-band { border-radius: var(--radius-xl); margin: 0 var(--cell-pad) var(--section-y); overflow: hidden; }

/* ---------- Pehmeä paneeli (vaihtelevia osioita varten) ---------- */
.section--soft { background: var(--color-surface); border-radius: var(--radius-xl); margin-inline: calc(var(--cell-pad) * .5); padding-bottom: calc(var(--section-y) * .5); }

/* ================= Etusivu ================= */
.hm-hero { position: relative; isolation: isolate; text-align: center; padding: clamp(4.5rem, 3rem + 7vw, 9rem) var(--cell-pad) var(--section-y); }
.hm-hero::before { content: ""; position: absolute; z-index: -1; inset: -10% 0 auto 0; margin-inline: auto; width: min(90%, 900px); height: 90%; background: radial-gradient(closest-side, var(--color-glow), transparent 72%); pointer-events: none; }
.hm-hero h1 { font-size: var(--fs-3xl); max-width: 17ch; margin: var(--space-5) auto 0; }
.hm-hero .lead { max-width: 58ch; margin: var(--space-6) auto 0; }
.hm-hero .btn-group { justify-content: center; margin-top: var(--space-7); }
.hm-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); padding: 0; margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.hm-trust li::before { content: "✓"; color: var(--color-primary); font-weight: 700; margin-right: 8px; }

.hm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding: 0 var(--cell-pad) clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.section > .hm-head { padding-top: var(--section-y); }
#palvelut > .hm-head { padding-top: calc(var(--section-y) * .7); }
.hm-head h2 { font-size: var(--fs-2xl); margin: var(--space-3) 0 0; }
.hm-head p { color: var(--color-text-muted); margin: var(--space-3) 0 0; max-width: 56ch; }
.hm-block { padding-inline: var(--cell-pad); }
.hm-block + .hm-block { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hm-label { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-5); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.hm-label strong { color: var(--color-primary-ink); }
.hm-cards { display: grid; gap: var(--card-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .hm-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hm-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hm-cards, .hm-cards--3, .hm-cards--4 { grid-template-columns: 1fr; } }
.hm-card { position: relative; display: flex; flex-direction: column; background: #fff; border: var(--hairline); border-radius: var(--radius-xl); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.hm-card:hover { box-shadow: var(--shadow-float); transform: translateY(-3px); border-color: transparent; }
.hm-card__art { background: var(--color-surface); padding: 14px; }
.hm-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); flex: 1; }
.hm-card__body h3 { font-size: var(--fs-lg); margin: 0; }
.hm-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.hm-card__body p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.hm-card__more { margin-top: auto; padding-top: var(--space-2); font-weight: 600; font-size: var(--fs-sm); color: var(--color-primary-ink); }
.hm-card--compact .hm-card__body { padding: var(--space-5); }
.hm-card--compact h3 { font-size: var(--fs-md); }
.hm-card .badge { align-self: flex-start; }

.hm-steps { list-style: none; padding: 0 var(--cell-pad); margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); counter-reset: s; }
@media (max-width: 900px) { .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-steps { grid-template-columns: 1fr; } }
.hm-steps li { counter-increment: s; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); }
.hm-steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; margin-bottom: var(--space-4); }
.hm-steps h3 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.hm-steps .meta { font-size: var(--fs-xs); color: var(--color-primary-ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hm-steps p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--space-3) 0 0; }

.hm-arts { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); padding-inline: var(--cell-pad); }
.hm-art { position: relative; display: grid; grid-template-columns: minmax(220px, 40%) 1fr; align-items: stretch; border: var(--hairline); border-radius: var(--radius-xl); overflow: hidden; background: #fff; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.hm-art:hover { box-shadow: var(--shadow-float); transform: translateY(-3px); }
.hm-art img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1200 / 630; }
.hm-art__body { display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-7); }
.hm-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hm-art__time { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.hm-art__body h3 { font-size: var(--fs-lg); margin: var(--space-3) 0; }
.hm-art__body h3 a::after { content: ""; position: absolute; inset: 0; }
.hm-art__body p { color: var(--color-text-muted); margin: 0; font-size: var(--fs-sm); }
@media (max-width: 760px) { .hm-art { grid-template-columns: 1fr; } .hm-art__body { padding: var(--space-5); } }

/* Alustat: liukuva nauha */
.hm-marquee-wrap { padding-block: 0 calc(var(--section-y) * .7); }
.hm-marquee-head { text-align: center; margin-bottom: var(--space-6); color: var(--color-text-muted); }
.hm-marquee-head strong { color: var(--color-text); }
.hm-marquee { display: flex; overflow: hidden; gap: 12px; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex: none; }
.hm-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; background: #fff; border: var(--hairline); border-radius: var(--radius-pill); white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
.hm-mono { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--fg); font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: -.02em; }
@media (prefers-reduced-motion: no-preference) {
  .hm-marquee__track { animation: hm-scroll 45s linear infinite; }
  .hm-marquee--rev .hm-marquee__track { animation-direction: reverse; }
  .hm-marquee:hover .hm-marquee__track { animation-play-state: paused; }
}
@keyframes hm-scroll { to { transform: translateX(calc(-100% - 12px)); } }
.footer-col__title--next { margin-top: var(--space-6); }

/* Tuote- ja palveluhakemistojen ryhmät */
.hm-group-note { color: var(--color-text-muted); font-size: var(--fs-sm); margin: calc(var(--space-3) * -1) 0 var(--space-5); }