/* ─── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #f8f7f3;
  --bg-tint:       #eef5ef;
  --bg-petal:      #f5f0ea;
  --surface:       rgba(255,255,255,0.58);
  --surface-solid: #ffffff;
  --border:        rgba(126,146,126,0.10);
  --border-mid:    rgba(107,153,120,0.18);
  --text:          #1d1f1c;
  --muted:         #6a6e67;
  --subtle:        #a4a89f;
  --accent:        #6b9978;
  --accent-lt:     #e6f0e9;
  --accent-mid:    #91b89c;
  --accent-soft:   #cde4d4;
  --blush:         #f2e5dd;
  --mist:          #e2f0ea;
  --warn:          #b8823a;
  --danger:        #a85454;
  --wave-fill:     #eef2eb;
  --glass-shadow:  0 24px 60px rgba(74,108,86,0.12);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.82);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  --mx: 50vw;
  --my: 40vh;
}

html { scroll-behavior: smooth; }
a    { color: inherit; text-decoration: none; }
em   { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400; }

body {
  min-height: 100vh;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--bg);
}

button,
input,
textarea,
select {
  font: inherit;
}

@media (pointer: fine) {
  body,
  a,
  button {
    cursor: none;
  }
}

.zen-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(228,255,244,0.92), rgba(103,188,156,0.88) 62%, rgba(64,147,117,0.95));
  box-shadow: 0 0 0 1px rgba(228,255,244,0.75), 0 0 18px rgba(99,184,151,0.34);
  transform: translate3d(-200px, -200px, 0);
  transition: opacity .16s ease;
}

.zen-cursor.is-visible {
  opacity: 1;
}

.zen-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(96,180,148,0.56);
  transform: scale(1);
  opacity: 0.7;
  animation: cursor-ripple 1.45s ease-out infinite;
}

@keyframes cursor-ripple {
  0% { transform: scale(1); opacity: 0.66; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ─── Background canvas ─────────────────────────────── */
.bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(980px 620px at 12% 10%, rgba(204,231,189,0.54) 0%, transparent 67%),
    radial-gradient(900px 560px at 90% 14%, rgba(193,225,178,0.5) 0%, transparent 66%),
    radial-gradient(760px 460px at 58% 78%, rgba(98,134,88,0.46) 0%, transparent 70%),
    radial-gradient(680px 420px at calc(var(--mx) * 1) calc(var(--my) * 1), rgba(221,241,214,0.26) 0%, transparent 74%),
    linear-gradient(180deg, #fbfbf8 0%, #f5f8f1 52%, #f2f6ef 100%);
}

.bg-canvas::before,
.bg-canvas::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.bg-canvas::before {
  background:
    radial-gradient(360px 520px at 52% 25%, rgba(67,102,64,0.54) 0%, rgba(78,122,72,0.34) 34%, rgba(78,122,72,0.08) 62%, transparent 78%),
    radial-gradient(610px 440px at 50% 66%, rgba(24,52,29,0.72) 0%, rgba(33,68,37,0.54) 36%, rgba(33,68,37,0.16) 66%, transparent 84%),
    radial-gradient(300px 650px at 82% 36%, rgba(132,176,116,0.42) 0%, rgba(132,176,116,0.18) 56%, transparent 74%),
    radial-gradient(560px 900px at 22% 38%, rgba(172,206,147,0.32) 0%, transparent 72%),
    radial-gradient(500px 780px at 74% 38%, rgba(140,179,122,0.28) 0%, transparent 74%);
  filter: blur(56px) saturate(1.08);
  opacity: 0.94;
  animation: ink-swell 24s ease-in-out infinite alternate;
}

.bg-canvas::after {
  background:
    linear-gradient(90deg,
      rgba(255,255,252,0) 0%,
      rgba(255,255,252,0.66) 15%,
      rgba(255,255,252,0.68) 19%,
      rgba(255,255,252,0) 28%,
      rgba(255,255,252,0) 39%,
      rgba(255,255,252,0.62) 47%,
      rgba(255,255,252,0.64) 51%,
      rgba(255,255,252,0) 60%,
      rgba(255,255,252,0) 100%),
    radial-gradient(circle at 30% 32%, rgba(255,255,255,0.36) 0 0.55px, transparent 0.95px),
    radial-gradient(circle at 62% 58%, rgba(175,205,165,0.24) 0 0.45px, transparent 0.9px);
  background-size: 100% 100%, 2px 2px, 2.4px 2.4px;
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: channels-drift 26s ease-in-out infinite alternate;
}

@keyframes ink-swell {
  0% { transform: translate3d(-10px, 8px, 0) scale(1.02); }
  50% { transform: translate3d(16px, -10px, 0) scale(1.06); }
  100% { transform: translate3d(-8px, 14px, 0) scale(1.03); }
}

@keyframes channels-drift {
  0% { transform: translate3d(-6px, 0, 0); }
  100% { transform: translate3d(8px, 0, 0); }
}

.petal {
  position: absolute;
  border-radius: 58% 42% 52% 48% / 55% 45% 56% 44%;
  filter: blur(52px);
  opacity: 0.68;
  mix-blend-mode: multiply;
  animation: petal-wave 28s ease-in-out infinite alternate;
}
.p1 {
  width: 260px; height: 320px; top: 6%; left: 8%;
  background: radial-gradient(circle at 40% 38%, rgba(205,235,180,0.9) 0%, rgba(173,210,143,0.78) 38%, rgba(173,210,143,0.16) 74%, transparent 88%);
  animation-duration: 19s;
}
.p2 {
  width: 280px; height: 340px; top: 4%; right: 4%;
  background: radial-gradient(circle at 40% 36%, rgba(185,224,162,0.9) 0%, rgba(152,194,124,0.76) 38%, rgba(152,194,124,0.16) 74%, transparent 88%);
  animation-delay: 4s; animation-duration: 16s;
}
.p3 {
  width: 240px; height: 300px; top: 40%; left: 20%;
  background: radial-gradient(circle at 42% 34%, rgba(199,208,102,0.86) 0%, rgba(159,170,72,0.72) 34%, rgba(159,170,72,0.12) 74%, transparent 88%);
  animation-delay: 2s; animation-duration: 14s;
}
.p4 {
  width: 360px; height: 260px; bottom: 10vh; left: 36%;
  background: radial-gradient(circle at 44% 40%, rgba(28,54,31,0.88) 0%, rgba(24,45,27,0.76) 40%, rgba(24,45,27,0.2) 74%, transparent 88%);
  animation-delay: 7s; animation-duration: 17s;
}
.p5 {
  width: 220px; height: 190px; bottom: -2%; right: -4%;
  background: radial-gradient(circle at 40% 32%, rgba(117,144,83,0.78) 0%, rgba(82,109,57,0.62) 36%, rgba(82,109,57,0.14) 72%, transparent 88%);
  animation-delay: 10s; animation-duration: 20s;
}
.p6 {
  width: 112px; height: 142px; top: 42%; right: 24%;
  background: radial-gradient(circle at 42% 36%, rgba(206,239,229,0.9) 0%, rgba(132,201,173,0.72) 34%, rgba(132,201,173,0.14) 72%, transparent 88%);
  animation-delay: 5s; animation-duration: 15s;
}
.p7 {
  width: 122px; height: 150px; top: 16%; left: 47%;
  background: radial-gradient(circle at 42% 34%, rgba(221,246,232,0.92) 0%, rgba(174,226,200,0.76) 34%, rgba(174,226,200,0.14) 76%, transparent 88%);
  animation-delay: 9s; animation-duration: 13s;
}
.p8 {
  width: 96px; height: 124px; top: 24%; left: 68%;
  background: radial-gradient(circle at 40% 30%, rgba(216,238,198,0.88) 0%, rgba(177,206,151,0.7) 36%, rgba(177,206,151,0.12) 76%, transparent 88%);
  animation-delay: 3s; animation-duration: 12s;
}
.p9 {
  width: 88px; height: 112px; top: 62%; left: 58%;
  background: radial-gradient(circle at 36% 32%, rgba(209,240,225,0.9) 0%, rgba(148,214,185,0.72) 34%, rgba(148,214,185,0.12) 76%, transparent 88%);
  animation-delay: 11s; animation-duration: 18s;
}
.p10 {
  width: 102px; height: 130px; bottom: 24%; right: 28%;
  background: radial-gradient(circle at 38% 34%, rgba(201,233,178,0.86) 0%, rgba(162,196,133,0.68) 34%, rgba(162,196,133,0.12) 76%, transparent 88%);
  animation-delay: 6s; animation-duration: 14s;
}
.p11 {
  width: 78px; height: 98px; top: 8%; right: 24%;
  background: radial-gradient(circle at 40% 34%, rgba(214,245,231,0.9) 0%, rgba(154,220,191,0.74) 36%, rgba(154,220,191,0.12) 76%, transparent 88%);
  animation-delay: 8s; animation-duration: 11s;
}
.p12 {
  width: 190px; height: 160px; bottom: 24%; left: 64%;
  background: radial-gradient(circle at 40% 34%, rgba(178,208,140,0.66) 0%, rgba(138,172,110,0.52) 36%, rgba(138,172,110,0.12) 76%, transparent 88%);
  animation-delay: 1s; animation-duration: 17s;
}
@keyframes petal-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.96); }
  33%  { transform: translate3d(14px, -18px, 0) rotate(5deg) scale(1.03); }
  66%  { transform: translate3d(-10px, 10px, 0) rotate(-3deg) scale(0.98); }
  100% { transform: translate3d(8px, -6px, 0) rotate(4deg) scale(1.04); }
}

@keyframes petal-wave {
  0% { transform: translate3d(0, 0, 0) scale(0.98) skewX(0deg); }
  45% { transform: translate3d(18px, -14px, 0) scale(1.08) skewX(2deg); }
  100% { transform: translate3d(-14px, 16px, 0) scale(1.02) skewX(-2deg); }
}

.glow-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(16px);
  opacity: 0.45;
  animation: glow-float 14s ease-in-out infinite alternate;
}

.g1 { width: 34px; height: 34px; top: 20%; left: 14%; background: rgba(163,236,204,0.85); animation-duration: 9s; }
.g2 { width: 22px; height: 22px; top: 28%; right: 18%; background: rgba(177,219,155,0.8); animation-duration: 7.5s; }
.g3 { width: 18px; height: 18px; top: 58%; left: 72%; background: rgba(180,236,214,0.82); animation-duration: 8.8s; }
.g4 { width: 26px; height: 26px; bottom: 18%; left: 18%; background: rgba(162,202,138,0.78); animation-duration: 6.8s; }
.g5 { width: 16px; height: 16px; bottom: 24%; right: 12%; background: rgba(158,231,198,0.84); animation-duration: 11s; }

.glass-orb {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(86vmax, 1200px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.58);
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.48), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.02) 74%);
  backdrop-filter: blur(24px) saturate(1.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 46px 110px rgba(25,38,25,0.20);
  overflow: hidden;
  animation: orb-wave-main 14s ease-in-out infinite alternate;
}

.glass-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 78% at 16% 6%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.16) 42%, transparent 60%),
    radial-gradient(86% 52% at 54% 98%, rgba(19,31,21,0.72) 0%, rgba(19,31,21,0.22) 52%, transparent 72%),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(40,69,44,0.28) 74%, rgba(255,255,255,0.20) 88%, transparent 100%);
  filter: blur(0.5px) saturate(0.94);
  pointer-events: none;
}

.glass-orb::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, transparent 64%, rgba(46,78,50,0.22) 78%, transparent 94%);
  filter: blur(14px);
  opacity: 0.8;
  pointer-events: none;
}

.glass-orb-liquid {
  position: absolute;
  inset: 8% 8% 10% 8%;
  border-radius: 58% 42% 55% 45% / 50% 50% 58% 42%;
  background:
    radial-gradient(150% 106% at 20% 22%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.68) 40%, rgba(255,255,255,0.24) 72%, transparent 92%),
    radial-gradient(90% 66% at 56% 96%, rgba(21,35,24,0.60) 0%, rgba(21,35,24,0.18) 48%, transparent 70%);
  filter: blur(2.8px);
  transform: rotate(4deg);
  animation: liquid-wave 8.6s ease-in-out infinite alternate;
}

.glass-orb-core {
  display: none;
}

@keyframes orb-wave-main {
  0% { transform: translate(-50%, -50%) translate3d(-18px, 12px, 0) scale(0.98); }
  42% { transform: translate(-50%, -50%) translate3d(42px, -38px, 0) scale(1.03); }
  100% { transform: translate(-50%, -50%) translate3d(-34px, 32px, 0) scale(1.01); }
}

@keyframes liquid-wave {
  0% { transform: rotate(3deg) scale(0.99); }
  50% { transform: rotate(-5deg) scale(1.03); }
  100% { transform: rotate(4deg) scale(1.01); }
}

.glass-orb-lite {
  position: absolute;
  width: min(34vw, 440px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.36), rgba(255,255,255,0.08) 52%, rgba(255,255,255,0.02) 78%);
  backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 24px 56px rgba(34,52,31,0.16);
}

.orb-a {
  left: 8%;
  top: 18%;
  animation: orb-collision-a 9.2s ease-in-out infinite;
}

.orb-b {
  left: 68%;
  top: 18%;
  width: min(30vw, 380px);
  animation: orb-collision-b 9.8s ease-in-out infinite;
}

.orb-c {
  left: 64%;
  top: 62%;
  width: min(26vw, 330px);
  animation: orb-collision-c 8.8s ease-in-out infinite;
}

@keyframes orb-collision-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.98); }
  38% { transform: translate3d(260px, 186px, 0) scale(1.04); }
  62% { transform: translate3d(324px, 228px, 0) scale(1.02); }
}

@keyframes orb-collision-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  32% { transform: translate3d(-286px, 170px, 0) scale(1.03); }
  64% { transform: translate3d(-350px, 220px, 0) scale(1.01); }
}

@keyframes orb-collision-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
  42% { transform: translate3d(-248px, -212px, 0) scale(1.06); }
  70% { transform: translate3d(-302px, -258px, 0) scale(1.02); }
}

@keyframes glow-float {
  0% { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0.45; }
  50% { transform: translate3d(6px, -16px, 0) scale(1.08); opacity: 0.95; }
  100% { transform: translate3d(-8px, 8px, 0) scale(0.98); opacity: 0.55; }
}

.ripple-field {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle 1px at 1px 1px, rgba(104,146,113,0.18) 0%, transparent 100%);
  background-size: 38px 38px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
  animation: ripple-drift 36s linear infinite;
}

@keyframes ripple-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-14px, 12px, 0); }
  100% { transform: translate3d(16px, -8px, 0); }
}

.dust-field {
  position: absolute; inset: -10% -12%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.34) 0.38px, transparent 0.6px),
    radial-gradient(circle, rgba(152,196,139,0.20) 0.34px, transparent 0.58px),
    radial-gradient(circle, rgba(225,245,220,0.22) 0.32px, transparent 0.52px);
  background-size: 1.8px 1.8px, 2.2px 2.2px, 2.8px 2.8px;
  background-position: 0 0, 30px 18px;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  animation: dust-float 36s linear infinite;
}

/* ─── Poster Premium v10 ─────────────────────────────── */

/* ── base canvas ── */
.bg-canvas {
  background:
    linear-gradient(180deg, #f9f7f4 0%, #f5f6f1 50%, #f1f5ee 100%) !important;
}

/* ── main colour layer: warm amber + cool sage + atmospheric mist ── */
/* ─── Poster Premium v11 ─────────────────────────────── */

/* ── base canvas ── */
.bg-canvas {
  background:
    linear-gradient(180deg, #fefdfa 0%, #fbfcf9 46%, #f7fbfa 100%) !important;
}

/* ── main colour masses — large, less-blurred, fills screen ── */
.bg-canvas::before {
  inset: -6% !important;
  background:
    /* amber-gold orb — upper left, layered */
    radial-gradient(34% 38% at 18% 26%, rgba(246,226,166,0.76) 0%, rgba(236,206,132,0.58) 30%, rgba(222,184,96,0.24) 54%, transparent 76%),
    radial-gradient(62% 78% at 16% 28%, rgba(234,206,150,0.40) 0%, rgba(214,184,124,0.18) 46%, transparent 74%),
    /* sage green orb — right side, large */
    radial-gradient(66% 82% at 82% 52%, rgba(176,208,176,0.46) 0%, rgba(154,190,154,0.22) 44%, transparent 74%),
    /* cool blue-grey mist — upper band, more separation */
    radial-gradient(28% 20% at 48% 10%, rgba(228,240,248,0.72) 0%, rgba(206,226,240,0.40) 40%, rgba(182,210,230,0.16) 62%, transparent 78%),
    radial-gradient(88% 44% at 50% -4%, rgba(194,220,238,0.42) 0%, rgba(170,200,222,0.18) 52%, transparent 78%),
    /* warm amber fill — lower left */
    radial-gradient(52% 52% at 20% 84%, rgba(214,190,146,0.30) 0%, rgba(198,176,132,0.12) 50%, transparent 76%),
    /* sage accent — lower right */
    radial-gradient(50% 54% at 80% 82%, rgba(176,208,182,0.28) 0%, rgba(154,190,160,0.11) 50%, transparent 76%),
    /* airy white fog masses */
    radial-gradient(42% 38% at 46% 36%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.18) 42%, transparent 72%),
    radial-gradient(38% 32% at 62% 64%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.12) 44%, transparent 72%),
    /* glass veil */
    linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.24) 54%, rgba(255,255,255,0.32) 100%),
    /* vertical gloss */
    linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.24) 22%, rgba(255,255,255,0.06) 36%, rgba(255,255,255,0.28) 54%, rgba(255,255,255,0.00) 74%) !important;
  filter: blur(48px) saturate(1.03) brightness(1.08) !important;
  opacity: 0.95 !important;
  animation: premium-ink-flow 44s ease-in-out infinite alternate !important;
}

/* ── film grain + texture ── */
.bg-canvas::after {
  inset: -2% !important;
  background:
    radial-gradient(circle, rgba(255,255,255,0.34) 0 0.42px, transparent 0.68px),
    radial-gradient(circle, rgba(198,210,220,0.12)  0 0.30px, transparent 0.52px) !important;
  background-size: 2.0px 2.0px, 2.6px 2.6px !important;
  opacity: 0.14 !important;
  mix-blend-mode: soft-light !important;
  animation: none !important;
}

@keyframes premium-ink-flow {
  0%   { transform: translate3d(-10px,  6px, 0) scale(1.01); }
  25%  { transform: translate3d( 16px, -12px, 0) scale(1.04); }
  55%  { transform: translate3d( -7px,  18px, 0) scale(1.02); }
  100% { transform: translate3d( 14px,  -5px, 0) scale(1.05); }
}

/* ── ink form petals ── */
.petal {
  filter: blur(56px) !important;
  opacity: 0.42 !important;
  mix-blend-mode: multiply !important;
  animation: premium-petal-wave 38s ease-in-out infinite alternate !important;
  box-shadow:
    inset 0 1.6px 0 rgba(255,255,255,0.46),
    inset 0 10px 18px rgba(255,255,255,0.20),
    inset 0 -9px 13px rgba(98,122,158,0.10),
    inset 0 -2px 0 rgba(106,128,166,0.19),
    inset 0 0 0 1.8px rgba(255,255,255,0.28),
    0 0 34px rgba(255,255,255,0.16) !important;
}

.petal::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.20) 15%, transparent 31%),
    radial-gradient(ellipse at 72% 76%, rgba(104,126,168,0.15) 0%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 34%, rgba(255,255,255,0.03) 56%, rgba(100,124,164,0.12) 100%),
    linear-gradient(128deg, rgba(255,255,255,0.28), rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1.2px 0 rgba(255,255,255,0.58),
    inset 0 0 0 1.5px rgba(255,255,255,0.44),
    inset 14px 10px 26px rgba(255,255,255,0.12),
    inset -12px -14px 26px rgba(100,124,164,0.08),
    inset 0 -2px 0 rgba(102,124,166,0.17),
    0 0 0 0.8px rgba(255,255,255,0.20);
  opacity: 0.98;
  animation: glass-edge-tremble 6.6s ease-in-out infinite alternate;
}

.petal::before {
  content: "";
  position: absolute;
  inset: 1.1%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 34% 18%, rgba(255,255,255,0.26) 0%, transparent 34%),
    radial-gradient(ellipse at 54% 54%, rgba(255,255,255,0.10) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 38%, rgba(94,116,156,0.05) 100%);
  box-shadow:
    inset 0 0.8px 0 rgba(255,255,255,0.46),
    inset 0 -1px 0 rgba(96,118,160,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 0 0 0.7px rgba(255,255,255,0.22);
  opacity: 0.86;
  mix-blend-mode: screen;
  animation: glass-edge-tremble 5.2s ease-in-out infinite alternate-reverse;
}

.p1, .p2, .p4, .p7 { display: block !important; }

/* p1 — amber orb, left */
.p1 {
  width: 52vw !important; height: 110vh !important;
  top: -4% !important; left: -4% !important;
  background: radial-gradient(ellipse at 44% 36%,
    rgba(246,226,170,0.68) 0%, rgba(236,206,138,0.42) 28%, rgba(216,180,98,0.18) 50%,
    transparent 76%) !important;
  animation-delay: 0s !important;
}

/* p2 — sage green orb, right */
.p2 {
  width: 54vw !important; height: 110vh !important;
  top: -2% !important; right: -6% !important; left: auto !important;
  background: radial-gradient(ellipse at 56% 42%,
    rgba(188,218,190,0.54) 0%, rgba(164,196,168,0.28) 32%, rgba(142,178,150,0.12) 54%,
    transparent 76%) !important;
  animation-delay: 7s !important;
}

/* p4 — deep green centre anchor */
.p4 {
  width: 48vw !important; height: 80vh !important;
  top: 22% !important; left: 26% !important; bottom: auto !important;
  background: radial-gradient(ellipse at 48% 46%,
    rgba(216,230,220,0.40) 0%, rgba(192,210,198,0.20) 34%, rgba(168,190,178,0.08) 54%,
    transparent 78%) !important;
  animation-delay: 14s !important;
}

/* p7 — central white glass sphere highlight */
.p7 {
  width: 58vw !important; height: 72vh !important;
  top: 8% !important; left: 20% !important;
  background: radial-gradient(ellipse at 38% 32%,
    rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.64) 26%,
    rgba(255,255,255,0.24) 52%, transparent 76%) !important;
  filter: blur(24px) !important;
  opacity: 0.84 !important;
  mix-blend-mode: normal !important;
  animation-delay: 21s !important;
}

/* hide all other decorative layers */
.p3, .p5, .p6, .p8, .p9, .p10, .p11, .p12,
.glow-orb, .ripple-field, .glass-orb, .glass-orb-lite {
  display: none !important;
}

@keyframes premium-petal-wave {
  0%   { transform: translate3d(  0px,   0px, 0) scale(0.98); }
  25%  { transform: translate3d( 14px, -10px, 0) scale(1.04); }
  60%  { transform: translate3d( -8px,  16px, 0) scale(1.01); }
  100% { transform: translate3d( 12px,  -6px, 0) scale(1.05); }
}

@keyframes glass-edge-tremble {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.92;
  }
  25% {
    transform: translate3d(0.6px, -0.4px, 0) scale(1.002);
    opacity: 0.97;
  }
  55% {
    transform: translate3d(-0.5px, 0.5px, 0) scale(0.998);
    opacity: 0.94;
  }
  100% {
    transform: translate3d(0.4px, -0.3px, 0) scale(1.001);
    opacity: 0.98;
  }
}

/* ── CTA buttons — soft deep forest green ── */
.btn-primary {
  background: linear-gradient(180deg, rgba(96,132,110,0.78) 0%, rgba(84,120,98,0.82) 100%) !important;
  color: rgba(250,252,250,0.98) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 12px 30px rgba(112,142,124,0.18), inset 0 1px 0 rgba(255,255,255,0.26) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
}
.btn-primary:hover {
  box-shadow: 0 16px 34px rgba(112,142,124,0.22), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.nav-cta {
  background: rgba(104,136,116,0.64) !important;
  color: rgba(247,251,248,0.96) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 10px 24px rgba(116,146,128,0.14), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(16px) saturate(1.04) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.nav-cta:hover { opacity: 0.96 !important; }

/* ── cards / hero — lighter shadows, softer contrast ── */
.feature-card,
.hero-peek,
.step,
.testimonial,
.demo-card,
.mockup-browser,
.callout-inner {
  box-shadow:
    0 14px 36px rgba(166,184,180,0.14),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
}
.feature-card:hover {
  box-shadow:
    0 18px 42px rgba(166,184,180,0.18),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
.feature-card {
  background: linear-gradient(165deg,
    rgba(255,255,255,0.56) 0%, rgba(247,250,247,0.34) 100%) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.hero-peek {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.58) 0%, rgba(244,250,246,0.34) 56%,
    rgba(250,245,238,0.30) 100%) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

.step,
.testimonial,
.demo-card,
.mockup-browser,
.callout-inner {
  background: linear-gradient(165deg,
    rgba(255,255,255,0.54) 0%, rgba(246,249,247,0.30) 100%) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

@media (pointer: fine) {
  body, a, button { cursor: auto !important; }
}
.zen-cursor { display: none !important; }

@keyframes dust-float {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(18px, -22px, 0); }
}

body > *:not(.bg-canvas) { position: relative; z-index: 1; }

body {
  overflow-x: hidden;
}

/* ─── Nav ──────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--text); opacity: 0.9;
}

.nav-logo img {
  display: block;
  height: 28px;
  width: auto;
  filter: saturate(1.18);
}

.brand-wordmark {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #567a58;
  opacity: 0.88;
}

.brand-wordmark--panel {
  font-size: 9px;
  letter-spacing: 0.26em;
  color: #628465;
  opacity: 0.74;
}

.nav-cta {
  font-size: 13px; font-weight: 400;
  padding: 8px 18px;
  border-radius: 100px;
  transition: opacity .15s, transform .15s;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav-cta:hover { transform: translateY(-1px); }

/* ─── Minimal vertical divider ─────────────────────── */
.section-divider {
  width: 100%;
  height: 34px;
  display: grid;
  place-items: center;
}

.section-divider::before {
  content: "";
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(120,138,126,0) 0%, rgba(120,138,126,0.38) 40%, rgba(120,138,126,0.38) 60%, rgba(120,138,126,0) 100%);
}

/* ─── Hero ─────────────────────────────────────────── */
.hero {
  padding: 132px 40px 68px;
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  justify-items: center;
}

.hero-copy {
  text-align: center;
  max-width: 680px;
}

.hero-visual {
  display: flex;
  justify-content: center;
  overflow: visible;
}

.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-headline {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(40px, 5.3vw, 66px);
  line-height: 1.1; font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: clamp(15px, 2vw, 18px); color: var(--muted);
  line-height: 1.75; margin-bottom: 32px;
  max-width: 33ch;
  margin-left: auto;
  margin-right: auto;
}

.br-desk { display: block; }

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(180deg, rgba(28,31,29,0.96) 0%, rgba(34,39,36,0.92) 100%); color: var(--bg);
  border-radius: 100px;
  font-size: 15px; font-weight: 500;
  box-shadow: 0 14px 30px rgba(26,32,28,0.16);
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 18px 34px rgba(26,32,28,0.2); }
.btn-primary--light {
  background: var(--surface); color: var(--text);
}
.btn-primary--large {
  padding: 18px 42px; font-size: 17px;
}

.hero-footnote {
  margin-top: 16px; font-size: 12px; color: var(--subtle);
}

.hero-preview-strip {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px auto 18px;
  max-width: 860px;
}

.hero-peek {
  text-align: left;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(107,153,120,0.16);
  background: linear-gradient(160deg, rgba(255,255,255,0.62) 0%, rgba(234,246,240,0.52) 56%, rgba(244,234,227,0.48) 100%);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  backdrop-filter: blur(18px) saturate(1.1);
  position: relative;
  overflow: hidden;
  animation: card-float 8s ease-in-out infinite;
}

.hero-peek:nth-child(2) { animation-delay: 1.1s; }
.hero-peek:nth-child(3) { animation-delay: 2.2s; }

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-peek::before,
.mockup-browser::before,
.feature-card::before,
.step::before,
.demo-card::before,
.testimonial::before,
.callout-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.36), transparent 42%, rgba(255,255,255,0.16) 72%, transparent 100%);
  pointer-events: none;
}

.hero-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hero-peek-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #2f7867;
}

.hero-peek-time {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 42px;
  color: #2e5d52;
  line-height: 1;
  margin: 10px 0 12px;
  min-width: 2.5ch;
}

.hero-peek-time::before,
.hero-peek-time::after,
.demo-timer::before,
.demo-timer::after {
  content: none;
}

.hero-peek-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(223,232,178,0.26) 0%, rgba(196,221,164,0.22) 60%, rgba(176,210,170,0.22) 100%);
  overflow: hidden;
}

.hero-peek-bar span {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, #dbe89b 0%, #c6de8a 34%, #a8d18a 70%, #8cc89a 100%);
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(194,222,142,0.34);
}

.hero-peek-theme-ui {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.hero-peek-theme-ui span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(79,116,104,0.22);
}

.hero-peek-theme-ui .short {
  width: 62%;
}

.hero-peek-theme.is-dark {
  background: rgba(31,41,38,0.92);
  border-color: rgba(136,194,171,0.22);
}

.hero-peek-theme.is-dark .hero-peek-tag,
.hero-peek-theme.is-dark .theme-toggle {
  color: #d8efe5;
}

.hero-peek-theme.is-dark .theme-toggle {
  background: rgba(255,255,255,0.08);
  border-color: rgba(172,224,203,0.2);
}

.hero-peek-theme.is-dark .hero-peek-theme-ui span {
  background: rgba(184,227,210,0.26);
}

.hero-peek-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.hero-peek-list span {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(107,153,120,0.16);
  color: #456258;
  font-size: 12px;
}

/* ─── Browser mockup ───────────────────────────────── */
.mockup-wrap {
  margin-top: 4px;
  width: 100%;
  perspective: 1200px;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.mockup-browser {
  display: inline-block;
  width: min(680px, 92vw);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-mid);
  background: linear-gradient(160deg, rgba(255,255,255,0.68) 0%, rgba(240,247,243,0.58) 100%);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 34px 88px rgba(60,90,70,0.14), 0 8px 20px rgba(60,90,70,0.08), var(--glass-highlight);
  overflow: hidden;
  text-align: left;
  transform: translate3d(0, 0, 0);
  transition: transform .35s ease;
  position: relative;
}
.mockup-browser:hover {
  transform: translate3d(0, -2px, 0);
}

.mockup-browser::after {
  content: "";
  position: absolute;
  inset: auto 8% -20% 8%;
  height: 40%;
  background: radial-gradient(ellipse at center, rgba(126,198,168,0.18), transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: rgba(240,242,237,0.9);
  border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.red    { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green  { background: #27c93f; }

.mockup-url {
  flex: 1; margin-left: 10px;
  font-size: 11px; color: var(--subtle);
  background: rgba(0,0,0,0.05); border-radius: 6px;
  padding: 3px 10px;
}

.mockup-body { padding: 0; }

.panel-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--text); opacity: 0.45;
}

.panel-title img {
  display: block;
  height: 14px;
  width: auto;
  opacity: 0.88;
  filter: saturate(1.14);
}
.panel-tabs-row { display: flex; gap: 4px; }
.ptab {
  font-size: 11px; font-weight: 500; padding: 4px 10px;
  border-radius: 100px; color: var(--muted); cursor: pointer;
}
.ptab.active {
  background: var(--accent-lt); color: var(--accent);
}

.tab-list { padding: 6px 0; }

.tab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  transition: background .12s;
}
.tab-row:hover, .tab-row--active { background: rgba(0,0,0,0.03); }

.fav {
  width: 16px; height: 16px; border-radius: 4px;
  background: #e0ddd8; flex-shrink: 0;
}
.fav-yt { background: #ff0000; }
.fav-x  { background: #000; }

.tab-info { flex: 1; min-width: 0; }
.tab-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-url   { font-size: 10px; color: var(--subtle); margin-top: 1px; }

.leaf {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.leaf--green  { background: #52a26a; }
.leaf--yellow { background: #c9a03a; }
.leaf--red    { background: #b85555; }

.zen-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.zen-orb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.2px solid rgba(244,250,213,0.7);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.46) 36%, rgba(235,244,206,0.26) 62%, rgba(220,235,205,0.18) 100%),
    linear-gradient(150deg, rgba(236,246,219,0.5) 0%, rgba(205,228,195,0.42) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.3),
    0 0 10px rgba(196,222,145,0.34),
    0 5px 12px rgba(122,148,104,0.2);
  position: relative;
  animation: none;
}
.zen-orb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #e8f2ae 0%, #b8d789 48%, #86bf8f 100%);
  box-shadow: 0 0 7px rgba(187,218,129,0.5);
}
.zen-label {
  font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.05em;
}

/* ─── Problem statement ───────────────────────────── */
.problem {
  padding: 74px 40px 70px;
  max-width: 1100px;
  margin: 0 auto;
}

.problem,
.features,
.how,
.showcase,
.callout,
.social,
.final-cta,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

.problem-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: stretch;
}

.problem-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.problem-copy .section-title {
  margin-bottom: 16px;
}

.problem-lead {
  font-size: 15px;
  line-height: 1.7;
  color: #537065;
  margin-bottom: 16px;
  max-width: 42ch;
}

.problem-questions {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-bottom: 0;
}

.problem-questions li {
  position: relative;
  padding: 11px 14px 11px 34px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.64) 0%, rgba(239,247,233,0.42) 100%);
  border: 1px solid rgba(176,206,154,0.24);
  color: #4e6b60;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(123,152,118,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}

.problem-questions li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 34% 28%, #ecf4b4 0%, #bfdc90 44%, #88bf8f 100%);
  box-shadow: 0 0 8px rgba(194,222,142,0.52);
}

.problem-visual {
  position: relative;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  display: flex;
  align-items: stretch;
}

.problem-product-card {
  width: 100%;
  max-width: none;
  margin-left: auto;
  min-height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.46);
  background: linear-gradient(162deg, rgba(255,255,255,0.76) 0%, rgba(245,250,245,0.62) 58%, rgba(238,247,242,0.54) 100%);
  box-shadow: 0 18px 40px rgba(124,151,116,0.16), inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pp-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(240,242,236,0.74);
  border-bottom: 1px solid rgba(205,217,204,0.56);
}

.pp-url {
  margin-left: 8px;
  flex: 1;
  font-size: 11px;
  color: #95a096;
  background: rgba(0,0,0,0.04);
  border-radius: 7px;
  padding: 4px 10px;
}

.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(205,217,204,0.5);
}

.pp-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #7f8d84;
}

.pp-logo img {
  display: block;
  height: 14px;
  width: auto;
  opacity: 0.9;
  filter: saturate(1.14);
}

.pp-tabs {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #74837a;
}

.pp-tabs span {
  padding: 5px 10px;
  border-radius: 999px;
}

.pp-tabs .active {
  background: rgba(176,214,176,0.3);
  color: #5c896d;
}

.pp-list {
  display: grid;
  gap: 0;
  padding: 8px 0;
  flex: 1;
}

.pp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(205,217,204,0.34);
}

.pp-fav {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(206,211,204,0.9);
  flex-shrink: 0;
}

.pp-txt {
  min-width: 0;
  flex: 1;
  display: grid;
}

.pp-txt b {
  font-size: 14px;
  font-weight: 500;
  color: #3e524a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-txt small {
  font-size: 12px;
  color: #9aa79e;
}

.pp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(205,217,204,0.5);
  background: rgba(245,250,246,0.58);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #678c7c;
  text-transform: uppercase;
}

.pp-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.2px solid rgba(246,251,216,0.72);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.44) 34%, rgba(236,244,208,0.24) 62%, rgba(220,234,205,0.18) 100%),
    linear-gradient(150deg, rgba(236,246,219,0.5) 0%, rgba(204,228,194,0.38) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 10px rgba(198,222,146,0.36);
  position: relative;
}

.pp-orb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #ebf3b1 0%, #bfdc8d 46%, #86be8e 100%);
  box-shadow: 0 0 8px rgba(188,218,131,0.48);
}

/* ─── Features ─────────────────────────────────────── */
.features {
  padding: 84px 40px;
  max-width: 1100px; margin: 0 auto;
}

.section-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}

.section-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.18; font-weight: 400;
  margin-bottom: 64px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.64) 0%, rgba(235,246,240,0.50) 100%);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  transition: box-shadow .22s, transform .22s, border-color .22s;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  box-shadow: 0 14px 40px rgba(60,90,70,0.09);
  border-color: rgba(107,153,120,0.22);
  transform: translateY(-3px);
}

.feature-card--wide {
  grid-column: span 2;
}

.fc-icon { font-size: 26px; margin-bottom: 14px; }

.feature-card h3 {
  font-size: 16px; font-weight: 600; margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px; color: var(--muted); line-height: 1.7;
}

.fc-detail {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}

.stale-pill {
  font-size: 11px; font-weight: 500;
  padding: 4px 12px; border-radius: 100px;
}
.stale-pill--red    { background: rgba(184,85,85,0.10); color: var(--danger); }
.stale-pill--orange { background: rgba(201,128,58,0.10); color: var(--warn); }
.stale-pill--yellow { background: rgba(201,160,58,0.10); color: #a07820; }

/* ─── How it works ─────────────────────────────────── */
.how {
  padding: 84px 40px;
  max-width: 1100px; margin: 0 auto;
}

.steps {
  display: flex; align-items: flex-start; gap: 0;
  margin-top: 8px;
}

.step {
  flex: 1;
  background: linear-gradient(165deg, rgba(255,255,255,0.62) 0%, rgba(235,246,240,0.48) 100%);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  transition: box-shadow .22s, transform .22s;
  position: relative;
  overflow: hidden;
}
.step:hover { box-shadow: 0 10px 32px rgba(60,90,70,0.08); transform: translateY(-2px); }

.step-connector {
  width: 40px; flex-shrink: 0; height: 2px;
  background: var(--border); align-self: center;
  margin: 0 -1px;
}

.step-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent);
  margin-bottom: 16px;
}

.step h3 {
  font-size: 16px; font-weight: 600; margin-bottom: 10px;
}

.step p {
  font-size: 14px; color: var(--muted); line-height: 1.7;
}

/* ─── Product showcase ────────────────────────────── */
.showcase {
  padding: 74px 40px 66px;
  max-width: 1100px; margin: 0 auto;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

.demo-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.62) 0%, rgba(238,246,240,0.52) 54%, rgba(245,234,228,0.44) 100%);
  border: 1px solid rgba(107,153,120,0.18);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  backdrop-filter: blur(18px) saturate(1.08);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  overflow: hidden;
}

.demo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px rgba(67,98,79,0.13), inset 0 1px 0 rgba(255,255,255,0.75);
}

.demo-card,
.feature-card,
.step,
.testimonial {
  animation: card-breathe 9s ease-in-out infinite;
}

.feature-card:nth-child(2),
.step:nth-child(3),
.testimonial:nth-child(2) { animation-delay: 1.2s; }

.feature-card:nth-child(3),
.step:nth-child(5),
.testimonial:nth-child(3) { animation-delay: 2.4s; }

@keyframes card-breathe {
  0%, 100% { box-shadow: var(--glass-shadow), var(--glass-highlight); }
  50% { box-shadow: 0 26px 62px rgba(74,108,86,0.16), var(--glass-highlight); }
}

.demo-zen { grid-row: span 2; }

.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}

.demo-chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: #2a7564;
  background: rgba(92,170,146,0.15);
  border: 1px solid rgba(92,170,146,0.24);
  border-radius: 999px;
  padding: 7px 12px;
}

.demo-chip-soft {
  letter-spacing: 0.08em;
  color: #5d776b;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(107,153,120,0.16);
}

.demo-timer {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(64px, 10vw, 86px);
  line-height: 0.98;
  color: #2f5f53;
  letter-spacing: 0.04em;
  margin: 18px 0 20px;
  min-width: 3.5ch;
}

.demo-copy {
  color: #60776f;
  font-size: 14px;
  line-height: 1.72;
  margin-bottom: 16px;
}

.demo-meter {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(223,232,178,0.26) 0%, rgba(193,218,158,0.24) 54%, rgba(170,206,165,0.22) 100%);
  overflow: hidden;
  margin-bottom: 18px;
}

.demo-meter span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dbe89b 0%, #c5de89 30%, #a3cf89 66%, #88c59b 100%);
  box-shadow: 0 0 12px rgba(194,222,142,0.34);
  animation: meter-pulse 2.8s ease-in-out infinite;
}

@keyframes meter-pulse {
  0%, 100% { filter: saturate(0.95) brightness(1); }
  50% { filter: saturate(1.08) brightness(1.05); }
}

.demo-tabs {
  list-style: none;
  display: grid;
  gap: 10px;
}

.demo-tabs li {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  color: #37544d;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(107,153,120,0.18);
  border-radius: 12px;
  padding: 10px 12px;
}

.demo-tabs em {
  font-family: "Inter", system-ui, sans-serif;
  color: #5b8677;
  font-style: normal;
  font-size: 12px;
}

.theme-toggle {
  border: 1px solid rgba(107,153,120,0.23);
  background: rgba(255,255,255,0.48);
  color: #355d52;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.theme-preview {
  border: 1px solid rgba(107,153,120,0.2);
  border-radius: 16px;
  background: rgba(250,253,250,0.9);
  padding: 12px;
  margin-bottom: 14px;
  transition: background .22s ease, border-color .22s ease;
}

.theme-topbar {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(116,171,149,0.44), rgba(188,222,208,0.64));
  margin-bottom: 10px;
}

.theme-row {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0;
}

.theme-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #66b49c;
}

.theme-line {
  height: 8px;
  border-radius: 999px;
  flex: 1;
  background: rgba(79,116,104,0.25);
}

.theme-line.short {
  max-width: 55%;
}

.theme-demo.is-dark .theme-preview {
  background: rgba(34,44,41,0.93);
  border-color: rgba(142,196,175,0.32);
}

.theme-demo.is-dark .theme-topbar {
  background: linear-gradient(90deg, rgba(112,188,161,0.52), rgba(54,83,73,0.88));
}

.theme-demo.is-dark .theme-dot {
  background: #89d0b7;
}

.theme-demo.is-dark .theme-line {
  background: rgba(180,224,207,0.28);
}

.queue-rows {
  display: grid;
  gap: 10px;
  margin: 12px 0 18px;
}

.queue-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(107,153,120,0.16);
  color: #49645b;
  font-size: 13px;
}

.queue-fav {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(145deg, #b5d8c5, #89bea4);
  flex-shrink: 0;
}

.queue-fav.alt {
  background: linear-gradient(145deg, #d6d9b5, #b7c18a);
}

.queue-action {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(107,153,120,0.18);
  border: 1px solid rgba(107,153,120,0.26);
  color: #2c6d5b;
  font-weight: 600;
}

/* ─── Callout ───────────────────────────────────────── */
.callout {
  padding: 72px 40px;
  text-align: center;
}

.callout-inner {
  max-width: 640px; margin: 0 auto;
  background:
    radial-gradient(ellipse 55% 55% at 20% 20%, rgba(133,195,165,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 75%, rgba(188,222,198,0.24) 0%, transparent 70%),
    linear-gradient(156deg, rgba(236,247,240,0.95) 0%, rgba(224,240,230,0.9) 100%);
  color: #2b4d44;
  border-radius: var(--radius-xl);
  padding: 72px 56px 64px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(107,153,120,0.28);
  box-shadow: 0 22px 54px rgba(66,97,80,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(1.06);
}
.callout-inner::after {
  content: ""; position: absolute; top: -80px; right: -60px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(102,177,146,0.25) 0%, transparent 65%);
  pointer-events: none;
}
.callout-inner .btn-primary--light {
  position: relative;
  z-index: 1;
}

.callout::before {
  content: ""; position: absolute; bottom: -60px; left: -50px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(162,205,173,0.26) 0%, transparent 65%);
  pointer-events: none;
}

.callout-orb {
  position: relative;
  width: 66px;
  height: 66px;
  margin: 0 auto 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.4px solid rgba(246,251,216,0.72);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.42) 34%, rgba(235,244,206,0.24) 62%, rgba(221,236,208,0.18) 100%),
    linear-gradient(150deg, rgba(236,246,219,0.54) 0%, rgba(204,228,194,0.4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 0 0 1px rgba(255,255,255,0.26),
    0 0 18px rgba(198,222,146,0.36),
    0 10px 24px rgba(122,149,106,0.18);
}

.callout-orb::before {
  content: none;
}

.callout-orb::after {
  content: none;
}

.orb-ring {
  display: none;
}

.r1, .r2, .r3 { display: none; }

@keyframes ring-expand {
  0%   { opacity: 0.68; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(1.26); }
}

.orb-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ebf3b1 0%, #bfdc8d 46%, #86be8e 100%);
  box-shadow: 0 0 11px rgba(188,218,131,0.52);
  animation: none;
  position: relative;
  z-index: 1;
}

.callout-inner h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 400; line-height: 1.2;
  margin-bottom: 20px;
}

.callout-inner em { color: #2a7a65; }

.callout-inner p {
  font-size: 15px; line-height: 1.75;
  color: #4f6f65;
  margin-bottom: 36px;
}

.callout .btn-primary--light {
  background: linear-gradient(180deg, rgba(124,186,161,0.26) 0%, rgba(116,175,151,0.34) 100%);
  border: 1px solid rgba(107,153,120,0.3);
  color: #256754;
}

.callout .btn-primary--light:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(77,131,111,0.2);
}

@media (prefers-reduced-motion: reduce) {
  .petal,
  .glow-orb,
  .ripple-field,
  .dust-field,
  .hero-peek,
  .demo-card,
  .feature-card,
  .step,
  .testimonial,
  .zen-cursor::after,
  .zen-orb {
    animation: none !important;
  }
}

/* ─── Social proof ─────────────────────────────────── */
.social {
  padding: 100px 40px;
  max-width: 1100px; margin: 0 auto;
}

.testimonials {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
  margin-top: 8px;
}

.testimonial {
  background: linear-gradient(165deg, rgba(255,255,255,0.62) 0%, rgba(235,246,240,0.48) 100%);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  transition: box-shadow .22s, transform .22s;
  position: relative;
  overflow: hidden;
}
.testimonial:hover { box-shadow: 0 10px 32px rgba(60,90,70,0.08); transform: translateY(-2px); }

.testimonial p {
  font-size: 14px; line-height: 1.75; color: var(--text);
  margin-bottom: 18px;
}

.testi-author {
  font-size: 12px; color: var(--subtle); font-weight: 500;
}

/* ─── Final CTA ────────────────────────────────────── */
.final-cta {
  padding: 100px 40px;
  text-align: center;
}

.final-cta h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400; margin-bottom: 16px;
}

.final-cta p {
  font-size: 15px; color: var(--muted); margin-bottom: 36px;
}

.final-footnote {
  margin-top: 18px; font-size: 12px; color: var(--subtle);
}

/* ─── Footer ───────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 -6px 24px rgba(92,128,105,0.05);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--text); opacity: 0.82;
}

.footer-logo img {
  display: block;
  height: 24px;
  width: auto;
  opacity: 0.94;
  filter: saturate(1.16);
}

.footer-links {
  display: flex; gap: 28px;
}
.footer-links a {
  font-size: 13px; color: var(--muted);
  transition: color .15s;
}
.footer-links a:hover { color: var(--text); }

/* ─── Scroll animations ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.problem-copy.reveal,
.problem-product-card.reveal {
  transition-duration: .8s;
  transition-timing-function: ease;
}

.problem-product-card.reveal {
  transition-delay: .08s;
}

/* Hero switches to split layout only on medium-large screens */
@media (min-width: 1100px) and (max-width: 1439px) {
  .hero {
    max-width: 1200px;
    text-align: left;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 68px;
    justify-items: stretch;
  }

  .hero-copy {
    text-align: left;
    max-width: 560px;
  }

  .hero-visual {
    justify-content: flex-end;
  }

  .hero-sub {
    margin-left: 0;
    margin-right: 0;
  }

  .mockup-browser {
    width: min(736px, 112%);
  }
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .nav { padding: 14px 20px; }
  .hero { padding: 106px 24px 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: none; text-align: center; }
  .hero-sub { max-width: none; }
  .hero-visual { justify-content: center; }
  .br-desk { display: none; }
  .glass-orb {
    width: min(96vw, 560px);
    top: 38%;
    opacity: 0.92;
  }
  .glass-orb-lite { width: min(54vw, 320px); }
  .orb-a { left: -8%; top: 24%; }
  .orb-b { left: 62%; top: 18%; }
  .orb-c { left: 58%; top: 66%; }
  .hero-preview-strip { display: none; }
  .problem { padding: 64px 24px; }
  .problem-grid { grid-template-columns: 1fr; gap: 24px; }
  .problem-product-card { width: 100%; margin-left: 0; height: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card--wide { grid-column: span 1; }
  .steps { flex-direction: column; }
  .step-connector { width: 2px; height: 28px; align-self: center; margin: 0; }
  .testimonials { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .demo-zen { grid-row: auto; }
  .callout-inner { padding: 48px 28px; }
  .features, .how, .showcase, .social, .final-cta { padding: 64px 24px; }
  .footer { flex-direction: column; gap: 18px; text-align: center; }
}