/* ============================================================
   BLOCKR — landing
   ============================================================ */
:root {
  --bg-0:   #06070c;
  --bg-1:   #0b0d14;
  --bg-2:   #11141d;
  --bg-3:   #181c28;

  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);

  --text:   #f1f3f8;
  --muted:  #8a8fa3;
  --dim:    #5a5f72;

  --mint:   #5BE3CC;
  --mint-2: #3fcfb6;
  --blue:   #6E7BFF;
  --blue-2: #8b96ff;

  /* planet hues */
  --p-creativity: #E27A8E;
  --p-clarity:    #9B7CC7;
  --p-focus:      #4FCCAB;
  --p-energy:     #E6BA4A;
  --p-discipline: #7686E0;
  --p-purpose:    #E89856;

  --maxw: 1240px;
  --rad-card: 22px;
  --rad-phone: 44px;

  --easing: cubic-bezier(.2,.7,.2,1);

  --font-display: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* radial sweep on body */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(110,123,255,.10), transparent 60%),
    radial-gradient(800px 600px at -10% 30%, rgba(91,227,204,.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  backdrop-filter: blur(14px);
  background: rgba(6,7,12,.55);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
}
.brand__mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(91,227,204,.25);
}
.brand__name {
  font-family: "Sora", var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #c4c8d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .12em;
}
.nav__links {
  display: flex; gap: 28px;
  font-size: 14px; color: var(--muted);
}
.nav__links a {
  position: relative; transition: color .2s var(--easing);
}
.nav__links a:hover { color: var(--text); }
.nav__cta {}

@media (max-width: 740px) {
  .nav__links { display: none; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--easing), background .25s var(--easing), box-shadow .25s var(--easing);
  user-select: none;
  white-space: nowrap;
}
.btn--lg { padding: 14px 22px; font-size: 15px; }
.btn--primary {
  background: linear-gradient(180deg, #fff, #e7e9ee);
  color: #0a0c14;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 10px 28px rgba(255,255,255,.08),
    0 1px 0 rgba(255,255,255,.4) inset;
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 14px 36px rgba(255,255,255,.14); }
.btn--ghost {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: rgba(255,255,255,.07); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(91,227,204,.18);
  display: inline-block;
}
.dot--green   { background: var(--mint); box-shadow: 0 0 0 4px rgba(91,227,204,.18); }
.dot--pink    { background: var(--p-creativity); box-shadow: none; }
.dot--purple  { background: var(--p-clarity); box-shadow: none; }
.dot--teal    { background: var(--p-focus); box-shadow: none; }
.dot--yellow  { background: var(--p-energy); box-shadow: none; }
.dot--blue    { background: var(--p-discipline); box-shadow: none; }
.dot--orange  { background: var(--p-purpose); box-shadow: none; }
.dot--red     { background: #ec5566; box-shadow: none; }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 80px clamp(20px, 4vw, 48px) 60px;
  overflow: hidden;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
}

.hero__content { position: relative; z-index: 3; }
.hero__tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  margin-bottom: 28px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9.5vw, 124px);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0 0 24px;
}
.hero__title .line { display: block; }
.hero__title .accent {
  background: linear-gradient(180deg, #ffffff 0%, #c5cad8 40%, #6a728a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.hero__title .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 12%; bottom: 6%;
  height: 6px;
  background: var(--mint);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 1.4s var(--easing) .8s forwards;
  box-shadow: 0 0 22px rgba(91,227,204,.6);
}
@keyframes underline { to { transform: scaleX(1); } }

.hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--muted);
  max-width: 520px;
  margin: 0 0 32px;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 40px;
}
.hero__meta {
  display: flex; align-items: center; gap: 18px;
  color: var(--muted);
  font-size: 13.5px;
}
.hero__meta strong { color: var(--text); font-weight: 600; font-family: var(--font-display); margin-right: 4px; }
.hero__meta .divider {
  width: 1px; height: 18px; background: var(--line-2);
}

/* hero phone */
.hero__phone-wrap {
  position: relative;
  height: 100%;
  min-height: 620px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hero__phone {
  position: relative;
  width: min(360px, 80%);
  filter: drop-shadow(0 60px 100px rgba(0,0,0,.55));
  animation: float 8s ease-in-out infinite;
}
.hero__phone-glow {
  position: absolute; inset: 8% 8% 8% 8%;
  background: radial-gradient(closest-side, rgba(110,123,255,.28), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}

/* ============ PHONE COMPONENT ============ */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 1179 / 2556;
  border-radius: var(--rad-phone);
  background: #000;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 0 2px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 60px 120px -30px rgba(0,0,0,.7),
    0 30px 60px -20px rgba(0,0,0,.5);
  transform-style: preserve-3d;
  transition: transform .6s var(--easing);
}
.phone::before {
  /* outer bezel highlight */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(315deg, rgba(255,255,255,.10), transparent 25%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 26px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone__notch::after {
  content: "";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px rgba(91,227,204,.25);
}
.phone__screen {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--rad-phone) - 6px);
  display: block;
}

/* tilts */
.tilt-left  { transform: perspective(2200px) rotateY(14deg)  rotateX(6deg)  rotateZ(-2deg); }
.tilt-right { transform: perspective(2200px) rotateY(-14deg) rotateX(6deg)  rotateZ(2deg); }
.tilt-cluster-1 { transform: perspective(2200px) rotateY(-18deg) rotateX(8deg)  rotateZ(-4deg); }
.tilt-cluster-2 { transform: perspective(2200px) rotateY(0)      rotateX(-3deg) rotateZ(0); }
.tilt-cluster-3 { transform: perspective(2200px) rotateY(18deg)  rotateX(8deg)  rotateZ(4deg); }
.lift:hover     { transform: perspective(2200px) rotateY(0) rotateX(0) rotateZ(0) scale(1.02); }

/* ============ STARFIELD ============ */
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 28% 65%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 45% 14%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 78%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 78% 32%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 60%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 35% 88%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 78%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 52% 48%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 12%, #fff 50%, transparent 100%);
  opacity: .35;
  animation: twinkle 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes twinkle {
  0%,100% { opacity: .3; }
  50% { opacity: .55; }
}

/* ============ ORBIT SYSTEM (decorative) ============ */
.orbit-system {
  position: absolute;
  top: 50%; left: 28%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
}
.orbit--1 { width: 220px; height: 220px; animation: spin 22s linear infinite; }
.orbit--2 { width: 340px; height: 340px; animation: spin 32s linear infinite reverse; }
.orbit--3 { width: 460px; height: 460px; animation: spin 42s linear infinite; }
.orbit--4 { width: 580px; height: 580px; animation: spin 52s linear infinite reverse; }
.orbit--5 { width: 700px; height: 700px; animation: spin 62s linear infinite; }
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.planet {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 22px currentColor;
}
.planet--creativity { background: var(--p-creativity); color: rgba(226,122,142,.5); }
.planet--clarity    { background: var(--p-clarity);    color: rgba(155,124,199,.5); width: 24px; height: 24px; }
.planet--focus      { background: var(--p-focus);      color: rgba(79,204,171,.5);  width: 16px; height: 16px; }
.planet--energy     { background: var(--p-energy);     color: rgba(230,186,74,.5);  width: 22px; height: 22px; }
.planet--discipline { background: var(--p-discipline); color: rgba(118,134,224,.5); width: 26px; height: 26px; }
.planet--purpose    { background: var(--p-purpose);    color: rgba(232,152,86,.5);  width: 18px; height: 18px; }

.sun {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe27a, #f5b938 65%, #d99617 100%);
  box-shadow:
    0 0 60px rgba(245,185,56,.45),
    0 0 120px rgba(245,185,56,.25),
    inset 0 -10px 30px rgba(0,0,0,.2);
  animation: pulse 4s ease-in-out infinite;
}
.sun__halo {
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,185,56,.35), transparent 70%);
  z-index: -1;
  filter: blur(10px);
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 60px rgba(245,185,56,.45), 0 0 120px rgba(245,185,56,.25), inset 0 -10px 30px rgba(0,0,0,.2); }
  50%     { box-shadow: 0 0 80px rgba(245,185,56,.6),  0 0 160px rgba(245,185,56,.35), inset 0 -10px 30px rgba(0,0,0,.2); }
}

@media (max-width: 960px) {
  .orbit-system { left: 50%; top: 30%; width: 520px; height: 520px; opacity: .35; }
  .hero__phone-wrap { min-height: 540px; }
}

/* ============ SCROLL CUE ============ */
.scroll-cue {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: 24px;
  display: flex; align-items: center; gap: 12px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  z-index: 4;
}
.scroll-cue__line {
  position: relative;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--dim), transparent);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 20px;
  background: var(--mint);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: translateX(-30px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(70px); opacity: 0; }
}

/* ============ MARQUEE ============ */
.marquee {
  position: relative; z-index: 4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
  background: rgba(255,255,255,.012);
}
.marquee__track {
  display: flex; align-items: center; gap: 40px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 13px;
  color: var(--muted);
  animation: scroll 28s linear infinite;
  width: max-content;
}
.marquee__track .dot { width: 6px; height: 6px; box-shadow: none; }
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ============ SECTION HEADS ============ */
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--mint);
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

/* ============ FEATURES ============ */
.features {
  position: relative; z-index: 4;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px clamp(20px, 4vw, 48px) 60px;
}
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  position: relative;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature--reverse { direction: rtl; }
.feature--reverse > * { direction: ltr; }

.feature__no {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--mint);
  font-size: 13px;
  letter-spacing: .25em;
  display: inline-block;
  margin-bottom: 18px;
}
.feature__copy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0 0 16px;
  text-wrap: balance;
}
.feature__copy p {
  color: var(--muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 22px;
}
.feature__bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.feature__bullets li {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
  font-size: 14.5px;
}
.feature__bullets .dot { flex-shrink: 0; }
.feature__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  font-family: var(--font-display);
  font-weight: 500;
}

.feature__visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 580px;
  position: relative;
}
.feature__visual .phone {
  width: min(320px, 90%);
  filter: drop-shadow(0 50px 80px rgba(0,0,0,.55));
}
.feature__visual::before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(closest-side, rgba(110,123,255,.18), transparent 75%);
  filter: blur(40px);
  z-index: -1;
}
.feature--solar .feature__visual::before {
  background: radial-gradient(closest-side, rgba(245,185,56,.22), transparent 70%);
}

/* cluster */
.feature__cluster {
  position: relative;
  min-height: 640px;
  display: flex; align-items: center; justify-content: center;
}
.feature__cluster .phone {
  position: absolute;
  width: 220px;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.6));
  transition: transform .5s var(--easing), z-index 0s .25s;
}
.feature__cluster .phone:nth-child(1) { left: 6%;  top: 4%;  z-index: 1; }
.feature__cluster .phone:nth-child(2) { left: 50%; top: 50%; transform: translate(-50%, -50%) perspective(2200px) rotateY(0) rotateX(-3deg); width: 240px; z-index: 3; }
.feature__cluster .phone:nth-child(3) { right: 6%; bottom: 4%; z-index: 2; }
.feature__cluster .phone:hover { transform: perspective(2200px) rotateY(0) rotateX(0) scale(1.05); z-index: 5; transition: transform .5s var(--easing); }
.feature__cluster .phone:nth-child(2):hover { transform: translate(-50%, -50%) scale(1.05); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; }
  .feature--reverse { direction: ltr; }
  .feature__visual { min-height: 520px; }
  .feature__cluster { min-height: 520px; }
  .feature__cluster .phone { width: 180px; }
  .feature__cluster .phone:nth-child(2) { width: 200px; }
}

/* ============ HOW ============ */
.how {
  position: relative; z-index: 4;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px clamp(20px, 4vw, 48px) 80px;
}
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border-radius: var(--rad-card);
  transition: border-color .25s var(--easing), transform .25s var(--easing);
}
.steps li:hover { border-color: var(--line-2); transform: translateY(-3px); }
.steps__num {
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(91,227,204,.10);
  color: var(--mint);
  border: 1px solid rgba(91,227,204,.25);
  margin-bottom: 22px;
  font-size: 15px;
}
.steps h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.steps p { color: var(--muted); margin: 0; font-size: 14.5px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ============ CTA / WAITLIST ============ */
.cta {
  position: relative; z-index: 4;
  padding: 100px clamp(20px, 4vw, 48px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.cta__inner {
  position: relative;
  padding: 80px clamp(28px, 5vw, 80px);
  border-radius: 32px;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(110,123,255,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 110%, rgba(91,227,204,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2);
  text-align: center;
  overflow: hidden;
}
.cta__inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 12px 0 12px;
  text-wrap: balance;
}
.cta__inner p {
  color: var(--muted);
  max-width: 540px; margin: 0 auto 28px;
  font-size: 16px;
}
.cta__form {
  display: flex; gap: 8px;
  max-width: 460px; margin: 0 auto;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px;
}
.cta__form input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text);
  font-family: var(--font-body);
  padding: 0 16px;
  font-size: 14.5px;
}
.cta__form input::placeholder { color: var(--dim); }
.cta__form.done input { opacity: .5; }
.cta__appstore {
  margin-top: 28px;
  display: flex; justify-content: center;
}
.appstore-mock {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-family: var(--font-display);
}
.appstore-mock__small { font-size: 11px; letter-spacing: .12em; }
.appstore-mock__big { color: var(--text); font-size: 18px; font-weight: 600; }

/* sprinkled planets in cta — each one drifts on its own irregular path
   so the box feels alive instead of bobbing in unison.
   Each planet is constrained to its own region so they stay apart, and
   the whole layer sits behind the text via z-index. */
.cta__planets {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Pull the actual content above the planet layer. Without this, the
   absolutely-positioned planets stack above static text by default. */
.cta__inner > *:not(.cta__planets) {
  position: relative;
  z-index: 1;
}
.cta__planets .planet {
  position: absolute;
  width: 14px; height: 14px;
  opacity: .85;
  will-change: transform;
}
.cta__planets .planet--creativity {
  top: 12%; left: 5%; width: 18px; height: 18px;
  animation: cta-drift-1 19s ease-in-out infinite;
  animation-delay: -2s;
}
.cta__planets .planet--clarity {
  top: 78%; left: 7%; width: 22px; height: 22px;
  animation: cta-drift-2 23s ease-in-out infinite;
  animation-delay: -6s;
}
.cta__planets .planet--focus {
  top: 16%; right: 5%; width: 16px; height: 16px;
  animation: cta-drift-3 17s ease-in-out infinite;
  animation-delay: -3s;
}
.cta__planets .planet--energy {
  top: 82%; right: 6%; width: 14px; height: 14px;
  animation: cta-drift-4 21s ease-in-out infinite;
  animation-delay: -10s;
}
.cta__planets .planet--discipline {
  top: 50%; right: 4%; width: 12px; height: 12px;
  animation: cta-drift-5 20s ease-in-out infinite;
  animation-delay: -7s;
}

/* Each planet bobs along its own edge of the box. X motion is kept small
   (under ~30px) so they stay out of the centered text column; Y motion
   does the heavy lifting so the box still feels alive. */
@keyframes cta-drift-1 {
  0%,100% { transform: translate(0, 0); }
  30%     { transform: translate(-10px, 80px); }
  60%     { transform: translate(20px, 160px); }
  80%     { transform: translate(-20px, 100px); }
}
@keyframes cta-drift-2 {
  0%,100% { transform: translate(0, 0); }
  30%     { transform: translate(20px, -100px); }
  60%     { transform: translate(-20px, -180px); }
  80%     { transform: translate(30px, -60px); }
}
@keyframes cta-drift-3 {
  0%,100% { transform: translate(0, 0); }
  30%     { transform: translate(10px, 100px); }
  60%     { transform: translate(-20px, 200px); }
  80%     { transform: translate(20px, 120px); }
}
@keyframes cta-drift-4 {
  0%,100% { transform: translate(0, 0); }
  30%     { transform: translate(-20px, -100px); }
  60%     { transform: translate(20px, -200px); }
  80%     { transform: translate(-10px, -60px); }
}
@keyframes cta-drift-5 {
  0%,100% { transform: translate(0, 0); }
  25%     { transform: translate(10px, -120px); }
  50%     { transform: translate(-15px, -40px); }
  75%     { transform: translate(10px, 100px); }
  90%     { transform: translate(-10px, 60px); }
}

/* ============ PRIVACY ============ */
.privacy {
  position: relative; z-index: 4;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px clamp(20px, 4vw, 48px);
}
.privacy__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .privacy__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .privacy__grid { grid-template-columns: 1fr; } }

.privacy__card {
  padding: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border-radius: var(--rad-card);
  transition: border-color .25s var(--easing);
}
.privacy__card:hover { border-color: rgba(91,227,204,.35); }
.privacy__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(91,227,204,.10);
  color: var(--mint);
  border: 1px solid rgba(91,227,204,.25);
  margin-bottom: 16px;
}
.privacy__card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.privacy__card p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.privacy__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--mint);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
}

/* ============ FOOTER ============ */
.footer {
  position: relative; z-index: 4;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 60px clamp(20px, 4vw, 48px) 40px;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.footer__tag {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0;
}
.footer__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.footer__cols h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.footer__cols a {
  display: block;
  color: var(--text);
  font-size: 14.5px;
  margin-bottom: 8px;
  transition: color .2s var(--easing);
}
.footer__cols a:hover { color: var(--mint); }
.footer__cols .muted { color: var(--muted); font-size: 14px; margin: 0; }
.footer__bottom {
  display: flex; justify-content: space-between;
  color: var(--dim);
  font-size: 13px;
}
@media (max-width: 700px) {
  .footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ============ PRIVACY PAGE ============ */
.policy {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 4;
}
.policy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -.03em;
  margin: 0 0 12px;
}
.policy__date { color: var(--muted); margin-bottom: 40px; font-size: 14px; }
.policy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 40px 0 12px;
}
.policy p, .policy li { color: #c6cad6; font-size: 15.5px; line-height: 1.7; }
.policy ul { padding-left: 20px; }
.policy a { color: var(--mint); }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--easing), transform .8s var(--easing); }
.reveal.in { opacity: 1; transform: none; }