/* Fern marketing layer (proposal, BRAND.md). Sits on top of styles.css (the kit). */
:root {
  --amber: #DE9A3A;
  --glow: rgba(92, 194, 162, .22);
  --night: #173F33;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) { :root { --amber: #EDB565; --glow: rgba(92, 194, 162, .18); --night: #0D211B; } }

.display { font: 700 clamp(2.75rem, 7vw, 4.75rem)/1.02 var(--font-display); letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
.h-section { font: 650 clamp(2rem, 4.5vw, 3.25rem)/1.06 var(--font-display); letter-spacing: -.02em; }
.big-num { font: 700 clamp(3rem, 6vw, 4.5rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* The leaflet highlight: one word per headline */
.leaf { position: relative; white-space: nowrap; z-index: 0; }
.leaf::before { content: ""; position: absolute; left: -.12em; right: -.12em; bottom: .06em; height: .44em; border-radius: 999px; background: color-mix(in srgb, var(--amber) 62%, transparent); z-index: -1; transform: rotate(-3deg); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .leaf::before { transform: rotate(-3deg) scaleX(0); transition: transform .9s var(--ease) .25s; }
  .in .leaf::before, .leaf.in::before { transform: rotate(-3deg) scaleX(1); }
}

/* Eyebrow with a leaflet */
.tagline { display: inline-flex; align-items: center; gap: 8px; font: 600 .875rem var(--font-body); color: var(--green); }
.tagline::before { content: ""; width: 14px; height: 7px; border-radius: 999px; background: var(--amber); transform: rotate(-17deg); }

/* A row of leaflets: the divider, with the amber one gliding */
.leaves { display: flex; gap: 10px; align-items: center; justify-content: center; position: relative; height: 24px; }
.leaves i { width: 22px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 55%, transparent); transform: rotate(-17deg); }
.leaves i.a { background: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .leaves i { opacity: 0; transform: rotate(-17deg) scale(.4); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--n) * 70ms); }
  .in .leaves i, .leaves.in i { opacity: 1; transform: rotate(-17deg) scale(1); }
}

/* Morning glow */
.glow { position: relative; isolation: isolate; }
.glow::after { content: ""; position: absolute; inset: -12% -18%; background: radial-gradient(closest-side, var(--glow), transparent 72%); z-index: -1; pointer-events: none; }

/* Deep fern night panel */
.night { background: var(--night); color: #ECF1EE; border-radius: 32px; }
.night .lead, .night p { color: #B9C8C1; }

/* Depth */
.lift { box-shadow: 0 24px 60px rgba(23, 32, 28, .22); }
.tilt { transform: rotate(-2deg); }

/* ---- Phone stage (v2, Ranya Oct 30): the one depth treatment for every phone ----
   The phone rises out of a tinted card: it overlaps the card's top edge, sits on a soft floor shadow, and carries
   four stacked shadows (contact, key, drop, ambient) like a real object lit from above. In dark mode the shadows get
   deeper and a faint rim light separates the phone from the dark card. */
.stage { --tint: #D9EADC; position: relative; margin: 104px 0 24px; padding: 0 0 40px; border-radius: 36px; background: var(--tint); isolation: isolate; perspective: 1400px; display: flow-root; }
.stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 55% at 50% 38%, rgba(255,255,255,.55), transparent 70%); z-index: -1; }
.stage.butter { --tint: #F4E9BE; } .stage.peach { --tint: #FADDCD; } .stage.sky { --tint: #D7E6F6; }
.stage .phone { position: relative; margin: -96px auto 0; width: min(280px, 72vw); background: #111513; border: 0; transform-origin: 50% 70%;
  box-shadow:
    0 1px 2px rgba(12, 32, 24, .14),
    0 6px 12px -2px rgba(12, 32, 24, .12),
    0 22px 40px -10px rgba(12, 32, 24, .26),
    0 56px 96px -24px rgba(12, 32, 24, .30);
  transform: translateY(var(--ty, 0px)) scale(var(--s, 1)); }
/* 3D only while it moves; flat and crisp at rest */
.stage .phone.moving { will-change: transform; transform: translate3d(0, var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--s, 1)); }
.stage .floor { position: absolute; left: 50%; bottom: 14px; width: min(230px, 58vw); height: 34px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(12, 32, 24, .28), transparent); filter: blur(6px); z-index: -1; }
@media (prefers-color-scheme: dark) {
  .stage { --tint: #1C3A31; }
  .stage.butter { --tint: #33301C; } .stage.peach { --tint: #3A2620; } .stage.sky { --tint: #1B2B3B; }
  .stage::before { background: radial-gradient(60% 55% at 50% 38%, rgba(140, 220, 190, .14), transparent 70%); }
  .stage .phone { box-shadow:
      0 0 0 1px rgba(255, 255, 255, .08),
      0 1px 2px rgba(0, 0, 0, .5),
      0 8px 16px -2px rgba(0, 0, 0, .45),
      0 26px 48px -10px rgba(0, 0, 0, .6),
      0 60px 110px -20px rgba(0, 0, 0, .65); }
  .stage .floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
}
/* At rest (and always, with Reduce Motion): flat and upright, so the screen stays crisp */