/* ============================================================================
 * Suunta.ai Landing v2 — Hero
 * ----------------------------------------------------------------------------
 * DARK anchor. Premium macOS-tyylinen browser frame oikealla, copy vasemmalla.
 *
 * Ops styleguide -periaatteet:
 *   - Yksi visuaalinen pääelementti (mock-browser) — ei aurora-orbit, ei grid
 *   - Hairline-merkki: ::before light-catcher rim browser-framessa
 *   - Yksi accent: emerald — tagissa, browserin AI-tip-stripeissä
 *   - Type does the work: h1 500/64px @ 1280px (text-hero)
 * ============================================================================ */

.v2-hero {
  position: relative;
  overflow: hidden;
}

/* Hyvin pehmeä emerald-glow alaoikealla — yksi accent-detail joka
   antaa syvyyttä ilman aurora-cliché:tä. V2.4 polish: lisätään hiljainen
   hengittävä animaatio (8s, opacity 0.10–0.16) — sub-conscious "living"
   tunne ilman dramatic motion. */
.v2-hero__glow {
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.13), transparent 65%);
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
  /* Aiempi 8s scale(1.06) + opacity-pulse poistettu — 520×520px
     emerald-glow pulsoi taustalla ja loi "sivu pomppii ja välähtelee"
     -tunteen vaikka käyttäjä ei koskenut näyttöön/hiireen. Static
     glow on premium minimalismin mukainen. */
}

.v2-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* min-width: 0 estää grid-itemejä paisumasta sisällön takia (esim. shadow,
   border, overflow). Ilman tätä browser-frame voi venyttää koko gridiä. */
.v2-hero__inner > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .v2-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.v2-hero__copy {
  max-width: 640px;
}

/* ════════════════════════════════════════════════════════════════════════
 * V4: Hero text reveal sequence
 * Premium typografia-momentti: brand-mark → h1 line 1 → h1 accent line 2 →
 * lead → CTA → microtrust pillit (yksi kerrallaan). Yhteensä ~1.4s rauhallinen
 * reveal jossa silmä lepää jokaisessa elementissä.
 * ════════════════════════════════════════════════════════════════════════ */

/* Brand-mark — Suunta.ai logo eyebrow-paikalla */
.v2-hero__brand-mark {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-6);
  opacity: 0;
  transform: translateY(8px);
  animation: v2HeroFadeIn 600ms var(--ease-out-soft) 100ms forwards;
}

.v2-hero__brand-mark svg {
  height: 22px;
  width: auto;
  display: block;
}

/* Hero h1 split reveal — line 1 (white) ja line 2 (emerald accent) erikseen */
.v2-hero__copy .text-hero {
  opacity: 0;
  transform: translateY(12px);
  animation: v2HeroFadeIn 700ms var(--ease-out-soft) 220ms forwards;
}

.v2-hero__copy .text-hero .text-accent {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: v2HeroFadeIn 700ms var(--ease-out-soft) 470ms forwards;
}

/* Lead */
.v2-hero__copy .lead {
  opacity: 0;
  transform: translateY(8px);
  animation: v2HeroFadeIn 600ms var(--ease-out-soft) 620ms forwards;
}

/* CTA group */
.v2-hero__copy .v2-hero__cta {
  opacity: 0;
  transform: translateY(8px);
  animation: v2HeroFadeIn 600ms var(--ease-out-soft) 780ms forwards;
}

/* Microtrust ul */
.v2-hero__copy .v2-hero__microtrust {
  opacity: 0;
  animation: v2HeroFadeIn 400ms var(--ease-out-soft) 940ms forwards;
}

/* Microtrust pillit yksi kerrallaan, 80ms stagger */
.v2-hero__microtrust li {
  opacity: 0;
  transform: translateY(4px);
  animation: v2HeroFadeIn 380ms var(--ease-out-soft) forwards;
}
.v2-hero__microtrust li:nth-child(1) { animation-delay: 1000ms; }
.v2-hero__microtrust li:nth-child(2) { animation-delay: 1080ms; }
.v2-hero__microtrust li:nth-child(3) { animation-delay: 1160ms; }
.v2-hero__microtrust li:nth-child(4) { animation-delay: 1240ms; }

@keyframes v2HeroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero__brand-mark,
  .v2-hero__copy .text-hero,
  .v2-hero__copy .text-hero .text-accent,
  .v2-hero__copy .lead,
  .v2-hero__copy .v2-hero__cta,
  .v2-hero__copy .v2-hero__microtrust,
  .v2-hero__microtrust li {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.v2-hero__copy .lead {
  margin-top: var(--space-6);
  max-width: 540px;
}

.v2-hero__cta {
  margin-top: var(--space-8);
}

/* Microtrust — pienet uppercase-checkmarkit, emerald-dot prefix */
.v2-hero__microtrust {
  list-style: none;
  margin-top: var(--space-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.v2-hero__microtrust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* V8.2: Emerald-dot prefix POISTETTU. Items erottuvat pelkän gap:in ja
   tracking:n avulla — Linear / Vercel / Notion -tyyli, puhtaampi minimalism.
   Säilytetään selector + display: none jotta vanha CSS-cascade ei vahingoita
   layoutia (CSS-grid gap hoitaa erottelun). */
.v2-hero__microtrust li::before {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * V8: Centered hero with rotating-word headline
 *
 * Korvaa V7 brand graphic -elementin. Hero on nyt yksisarakkeinen,
 * keskitetty layout jossa H1 on ehdoton pääsetti — Linear/Notion/Stripe
 * -tyylinen "rotating word" -kuvio jossa otsikon viimeinen sana vaihtuu
 * crossfade+slide-up -animaatiolla:
 *
 *   "Strategy that lives in [daily work / every standup /
 *                            each decision / your roadmap]."
 *
 * Tekninen ratkaisu — stabiili leveys (no layout shift):
 *   .v2-hero__rotator        = display: inline-grid
 *   .v2-hero__rotator-word   = grid-area: 1/1 (kaikki samalla solulla)
 *   .is-active               = opacity 1 + translateY 0
 *
 * Inline-grid asettaa wrapper-leveydeksi widest sanan; muut sanat
 * stack:taan päälle samaan soluun. Wrapper integroituu otsikkoon
 * inline-elementtinä, ei riko baseline-flowiä.
 *
 * Modifierit:
 *   .v2-hero--centered, .v2-hero__inner--centered, .v2-hero__copy--centered
 * Yliajavat olemassa olevan 2-col grid -layoutin yksisarakkeiseksi +
 * keskittävät kaikki sisäelementit (brand-mark, lead, CTA, microtrust).
 * ════════════════════════════════════════════════════════════════════════ */

/* Subtle dot-grid background — "viimeinen silaus", ei keskiössä.
 *
 * 28px raster radial-gradient generoi 1px valkoiset dotit erittäin matalalla
 * alphalla (0.06). Pattern fade:taan keskeltä radial-mask:lla jotta otsikko-
 * alue pysyy puhtaana ja pattern näkyy vain reunoilla — "ambient texture"
 * joka antaa syvyyttä ilman että vetää katsetta sisältöstä.
 *
 * Layered emerald glow:in (alaoikealla) kanssa: pattern reunoissa + glow
 * alanurkassa → kaksi kerrosta hillittyä ambianssia.
 *
 * pointer-events: none (decorative), z-index 0 (sisällön alla).
 */
.v2-hero--centered::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.11) 1.2px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  background-position: 0 0;
  /* Radial mask: keskelle transparent (pattern piilossa), reunoille
     mustaan (pattern näkyy). Pienempi ellipse 50%×42% jotta pattern
     näkyy reilummin sivuilla + ylä/alaosassa, ei pelkkä kapea kaista.
     Pehmeä siirtymä 15→78% jotta reuna sulautuu pehmeästi. */
  -webkit-mask-image: radial-gradient(
    ellipse 52% 44% at center,
    transparent 0%,
    transparent 15%,
    black 78%
  );
  mask-image: radial-gradient(
    ellipse 52% 44% at center,
    transparent 0%,
    transparent 15%,
    black 78%
  );
  pointer-events: none;
  z-index: 0;
}

.v2-hero--centered .v2-hero__inner--centered {
  display: block;
  text-align: center;
}

@media (min-width: 1024px) {
  .v2-hero--centered .v2-hero__inner--centered {
    display: block;
    grid-template-columns: none;
  }
}

.v2-hero__copy--centered {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.v2-hero__copy--centered .v2-hero__brand-mark {
  justify-content: center;
}

.v2-hero__copy--centered .lead {
  margin-inline: auto;
  max-width: 620px;
}

/* CTA-rivi keskitettyssä herossa — väljempi gap, enemmän breathing-tilaa
   ennen rivin alkua jotta otsikko + lead pääsevät hengittämään ennen
   action-pyyntöä. */
.v2-hero__copy--centered .v2-hero__cta {
  justify-content: center;
  margin-top: var(--space-6);
  gap: var(--space-4);
}

/* Microtrust keskitettyssä herossa — hillitympi, tiukempi visuaalinen
   suhde CTA-rivin alla (ei "erillistä" lohkoa vaan "footer" CTA:lle).
   Pienempi font + tighter tracking + kapeampi dot + himmeämpi glow. */
.v2-hero__copy--centered .v2-hero__microtrust {
  justify-content: center;
  margin-top: var(--space-6);
  gap: var(--space-3) var(--space-8);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.48);
}

/* Centered-microtrust ei käytä emerald-dot prefixiä (poistettu base-rule:ssa).
   Tämä rule jäi placeholderiksi jos tulevaisuudessa tarvitaan eri tyyli. */
.v2-hero__copy--centered .v2-hero__microtrust li::before {
  display: none;
}

/* Lead — keskitetyssä herossa enemmän breathing-tilaa otsikolta */
.v2-hero__copy--centered .lead {
  margin-top: var(--space-10);
}

/* Hero pääsetti — calibrated display-typografia.
   Pienennetty edellisestä (88→72px) jotta säilyttää voiman ilman että
   dominoi koko viewportia raskaasti. clamp portaaton skaalaus.
   Tracking -0.035em pitää isot kirjaimet optisesti tiiviinä. */
.v2-hero__headline {
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

@media (min-width: 1024px) {
  .v2-hero__headline {
    font-size: clamp(48px, 5.4vw, 72px);
  }
}

/* Brand-mark eyebrow poistettu V8.1:ssä — header näyttää brandin jo
   yläpalkissa, joten hero-eyebrow oli redundantti. Margin-top:in
   tilalle hieman padding-top sectionin sisällä jotta otsikko ei tule
   liian lähelle headerin alle. */
.v2-hero__copy--centered .v2-hero__headline {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════════
 * Block-hero (Landing Builder -alisivut) — enemmän pystytilaa ja ilmaa.
 *
 * Markkinointi (Lisa) 2026-06-12: "alisivujen heroon ilmaa tai samankaltainen
 * asettelu kuin references-sivulla". Etusivun centered-hero jakaa tilan
 * appmock-peekin kanssa; alisivun Hero-blockissa peekiä EI ole, joten sama
 * tiukka rytmi tuntui ahtaalta ja sisältö kasaantui yläkolmannekseen.
 *
 * Korjaus: block-hero saa kevyen min-heightin + pystykeskityksen (sisältö
 * lepää keskellä, references-tyylinen rauhallisuus) + reilumman ala-padding:n.
 * Vain .v2-hero--block (Hero.astro) → ei kosketa etusivun heroa.
 * ════════════════════════════════════════════════════════════════════════ */
.v2-hero--block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(440px, 62vh, 640px);
}

main > section.v2-hero--block.anchor:first-child {
  padding-bottom: var(--section-y-desktop);
}

/* Vähän enemmän hengitystä otsikon ympärille block-herossa kuin etusivun
   tiukassa rytmissä: eyebrow→otsikko ja CTA→microtrust saavat lisätilaa. */
.v2-hero--block .v2-hero__copy--centered .eyebrow {
  margin-bottom: var(--space-5);
}
.v2-hero--block .v2-hero__copy--centered .v2-hero__cta {
  margin-top: var(--space-8);
}

/* ─── Rotating word ───────────────────────────────────────────────── *
 * Block-level rotator on own line (= ei inline-flow -bugia jossa sana
 * jäisi edellisen rivin loppuun joillain leveyksillä). Korkeus locked
 * 1.1em jotta layout EI shift:tää koskaan + ei wrappauksia jos sana on
 * pidempi kuin viewport (white-space:nowrap takaa).
 *
 * 3-tila rolling animation (Linear / Cron / Framer -tyyli):
 *   default       → translateY( 0.6em) + scale 0.95 + blur 8px + opacity 0
 *                     (uusi sana tulee ALHAALTA)
 *   .is-active    → translateY(0)      + scale 1    + blur 0   + opacity 1
 *                     (näkyvä sana)
 *   .is-leaving   → translateY(-0.6em) + scale 0.95 + blur 8px + opacity 0
 *                     (vanha sana liukuu YLÖS, ulospäin)
 *
 * Opacity + blur: cubic-bezier(0.4, 0, 0.2, 1) — Material out, calm
 * Transform: cubic-bezier(0.34, 1.56, 0.64, 1) — spring overshoot
 *   antaa pieni "settle"-tunne (Linear-tyyli)
 * Duration 540ms — tarpeeksi pitkä että vaikutus näkyy, tarpeeksi lyhyt
 *   että silmä ei uuvu 2.8s sykliin.
 */
.v2-hero__rotator {
  display: block;
  position: relative;
  width: 100%;
  height: 1.06em;
  text-align: center;
  /* Pieni glow takana — antaa "spotlight"-tunteen aktiiviselle sanalle */
  isolation: isolate;
}

.v2-hero__rotator-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-400);
  opacity: 0;
  transform: translateY(0.6em) scale(0.95);
  filter: blur(8px);
  transition:
    opacity 540ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 480ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  white-space: nowrap;
  will-change: opacity, transform, filter;
}

.v2-hero__rotator-word.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.v2-hero__rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.6em) scale(0.95);
  filter: blur(8px);
}

/* Mobile: pienennä translateY + blur jotta efekti pysyy elegantti */
@media (max-width: 640px) {
  .v2-hero__rotator-word {
    transform: translateY(0.45em) scale(0.96);
    filter: blur(6px);
  }
  .v2-hero__rotator-word.is-leaving {
    transform: translateY(-0.45em) scale(0.96);
    filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero__rotator-word {
    transition: none;
    filter: none;
    transform: none;
  }
  .v2-hero__rotator-word:not(.is-active) {
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * V9: Hero product peek — Linear-tyylinen kurkistus alhaalta
 *
 * Copy-lohkon alla kurkistaa yksi .v2-appmock mock-ikkuna (CSS alempana)
 * heron alareunasta. Ikkunan yläosa näkyy terävänä, alaosa häviää
 * bottom-fade-maskilla tummaan taustaan → "peek" joka antaa konkreettisen
 * vilauksen tuotteesta ennen scrollia, dominoimatta.
 *
 *   - margin-top space-16: otsikko + lead + CTA hengittävät ensin
 *   - padding inline/top: tilaa ikkunan side/top-varjoille (ettei overflow
 *     leikkaa niitä kovaksi reunaksi)
 *   - max-height + overflow hidden: crop ettei section kasva liikaa
 *   - mask linear-gradient: alaosa fade → tumma reuna sulautuu taustaan
 *   - reveal: nousee + fade microtrustin jälkeen (1100ms, sama sekvenssi)
 *   - pointer-events none: dekoratiivinen, ei interaktiivinen
 * ════════════════════════════════════════════════════════════════════════ */
.v2-hero__peek {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: var(--space-4) 0 0;
  padding: 24px 0 0;
  max-height: 600px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  opacity: 0;
  transform: translateY(28px);
  animation: v2HeroRise 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.86s both;
}

.v2-hero__peek .v2-appmock {
  max-width: 100%;
}

/* Nosta hero-copy ylemmäs jotta product-mock kurkistaa jo ensimmäisessä
   näkymässä (Linear-tyyli). Override first-child anchor top/bottom-padding
   — oletus on calc(72px + 192px) = 264px joka työnsi mockin fold:n alle.
   margin-top (transparent-header overlap) jätetään koskematta. */
@media (min-width: 768px) {
  main > section.v2-hero--left.anchor:first-child {
    padding-top: calc(72px + var(--space-48) - 40px);
    padding-bottom: var(--space-16);
  }
}

@media (max-width: 767px) {
  .v2-hero__peek {
    margin-top: var(--space-10);
    padding: 16px 0 0;
    max-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero__peek {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * V10: App mock — peilaa Suunta-konsolin OIKEAA dark-mode UI:ta
 *
 * Referenssi: console/now dark mode. Ei selainchromea (kuten oikea sovellus),
 * vaan leveä nimellinen sidebar (brand + org-switcher + labeled nav) + typo-
 * grafiavetoinen content (iso light-painoinen numero, hairline-dividerit, ei
 * laatikoita). Emerald vain merkityksessä: aktiivinen nav, STRATEGY-eyebrow,
 * barit, org-tile. Korvasi aiemman .v2-browser-mockin (legacy-CSS poistettu).
 *
 * Mock-spesifit tummat pinnat hardcodattu (eivät kuulu design-tokeneihin) —
 * tekstit/dividerit rgba(255,255,255,a), aksentit var(--emerald-*).
 * ════════════════════════════════════════════════════════════════════════ */
.v2-appmock {
  position: relative;
  display: grid;
  grid-template-columns: 248px 1fr;
  background: #0d1420;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  min-height: 600px;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 12px 24px -10px rgba(0, 0, 0, 0.45);
}

/* Light catcher rim */
.v2-appmock::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent);
  pointer-events: none;
  z-index: 3;
}

/* ─── Sidebar ─── */
.v2-appmock__sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-4);
  background: rgba(255, 255, 255, 0.015);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-appmock__brand {
  display: flex;
  align-items: center;
  padding: 2px var(--space-2) var(--space-3);
}

/* Org-switcher — minimalistinen (ei laatikkoa), kuten oikeassa sovelluksessa:
   pelkkä tile + teksti + caret, vasen-tasattu, ei vie huomiota. */
.v2-appmock__org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  border-radius: 8px;
}
.v2-appmock__org-tile {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-400);
  border-radius: 7px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.v2-appmock__org-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.v2-appmock__org-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
}
.v2-appmock__org-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__org-caret {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.v2-appmock__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-appmock__nav--util {
  margin-top: var(--space-5);
}
.v2-appmock__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.6);
}
.v2-appmock__nav-item i {
  width: 16px;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
/* Aktiivinen nav-item = neutraali tumma elevaatio + valkoinen teksti/ikoni
   (kuten oikean sovelluksen sidebar-rail). Emerald vain brändimerkissä +
   org-tilessä, ei aktiivisessa navissa. */
.v2-appmock__nav-item.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
}
.v2-appmock__nav-item.is-active i {
  color: rgba(255, 255, 255, 0.92);
}
.v2-appmock__nav-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: var(--space-2) var(--space-3);
}
.v2-appmock__kbd {
  margin-left: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ─── Main ─── */
.v2-appmock__main {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.v2-appmock__title {
  font-size: 32px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
}
.v2-appmock__subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ─── Strategy-näkymä (hero-mock) ─────────────────────────────────────
   Reference: oikean Suunta-sovelluksen /strategy-sivu. Tab-rivi, core-
   strategy-kortti + 4 kompassimittaria, insight-note, 2×2 strategia-
   aluekortit. Kaikki rgba-valkoiset + emerald-aksentit (sama kieli kuin
   muu appmock). Sisältö fiktiivinen (Acme Ltd). */

/* Tab-rivi — hairline-underline, eka aktiivinen */
.v2-appmock__tabs {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.v2-appmock__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.v2-appmock__tab i {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
.v2-appmock__tab.is-active {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.v2-appmock__tab.is-active i {
  color: rgba(255, 255, 255, 0.7);
}

/* Core-strategy-kortti */
.v2-appmock__card {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.v2-appmock__card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.v2-appmock__card-eyebrow i {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__card-title {
  margin: 0;
  font-size: 23px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.95);
}
.v2-appmock__card-quote {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* Kompassi — 4 mittaria, label / value / hairline-bar */
.v2-appmock__compass-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__compass-label i {
  font-size: 10px;
  color: var(--emerald-400);
}
.v2-appmock__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.v2-appmock__metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-appmock__metric-label {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__metric-value {
  font-size: 22px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
}
.v2-appmock__metric-unit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}
.v2-appmock__metric-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}
.v2-appmock__metric-fill {
  display: block;
  height: 100%;
  background: var(--emerald-500);
  border-radius: 2px;
}
.v2-appmock__card-meta {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

/* Insight-note (emerald kompassi-ikoni + bold lead) */
.v2-appmock__note {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.v2-appmock__note i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
  color: var(--emerald-400);
}
.v2-appmock__note strong {
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.85);
}

/* Strategia-alueet */
.v2-appmock__section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__section-label i {
  font-size: 10px;
}
.v2-appmock__section-title {
  margin: var(--space-1) 0 0;
  font-size: 19px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.v2-appmock__areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.v2-appmock__area {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.v2-appmock__area-title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.v2-appmock__area-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.v2-appmock__area-metric {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.v2-appmock__area-metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.v2-appmock__area-metric-label--muted {
  color: rgba(255, 255, 255, 0.35);
}
.v2-appmock__area-metric-value {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-appmock__area-metric-value--muted {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}
.v2-appmock__area-trend {
  margin-left: 4px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--emerald-400);
}
.v2-appmock__area-meta {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.38);
  font-variant-numeric: tabular-nums;
}

/* Mobile: piilota sidebar, näytä pelkkä content-paneeli */
@media (max-width: 767px) {
  .v2-appmock {
    grid-template-columns: 1fr;
    min-height: 380px;
  }
  .v2-appmock__sidebar {
    display: none;
  }
  .v2-appmock__main {
    padding: var(--space-5) var(--space-5);
  }
  .v2-appmock__title {
    font-size: 26px;
  }
  .v2-appmock__tabs {
    gap: var(--space-4);
    overflow-x: hidden;
  }
  .v2-appmock__metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .v2-appmock__areas {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * V11: Etusivun hero — VASEN-TASAUS (Linear-tyyli)
 *
 * Additiivinen --left-modifier joka yliajaa VAIN --centered-variantin
 * tasaukset (text-align, margin, justify, max-width). Layout (block-flow,
 * dot-grid ::before) peritään --centered:ltä. Hero-block (CMS Pages,
 * Hero.astro) käyttää edelleen pelkkää --centered → pysyy keskitettynä.
 * Kahden luokan selektori (0,2,0) voittaa --centered-säännöt (0,1,0).
 * ════════════════════════════════════════════════════════════════════════ */
.v2-hero__inner--centered.v2-hero__inner--left {
  text-align: left;
}
.v2-hero__copy--centered.v2-hero__copy--left {
  max-width: 1040px;
  margin-inline: 0;
  text-align: left;
}
/* Lead omassa luettavassa mitassaan (ei venytetä koko 1040:een). */
.v2-hero__copy--centered.v2-hero__copy--left .lead {
  margin-inline: 0;
  max-width: 820px;
}
.v2-hero__copy--centered.v2-hero__copy--left .v2-hero__cta {
  justify-content: flex-start;
}
/* Rotating word vasemmalle (vain etusivu — Hero-block säilyy keskitettynä) */
.v2-hero__copy--left .v2-hero__rotator {
  text-align: left;
}
.v2-hero__copy--left .v2-hero__rotator-word {
  justify-content: flex-start;
}

/* ════════════════════════════════════════════════════════════════════════
 * V10: Stat-otsikon lähdemerkintä — pieni, hillitty rivi H1:n alla.
 * Konkreettinen luku + nimetty lähde = uskottavuus + GEO-citation-trigger
 * (anti-AI-slop). Vasen-tasattu (perii copy--left).
 * ════════════════════════════════════════════════════════════════════════ */
.v2-hero__source {
  margin-top: var(--space-4);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════
 * V11: Stat-hero — INLINE sentence-otsikko (numero samalla rivillä lauseen
 * kanssa, emerald-väri korostaa). Uniform-koko kaikille A/B/C-varianteille
 * → siisti, premium, tasapainoinen, ja helppo vaihtaa client-JS:llä.
 * ════════════════════════════════════════════════════════════════════════ */
.v2-hero__headline--stat {
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.96);
  text-wrap: balance;
}
/* Otsikon rivinvaihto: desktopilla pakotettu katkaisu siistille 2-riville
   kaikissa varianteissa (A/B/C). Mobiilissa piilotetaan → luonnollinen
   rivitys (lyhyt rivi ei katkea oudosti kapealla näytöllä). */
@media (max-width: 767px) {
  .v2-hero__headline--stat .v2-hero__brk {
    display: none;
  }
}
/* Emerald-aksentti: A:n numero (.stat-num) sekä B/C:n korostussana (.accent) */
.v2-hero__stat-num,
.v2-hero__accent {
  color: var(--emerald-400);
}
/* Numerot inline-block + tabular + varattu 2ch → count-up ei aiheuta reflow:ta */
.v2-hero__stat-digits {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
/* "%" hieman pienempi kuin numerot — premium-typografiadetalji. */
.v2-hero__stat-pct {
  font-size: 0.72em;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════════════
 * V11: Hero entrance choreography — siisti, nopea, premium-eased reveal.
 * Otsikko (h1) nousee yhtenä, sitten lähde, lead ja CTA porrastetusti
 * expo-eased (cubic-bezier(0.16,1,0.3,1)). Variantti a:n numero saa lisäksi
 * count-up:n (JS). prefers-reduced-motion: kaikki heti näkyvissä (no-preference
 * -media + olemassa oleva reduce-block hoitavat).
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes v2HeroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pehmeä "soft focus-in" tekstielementeille: blur + nousu + fade.
   Sisältö tarkentuu lempeästi näkyviin (Linear/Framer-tyylinen premium-reveal). */
@keyframes v2HeroRiseSoft {
  from { opacity: 0; transform: translateY(22px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Aurora-sytytys (motion-opas §2): kertaluontoinen opacity-fade latautuessa —
   "sivu herää" -hetki, taustan valo nousee päälle. VAIN opacity (ei scale/
   translate) → ei toista aiemmin poistettua 8s-pulssin "pomppua"; arrival →
   settle-and-hold = still surface. Reduced-motion: koska sääntö on alla olevan
   no-preference-kääreen sisällä, glow ei koskaan käy opacity:0:ssa → staattinen. */
@keyframes v2HeroGlowIgnite {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Aurora syttyy ensin (taustan "valo päälle"), sitten teksti nousee. */
  .v2-hero__glow {
    opacity: 0;
    animation: v2HeroGlowIgnite 900ms var(--ease-out-soft) forwards;
  }

  .v2-hero__copy .v2-hero__headline--stat,
  .v2-hero__copy--left .v2-hero__source,
  .v2-hero__copy--left .lead,
  .v2-hero__copy--left .v2-hero__cta {
    opacity: 0;
    animation: v2HeroRiseSoft 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .v2-hero__copy .v2-hero__headline--stat { animation-delay: 0.06s; }
  .v2-hero__copy--left .v2-hero__source   { animation-delay: 0.30s; }
  .v2-hero__copy--left .lead              { animation-delay: 0.48s; }
  .v2-hero__copy--left .v2-hero__cta      { animation-delay: 0.66s; }
}