/* ─────────────────────────────────────────────
   Stobi landing — design inspired by thebrightapp.xyz
   Brand purple: #8A5BFF
   ───────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple: #8A5BFF;
  --purple-dark: #5E35B1;
  --purple-2: #B388FF;
  --purple-light: #EDE5FF;
  --lavender: #C4B5FD;
  --pink: #FFB6D9;
  --mint: #BEECC4;
  --bg: #F5F2FA;
  --surface: #FFFFFF;
  --surface-2: #F2F0EC;
  --text: #1A1A2E;
  --text-2: #6B6880;
  --border: #E4E2EE;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  /* Site-wide continuous gradient: purple top → white middle → purple bottom */
  background: linear-gradient(180deg,
    #E0DEFD 0%,
    #EFEAFC 7%,
    #F7F4FD 12%,
    #F5F2FA 18%,
    #F5F2FA 78%,
    #F0EBFC 88%,
    #C9B6FF 95%,
    #C4B5FD 100%
  );
  background-attachment: scroll;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt-and-braces against decorative absolutes (hero accent stones,
     value chips, etc.) that occasionally peek past the viewport on
     narrow phones and would otherwise trigger horizontal scroll. */
  overflow-x: hidden;
}

.container {
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Language switcher in nav-right — minimalist two-letter toggle. */
.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.0);
  padding: 0;
}
.lang-opt {
  background: transparent;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
  color: #9A96B0;                 /* muted by default */
  font: inherit;
  letter-spacing: inherit;
  transition: color 0.2s ease-out;
}
.lang-opt:hover { color: #121515; }
.lang-opt.is-active { color: #121515; font-weight: 600; }
.lang-sep { color: rgba(0,0,0,0.2); }

/* ─── Nav — bright-style с pill-контейнером в центре ─── */
nav {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 100;
  padding-top: 20px;
  transition: padding 0.35s cubic-bezier(.22,1,.36,1);
}
/* On scroll the pill gets a frosted-glass halo + soft shadow. Triggered
   by the same body.nav-cta-visible class JS already toggles. */
body.nav-cta-visible nav {
  padding-top: 12px;
}
body.nav-cta-visible .nav-pill {
  box-shadow:
    0 10px 36px rgba(18, 21, 21, 0.08),
    0 2px 6px rgba(18, 21, 21, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.9);
}
/* Hover underline — soft 2px sliding from left. Bright uses same pattern. */
.nav-pill a:not(.nav-pill-cta):not(.nav-cta-scroll) {
  position: relative;
}
.nav-pill a:not(.nav-pill-cta):not(.nav-cta-scroll)::after {
  content: '';
  position: absolute;
  left: 15.56px;
  right: 15.56px;
  bottom: 6px;
  height: 2px;
  background: #8A5BFF;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.nav-pill a:not(.nav-pill-cta):not(.nav-cta-scroll):hover::after {
  transform: scaleX(1);
}
nav .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: 118px;
  height: auto;
  max-height: 46px;
}
.brand-stone {
  width: 32px;
  height: 28px;
  border-radius: 45% 55% 50% 50% / 60% 55% 45% 40%;
  background: linear-gradient(135deg, var(--lavender), var(--purple-2));
  transform: rotate(-8deg);
  position: relative;
}
.brand-stone::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: -8px 0 0 var(--text);
}
/* Bright-style pill nav — exact specs from Figma (2:630) */
.nav-pill {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 7.78px 11.67px;
  border-radius: 35.56px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  justify-self: center;
  /* Smooth width transition so when the Download button appears, the
     pill widens gradually and the whole container re-centres the pill
     as a consequence (the left+right 1fr cells shrink in lockstep). */
  transition: padding 0.5s cubic-bezier(.22,1,.36,1);
}
.nav-pill a {
  color: #121515;
  text-decoration: none;
  font-size: 15.6px;
  font-weight: 400;
  line-height: 15.56px;
  padding: 11.67px 15.56px;
  border-radius: 1920px;
  transition: background 0.15s;
  white-space: nowrap;
}
.nav-pill a:hover {
  background: rgba(0, 0, 0, 0.04);
}
.nav-pill a.nav-pill-cta {
  background: #121515;
  color: #fff;
  padding: 12.67px 16.56px;
  font-weight: 500;
  margin-left: 4px;
}
.nav-pill a.nav-pill-cta:hover {
  background: #2a2f2f;
}
.nav-right {
  justify-self: end;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 14px rgba(138, 91, 255, 0.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(138, 91, 255, 0.35);
}
.btn-dark {
  background: var(--text);
  color: #fff;
}
.btn-light {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}
/* Bright hero Download — apple-icon pill */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #121515;
  color: #fff;
  padding: 15.5px 31.1px;
  border-radius: 62.22px;
  font-size: 17.5px;
  font-weight: 510;
  letter-spacing: -0.175px;
  line-height: 26.25px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn-hero svg { width: 19.4px; height: 19.4px; }
.store-brand-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  background: transparent;
  box-shadow: none;
}
.store-brand-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.store-brand-icon-apple {
  color: #fff;
}
.store-brand-icon-google svg {
  filter: drop-shadow(0 2px 3px rgba(94, 53, 177, 0.16));
}
.btn-hero-outline {
  background: #fff;
  color: #121515;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.btn-hero-outline:hover {
  background: #F5F2FA;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Hero — 3-column like bright ─── */
.hero {
  margin-top: -80px;
  padding: 140px 0 100px;
  background: transparent;
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 600px;
}
.hero-left {
  max-width: 560px;
}
.hero h1 {
  /* Match the Finnish clamp across both languages so EN and FI render
     at the same size (user's preference). */
  font-size: clamp(42px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #121515;
  margin-bottom: 24px;
}
.hero h1 .accent {
  color: var(--purple);
}
.hero p.lead {
  font-size: 17.8px;
  line-height: 25.6px;
  color: #121515;
  margin-bottom: 36px;
  max-width: 447px;
}
.hero p.lead b { font-weight: 510; }
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta {
  margin-top: 28px;
  color: var(--text-2);
  font-size: 13px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-2);
}

.hero-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.phone-mockup {
  width: 340px;
  height: 693px;
  aspect-ratio: 923 / 1882;
  background: url('assets/phone-mockup.png') no-repeat center / contain;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  filter: drop-shadow(0 30px 60px rgba(12, 14, 20, 0.18));
}
.phone-mockup::before,
.phone-mockup::after { display: none !important; }
.phone-notch { display: none !important; }
.phone-screen {
  position: absolute;
  top: 1.85%;
  left: 4.5%;
  right: 4.5%;
  bottom: 1.85%;
  width: auto;
  height: auto;
  background: linear-gradient(180deg, var(--purple-dark) 0%, var(--purple) 100%);
  /* Elliptical radius = круглые углы в любом масштабе телефона */
  border-radius: 14% / 6.8%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.phone-blank {
  background: linear-gradient(180deg, #F5F2FA 0%, #EDE5FF 100%);
  padding: 0;
}

/* ─── Realistic phone screen mimicking Stobi profile ─── */
.phone-screen-app {
  background: var(--bg);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.phone-screen-shots {
  padding: 0;
  background: #C9B6FF;
  display: block;
}

.phone-screen-shot {
  padding: 0;
  background: #F5F2FA;
  display: block;
}

.hero-app-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-screen-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-app-shot-splash {
  opacity: 1;
  animation: heroSplashFade 4.8s ease forwards;
}

.hero-app-shot-map {
  opacity: 0;
  transform: scale(1.015);
  animation: heroMapReveal 4.8s ease forwards;
}

@keyframes heroSplashFade {
  0%, 42% {
    opacity: 1;
    transform: scale(1);
  }
  58%, 100% {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes heroMapReveal {
  0%, 42% {
    opacity: 0;
    transform: scale(1.015);
  }
  58%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
.app-hero-bg {
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-2) 100%);
  padding: 44px 16px 24px;
  border-radius: 0 0 28px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-topbar {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-balance {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.app-gear {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.app-bubble {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 14px;
  max-width: 180px;
  margin: 30px auto 10px;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.app-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.7);
}
.app-mascot-big {
  width: 90px;
  height: 76px;
  background: var(--lavender);
  border-radius: 50% 55% 55% 50% / 60% 55% 50% 45%;
  transform: rotate(-5deg);
  position: relative;
  margin: 0 0 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.app-mascot-big::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 30%;
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 18px 0 0 var(--text);
}
.app-mascot-big::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  border-bottom: 2.5px solid var(--text);
  border-radius: 50%;
}
.app-name {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.app-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  margin-top: 2px;
}
.app-tabs {
  padding: 16px;
}
.app-stats-row {
  display: flex;
  gap: 8px;
}
.app-stat {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.app-stat-num {
  font-size: 18px;
  font-weight: 800;
}
.app-stat-label {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 2px;
  font-weight: 600;
}
.app-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 16px 24px;
  background: #fff;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.app-tab {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 16px;
  border-radius: 10px;
}
.app-tab-active {
  color: var(--purple);
  background: var(--purple-light);
  font-weight: 800;
}
.app-tab-center {
  background: var(--purple);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 300;
  box-shadow: 0 4px 12px rgba(138, 91, 255, 0.3);
}
.phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
.phone-notch::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1a3a5c 0%, #050b14 70%);
  box-shadow: inset 0 0 0 1px rgba(120, 160, 200, 0.15);
}
.phone-mascot {
  width: 140px;
  height: 120px;
  background: var(--lavender);
  border-radius: 50% 55% 55% 50% / 60% 55% 50% 45%;
  transform: rotate(-5deg);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
}
.phone-mascot::before {
  content: '';
  position: absolute;
  top: 38%;
  left: 32%;
  width: 10px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 24px 0 0 var(--text);
}
.phone-mascot::after {
  content: '';
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 10px;
  border-bottom: 3px solid var(--text);
  border-radius: 50%;
}
.phone-greeting {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-top: 32px;
  letter-spacing: -0.01em;
}
.phone-sub {
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
}
.phone-pills {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.phone-pill {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.hero-accent {
  width: 240px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 25% 20%, rgba(240, 171, 252, 0.4), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(138, 91, 255, 0.5), transparent 65%),
    linear-gradient(135deg, #2D1B69, #121515);
  border-radius: 22px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 20px 40px rgba(45, 27, 105, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-stone-slideshow {
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.42);
}
.hero-stone-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.72s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.hero-stone-slide:first-child {
  transform: translateX(0);
}
.hero-stone-slideshow.is-ready .hero-stone-slide {
  transform: translateX(100%);
}
.hero-stone-slide.is-active,
.hero-stone-slideshow.is-ready .hero-stone-slide.is-active {
  transform: translateX(0);
}
.hero-stone-slide.is-exiting,
.hero-stone-slideshow.is-ready .hero-stone-slide.is-exiting {
  transform: translateX(-100%);
}
.hero-stone-slide.is-resetting {
  transition: none;
}
.hero-stone-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.hero-stone-caption span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245, 242, 250, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(94, 53, 177, 0.16);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
}
@media (prefers-reduced-motion: reduce) {
  .hero-stone-slide {
    transition: none;
    transform: translateX(100%);
  }
  .hero-stone-slide:first-child {
    transform: translateX(0);
  }
}
.hero-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16.77px;
}
.hero-accent-title {
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(135deg, #fff, #FFB6D9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  align-self: flex-start;
  margin-top: auto;
}

/* ─── Value-prop section — Fizens "About" spec (node 7:1063) ─── */
.value-prop {
  position: relative;
  padding: 200px 32px;
  overflow: visible;
}
.value-prop .container {
  position: relative;
  max-width: 1840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* Dotted/+ grid patches on both sides (Fizens floats 401×393 each) */
.value-grid-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -68px;
  height: 393px;
  pointer-events: none;
  z-index: 0;
}
.value-grid-bg::before,
.value-grid-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 401px;
  height: 393px;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(138,91,255,0.18)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>");
  background-size: 52px 52px;
}
.value-grid-bg::before { left: 0; }
.value-grid-bg::after { right: 0; }

.value-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.value-title {
  max-width: 700px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 64px;
  /* All other headings on the site are 400, but at the light purple
     #8A5BFF colour, 400 reads visually lighter than dark headings.
     Bumped to 600 so this title carries the same visual weight as
     the dark headline-split / hero H1. */
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -1.92px;
  color: #8A5BFF;
  text-align: center;
  margin: 0;
}

.value-divider {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}
.vd-line {
  flex-shrink: 0;
  width: 60px;
  height: 2px;
  background: #8A5BFF;
  margin: 25px 16px 0;
}
.value-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #171717;
  max-width: 460px;
  text-align: center;
  margin: 0;
}

/* CTA — Fizens pill with right-side icon-circle */
.value-cta {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: rgba(245, 242, 250, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 1000px;
  padding: 12px 68px 12px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 18px 46px rgba(94, 53, 177, 0.12);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.value-cta:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(179, 136, 255, 0.52);
  box-shadow: 0 22px 54px rgba(94, 53, 177, 0.18);
  transform: translateY(-1px);
}
.value-cta-arrow {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 14px 28px rgba(94, 53, 177, 0.20);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.value-cta:hover .value-cta-arrow {
  transform: translate(3px, -3px);
  box-shadow: 0 18px 34px rgba(94, 53, 177, 0.26);
}
.value-cta-arrow i { font-size: 20px; line-height: 1; }
.value-cta-arrow svg { width: 20px; height: 20px; }

/* Floating pill images (4, each 195×100, rounded 1000px) */
.value-chip {
  position: absolute;
  width: 195px;
  height: 100px;
  border-radius: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  box-shadow:
    0 16px 40px rgba(94, 53, 177, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 1;
  overflow: hidden;
}
.value-chip span {
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
/* Positions per Figma: 1 top-left (-100px), 2 top-right (0), 3 bottom-left+108, 4 bottom-right+110 (-200) */
.vp-chip-1 { top: -50px;  left: 0;       background: linear-gradient(135deg, #EDE8FF, #C9B6FF); }
.vp-chip-2 { top: 50px;    right: 0;      background: linear-gradient(135deg, #EDE5FF, #C9B6FF); }
.vp-chip-3 { bottom: -50px;  left: 108px; background: linear-gradient(135deg, #EDE7FC, #CFC0F7); }
.vp-chip-4 { bottom: -120px; right: 110px; background: linear-gradient(135deg, #FBE4E8, #F5CDD4); }

/* Chips stay hidden until the text inside .value-content has revealed,
   then fade+scale in staggered (text first → chips after, Fizens-style).
   JS adds .chips-in to .value-prop ~700ms after content becomes visible. */
.value-prop .value-chip {
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1),
              transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.value-prop.chips-in .vp-chip-1 {
  animation: chipFloat 7s ease-in-out infinite 0.8s;
  opacity: 1; transform: none;
  transition-delay: 0ms;
}
.value-prop.chips-in .vp-chip-2 {
  animation: chipFloat 8s ease-in-out infinite 1.6s;
  opacity: 1; transform: none;
  transition-delay: 150ms;
}
.value-prop.chips-in .vp-chip-3 {
  animation: chipFloat 9s ease-in-out infinite 2.3s;
  opacity: 1; transform: none;
  transition-delay: 300ms;
}
.value-prop.chips-in .vp-chip-4 {
  animation: chipFloat 7.5s ease-in-out infinite 3s;
  opacity: 1; transform: none;
  transition-delay: 450ms;
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-10px) rotate(1.5deg); }
}

@media (max-width: 900px) {
  .value-prop { padding: 140px 20px; }
  .value-title { font-size: 44px; line-height: 52px; letter-spacing: -1.2px; }
  .value-chip { width: 130px; height: 70px; font-size: 38px; }
  .vp-chip-1 { top: -20px; left: 0; }
  .vp-chip-2 { top: 20px; right: 0; }
  .vp-chip-3 { bottom: -20px; left: 40px; }
  .vp-chip-4 { bottom: -60px; right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .value-chip { animation: none !important; }
}

/* ─── Section "full picture" ─── */
.section {
  padding: 100px 0;
}
.section-label {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #121515;
  background: rgba(18, 21, 21, 0.06);
  border: 1px solid rgba(18, 21, 21, 0.08);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.section h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 48px;
  max-width: 700px;
}

/* Scroll-reveal: fade + rise */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

/* Card hover lift */
.feature-card,
.super-app-phone-card,
.super-app-features-card,
.social-cell,
.feat-pill {
  transition:
    transform 0.35s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.7,.2,1),
    background 0.2s;
}
.feature-card:hover,
.social-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(18, 21, 21, 0.08);
}
.btn-hero, .nav-pill a.nav-pill-cta {
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-hero:active, .nav-pill a.nav-pill-cta:active { transform: translateY(1px) scale(0.98); }

/* Phone float/tilt is now driven by scroll + mousemove in index.html's
   JS (applyTransform) — CSS keyframes would fight the JS transform. */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-center .phone-mockup { animation: none; }
  .word-reveal span { opacity: 1; transform: none; animation: none; }
}

/* Download CTA in nav — two-stage animation to feel truly smooth:
   Stage 1 (0.0-0.6s): container max-width 0 → 220px, padding 0 → final.
     Background also starts transparent → dark so it doesn't pop.
   Stage 2 (0.3-0.7s): text color + opacity fade in once the slot is
     wide enough for the word "Download" to exist without being clipped.
   This avoids the "hard pop" look where the button letters appeared
   mid-expansion. */
/* Minimal, butter-smooth reveal: button is fully styled from the start
   (black bg, white text, full padding, final font size). It just starts
   with 0 width and 0 horizontal padding. As width/padding grow, the
   parent's overflow:hidden naturally reveals the button from left to
   right — no color/clip-path state changes, no fade stages, no pops.
   Single easing curve (easeOutQuint) applied to both, one duration. */
/* The pill itself is a fixed-width frame with overflow:hidden. The
   Download button is always inside at full size — it just sits beyond
   the pill's right edge until the pill widens to reveal it. Only the
   pill's width animates, not the button. Exactly thebrightapp.xyz. */
.nav-pill {
  overflow: hidden;
  width: var(--pill-width-compact, auto);
  transition: width 0.35s cubic-bezier(.165,.84,.44,1);
}
body.nav-cta-visible .nav-pill {
  width: var(--pill-width-full, auto);
}
/* Button sits at end of flex row but is translated 100% rightward in
   the compact state — so it physically lives outside the pill's box,
   past its right edge. Pill's symmetric padding stays clean (no sliver
   of black button peeking out). When nav-cta-visible, translateX(0)
   brings the button back inside, in sync with the pill's width growth. */
.nav-pill .nav-cta-scroll {
  background: #121515 !important;
  color: #fff !important;
  padding: 12.67px 16.56px !important;
  white-space: nowrap;
  flex-shrink: 0;
  transform: translateX(calc(100% + 11.67px));
  transition: transform 0.35s cubic-bezier(.165,.84,.44,1);
  pointer-events: auto;
  will-change: transform;
}
body.nav-cta-visible .nav-pill .nav-cta-scroll {
  transform: translateX(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .nav-pill { transition: none; }
  .nav-pill .nav-cta-scroll { transform: none; transition: none; }
}

/* ─── How-section phone fly-in from below ─── */
.how-phone-fly {
  opacity: 0;
  transform: translateY(120px) scale(0.94);
  transition:
    opacity 0.9s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.how-phone-fly.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .how-phone-fly { opacity: 1; transform: none; transition: none; }
}

/* ─── Fizens-style word-by-word hero title reveal ─── */
.word-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: wordRise 0.9s cubic-bezier(.2,.7,.2,1) forwards;
  will-change: opacity, transform;
}
@keyframes wordRise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Fizens-style text-reveal (word-by-word unblur + rise) ───
   Used on .value-title and .value-sub. Each <span class="wr">
   starts blurred + raised + invisible, then animates into place
   with a stagger set by JS via --wr-delay. */
.text-reveal .wr {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1) var(--wr-delay, 0ms),
    filter 0.7s cubic-bezier(.2,.7,.2,1) var(--wr-delay, 0ms),
    transform 0.7s cubic-bezier(.2,.7,.2,1) var(--wr-delay, 0ms);
  will-change: opacity, filter, transform;
}
.text-reveal.wr-in .wr {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .text-reveal .wr { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ─── Stagger-reveal: each direct child animates into view sequentially
   when the container enters the viewport. Fizens "…and more additional
   features" pattern. ─── */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms),
    transform 0.7s cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms),
    filter 0.7s cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms);
  will-change: opacity, transform, filter;
}
.stagger-reveal.is-visible > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .stagger-reveal > * { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Magnetic buttons + phone tilt need smooth transition back to rest */
.btn-hero, .value-cta, .feat-cta-btn, .nav-pill-cta,
.hero-center .phone-mockup {
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.hero-center .phone-mockup {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Hero accent shape — subtle blob motion behind phone */
.hero-accent {
  transition: transform 0.4s ease-out;
}

.feature-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── Fizens-style Standout Features (spec 7:1182) ─── */
.section-head-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tight gap WITHIN the header — pill / headline / subtitle sit
     close together as one visual block. The gap-below to the
     section content stays at its original 64px so cards / phone
     mockups don't crowd the heading. */
  gap: 12px;
  margin: 0 auto 64px;
}
.key-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid #EDE5FF;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #8A5BFF;
}
.key-feat-pill svg { width: 16px; height: 16px; }
.key-feat-pill i { font-size: 16px; line-height: 1; color: #8A5BFF; }
.mini-feat-icon i { font-size: 24px; line-height: 1; }
.icon-blue i { color: #8A5BFF; }
.icon-cyan i { color: #8A5BFF; }
.icon-pink i { color: #FFB6D9; }
.icon-green i { color: #5E35B1; }
.icon-yellow i { color: #5E35B1; }
.icon-orange i { color: #5E35B1; }
.faq-chev { font-size: 20px; line-height: 1; color: #171717; }
.faq-item[open] .faq-chev { color: #8A5BFF; }
.headline-split {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 64px;
  font-weight: 600;
  /* line-height matches font-size — no extra line-box padding above
     or below the text. Without this trim the subtitle visually
     sits ~10px lower than the parent flex gap suggests. */
  line-height: 1.05;
  letter-spacing: -1.92px;
  text-align: center;
  margin: 0;
  max-width: none;
}
.headline-split .hs-line1,
.headline-split .hs-line2 {
  display: block;
}
.headline-split .hs-line1 { color: #171717; }
.headline-split .hs-line2 { color: #8A5BFF; }
.headline-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #6B7280;
  text-align: center;
  max-width: 600px;
  /* No top margin — parent .section-head-center already provides
     gap: 12px. Previously this had margin: 16px auto 0 which stacked
     on top of the parent gap (12 + 16 = 28px), making the subtitle
     sit visibly far from the headline. */
  margin: 0 auto;
}
@media (max-width: 900px) {
  .headline-split { font-size: 40px; line-height: 48px; letter-spacing: -1.2px; }
}
.feat-grid-22 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 636px 424px;
  grid-template-areas:
    "one one one one one one two two two two two two"
    "three three three three three three three four four four four four";
  gap: 24px;
  max-width: 1840px;
  margin: 0 auto;
}
.feat-grid-22 > .feat-card:nth-child(1) { grid-area: one; }
.feat-grid-22 > .feat-card:nth-child(2) { grid-area: two; }
.feat-grid-22 > .feat-card:nth-child(3) { grid-area: three; }
.feat-grid-22 > .feat-card:nth-child(4) { grid-area: four; }
.feat-grid-22 > .feat-card { min-height: 0; }
.feat-card {
  position: relative;
  background: linear-gradient(135deg, #F0EDFC 0%, #C9B6FF 100%);
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s cubic-bezier(.2,.7,.2,1);
}
.feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(138,91,255,0.22)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>");
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}
.feat-card > * { position: relative; z-index: 1; }
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(94, 53, 177, 0.1);
}
.feat-card h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.01em;
  margin: 0;
  color: #171717;
}
.feat-card p {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color: #6B7280;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 400px;
  margin: 6px 0 0;
}
.feat-visual {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#features .feat-visual {
  overflow: visible;
}

/* Card 1 — content at BOTTOM (Card 1 = map/discover) */
.feat-grid-22 > .feat-card:nth-child(1) {
  padding: 140px 64px 64px;
}
.feat-grid-22 > .feat-card:nth-child(1) .feat-visual {
  margin: -80px 0 40px;
}

/* Card 2 — content at TOP (Card 2 = paint list) */
.feat-grid-22 > .feat-card:nth-child(2) {
  padding: 64px 64px 0;
}
.feat-grid-22 > .feat-card:nth-child(2) > h3,
.feat-grid-22 > .feat-card:nth-child(2) > p { order: -1; }
.feat-grid-22 > .feat-card:nth-child(2) .feat-visual {
  margin-top: 40px;
}

/* Card 3 — content TOP-LEFT (phone on right) */
.feat-grid-22 > .feat-card:nth-child(3) {
  padding: 64px 0 0 64px;
  position: relative;
}
.feat-grid-22 > .feat-card:nth-child(3) h3,
.feat-grid-22 > .feat-card:nth-child(3) p {
  max-width: 260px;
}
.feat-grid-22 > .feat-card:nth-child(3) .feat-visual {
  position: absolute;
  right: -80px;
  top: -20px;
  width: 420px;
  height: 100%;
}

/* Card 4 — dark blue CTA */
.feat-card-cta {
  background: linear-gradient(135deg, #5E35B1 0%, #8A5BFF 100%) !important;
  padding: 48px !important;
  justify-content: flex-end !important;
}
.feat-card-cta::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(255,255,255,0.15)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>") !important;
}
.feat-card-cta h3 {
  color: #fff !important;
  font-size: 36px !important;
  line-height: 48px !important;
  letter-spacing: -0.72px !important;
  margin: 0 0 24px !important;
}
.feat-cta-shapes {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 168px;
  height: 168px;
  pointer-events: none;
}
.shape-s1, .shape-s2 {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}
.shape-s1 {
  width: 72px;
  height: 72px;
  top: 0;
  right: 0;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  animation: blobMorph 12s ease-in-out infinite;
}
.shape-s2 {
  width: 72px;
  height: 72px;
  bottom: 0;
  left: 0;
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  background: rgba(255, 255, 255, 0.9);
  animation: blobMorph 14s ease-in-out infinite reverse;
}
.feat-cta-content {
  position: relative;
  z-index: 1;
}
.feat-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #8A5BFF;
  padding: 12px 24px;
  border-radius: 1000px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feat-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }

/* Visual 1: map pins */
.map-card {
  position: relative;
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(138, 91, 255, 0.25);
  overflow: hidden;
}
.map-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: rotate(-45deg);
  top: 30%;
  left: 25%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.map-pin::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #8A5BFF;
}
.map-pin.pin-2 { top: 55%; left: 65%; background: #FFE58A; }
.map-pin.pin-2::after { background: #121515; }
.map-pin.pin-3 { top: 20%; left: 72%; background: #FFB6D9; }
.map-pin.pin-3::after { background: #fff; }
.map-chip {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1E2FA0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Visual 2: paint action list */
.paint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paint-list li {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #121515;
  box-shadow: 0 2px 6px rgba(94,53,177,0.06);
}
.pl-ico { font-size: 18px; }
.pl-val {
  margin-left: auto;
  color: #8A5BFF;
  font-weight: 600;
  font-size: 13px;
}

/* Visual 3: mascot row */
.feat-v-mascots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  min-height: 170px;
}
/* Mascot showcase — single centered hero mascot + customization badges.
   No auto-rotation; this is a calm focal point in the feature grid. */
.mascot-showcase {
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
/* Hero mascot — identical to grid m-1 (pebble, lavender, happy with
   sparkles). No size/shape overrides — just uses .m-1 class. Kept
   alone centered as the focal point. */

/* Badges row — what you can change about your mascot */
.mascot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(138, 91, 255, 0.08);
  color: #8A5BFF;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.2s ease-out, transform 0.2s ease-out;
}
.m-badge:hover {
  background: rgba(138, 91, 255, 0.14);
  transform: translateY(-1px);
}
/* ─── Stone Mascot — faithful port of app/components/StoneMascot.tsx ───
   Values taken from SHAPES config in the component (size=100, scale s=0.555).
   Body / radii / positions are the same percentages the app uses. */
.mascot {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.feat-v-mascots:hover .m-1 { transform: translateY(-6px); }
.feat-v-mascots:hover .m-2 { transform: translateY(-8px); transition-delay: 0.06s; }
.feat-v-mascots:hover .m-3 { transform: translateY(-6px); transition-delay: 0.12s; }
.feat-v-mascots:hover .m-4 { transform: translateY(-8px); transition-delay: 0.18s; }

.mascot-body {
  position: relative;
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.22);
}
.mascot-body::before {
  /* Highlight blob — 0.2×0.08 of size, rotated -12deg, top-left area */
  content: '';
  position: absolute;
  top: 7%;
  left: 13%;
  width: 20%;
  height: 8%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(-12deg);
}

/* Pebble shape (m-1): body 0.86×0.64, radii 32/40/22/18, rotate -2° */
.m-1 .mascot-body {
  width: 86px; height: 64px;
  background: #C4B5FD;
  border-radius: 32px 40px 18px 22px;
  transform: rotate(-2deg);
}
/* Round shape (m-2): 0.78×0.72, radii 42/36/34/40, rotate -3° — pink */
.m-2 .mascot-body {
  width: 78px; height: 72px;
  background: #FFB6D9;
  border-radius: 42px 36px 40px 34px;
  transform: rotate(-3deg);
}
/* Bumpy shape (m-3): 0.82×0.70, radii 42/22/16/40, rotate 6° — mint */
.m-3 .mascot-body {
  width: 82px; height: 70px;
  background: #BEECC4;
  border-radius: 42px 22px 40px 16px;
  transform: rotate(6deg);
}
/* Egg shape (m-4): 0.64×0.86, radii 36/34/28/30, rotate 4° — peach */
.m-4 .mascot-body {
  width: 64px; height: 86px;
  background: #FDBA74;
  border-radius: 36px 34px 30px 28px;
  transform: rotate(4deg);
}

/* Face wrap — counter-rotated to stay upright */
.mascot-face {
  position: absolute;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  z-index: 2;
}
.m-1 .mascot-face { transform: translateX(-50%) rotate(2deg); }
.m-2 .mascot-face { transform: translateX(-50%) rotate(3deg); }
.m-3 .mascot-face { transform: translateX(-50%) rotate(-6deg); }
.m-4 .mascot-face { transform: translateX(-50%) rotate(-4deg); }

/* Eyes row — gap 13% of size = 13px */
.mascot-eyes-row {
  display: flex;
  gap: 13px;
  align-items: center;
}
/* Default round eyes: 6.5×8.5 black ovals */
.eye {
  width: 6.5px; height: 8.5px;
  background: #1A1A2E;
  border-radius: 4px;
}
/* Wink: one eye becomes a line */
.eye--wink {
  width: 7px; height: 1.8px;
  background: #1A1A2E;
  border-radius: 2px;
  margin-top: 4px;
}
/* Sleeping arc eyes */
.eye--closed {
  width: 7px; height: 1.8px;
  background: #1A1A2E;
  border-radius: 2px;
  margin-top: 4px;
}
/* Heart eyes — SVG for clean pixel shape */
.eye--heart {
  width: 11px; height: 11px;
  background: transparent;
  position: relative;
}
.eye--heart::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 35%, #EF4444 30%, transparent 31%),
    radial-gradient(circle at 70% 35%, #EF4444 30%, transparent 31%);
  clip-path: polygon(50% 100%, 5% 45%, 5% 25%, 25% 5%, 50% 25%, 75% 5%, 95% 25%, 95% 45%);
  background: #EF4444;
  clip-path: path('M 5.5 3 C 3 3 1.5 5 1.5 7 C 1.5 10 5.5 11 5.5 11 C 5.5 11 9.5 10 9.5 7 C 9.5 5 8 3 5.5 3 Z');
}

/* Smile — bordered U, 13×7 */
.mouth {
  margin-top: 3px;
  width: 13px; height: 7px;
  border-bottom: 1.8px solid #1A1A2E;
  border-left: 1.8px solid transparent;
  border-right: 1.8px solid transparent;
  border-radius: 0 0 7px 7px;
}

/* Blush cheeks — 7.5×4.5 pink, positioned bottom 20% of body height */
.blush {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.blush::before, .blush::after {
  content: '';
  width: 7.5px; height: 4.5px;
  background: #FFB6D9;
  border-radius: 6px;
  opacity: 0.7;
}

/* Decor overlays — positioned OUTSIDE the body, in the outer wrapper */
.decor {
  position: absolute;
  font-size: 22px;
  line-height: 1;
  z-index: 3;
}
.decor--crown { top: -2px; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.decor--flower { top: 2px; right: 8px; transform: rotate(15deg); }
.decor--bow { top: -4px; left: 50%; transform: translateX(-50%); }

/* Sparkles — appear around mascot, faded */
.sparkle {
  position: absolute;
  color: #FACC15;
  font-size: 14px;
  z-index: 3;
  line-height: 1;
}
.sparkle--1 { top: 4px; left: 10px; font-size: 16px; }
.sparkle--2 { top: 14px; right: 6px; font-size: 11px; }
.sparkle--3 { bottom: 14px; left: 2px; font-size: 9px; color: #fff; }

/* CTA card — solid blue */
.feat-card-cta {
  background: linear-gradient(135deg, #5E35B1 0%, #8A5BFF 100%);
  border: none;
  color: #fff;
  padding: 32px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.feat-card-cta h3 { color: #fff; font-size: 26px; margin: 0 0 16px; }
.feat-cta-shapes {
  position: relative;
  flex: 1;
  min-height: 180px;
}
.shape-s1, .shape-s2 {
  position: absolute;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.shape-s1 {
  width: 120px;
  height: 120px;
  top: 0;
  right: -20px;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  animation: blobMorph 12s ease-in-out infinite;
}
.shape-s2 {
  width: 80px;
  height: 80px;
  bottom: 10px;
  left: 30%;
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  background: rgba(255, 255, 255, 0.12);
  animation: blobMorph 14s ease-in-out infinite reverse;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; transform: translateY(0) rotate(0deg); }
  50% { border-radius: 60% 40% 45% 55% / 40% 60% 45% 55%; transform: translateY(-8px) rotate(12deg); }
}
.feat-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1E2FA0;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  align-self: flex-start;
}
.feat-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

@media (max-width: 960px) {
  .feat-grid-22 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "one   two"
      "three three"
      "four  four";
  }
  .feat-grid-22 > .feat-card { min-height: 380px; }
}
@media (max-width: 600px) {
  .feat-grid-22 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four";
  }
  .feat-grid-22 > .feat-card { min-height: 380px; padding: 48px 32px !important; }
  .feat-grid-22 > .feat-card:nth-child(3) .feat-visual {
    position: static !important;
    width: auto !important;
  }
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  min-height: 380px;
}
.feature-card .badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.feature-card h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.feature-card p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 400px;
}
.feature-card .visual {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blob-stones {
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, var(--mint), var(--lavender));
  border-radius: 52% 48% 55% 45% / 60% 55% 45% 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  transform: rotate(-8deg);
}
.blob-pink {
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, #FFB6D9, var(--pink));
  border-radius: 48% 52% 50% 50% / 55% 60% 40% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  transform: rotate(8deg);
}

/* ─── Features list section ─── */
.features-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.features-phone {
  display: flex;
  justify-content: center;
}
.features-phone .phone-mockup {
  width: 260px;
  height: auto;
}
.features-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row .icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.feature-row h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.feature-row p {
  color: var(--text-2);
  font-size: 14px;
}

/* ─── How It Works (spec 7:1682) ─── */
.how-section { padding: 100px 0; }
.how-section .container { padding-left: 56px; padding-right: 56px; }
.how-card {
  width: 100%;
  max-width: 1488px;
  margin: 0 auto;
  background: #F5F2FA;
  border-radius: 40px;
  padding: 100px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.how-layout {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1216px;
}
.how-phone {
  flex-shrink: 0;
}

/* Mobile-only pagination dots — hidden on desktop because the step
   list itself is the pagination. */
.how-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.how-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(94, 53, 177, 0.22);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, width 0.25s;
}
.how-dot.is-active {
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  width: 24px;
  border-radius: 999px;
}
.how-phone .phone-mockup {
  width: 341px;
  height: auto;
  animation: phoneFloat 6s ease-in-out infinite;
}
.how-screen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding: 0 !important;
}
.how-screen.is-active { opacity: 1; pointer-events: auto; }
.how-step { cursor: pointer; }

.how-screen-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}
.screen-paint {
  background: linear-gradient(180deg, #F5F2FA 0%, #EDE5FF 60%, #C9B6FF 100%);
}
.screen-map {
  background: linear-gradient(180deg, #B388FF 0%, #8A5BFF 100%);
}
.screen-celebrate {
  background: linear-gradient(180deg, #FFE58A 0%, #FFB6D9 50%, #EDE5FF 100%);
}
.sp-emoji { font-size: 72px; }
.sp-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #171717;
}
.screen-map .sp-title, .screen-celebrate .sp-title { color: #171717; }
.sp-bar {
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: #8A5BFF;
  margin-top: 6px;
}
.sp-chip {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5E35B1;
  box-shadow: 0 4px 10px rgba(94, 53, 177, 0.12);
}
.sp-chip-bottom { position: absolute; bottom: 24px; }
.sp-chip-2 { background: #8A5BFF; color: #fff; text-align: center; line-height: 1.35; }
.sp-pin {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: rotate(-45deg);
  position: absolute;
  top: 30%;
  left: 28%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.sp-pin::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #8A5BFF;
}
.sp-pin.pin-alt {
  top: 50%; left: 60%;
  background: #FFE58A;
}
.sp-pin.pin-alt::after { background: #121515; }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 580px;
  width: 535px;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* The vertical line threading through all step numbers */
.how-steps::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #EDE5FF;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.how-step {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 48px 0;
}
.how-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: #FAFAFA;
  color: #D1D5DB;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.3s, color 0.3s;
}
.how-step-active .how-step-num {
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  color: #fff;
  box-shadow: 0 4px 12px rgba(94, 53, 177, 0.22);
}
.how-step-text { flex: 1; min-width: 0; padding-top: 2px; }
.how-step-text h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: #6B7280;
  margin: 0 0 8px;
  transition: color 0.3s;
}
.how-step-active .how-step-text h3 { color: #171717; }
.how-step-text p {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #6B7280;
  margin: 0;
  transition: color 0.3s;
}
.how-step-active .how-step-text p { color: #171717; }

@media (max-width: 960px) {
  .how-layout { flex-direction: column; }
  .how-steps { width: 100%; max-width: 100%; }
}
@media (max-width: 700px) {
  .how-card { padding: 60px 20px; }
  .how-phone .phone-mockup { width: 260px; }
}

/* ─── FAQ Section (spec 7:2506) ─── */
.faq-section { padding: 100px 32px; }
.faq-container {
  max-width: 1036px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  border-radius: 18px;
  border: 1px solid #EDE5FF;
  background: #fff;
  overflow: hidden;
  transition:
    background 0.3s cubic-bezier(.2,.7,.2,1),
    border-color 0.3s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.3s cubic-bezier(.2,.7,.2,1);
}
.faq-item:hover {
  border-color: #CEC4F9;
  box-shadow: 0 4px 18px rgba(138,91,255,0.06);
}

/* Smooth expand — replaces native details jump.
   .faq-body wraps the divider + answer; we animate its max-height
   from 0 to a generous ceiling (800px) alongside opacity. */
.faq-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(.2,.7,.2,1),
    opacity 0.35s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] .faq-body {
  max-height: 600px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .faq-body { transition: none; }
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #171717;
  flex: 1;
  transition: color 0.2s;
}
.faq-chev {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: #171717;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), color 0.2s;
  display: inline-block;
}
.faq-item[open] .faq-chev { transform: rotate(180deg); color: #8A5BFF; }
.faq-item[open] {
  background: #F5F2FA;
  border-color: transparent;
}
.faq-item[open] .faq-q { color: #8A5BFF; }
.faq-item[open] .faq-chev { color: #8A5BFF; }

.faq-divider {
  height: 1px;
  background: #EDE5FF;
  margin: 0 40px;
}
.faq-a {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4B5563;
  padding: 20px 84px 32px 40px;
  margin: 0;
}

@media (max-width: 700px) {
  .faq-item summary { padding: 18px 24px; }
  .faq-q { font-size: 16px; line-height: 24px; }
  .faq-a { padding: 16px 48px 24px 24px; font-size: 15px; }
  .faq-divider { margin: 0 24px; }
}

/* ─── Addition Section — Fizens "and more features" (spec 7:1373) ─── */
.addition-section { padding: 100px 32px; }
.addition-container {
  max-width: 1840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.addition-heading {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: -0.8px;
  color: #171717;
  text-align: center;
  margin: 0;
}

/* 3 mini-cards in a row — compact */
.mini-features {
  display: flex;
  justify-content: center;
  /* `align-items: stretch` makes every card in a wrapped flex row
     grow to match the tallest card in that row. Combined with the
     min-height below, ALL cards across all rows render at the same
     height regardless of body-text length. */
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1600px;
}
.mini-feat {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #FAFAFA 0%, #F9F7FF 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(138, 91, 255, 0.06);
  /* Width auto = card sizes to its own content. The container
     handles wrapping. Min/max bounds keep things sensible:
     short titles don't shrink to icon-only, long ones don't take
     the whole row. */
  flex: 0 1 auto;
  min-width: 280px;
  max-width: 460px;
  min-height: 120px;
}

.mini-feat-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #fff;
}
.mini-feat-icon svg { width: 24px; height: 24px; }
.icon-blue   { background: #EDE5FF; }
.icon-cyan   { background: #EDE5FF; }
.icon-pink   { background: rgba(255, 182, 217, 0.58); }
.icon-green  { background: rgba(190, 236, 196, 0.62); }
.icon-yellow { background: rgba(255, 229, 138, 0.70); }
.icon-orange { background: rgba(255, 229, 138, 0.58); }

.mini-feat-text { min-width: 0; }
.mini-feat-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #171717;
}
.mini-feat-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6B7280;
  margin: 0;
}

/* Phone + huge BG typography underlay */
.addition-phone-wrap {
  position: relative;
  width: 100%;
  height: 470px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Soft fade at bottom so phone dissolves into page instead of hard cut */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.bg-word {
  position: absolute;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 128px;
  font-weight: 600;
  line-height: 128px;
  color: #F5F2FA;
  letter-spacing: -2px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.bg-word-1 { top: 140px; left: 40px; }
.bg-word-2 { top: 140px; right: 160px; }

/* Words start behind the phone (pushed toward centre) and slide out to
   their real positions when the wrap enters the viewport. Creates a
   "the phone was hiding the words, now they peek out" reveal. */
.addition-phone-wrap .bg-word {
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(.2,.7,.2,1),
    opacity 0.6s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.addition-phone-wrap .bg-word-1 {
  /* Positioned at left:40px; start shifted right so it sits under phone */
  transform: translateX(260px);
}
.addition-phone-wrap .bg-word-2 {
  /* Positioned at right:160px; start shifted left so it sits under phone */
  transform: translateX(-260px);
}
.addition-phone-wrap.words-out .bg-word {
  opacity: 1;
  transform: translateX(0);
}
.addition-phone-wrap.words-out .bg-word-2 {
  transition-delay: 150ms;  /* APP peeks out just after STOBI */
}
@media (prefers-reduced-motion: reduce) {
  .addition-phone-wrap .bg-word { opacity: 1; transform: none; transition: none; }
}

.addition-phone {
  position: relative;
  z-index: 1;
  width: 420px !important;
  height: auto !important;
  margin-top: 20px;
  animation: none !important;
  filter: none !important;
}

@media (max-width: 1100px) {
  .mini-features { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; }
  .mini-feat { position: static; width: auto; }
  .mini-feat-3 { grid-column: 1 / 3; justify-self: center; width: 346px; }
}
@media (max-width: 700px) {
  .mini-features { grid-template-columns: 1fr; max-width: 380px; }
  .mini-feat-3 { grid-column: 1; width: auto; }
  .bg-word { font-size: 64px; line-height: 64px; }
  .addition-phone { width: 300px !important; height: 612px !important; }
}

/* ─── Super-app grid: phone card + features card ─── */
.super-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}
.super-app-phone-card {
  background: linear-gradient(135deg, #E9DEFC 0%, #F5EBE0 50%, #FCE1D4 100%);
  border-radius: 32px;
  padding: 56px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}
.super-app-phone-card .phone-mockup {
  width: 260px;
  height: auto;
  transform: translateY(8%);
}

.super-app-features-card {
  background: #fff;
  border-radius: 32px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.feat-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F4F2F0;
  border: none;
  border-radius: 999px;
  padding: 10px 14px 10px 10px;
  font-size: 16px;
  font-weight: 500;
  color: #121515;
  width: fit-content;
  cursor: pointer;
  transition: background 0.15s;
}
.feat-pill:hover { background: #EDE9E3; }
.feat-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ico-map { background: #BEECC4; }
.ico-diamond { background: #EDE5FF; }
.ico-paint { background: #FFB6D9; }
.ico-chat { background: #EDE5FF; }
.ico-fire { background: #FFE58A; }
.ico-lang { background: #EDE5FF; }
.ico-privacy { background: #F5F2FA; }
.ico-challenge { background: #FFE58A; }
.feat-label { flex: 1; line-height: 1.2; }
.feat-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1;
  margin-left: 6px;
}

/* ─── Social proof / community ─── */
/* ─── Trust-badges row (compact replacement for big community cards) ─── */
.trust-section { padding: 60px 32px; }
.trust-container {
  max-width: 1296px;
  margin: 0 auto;
}
.trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 40px;
  background: #fff;
  border: 1px solid #EDE5FF;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(138, 91, 255, 0.04);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.trust-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F5F2FA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-ico i { font-size: 22px; color: #8A5BFF; line-height: 1; }
.trust-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
.trust-text strong {
  font-size: 15px;
  font-weight: 500;
  color: #171717;
  line-height: 20px;
}
.trust-text span {
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  line-height: 18px;
}
.trust-sep {
  width: 1px;
  height: 40px;
  background: #EDE5FF;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .trust-row { flex-wrap: wrap; padding: 20px; }
  .trust-sep { display: none; }
  .trust-badge { flex: 1 1 calc(50% - 8px); min-width: 200px; }
}
@media (max-width: 500px) {
  .trust-badge { flex: 1 1 100%; }
}

.community-section { padding: 100px 32px; }
.community-container {
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 360px);
  gap: 24px;
  width: 100%;
}
.social-cell {
  position: relative;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: linear-gradient(135deg, #F0EDFC 0%, #C9B6FF 100%);
  border: 1px solid rgba(138, 91, 255, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
.social-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(138,91,255,0.22)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>");
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}
.social-cell > * { position: relative; z-index: 1; }
.social-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(138, 91, 255, 0.08);
}
.social-ico i {
  font-size: 24px;
  color: #8A5BFF;
  line-height: 1;
}
.social-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A5BFF;
}
.social-cell h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #171717;
  margin: 0;
}
/* Different backgrounds per cell, all in Stobi purple/pastel palette */
.sc-1 { background: linear-gradient(135deg, #EDE5FF 0%, #C9B6FF 100%); }
.sc-2 { background: linear-gradient(135deg, #FFE58A 0%, #FFB6D9 100%); }
.sc-3 { background: linear-gradient(135deg, #E0D5FC 0%, #C4B5FD 100%); grid-row: span 2; color: #fff; }
.sc-3 h3 { color: #fff; }
.sc-3 .social-label { color: #fff; opacity: 0.85; }
.sc-3 .social-ico { background: rgba(255, 255, 255, 0.25); }
.sc-3 .social-ico i { color: #fff; }
.sc-3::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(255,255,255,0.25)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>");
}
.sc-4 { background: linear-gradient(135deg, #BEECC4 0%, rgba(190, 236, 196, 0.62) 100%); }
.sc-5 { background: linear-gradient(135deg, #FFB6D9 0%, rgba(255, 182, 217, 0.62) 100%); }

/* ─── Dark final CTA ─── */
/* ─── Final CTA — Fizens spec 7:2597 ─── */
.final-cta-wrap {
  padding: 100px 0;
}
.final-cta-card {
  position: relative;
  width: 100%;
  max-width: 1488px;
  padding: 100px;
  border-radius: 40px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #B388FF 0%, #8A5BFF 50%, #5E35B1 100%);
  box-shadow: 0 40px 100px rgba(138, 91, 255, 0.25);
}
.final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.final-cta-heading {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 64px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -1.92px;
  color: #fff;
  margin: 0;
}
.final-cta-heading em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.55);
}
.final-cta-sub {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* Store-badge buttons */
.store-buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 6px 16px 6px 6px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.store-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.store-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.store-btn-icon svg { width: 20px; height: 20px; }
.store-btn-icon-dark { background: #5E35B1; }
.store-btn-icon-green { background: #8A5BFF; }
.store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color: #5E35B1;
}
.store-btn-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.store-btn-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* Decorative floating cards */
.cta-card {
  position: absolute;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
}
.cta-card-left {
  width: 320px;
  bottom: -80px;
  left: -100px;
  transform: rotate(-8deg);
}
.cta-card-right {
  width: 320px;
  bottom: -60px;
  right: -90px;
  transform: rotate(15deg);
}
.cta-card-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
}
.cta-card-label {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
}
.cta-card-label-sm { font-size: 10px; color: #6B7280; margin-top: 6px; }
.cta-card-value {
  font-size: 20px;
  font-weight: 600;
  color: #171717;
  margin-top: 2px;
}
.cta-card-value-big {
  font-size: 28px;
  font-weight: 600;
  color: #171717;
}
.cta-card-chart { width: 100%; height: 40px; }
.cta-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.cta-card-row2 { margin-bottom: 14px; }
.cta-card-bar {
  width: 100%;
  height: 6px;
  background: #F5F2FA;
  border-radius: 999px;
  overflow: hidden;
}
.cta-card-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8A5BFF, #B388FF);
  border-radius: 999px;
}
.cta-card-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #F3F4F6;
  font-size: 13px;
  color: #374151;
}
.cta-card-line:first-of-type { border-top: none; }
.cta-amt {
  font-weight: 600;
  color: #8A5BFF;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .cta-card { display: none; }
  .final-cta-card { padding: 64px 32px; }
}
@media (max-width: 700px) {
  .final-cta-heading { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .final-cta-wrap { padding: 60px 16px; }
  .final-cta-card { padding: 48px 24px; border-radius: 24px; }
}

/* Legacy final-cta (keep for other references) */
.final-cta {
  background: linear-gradient(135deg, #2D1B69 0%, #1a1a2e 100%);
  color: #fff;
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 106, 245, 0.3), transparent 60%);
  border-radius: 50%;
}
.final-cta::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(240, 171, 252, 0.2), transparent 60%);
  border-radius: 50%;
}
.final-cta h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 800px;
  margin: 0 auto 48px;
  position: relative;
}
.final-cta .phone-mockup {
  margin: 0 auto 48px;
  position: relative;
  width: 220px;
  height: auto;
}
.final-cta .btn {
  position: relative;
}

/* ─── Footer ─── */
footer {
  background: transparent;
  padding: 80px 0 40px;
  border-top: 1px solid rgba(138, 91, 255, 0.12);
}
.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.soc-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(138, 91, 255, 0.18);
  color: #5E35B1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 30px rgba(94, 53, 177, 0.10);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
  text-decoration: none;
  outline: none;
}
.soc-ico i { font-size: 22px; line-height: 1; }
.soc-ico:hover {
  background: rgba(237, 229, 255, 0.92);
  border-color: rgba(94, 53, 177, 0.28);
  color: #5E35B1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 42px rgba(94, 53, 177, 0.16);
  transform: translateY(-2px);
}
.soc-ico:focus-visible {
  border-color: rgba(138, 91, 255, 0.72);
  box-shadow:
    0 0 0 4px rgba(138, 91, 255, 0.18),
    0 18px 42px rgba(94, 53, 177, 0.16);
}
.footer-logo {
  display: block;
  width: min(420px, 72vw);
  height: auto;
  margin-bottom: 48px;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.footer-columns h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-bottom: 14px;
  font-weight: 700;
}
.footer-columns ul { list-style: none; }
.footer-columns li { margin-bottom: 8px; }
.footer-columns a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.footer-columns a:hover { color: var(--purple); }
.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .hero { padding: 40px 0 60px; }
  .hero .container, .features-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }
  .hero-left { max-width: 100%; text-align: center; margin: 0 auto; }
  .hero-left .hero-cta, .hero-left .hero-meta { justify-content: center; }
  .hero-right { margin-top: 0; }
  .feature-grid-2 { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .sc-3 { grid-row: auto; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  nav .container { grid-template-columns: 1fr auto; }
  .nav-pill { display: none; }
  .section { padding: 60px 0; }
  .phone-mockup { width: 260px; height: 520px; }
}

/* ─── Legal pages ─── */
.legal {
  max-width: 740px;
  margin: 80px auto;
  padding: 0 24px;
}
.legal h1 {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.legal .updated {
  color: var(--text-2);
  margin-bottom: 36px;
  font-size: 14px;
}
.legal h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 32px 0 12px;
}
.legal p, .legal li {
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 12px;
}
.legal ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.legal a { color: var(--purple); }

/* ─────────────────────────────────────────────
   Stobi app design-system pass
   Matches app/constants/Colors.ts:
   aurora background + Apple-like glass + official mascot palette.
   ───────────────────────────────────────────── */

:root {
  --purple: #8A5BFF;
  --purple-dark: #5E35B1;
  --purple-2: #B388FF;
  --purple-light: #EDE5FF;
  --lavender: #C9B6FF;
  --pink: #FFB6D9;
  --mint: #BEECC4;
  --yellow: #FFE58A;
  --bg: #F5F2FA;
  --surface: rgba(255, 255, 255, 0.64);
  --surface-2: rgba(237, 229, 255, 0.58);
  --text: #211A3F;
  --text-2: #6C6380;
  --text-3: #A79CB8;
  --border: rgba(255, 255, 255, 0.72);
  --border-solid: #DDD3EE;
  --glass: rgba(255, 255, 255, 0.42);
  --glass-strong: rgba(255, 255, 255, 0.64);
  --glass-active: rgba(255, 255, 255, 0.84);
  --shadow-soft: 0 24px 70px rgba(94, 53, 177, 0.14);
  --shadow-tight: 0 12px 32px rgba(94, 53, 177, 0.12);
}

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(245, 242, 250, 0.96) 0%, rgba(237, 229, 255, 0.82) 36%, rgba(245, 242, 250, 0.98) 100%),
    radial-gradient(72% 42% at 18% 8%, rgba(255, 230, 243, 0.86), rgba(255, 230, 243, 0) 68%),
    radial-gradient(76% 52% at 82% 12%, rgba(201, 182, 255, 0.74), rgba(201, 182, 255, 0) 70%),
    radial-gradient(72% 44% at 88% 64%, rgba(190, 236, 196, 0.52), rgba(190, 236, 196, 0) 72%),
    radial-gradient(60% 38% at 10% 76%, rgba(255, 229, 138, 0.34), rgba(255, 229, 138, 0) 70%),
    #F5F2FA;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(94, 53, 177, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 53, 177, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 62%);
}

.container {
  max-width: 1320px;
}

nav {
  padding-top: 18px;
}

body.nav-cta-visible .nav-pill,
.nav-pill,
.nav-links,
.lang-switch,
.key-feat-pill,
.section-label,
.trust-badge,
.legal,
.faq-item,
.mini-feat,
.feat-pill,
.store-btn,
.cta-card,
.soc-ico,
.app-stat,
.phone-pill,
.sp-chip {
  background: var(--glass-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-tight);
  backdrop-filter: blur(18px) saturate(1.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.28);
}

.nav-pill,
.nav-links {
  border-radius: 999px;
}

.nav-links {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
}

.nav-links a:hover {
  background: var(--glass-active);
  color: var(--purple-dark);
}

.brand {
  color: var(--text);
}

.brand-stone {
  background:
    radial-gradient(circle at 70% 26%, rgba(255,255,255,0.86) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 70%, rgba(179,136,255,0.6) 0 12%, transparent 13%),
    linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow: 0 10px 24px rgba(138, 91, 255, 0.28);
}

.brand-stone::after {
  background: #211A3F;
  box-shadow: -8px 0 0 #211A3F;
}

.nav-pill a,
.lang-opt {
  color: var(--text);
  font-weight: 700;
}

.lang-opt:not(.is-active) {
  color: var(--text-3);
}

.lang-sep {
  color: rgba(94, 53, 177, 0.22);
}

.lang-switch {
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  min-height: 44px;
}

.lang-opt {
  min-width: 44px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lang-opt.is-active {
  background: var(--glass-active);
  color: var(--purple-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 22px rgba(94, 53, 177, 0.12);
}

.lang-sep {
  display: none;
}

.nav-pill a:not(.nav-pill-cta):not(.nav-cta-scroll)::after {
  background: var(--purple);
}

.nav-pill a:hover {
  background: rgba(237, 229, 255, 0.72);
}

.nav-pill a.nav-pill-cta,
.nav-pill .nav-cta-scroll,
.btn-primary,
.btn-hero,
.value-cta-arrow,
.feat-cta-btn,
.app-tab-center,
.store-btn-icon-dark,
.store-btn-icon-green {
  background: linear-gradient(135deg, #8A5BFF 0%, #B388FF 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(138, 91, 255, 0.28);
}

.btn-dark {
  background: var(--text);
  color: #fff;
}

.btn-light,
.btn-hero-outline,
.value-cta {
  background: var(--glass-active);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-tight);
  backdrop-filter: blur(18px) saturate(1.24);
  -webkit-backdrop-filter: blur(18px) saturate(1.24);
}

.hero {
  margin-top: -84px;
  padding: 150px 0 92px;
}

.hero .container {
  min-height: 640px;
}

.hero h1,
.headline-split,
.value-title,
.section h2,
.footer-logo,
.final-cta-heading,
.addition-heading {
  color: var(--text);
  letter-spacing: -0.025em;
}

.hero h1,
.headline-split,
.value-title,
.final-cta-heading {
  font-weight: 600;
}

.hero h1 .accent,
.headline-split .hs-line2,
.value-title,
.key-feat-pill,
.key-feat-pill i,
.icon-blue i,
.footer-columns a:hover,
.legal a,
.cta-amt,
.faq-item[open] .faq-q,
.faq-item[open] .faq-chev {
  color: var(--purple-dark);
}

.final-cta-heading em {
  color: var(--purple-dark) !important;
  background: linear-gradient(135deg, #8A5BFF 0%, #5E35B1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.value-chip i,
.sp-emoji i,
.pl-ico i,
.mini-feat-icon i,
.trust-ico i,
.social-ico i,
.soc-ico i,
.inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.value-chip i,
.sp-emoji i {
  font-size: 0.82em;
  color: #8A5BFF;
}

.map-chip i,
.sp-chip i,
.pl-ico i,
.pl-val i,
.m-badge i,
.inline-icon {
  color: currentColor;
  font-size: 1em;
  vertical-align: -0.12em;
}

.sp-chip,
.map-chip,
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.how-step-active .how-step-num {
  background: linear-gradient(135deg, #8A5BFF, #B388FF) !important;
  box-shadow:
    0 12px 26px rgba(94, 53, 177, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.how-steps::before,
.sp-bar {
  background: rgba(138, 91, 255, 0.32) !important;
}

.sp-chip-2 {
  background: linear-gradient(135deg, #8A5BFF, #B388FF) !important;
}

.hero p.lead,
.headline-sub,
.value-sub,
.feat-card p,
.how-step-text p,
.mini-feat-desc,
.trust-text span,
.final-cta-sub,
.legal .updated,
.legal p,
.legal li {
  color: var(--text-2);
}

.hero-meta {
  color: var(--text-2);
}

.hero-meta .dot {
  background: rgba(94, 53, 177, 0.34);
}

.phone-screen,
.phone-blank,
.screen-placeholder {
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 182, 217, 0.42), transparent 42%),
    radial-gradient(circle at 80% 12%, rgba(190, 236, 196, 0.38), transparent 40%),
    linear-gradient(180deg, #F5F2FA 0%, #EDE5FF 100%) !important;
}

.phone-mockup {
  filter: drop-shadow(0 34px 74px rgba(94, 53, 177, 0.22));
}

.app-hero-bg,
.phone-screen-app,
.screen-paint,
.screen-map,
.screen-celebrate {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 182, 217, 0.36), transparent 45%),
    linear-gradient(180deg, #F5F2FA 0%, #EDE5FF 100%) !important;
}

.app-name,
.phone-greeting,
.app-subtitle,
.phone-sub {
  color: var(--text);
}

.app-balance,
.app-gear,
.phone-pill {
  background: var(--glass);
  color: var(--purple-dark);
}

.app-mascot-big,
.phone-mascot {
  background:
    radial-gradient(circle at 68% 24%, #D8C4FF 0 12%, transparent 13%),
    linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow: 0 14px 36px rgba(94, 53, 177, 0.22);
}

.hero-accent,
.feat-card,
.how-card,
.super-app-phone-card,
.super-app-features-card,
.social-cell,
.final-cta-card,
.legal {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(237,229,255,0.46)),
    radial-gradient(circle at 18% 8%, rgba(255,182,217,0.30), transparent 46%),
    radial-gradient(circle at 86% 18%, rgba(190,236,196,0.26), transparent 48%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(1.26);
  -webkit-backdrop-filter: blur(22px) saturate(1.26);
}

.final-cta-card {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 182, 217, 0.42), transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(190, 236, 196, 0.28), transparent 42%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #B388FF 0%, #8A5BFF 45%, #5E35B1 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    0 38px 110px rgba(94, 53, 177, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.final-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.28;
  pointer-events: none;
}

.final-cta-card .final-cta-heading {
  color: #fff;
  text-shadow: 0 18px 40px rgba(33, 26, 63, 0.22);
}

.final-cta-card .final-cta-heading em {
  color: #5E35B1 !important;
  background: none !important;
  -webkit-text-fill-color: #5E35B1 !important;
  text-shadow: 0 12px 30px rgba(33, 26, 63, 0.12);
}

.final-cta-card .final-cta-sub {
  color: rgba(255, 255, 255, 0.86);
}

.final-cta-card .btn-hero {
  background: #fff;
  color: var(--purple-dark);
  box-shadow: 0 18px 44px rgba(33, 26, 63, 0.18);
}

.final-cta-card .btn-hero.btn-hero-outline {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-accent {
  color: var(--text);
}

.hero-accent.hero-stone-slideshow {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(237,229,255,0.18));
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 28px 64px rgba(94, 53, 177, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hero-accent-title {
  background: linear-gradient(135deg, #5E35B1, #8A5BFF, #FFB6D9);
  -webkit-background-clip: text;
  background-clip: text;
}

.feat-card::before,
.value-grid-bg::before,
.value-grid-bg::after,
.feat-card-cta::before,
.social-cell::before {
  opacity: 0.34;
  filter: hue-rotate(22deg) saturate(1.2);
}

.feat-card-cta {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,182,217,0.30), transparent 48%),
    linear-gradient(135deg, #8A5BFF 0%, #5E35B1 100%) !important;
}

.feat-card-cta h3,
.sc-3 h3,
.sc-3 .social-label {
  color: #fff !important;
}

.map-card,
.paint-list li,
.mascot-grid .mascot,
.mini-feat-icon,
.trust-ico,
.social-ico,
.cta-card-line,
.faq-divider {
  border-color: var(--border);
}

.icon-blue,
.ico-map,
.key-feat-pill {
  background: rgba(237, 229, 255, 0.78);
}

.icon-cyan,
.ico-diamond {
  background: rgba(237, 229, 255, 0.9);
}

.icon-pink,
.ico-paint,
.sc-5 {
  background: rgba(255, 182, 217, 0.58);
}

.icon-green,
.ico-chat,
.ico-map,
.sc-4 {
  background: rgba(190, 236, 196, 0.62);
}

.icon-yellow,
.ico-challenge {
  background: rgba(255, 229, 138, 0.70);
}

.sc-1,
.vp-chip-1 {
  background: linear-gradient(135deg, rgba(237,229,255,0.84), rgba(201,182,255,0.64));
}

.sc-2,
.vp-chip-4 {
  background: linear-gradient(135deg, rgba(255,229,138,0.58), rgba(255,182,217,0.54));
}

.sc-3 {
  background: linear-gradient(135deg, #8A5BFF 0%, #5E35B1 100%);
}

.footer-columns,
.footer-legal,
footer {
  border-color: rgba(221, 211, 238, 0.72);
}

.legal {
  max-width: 820px;
  margin: 96px auto;
  padding: 48px;
  border-radius: 32px;
}

.legal h1 {
  color: var(--text);
  font-weight: 820;
}

.legal h2,
.legal h3 {
  color: var(--purple-dark) !important;
}

.legal ul {
  padding-left: 0;
  list-style: none;
}

.legal li {
  position: relative;
  padding-left: 24px;
}

.legal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow: 0 0 0 4px rgba(138, 91, 255, 0.12);
}

::selection {
  background: rgba(138, 91, 255, 0.22);
  color: var(--text);
}

/* Design-system color cleanup: remove legacy blue/cyan accents from visuals. */
.value-grid-bg::before,
.value-grid-bg::after,
.feat-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g stroke='rgba(138,91,255,0.18)' stroke-width='1' stroke-linecap='round'><path d='M26 22 v8 M22 26 h8'/></g></svg>") !important;
}

.feat-card:hover {
  box-shadow:
    0 22px 52px rgba(94, 53, 177, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.map-card {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 182, 217, 0.26), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(255, 229, 138, 0.26), transparent 30%),
    linear-gradient(135deg, rgba(237, 229, 255, 0.94), rgba(201, 182, 255, 0.78)) !important;
  border: 1px solid rgba(138, 91, 255, 0.35) !important;
  box-shadow:
    0 18px 44px rgba(94, 53, 177, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.45;
}

.map-pin {
  background: #F5F2FA !important;
  box-shadow:
    0 8px 18px rgba(94, 53, 177, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65) !important;
}

.map-pin::after {
  background: #8A5BFF !important;
}

.map-pin.pin-2 {
  background: #FFE58A !important;
}

.map-pin.pin-2::after {
  background: #5E35B1 !important;
}

.map-pin.pin-3 {
  background: #FFB6D9 !important;
}

.map-pin.pin-3::after {
  background: #B388FF !important;
}

.map-chip {
  background: rgba(245, 242, 250, 0.88) !important;
  border: 1px solid rgba(138, 91, 255, 0.22);
  color: #5E35B1 !important;
}

.vp-chip-2,
.icon-cyan,
.ico-diamond,
.ico-chat {
  background: rgba(237, 229, 255, 0.78) !important;
}

.icon-blue i,
.icon-cyan i {
  color: #8A5BFF !important;
}

.icon-green i {
  color: #5E35B1 !important;
}

.vp-chip-1 {
  background: linear-gradient(135deg, rgba(255, 182, 217, 0.82), rgba(255, 229, 138, 0.54)) !important;
}

.vp-chip-2 {
  background: linear-gradient(135deg, rgba(237, 229, 255, 0.92), rgba(201, 182, 255, 0.70)) !important;
}

.vp-chip-3 {
  background: linear-gradient(135deg, rgba(138, 91, 255, 0.88), rgba(179, 136, 255, 0.66)) !important;
}

.vp-chip-4 {
  background: linear-gradient(135deg, rgba(190, 236, 196, 0.76), rgba(255, 229, 138, 0.52)) !important;
}

/* Mini feature cards: varied Stobi palette, no legacy blue wash. */
.mini-feat {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 18px 40px rgba(94, 53, 177, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.mini-feat:nth-child(1) {
  background:
    radial-gradient(circle at 14% 18%, rgba(190, 236, 196, 0.52), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 242, 250, 0.74)) !important;
}

.mini-feat:nth-child(2) {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 229, 138, 0.42), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(237, 229, 255, 0.74)) !important;
}

.mini-feat:nth-child(3) {
  background:
    radial-gradient(circle at 16% 18%, rgba(201, 182, 255, 0.46), transparent 44%),
    linear-gradient(135deg, rgba(245, 242, 250, 0.86), rgba(255, 255, 255, 0.78)) !important;
}

.mini-feat:nth-child(4) {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 182, 217, 0.42), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(237, 229, 255, 0.70)) !important;
}

.mini-feat:nth-child(5) {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 229, 138, 0.46), transparent 44%),
    linear-gradient(135deg, rgba(245, 242, 250, 0.86), rgba(190, 236, 196, 0.24)) !important;
}

.mini-feat:nth-child(6) {
  background:
    radial-gradient(circle at 16% 18%, rgba(207, 199, 217, 0.40), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(237, 229, 255, 0.72)) !important;
}

.mini-feat:nth-child(7) {
  background:
    radial-gradient(circle at 16% 18%, rgba(179, 136, 255, 0.38), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 182, 217, 0.22)) !important;
}

.mini-feat-icon {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 10px 22px rgba(94, 53, 177, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.icon-green {
  background: linear-gradient(135deg, rgba(190, 236, 196, 0.82), rgba(245, 242, 250, 0.78)) !important;
}

.icon-orange {
  background: linear-gradient(135deg, rgba(255, 229, 138, 0.82), rgba(237, 229, 255, 0.72)) !important;
}

.icon-blue {
  background: linear-gradient(135deg, rgba(237, 229, 255, 0.94), rgba(201, 182, 255, 0.72)) !important;
}

.icon-pink {
  background: linear-gradient(135deg, rgba(255, 182, 217, 0.66), rgba(237, 229, 255, 0.76)) !important;
}

.icon-yellow {
  background: linear-gradient(135deg, rgba(255, 229, 138, 0.82), rgba(190, 236, 196, 0.42)) !important;
}

.icon-cyan {
  background: linear-gradient(135deg, rgba(245, 242, 250, 0.94), rgba(207, 199, 217, 0.62)) !important;
}

.icon-blue i,
.icon-cyan i,
.icon-pink i,
.icon-green i,
.icon-yellow i,
.icon-orange i {
  color: #5E35B1 !important;
}

/* Final CTA interaction lock: no legacy blue hover/focus states. */
.value-cta,
.value-cta:visited {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(138, 91, 255, 0.20) !important;
  color: var(--text) !important;
  outline: none;
  -webkit-tap-highlight-color: rgba(138, 91, 255, 0.14);
}

.value-cta:hover,
.value-cta:focus-visible {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(138, 91, 255, 0.20) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 46px rgba(94, 53, 177, 0.12) !important;
  transform: none !important;
}

.value-cta:active {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(138, 91, 255, 0.20) !important;
  box-shadow: 0 18px 46px rgba(94, 53, 177, 0.12) !important;
  transform: scale(0.985) !important;
}

.value-cta:hover .value-cta-arrow,
.value-cta:focus-visible .value-cta-arrow {
  transform: translate(4px, -4px);
}

.value-cta:active .value-cta-arrow {
  transform: translate(2px, -2px) scale(0.96);
}

/* Calm button interactions: fill/glow changes only, no jumpy vertical hover. */
.btn-primary,
.btn-hero,
.nav-pill a.nav-pill-cta,
.nav-pill .nav-cta-scroll,
.feat-cta-btn,
.store-btn {
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease !important;
}

.btn-primary:hover,
.btn-hero:hover,
.nav-pill a.nav-pill-cta:hover,
.nav-pill .nav-cta-scroll:hover,
.feat-cta-btn:hover,
.store-btn:hover {
  transform: none !important;
}

.btn-primary:hover,
.btn-hero:hover,
.nav-pill a.nav-pill-cta:hover,
.nav-pill .nav-cta-scroll:hover {
  background: linear-gradient(135deg, #8A5BFF, #B388FF) !important;
  box-shadow: 0 18px 38px rgba(94, 53, 177, 0.22) !important;
}

.btn-hero-outline:hover {
  color: #5E35B1 !important;
  border-color: rgba(138, 91, 255, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(237, 229, 255, 0.96), rgba(245, 242, 250, 0.94)) !important;
}

.feat-cta-btn:hover,
.store-btn:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(237, 229, 255, 0.84)) !important;
  border-color: rgba(138, 91, 255, 0.24) !important;
  box-shadow: 0 18px 36px rgba(94, 53, 177, 0.14) !important;
}

.btn-primary:active,
.btn-hero:active,
.nav-pill a.nav-pill-cta:active,
.nav-pill .nav-cta-scroll:active,
.feat-cta-btn:active,
.store-btn:active {
  transform: scale(0.985) !important;
}

/* Hero store buttons: matched glass treatment and press feedback. */
.hero .hero-cta-row {
  align-items: stretch;
}

.hero .hero-cta-row .btn-hero {
  min-width: 178px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(138, 91, 255, 0.96), rgba(179, 136, 255, 0.82)) !important;
  color: #fff !important;
  box-shadow:
    0 18px 38px rgba(94, 53, 177, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.16s ease !important;
}

.hero .hero-cta-row .btn-hero-outline {
  background:
    linear-gradient(135deg, rgba(138, 91, 255, 0.96), rgba(179, 136, 255, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.48);
  color: #fff !important;
  box-shadow:
    0 18px 38px rgba(94, 53, 177, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

.hero .hero-cta-row .store-brand-icon,
.hero .hero-cta-row .store-brand-icon-apple {
  color: currentColor;
}

.hero .hero-cta-row .btn-hero:hover,
.hero .hero-cta-row .btn-hero:focus-visible,
.hero .hero-cta-row .btn-hero-outline:hover,
.hero .hero-cta-row .btn-hero-outline:focus-visible {
  background:
    linear-gradient(135deg, rgba(125, 74, 250, 0.98), rgba(190, 151, 255, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  color: #fff !important;
  box-shadow:
    0 20px 44px rgba(94, 53, 177, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  transform: none !important;
}

.hero .hero-cta-row .btn-hero:active,
.hero .hero-cta-row .btn-hero-outline:active {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 250, 0.94)) !important;
  border-color: rgba(138, 91, 255, 0.46) !important;
  color: #5E35B1 !important;
  box-shadow:
    0 10px 22px rgba(94, 53, 177, 0.14),
    inset 0 2px 8px rgba(94, 53, 177, 0.12) !important;
  transform: scale(0.975) !important;
}

.feat-card-cta .feat-cta-btn,
.final-cta-card .hero-cta-row .btn-hero,
.final-cta-card .hero-cta-row .btn-hero.btn-hero-outline {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 229, 255, 0.72)) !important;
  color: #5E35B1 !important;
  box-shadow:
    0 18px 38px rgba(33, 26, 63, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

.final-cta-card .hero-cta-row .store-brand-icon-apple {
  color: #5E35B1;
}

.feat-card-cta .feat-cta-btn:hover,
.feat-card-cta .feat-cta-btn:focus-visible,
.final-cta-card .hero-cta-row .btn-hero:hover,
.final-cta-card .hero-cta-row .btn-hero:focus-visible {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 250, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  color: #5E35B1 !important;
  box-shadow:
    0 20px 42px rgba(33, 26, 63, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  transform: none !important;
}

.feat-card-cta .feat-cta-btn:active,
.final-cta-card .hero-cta-row .btn-hero:active,
.final-cta-card .hero-cta-row .btn-hero.btn-hero-outline:active {
  background:
    linear-gradient(135deg, rgba(138, 91, 255, 0.98), rgba(179, 136, 255, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  color: #fff !important;
  box-shadow:
    0 10px 24px rgba(33, 26, 63, 0.18),
    inset 0 2px 8px rgba(94, 53, 177, 0.18) !important;
  transform: scale(0.975) !important;
}

/* Product-like feature visuals: map, journey, rewards, and scan flow. */
.app-map-ui,
.journey-ui,
.rewards-ui,
.feat-cta-preview {
  width: min(100%, 430px);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 22px 58px rgba(94, 53, 177, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.app-map-ui {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 322px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(250, 248, 255, 0.94), rgba(237, 229, 255, 0.76));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 12px 28px rgba(94, 53, 177, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.app-map-search,
.app-map-stats,
.app-map-bottom,
.reward-balance,
.reward-card,
.journey-row,
.cta-preview-row {
  display: flex;
  align-items: center;
}

.app-map-search {
  position: relative;
  z-index: 2;
  width: 100%;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 18px 18px 16px 16px;
  color: rgba(32, 23, 58, 0.58);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(94, 53, 177, 0.1);
  font-size: 13px;
  font-weight: 720;
}

.app-map-search i {
  color: var(--purple);
  font-size: 17px;
}

.app-map-stats {
  position: relative;
  z-index: 2;
  gap: 8px;
}

.app-map-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(94, 53, 177, 0.08);
}

.app-map-stats i {
  color: var(--purple);
  font-size: 15px;
}

.app-map-surface {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 176px;
  border-radius: 18px;
  overflow: hidden;
  background: #e8edf4;
  border: 1px solid rgba(138, 91, 255, 0.24);
}

.app-map-tiles {
  position: absolute;
  inset: -26px -34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  opacity: 0.96;
  filter: saturate(0.92) contrast(0.98) brightness(1.03);
}

.app-map-tiles::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(237, 229, 255, 0.18), rgba(138, 91, 255, 0.2)),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.06), transparent 42%);
  pointer-events: none;
}

.app-map-tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-map-zone {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 92px;
  top: 24px;
  border-radius: 50%;
  background: rgba(138, 91, 255, 0.12);
  border: 1px solid rgba(94, 53, 177, 0.3);
}

.app-user-marker,
.app-stone-dot,
.app-map-cluster,
.app-map-recenter,
.app-map-scan {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-user-marker {
  width: 42px;
  height: 42px;
  left: 164px;
  top: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  border: 3px solid #fff;
  box-shadow: 0 14px 30px rgba(94, 53, 177, 0.24);
}

.app-user-marker img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.app-stone-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #8A5BFF;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(94, 53, 177, 0.26);
}

.dot-a { left: 78px; top: 106px; }
.dot-b { right: 92px; top: 64px; background: #FFB6D9; }
.dot-c { right: 70px; bottom: 72px; background: #BEECC4; }

.app-map-cluster {
  width: 34px;
  height: 34px;
  left: 58px;
  bottom: 52px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5E35B1, #9B6BFF);
  border: 3px solid #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(94, 53, 177, 0.24);
}

.app-map-recenter {
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  color: var(--purple);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(94, 53, 177, 0.16);
}

.app-map-scan {
  left: 12px;
  right: 12px;
  bottom: 12px;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow: 0 16px 32px rgba(94, 53, 177, 0.24);
  font-size: 13px;
  font-weight: 840;
}

.app-map-attribution {
  position: absolute;
  right: 8px;
  bottom: 4px;
  color: rgba(32, 23, 58, 0.46);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.app-map-bottom {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px 16px 18px 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(94, 53, 177, 0.1);
}

.app-map-bottom strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.app-map-bottom span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.journey-ui,
.rewards-ui {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-ui {
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 10px 26px rgba(94, 53, 177, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.rewards-ui {
  gap: 10px;
  padding: 14px 16px 18px;
}

.stone-passport-top,
.stone-proof-card {
  display: flex;
  align-items: center;
}

.stone-passport-top {
  gap: 14px;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(237, 229, 255, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.stone-passport-photo {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(237, 229, 255, 0.82);
  box-shadow: 0 14px 30px rgba(94, 53, 177, 0.14);
}

.stone-passport-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stone-passport-photo span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #5E35B1, #8A5BFF);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(94, 53, 177, 0.2);
}

.stone-passport-copy {
  min-width: 0;
}

.stone-passport-copy span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: var(--purple-dark);
  background: rgba(138, 91, 255, 0.12);
  font-size: 12px;
  font-weight: 820;
}

.stone-passport-copy b {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 26px;
  font-weight: 900;
}

.stone-passport-copy small {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
}

.stone-journey-map {
  position: relative;
  min-height: 132px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, rgba(190, 236, 196, 0.48), transparent 32%),
    radial-gradient(circle at 78% 70%, rgba(255, 229, 138, 0.4), transparent 34%),
    linear-gradient(135deg, rgba(237, 229, 255, 0.94), rgba(255, 255, 255, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.84);
}

.stone-journey-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(138, 91, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(138, 91, 255, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
}

.stone-route {
  position: absolute;
  left: 56px;
  right: 56px;
  top: 50px;
  height: 42px;
  border: 3px solid rgba(138, 91, 255, 0.28);
  border-top: 0;
  border-radius: 0 0 120px 120px;
}

.stone-stop {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  border: 3px solid #fff;
  box-shadow: 0 12px 26px rgba(94, 53, 177, 0.2);
}

.stone-stop i {
  font-size: 18px;
}

.stop-a { left: 38px; top: 28px; }
.stop-b { left: calc(50% - 21px); top: 68px; }
.stop-c { right: 38px; top: 28px; }

.stone-stop.is-current {
  width: 50px;
  height: 50px;
  border-radius: 19px;
  background: linear-gradient(135deg, #5E35B1, #8A5BFF);
  transform: translateY(-4px);
}

.stone-location {
  position: absolute;
  z-index: 2;
  width: 96px;
  text-align: center;
}

.stone-location b {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
}

.stone-location small {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
}

.loc-a { left: 11px; bottom: 14px; }
.loc-b { left: calc(50% - 48px); top: 16px; }
.loc-c { right: 11px; bottom: 14px; }

.stone-proof-card {
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.stone-proof-card > i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #BEECC4, #8A5BFF);
}

.stone-proof-card div {
  min-width: 0;
}

.stone-proof-card b {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 18px;
  font-weight: 860;
}

.stone-proof-card small {
  display: block;
  color: var(--text-2);
  font-size: 11px;
  line-height: 15px;
  margin-top: 2px;
}

.stone-proof-card strong {
  margin-left: auto;
  color: var(--purple-dark);
  font-size: 18px;
  line-height: 24px;
  font-weight: 900;
}

.journey-row {
  position: relative;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.journey-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 31px;
  bottom: -18px;
  width: 2px;
  height: 24px;
  background: rgba(138, 91, 255, 0.24);
}

.journey-dot,
.reward-card > i,
.cta-preview-row i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow: 0 10px 22px rgba(94, 53, 177, 0.18);
}

.journey-dot.is-find { background: linear-gradient(135deg, #BEECC4, #8A5BFF); }
.journey-dot.is-rehide { background: linear-gradient(135deg, #FFE58A, #8A5BFF); }

.journey-row div,
.reward-card div {
  min-width: 0;
}

.journey-row b,
.reward-card b,
.reward-balance span,
.cta-preview-row span {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 760;
}

.journey-row small,
.reward-card small {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  line-height: 17px;
  margin-top: 2px;
}

.journey-row time {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.reward-balance {
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(237, 229, 255, 0.92), rgba(255, 255, 255, 0.72));
}

.reward-balance b {
  color: var(--purple-dark);
  font-size: 24px;
  line-height: 28px;
}

.reward-card {
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.82);
}

.reward-card.is-primary {
  background: rgba(237, 229, 255, 0.78);
}

.reward-card strong {
  margin-left: auto;
  color: var(--purple-dark);
  font-size: 16px;
  line-height: 22px;
}

.mascot-closet-top,
.style-progress,
.mascot-reward-strip {
  display: flex;
  align-items: center;
}

.mascot-closet-top {
  gap: 13px;
  padding: 13px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 182, 217, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(237, 229, 255, 0.76));
  border: 1px solid rgba(255, 255, 255, 0.88);
}

.mascot-closet-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.82), transparent 46%),
    linear-gradient(135deg, #B388FF, #8A5BFF);
  box-shadow: 0 16px 34px rgba(94, 53, 177, 0.14);
}

.mascot-closet-avatar img {
  width: 58px;
  height: 58px;
  display: block;
}

.mascot-closet-avatar span {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-dark);
  background: #FFE58A;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(94, 53, 177, 0.14);
}

.mascot-closet-copy {
  min-width: 0;
}

.mascot-closet-copy span {
  display: inline-flex;
  height: 25px;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 7px;
  border-radius: 999px;
  color: var(--purple-dark);
  background: rgba(138, 91, 255, 0.12);
  font-size: 12px;
  font-weight: 840;
}

.mascot-closet-copy b {
  display: block;
  color: var(--text);
  font-size: 19px;
  line-height: 23px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mascot-closet-copy small {
  display: block;
  margin-top: 3px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.mascot-closet-top > strong {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--purple-dark);
  font-size: 20px;
  line-height: 26px;
  font-weight: 950;
}

.mascot-style-preview {
  position: relative;
  min-height: 126px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 36%, rgba(255, 255, 255, 0.72), transparent 38%),
    radial-gradient(circle at 76% 32%, rgba(255, 229, 138, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(237, 229, 255, 0.96), rgba(190, 236, 196, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.mascot-style-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(138, 91, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(138, 91, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
}

.style-orbit {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 66px;
  border-bottom: 3px solid rgba(138, 91, 255, 0.2);
  border-radius: 50%;
}

.style-token {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  border: 3px solid #fff;
  box-shadow: 0 12px 24px rgba(94, 53, 177, 0.18);
}

.style-token i {
  font-size: 19px;
}

.token-a { left: 6px; top: 28px; }
.token-b {
  left: calc(50% - 23px);
  top: -3px;
  background: linear-gradient(135deg, #FFE58A, #8A5BFF);
}
.token-c {
  right: 6px;
  top: 28px;
  background: linear-gradient(135deg, #FFB6D9, #8A5BFF);
}

.style-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.84);
}

.style-progress b {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 17px;
  font-weight: 900;
}

.style-progress small {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
}

.style-progress span {
  flex: 0 0 auto;
  color: var(--purple-dark);
  font-size: 15px;
  line-height: 20px;
  font-weight: 900;
}

.mascot-reward-strip {
  gap: 8px;
  flex-wrap: wrap;
}

.mascot-reward-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 820;
}

.mascot-reward-strip i {
  color: var(--purple);
  font-size: 14px;
}

.feat-cta-preview {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
}

.cta-preview-row {
  gap: 12px;
  padding: 11px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
}

.cta-preview-row i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--purple-dark);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.cta-preview-row span {
  color: #fff;
  font-size: 14px;
}

.feat-card-cta {
  justify-content: space-between !important;
}

.feat-card-cta .feat-cta-content {
  margin-top: auto;
  transform: translateY(-8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.feat-cta-art {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 42px;
  bottom: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.feat-cta-art img {
  width: min(118%, 500px);
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 40px rgba(33, 26, 63, 0.26));
}

.feat-card-cta .feat-cta-content {
  position: relative;
  z-index: 2;
}

.feat-card-cta .feat-cta-content h3 {
  margin: 0 !important;
}

.feat-card-cta .feat-cta-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.feat-grid-22 > .feat-card:nth-child(3) .feat-visual {
  right: 34px !important;
  top: 42px !important;
  width: 326px !important;
  height: calc(100% - 84px) !important;
}

.feat-grid-22 > .feat-card:nth-child(3) h3,
.feat-grid-22 > .feat-card:nth-child(3) p {
  max-width: 220px !important;
}

#features .feat-card {
  box-shadow:
    0 18px 54px rgba(94, 53, 177, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#features .feat-card:hover {
  box-shadow:
    0 20px 58px rgba(94, 53, 177, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

#features .app-map-ui,
#features .journey-ui,
#features .rewards-ui {
  box-shadow:
    0 12px 30px rgba(94, 53, 177, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.modal-open {
  overflow: hidden;
}

.coming-soon-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
  isolation: isolate;
}

.coming-soon-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.coming-soon-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background:
    radial-gradient(circle at 44% 28%, rgba(179, 136, 255, 0.38), transparent 34%),
    rgba(33, 26, 63, 0.34);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.coming-soon-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 5001;
  /* 24px breathing room on each side at phone width, never wider
     than 430px on tablets/desktop. */
  width: min(calc(100% - 48px), 430px);
  padding: 28px 32px 30px;
  border-radius: 32px;
  text-align: center;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 229, 255, 0.80));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 34px 90px rgba(33, 26, 63, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translate(-50%, calc(-50% + 16px)) scale(0.97);
  transition: transform 0.24s cubic-bezier(.2, .8, .2, 1);
}

.coming-soon-modal.is-open .coming-soon-dialog {
  transform: translate(-50%, -50%) scale(1);
}

.coming-soon-dialog::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(138, 91, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 91, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  pointer-events: none;
}

.coming-soon-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(138, 91, 255, 0.18);
  border-radius: 999px;
  color: #5E35B1;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.coming-soon-close i {
  font-size: 18px;
}

.coming-soon-mark {
  position: relative;
  width: 144px;
  height: 126px;
  margin: -2px auto 18px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
}

.coming-soon-mark img {
  width: 144px;
  height: 144px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 24px rgba(94, 53, 177, 0.24));
}

.coming-soon-kicker {
  position: relative;
  margin: 0 0 10px;
  color: #5E35B1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coming-soon-dialog h2 {
  position: relative;
  margin: 0;
  color: var(--text);
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: 0;
}

.coming-soon-dialog p:not(.coming-soon-kicker) {
  position: relative;
  margin: 16px auto 24px;
  max-width: 330px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.52;
}

.coming-soon-ok {
  position: relative;
  min-width: 164px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  box-shadow:
    0 18px 38px rgba(94, 53, 177, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.16s ease,
    box-shadow 0.2s ease;
}

.coming-soon-ok:hover,
.coming-soon-ok:focus-visible {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 229, 255, 0.9));
  color: #5E35B1;
  box-shadow:
    0 18px 38px rgba(94, 53, 177, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.coming-soon-ok:active,
.coming-soon-close:active {
  transform: scale(0.96);
}

@media (max-width: 600px) {
  .app-map-ui,
  .journey-ui,
  .rewards-ui,
  .feat-cta-preview {
    width: 100%;
  }

  .app-map-ui {
    min-height: 304px;
  }

  .app-map-surface {
    min-height: 156px;
  }

  .feat-grid-22 > .feat-card:nth-child(3) .feat-visual {
    height: auto !important;
  }
}

@media (max-width: 900px) {
  .container {
    padding: 0 18px;
  }

  nav {
    padding-top: 12px;
  }

  nav .container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .brand {
    font-size: 20px;
  }

  .brand-logo {
    width: 104px;
    max-height: 40px;
  }

  .nav-links {
    padding: 5px;
  }

  .nav-links a {
    font-size: 13px;
    padding: 8px 10px;
  }

  .hero {
    margin-top: -76px;
    padding: 122px 0 56px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 0.98;
  }

  .hero p.lead {
    font-size: 16px;
    line-height: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-row {
    justify-content: center;
  }

  .btn-hero {
    flex: 1 1 150px;
    justify-content: center;
    padding: 14px 18px;
  }

  .value-prop {
    padding: 92px 18px 116px;
  }

  .feat-card,
  .how-card,
  .final-cta-card,
  .legal {
    border-radius: 26px;
  }

  .legal {
    margin: 72px 18px;
    padding: 28px 22px;
  }

  .legal h1 {
    font-size: 36px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile nav: hamburger + full-screen menu overlay
   Hidden on desktop, swapped in for the pill/lang-switch at ≤768.
   ──────────────────────────────────────────────────────────────────── */

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  border: 0;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 6px 18px rgba(94, 53, 177, 0.28);
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s, opacity 0.2s;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  color: var(--text);
  display: none;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  /* Stobi aurora — same family as the site background but compressed
     into a vertical sweep with stronger purple at top so the brand
     logo still pops. */
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 229, 138, 0.30), transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(255, 182, 217, 0.22), transparent 42%),
    linear-gradient(180deg,
      #E5DFFB 0%,
      #EFEAFC 22%,
      #F7F4FD 55%,
      #F5F2FA 100%);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 26px;
  gap: 0;
  overflow-y: auto;
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mobile-menu-top .brand-logo { width: 104px; }
.mobile-menu-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(138, 91, 255, 0.18);
  color: var(--purple-dark, #5E35B1);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 22px rgba(94, 53, 177, 0.12);
}
.mobile-menu-mascot {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
.mobile-menu-mascot img {
  width: 132px;
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(94, 53, 177, 0.28));
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0 18px;
}
.mobile-menu-link {
  color: var(--text);
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  padding: 10px 8px;
  transition: color 0.2s, transform 0.2s;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  color: var(--purple-dark, #5E35B1);
}
.mobile-menu-lang {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(138, 91, 255, 0.18);
}
.mobile-lang-opt {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(138, 91, 255, 0.2);
  color: var(--text-2, #6B7280);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mobile-lang-opt.is-active {
  background: linear-gradient(135deg, #8A5BFF, #B388FF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(94, 53, 177, 0.28);
}
.mobile-menu-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 22px;
}
.mobile-menu-socials .soc-ico {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(138, 91, 255, 0.22);
  color: var(--purple-dark, #5E35B1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s, background 0.2s;
}
.mobile-menu-socials .soc-ico:hover { transform: translateY(-2px); }
.mobile-menu-cta {
  margin-top: auto;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(135deg, #8A5BFF, #B388FF) !important;
  color: #fff !important;
  font-weight: 800;
  padding: 16px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: -0.1px;
  box-shadow: 0 14px 32px rgba(94, 53, 177, 0.32);
}
body.menu-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────────
   Phone-size breakpoints (≤768px and ≤480px). Existing breakpoints
   above stop at 900/700/600/500 and miss real handsets. This block
   scales typography down, kills decorative floats, and tightens
   container padding for 360–414px viewports.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .container { padding: 0 18px; }

  /* Swap the desktop pill for the hamburger trigger, but keep the
     FI/EN switch visible in the top bar — it's a key affordance and
     burying it inside the menu hurts discoverability. */
  .nav-pill { display: none !important; }
  .nav-burger { display: inline-flex; }
  .nav-right { display: inline-flex !important; }
  nav .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px !important;
    grid-template-columns: none !important;
  }
  .nav-right { margin-left: auto; margin-right: 8px; }
  .lang-switch { font-size: 13px; }

  .hero { padding-top: 132px; }
  .hero h1 { font-size: 56px !important; line-height: 1.02; letter-spacing: -1.2px; }
  .hero p.lead { font-size: 15.5px; line-height: 23px; }

  .value-title { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .value-sub { font-size: 16px; line-height: 25px; }

  .headline-split { font-size: 34px; line-height: 42px; letter-spacing: -0.9px; }
  .headline-sub { font-size: 16px; line-height: 25px; }

  .addition-section { padding: 80px 18px; }
  .addition-heading { font-size: 32px; line-height: 40px; letter-spacing: -0.6px; }

  .feat-card-cta h3 { font-size: 30px !important; line-height: 38px !important; }

  .final-cta-heading { font-size: 32px; line-height: 40px; letter-spacing: -0.8px; }

  .legal { margin: 64px 14px; padding: 22px 18px; border-radius: 22px; }
  .legal h1 { font-size: 30px; line-height: 1.15; }
  .legal h2 { font-size: 20px; margin-top: 24px; }
  .legal p, .legal li { font-size: 15px; line-height: 1.6; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }

  /* Nav */
  .brand-logo { width: 88px; max-height: 34px; }
  .nav-links { padding: 6px; gap: 2px; font-size: 13px; padding-right: 12px; }
  .nav-links a { padding: 6px 10px; }
  nav .container { padding: 0 16px; }
  .lang-switch { padding-right: 4px; }

  /* Hero — extra top padding so the H1 doesn't slam into the nav. */
  .hero { padding: 140px 0 56px; }
  .hero h1 { font-size: 52px !important; line-height: 1.02; letter-spacing: -1.1px; }
  .hero p.lead { font-size: 15px; line-height: 22px; }
  .hero-cta-row { gap: 10px; justify-content: center; }
  .btn-hero { flex: 0 0 auto; padding: 13px 22px; font-size: 15px; }
  .hero-meta { font-size: 12px; gap: 8px 12px; }
  .hero-meta .dot { display: none; }
  .phone-mockup { width: 220px; height: 450px; }
  /* Keep the stone slideshow but shrink it so it fits between phone
     mock and CTAs without dominating the column. */
  .hero-accent { width: 200px; }

  /* Value prop */
  .value-prop { padding: 72px 16px 88px; }
  .value-title { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; }
  .value-sub { font-size: 15px; line-height: 23px; }
  .value-divider .vd-line { display: none; }
  .value-chip,
  .vp-chip-1, .vp-chip-2, .vp-chip-3, .vp-chip-4 { display: none; }
  .value-cta { padding: 11px 56px 11px 18px; font-size: 14px; }

  /* How it works */
  .section { padding: 56px 0; }
  .section h2 { font-size: 28px; line-height: 34px; }
  /* Wide but not flush-to-bezel. 12px of purple background frames the
     card, then 24px inner padding gives the heading + steps real
     breathing room from the device edge (~36px total). */
  .how-section .container { padding-left: 12px; padding-right: 12px; max-width: 100%; }
  .how-card { padding: 40px 24px; border-radius: 20px; max-width: 100%; width: 100%; box-sizing: border-box; gap: 28px; }
  .how-section .section-head-center { margin: 0; padding: 0; }
  /* Mobile order: steps on top, phone mockup BELOW them. When the
     user taps a step the phone screen image changes (existing JS at
     index.html ~L740 toggles .how-screen-N.is-active), so having the
     phone below the tapped step gives instant visual feedback. */
  .how-layout { flex-direction: column-reverse; gap: 28px; justify-content: flex-start; align-items: stretch; }
  .how-phone { display: flex; flex-direction: column; align-items: center; }
  .how-phone .phone-mockup { width: 220px; height: 450px; }
  .how-dots { display: flex; }
  .how-steps { padding-top: 0; }
  .how-step { padding: 18px 0; }
  .how-step:first-child { padding-top: 0; }
  .headline-split { font-size: 28px; line-height: 34px; letter-spacing: -0.5px; }
  .key-feat-pill { font-size: 12px; padding: 6px 12px; }
  .how-step { gap: 18px; padding: 36px 0; }
  .how-step-text h3 { font-size: 20px; line-height: 26px; }
  .how-step-text p { font-size: 15px; line-height: 22px; }

  /* Standout features — give the visual mockups real room and keep
     the title/body comfortable below them. */
  .feat-card { padding: 28px 18px !important; min-height: auto !important; gap: 18px; }
  .feat-card h3 { font-size: 22px; line-height: 28px; margin-top: 8px; }
  .feat-card p { font-size: 15px; line-height: 22px; }

  /* Mobile illustration strategy: do NOT hide pieces or restructure
     the mockups. Just scale them down as a whole so all original
     elements (route arcs, style-orbits, location labels, reward
     chips, etc.) stay intact and proportional.
     CRITICAL: reset the per-card .feat-visual offsets (card 1 has
     margin-top:-80px; card 3 is positioned absolute right:-80px,
     width:420px) — they were designed for big desktop cards and on
     mobile they push the illustration outside the card's overflow:
     hidden boundary. */
  .feat-grid-22 > .feat-card .feat-visual,
  .feat-grid-22 > .feat-card:nth-child(1) .feat-visual,
  .feat-grid-22 > .feat-card:nth-child(2) .feat-visual,
  .feat-grid-22 > .feat-card:nth-child(3) .feat-visual {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 4px !important;
    padding-top: 8px;
    display: flex;
    justify-content: center;
    overflow: visible;
  }
  .app-map-ui, .journey-ui, .rewards-ui { width: 100%; transform-origin: top center; transform: scale(0.92); margin-bottom: -8%; }
  /* Inside the journey card, the .stone-passport-copy span ("Löydetty
     tänään" / "Found today") and the small route-arc labels render as
     two-line pills at phone width — drop their font 12 → 10 and the
     reward strip chips → 10 so the text fits on one line. */
  .stone-passport-copy span { font-size: 10px; height: 22px; padding: 0 8px; margin-bottom: 6px; }
  .stone-location b { font-size: 10px; line-height: 14px; }
  .stone-location small { font-size: 9px; line-height: 12px; }
  .mascot-closet-copy span { font-size: 10px; }
  .style-progress b { font-size: 11px; line-height: 15px; }
  .style-progress small { font-size: 9px; line-height: 12px; }
  .mascot-reward-strip span { font-size: 10px; padding: 5px 8px; }

  /* CTA card — desktop has .feat-cta-art positioned absolute behind
     the heading + button. On mobile that overlay collapses on top
     of the title, so flow it into the normal column instead. */
  .feat-card-cta { padding: 36px 22px !important; flex-direction: column; align-items: center; text-align: center; gap: 18px; justify-content: flex-start !important; }
  .feat-card-cta .feat-cta-art { position: static !important; inset: auto !important; display: flex; justify-content: center; }
  .feat-card-cta .feat-cta-art img { width: 260px !important; max-height: none; }
  .feat-card-cta h3 { font-size: 26px !important; line-height: 32px !important; margin: 0 !important; }
  .feat-card-cta .feat-cta-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: none; margin-top: 0; }
  .feat-card-cta .feat-cta-btn { width: auto; }

  /* Addition / community feed */
  .addition-section { padding: 64px 16px; }
  .addition-heading { font-size: 26px; line-height: 32px; letter-spacing: -0.4px; }
  /* Restore the desktop "STOBI / APP behind the phone, peeking out on
     the sides" effect on mobile. The phone needs explicit wrap height
     so the bg-words can be absolutely positioned around its upper
     half; overflow is set to visible so the words can extend past the
     viewport (body { overflow-x: hidden } stops any horizontal
     scrolling).
     Mask gradient starts fading from 50% (halfway down the phone)
     instead of the desktop default 70%, matching the user-requested
     "dissolve from half" effect. */
  .addition-phone-wrap {
    height: 540px;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 88%);
  }
  .addition-phone { width: 240px !important; height: 490px !important; margin-top: 16px; }
  .bg-word { font-size: 88px; line-height: 88px; letter-spacing: -1.6px; }
  .bg-word-1 { top: 110px; left: -32px; }
  .bg-word-2 { top: 110px; right: -16px; }
  .mini-feat { padding: 12px 16px; }
  .mini-feat-icon { width: 48px; height: 48px; }
  .mini-feat-title { font-size: 16px; line-height: 24px; }

  /* FAQ */
  .faq-section { padding: 60px 16px; }
  .faq-container { gap: 22px; }
  .faq-section .section-head-center { margin: 0; gap: 8px; }
  .faq-item summary { padding: 16px 18px; gap: 14px; }
  .faq-q { font-size: 15px; line-height: 22px; }
  .faq-a { font-size: 14px; padding: 14px 24px 20px 18px; }
  .faq-divider { margin: 0 18px; }

  /* Final CTA */
  .final-cta-wrap { padding: 48px 14px; }
  .final-cta-card { padding: 36px 22px; border-radius: 22px; }
  .final-cta-heading { font-size: 26px; line-height: 32px; letter-spacing: -0.5px; }
  .final-cta-sub { font-size: 13px; }

  /* Footer */
  footer { padding: 56px 0 32px; }
  .footer-legal { font-size: 12px; gap: 6px 14px; }

  /* Legal pages */
  .legal { margin: 56px 10px; padding: 18px 16px; border-radius: 18px; }
  .legal h1 { font-size: 26px; line-height: 1.18; }
  .legal h2 { font-size: 18px; margin-top: 22px; }
  .legal p, .legal li { font-size: 14.5px; line-height: 1.6; }
  .legal .updated { font-size: 12px; }
}