/* ============================================================
   LiquidTasks Landing — styles.css
   ============================================================ */

:root {
  --bg: #0A0A0F;
  --indigo: #6366F1;
  --cyan: #06B6D4;
  --pink: #EC4899;
  --violet: #8B5CF6;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: #fff;
  overscroll-behavior-y: none;
}

/* ---------- Grain ---------- */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Gradient mesh blobs ---------- */
.mesh-blobs { overflow: hidden; }
.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
  will-change: transform;
}
.blob--purple {
  width: 720px; height: 720px;
  left: -10%; top: -10%;
  background: radial-gradient(circle, var(--violet) 0%, transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.blob--cyan {
  width: 640px; height: 640px;
  right: -8%; top: 20%;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 65%);
  animation: drift2 26s ease-in-out infinite alternate;
}
.blob--pink {
  width: 540px; height: 540px;
  left: 30%; bottom: -10%;
  background: radial-gradient(circle, var(--pink) 0%, transparent 65%);
  opacity: 0.42;
  animation: drift3 30s ease-in-out infinite alternate;
}
.blob--top { top: -20%; right: -10%; opacity: 0.4; }
.blob--bottom { bottom: -20%; left: -10%; opacity: 0.45; }

@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(140px, 80px) scale(1.15); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1.05); }
  100% { transform: translate(-120px, 100px) scale(0.95); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(0.95); }
  100% { transform: translate(80px, -120px) scale(1.1); }
}

/* ---------- App icon — real image ---------- */
.app-icon-img {
  display: inline-block;
  object-fit: contain;
  /* The PNG already has its own glow/halo, so no border-radius/clip needed */
}
.app-icon-img--mini { width: 34px; height: 34px; filter: drop-shadow(0 4px 12px rgba(99,102,241,0.45)); }
.app-icon-img--lg   { width: 96px; height: 96px; filter: drop-shadow(0 18px 38px rgba(99,102,241,0.55)); }

/* ---------- Legacy CSS-built app icons (kept for fallback) ---------- */
.app-icon-mini {
  display: inline-block; width: 32px; height: 32px;
  border-radius: 9px;
  background:
    radial-gradient(120% 120% at 30% 20%, #4f46e5 0%, #2dd4ff 55%, #0f172a 100%);
  padding: 4px;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.app-icon-mini__inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 60%, transparent 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -6px 12px rgba(255,255,255,0.18);
}
.app-icon-mid {
  display: inline-block; width: 88px; height: 88px;
  border-radius: 22px;
  background:
    radial-gradient(130% 130% at 30% 20%, #5b48ff 0%, #1d8ff2 55%, #0c0b2b 100%);
  padding: 14px;
  box-shadow: 0 14px 38px rgba(99,102,241,0.35), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.app-icon-mid__inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0.08) 55%, transparent 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 -10px 18px rgba(255,255,255,0.22);
}
.app-icon-lg {
  display: inline-block; width: 96px; height: 96px;
  border-radius: 24px;
  background:
    radial-gradient(130% 130% at 30% 20%, #6c5cff 0%, #1d8ff2 55%, #0c0b2b 100%);
  padding: 16px;
  box-shadow:
    0 24px 60px rgba(99,102,241,0.45),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}
.app-icon-lg__inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0.08) 55%, transparent 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 -10px 18px rgba(255,255,255,0.22);
}

/* ============================================================
   HERO TYPOGRAPHY
   ============================================================ */
.hero-h1 {
  font-size: clamp(40px, 7.5vw, 96px);
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
  padding-right: 0.18em;
}
.hero-word--grad {
  background: linear-gradient(120deg, #a5b4fc 0%, #67e8f9 45%, #f9a8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub { opacity: 0; transform: translateY(20px); }

/* ============================================================
   HERO CTA — App Store button + idle glow + magnetic effect
   ============================================================ */
.hero-cta-wrap {
  opacity: 0; transform: translateY(20px);
  will-change: transform, opacity;
}
.hero-cta {
  --magnet-x: 0px;
  --magnet-y: 0px;
  --hover-y: 0px;
  --hover-scale: 1;
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 12px;
  height: 62px;
  padding: 0 24px;
  border-radius: 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  backface-visibility: hidden;
  contain: layout style paint;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.45);
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) + var(--hover-y)), 0) scale(var(--hover-scale));
  transition:
    --hover-y 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    --hover-scale 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
@property --hover-y    { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --hover-scale { syntax: '<number>'; initial-value: 1;   inherits: false; }
/* Idle pulse — animate opacity on a pseudo-element, not box-shadow */
.hero-cta__glow {
  position: absolute; inset: -6px;
  border-radius: 22px;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.55), rgba(6,182,212,0.35) 40%, transparent 70%);
  filter: blur(16px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  animation: heroCtaPulse 2.5s ease-in-out infinite;
}
@keyframes heroCtaPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}
.hero-cta__inner { display: inline-flex; align-items: center; gap: 12px; z-index: 1; }
.hero-cta__txt {
  display: inline-flex; flex-direction: column; line-height: 1;
  text-align: left;
}
.hero-cta__small { font-size: 10px; letter-spacing: 0.5px; color: rgba(255,255,255,0.78); }
.hero-cta__big   { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 3px; }

.hero-cta:hover {
  --hover-y: -2px;
  --hover-scale: 1.04;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 20px 48px rgba(99,102,241,0.45);
}
.hero-cta:hover .hero-cta__glow { opacity: 1; animation-duration: 1.6s; }
.hero-cta:active {
  --hover-y: -1px;
  --hover-scale: 0.97;
  transition-duration: 0.1s;
}
/* Click ripple */
.hero-cta__ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.hero-cta.is-rippling .hero-cta__ripple {
  animation: heroCtaRipple 0.6s ease-out forwards;
}
@keyframes heroCtaRipple {
  0%   { width: 0; height: 0; opacity: 0.5; }
  100% { width: 360px; height: 360px; opacity: 0; }
}

.hero-cta-foot {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
}

/* ============================================================
   iPHONE 17 PRO MAX FRAMES (CSS-only)
   ============================================================ */
.phone {
  position: relative;
  width: clamp(150px, 18vw, 230px);
  aspect-ratio: 9 / 19.5;
  opacity: 0;
  transform: translate3d(0, 80px, 0) scale(0.85);
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style paint;
}
.phone--center {
  width: clamp(190px, 22vw, 280px);
  z-index: 3;
  transform: translateY(80px) scale(0.85);
}
.phone--left {
  z-index: 2;
  transform: translateY(80px) scale(0.82) translateX(40px) translateZ(-80px);
  margin-right: -40px;
}
.phone--right {
  z-index: 2;
  transform: translateY(80px) scale(0.82) translateX(-40px) translateZ(-80px);
  margin-left: -40px;
}

/* Glow behind each phone */
.phone__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  z-index: -1;
  animation: glowPulse 5s ease-in-out infinite alternate;
}
.phone__glow--purple { background: radial-gradient(circle, #6366F1, transparent 70%); }
.phone__glow--cyan   { background: radial-gradient(circle, #06B6D4, transparent 70%); }
.phone__glow--pink   { background: radial-gradient(circle, #EC4899, transparent 70%); }
@keyframes glowPulse {
  0%   { opacity: 0.40; transform: scale(0.95); }
  100% { opacity: 0.70; transform: scale(1.08); }
}

/* Titanium frame */
.phone-frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 13.5%/6.5%;
  padding: 3.6%;
  background:
    linear-gradient(135deg, #4d4d57 0%, #2a2a32 25%, #6a6a78 50%, #2a2a32 75%, #4d4d57 100%);
  box-shadow:
    0 30px 60px -10px rgba(0,0,0,0.6),
    0 18px 36px -18px rgba(0,0,0,0.7),
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 -2px 0 rgba(0,0,0,0.4) inset,
    0 0 0 1px rgba(255,255,255,0.05) inset;
}
.phone-side {
  position: absolute; inset: 0;
  border-radius: 13.5%/6.5%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, transparent 6%, transparent 94%, rgba(255,255,255,0.10) 100%);
  mix-blend-mode: screen;
}

/* Side buttons */
.phone-buttons {
  position: absolute; top: 18%;
  display: flex; flex-direction: column; gap: 22%;
  pointer-events: none;
}
.phone-buttons--left  { left: -2px; height: 50%; }
.phone-buttons--right { right: -2px; top: 26%; height: 16%; }
.phone-buttons span {
  display: block; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #2a2a32, #1a1a20);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.btn-action { height: 26px; }
.btn-up     { height: 50px; }
.btn-down   { height: 50px; }
.btn-power  { width: 3px !important; height: 80px; }

/* Screen */
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 11%/5%;
  overflow: hidden;
  background: #000;
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.85),
    inset 0 0 0 3px rgba(255,255,255,0.04);
}
/* Image-based screen — full bleed inside the phone screen */
.screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* Animated diagonal glare */
.phone-glare {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: glareSweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}
@keyframes glareSweep {
  0%, 70% { transform: translateX(-130%); }
  85%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 22px;
  background: #000;
  border-radius: 999px;
  z-index: 10;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Status bar */
.status-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 0;
  font-size: 11px; font-weight: 600;
  color: #fff;
  z-index: 4;
}
.status-bar--light { color: #111; }
.status-time { letter-spacing: 0.5px; }
.status-right { display: flex; align-items: center; gap: 5px; }
.signal {
  width: 14px; height: 8px;
  background:
    linear-gradient(to top, currentColor 35%, transparent 35%) 0 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 55%, transparent 55%) 4px 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 75%, transparent 75%) 8px 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 100%, transparent 100%) 12px 0 / 2px 100% no-repeat;
  color: #fff;
}
.signal--dark { color: #111; }
.wifi {
  width: 13px; height: 9px;
  background: radial-gradient(circle at 50% 100%, currentColor 22%, transparent 23%) no-repeat,
              radial-gradient(circle at 50% 100%, currentColor 50%, transparent 51%) no-repeat;
  color: #fff;
  mask: radial-gradient(circle at 50% 100%, black 95%, transparent 100%);
}
.wifi--dark { color: #111; }
.battery {
  width: 22px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 3px;
  position: relative; color: #fff;
}
.battery::before {
  content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px;
  width: 65%; background: currentColor; border-radius: 1.5px;
}
.battery::after {
  content: ""; position: absolute; right: -3px; top: 3px; bottom: 3px;
  width: 2px; background: currentColor; border-radius: 0 1px 1px 0;
}
.battery--dark { color: #111; }

/* ============================================================
   SCREEN: ONBOARDING ("Less noice")
   ============================================================ */
.screen { position: absolute; inset: 0; }
.screen--onboarding {
  background:
    radial-gradient(ellipse at 50% 40%, #1f6f8a 0%, #1a3a78 45%, #3b1c6a 85%, #1a0f3a 100%);
  color: #fff;
}
.screen--onboarding .onboard-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(99,102,241,0.55), transparent 50%),
    radial-gradient(ellipse at 75% 30%, rgba(6,182,212,0.35), transparent 55%);
  mix-blend-mode: screen;
}
.onboard-content {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 22% 9% 8%;
  text-align: center;
  z-index: 2;
}
.onboard-icon { margin-bottom: 12px; }
.onboard-app-name {
  margin-top: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3px;
}
.onboard-title {
  margin-top: 14%;
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
}
.onboard-divider {
  width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #67e8f9, transparent);
  margin: 10px 0 14px;
}
.onboard-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  max-width: 80%;
}
.onboard-label {
  margin-top: 18px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
}
.onboard-input {
  margin-top: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  color: #fff; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(10px);
}
.onboard-cta {
  margin-top: 14px;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  color: #fff;
  background: linear-gradient(95deg, #1ec3ff, #6c5cff, #c860ff);
  box-shadow:
    0 8px 18px rgba(108,92,255,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.20);
}

/* ============================================================
   SCREEN: DARK HOME
   ============================================================ */
.screen--dark-home {
  background:
    radial-gradient(ellipse at 50% 30%, #176e84 0%, #1a3a78 45%, #3a1d6c 85%, #170e2e 100%);
  color: #fff;
  padding: 0;
}
.screen--dark-home::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 75%, rgba(124,58,237,0.4), transparent 50%),
    radial-gradient(ellipse at 75% 35%, rgba(6,182,212,0.25), transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.home-top-row {
  position: absolute; left: 6%; right: 6%; top: 11%;
  display: flex; align-items: center; gap: 5px;
  z-index: 3;
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  font-size: 10px; font-weight: 600; color: #fff;
}
.pill--back { width: 28px; height: 28px; padding: 0; }
.pill--gear { width: 28px; height: 28px; padding: 0; }
.pill--xp, .pill--mode { padding: 7px 11px; }
.pill--light {
  background: rgba(255,255,255,0.65);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  color: #111;
}

.home-greeting {
  position: absolute; left: 6%; right: 6%; top: 19%;
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.025em;
  z-index: 2;
}
.home-greeting--dark {
  background: linear-gradient(120deg, #6ee7ff, #5cb6ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-greeting--light { color: #0c0c14; }

.progress-row {
  position: absolute; left: 6%; right: 6%; top: 28%;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: rgba(255,255,255,0.7);
  z-index: 2;
}
.progress-row--light { color: #111; }
.progress-row b { font-size: 11px; font-weight: 800; color: #fff; margin-left: 6px; }
.progress-row--light b { color: #111; }
.progress-pct { color: #67e8f9; font-size: 11px; }

.progress-bar {
  position: absolute; left: 6%; right: 6%; top: 31.5%;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  z-index: 2;
}
.progress-bar--light { background: rgba(0,0,0,0.06); }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c5cff, #1ec3ff);
  border-radius: 999px;
}

.home-sub {
  position: absolute; left: 6%; right: 6%; top: 35%;
  font-size: 11px; font-weight: 600;
  text-align: center;
}
.home-sub--dark { color: rgba(255,255,255,0.65); }
.home-sub--light { color: #111; font-weight: 700; }

.empty-card {
  position: absolute; left: 6%; right: 6%; top: 56%;
  padding: 18px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  text-align: center;
  z-index: 2;
}
.empty-icon { display: flex; justify-content: center; opacity: 0.85; }
.empty-title {
  margin-top: 8px;
  font-size: 13px; font-weight: 800; color: #fff;
}
.empty-desc {
  margin-top: 4px;
  font-size: 9.5px; color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

/* Active row + task card (light home) */
.active-row {
  position: absolute; left: 6%; right: 6%; top: 44%;
  display: flex; align-items: center; gap: 6px;
  color: #0c0c14; font-size: 11px; font-weight: 800;
  z-index: 2;
}
.active-row .active-count {
  font-size: 9.5px; color: rgba(0,0,0,0.5); font-weight: 700; padding-left: 4px;
}

.task-card {
  position: absolute; left: 5%; right: 5%; top: 50%;
  padding: 12px 14px 12px 18px;
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04);
  display: flex; align-items: flex-start; gap: 10px;
  z-index: 2;
}
.task-priority {
  position: absolute; left: 6px; top: 16px; bottom: 16px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #ff6b6b, #ff4d6d);
}
.task-check {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid #ff6b6b;
  margin-top: 4px;
}
.task-body { flex: 1; }
.task-title {
  font-size: 12px; font-weight: 800; color: #0c0c14; line-height: 1.2;
}
.task-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 9.5px; color: #6b7280;
}
.task-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 9px; font-weight: 700; color: #ff4d6d;
}
.task-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: #ff4d6d; }
.task-edit {
  width: 22px; height: 22px; border-radius: 999px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.create-btn {
  position: absolute; left: 18%; right: 18%; bottom: 6%;
  height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  color: #fff;
  background: linear-gradient(95deg, #a855f7, #7c3aed);
  box-shadow:
    0 10px 24px rgba(124,58,237,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  z-index: 3;
}
.create-btn .plus { font-size: 14px; font-weight: 800; margin-top: -1px; }
.create-btn .sparkles { font-size: 10px; opacity: 0.95; margin-top: -1px; }
.create-btn--light { background: linear-gradient(95deg, #8b5cf6, #6d28d9); }

/* Screen for LIGHT home */
.screen--light-home {
  background: linear-gradient(180deg, #ecf3fb 0%, #e6e9f8 60%, #e2d0f0 100%);
}

/* ============================================================
   FLOATING DECORATIONS
   ============================================================ */
.float-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(0.2px);
  z-index: 1;
  will-change: transform;
}
.float-deco svg { width: 100%; height: 100%; }

.float-deco--check {
  top: 8%; left: 8%;
  width: 44px; height: 44px;
  color: #67e8f9;
  background: rgba(6,182,212,0.12);
  border-radius: 14px;
  padding: 9px;
  box-shadow: 0 8px 22px rgba(6,182,212,0.25), inset 0 0 0 1px rgba(255,255,255,0.10);
  animation: float-a 6s ease-in-out infinite alternate;
}
.float-deco--bell {
  top: 22%; right: 7%;
  width: 40px; height: 40px;
  color: #f9a8d4;
  background: rgba(236,72,153,0.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 22px rgba(236,72,153,0.25), inset 0 0 0 1px rgba(255,255,255,0.10);
  animation: float-b 7s ease-in-out infinite alternate;
}
.float-deco--xp {
  bottom: 26%; left: 5%;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(95deg, #6366F1, #06B6D4);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  box-shadow: 0 10px 24px rgba(99,102,241,0.45), inset 0 0 0 1px rgba(255,255,255,0.15);
  animation: float-c 8s ease-in-out infinite alternate;
}
.float-deco--flag {
  bottom: 20%; right: 6%;
  width: 32px; height: 32px;
  color: #a5b4fc;
  padding: 6px;
  border-radius: 12px;
  background: rgba(99,102,241,0.18);
  box-shadow: 0 6px 18px rgba(99,102,241,0.30), inset 0 0 0 1px rgba(255,255,255,0.10);
  animation: float-d 6.5s ease-in-out infinite alternate;
}
.float-deco--dot {
  bottom: 50%; left: 14%;
  width: 8px; height: 8px; border-radius: 999px;
  background: #67e8f9;
  box-shadow: 0 0 20px #67e8f9, 0 0 40px rgba(6,182,212,0.5);
  animation: float-e 5s ease-in-out infinite alternate;
}
.float-deco--ring {
  top: 35%; right: 16%;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.35);
  animation: float-f 7s ease-in-out infinite alternate;
}
@keyframes float-a { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-14px) rotate(3deg); } }
@keyframes float-b { from { transform: translateY(0) rotate(2deg); }  to { transform: translateY(12px) rotate(-2deg); } }
@keyframes float-c { from { transform: translateY(0); }                to { transform: translateY(-16px); } }
@keyframes float-d { from { transform: translateY(0) rotate(0); }      to { transform: translateY(-10px) rotate(8deg); } }
@keyframes float-e { from { transform: translate(0,0); }               to { transform: translate(8px,-12px); } }
@keyframes float-f { from { transform: translate(0,0) scale(1); }       to { transform: translate(-10px,10px) scale(1.15); } }

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-indicator {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 5;
}
.scroll-chev {
  color: rgba(255,255,255,0.55);
  animation: chevPulse 2s ease-in-out infinite;
}
@keyframes chevPulse {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ============================================================
   SECTION 2 — Features
   ============================================================ */
.features-h2 .reveal-word {
  display: inline-block; padding-right: 0.18em;
  opacity: 0; transform: translateY(36px);
  will-change: transform, opacity;
}
.reveal-word--grad {
  background: linear-gradient(120deg, #a5b4fc 0%, #67e8f9 50%, #f9a8d4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.feature-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 22px;
  contain: layout style paint;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(40px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease,
              background 0.4s ease;
  overflow: hidden;
  will-change: transform;
}
.feature-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 24px 60px rgba(99,102,241,0.18); }
.feature-card:hover::after { transform: translateX(130%); }

.feature-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(6,182,212,0.18));
  color: #67e8f9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  margin-bottom: 18px;
}
.feature-check svg { width: 22px; height: 22px; }
.feature-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.feature-desc { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* SVG stroke draw-in */
.stroke-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.feature-card.is-visible .stroke-path {
  animation: drawCheck 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.25s;
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-wrap { perspective: 1000px; }
.cta-banner {
  position: relative;
  width: min(720px, 92vw);
  border-radius: 28px;
  padding: 2px;
  isolation: isolate;
  opacity: 0; transform: translateY(40px);
}
@property --conicAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.cta-border {
  position: absolute; inset: 0;
  border-radius: 28px;
  padding: 2px;
  background: conic-gradient(from var(--conicAngle), #6366F1, #06B6D4, #EC4899, #6366F1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spinBorder 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes spinBorder { to { --conicAngle: 360deg; } }
.cta-banner::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 32px;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.3), transparent 70%);
  z-index: -1;
  animation: ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 0.95; transform: scale(1.03); }
}
.cta-content {
  position: relative;
  border-radius: 26px;
  padding: 36px 32px 30px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  text-align: center;
  z-index: 2;
}
.cta-top {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  text-align: left;
}
.cta-text { display: flex; flex-direction: column; gap: 2px; }
.cta-app-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.cta-app-tag { font-size: 13px; color: rgba(255,255,255,0.55); }

.appstore-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  height: 70px;
  padding: 0 32px;
  margin-top: 28px;
  border-radius: 18px;
  background: #000;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 16px 32px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
  cursor: pointer;
}
.appstore-btn::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.65), transparent 65%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.appstore-btn:hover { transform: scale(1.05); box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 24px 60px rgba(99,102,241,0.4); }
.appstore-btn:hover::before { opacity: 1; animation: glowBeat 1.6s ease-in-out infinite; }
@keyframes glowBeat {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.appstore-btn__inner { display: inline-flex; align-items: center; gap: 12px; z-index: 1; }
.appstore-btn__txt { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.appstore-btn__small { font-size: 11px; letter-spacing: 0.5px; color: rgba(255,255,255,0.75); }
.appstore-btn__big { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.appstore-ripple {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.appstore-btn.is-rippling .appstore-ripple {
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple {
  0%   { width: 0; height: 0; opacity: 0.5; }
  100% { width: 700px; height: 700px; opacity: 0; }
}

.cta-foot {
  margin-top: 16px;
  font-size: 12px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
}

/* ============================================================
   SHOWCASE STRIP — pre-rendered marketing shots
   ============================================================ */
.showcase {
  position: relative;
  perspective: 1400px;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  justify-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.showcase-card {
  position: relative;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  will-change: transform;
  width: 100%;
}
.showcase-card::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 30px;
  background: conic-gradient(from var(--conicAngle), #6366F1, #06B6D4, #EC4899, #6366F1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
  animation: spinBorder 10s linear infinite;
}
.showcase-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 1s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: 2;
}
.showcase-card:hover { transform: translateY(-8px) rotateX(2deg); filter: drop-shadow(0 40px 80px rgba(99,102,241,0.35)); }
.showcase-card:hover::after { transform: translateX(130%); }
.showcase-card > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .showcase-grid { grid-template-columns: 1fr; max-width: 360px; gap: 20px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero-h1 { font-size: clamp(40px, 11vw, 64px); }
  #phones-parallax { gap: 0; flex-direction: column; align-items: center; }
  .phone--left, .phone--right { display: none; }
  .phone--center { width: 230px; transform: translateY(80px) scale(0.85); }
  .float-deco--ring, .float-deco--dot { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .blob, .float-deco, .phone-glare, .scroll-chev,
  .cta-banner::after, .cta-border, .appstore-btn:hover::before, .phone__glow,
  .hero-cta__glow, .showcase-card::before {
    animation: none !important;
  }
  .phone, .hero-word, .hero-sub, .feature-card, .cta-banner, .reveal-word, .hero-cta-wrap {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Touch devices — no mouse parallax, no magnetic CTA
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .hero-cta:hover {
    --hover-y: 0px;
    --hover-scale: 1;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08),
      0 10px 24px rgba(0,0,0,0.45);
  }
  .hero-cta:hover .hero-cta__glow { opacity: 0.55; animation-duration: 2.5s; }
}