/* ============================================================================
 * Suunta.ai Landing v2 — Final CTA  (V2 — premium minimalist rebuild)
 * ----------------------------------------------------------------------------
 * DARK anchor. "Book-end" hero:lle: ensimmäinen iso rotating-word headline +
 * viimeinen lopullinen "deserves to be seen" -kutsu. Mirrored aesthetic
 * (sama centered typography, sama dot-grid bg, sama emerald glow).
 *
 * Rakenne:
 *   1. Subtle dot-grid pattern bg (sama kuin hero/footer — visual continuity)
 *   2. Off-center emerald radial glow (anchor-merkki)
 *   3. Social-proof eyebrow (emerald-dot + "TRUSTED BY 600+ NORDIC TEAMS")
 *   4. H2 display ("Your strategy deserves [to be seen.]" accent-split)
 *   5. Lead (1 lause)
 *   6. 2-CTA pair: primary + ghost ("Start free trial" + "Talk to us")
 *   7. Microtrust middle-dot separated (typografinen, ei symbol-noise)
 *
 * Ops styleguide:
 *   - Centered typography + max-width container-narrow
 *   - Yksi accent (emerald) — headline ".text-accent" + primary CTA
 *   - Hairline-rim premium-merkki (jos halutaan, mutta section ei tarvitse
 *     border:a — taustapatterni hoitaa visual interest:n)
 * ============================================================================ */

/* V6 polish: vähemmän tyhjää section:n ympärillä + enemmän
 * hengitystä elementtien välillä. Käyttäjäpalaute: aiempi V5 oli
 * liian "tiivis" — eyebrow → headline → lead → CTA tuntui
 * pakkautuneelta. Now: kompaktimpi section padding (64px),
 * runsaampi vertical rhythm sisällön välissä. */
.v2-final-cta {
  position: relative;
  overflow: hidden;
}

/* Section.anchor antaa 192px molempiin suuntiin. Kevennetään ALAosaa, koska
   footer seuraa heti perässä → vältetään 192+192 = 384px tuplatyhjä
   CTA-sisällön ja footerin "Still thinking?"-bannerin välissä.
   Spesifisyys .anchor.v2-final-cta (0,2,0) voittaa section.anchor (0,1,1). */
.anchor.v2-final-cta {
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .anchor.v2-final-cta {
    padding-bottom: var(--space-20);
  }
}

/* Soft emerald radial glow alaoikealla — sama anchor-merkki kuin hero */
.v2-final-cta__glow {
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 560px;
  height: 560px;
  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 (sama korjaus kuin
     hero-glow:lle) — 560×560px emerald-glow pulsoi taustalla ja loi
     "sivu pomppii ja välähtelee" -tunteen. Static glow on premium
     minimalismin mukainen. */
}

/* Dot-grid pattern reunoilla — sama "viimeinen silaus" -estetiikka kuin
   hero/footer. Mask fade keskeltä jotta otsikko-alue pysyy puhtaana. */
.v2-final-cta::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;
  -webkit-mask-image: radial-gradient(
    ellipse 52% 50% at center,
    transparent 0%,
    transparent 15%,
    black 80%
  );
  mask-image: radial-gradient(
    ellipse 52% 50% at center,
    transparent 0%,
    transparent 15%,
    black 80%
  );
  pointer-events: none;
  z-index: 0;
}

/* Container pysyy päällä */
.v2-final-cta > .container {
  position: relative;
  z-index: 1;
}

.v2-final-cta__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* ─── Social-proof eyebrow ────────────────────────────────────────── *
 * Yksi clean eyebrow joka yhdistää social proof:n + lopullisen
 * "ready to start" -momentin. Pelkkä uppercase-tracking, EI pill-frame:a
 * eikä emerald-dot:tia (poistettu 2026-05-22 — turhaa noisea).
 */
.v2-final-cta__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  /* V6 polish: eyebrow → headline tarvitsee enemmän tilaa
     ("breath space" ennen iso typografista momenttia) */
  margin: 0 0 var(--space-8);
}

/* ─── Headline — iso display, accent-split ─────────────────────────── *
 * clamp matchaa hero-headline:n. "to be seen." emerald via .text-accent.
 */
.v2-final-cta__headline {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.98);
  margin: 0;
}

@media (min-width: 1024px) {
  .v2-final-cta__headline {
    font-size: clamp(40px, 4.4vw, 56px);
  }
}

.v2-final-cta__headline .text-accent {
  color: var(--emerald-400);
  display: inline-block;
}

/* ─── Lead ────────────────────────────────────────────────────────── */
.v2-final-cta__lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.005em;
  /* V6 polish: headline → lead vähemmän pakkautuneeksi */
  margin: var(--space-8) auto 0;
  max-width: 520px;
}

/* ─── CTA pair ────────────────────────────────────────────────────── */
.v2-final-cta__buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  /* V6 polish: lead → CTA pair tarvitsee tilan jotta CTA on
     visuaalisesti selvä lopullinen kutsu */
  margin-top: var(--space-10);
}

@media (max-width: 480px) {
  .v2-final-cta__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .v2-final-cta__buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Microtrust — middle-dot separator ───────────────────────────── *
 * Single P with inline spans + · separator-spans. Typografinen,
 * EI bullet-symbol-noise. Mobile wrap natural.
 */
.v2-final-cta__microtrust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px var(--space-3);
  max-width: 600px;
  margin: var(--space-6) auto 0;
  padding: 0;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.v2-final-cta__microtrust-sep {
  color: rgba(255, 255, 255, 0.20);
  font-weight: 400;
}

/* ============================================================================
 * v2-final-cta--brand — ETUSIVUN final CTA + merkki-figuuri (2026-06-04)
 * ----------------------------------------------------------------------------
 * Vain etusivulla (modifier). merkki-figuuri (Suunta-brändimerkki 3D) kruunaa
 * lopullisen kutsun. DARK-väriratkaisu:
 *   - sf-pinnat baked-dark → hienovarainen 3D-muoto tummaa taustaa vasten
 *   - currentColor (emerald-400) ajaa REUNAVIIVAT → emerald-wireframe-merkki
 *   - drop-shadow emerald-glow → merkki "hehkuu" brändihetkenä
 * Pidättyväisyys: emerald varattu brändimerkille (osion ainoa aksentti, headline
 * .text-accent + primary CTA mukaan lukien — kaikki samaa brändisignaalia).
 * ========================================================================== */
.v2-final-cta--brand .v2-final-cta__mark {
  margin: 0 auto var(--space-8);
  max-width: clamp(220px, 38vw, 340px);
  color: var(--emerald-400);
  filter: drop-shadow(0 6px 28px rgba(16, 185, 129, 0.20));
}

@media (max-width: 640px) {
  .v2-final-cta--brand .v2-final-cta__mark {
    max-width: 220px;
    margin-bottom: var(--space-6);
  }
}

/* ─── Mobile tarkennukset ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .v2-final-cta__eyebrow {
    font-size: 10px;
  }
  .v2-final-cta__lead {
    margin-top: var(--space-6);
  }
  .v2-final-cta__buttons {
    margin-top: var(--space-8);
  }
  .v2-final-cta__microtrust {
    margin-top: var(--space-6);
    font-size: 10px;
  }
}