:root {
  --bg: #0b0f12;
  --bg-soft: #111920;
  --panel: #1e3646;
  --purple: #753a93;
  --orange: #ea742d;
  --turquoise: #00d4d4;
  --text: #f5f7f8;
  --muted: #aeb9c2;
  --line: rgba(255,255,255,.12);
  --radius: 28px;
  --max: 1180px;
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(117,58,147,.11), transparent 27rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  height: var(--header-h);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 56px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header.scrolled {
  background: rgba(11,15,18,.72);
  backdrop-filter: blur(18px);
  border-color: rgba(255,255,255,.08);
}
.brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav a, .mobile-menu a { color: #dbe2e7; text-decoration: none; font-size: .94rem; }
.nav-cta { background: var(--turquoise); color: #041114 !important; border-radius: 999px; padding: 10px 17px; font-weight: 760; }
.menu-button, .mobile-menu { display: none; }

.section-pad { padding: clamp(84px, 11vw, 150px) clamp(20px, 5vw, 64px); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; color: var(--turquoise); margin: 0 0 14px; }
.section-heading { width: min(760px, 100%); margin: 0 auto 76px; text-align: center; }
.section-heading h2, .problem-copy h2, .privacy h2, .download h2, .go-do-it h2 { font-size: clamp(2.1rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 22px; }
.section-heading p, .problem-copy p, .privacy p, .download p, .go-intro p { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); }

.hero { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; text-align: center; }
.hero-inner { width: min(900px, 100%); position: relative; z-index: 2; padding-top: var(--header-h); }
.hero-icon { width: clamp(96px, 13vw, 148px); height: auto; aspect-ratio: 1; margin: 0 auto 24px; border-radius: 27%; box-shadow: 0 0 50px rgba(0,212,212,.10), 0 0 120px rgba(117,58,147,.15); }
.hero h1 { font-size: clamp(3rem, 8vw, 7.2rem); letter-spacing: -.065em; line-height: .93; margin: 0; font-weight: 850; }
.hero h1 span { background: linear-gradient(105deg, #fff 5%, #c5fafa 50%, #f9c0a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { color: #c8d1d8; max-width: 720px; margin: 30px auto 0; font-size: clamp(1.05rem, 2vw, 1.32rem); }
.hero-glow { position: absolute; width: 48vw; height: 48vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(90px); opacity: .15; background: linear-gradient(120deg, var(--purple), var(--orange)); animation: breathe 9s ease-in-out infinite alternate; }
.store-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.store-button { min-width: 154px; padding: 13px 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(255,255,255,.05); text-decoration: none; font-weight: 760; transition: transform .2s ease, border-color .2s ease; }
.store-button:hover { transform: translateY(-2px); border-color: rgba(0,212,212,.6); }

.problem { min-height: 250vh; position: relative; background: linear-gradient(180deg, var(--bg) 0%, #0f151a 52%, #131d23 100%); }
.problem-sticky { position: sticky; top: 0; min-height: 100svh; overflow: hidden; display: grid; place-items: center; padding: calc(var(--header-h) + 36px) clamp(20px, 5vw, 64px) 60px; }
.problem-copy { position: absolute; z-index: 6; width: min(720px, 86vw); text-align: center; top: 18vh; transition: transform .1s linear, opacity .1s linear; }
.search-chaos, .solution-stack { position: absolute; inset: 0; pointer-events: none; }
.generic-card { position: absolute; width: min(330px, 42vw); padding: 20px; background: rgba(224,229,232,.9); color: #1c252a; border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.22); display: grid; gap: 7px; transform-origin: center; }
.generic-card small { font-weight: 850; font-size: .66rem; letter-spacing: .11em; color: #71808a; }
.generic-card strong { font-size: clamp(1rem, 2vw, 1.35rem); }
.generic-card span { color: #687780; font-size: .86rem; }
.generic-a { left: 8vw; top: 54%; transform: rotate(-7deg); }
.generic-b { right: 9vw; top: 49%; transform: rotate(6deg); }
.generic-c { left: 22vw; bottom: 7%; transform: rotate(3deg); }
.generic-d { right: 22vw; bottom: 4%; transform: rotate(-4deg); }
.solution-stack { display: grid; place-items: end center; padding-bottom: 8vh; opacity: 0; transform: translateY(60px) scale(.94); }
.mini-result { position: absolute; width: min(430px, 78vw); background: #edf2f5; color: #0d151a; border-radius: 24px; padding: 12px; box-shadow: 0 25px 75px rgba(0,0,0,.4), 0 0 0 1px rgba(0,212,212,.3); overflow: hidden; }
.mini-result img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; border-radius: 17px; }
.mini-result div { padding: 14px 10px 10px; display: grid; gap: 4px; }
.mini-result strong { font-size: 1.2rem; }
.mini-result span { color: #4c5d67; }
.result-one { z-index: 2; transform: translate(-12%, 0) rotate(-2deg); }
.result-two { z-index: 1; transform: translate(24%, -40px) rotate(4deg); opacity: .82; }
.problem-bridge { position: absolute; z-index: 9; bottom: 3vh; text-align: center; opacity: 0; transform: translateY(24px); font-weight: 780; }
.bridge-line { width: 1px; height: 55px; margin: 12px auto 0; background: linear-gradient(var(--turquoise), transparent); }

.explore { background: #131d23; position: relative; }
.explore-desktop { width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(56px, 8vw, 130px); align-items: start; }
.explore-steps { padding-bottom: 25vh; }
.explore-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .34; transition: opacity .3s ease, transform .3s ease; transform: translateY(12px); }
.explore-step.active { opacity: 1; transform: none; }
.step-number { color: var(--turquoise); font-size: .82rem; font-weight: 850; letter-spacing: .14em; }
.explore-step h3 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.04em; margin: 12px 0 18px; }
.explore-step p { color: var(--muted); font-size: 1.1rem; max-width: 560px; }
.explore-step strong { color: var(--text); }
.phone-stage { position: sticky; top: calc(var(--header-h) + 7vh); min-height: 80vh; display: grid; place-items: center; }
.phone-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, rgba(117,58,147,.35), rgba(234,116,45,.28), rgba(0,212,212,.18)); filter: blur(55px); }
.phone-shell { width: min(360px, 36vw); max-height: 73vh; aspect-ratio: 921/2048; border-radius: 42px; overflow: hidden; border: 8px solid #080b0d; box-shadow: 0 35px 90px rgba(0,0,0,.45); background: #000; position: relative; z-index: 3; }
.phone-shell img { width: 100%; height: 100%; object-fit: cover; }
.zoom-actions { position: absolute; z-index: 5; bottom: 8vh; left: 50%; transform: translate(-50%, 25px); display: flex; gap: 8px; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.zoom-actions.visible { opacity: 1; transform: translate(-50%, 0); }
.zoom-label { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #dce5ea; font-weight: 750; }
.zoom-chip { padding: 10px 13px; background: rgba(30,54,70,.92); border: 1px solid rgba(0,212,212,.35); border-radius: 999px; font-weight: 800; font-size: .78rem; box-shadow: 0 0 24px rgba(0,212,212,.08); }
.action-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.action-pills span { padding: 10px 14px; border: 1px solid rgba(0,212,212,.24); border-radius: 999px; color: #dbe8ec; background: rgba(30,54,70,.4); font-size: .86rem; }
.challenge-line { color: #fff !important; font-weight: 800; }
.explore-mobile { display: none; }

.go-do-it { position: relative; background: #0c1115; padding: 0 clamp(20px, 5vw, 64px) clamp(96px, 12vw, 160px); overflow: hidden; }
.go-intro { min-height: 68vh; display: grid; place-content: center; text-align: center; max-width: 900px; margin: 0 auto; }
.go-kicker { margin-bottom: 0 !important; }
.go-do-it h2 { font-size: clamp(4rem, 12vw, 10rem); background: linear-gradient(100deg, var(--turquoise), #fff 38%, #ffc5a4 70%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.mosaic { width: min(var(--max), 100%); margin: -7vh auto 0; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: 280px 240px; gap: 16px; }
.mosaic figure { margin: 0; border-radius: 26px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.09); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-main { grid-row: 1 / 3; }
.mosaic-main figcaption { position: absolute; inset: auto 20px 20px 20px; padding: 16px; background: rgba(8,12,14,.62); backdrop-filter: blur(10px); border-radius: 16px; font-weight: 760; }
.mosaic-placeholder { display: grid; place-items: center; color: rgba(255,255,255,.66); font-weight: 760; min-height: 220px; }
.placeholder-one { background: linear-gradient(145deg, rgba(117,58,147,.9), rgba(234,116,45,.75)); }
.placeholder-two { background: linear-gradient(145deg, #173449, #254f5a); }

.privacy { background: #0c1115; }
.privacy-panel { width: min(var(--max), 100%); margin: 0 auto; padding: clamp(28px, 5vw, 64px); border-radius: 34px; background: linear-gradient(145deg, rgba(30,54,70,.9), rgba(16,31,40,.96)); border: 1px solid rgba(0,212,212,.20); box-shadow: 0 0 70px rgba(0,212,212,.05); display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.text-link { color: var(--turquoise); font-weight: 800; text-decoration: none; }
.privacy-points { display: grid; gap: 12px; }
.privacy-points div { padding: 20px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 4px; }
.privacy-points span { color: var(--muted); }

.download { position: relative; overflow: hidden; text-align: center; min-height: 90svh; display: grid; place-items: center; }
.download-inner { position: relative; z-index: 2; width: min(760px, 100%); }
.download-inner > img { width: 92px; height: auto; border-radius: 24px; margin: 0 auto 20px; }
.download-glow { position: absolute; width: 120vw; height: 70vh; bottom: -34vh; background: radial-gradient(ellipse at center, rgba(234,116,45,.55), rgba(117,58,147,.38) 36%, transparent 70%); filter: blur(25px); }
.store-light { background: #f6f8f9; color: #0c1216; border-color: transparent; }
.qr-placeholder { width: 104px; margin: 28px auto 0; display: grid; gap: 6px; place-items: center; color: var(--muted); }
.qr-placeholder span { width: 86px; aspect-ratio: 1; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.28); border-radius: 15px; color: #fff; font-weight: 900; }
.qr-placeholder small { font-size: .68rem; }

.faq { background: #10171c; }
.faq-list { width: min(860px, 100%); margin: 0 auto; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 0; }
summary { list-style: none; cursor: pointer; font-size: 1.08rem; font-weight: 780; padding: 24px 44px 24px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 1.6rem; color: var(--turquoise); }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); margin: 0 0 24px; max-width: 700px; }

.site-footer { padding: 38px clamp(20px, 5vw, 64px); background: #080b0d; border-top: 1px solid rgba(255,255,255,.07); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; color: #a6b1b8; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: white; }
.footer-brand img { width: 30px; height: 30px; border-radius: 8px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer p { grid-column: 1 / -1; margin: 0; font-size: .78rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes breathe { from { transform: scale(.94); opacity: .11; } to { transform: scale(1.06); opacity: .19; } }

@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .desktop-nav { display: none; }
  .menu-button { display: grid; width: 42px; height: 42px; border: 0; background: transparent; padding: 10px; gap: 5px; align-content: center; }
  .menu-button span { height: 2px; width: 100%; background: #fff; border-radius: 4px; transition: transform .2s ease, opacity .2s ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { position: fixed; display: grid; gap: 8px; top: var(--header-h); left: 14px; right: 14px; padding: 16px; background: rgba(16,24,30,.94); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; backdrop-filter: blur(20px); transform: translateY(-16px); opacity: 0; pointer-events: none; transition: .2s ease; }
  .mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .mobile-menu a { padding: 13px 14px; border-radius: 12px; }
  .nav-cta { text-align: center; }

  .hero { min-height: 94svh; }
  .hero h1 { font-size: clamp(3.1rem, 14vw, 5.2rem); }
  .hero-copy { max-width: 33rem; }
  .hero-icon { width: 112px; }

  .problem { min-height: 220vh; }
  .problem-copy { top: 15vh; width: min(94vw, 600px); }
  .generic-card { width: 59vw; padding: 16px; }
  .generic-a { left: -9vw; top: 54%; }
  .generic-b { right: -10vw; top: 50%; }
  .generic-c { left: 8vw; bottom: 12%; }
  .generic-d { right: 4vw; bottom: 4%; }
  .mini-result { width: 77vw; }
  .result-one { transform: translate(-7%, 0) rotate(-2deg); }
  .result-two { transform: translate(16%, -34px) rotate(4deg); }

  .explore-desktop { display: none; }
  .explore-mobile { display: block; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); }
  .mobile-card-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 4px 18px; scrollbar-width: none; }
  .mobile-card-track::-webkit-scrollbar { display: none; }
  .mobile-step-card { flex: 0 0 86vw; scroll-snap-align: center; padding: 14px 14px 24px; background: rgba(30,54,70,.42); border: 1px solid rgba(255,255,255,.08); border-radius: 26px; }
  .mobile-step-card img { width: min(68vw, 330px); aspect-ratio: 921/2048; object-fit: cover; margin: 0 auto 22px; border-radius: 28px; border: 6px solid #080b0d; }
  .mobile-step-card > span { color: var(--turquoise); font-weight: 850; font-size: .78rem; }
  .mobile-step-card h3 { margin: 5px 0 8px; font-size: 1.5rem; }
  .mobile-step-card p { margin: 0; color: var(--muted); }
  .mobile-challenge-card strong { display: block; margin-top: 18px; color: var(--turquoise); font-size: 2rem; }
  .mobile-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .mobile-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.24); }
  .mobile-dots span.active { background: var(--turquoise); transform: scale(1.25); }

  .go-intro { min-height: 58vh; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 330px 180px 180px; }
  .mosaic-main { grid-column: 1 / -1; grid-row: auto; }
  .mosaic-side { grid-column: 1 / -1; }

  .privacy-panel { grid-template-columns: 1fr; gap: 28px; }
  .qr-placeholder { display: none; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer p { grid-column: auto; }
}

@media (max-width: 520px) {
  .section-pad { padding-left: 18px; padding-right: 18px; }
  .brand span { font-size: .94rem; }
  .hero h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }
  .hero-copy { font-size: 1rem; }
  .store-button { min-width: 140px; }
  .section-heading { text-align: left; margin-bottom: 48px; }
  .problem-copy h2, .section-heading h2, .privacy h2, .download h2 { font-size: 2.55rem; }
  .mosaic { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
  .mosaic-main, .mosaic-side { grid-column: auto; min-height: 280px; }
  .mosaic-placeholder { min-height: 180px; }
  .site-footer nav { gap: 13px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =========================================================
   MOCKUP V2 OVERRIDES
   ========================================================= */

/* Hero: make the brand name read as a deliberate part of the hero,
   while preserving the quieter image-free/product-free opening. */
.hero .eyebrow {
  font-size: clamp(1.7rem, 2.4vw, 2.25rem);
  letter-spacing: .17em;
  margin-bottom: 22px;
}
.hero .store-row {
  margin-top: 40px;
}

/* Problem story: pull the generic clutter closer to the middle initially,
   shorten the story slightly, and give the result cards more upward travel. */
.problem {
  min-height: 215vh;
}
.generic-a { left: 18vw; top: 54%; }
.generic-b { right: 18vw; top: 49%; }
.generic-c { left: 28vw; bottom: 7%; }
.generic-d { right: 28vw; bottom: 4%; }

.solution-stack {
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 0;
  transform: translateY(48vh) scale(.94);
}
.mini-result {
  position: relative;
  grid-area: 1 / 1;
}
.result-one { z-index: 2; transform: translate(-12%, 0) rotate(-2deg); }
.result-two { z-index: 1; transform: translate(24%, -40px) rotate(4deg); opacity: .82; }
.problem-bridge {
  bottom: 2.2vh;
}

/* Explore: tighten the bottom of the story so "Or stop planning..." hands
   directly into the GO DO IT transition. */
.explore-steps {
  padding-bottom: 8vh;
}
.explore-step {
  min-height: 68vh;
}
.challenge-line {
  margin-top: 28px;
  font-size: 1.12rem !important;
  letter-spacing: -.01em;
}

/* V2 deliberately removes the duplicated callout chips underneath the phone. */
.zoom-actions { display: none !important; }

/* GO DO IT is now a scroll-driven bridge from the phone into the real world. */
.go-do-it {
  position: relative;
  background: #0c1115;
  padding: 0 clamp(20px, 5vw, 64px) clamp(96px, 12vw, 160px);
  overflow: hidden;
}
.go-transition-story {
  position: relative;
  min-height: 145vh;
  margin: 0 calc(clamp(20px, 5vw, 64px) * -1);
}
.go-transition-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 78% 52%, rgba(117,58,147,.13), transparent 24rem),
    #0c1115;
}
.go-transition-photo {
  position: absolute;
  inset: 11vh 8vw 9vh 8vw;
  z-index: 1;
  overflow: hidden;
  border-radius: clamp(28px, 5vw, 66px);
  opacity: 0;
  clip-path: circle(4% at 80% 50%);
  box-shadow: 0 34px 100px rgba(0,0,0,.44);
}
.go-transition-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,15,18,.38), rgba(11,15,18,.08) 50%, rgba(11,15,18,.30));
  pointer-events: none;
}
.go-transition-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.72);
}
.go-transition-phone {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(7vw, 12vw, 190px);
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  opacity: 1;
}
.transition-phone-shell {
  width: min(350px, 31vw);
  max-height: 72vh;
}
.go-do-it .go-title {
  position: relative;
  z-index: 5;
  margin: 0;
  font-size: clamp(4.5rem, 12vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.07em;
  text-align: center;
  opacity: 0;
  transform: scale(.78);
  background: linear-gradient(105deg, #a763c2 0%, var(--purple) 28%, #bd596f 60%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 70px rgba(0,0,0,.35);
}

/* Eight-image editorial mosaic. Only two real photos are available in V2;
   the remaining six are explicit placeholders ready for the user's stock set. */
.mosaic {
  width: min(var(--max), 100%);
  margin: -4vh auto 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 105px;
  gap: 16px;
  position: relative;
  z-index: 3;
}
.mosaic figure {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.09);
  min-width: 0;
}
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaic-tile figcaption {
  position: absolute;
  inset: auto 16px 16px 16px;
  max-width: min(380px, calc(100% - 32px));
  padding: 13px 15px;
  background: rgba(8,12,14,.62);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  font-weight: 760;
  line-height: 1.25;
}
.mosaic-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.58);
  font-weight: 760;
  min-height: 0;
}
.mosaic-placeholder > span {
  opacity: .72;
  font-size: .82rem;
}
.placeholder-one  { background: linear-gradient(145deg, rgba(117,58,147,.90), rgba(234,116,45,.70)); }
.placeholder-two  { background: linear-gradient(145deg, #1e3646, rgba(117,58,147,.78)); }
.placeholder-three{ background: linear-gradient(160deg, rgba(234,116,45,.84), rgba(117,58,147,.74)); }
.placeholder-four { background: linear-gradient(145deg, #253f50, #592f73); }
.placeholder-five { background: linear-gradient(150deg, rgba(117,58,147,.76), rgba(234,116,45,.88)); }
.placeholder-six  { background: linear-gradient(145deg, #162b39, #81446f); }

.tile-1 { grid-column: 1 / 7;  grid-row: 1 / 5; }
.tile-2 { grid-column: 7 / 13; grid-row: 1 / 3; }
.tile-3 { grid-column: 7 / 10; grid-row: 3 / 7; }
.tile-4 { grid-column: 10 / 13; grid-row: 3 / 5; }
.tile-5 { grid-column: 1 / 4;  grid-row: 5 / 7; }
.tile-6 { grid-column: 4 / 7;  grid-row: 5 / 8; }
.tile-7 { grid-column: 10 / 13; grid-row: 5 / 8; }
.tile-8 { grid-column: 1 / 4;  grid-row: 7 / 9; }

@media (max-width: 820px) {
  .hero .eyebrow {
    font-size: 1.12rem;
    margin-bottom: 17px;
  }
  .hero .store-row {
    margin-top: 46px;
  }

  .problem {
    min-height: 190vh;
  }
  /* Preserve the busier mobile clutter arrangement that worked well in V1. */
  .generic-a { left: -9vw; top: 54%; }
  .generic-b { right: -10vw; top: 50%; }
  .generic-c { left: 8vw; bottom: 12%; }
  .generic-d { right: 4vw; bottom: 4%; }

  .solution-stack {
    transform: translateY(50vh) scale(.94);
  }

  /* The whole phone plus title/copy now fits comfortably inside a modern
     402x874 / 412x891 viewport once a card is in view. */
  .mobile-step-card {
    flex: 0 0 88vw;
    padding: 13px 13px 20px;
  }
  .mobile-step-card img {
    height: min(52svh, 440px);
    width: auto;
    max-width: 78%;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto 16px;
    border-radius: 25px;
    border-width: 5px;
  }
  .mobile-step-card h3 {
    font-size: 1.34rem;
    margin: 4px 0 6px;
  }
  .mobile-step-card p {
    font-size: .94rem;
    line-height: 1.4;
  }
  .mobile-card-track {
    padding-bottom: 12px;
  }
  .mobile-dots {
    margin-top: 12px;
  }

  .go-transition-story {
    min-height: 122vh;
  }
  .go-transition-sticky {
    background:
      radial-gradient(circle at 50% 48%, rgba(117,58,147,.15), transparent 18rem),
      #0c1115;
  }
  .go-transition-photo {
    inset: 12vh 4vw 9vh 4vw;
    border-radius: 30px;
    clip-path: circle(4% at 50% 50%);
  }
  .go-transition-phone {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
  .transition-phone-shell {
    width: min(58vw, 240px);
    max-height: 64vh;
  }
  .go-do-it .go-title {
    font-size: clamp(4rem, 21vw, 7rem);
    line-height: .86;
    width: 94vw;
  }

  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 118px;
    gap: 12px;
    margin-top: -2vh;
  }
  .mosaic figure {
    border-radius: 20px;
  }
  .mosaic-tile figcaption {
    inset: auto 10px 10px 10px;
    padding: 10px 11px;
    border-radius: 12px;
    font-size: .82rem;
  }
  .tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-2 { grid-column: 1 / 2; grid-row: 3 / 5; }
  .tile-3 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .tile-4 { grid-column: 2 / 3; grid-row: 4 / 6; }
  .tile-5 { grid-column: 1 / 2; grid-row: 5 / 6; }
  .tile-6 { grid-column: 1 / 2; grid-row: 6 / 8; }
  .tile-7 { grid-column: 2 / 3; grid-row: 6 / 8; }
  .tile-8 { grid-column: 1 / 3; grid-row: 8 / 10; }
}

@media (max-width: 520px) {
  .hero .eyebrow {
    font-size: 1.08rem;
  }
  .hero .store-row {
    margin-top: 44px;
  }
  .mobile-step-card img {
    height: min(50svh, 420px);
  }
  .mosaic-placeholder > span {
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .go-transition-photo {
    opacity: 1 !important;
    clip-path: none !important;
  }
  .go-transition-phone {
    opacity: 0 !important;
  }
  .go-do-it .go-title {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   MOCKUP V3 OVERRIDES
   ========================================================= */

:root {
  --max: 1080px;
  --journey-bg: #0b0f12;
}

/* Keep the narrative from Problem through Privacy on one continuous dark canvas. */
.problem,
.problem-bridge-section,
.explore,
.go-do-it,
.privacy {
  background: var(--journey-bg);
}

/* Hero: use the gradient treatment from the supplied Gemini concept. */
.hero h1 span {
  background: linear-gradient(90deg, #EA742D 0%, #EC4899 50%, #753A93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Problem: four cards begin as a tight cluster; JS takes them to their existing
   outer destinations while preserving blur/fade. */
.problem { min-height: 215vh; }
.generic-card {
  transition: opacity .04s linear;
}
.generic-a { left: 35vw; top: 48vh; right: auto; bottom: auto; }
.generic-b { left: 51vw; top: 48vh; right: auto; bottom: auto; }
.generic-c { left: 39vw; top: 63vh; right: auto; bottom: auto; }
.generic-d { left: 55vw; top: 63vh; right: auto; bottom: auto; }
.solution-stack {
  transform: translateY(48vh) scale(.94);
}

/* The bridge is now a discrete breathing beat between Problem and Explore. */
.problem-bridge-section {
  min-height: 46svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 70px 24px;
}
.problem-bridge-section p {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 820;
}
.problem-bridge-section span {
  background: linear-gradient(100deg, #00D4D4 0%, #55DCE7 45%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.problem-bridge, .bridge-line { display: none !important; }

/* Narrower content column on desktop, while keeping the GO DO IT reveal full width. */
.explore-desktop,
.privacy-panel {
  width: min(var(--max), calc(100% - 64px));
}

/* Desktop Explore + handoff are one continuous grid. The phone spans both rows,
   so the same sticky phone can recede into GO DO IT rather than a second phone
   appearing in the next section. */
.explore-desktop {
  grid-template-rows: auto auto;
}
.explore-steps {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 0;
}
.phone-stage {
  grid-column: 2;
  grid-row: 1 / 3;
  z-index: 8;
  align-self: start;
}
.phone-shell {
  transition: opacity .06s linear;
  will-change: transform, opacity;
}
.desktop-go-transition {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100vw;
  justify-self: center;
  min-height: 265vh;
  position: relative;
  z-index: 2;
  margin-top: -2vh;
}

/* The GO DO IT reveal is now deliberately long: the reveal completes around
   halfway through, then the full photo/title linger before the mosaic arrives. */
.go-transition-story {
  position: relative;
}
.go-transition-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--journey-bg);
  --handoff-x: 50vw;
  --handoff-y: 50vh;
}
.go-orb {
  position: absolute;
  z-index: 1;
  left: var(--handoff-x);
  top: var(--handoff-y);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #a85fc1 0%, #753A93 48%, #48205d 100%);
  filter: blur(2px);
  box-shadow: 0 0 90px rgba(117,58,147,.42);
  transform: translate(-50%, -50%) scale(.42);
  transform-origin: center;
  opacity: 1;
}
.go-transition-photo {
  position: absolute;
  inset: 8vh 3vw 8vh 3vw;
  z-index: 2;
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 64px);
  opacity: 0;
  clip-path: circle(0% at var(--handoff-x) var(--handoff-y));
  box-shadow: 0 34px 100px rgba(0,0,0,.44);
}
.go-transition-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,15,18,.36), rgba(11,15,18,.05) 50%, rgba(11,15,18,.28));
  pointer-events: none;
}
.go-transition-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) brightness(.70);
}
.go-transition-sticky .go-title {
  position: relative;
  z-index: 5;
  margin: 0;
  font-size: clamp(4.7rem, 12vw, 10.7rem);
  line-height: .82;
  letter-spacing: -.07em;
  text-align: center;
  opacity: 0;
  transform: scale(.82);
  background: linear-gradient(105deg, #a763c2 0%, var(--purple) 28%, #bd596f 60%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 70px rgba(0,0,0,.35);
}

/* Desktop has already completed the GO transition inside Explore. */
.mobile-go-transition { display: none; }

.go-do-it {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.mosaic {
  width: min(1500px, calc(100% - 5vw));
  margin: 0 auto;
}
.mosaic img {
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .mosaic figure:hover img { transform: scale(1.05); }
}

/* Keep Privacy visually within the same dark journey. */
.privacy { padding-top: clamp(100px, 10vw, 145px); }

@media (max-width: 820px) {
  :root { --max: 100%; }

  .problem { min-height: 190vh; }
  /* Mobile clutter was already working: retain the V2 positions. */
  .generic-a { left: -9vw !important; top: 54% !important; }
  .generic-b { left: auto !important; right: -10vw !important; top: 50% !important; }
  .generic-c { left: 8vw !important; top: auto !important; bottom: 12% !important; }
  .generic-d { left: auto !important; right: 4vw !important; top: auto !important; bottom: 4% !important; }

  .problem-bridge-section {
    min-height: 38svh;
    padding: 54px 22px;
  }
  .problem-bridge-section p {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .explore-desktop { display: none; }
  .explore { padding-bottom: 42px; }

  .mobile-go-handoff {
    display: grid;
    place-items: center;
    gap: 4px;
    text-align: center;
    min-height: 30svh;
    padding: 50px 24px 24px;
    color: var(--muted);
  }
  .mobile-go-handoff span { font-size: 1rem; }
  .mobile-go-handoff strong {
    color: var(--text);
    font-size: clamp(1.9rem, 9vw, 2.7rem);
    letter-spacing: -.04em;
  }

  .desktop-go-transition { display: none; }
  .mobile-go-transition {
    display: block;
    min-height: 205vh;
  }
  .mobile-go-transition .go-transition-photo {
    inset: 9vh 4vw 9vh 4vw;
    border-radius: 30px;
  }
  .mobile-go-transition .go-orb {
    width: 110px;
    height: 110px;
  }
  .go-transition-sticky .go-title {
    font-size: clamp(4rem, 21vw, 7rem);
    line-height: .86;
    width: 94vw;
  }

  .mosaic {
    width: calc(100% - 28px);
    margin-top: 0;
  }
  .explore-desktop, .privacy-panel { width: min(100%, calc(100% - 36px)); }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-go-transition, .mobile-go-transition { min-height: 100svh; }
  .go-orb { opacity: 0 !important; }
  .go-transition-photo { opacity: 1 !important; clip-path: none !important; }
  .go-transition-sticky .go-title { opacity: 1 !important; transform: none !important; }
  .phone-stage .phone-shell { opacity: 0 !important; }
}

/* V3 final background continuity: FAQ/footer return to the same journey dark. */
.faq, .site-footer { background: var(--journey-bg); }


/* =========================================================
   MOCKUP V4 OVERRIDES
   ========================================================= */

/* Desktop hero: keep the second line on one clean line like the supplied reference. */
.hero-inner {
  width: min(1100px, 100%);
}
.hero h1 {
  font-size: clamp(3rem, 7.2vw, 6.65rem);
}
.hero-copy {
  max-width: 760px;
}

@media (min-width: 821px) {
  .hero h1 span {
    display: inline-block;
    white-space: nowrap;
  }
}

/* Real photo set is now in place for GO DO IT. */
.mosaic-photo {
  background: #0b0f12;
}

@media (max-width: 820px) {
  /* Start the orb expansion later, but finish the full reveal sooner and reduce
     the dead space before the photo mosaic begins. */
  .mobile-go-transition {
    min-height: 165vh;
  }

  .mobile-go-transition .go-transition-photo {
    inset: 8vh 4vw 8vh 4vw;
  }

  .mosaic {
    margin-top: -5vh;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.6rem);
  }
  .hero h1 span {
    display: inline;
    white-space: normal;
  }
}


/* =========================================================
   MOCKUP V5 OVERRIDES
   ========================================================= */

/* Desktop hero: keep the second line on one line, but give the descenders and
   trailing period a touch more room so nothing clips. */
.hero-inner {
  width: min(1160px, calc(100% - 40px));
  overflow: visible;
}
@media (min-width: 821px) {
  .hero h1 {
    font-size: clamp(3rem, 7vw, 6.38rem);
    line-height: .97;
  }
  .hero h1 span {
    display: inline-block;
    white-space: nowrap;
    padding: 0 .05em .08em 0;
  }
}

/* Problem solution cards: use the supplied real result-card examples. */
.mini-result {
  width: min(375px, 34vw, 78vw);
  background: transparent;
  padding: 0;
  border-radius: 24px;
  box-shadow: none;
  overflow: visible;
}
.mini-result img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 25px 75px rgba(0,0,0,.4), 0 0 0 1px rgba(0,212,212,.22);
}
.mini-result div { display: none; }
.result-one { transform: translate(-12%, 0) rotate(-2deg); }
.result-two { transform: translate(24%, -40px) rotate(4deg); opacity: .9; }

/* GO DO IT heading: fix the slight crop on the bottom/right edge. */
.go-transition-sticky .go-title {
  display: inline-block;
  padding: .03em .07em .09em .02em;
  line-height: .87;
  overflow: visible;
}

/* Desktop photo mosaic should be pure photography only. */
.mosaic figcaption {
  display: none !important;
}

@media (max-width: 820px) {
  /* Let the orb begin its expansion earlier in the scroll so the fully expanded
     GO DO IT moment is visible before the user scrolls past it. */
  .mini-result {
    width: min(340px, 82vw);
  }
}


/* =========================================================
   MOCKUP V6 PATCH — final text + mobile GO DO IT fixes
   ========================================================= */

/* Give gradient text a little more paint room. The tight line box used for the
   hero was clipping the bottom of descenders such as “y” and, on wrapped mobile
   lines, part of neighbouring glyphs. */
.hero h1 {
  line-height: 1.02;
  padding-bottom: .10em;
  overflow: visible;
}
.hero h1 span {
  line-height: 1.08;
  padding: .01em .07em .14em .02em;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow: visible;
}

/* Mobile sticky reveal fix. .go-do-it used overflow:hidden, which can become the
   containing scroll box for a sticky descendant. Keep horizontal clipping at the
   page root using overflow-x:clip (which does not create a scroll container), and
   let the GO DO IT section remain overflow-visible. */
html, body {
  overflow-x: clip;
}
.go-do-it {
  overflow: visible;
}

@media (max-width: 520px) {
  .hero h1 {
    line-height: 1.03;
    padding-bottom: .10em;
  }
  .hero h1 span {
    line-height: 1.10;
    padding: .01em .05em .13em .02em;
  }
}

/* =========================================================
   MOCKUP V6.1 — MOBILE HANDOFF MICRO-POLISH
   ========================================================= */

@media (max-width: 820px) {
  /* Pull the GO DO IT story upward so its small starting orb enters at the
     bottom of the viewport while “stop planning.” is still visible near the
     top. The orb rise/expansion timings themselves are unchanged from V6. */
  .go-do-it {
    margin-top: -26svh;
    background: transparent;
  }

  /* Keep the overlapping sticky viewport transparent during the handoff so it
     does not paint over the final Explore text. The page underneath is the same
     journey dark (#0b0f12), so the visual background remains unchanged. */
  .mobile-go-transition .go-transition-sticky {
    background: transparent;
  }
}