/* ============================================================
   EZCart landing — styles
   Layered hero (bg / fade / rock / cart / header / text), built
   to stay crisp on desktop, mobile and Retina/4K. No single
   full-hero image; every layer is independent.

   GLOBAL SCALE: every visual size is multiplied by --s, so the
   whole design can be scaled up/down from one place. --s: 0.7
   means everything renders 30% smaller. Viewport-height and
   touch-target sizes are intentionally left unscaled.
   ============================================================ */

/* ----------------------------- Tokens ----------------------------- */
:root {
  --s: 0.7;                /* master scale (1 = original, 0.7 = -30%) */
  --ls: 1.15;              /* logo scale, +15% */

  --ink:        #05070A;   /* primary text  */
  --muted:      #5E6673;   /* secondary text */
  --grass:      #58C43D;   /* green accent  */
  --grass-dark: #3FAE2C;   /* hover         */
  --white:      #FFFFFF;

  --maxw: 1400px;          /* content container (unified width across all blocks) */
  --gutter: clamp(20px, 4.5vw, 60px);

  --shadow-cta: 0 14px 30px rgba(63, 174, 44, .32);
  --radius-pill: 999px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* ----------------------------- Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* never allow horizontal scroll */
  position: relative;            /* positioning context for the scattered-cloud layer */
}

/* ---------------- Page-wide animated background ------------------- *
   A WHITE-DOMINANT field that sits fixed behind the content below the
   hero and slowly drifts: white leads, shimmering gently into a little
   light blue, with a warm light-yellow glow somewhere — like spilled
   light. It appears to flow out of the hero (whose bottom fades to white).
   Sections on top are transparent, so this one layer shows through.      */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: #ffffff;                 /* white dominates */
  background-image:
    /* light-blue glows: top-left & bottom-right corners */
    radial-gradient(90% 80% at 6% 8%,  rgba(150, 200, 255, .46) 0%, rgba(150, 200, 255, 0) 70%),
    radial-gradient(88% 80% at 94% 88%, rgba(155, 205, 255, .42) 0%, rgba(155, 205, 255, 0) 72%),
    /* warm light-yellow glow: top-right, like a soft light */
    radial-gradient(80% 72% at 92% 6%,  rgba(255, 245, 196, .34) 0%, rgba(255, 245, 196, 0) 68%),
    radial-gradient(74% 70% at 10% 94%, rgba(255, 248, 214, .26) 0%, rgba(255, 248, 214, 0) 72%);
  background-repeat: no-repeat;
  background-size: 100% 100%;                 /* static, fills the viewport — no movement */
}

/* Fine grain dither over the gradient — masks 8-bit colour banding so the
   soft pastel field reads smooth, with no visible rings/edges. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;                 /* above the gradient (::before), below the clouds */
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 170px 170px;
  background-repeat: repeat;
}

/* --------- Scattered clouds (decorative, sits across the whole page) --------- *
   One <div class="sky"> per page holds N empty <i> tiles; each tile is the same
   cloud PNG, positioned/sized/tilted differently below so the field reads as a
   chaotic, hand-strewn sky. The layer spans the full document height (inset:0 on
   a position:relative body) and sits above the gradient but below all content. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;            /* clip clouds that spill past the edges — no scroll */
  pointer-events: none;
}
.sky i {
  position: absolute;
  display: block;
  aspect-ratio: 640 / 333;     /* the cropped cloud's shape */
  background: url("assets/cloud-puff.webp") center / contain no-repeat;
  will-change: transform;
}
/* Chaotic scatter: top/left spread down the whole page, varied width, tilt,
   opacity and a few horizontal flips. */
.sky i:nth-child(1)  { top: 2%;  left: 68%; width: 300px; opacity: .34; transform: rotate(4deg); }
.sky i:nth-child(2)  { top: 7%;  left: 9%;  width: 220px; opacity: .26; transform: scaleX(-1) rotate(3deg); }
.sky i:nth-child(3)  { top: 13%; left: 42%; width: 380px; opacity: .20; transform: rotate(-2deg); }
.sky i:nth-child(4)  { top: 18%; left: 84%; width: 180px; opacity: .40; transform: scaleX(-1) rotate(5deg); }
.sky i:nth-child(5)  { top: 23%; left: 3%;  width: 260px; opacity: .30; transform: rotate(-3deg); }
.sky i:nth-child(6)  { top: 29%; left: 58%; width: 330px; opacity: .24; transform: scaleX(-1) rotate(2deg); }
.sky i:nth-child(7)  { top: 35%; left: 28%; width: 200px; opacity: .38; transform: rotate(5deg); }
.sky i:nth-child(8)  { top: 41%; left: 78%; width: 290px; opacity: .26; transform: scaleX(-1) rotate(-4deg); }
.sky i:nth-child(9)  { top: 47%; left: 12%; width: 350px; opacity: .20; transform: rotate(3deg); }
.sky i:nth-child(10) { top: 54%; left: 50%; width: 230px; opacity: .34; transform: scaleX(-1) rotate(-3deg); }
.sky i:nth-child(11) { top: 60%; left: 83%; width: 300px; opacity: .25; transform: rotate(4deg); }
.sky i:nth-child(12) { top: 66%; left: 6%;  width: 270px; opacity: .32; transform: scaleX(-1) rotate(-2deg); }
.sky i:nth-child(13) { top: 72%; left: 38%; width: 380px; opacity: .19; transform: rotate(3deg); }
.sky i:nth-child(14) { top: 79%; left: 66%; width: 210px; opacity: .36; transform: scaleX(-1) rotate(-5deg); }
.sky i:nth-child(15) { top: 86%; left: 20%; width: 290px; opacity: .27; transform: rotate(2deg); }
.sky i:nth-child(16) { top: 93%; left: 55%; width: 250px; opacity: .30; transform: scaleX(-1) rotate(-3deg); }
/* One extra cloud tucked into the open space of each block (hero · process ·
   phones · AI · showcase · CTA). */
.sky i:nth-child(17) { top: 15%; left: 60%; width: 240px; opacity: .25; transform: rotate(-3deg); }          /* hero */
.sky i:nth-child(18) { top: 27%; left: 88%; width: 230px; opacity: .23; transform: scaleX(-1) rotate(3deg); } /* process */
.sky i:nth-child(19) { top: 44%; left: 4%;  width: 250px; opacity: .24; transform: rotate(-3deg); }          /* phones */
.sky i:nth-child(20) { top: 60%; left: 30%; width: 240px; opacity: .22; transform: scaleX(-1) rotate(2deg); } /* AI */
.sky i:nth-child(21) { top: 76%; left: 88%; width: 240px; opacity: .24; transform: rotate(3deg); }           /* showcase */
.sky i:nth-child(22) { top: 90%; left: 80%; width: 230px; opacity: .24; transform: scaleX(-1) rotate(-3deg); }/* CTA */

/* Lighter touch on small screens — fewer, smaller clouds keep text readable */
@media (max-width: 700px) {
  .sky i { width: 180px !important; opacity: .22 !important; }
  .sky i:nth-child(3), .sky i:nth-child(9), .sky i:nth-child(13),
  .sky i:nth-child(18), .sky i:nth-child(21) { display: none; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }

/* ----------------------------- Buttons ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--s));
  font-weight: 600;
  border-radius: 14px;            /* moderately rounded (was a full pill) */
  cursor: pointer;
  border: 0;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grass);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--grass-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-lg {
  height: calc(60px * var(--s));
  padding: 0 calc(30px * var(--s));
  font-size: calc(1.0625rem * var(--s));      /* 17px */
}
.btn-arrow { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--grass-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================== HEADER ============================= */
.site-header {
  position: fixed;                 /* stays pinned while scrolling, like the reference */
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;          /* transparent over the hero at the top */
  transition: background-color .45s ease, box-shadow .45s ease,
              backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease,
              border-color .45s ease;
  border-bottom: 1px solid transparent;
}
/* Once scrolled past the top, the header turns to frosted glass with a soft shadow */
.site-header.scrolled {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: rgba(20, 45, 15, .06);
  box-shadow: 0 8px 30px rgba(20, 45, 15, .07);
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 76px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo — badge (left) + name & subtitle (right), reference-sized */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--grass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(63, 174, 44, .35);
}
.logo-mark svg { width: 22px; height: 22px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.04; }
.logo-word { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.logo-ez   { color: var(--grass); }
.logo-cart { color: var(--ink); }
.logo-sub {
  margin-top: 2px;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #98A1A9;
}

/* Nav — pushed to the right, next to the CTA (reference principle) */
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav a {
  font-size: .875rem;          /* 14px, like the reference */
  font-weight: 500;
  color: var(--grass-dark);    /* green, a touch darker than the brand grass */
  letter-spacing: -.01em;
  transition: color .15s ease;
}
.nav a:hover { color: #2e8c1f; }

.header-cta {
  height: 40px;
  padding: 0 20px;
  font-size: .875rem;
  font-weight: 600;
}

/* Mobile menu button — kept at a comfortable touch size */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
}
.nav-toggle span {
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Drawer helpers — hidden on desktop, switched on in the mobile media query.
   .nav-backdrop dims+blurs the page behind the right-side menu drawer;
   .nav-cta is the in-drawer download button; .hero-actions--mobile is the
   hero CTA that sits directly under the cart on phones. */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10, 18, 13, .34);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-cta { display: none; }
.hero .hero-actions--mobile { display: none; }  /* beats .hero-actions {display:flex} on desktop */

/* =============================== HERO ============================== */
.hero {
  position: relative;
  min-height: max(600px, calc(100vh - 90px));   /* leave room so the partners strip shows at the bottom of the first screen */
  overflow: hidden;
  isolation: isolate;        /* contain z-index stack */

  /* Cloud-platform composition: the cloud + cart live together in
     .hero-visual and scale as ONE unit, so the cart always sits on the
     cloud. The cloudy sky behind is an independent cover background.
     All three values below are tunable. */
  --visual-w: clamp(448px, 48vw, 832px);  /* size of the cloud+cart group (−20%) */
  --cart-w: 48%;     /* cart width  as % of the visual (−15%, centred on the cloud) */
  --cart-by: 30%;    /* cart bottom as % of the visual (wheels on the cloud top) */

  --ts: 1.38;        /* hero text scale (heading + subtitle): +20% then +15% */
}

/* Layer 1 — soft cloudy sky (CSS background, cover).
   The bottom third is masked to transparent so the sky dissolves directly
   into the page gradient behind it — no white band, no seam between the
   hero and the section below. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #dcebf6;
  background-image: url("assets/hero-bg.jpg?v=40");
  background-image: image-set(
    url("assets/hero-bg.avif?v=40") type("image/avif"),
    url("assets/hero-bg.webp?v=40") type("image/webp"),
    url("assets/hero-bg.jpg?v=40")  type("image/jpeg")
  );
  background-size: cover;
  background-position: 50% 28%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
}

/* Layers 2 + 3 — cloud platform + cart, locked together as one composition */
.hero-visual {
  position: absolute;
  z-index: 2;
  right: 4%;         /* net shift: 15% left, then 5% back right */
  bottom: 14%;       /* raised 10% */
  width: var(--visual-w);
  aspect-ratio: 1528 / 950;   /* wide enough for the cloud, tall for the cart */
  pointer-events: none;
}
.hero-visual picture { position: absolute; display: block; }
.hero-visual img { width: 100%; height: auto; image-rendering: auto; }

.hero-visual .cloud {
  left: 0;
  bottom: 0;
  width: 100%;
}
.hero-visual .cart {
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--cart-by);
  width: var(--cart-w);
}
.hero-visual .cart img {
  filter: drop-shadow(0 22px 22px rgba(70, 100, 140, .16));
}

/* Layers 5 + 6 — text content */
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: max(600px, calc(100vh - 90px));   /* leave room so the partners strip shows at the bottom of the first screen */
  display: flex;
  align-items: center;
}
.hero-text {
  max-width: calc(620px * var(--s));
  padding-top: calc(64px * var(--s));
  margin-left: clamp(-52px, -3.2vw, 0px);   /* nudge the left column toward the edge */
}

.hero-title {
  font-size: calc(clamp(2.6rem, 5.9vw, 5.0rem) * var(--s) * var(--ts));   /* 42→80px ×0.7 ×ts */
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  white-space: nowrap;        /* keep each line intact: 2 lines exactly */
}
.hero-title .accent { color: var(--grass); }

.hero-sub {
  margin-top: calc(22px * var(--s));
  font-size: calc(clamp(1.0625rem, 1.4vw, 1.4rem) * var(--s) * var(--ts));  /* 17→22.4px ×0.7 ×ts */
  line-height: 1.5;
  color: var(--muted);
  max-width: calc(470px * var(--s) * var(--ts));   /* grows with text so it wraps cleanly */
}

.hero-actions {
  margin-top: calc(38px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(22px * var(--s));
  flex-wrap: wrap;
}

/* Play button (light, minimal) */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: calc(14px * var(--s));
  font-weight: 600;
  font-size: calc(1rem * var(--s));
  color: var(--ink);
}
.play-circle {
  width: calc(52px * var(--s)); height: calc(52px * var(--s));
  border-radius: 50%;
  border: 1.5px solid rgba(5, 7, 10, .28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.play-circle svg { width: calc(22px * var(--s)); height: calc(22px * var(--s)); margin-left: 2px; }
.btn-play:hover .play-circle {
  border-color: var(--grass);
  color: var(--grass-dark);
  transform: scale(1.05);
}
.btn-play:active .play-circle { transform: scale(.98); }

/* ===================== PARTNERS MARQUEE (between hero & process) =====================
   Same idea as the reference: an overflow-hidden strip framed by faint top/bottom
   lines, with a flex track of faded partner names scrolling left forever. The list
   is duplicated and each item carries a right margin, so translateX(-50%) loops
   perfectly seamlessly (no jump). Pauses on hover; respects reduced-motion. */
.marquee {
  overflow: hidden;
  padding: 30px 0;
  border-top: 1px solid rgba(8, 19, 13, .07);
  border-bottom: 1px solid rgba(8, 19, 13, .07);
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee 55s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  margin-right: 64px;                 /* trailing gap on every item → seamless -50% loop */
  white-space: nowrap;
  font-size: 1.125rem;                /* text-lg */
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(47, 138, 30, .62);      /* faded brand green */
  transition: color .2s ease;
}
.marquee-item:hover { color: var(--grass-dark); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ===================== HOW IT WORKS (EZCart 3-step process) =====================
   Reference "Our Process" layout, restyled to the EZCart brand: green
   scale (numbers, eyebrow, gradient heading, icon tiles), glass cards over
   the page gradient. Copy is the EZCart flow: write a list → get your cart
   → pay & receive. The --p* var names are kept but now hold green values. */
.process {
  --p100: #e3f5da;   /* faint green — big numbers + eyebrow pill bg */
  --p400: #6cce50;   /* brand light green — icon tile (light stop) */
  --p500: #2f9e1c;   /* deep green — heading gradient light stop (keeps AA >=3:1) */
  --p600: #3fae2c;   /* brand grass-dark — icon tile (dark stop) */
  --p700: #1f7d12;   /* deepest green — eyebrow text + heading gradient dark stop */
  --proc-fg: #08130d;        /* near-black ink */

  background: transparent;   /* let the page-wide animated gradient show through */
  padding: 144px 24px;       /* larger vertical rhythm */
}
@media (min-width: 768px) {
  .process { padding: 190px 32px; }   /* larger vertical rhythm (md) */
}

.process-inner {
  max-width: 1400px;         /* unified width */
  margin: 0 auto;
}

/* ---- Section header (mb-16 text-center) ---- */
.process-head {
  text-align: center;
  margin-bottom: 64px;
}
.process-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 16px;                  /* py-1.5 px-4 */
  border-radius: 999px;               /* rounded-full */
  background: var(--p100);            /* light green */
  color: var(--p700);                 /* deep green for contrast */
  font-size: .75rem;                  /* text-xs */
  font-weight: 600;
  letter-spacing: .05em;              /* tracking-wider */
  text-transform: uppercase;
}
.process-title {
  margin-bottom: 16px;
  font-size: 1.875rem;                /* text-3xl */
  font-weight: 700;
  line-height: 1.1;
  color: var(--proc-fg);
}
@media (min-width: 768px) {
  .process-title { font-size: 3rem; }  /* md:text-5xl */
}
/* gradient heading accent (green) */
.process-grad {
  background: linear-gradient(135deg, var(--p700), var(--p500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.process-sub {
  max-width: 42rem;                   /* max-w-2xl */
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
  color: #5b6b61;                     /* muted green-gray */
}

/* ---- Cards grid (grid gap-8 md:grid-cols-3) ---- */
.process-grid {
  display: grid;
  gap: 32px;                          /* gap-8 */
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card shell — .glass-card + rounded-2xl + p-8, hover-lift like the source */
.proc-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 16px;               /* rounded-2xl */
  padding: 32px;                     /* p-8 */
  background: rgba(255, 255, 255, .75);   /* #ffffffbf */
  border: none;
  box-shadow: 0 10px 30px rgba(63, 174, 44, .10);   /* soft green glass shadow */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .3s ease-out;
}
.proc-card:hover { transform: translateY(-4px); }

/* Radial glow that fades in on hover (source: opacity 0 → 1) */
.proc-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at 50% 50%, rgba(88, 196, 61, .16), transparent 60%);
}
.proc-card:hover .proc-glow { opacity: 1; }

.proc-body { position: relative; }

/* Big faded number, top-right */
.proc-num {
  position: absolute;
  top: -8px;                         /* -top-2 */
  right: -8px;                       /* -right-2 */
  font-size: 3.75rem;                /* text-6xl */
  line-height: 1;
  font-weight: 700;
  color: var(--p100);               /* faded light green */
}

/* Gradient icon tile */
.proc-icon {
  position: relative;
  z-index: 10;
  margin-bottom: 24px;               /* mb-6 */
  display: flex;
  width: 56px;                       /* w-14 */
  height: 56px;                      /* h-14 */
  align-items: center;
  justify-content: center;
  border-radius: 12px;               /* rounded-xl */
  color: #fff;
  background: linear-gradient(135deg, var(--p600), var(--p400));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);  /* shadow-lg */
  transition: transform .3s ease;
}
.proc-card:hover .proc-icon { transform: scale(1.1); }   /* group-hover:scale-110 */
.proc-icon svg { width: 32px; height: 32px; }            /* h-8 w-8 */

.proc-card-title {
  position: relative;
  z-index: 10;
  margin-bottom: 12px;               /* mb-3 */
  font-size: 1.25rem;                /* text-xl */
  line-height: 1.4;
  font-weight: 700;
  color: var(--proc-fg);
}
.proc-card-desc {
  position: relative;
  z-index: 10;
  font-size: .875rem;                /* text-sm */
  line-height: 1.625;                /* leading-relaxed */
  color: #5b6b61;                    /* muted green-gray */
}

/* ===================== APP SHOWCASE (three phones in a row) ===================== */
.phones-section {
  padding: clamp(11px, 2.2vw, 36px) 24px clamp(92px, 13vw, 180px);
}
.phones {
  max-width: 1400px;                  /* unified width */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(53px, 11.4vw, 167px);   /* wider spacing between phones */
  flex-wrap: wrap;                    /* phones stack on narrow screens */
}
.phone {
  width: clamp(220px, 25.3vw, 319px); /* +10% larger */
  height: auto;
  filter: drop-shadow(0 22px 32px rgba(20, 45, 15, .16));
}

/* ===================== MOBILE SLIDERS (process cards + phones) =====================
   On phones the 3 process cards and the 3 app phones become horizontal swipe
   sliders (scroll-snap), instead of stacking. Scrollbar is hidden; each card
   shows a peek of the next so it reads as swipeable. Extra padding keeps the
   card glow / phone drop-shadow from being clipped by overflow-x. */
@media (max-width: 767px) {
  /* "Our Process" → slider */
  .process-grid {
    display: flex;
    grid-template-columns: none;       /* neutralize the >=768px grid */
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 24px;              /* room for the card shadow */
  }
  .process-grid::-webkit-scrollbar { display: none; }
  .process-col {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }

  /* App phones → slider */
  .phones {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 14px 0 52px;             /* room for the phone drop-shadow */
  }
  .phones::-webkit-scrollbar { display: none; }
  .phone {
    flex: 0 0 auto;
    width: min(66vw, 270px);
    scroll-snap-align: center;
  }
}

/* ---- Hand-drawn doodle connectors (cards → phones) ---- */
.flow { position: relative; }
.connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.connectors path {
  fill: none;
  stroke: rgba(47, 138, 30, .62);   /* same green as the partner strip text */
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* hide where the layout stacks and the geometry no longer lines up */
@media (max-width: 900px) { .connectors { display: none; } }

/* ===================== AI ASSISTANT (one big card) ===================== */
.ai-section {
  padding: clamp(30px, 4.5vw, 76px) 24px clamp(92px, 13vw, 180px);
}
.ai-card {                       /* no box — sits straight on the page gradient */
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.55fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.ai-title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #07120c;
}
.ai-lead {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.65;
  color: #5b6b61;
  max-width: 46ch;          /* longer, more stretched-out lines */
}
.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ai-feature {
  display: flex;
  gap: 16px;
  padding: clamp(18px, 1.8vw, 28px);
}
/* thin cross dividers between the four cells */
.ai-feature:nth-child(-n+2) { border-bottom: 1px solid rgba(20, 45, 15, .09); }
.ai-feature:nth-child(odd)   { border-right:  1px solid rgba(20, 45, 15, .09); }
.ai-feature:nth-child(-n+2) { padding-top: 0; }
.ai-feature:nth-child(n+3)  { padding-bottom: 0; }
.ai-feature:nth-child(odd)  { padding-left: 0; }
.ai-feature:nth-child(even) { padding-right: 0; }
.ai-ic {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, #71D154, #3FA52A);   /* brand-green gradient for depth */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(63, 165, 43, .28),
              inset 0 1px 1px rgba(255, 255, 255, .35);     /* soft drop + top highlight */
}
.ai-ic svg { width: 26px; height: 26px; }
.ai-ftext h3 {
  margin: 4px 0 8px;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #07120c;
}
.ai-ftext p {
  margin: 0 0 16px;
  font-size: .95rem;
  line-height: 1.55;
  color: #5b6b61;
}
.ai-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 11px;
  background: rgba(20, 45, 15, .06);
  color: #1f7d12;
  font-size: .9rem;
  font-weight: 600;
  transition: background-color .18s ease, transform .18s ease;
}
.ai-btn:hover { background: rgba(88, 196, 61, .16); transform: translateY(-1px); }

@media (max-width: 900px) {
  .ai-card { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  /* stacked: just bottom separators, even padding */
  .ai-feature { border-right: none !important; border-bottom: 1px solid rgba(20,45,15,.09) !important;
                padding: 24px 0 !important; }
  .ai-feature:last-child { border-bottom: none !important; }
}

/* ===================== FEATURE SHOWCASE (text + tilted phones) ===================== */
.showcase-section {
  padding: clamp(20px, 3vw, 50px) 24px clamp(100px, 13vw, 180px);
}
.showcase-card {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(32px, 4vw, 60px);
  border-radius: 28px;
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 45, 15, .07);
  box-shadow: 0 26px 60px rgba(20, 45, 15, .08);
}
.showcase-title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #07120c;
}
.showcase-lead {
  margin: 0 0 24px;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  color: #5b6b61;
  max-width: 46ch;
}
.showcase-list { list-style: none; margin: 0; padding: 0; }
.showcase-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-top: 1px solid rgba(20, 45, 15, .08);
}
.showcase-list li:first-child { border-top: none; }
.sl-ic {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: #e3f5da;
  color: #2f9e1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sl-ic svg { width: 21px; height: 21px; }
.showcase-list div {
  padding-top: 7px;
  font-size: .98rem;
  line-height: 1.5;
  color: #5b6b61;
}
.showcase-list strong { color: #07120c; font-weight: 700; }
.showcase-art { display: flex; justify-content: center; align-items: center; }
.showcase-img {
  width: 100%;
  max-width: 700px;
  height: auto;
  transform: rotate(7deg);    /* tilt so the phone tops lean to the right */
  /* The baked drop-shadow has been stripped from the asset itself, so the
     phones sit on clean transparent edges — no top fade needed (a fade here
     would just let the card show through and read as light on the screens). */
}

@media (max-width: 900px) {
  .showcase-card { grid-template-columns: 1fr; padding: clamp(24px, 5vw, 40px); }
  .showcase-art { order: -1; }                 /* image on top when stacked */
  .showcase-img { transform: rotate(4deg); max-width: 440px; }

  /* Center the text block (heading + lead); the checklist stays left-aligned
     inside a centered max-width column so the icon rows still read cleanly. */
  .showcase-text { text-align: center; }
  .showcase-lead { margin-left: auto; margin-right: auto; }
  .showcase-list {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* ===================== FINAL CTA (heading · subheading · download) ===================== */
.cta-final {
  padding: clamp(8px, 2vw, 32px) var(--gutter) clamp(96px, 14vw, 180px);
  text-align: center;
}
.cta-final-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-final-title {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}
/* green gradient accent — self-contained (the --p* tokens are scoped to .process) */
.cta-final-title .accent {
  background: linear-gradient(135deg, #1f7d12, #2f9e1c);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cta-final-sub {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: #5b6b61;
  max-width: 44ch;
}
.cta-final .btn-lg { margin-top: 28px; }

/* ============================ RESPONSIVE =========================== */

/* Tablet landscape — keep text on the left, podium on the right */
@media (max-width: 1100px) {
  .hero-text { max-width: calc(480px * var(--s)); }
}

/* ≤900px — centred hero (text · cart · CTA), nav → right-side drawer */
@media (max-width: 900px) {
  .header-cta { display: none; }
  .nav-toggle { display: flex; position: relative; z-index: 70; }  /* stays on top as the X */
  .nav-backdrop { display: block; }

  /* The nav becomes a fixed drawer that slides in from the right */
  .nav {
    display: flex;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 360px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 92px 22px 28px;          /* clear the header / X at the top */
    background: #f6f5f1;              /* warm off-white, like the reference */
    box-shadow: -26px 0 60px rgba(10, 18, 30, .20);
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);      /* off-screen when closed */
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  }
  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }   /* scroll-lock the page behind */
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

  /* Drawer links — large, stacked, active one as a filled pill */
  .nav a {
    color: #2b3a30;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background-color .15s ease, color .15s ease;
  }
  .nav a:hover { background: rgba(88, 196, 61, .08); }
  .site-header .nav a[aria-current="page"] {
    color: var(--grass-dark);
    background: rgba(88, 196, 61, .14);
    font-weight: 700;
  }

  /* Full-width CTA at the bottom of the drawer, with a divider above it */
  .nav-cta {
    display: inline-flex;
    position: relative;
    align-self: stretch;
    margin-top: 22px;
    height: 52px;
    border-radius: 14px;
  }
  .nav a.nav-cta { color: #fff; font-size: 1rem; font-weight: 700; }
  .nav-cta::before {
    content: "";
    position: absolute;
    left: 4px; right: 4px; top: -16px;
    height: 1px;
    background: rgba(20, 45, 15, .14);
  }

  /* Burger → green X */
  body.nav-open .nav-toggle span { background: var(--grass-dark); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Single column: centred text, cloud composition below, CTA under the cart */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding-bottom: clamp(60px, 10vw, 110px);
  }
  .hero-inner {
    order: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;             /* centre the text block */
    text-align: center;              /* centre the text itself */
    padding-top: calc(118px * var(--s));
  }
  .hero-text {
    max-width: calc(600px * var(--s));
    margin-left: auto;               /* undo the desktop left nudge */
    margin-right: auto;
  }
  .hero-sub { margin-left: auto; margin-right: auto; }

  /* Cloud + cart move into the flow, centred below the text */
  .hero-visual {
    order: 2;
    position: relative;
    right: auto; bottom: auto;
    width: min(560px, 94%);
    margin: 4px auto 0;
    align-self: center;
  }

  /* Hero CTA on phones: directly under the cart, centred */
  .hero-text .hero-actions { display: none; }   /* hide the in-text CTA */
  .hero .hero-actions--mobile {
    display: flex;
    order: 3;
    justify-content: center;
    padding: 0 18px;
    margin-top: calc(22px * var(--s));
  }
}

/* ≤600px — phone tuning */
@media (max-width: 600px) {
  .header-inner { height: 68px; padding: 0 18px; }

  /* Align hero/section side padding with the header (18px) on phones */
  .hero-inner { padding-left: 18px; padding-right: 18px; }
  .hero-text { padding-top: calc(104px * var(--s)); }
  .process { padding-left: 18px; padding-right: 18px; }
  .hero-title {
    font-size: calc(clamp(2.6rem, 11vw, 3rem) * var(--s) * var(--ts));   /* 42–48px ×0.7 ×ts */
    white-space: normal;          /* wrap rather than overflow on very narrow phones */
  }
  .hero-sub  { font-size: calc(1.0625rem * var(--s) * var(--ts)); }
  .sub-break { display: none; }

  .hero-actions { flex-direction: column; align-items: stretch; gap: calc(16px * var(--s)); }
  .btn-lg { width: 100%; }
  .btn-play { justify-content: center; }

  /* Final CTA download button — short, centred (not full-width) */
  .cta-final .btn-lg { width: auto; max-width: 280px; }

  /* Anchor jumps clear the shorter mobile header (68px) */
  section[id] { scroll-margin-top: 84px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================== FOOTER ============================= *
   Reference layout: brand (left) · two link columns · newsletter +
   socials (right), on a very dark green field.                        */
.site-footer {
  background: #05180D;                 /* very, very dark green */
  color: #fff;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.8fr;
  gap: clamp(28px, 4vw, 56px);
}

/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-logo .logo-cart { color: #fff; }                 /* light on dark */
.footer-logo .logo-sub  { color: rgba(255, 255, 255, .5); }
.footer-tagline {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .5);
  max-width: 26ch;
}

/* Link columns */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-h {
  margin: 0 0 16px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}
.footer-col a {
  padding: 7px 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  transition: color .15s ease;
}
.footer-col a:hover { color: #fff; }

/* Newsletter + socials */
.footer-sub { display: flex; flex-direction: column; }
.footer-news {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s ease;
}
.footer-news:focus-within { border-color: rgba(88, 196, 61, .6); }
.footer-news-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  outline: none;
}
.footer-news-input::placeholder { color: rgba(255, 255, 255, .4); }
.footer-news-btn {
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--grass);
  color: #05180D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.footer-news-btn:hover { background: var(--grass-dark); transform: translateX(1px); }
.footer-news-btn svg { width: 18px; height: 18px; }

.footer-social { display: flex; gap: 12px; margin-top: 28px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .82);
  transition: background .15s ease, color .15s ease;
}
.footer-social a:hover { background: var(--grass); color: #05180D; }
.footer-social svg { width: 18px; height: 18px; }

/* Bottom bar */
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-bottom span {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter);
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-sub   { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-news { max-width: none; }
}

/* ===================== SUB-PAGES (Pricing · About) ===================== */

/* Smooth in-page jumps; offset anchors so the fixed 76px header never covers them */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

/* Active nav item (the page you're on) */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Shell that clears the fixed header on standalone pages */
.page { padding-top: clamp(116px, 15vh, 156px); }

/* Shared page header bits */
.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #e3f5da;
  color: #1f7d12;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-title {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.page-sub {
  margin: 18px auto 0;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
  color: #5b6b61;
  max-width: 52ch;
}
/* Green gradient accent usable anywhere (the --p* tokens are scoped to .process) */
.accent-grad {
  background: linear-gradient(135deg, #1f7d12, #2f9e1c);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------- Pricing ---------------------------- */
.pricing { padding: clamp(20px, 4vw, 56px) var(--gutter) clamp(90px, 13vw, 160px); }
.pricing-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.pricing-head { margin-bottom: clamp(34px, 5vw, 54px); }

.price-card {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 45, 15, .08);
  box-shadow: 0 26px 60px rgba(20, 45, 15, .10);
}
.price-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e3f5da;
  color: #1f7d12;
  font-size: .8rem;
  font-weight: 700;
}
.price-amount { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.price-num {
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.price-per { font-size: 1.05rem; font-weight: 600; color: #5b6b61; }
.price-note { margin: 8px 0 0; font-size: .95rem; color: #5b6b61; }

.price-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(20, 45, 15, .08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-list li {
  position: relative;
  padding-left: 32px;
  font-size: .98rem;
  line-height: 1.45;
  color: #2c3a31;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.price-cta { margin-top: 28px; width: 100%; }
.price-fine { margin: 14px 0 0; text-align: center; font-size: .82rem; color: #7a8780; }

/* ----------------------------- About ----------------------------- */
.about { padding: clamp(20px, 4vw, 56px) var(--gutter) clamp(90px, 13vw, 160px); }
.about-inner { max-width: 720px; margin: 0 auto; }
.about-body { margin: 28px 0 0; }
.about-body p {
  margin: 0 0 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: #3a4742;
}
.about-body p:last-child { margin-bottom: 0; }
.about .btn-lg { margin-top: 32px; }