:root {
  color-scheme: dark;
  --bg: #050914;
  --bg-soft: #08101d;
  --surface: rgba(13, 24, 43, 0.72);
  --surface-strong: #0c1729;
  --surface-soft: rgba(18, 34, 59, 0.72);
  --text: #f8faff;
  --muted: #a4b0c7;
  --muted-2: #73819b;
  --line: rgba(140, 166, 211, 0.17);
  --blue: #4384ff;
  --cyan: #29d6e9;
  --violet: #7668ff;
  --orange: #f3a51d;
  --green: #42dc90;
  --shadow: 0 40px 120px rgba(0, 0, 0, 0.42);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f8fc;
    --bg-soft: #edf2fa;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: #ffffff;
    --surface-soft: rgba(238, 243, 252, 0.86);
    --text: #09142a;
    --muted: #53627a;
    --muted-2: #7a879d;
    --line: rgba(39, 64, 108, 0.13);
    --shadow: 0 40px 110px rgba(38, 65, 110, 0.17);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 7%, rgba(42, 111, 230, .12), transparent 28rem),
    radial-gradient(circle at 91% 22%, rgba(41, 214, 233, .08), transparent 26rem),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
button, a { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.scene { position: relative; width: 100%; }

.page-progress {
  position: fixed;
  z-index: 500;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
}
.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 18px rgba(41, 214, 233, .72);
}

.site-header {
  position: fixed;
  z-index: 300;
  top: 14px;
  left: 50%;
  width: min(1500px, calc(100% - 30px));
  min-height: 64px;
  padding: 9px 11px 9px 17px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 18px;
  transform: translate(-50%, -20px);
  opacity: 0;
  transition:
    transform 1050ms var(--ease-premium) var(--enter-delay, 0ms),
    opacity 900ms ease var(--enter-delay, 0ms),
    background 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}
.site-header.entered { transform: translate(-50%, 0); opacity: 1; }
.site-header.scrolled {
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  border-color: var(--line);
  box-shadow: 0 18px 68px rgba(0, 0, 0, .20);
  backdrop-filter: blur(24px) saturate(130%);
}
.brand { justify-self: start; }
.brand img { width: 140px; height: 38px; object-fit: contain; object-position: left; }
.desktop-nav { display: flex; align-items: center; gap: 34px; color: var(--muted); font-size: 14px; font-weight: 680; }
.desktop-nav a { transition: color 220ms ease; }
.desktop-nav a:hover { color: var(--text); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

.primary-button, .ghost-button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  font-weight: 760;
  transition: transform 230ms ease, box-shadow 230ms ease, border-color 230ms ease, background 230ms ease;
}
.primary-button {
  color: #fff;
  background: linear-gradient(115deg, #3c78ff, #2d9ef4 50%, #29d6e9);
  box-shadow: 0 18px 42px rgba(43, 139, 244, .27), inset 0 1px 0 rgba(255,255,255,.30);
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 24px 52px rgba(43, 139, 244, .35), inset 0 1px 0 rgba(255,255,255,.30); }
.primary-button span { font-size: 20px; }
.ghost-button {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  border: 1px solid var(--line);
}
.ghost-button:hover { transform: translateY(-2px); border-color: rgba(75, 137, 255, .46); background: var(--surface); }
.compact { min-height: 44px; padding: 0 18px; border-radius: 13px; font-size: 14px; }

.entrance {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1100ms ease var(--enter-delay, 0ms),
    transform 1250ms var(--ease-premium) var(--enter-delay, 0ms);
}
.entrance.entered { opacity: 1; transform: translateY(0); }

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 78px, 0) scale(.97);
  filter: blur(5px);
  transition:
    opacity 1150ms ease calc(var(--stagger, 0) * 140ms),
    transform 1250ms var(--ease-premium) calc(var(--stagger, 0) * 140ms),
    filter 900ms ease calc(var(--stagger, 0) * 140ms);
}
.reveal-item.in-view { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }

.hero {
  min-height: 100svh;
  padding: max(138px, 13vh) clamp(24px, 5vw, 86px) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.hero-aurora {
  position: absolute;
  inset: -18% -10% auto 32%;
  height: 75%;
  background:
    radial-gradient(circle at 45% 48%, rgba(45, 132, 255, .20), transparent 29%),
    radial-gradient(circle at 72% 56%, rgba(48, 225, 236, .13), transparent 25%),
    radial-gradient(circle at 48% 83%, rgba(124, 83, 255, .11), transparent 26%);
  filter: blur(22px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, .86fr) minmax(560px, 1.14fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: center;
}
.eyebrow, .section-kicker {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #9bbcff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .025em;
}
.eyebrow {
  padding: 9px 13px;
  border: 1px solid rgba(74, 136, 255, .34);
  border-radius: 12px;
  background: rgba(45, 110, 216, .10);
}
.spark { color: var(--cyan); }
.hero-title {
  margin: 26px 0 24px;
  font-size: clamp(58px, 5.15vw, 92px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 800;
}
.hero-title span { display: block; }
.gradient-text,
.experience-heading h2 span,
.why-copy h2 span,
.reward-heading h2 span,
.final-copy h2 span {
  background: linear-gradient(105deg, #4d7fff, #5a98ff 40%, #28d5ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-description {
  width: min(650px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.72;
}
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-visual { position: relative; perspective: 1200px; will-change: transform; }
.hero-visual picture { position: relative; z-index: 2; }
.hero-visual img {
  width: 100%;
  border-radius: 38px;
  transform: perspective(1200px) rotateY(-2.4deg) rotateX(1.1deg);
  filter: drop-shadow(0 44px 64px rgba(0, 0, 0, .43));
}
.device-halo { position: absolute; inset: 15% 8% 2%; z-index: 0; background: radial-gradient(circle, rgba(46, 126, 255, .27), transparent 64%); filter: blur(36px); }
.floating-chip {
  position: absolute;
  z-index: 3;
  padding: 11px 14px;
  border: 1px solid rgba(127, 159, 218, .22);
  border-radius: 13px;
  color: #dbe7ff;
  background: rgba(7, 15, 29, .74);
  box-shadow: 0 16px 48px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
  font-size: 12px;
  font-weight: 720;
}
.chip-a { left: 2%; bottom: 18%; animation: floatA 5s ease-in-out infinite; }
.chip-b { right: 5%; top: 18%; animation: floatB 5.7s ease-in-out infinite; }
.chip-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }
.chip-dot.warm { background: var(--orange); box-shadow: 0 0 11px var(--orange); }

.availability-wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: clamp(34px, 5vh, 62px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.25fr;
  gap: 14px;
}
.availability-title, .store-card {
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,.15);
  backdrop-filter: blur(18px);
}
.availability-title { display: flex; align-items: center; gap: 13px; }
.availability-title div { display: grid; }
.availability-title small, .store-card small { color: var(--muted-2); font-size: 9px; letter-spacing: .13em; font-weight: 820; }
.availability-title strong { margin-top: 3px; font-size: 15px; }
.availability-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 8px rgba(41,214,233,.10), 0 0 24px rgba(41,214,233,.55); }
.store-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; }
.store-card > div:nth-child(2) { display: grid; }
.store-card strong { font-size: 18px; line-height: 1.2; }
.store-card span { color: var(--muted); font-size: 11px; }
.store-card b { padding: 7px 9px; border: 1px solid rgba(67,132,255,.28); border-radius: 999px; color: #8fb5ff; background: rgba(50,112,221,.10); font-size: 10px; white-space: nowrap; }
.store-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.03); }
.play-icon { position: relative; overflow: hidden; }
.play-icon span { position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid var(--green); transform: translateX(2px); }
.play-icon span:nth-child(2) { border-left-color: var(--cyan); transform: translate(1px, -4px) scale(.68); opacity: .8; }
.play-icon span:nth-child(3) { border-left-color: var(--orange); transform: translate(1px, 4px) scale(.68); opacity: .8; }
.apple-icon { font-size: 20px; color: var(--text); }
.hero-foot {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  margin: 30px auto 0;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }
.hero-foot a { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.hero-foot a b { width: 24px; height: 38px; border: 1px solid var(--line); border-radius: 99px; position: relative; }
.hero-foot a b::after { content:""; position:absolute; top:7px; left:50%; width:3px; height:8px; border-radius:9px; background:var(--cyan); transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite; }

.experience-track { min-height: 440vh; }
.experience-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding: 118px clamp(24px, 5vw, 86px) 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 50%, rgba(53, 121, 255, .10), transparent 32rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), var(--bg));
}
.experience-heading { width: min(1480px, 100%); margin: 0 auto 42px; }
.experience-heading h2,
.why-copy h2,
.reward-heading h2,
.final-copy h2 {
  margin: 13px 0 0;
  font-size: clamp(46px, 4.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 790;
}
.experience-heading p, .reward-heading > p { width: min(650px, 100%); margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.experience-layout { width: min(1480px, 100%); margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: clamp(38px, 5vw, 78px); align-items: center; }
.experience-tabs { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.experience-tabs li {
  padding: 17px 0 17px 18px;
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  opacity: .28;
  transition: opacity 550ms ease, border-color 550ms ease, transform 700ms var(--ease-premium);
}
.experience-tabs li span { color: var(--muted-2); font-size: 11px; }
.experience-tabs li b { font-size: 17px; }
.experience-tabs li.active { opacity:1; border-color:var(--cyan); transform:translateX(9px); }
.experience-stage { position:relative; min-height:570px; }
.stage-card {
  position:absolute;
  inset:0;
  padding:clamp(32px,4vw,60px);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(34px,5vw,76px);
  align-items:center;
  border:1px solid var(--line);
  border-radius:36px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 96%,transparent),color-mix(in srgb,var(--surface-soft) 76%,transparent));
  box-shadow:var(--shadow);
  opacity:0;
  transform:translate3d(0,86px,0) scale(.935);
  filter:blur(7px);
  pointer-events:none;
  transition:opacity 800ms ease,transform 1050ms var(--ease-premium),filter 750ms ease;
  overflow:hidden;
}
.stage-card::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; right:-170px; top:-190px; background:radial-gradient(circle,rgba(55,139,255,.19),transparent 66%); }
.stage-card.active { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); pointer-events:auto; }
.stage-number { color:#91b6ff; font-size:11px; letter-spacing:.14em; font-weight:820; }
.stage-copy h3 { margin:20px 0 17px; font-size:clamp(34px,3vw,53px); line-height:1.05; letter-spacing:-.05em; }
.stage-copy p { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.stage-tags { margin-top:27px; display:flex; flex-wrap:wrap; gap:8px; }
.stage-tags span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.025); font-size:11px; }
.product-ui { position:relative; min-height:390px; border:1px solid rgba(119,157,221,.18); border-radius:27px; background:rgba(4,10,22,.66); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 58px rgba(0,0,0,.27); overflow:hidden; }
.ui-heading { padding:22px 22px 16px; display:flex; justify-content:space-between; color:#dfe8fb; font-size:13px; }
.ui-heading b { color:#8fb6ff; font-size:11px; }
.habit-row { margin:0 18px 10px; padding:15px 16px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; border:1px solid rgba(130,158,210,.10); border-radius:14px; color:#c5d1e7; background:rgba(255,255,255,.025); }
.habit-row i { width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(143,181,255,.25); border-radius:50%; color:#8fb5ff; font-style:normal; }
.habit-row em { color:#8290a9; font-size:10px; font-style:normal; }
.habit-row.done { background:rgba(66,220,144,.055); }
.habit-row.done i { color:var(--green); border-color:rgba(66,220,144,.35); }
.habit-row.partial i { color:var(--orange); border-color:rgba(243,165,29,.35); }
.progress-track { height:7px; margin:18px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; }
.progress-track span { display:block; width:72%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.focus-ui { display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,rgba(40,126,244,.14),transparent 43%),rgba(4,10,22,.72); }
.focus-rings i { position:absolute; left:50%; top:50%; border:1px solid rgba(86,147,255,.16); border-radius:50%; transform:translate(-50%,-50%); }
.focus-rings i:nth-child(1){width:250px;height:250px}
.focus-rings i:nth-child(2){width:330px;height:330px}
.focus-rings i:nth-child(3){width:430px;height:430px}
.focus-center { position:relative; z-index:2; width:220px; height:220px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle,rgba(33,89,173,.46),rgba(8,20,39,.96)); box-shadow:0 0 70px rgba(40,133,255,.22),inset 0 0 40px rgba(70,143,255,.16); }
.focus-center small { color:#89b1ff; letter-spacing:.15em; font-size:9px; }
.focus-center strong { margin:9px 0 2px; font-size:48px; letter-spacing:-.05em; }
.focus-center span { color:#8d9ab1; font-size:11px; }
.sound-pill { position:absolute; padding:10px 13px; border:1px solid rgba(115,153,220,.18); border-radius:999px; color:#bbc9e2; background:rgba(9,20,38,.82); font-size:11px; }
.sound-a { left:7%; top:20%; }
.sound-b { right:7%; bottom:18%; }
.progress-ui { padding:26px; }
.analytics-top { display:flex; justify-content:space-between; color:#dbe6fa; }
.analytics-top b { font-size:30px; color:#77a7ff; }
.chart-bars { position:absolute; inset:auto 26px 44px; height:190px; display:flex; align-items:flex-end; gap:13px; }
.chart-bars i { flex:1; height:var(--value); min-width:10px; border-radius:9px 9px 2px 2px; background:linear-gradient(180deg,rgba(47,213,233,.92),rgba(63,120,255,.24)); transform-origin:bottom; animation:barGrow 1.5s var(--ease-premium) both; }
.progress-ui svg { position:absolute; left:24px; right:24px; bottom:34px; width:calc(100% - 48px); height:150px; overflow:visible; }
.chart-line,.chart-glow { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.chart-line { stroke:#56a2ff; stroke-width:4; }
.chart-glow { stroke:rgba(46,213,233,.23); stroke-width:16; filter:blur(8px); }
.space-ui { overflow:visible; background:radial-gradient(circle at 70% 55%,rgba(122,104,255,.13),transparent 43%),rgba(4,10,22,.70); }
.journal-note { position:absolute; width:58%; min-height:210px; padding:24px; border:1px solid rgba(140,165,208,.16); border-radius:22px; background:linear-gradient(160deg,#111e35,#0b1527); box-shadow:0 24px 55px rgba(0,0,0,.26); }
.journal-note small { color:#7d91b3; font-size:9px; letter-spacing:.12em; }
.journal-note b { display:block; margin:13px 0 8px; font-size:18px; }
.journal-note p { margin:0; color:#97a6bf; font-size:12px; line-height:1.65; }
.note-back { left:9%; top:12%; transform:rotate(-5deg); opacity:.65; }
.note-front { left:22%; top:25%; transform:rotate(3deg); }
.goal-orb { position:absolute; right:8%; bottom:9%; width:132px; height:132px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle,rgba(83,122,255,.34),rgba(11,22,42,.96)); box-shadow:0 0 55px rgba(71,121,255,.22); }
.goal-orb strong { font-size:30px; }
.goal-orb span { color:#99a8c0; font-size:10px; }

.why-scene {
  min-height:100svh;
  padding:130px clamp(24px,7vw,118px);
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:clamp(52px,7vw,110px);
  align-items:center;
  overflow:hidden;
}
.why-copy h2 { margin-top:15px; }
.why-intro { margin:22px 0 0; color:var(--muted); font-size:17px; line-height:1.75; }
.why-list { list-style:none; padding:0; margin:30px 0 0; display:grid; gap:11px; }
.why-list li { padding:14px 0; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--line); color:var(--muted); }
.why-list i { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(67,132,255,.11); color:#7daaff; font-style:normal; }
.why-visual { position:relative; }
.why-visual img { position:relative; z-index:2; width:100%; border-radius:38px; filter:drop-shadow(0 38px 66px rgba(0,0,0,.36)); }
.visual-halo { position:absolute; inset:15% 8%; background:radial-gradient(circle,rgba(46,127,255,.22),transparent 67%); filter:blur(38px); }

.rewards-scene {
  min-height:100svh;
  padding:132px clamp(24px,7vw,118px);
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(44px,6vw,92px);
  align-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 76% 50%,rgba(85,107,255,.10),transparent 34rem);
}
.reward-heading > p { line-height:1.75; }
.points-orbit { position:relative; min-height:480px; display:grid; place-items:center; }
.points-core { position:relative; z-index:3; width:240px; height:240px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at 40% 30%,rgba(80,146,255,.45),rgba(10,22,43,.97) 62%); border:1px solid rgba(121,159,225,.23); box-shadow:0 0 110px rgba(50,117,255,.23),inset 0 0 48px rgba(93,146,255,.12); }
.points-core small { color:#9ab9f3; font-size:10px; letter-spacing:.15em; }
.points-core strong { margin:8px 0 2px; font-size:58px; letter-spacing:-.06em; }
.points-core span { color:#93a2bc; font-size:11px; }
.orbit { position:absolute; border:1px solid rgba(92,143,239,.16); border-radius:50%; }
.orbit-one { width:360px; height:360px; animation:spin 18s linear infinite; }
.orbit-two { width:460px; height:460px; animation:spinReverse 25s linear infinite; }
.achievement { position:absolute; z-index:4; padding:11px 14px; border:1px solid rgba(119,157,221,.20); border-radius:14px; color:#c7d5ee; background:rgba(8,18,35,.78); box-shadow:0 18px 45px rgba(0,0,0,.20); backdrop-filter:blur(16px); font-size:11px; }
.achievement span { color:var(--cyan); margin-right:7px; }
.achievement-a { left:2%; top:19%; }
.achievement-b { right:0; top:30%; }
.achievement-c { right:11%; bottom:13%; }
.reward-grid { grid-column:1 / -1; margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.reward-card { min-height:260px; padding:30px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 94%,transparent),color-mix(in srgb,var(--surface-soft) 72%,transparent)); box-shadow:0 26px 76px rgba(0,0,0,.18); }
.reward-card.featured { transform-origin:center; background:linear-gradient(145deg,rgba(31,62,112,.92),rgba(14,31,58,.92)); border-color:rgba(76,139,255,.30); }
.reward-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:#8db4ff; background:rgba(66,131,255,.10); font-size:24px; }
.reward-card small { display:block; margin-top:24px; color:#7e9fd8; font-size:9px; letter-spacing:.14em; font-weight:820; }
.reward-card h3 { margin:10px 0 11px; font-size:24px; line-height:1.16; letter-spacing:-.035em; }
.reward-card p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
.reward-note { grid-column:1/-1; margin:4px auto 0; color:#83adff; text-align:center; }

.final-cta {
  min-height:88svh;
  padding:130px 24px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.final-copy { position:relative; z-index:2; max-width:900px; text-align:center; }
.final-copy .section-kicker { margin-inline:auto; }
.final-copy p { max-width:630px; margin:22px auto 32px; color:var(--muted); font-size:17px; }
.final-copy .primary-button { min-width:220px; }
.cta-glow { position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(20px); }
.glow-left { left:-220px; background:radial-gradient(circle,rgba(55,119,255,.18),transparent 67%); }
.glow-right { right:-220px; background:radial-gradient(circle,rgba(41,214,233,.13),transparent 67%); }

.mobile-footer-banner {
  width:min(1320px,calc(100% - 48px));
  margin:0 auto 94px;
  padding:36px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  border:1px solid rgba(70,136,255,.24);
  border-radius:28px;
  background:linear-gradient(120deg,rgba(45,108,219,.13),rgba(41,214,233,.07));
}
.mobile-footer-banner small { color:#8fb5ff; letter-spacing:.14em; font-size:9px; font-weight:820; }
.mobile-footer-banner h2 { margin:7px 0 4px; font-size:30px; letter-spacing:-.04em; }
.mobile-footer-banner p { margin:0; color:var(--muted); }
.footer-store-row { display:flex; gap:12px; flex-shrink:0; }
.mini-store { min-width:150px; padding:13px 15px; display:grid; border:1px solid var(--line); border-radius:15px; background:rgba(8,18,35,.48); }
.mini-store b { font-size:14px; }
.mini-store span { color:#8fb5ff; font-size:10px; }

.site-footer {
  padding:56px clamp(24px,5vw,86px) 28px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-soft) 70%,transparent);
}
.footer-grid { width:min(1480px,100%); margin:0 auto; display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:44px; }
.footer-brand img { width:142px; height:40px; object-fit:contain; object-position:left; }
.footer-brand p { margin:13px 0 0; color:var(--muted); font-size:12px; }
.footer-column { display:grid; align-content:start; gap:9px; }
.footer-column h3 { margin:0 0 4px; font-size:15px; }
.footer-column a,.footer-column span,.footer-column button { width:max-content; padding:0; color:var(--muted); background:none; border:0; font-size:12px; cursor:pointer; }
.footer-column a:hover,.footer-column button:hover { color:var(--text); }
.footer-bottom { width:min(1480px,100%); margin:35px auto 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted-2); text-align:center; font-size:11px; }

@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }
@keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,15px)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes spinReverse { to{transform:rotate(-360deg)} }
@keyframes barGrow { from{transform:scaleY(.08);opacity:.15} to{transform:scaleY(1);opacity:1} }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:780px; }
  .hero-visual { max-width:900px; margin:12px auto 0; }
  .availability-wrap { grid-template-columns:1fr 1fr; }
  .availability-title { grid-column:1/-1; }
  .experience-layout { grid-template-columns:1fr; }
  .experience-tabs { grid-template-columns:repeat(4,1fr); }
  .experience-tabs li { padding:12px; border-left:0; border-bottom:1px solid var(--line); grid-template-columns:28px 1fr; }
  .experience-tabs li.active { transform:translateY(-4px); border-color:var(--cyan); }
  .experience-stage { min-height:610px; }
  .why-scene,.rewards-scene { grid-template-columns:1fr; }
  .why-copy,.reward-heading { max-width:780px; }
  .why-visual { max-width:960px; margin:0 auto; }
  .points-orbit { min-height:430px; }
  .footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns:1fr auto; top:8px; width:calc(100% - 16px); }
  .desktop-nav { display:none; }
  .header-actions .ghost-button { display:none; }
  .brand img { width:126px; }
  .hero { padding:116px 18px 38px; min-height:auto; }
  .hero-grid { gap:34px; }
  .hero-title { font-size:clamp(44px,13vw,66px); }
  .hero-description { font-size:16px; }
  .hero-visual img { border-radius:24px; transform:none; }
  .floating-chip { display:none; }
  .availability-wrap { grid-template-columns:1fr; }
  .availability-title { grid-column:auto; }
  .store-card { grid-template-columns:40px 1fr; }
  .store-card b { grid-column:2; justify-self:start; }
  .hero-foot { flex-wrap:wrap; }
  .hero-foot a { width:100%; margin-left:0; margin-top:8px; }
  .experience-track { min-height:400vh; }
  .experience-sticky { padding:105px 18px 30px; }
  .experience-heading { margin-bottom:24px; }
  .experience-heading h2,.why-copy h2,.reward-heading h2,.final-copy h2 { font-size:clamp(40px,12vw,58px); }
  .experience-heading p { font-size:14px; }
  .experience-tabs { grid-template-columns:repeat(4,minmax(64px,1fr)); gap:3px; }
  .experience-tabs li { padding:9px 3px; display:grid; justify-items:center; text-align:center; gap:2px; }
  .experience-tabs li span { font-size:8px; }
  .experience-tabs li b { font-size:11px; }
  .experience-stage { min-height:680px; }
  .stage-card { padding:24px; grid-template-columns:1fr; gap:24px; border-radius:27px; }
  .stage-copy h3 { font-size:32px; }
  .stage-copy p { font-size:14px; }
  .product-ui { min-height:330px; }
  .habit-row { margin-inline:12px; padding:12px; font-size:12px; }
  .focus-rings i:nth-child(1){width:210px;height:210px}
  .focus-rings i:nth-child(2){width:270px;height:270px}
  .focus-rings i:nth-child(3){width:330px;height:330px}
  .focus-center { width:185px;height:185px; }
  .focus-center strong { font-size:40px; }
  .sound-pill { display:none; }
  .journal-note { width:68%; }
  .note-front { left:15%; }
  .goal-orb { width:110px;height:110px; }
  .why-scene,.rewards-scene { padding:110px 20px; }
  .why-list li { font-size:14px; }
  .points-orbit { min-height:360px; transform:scale(.86); margin:-30px; }
  .reward-grid { grid-template-columns:1fr; }
  .reward-card { min-height:auto; }
  .mobile-footer-banner { width:calc(100% - 32px); margin-bottom:72px; padding:28px 22px; flex-direction:column; align-items:flex-start; }
  .footer-store-row { width:100%; }
  .mini-store { flex:1; min-width:0; }
  .site-footer { padding-inline:24px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:34px 24px; }
  .footer-brand { grid-column:1/-1; }
}

@media (max-width: 430px) {
  .header-actions .primary-button { padding-inline:14px; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-actions .primary-button,.hero-actions .ghost-button { padding-inline:12px; }
  .availability-title,.store-card { border-radius:17px; }
  .experience-stage { min-height:720px; }
  .stage-card { padding:21px; }
  .product-ui { min-height:310px; }
  .ui-heading { padding:17px 14px 13px; }
  .habit-row { grid-template-columns:28px 1fr auto; gap:7px; }
  .habit-row em { display:none; }
  .journal-note { min-height:190px; }
  .footer-store-row { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .entrance,.reveal-item,.stage-card { opacity:1 !important; transform:none !important; filter:none !important; }
}

/* V3 premium corrections */
.site-header {
  top: 0;
  width: 100%;
  min-height: 78px;
  padding: 12px clamp(24px, 3vw, 58px);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 9, 20, .94);
  transform: translate(-50%, -12px);
}
.site-header.entered { transform: translate(-50%, 0); }
.site-header.scrolled {
  top: 14px;
  width: min(1500px, calc(100% - 30px));
  min-height: 64px;
  padding: 9px 11px 9px 17px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
}
.brand { display:flex; align-items:center; height:44px; overflow:hidden; }
.brand img { width: 152px; height: auto; max-height: 38px; object-fit: contain; object-position:left center; display:block; }

.hero-grid { grid-template-columns: minmax(560px, 1fr) minmax(600px, 1.12fr); gap: clamp(52px, 5vw, 92px); }
.hero-title { font-size: clamp(64px, 4.85vw, 86px); line-height: .98; letter-spacing: -.055em; }
.hero-title span { white-space: nowrap; }
.hero-copy { min-width:0; }
.hero-visual { isolation:isolate; }
.hero-visual::after {
  content:""; position:absolute; inset:-4%; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 48%, var(--bg) 82%);
}
.hero-visual picture { display:block; mask-image:radial-gradient(ellipse 82% 76% at 50% 50%, #000 54%, transparent 100%); -webkit-mask-image:radial-gradient(ellipse 82% 76% at 50% 50%, #000 54%, transparent 100%); }
.hero-visual img { border-radius: 30px; filter: drop-shadow(0 38px 78px rgba(0,0,0,.34)) saturate(1.05); }
.hero-actions .primary-button, .final-copy .primary-button, .header-actions .primary-button {
  animation: buttonBreathe 3.2s ease-in-out infinite;
}
.primary-button:hover { animation-play-state:paused; }
@keyframes buttonBreathe {
  0%,100% { transform:translateY(0) scale(1); box-shadow:0 18px 42px rgba(43,139,244,.25), inset 0 1px 0 rgba(255,255,255,.3); }
  50% { transform:translateY(-2px) scale(1.018); box-shadow:0 26px 64px rgba(43,139,244,.42), 0 0 26px rgba(41,214,233,.14), inset 0 1px 0 rgba(255,255,255,.3); }
}

.points-core::after { content:"Redeemable"; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); padding:7px 13px; border-radius:999px; border:1px solid rgba(92,143,239,.28); background:rgba(8,18,35,.88); color:#9fc0ff; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.achievement-d { left:9%; bottom:11%; }
.achievement-e { right:5%; top:9%; }
.reward-card:nth-child(3) { background:linear-gradient(145deg,rgba(21,48,84,.95),rgba(8,22,42,.95)); border-color:rgba(41,214,233,.24); }
.reward-card:nth-child(3) .reward-icon { color:#68e4f0; background:rgba(41,214,233,.10); }
.reward-card { transition:transform .5s var(--ease-premium), border-color .4s ease, box-shadow .5s ease; }
.reward-card:hover { transform:translateY(-10px); border-color:rgba(80,145,255,.42); box-shadow:0 34px 90px rgba(0,0,0,.28), 0 0 34px rgba(47,120,255,.08); }
.reward-note { padding:13px 18px; border:1px solid rgba(75,137,255,.18); border-radius:999px; background:rgba(32,86,170,.08); }

@media (max-width: 1240px) {
  .hero-grid { grid-template-columns: minmax(470px, .95fr) minmax(500px, 1.05fr); }
  .hero-title { font-size:clamp(58px,5.4vw,74px); }
}
@media (max-width: 1120px) {
  .hero-title span { white-space:normal; }
  .site-header { padding-inline:22px; }
}
@media (max-width: 760px) {
  .site-header { top:0; width:100%; border-radius:0; }
  .site-header.scrolled { top:8px; width:calc(100% - 16px); border-radius:16px; }
  .brand img { width:132px; max-height:34px; }
  .hero-title span { white-space:normal; }
}


/* V4 final light-mode and brand-lockup polish */
.brand {
  height: 48px;
  overflow: visible;
}
.brand img {
  width: 184px;
  height: 46px;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.footer-brand img {
  width: 174px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 760px) {
  .brand img {
    width: 158px;
    height: 40px;
    max-height: none;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(circle at 12% 4%, rgba(66, 126, 255, .11), transparent 30rem),
      radial-gradient(circle at 88% 24%, rgba(41, 214, 233, .09), transparent 27rem),
      linear-gradient(180deg, #f9fbff 0%, #f3f7fd 48%, #eef4fb 100%);
  }

  .site-header {
    background: rgba(249, 251, 255, .94);
    border-bottom-color: rgba(39, 64, 108, .12);
    box-shadow: 0 10px 34px rgba(38, 65, 110, .06);
  }
  .site-header.scrolled {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(49, 81, 135, .14);
    box-shadow: 0 20px 60px rgba(41, 68, 111, .14);
  }

  .eyebrow {
    background: rgba(57, 119, 235, .07);
    border-color: rgba(57, 119, 235, .24);
  }

  .hero-visual::after {
    background: radial-gradient(ellipse at center, transparent 49%, #f7faff 84%);
  }
  .hero-visual img {
    filter: drop-shadow(0 38px 64px rgba(44, 70, 112, .20)) saturate(1.02);
  }
  .floating-chip {
    color: #173057;
    background: rgba(255, 255, 255, .86);
    border-color: rgba(57, 91, 148, .16);
    box-shadow: 0 18px 44px rgba(38, 65, 110, .14);
  }

  .experience-sticky {
    background:
      radial-gradient(circle at 84% 50%, rgba(53, 121, 255, .10), transparent 32rem),
      linear-gradient(180deg, rgba(249, 251, 255, .98), #f3f7fd);
  }
  .stage-card {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 244, 255, .92));
    border-color: rgba(49, 81, 135, .13);
    box-shadow: 0 34px 90px rgba(40, 67, 110, .14);
  }
  .stage-card::before {
    background: radial-gradient(circle, rgba(70, 143, 255, .15), transparent 67%);
  }
  .stage-tags span {
    color: #52647f;
    background: rgba(255, 255, 255, .62);
    border-color: rgba(49, 81, 135, .13);
  }

  .product-ui {
    background: linear-gradient(150deg, #f7faff, #eaf1fb);
    border-color: rgba(51, 84, 139, .15);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .82),
      0 24px 54px rgba(39, 66, 108, .15);
  }
  .ui-heading,
  .analytics-top {
    color: #15233b;
  }
  .habit-row {
    color: #243551;
    background: rgba(255, 255, 255, .66);
    border-color: rgba(63, 94, 145, .10);
  }
  .habit-row em,
  .focus-center span,
  .journal-note p,
  .goal-orb span {
    color: #64748d;
  }
  .progress-track {
    background: rgba(47, 73, 117, .08);
  }

  .focus-ui {
    background:
      radial-gradient(circle at 50% 50%, rgba(50, 126, 244, .16), transparent 45%),
      linear-gradient(150deg, #edf4ff, #dfe9f8);
  }
  .focus-rings i {
    border-color: rgba(58, 117, 218, .15);
  }
  .focus-center {
    color: #f8fbff;
    background: radial-gradient(circle at 40% 30%, #345f9f, #102342 72%);
    box-shadow:
      0 24px 70px rgba(35, 82, 151, .24),
      inset 0 0 42px rgba(113, 169, 255, .18);
  }
  .sound-pill {
    color: #eaf2ff;
    background: rgba(20, 39, 70, .88);
    border-color: rgba(103, 145, 213, .22);
  }

  .progress-ui {
    background: linear-gradient(150deg, #f7faff, #e9f1fc);
  }
  .space-ui {
    background:
      radial-gradient(circle at 70% 55%, rgba(104, 91, 255, .13), transparent 44%),
      linear-gradient(150deg, #f6f9ff, #e8effa);
  }
  .journal-note {
    color: #f5f8ff;
    background: linear-gradient(160deg, #22365a, #10213d);
    border-color: rgba(100, 143, 211, .25);
    box-shadow: 0 25px 58px rgba(42, 67, 108, .20);
  }
  .goal-orb {
    color: #f8fbff;
    background: radial-gradient(circle at 38% 28%, #547bce, #17294a 72%);
    box-shadow: 0 20px 56px rgba(54, 94, 164, .24);
  }

  .why-visual img {
    filter: drop-shadow(0 34px 58px rgba(42, 67, 108, .18));
  }

  .rewards-scene {
    background:
      radial-gradient(circle at 76% 45%, rgba(75, 102, 255, .12), transparent 35rem),
      linear-gradient(180deg, #f7faff, #f1f6fd);
  }
  .points-core {
    color: #f8fbff;
    background: radial-gradient(circle at 38% 27%, #4774b9, #10213e 70%);
    border-color: rgba(62, 105, 174, .24);
    box-shadow:
      0 30px 90px rgba(49, 89, 159, .25),
      inset 0 0 48px rgba(122, 174, 255, .16);
  }
  .points-core::after {
    color: #dfeaff;
    background: rgba(20, 40, 72, .94);
    border-color: rgba(103, 151, 225, .28);
  }
  .orbit {
    border-color: rgba(67, 117, 207, .16);
  }
  .achievement {
    color: #eaf2ff;
    background: rgba(28, 48, 80, .88);
    border-color: rgba(99, 139, 204, .21);
    box-shadow: 0 18px 44px rgba(36, 61, 100, .18);
  }

  .reward-card,
  .reward-card.featured,
  .reward-card:nth-child(3) {
    color: #111e34;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(229, 238, 251, .94));
    border-color: rgba(51, 84, 139, .14);
    box-shadow: 0 26px 70px rgba(39, 65, 106, .13);
  }
  .reward-card.featured {
    background:
      linear-gradient(145deg, rgba(223, 235, 255, .98), rgba(206, 223, 249, .96));
    border-color: rgba(65, 119, 213, .28);
  }
  .reward-card:nth-child(3) {
    background:
      linear-gradient(145deg, rgba(227, 244, 250, .98), rgba(211, 232, 244, .96));
    border-color: rgba(37, 153, 174, .23);
  }
  .reward-card p {
    color: #56677f;
  }
  .reward-card small {
    color: #5e80bd;
  }
  .reward-card:hover {
    box-shadow:
      0 34px 84px rgba(38, 68, 112, .18),
      0 0 28px rgba(47, 120, 255, .08);
  }
  .reward-note {
    color: #386bb8;
    background: rgba(69, 125, 221, .07);
    border-color: rgba(75, 137, 255, .16);
  }

  .mobile-footer-banner {
    background:
      linear-gradient(120deg, rgba(214, 228, 252, .92), rgba(220, 244, 248, .86));
    border-color: rgba(63, 119, 214, .22);
    box-shadow: 0 24px 72px rgba(39, 68, 112, .10);
  }
  .mini-store {
    color: #f8fbff;
    background: linear-gradient(145deg, #263b5d, #172942);
    border-color: rgba(82, 122, 184, .28);
    box-shadow: 0 12px 30px rgba(39, 64, 103, .14);
  }
  .mini-store span {
    color: #9fc3ff;
  }

  .site-footer {
    background: linear-gradient(180deg, #edf3fb, #e8f0fa);
  }
}


/* V5 approved final correction pass */
.brand img {
  width: 202px;
  height: 48px;
}
.footer-brand img {
  width: 190px;
  height: 46px;
}

.hero-visual picture {
  mask-image: radial-gradient(ellipse 98% 94% at 50% 50%, #000 76%, rgba(0,0,0,.96) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 98% 94% at 50% 50%, #000 76%, rgba(0,0,0,.96) 88%, transparent 100%);
}
.hero-visual::after {
  inset: -1%;
  background: radial-gradient(ellipse at center, transparent 72%, color-mix(in srgb, var(--bg) 82%, transparent) 98%);
}
.hero-visual img {
  opacity: 1;
  filter: drop-shadow(0 30px 58px rgba(0,0,0,.24)) saturate(1.08) contrast(1.04);
  transform: translateZ(0);
  image-rendering: auto;
}

.focus-ui,
.space-ui {
  background:
    linear-gradient(rgba(90, 147, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 147, 255, .075) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(45, 126, 255, .20), transparent 47%),
    linear-gradient(145deg, #0a1830, #071225 58%, #0b1d38);
  background-size: 34px 34px, 34px 34px, auto, auto;
  border-color: rgba(83, 137, 230, .24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 28px 66px rgba(0, 15, 38, .28);
}

.focus-rings i {
  border-color: rgba(99, 155, 255, .18);
}
.focus-center {
  background: radial-gradient(circle at 38% 28%, #315eaa, #11294e 58%, #08162c);
  box-shadow:
    0 24px 72px rgba(7, 25, 55, .45),
    inset 0 0 46px rgba(101, 163, 255, .16);
}
.sound-pill {
  background: rgba(18, 42, 79, .92);
  border-color: rgba(102, 158, 255, .25);
  box-shadow: 0 12px 30px rgba(4, 18, 42, .28);
}

.journal-note {
  background:
    linear-gradient(rgba(111, 163, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 163, 255, .05) 1px, transparent 1px),
    linear-gradient(155deg, #213d70, #0d203e);
  background-size: 24px 24px, 24px 24px, auto;
}
.goal-orb {
  background: radial-gradient(circle at 35% 26%, #4b79cb, #17335f 57%, #09172e);
}

.rewards-orbit {
  position: relative;
}
.rewards-orbit::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  pointer-events: none;
  background:
    linear-gradient(rgba(77, 139, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 139, 255, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, #000 30%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 74%);
}

.mini-store {
  min-width: 176px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f8fbff;
  background: linear-gradient(145deg, #243d67, #122744);
  border-color: rgba(96, 147, 227, .28);
  box-shadow: 0 16px 34px rgba(15, 39, 73, .20);
}
.store-icon {
  width: 27px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.store-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.apple-icon {
  color: #fff;
}
.store-copy {
  display: grid;
  gap: 2px;
}
.store-copy b {
  font-size: 14px;
  line-height: 1.1;
}
.store-copy small {
  color: #a9c8ff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .brand img {
    width: 172px;
    height: 42px;
  }
  .mini-store {
    min-width: 0;
  }
}

@media (prefers-color-scheme: light) {
  .hero-visual::after {
    background: radial-gradient(ellipse at center, transparent 74%, rgba(247,250,255,.82) 98%);
  }
  .hero-visual img {
    filter: drop-shadow(0 28px 52px rgba(39, 67, 111, .18)) saturate(1.07) contrast(1.035);
  }

  .focus-ui,
  .space-ui {
    background:
      linear-gradient(rgba(91, 148, 255, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 148, 255, .07) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(56, 132, 255, .18), transparent 47%),
      linear-gradient(145deg, #eaf2ff, #dce9fb 60%, #e8f2ff);
    background-size: 34px 34px, 34px 34px, auto, auto;
    border-color: rgba(67, 121, 211, .20);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 28px 64px rgba(41, 70, 116, .14);
  }

  .focus-rings i {
    border-color: rgba(66, 122, 218, .16);
  }
  .focus-center {
    background: radial-gradient(circle at 38% 28%, #3768b4, #173762 59%, #0b1c36);
  }
  .sound-pill {
    background: rgba(24, 53, 94, .92);
  }

  .journal-note {
    background:
      linear-gradient(rgba(121, 169, 255, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(121, 169, 255, .055) 1px, transparent 1px),
      linear-gradient(155deg, #294977, #132d52);
    background-size: 24px 24px, 24px 24px, auto;
  }

  .rewards-orbit::before {
    background:
      linear-gradient(rgba(66, 123, 219, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(66, 123, 219, .055) 1px, transparent 1px);
    background-size: 42px 42px;
  }

  .mini-store {
    color: #f8fbff;
    background: linear-gradient(145deg, #27446f, #163052);
    border-color: rgba(78, 126, 199, .28);
  }
}


/* V6 final correction: softer premium texture + properly fitted store icons */

/* Remove the heavy graph-paper effect */
.focus-ui,
.space-ui {
  background:
    radial-gradient(circle at 50% 48%, rgba(55, 130, 255, .18), transparent 45%),
    linear-gradient(145deg, #0a1830, #071225 58%, #0b1d38);
  background-size: auto;
}

/* Keep only a very subtle premium grid inside the visual surface */
.focus-ui::after,
.space-ui::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(rgba(104, 160, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 160, 255, .028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.22));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.22));
}

.rewards-orbit::before {
  opacity: .34;
  background-size: 58px 58px;
}

/* Store buttons: balanced icon, text and padding */
.mini-store {
  min-width: 170px;
  min-height: 58px;
  padding: 10px 16px;
  gap: 11px;
  border-radius: 16px;
  align-items: center;
}

.store-icon {
  width: 23px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
}

.store-icon svg {
  width: 23px;
  height: 25px;
  max-width: 23px;
  max-height: 25px;
  overflow: visible;
}

.google-play-icon svg {
  width: 21px;
  height: 24px;
}

.apple-icon svg {
  width: 21px;
  height: 25px;
}

.store-copy {
  min-width: 0;
  gap: 3px;
}

.store-copy b {
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.store-copy small {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .02em;
}

/* Light mode gets premium light store buttons, not dark blocks */
@media (prefers-color-scheme: light) {
  .focus-ui,
  .space-ui {
    background:
      radial-gradient(circle at 50% 48%, rgba(61, 135, 255, .15), transparent 45%),
      linear-gradient(145deg, #edf4ff, #e4eefc 60%, #edf5ff);
    background-size: auto;
  }

  .focus-ui::after,
  .space-ui::after {
    background:
      linear-gradient(rgba(68, 126, 222, .022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(68, 126, 222, .022) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .55;
  }

  .rewards-orbit::before {
    opacity: .22;
    background-size: 62px 62px;
  }

  .mini-store {
    color: #13233e;
    background:
      linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,237,252,.96));
    border-color: rgba(57, 96, 160, .16);
    box-shadow:
      0 14px 32px rgba(45, 73, 116, .12),
      inset 0 1px 0 rgba(255,255,255,.92);
  }

  .store-copy small {
    color: #5a79ad;
  }

  .apple-icon {
    color: #183052;
  }
}

@media (max-width: 760px) {
  .mini-store {
    min-width: 150px;
    min-height: 54px;
    padding: 9px 13px;
    gap: 9px;
  }

  .store-icon,
  .store-icon svg {
    width: 21px;
    height: 23px;
    max-width: 21px;
    max-height: 23px;
    flex-basis: 21px;
  }

  .store-copy b {
    font-size: 13px;
  }
}


/* V7 FINAL: light-mode-only correction for the three dark visual groups */
@media (prefers-color-scheme: light) {

  /* 1. Focus visual */
  .focus-center {
    color: #10213c;
    background:
      radial-gradient(circle at 34% 26%, #ffffff 0%, #dceaff 38%, #b9d2f7 72%, #9dbbe8 100%);
    border: 1px solid rgba(73, 118, 190, .18);
    box-shadow:
      0 24px 60px rgba(50, 84, 137, .16),
      inset 0 1px 0 rgba(255,255,255,.92);
  }

  .focus-center span {
    color: #55709a;
  }

  .sound-pill {
    color: #173157;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(219,232,250,.96));
    border-color: rgba(62, 103, 169, .16);
    box-shadow:
      0 12px 28px rgba(43, 72, 116, .12),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  /* 2. Your Space visual */
  .journal-note {
    color: #13223a;
    background:
      linear-gradient(rgba(70, 124, 215, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(70, 124, 215, .035) 1px, transparent 1px),
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(218,232,250,.96));
    background-size: 28px 28px, 28px 28px, auto;
    border-color: rgba(61, 102, 166, .15);
    box-shadow:
      0 22px 52px rgba(42, 69, 109, .14),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  .journal-note p {
    color: #60728e;
  }

  .goal-orb {
    color: #173157;
    background:
      radial-gradient(circle at 35% 26%, #ffffff, #d9e8fb 42%, #b5ccef 76%, #93add8);
    border: 1px solid rgba(65, 109, 177, .16);
    box-shadow:
      0 20px 48px rgba(44, 75, 121, .15),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  .goal-orb span {
    color: #637797;
  }

  /* 3. HM Points visual */
  .points-core {
    color: #13233d;
    background:
      radial-gradient(circle at 34% 24%, #ffffff 0%, #dfecff 38%, #bed3f3 70%, #9eb9e4 100%);
    border-color: rgba(60, 106, 178, .18);
    box-shadow:
      0 30px 76px rgba(48, 79, 126, .16),
      inset 0 1px 0 rgba(255,255,255,.92);
  }

  .points-core small,
  .points-core p {
    color: #5c7191;
  }

  .points-core::after {
    color: #173157;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(218,231,249,.96));
    border-color: rgba(60, 103, 169, .16);
    box-shadow:
      0 10px 24px rgba(44, 72, 113, .12),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  .achievement {
    color: #173157;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(220,233,250,.96));
    border-color: rgba(62, 104, 170, .16);
    box-shadow:
      0 14px 32px rgba(43, 72, 115, .12),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
}


/* V8 FINAL LIGHT PALETTE
   Match Focus, Your Space and HM Points to the approved Progress visual:
   fresh cyan, soft blue, white surfaces and light shadows.
*/
@media (prefers-color-scheme: light) {

  .focus-ui,
  .space-ui {
    background:
      radial-gradient(circle at 70% 24%, rgba(70, 211, 232, .13), transparent 42%),
      linear-gradient(145deg, #f9fcff 0%, #edf5ff 56%, #e8f2fd 100%);
    border-color: rgba(82, 136, 219, .15);
  }

  /* Focus */
  .focus-rings i {
    border-color: rgba(85, 145, 236, .14);
  }

  .focus-center {
    color: #ffffff;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 31%),
      linear-gradient(145deg, #43d3e4 0%, #5abce9 42%, #7296f6 100%);
    border-color: rgba(85, 143, 231, .16);
    box-shadow:
      0 24px 58px rgba(73, 133, 211, .20),
      inset 0 1px 0 rgba(255,255,255,.35);
  }

  .focus-center small,
  .focus-center span {
    color: rgba(255,255,255,.78);
  }

  .sound-pill {
    color: #284262;
    background: rgba(255,255,255,.94);
    border-color: rgba(83, 136, 216, .14);
    box-shadow:
      0 12px 27px rgba(61, 101, 158, .11),
      inset 0 1px 0 #ffffff;
  }

  /* Your Space */
  .journal-note {
    color: #1b2b45;
    background:
      linear-gradient(145deg, rgba(255,255,255,.99), rgba(226,241,255,.97));
    border-color: rgba(81, 137, 218, .14);
    box-shadow:
      0 22px 49px rgba(59, 99, 154, .13),
      inset 0 1px 0 #ffffff;
  }

  .journal-note.note-back {
    background:
      linear-gradient(145deg, #dff8fb 0%, #d5edfb 45%, #cbdcff 100%);
  }

  .journal-note small {
    color: #6c8fc5;
  }

  .journal-note p {
    color: #647691;
  }

  .goal-orb {
    color: #ffffff;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.24), transparent 31%),
      linear-gradient(145deg, #42d5e3 0%, #5bbde8 42%, #7696f4 100%);
    border-color: rgba(74, 133, 220, .15);
    box-shadow:
      0 20px 44px rgba(64, 111, 175, .18),
      inset 0 1px 0 rgba(255,255,255,.35);
  }

  .goal-orb span {
    color: rgba(255,255,255,.76);
  }

  /* HM Points */
  .points-core {
    color: #ffffff;
    background:
      radial-gradient(circle at 30% 21%, rgba(255,255,255,.23), transparent 31%),
      linear-gradient(145deg, #43d5e4 0%, #5abce8 43%, #7397f5 100%);
    border-color: rgba(75, 135, 223, .16);
    box-shadow:
      0 30px 70px rgba(66, 113, 178, .19),
      inset 0 1px 0 rgba(255,255,255,.35);
  }

  .points-core small,
  .points-core span {
    color: rgba(255,255,255,.78);
  }

  .points-core::after {
    color: #3d68ad;
    background: rgba(255,255,255,.96);
    border-color: rgba(83, 137, 217, .15);
    box-shadow:
      0 10px 23px rgba(57, 94, 146, .11),
      inset 0 1px 0 #ffffff;
  }

  .achievement {
    color: #2a4364;
    background: rgba(255,255,255,.95);
    border-color: rgba(83, 137, 216, .14);
    box-shadow:
      0 14px 30px rgba(57, 96, 151, .11),
      inset 0 1px 0 #ffffff;
  }

  .achievement span {
    color: #35cfe1;
  }

  .orbit {
    border-color: rgba(83, 142, 233, .13);
  }
}


/* Integration V1.1: balanced live HabitMitra brand lockup */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: max-content;
  min-width: 0;
  height: 46px;
}

.brand-lockup .brand-mark,
.footer-brand .brand-lockup .brand-mark {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain;
  object-position: center;
  flex: 0 0 36px;
}

.brand-word {
  display: block;
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.footer-brand-lockup {
  height: 42px;
  gap: 7px;
}

.footer-brand-lockup .brand-mark {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex-basis: 32px;
}

.footer-brand-lockup .brand-word {
  font-size: 19px;
  font-weight: 640;
}

[data-entry-action] {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  .brand-lockup {
    height: 40px;
    gap: 7px;
  }

  .brand-lockup .brand-mark,
  .footer-brand .brand-lockup .brand-mark {
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    flex-basis: 31px;
  }

  .brand-word {
    font-size: 19px;
    font-weight: 650;
  }
}


/* Header without border before scroll */
.site-header:not(.scrolled) {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Brand lockup bottom alignment */
.brand-lockup {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  height: 40px !important;
}

.brand-lockup .brand-mark {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
}

.brand-lockup .brand-word {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 2px 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.35px !important;
  white-space: nowrap !important;
  transform: none !important;
}

.footer-brand-lockup {
  align-items: flex-end !important;
  gap: 6px !important;
}

.footer-brand-lockup .brand-word {
  padding-bottom: 2px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
}

@media (max-width: 760px) {
  .brand-lockup {
    align-items: flex-end !important;
    gap: 5px !important;
  }

  .brand-lockup .brand-mark {
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    flex-basis: 31px !important;
  }

  .brand-lockup .brand-word {
    padding-bottom: 2px !important;
    font-size: 18px !important;
  }
}