/* ==========================================================================
   UzaDigit — Homepage stylesheet
   BK Networks Co. Ltd
   Brand system per Website Blueprint v2.0, Section 2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Official colour system (Blueprint 2.1) */
  --navy:         #010E2F;
  --orange:       #FF8700;
  --brown:        #A84E2B;
  --warm:         #FFF7F0;
  --pale:         #E9EEF6;

  /* Derived navy surfaces, for depth inside dark sections only */
  --navy-surface: #05173F;
  --navy-raised:  #0A2050;
  --navy-line:    rgba(255, 255, 255, 0.10);
  --navy-line-strong: rgba(255, 255, 255, 0.18);

  /* Derived orange, for hover and low-opacity fills only */
  --orange-hover: #E67A00;
  --orange-wash:  rgba(255, 135, 0, 0.12);
  --orange-line:  rgba(255, 135, 0, 0.32);

  /* Text */
  --ink:          #0B1B3D;  /* body text on light surfaces      — 15.4:1 on white */
  --ink-muted:    #49597A;  /* supporting text on light         —  7.1:1 on white */
  --on-navy:      #FFFFFF;  /* text on navy                     — 19.0:1 */
  --on-navy-muted:#AEBBD1;  /* supporting text on navy          —  9.4:1 */

  /* Surfaces */
  --white:        #FFFFFF;
  --pale-deep:    #DCE4F1;  /* card borders on pale backgrounds */
  --warm-line:    #F0DFCE;

  /* Typography */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (Blueprint 2.3). Mobile reduces headings ~25%, body never below 16px. */
  --fs-hero:    clamp(2.125rem, 1.15rem + 4.2vw, 3.25rem);   /* 34 → 52 */
  --fs-section: clamp(1.625rem, 1.20rem + 1.8vw, 2.125rem);  /* 26 → 34 */
  --fs-sub:     clamp(1.25rem,  1.10rem + 0.6vw, 1.5rem);    /* 20 → 24 */
  --fs-body:    clamp(1rem,     0.97rem + 0.13vw, 1.0625rem);/* 16 → 17 */
  --fs-small:   0.875rem;                                     /* 14 */
  --fs-btn:     1rem;                                         /* 16 */

  /* Spacing rhythm, 4/8 based */
  --s-1:  0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;

  /* Section padding, tightens on small screens */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --container: 76rem;      /* 1216px */
  --gutter: clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem);

  /* Radius scale */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation scale, kept deliberately short */
  --e-1: 0 1px 2px rgba(1, 14, 47, 0.06), 0 2px 8px rgba(1, 14, 47, 0.04);
  --e-2: 0 2px 4px rgba(1, 14, 47, 0.06), 0 12px 28px rgba(1, 14, 47, 0.08);
  --e-3: 0 8px 16px rgba(1, 14, 47, 0.10), 0 32px 64px rgba(1, 14, 47, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* Layering */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-top: 1000;

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

img, svg { max-width: 100%; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Focus on navy needs a light halo to stay visible against the orange ring */
.is-dark :focus-visible {
  outline-color: var(--orange);
  box-shadow: 0 0 0 6px rgba(255, 135, 0, 0.22);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-top);
  transform: translateY(-160%);
  background: var(--orange);
  color: var(--navy);
  font-weight: 600;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

.section--pale { background: var(--pale); }
.section--warm { background: var(--warm); }

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: var(--s-4);
}
.is-dark .eyebrow { color: var(--orange); }

.section-title {
  font-size: var(--fs-section);
  font-weight: 700;
}

.lede {
  margin-top: var(--s-4);
  color: var(--ink-muted);
  max-width: 44rem;
  text-wrap: pretty;
}
.section-head--center .lede { margin-inline: auto; }
.is-dark .lede { color: var(--on-navy-muted); }


/* --------------------------------------------------------------------------
   4. Buttons — three styles only (Blueprint 2.2 design decision)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;              /* exceeds the 44px touch minimum */
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — orange background, navy text. 7.9:1. Never white on orange. */
.btn--primary {
  background: var(--orange);
  color: var(--navy);
  border-color: var(--orange);
  box-shadow: 0 6px 20px rgba(255, 135, 0, 0.28);
}
.btn--primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  box-shadow: 0 10px 28px rgba(255, 135, 0, 0.36);
}

/* Secondary — navy outline, navy text on light surfaces */
.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover { background: var(--navy); color: var(--on-navy); }

/* On navy the outline flips to white so it stays visible */
.is-dark .btn--secondary {
  color: var(--on-navy);
  border-color: var(--navy-line-strong);
}
.is-dark .btn--secondary:hover {
  background: var(--on-navy);
  color: var(--navy);
  border-color: var(--on-navy);
}

/* Support — navy background, white text. 19:1. */
.btn--support {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}
.btn--support:hover { background: var(--navy-raised); border-color: var(--navy-raised); }

.is-dark .btn--support {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--navy-line-strong);
  color: var(--on-navy);
}
.is-dark .btn--support:hover { background: rgba(255, 255, 255, 0.16); }

.btn--sm { min-height: 44px; padding: 0.5rem 1.125rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-line);
  transition: border-color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); flex: none; }
.link-arrow:hover { border-color: var(--orange); }
.link-arrow:hover svg { transform: translateX(4px); }
.is-dark .link-arrow { color: var(--orange); }


/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.header.is-stuck {
  border-bottom-color: var(--navy-line);
  box-shadow: 0 8px 32px rgba(1, 14, 47, 0.45);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
/* The supplied artwork is a wordmark, so it carries the name on its own — no
   text lockup beside it. The two inks are custom properties, so the same inlined
   wordmark serves the navy bars and any light surface. */
.brand__logo {
  --logo-ink: var(--on-navy);
  --logo-accent: var(--orange);
  display: block;
  height: clamp(26px, 1.4rem + 0.9vw, 34px);
  aspect-ratio: 3.2859;   /* must match the symbol's viewBox */
  width: auto;
  overflow: visible;      /* the swoosh sits low; never let it be clipped */
}
.footer .brand__logo { height: 34px; }

/* On a light surface the wordmark reverts to its own navy */
.section--warm .brand__logo,
.section--pale .brand__logo,
.on-light .brand__logo { --logo-ink: #183858; }

.nav__list {
  display: none;
  align-items: center;
  gap: var(--s-1);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.875rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-navy-muted);
  text-decoration: none;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--on-navy); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--on-navy); }

.nav__cta { display: none; flex: none; }

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.nav__toggle:hover { background: rgba(255, 255, 255, 0.12); }
.nav__toggle-bars { width: 20px; height: 14px; position: relative; }
.nav__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--on-navy);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 6px; }
.nav__toggle-bars span:nth-child(3) { top: 12px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.nav__panel {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--navy);
  border-top: 1px solid var(--navy-line);
  padding: var(--s-5) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav__panel-list { display: grid; gap: var(--s-1); margin-bottom: var(--s-5); }
.nav__panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--on-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-line);
}
.nav__panel-link:hover { background: rgba(255, 255, 255, 0.06); }
.nav__panel-link svg { color: var(--orange); flex: none; }


/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* Ambient light: warm glow behind the product shot, plus a faint grid */
.hero__glow,
.hero__grid,
.hero__shard { position: absolute; pointer-events: none; }

.hero__glow {
  width: min(70rem, 120%);
  aspect-ratio: 1;
  top: -45%;
  right: -25%;
  background: radial-gradient(circle at center,
    rgba(255, 135, 0, 0.30) 0%,
    rgba(255, 135, 0, 0.10) 34%,
    rgba(255, 135, 0, 0) 62%);
  filter: blur(6px);
}

.hero__grid {
  inset: 0;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, #000 0%, transparent 75%);
  opacity: 0.7;
}

/* Angled brand shard, echoing the reference art direction */
.hero__shard {
  top: 0; right: 0;
  width: min(38rem, 60%);
  height: 100%;
  background: linear-gradient(200deg, rgba(255, 135, 0, 0.16) 0%, rgba(168, 78, 43, 0.10) 40%, transparent 72%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: clamp(2.5rem, 1rem + 6vw, 4rem);
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
  border: 1px solid var(--orange-line);
  background: var(--orange-wash);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange);
  margin-bottom: var(--s-5);
}
.hero__badge svg { flex: none; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  max-width: 15ch;
}
.hero__title em {
  font-style: normal;
  color: var(--orange);
  position: relative;
  white-space: nowrap;
}

.hero__sub {
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
  max-width: 40rem;
  text-wrap: pretty;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--navy-line);
  font-size: var(--fs-small);
  color: var(--on-navy-muted);
}
.hero__proof li { display: flex; align-items: center; gap: 0.5rem; }
.hero__proof svg { color: var(--orange); flex: none; }


/* Product shot ------------------------------------------------------------ */

.shot {
  position: relative;
  perspective: 1400px;
}
.shot__frame {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, #0A1F4A 0%, #030F32 55%, #010A24 100%);
  border: 1px solid var(--navy-line-strong);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 135, 0, 0.10);
  overflow: hidden;
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(-1deg);
  transform-origin: center left;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--navy-line);
  background: rgba(255, 255, 255, 0.03);
}
.shot__dots { display: flex; gap: 6px; }
.shot__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.shot__dots i:first-child { background: rgba(255, 135, 0, 0.65); }
.shot__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-navy-muted);
  margin-left: auto;
  margin-right: auto;
  padding-right: 2.5rem;
}

.shot__body { padding: var(--s-4); display: grid; gap: var(--s-3); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.kpi {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: 0.75rem;
  min-width: 0;
}
.kpi__label {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-navy-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi__value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.7rem + 1.1vw, 1.375rem);
  font-weight: 700;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--orange);
  margin-top: 2px;
}

.shot__panels {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-3);
}
.panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: 0.875rem;
  min-width: 0;
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 0.625rem;
}
.panel__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-navy);
}
.panel__meta { font-size: 0.6875rem; color: var(--on-navy-muted); }

.chart { width: 100%; height: auto; display: block; }
.chart__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart__bar { fill: rgba(255, 135, 0, 0.55); rx: 2; }
.chart__bar--muted { fill: rgba(255, 255, 255, 0.16); }
.chart__grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }

.stock-list { display: grid; gap: 0.5rem; }
.stock-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; }
.stock-item__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.stock-item__dot--alert { background: var(--orange); }
.stock-item__dot--ok { background: #4FC08D; }
.stock-item__dot--dead { background: rgba(255, 255, 255, 0.3); }
.stock-item__name {
  color: var(--on-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-item__qty {
  margin-left: auto;
  color: var(--on-navy-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* Floating alert chip, anchored to the shot */
.shot__chip {
  position: absolute;
  left: clamp(-0.5rem, -2vw, 0rem);
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 15rem;
  z-index: 2;
}
.shot__chip-icon {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--orange-wash);
  color: var(--brown);
}


/* --------------------------------------------------------------------------
   7. Credibility strip
   -------------------------------------------------------------------------- */

.strip {
  background: var(--navy);
  border-top: 1px solid var(--navy-line);
  color: var(--on-navy-muted);
  padding-block: var(--s-5);
}
.strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  text-align: center;
  font-size: var(--fs-small);
}
.strip__item { display: flex; align-items: center; gap: 0.625rem; }
.strip__item svg { color: var(--orange); flex: none; }
.strip__item strong { color: var(--on-navy); font-weight: 600; }


/* --------------------------------------------------------------------------
   8. Problem section
   -------------------------------------------------------------------------- */

.problem__lead {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  line-height: 1.55;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 48rem;
  text-wrap: pretty;
}
.problem__lead b { font-weight: 700; color: var(--brown); }

.pain-grid {
  display: grid;
  gap: var(--s-4);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.pain {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--pale-deep);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pain:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.pain__icon {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--pale);
  color: var(--navy);
}
.pain__text { font-size: 1rem; color: var(--ink); text-wrap: pretty; }
.pain__text b { display: block; font-weight: 700; margin-bottom: 0.25rem; }


/* --------------------------------------------------------------------------
   9. Solution section
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--s-4);
}

.vcard {
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--pale-deep);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.vcard::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--e-2); border-color: transparent; }
.vcard:hover::after { transform: scaleX(1); }

.vcard__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--orange);
  margin-bottom: var(--s-4);
}
.vcard__title {
  font-size: var(--fs-sub);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.vcard__text { color: var(--ink-muted); font-size: 1rem; text-wrap: pretty; }


/* --------------------------------------------------------------------------
   10. Dashboard preview (dark band)
   -------------------------------------------------------------------------- */

.preview { position: relative; overflow: hidden; }
.preview__glow {
  position: absolute;
  pointer-events: none;
  width: 46rem; aspect-ratio: 1;
  bottom: -55%; left: -18%;
  background: radial-gradient(circle at center, rgba(255, 135, 0, 0.18) 0%, rgba(255, 135, 0, 0) 62%);
}
.preview__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}

.insight-list { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.insight {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--navy-line);
  background: rgba(255, 255, 255, 0.035);
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.insight:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--navy-line-strong); }
.insight__num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--orange);
  padding-top: 2px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.insight__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.125rem; }
.insight__text { font-size: var(--fs-small); color: var(--on-navy-muted); text-wrap: pretty; }

/* Report cards column */
.reports { display: grid; gap: var(--s-3); }
.report {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.report__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.report__icon {
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--orange-wash);
  color: var(--orange);
}
.report__title { font-size: 0.9375rem; font-weight: 600; }
.report__sub { font-size: 0.75rem; color: var(--on-navy-muted); }
.report__tag {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--orange-wash);
  color: var(--orange);
  border: 1px solid var(--orange-line);
  flex: none;
}

.bars { display: grid; gap: 0.625rem; }
.bar-row { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: var(--s-3); font-size: 0.75rem; }
.bar-row__name { color: var(--on-navy-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__track {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.bar-row__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brown), var(--orange));
  transform: scaleX(var(--w, 0.5));
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .bar-row__fill { transform: scaleX(0); }
.js .is-visible .bar-row__fill { transform: scaleX(var(--w, 0.5)); }
.bar-row__val { color: var(--on-navy); font-variant-numeric: tabular-nums; font-weight: 600; }

.mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.mini-stat {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--navy-line);
}
.mini-stat__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-navy-muted); }
.mini-stat__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.mini-stat__value--alert { color: var(--orange); }

.preview__note {
  margin-top: var(--s-4);
  font-size: 0.75rem;
  color: var(--on-navy-muted);
  text-align: center;
}


/* --------------------------------------------------------------------------
   10b. Built for how business is done here — Mangi Pro and customer wallets
   -------------------------------------------------------------------------- */

.local__intro { max-width: 44rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.local__block {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
.local__block + .local__block {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  border-top: 1px solid var(--warm-line);
}

.local__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-4);
}
.local__title { font-size: var(--fs-section); font-weight: 700; }
.local__text { margin-top: var(--s-4); color: var(--ink-muted); text-wrap: pretty; }

.local__points { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.local__points li { display: flex; gap: 0.75rem; font-size: var(--fs-small); color: var(--ink); }
.local__points svg { color: var(--brown); flex: none; margin-top: 2px; }

/* Interactive demo card ---------------------------------------------------- */

.demo-card {
  background: var(--white);
  border: 1px solid var(--warm-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
  overflow: hidden;
}
.demo-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--navy);
  color: var(--on-navy);
}
.demo-card__head-title { font-size: 0.9375rem; font-weight: 700; }
.demo-card__head-sub { font-size: 0.75rem; color: var(--on-navy-muted); }
.demo-card__pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--navy);
  flex: none;
}
.demo-card__body { padding: var(--s-5); }

/* Bag to kilo conversion */
.convert {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--warm);
  border: 1px solid var(--warm-line);
}
.convert__unit { text-align: center; flex: 1; min-width: 0; }
.convert__unit-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.convert__unit-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 0.125rem;
}
.convert__arrow { color: var(--brown); flex: none; }

/* Remaining stock meter */
.meter { margin-top: var(--s-5); }
.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-small);
  margin-bottom: 0.5rem;
}
.meter__label { color: var(--ink-muted); }
.meter__value { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.meter__track {
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--pale);
  overflow: hidden;
}
.meter__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brown), var(--orange));
  transform: scaleX(var(--w, 1));
  transform-origin: left;
  transition: transform 520ms var(--ease-out);
}

/* Quick sale chips, mirroring the POS shortcuts */
.chips { margin-top: var(--s-5); }
.chips__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.625rem;
}
.chips__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--pale-deep);
  background: var(--white);
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
.chip:hover { border-color: var(--orange); transform: translateY(-2px); }
.chip:active { transform: translateY(0) scale(0.96); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Running receipt */
.receipt {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--pale-deep);
}
.receipt__lines { display: grid; gap: 0.375rem; min-height: 2.5rem; }
.receipt__line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.receipt__line b { font-weight: 600; }
.js .receipt__line {
  animation: receiptIn 320ms var(--ease-out) both;
}
@keyframes receiptIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.receipt__empty { font-size: var(--fs-small); color: var(--ink-muted); }
.receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--pale-deep);
}
.receipt__total-label { font-size: var(--fs-small); color: var(--ink-muted); }
.receipt__total-value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.receipt__reset {
  margin-top: var(--s-3);
  min-height: 44px;
  padding-inline: 0.875rem;
  border: 0;
  background: none;
  color: var(--brown);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.receipt__reset:hover { background: var(--warm); }

/* Wallet ledger ------------------------------------------------------------ */

.ledger {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: var(--e-3);
}
.ledger__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--navy-line);
}
.ledger__avatar {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-wash);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
}
.ledger__name { font-size: 0.9375rem; font-weight: 600; }
.ledger__meta { font-size: 0.75rem; color: var(--on-navy-muted); }
.ledger__balance-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-navy-muted);
  margin-top: var(--s-4);
}
.ledger__balance {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
}
.ledger__rows { display: grid; gap: 0.5rem; margin-top: var(--s-5); }
.ledger__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--navy-line);
  font-size: var(--fs-small);
}
.ledger__row-icon {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}
.ledger__row-label { color: var(--on-navy); }
.ledger__row-date { font-size: 0.6875rem; color: var(--on-navy-muted); }
.ledger__row-amount {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.ledger__row--in .ledger__row-icon { color: #7FE3B4; background: rgba(79, 192, 141, 0.16); }
.ledger__row--in .ledger__row-amount { color: #7FE3B4; }
.ledger__row--out .ledger__row-icon { color: var(--orange); background: var(--orange-wash); }
.ledger__row--out .ledger__row-amount { color: var(--on-navy-muted); }

/* --------------------------------------------------------------------------
   10c. Premium interaction layers
   -------------------------------------------------------------------------- */

/* Reading progress along the bottom edge of the sticky header */
.header__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.header__progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brown), var(--orange));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* Pointer spotlight. A soft warm light tracks the cursor across a card, which
   reads as depth rather than as a hover colour change. Fine pointers only. */
@media (hover: hover) and (pointer: fine) {
  .spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      16rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 135, 0, 0.13),
      rgba(255, 135, 0, 0) 62%);
    opacity: 0;
    transition: opacity 320ms var(--ease-out);
    pointer-events: none;
    z-index: 0;
  }
  .spotlight:hover::before { opacity: 1; }
  .plan--featured.spotlight::before {
    background: radial-gradient(
      16rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 135, 0, 0.22),
      rgba(255, 135, 0, 0) 62%);
  }
  /* Card contents sit above the light */
  .spotlight > * { position: relative; z-index: 1; }
}

/* Hero headline reveals word by word. The padding/margin pair keeps descenders
   from being clipped by the overflow that makes the rise work. */
.js .hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.js .hero__title .word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 760ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .hero.is-ready .hero__title .word > span { transform: none; }

/* --------------------------------------------------------------------------
   11. Features teaser
   -------------------------------------------------------------------------- */

.feature-grid { display: grid; gap: var(--s-3); }

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--pale-deep);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.feature:hover { border-color: var(--orange-line); transform: translateY(-2px); box-shadow: var(--e-1); }
.feature__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--pale);
  color: var(--navy);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.feature:hover .feature__icon { background: var(--navy); color: var(--orange); }
.feature__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.125rem; }
.feature__text { font-size: var(--fs-small); color: var(--ink-muted); text-wrap: pretty; }

.section-foot { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; justify-content: center; }


/* --------------------------------------------------------------------------
   12. Solutions teaser
   -------------------------------------------------------------------------- */

/* All rows share a height, so the one card that still carries a call to action
   does not make its whole row taller than the other. */
.solution-grid { display: grid; gap: var(--s-4); grid-auto-rows: 1fr; }

.solution {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--warm-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
/* Five of the six cards are informational, so only the linked one lifts */
a.solution:hover { transform: translateY(-4px); box-shadow: var(--e-2); }
.solution__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--warm);
  color: var(--brown);
  margin-bottom: var(--s-4);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
a.solution:hover .solution__icon { background: var(--navy); color: var(--orange); }
.solution__title { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--s-2); }
.solution__text { font-size: var(--fs-small); color: var(--ink-muted); text-wrap: pretty; }
.solution__cta {
  margin-top: auto;
  padding-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
}
.solution__cta svg { transition: transform var(--t-base) var(--ease-out); }
a.solution:hover .solution__cta svg { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   13. Story
   -------------------------------------------------------------------------- */

.story__inner {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}

.story__quote {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--brown);
  text-wrap: balance;
}
.story__body { margin-top: var(--s-5); color: var(--ink); text-wrap: pretty; }
.story__body + .story__body { margin-top: var(--s-4); }

.story__aside {
  background: var(--white);
  border: 1px solid var(--warm-line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: var(--e-1);
}
.tagline-list { display: grid; gap: var(--s-4); }
.tagline { display: flex; gap: var(--s-4); }
.tagline__mark {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--warm);
  color: var(--brown);
}
.tagline__title { font-weight: 700; font-size: 1rem; margin-bottom: 0.125rem; }
.tagline__text { font-size: var(--fs-small); color: var(--ink-muted); text-wrap: pretty; }


/* --------------------------------------------------------------------------
   14. Pricing teaser
   -------------------------------------------------------------------------- */

/* Billing period control. The active pill is a single element that slides
   between options, so the selection reads as one object moving rather than
   two things blinking. */
.billing-toggle {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: var(--s-6);
  padding: 5px;
  background: var(--pale);
  border: 1px solid var(--pale-deep);
  border-radius: var(--r-pill);
  max-width: 100%;
}
/* The pill occupies the first column and slides a whole column at a time, so
   it takes its width from the grid instead of being measured in script. */
.billing-toggle__thumb {
  grid-row: 1;
  grid-column: 1;
  border-radius: var(--r-pill);
  background: var(--navy);
  box-shadow: var(--e-2);
  transform: translateX(calc(var(--i, 0) * (100% + 4px)));
  transition: transform 420ms var(--ease-out);
  pointer-events: none;
}
.billing-toggle__btn {
  grid-row: 1;
  z-index: 1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--t-base) var(--ease-out);
}
.billing-toggle__btn:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.billing-toggle__btn:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.billing-toggle__btn:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.billing-toggle__btn:nth-of-type(4) { grid-column: 4; grid-row: 1; }
.billing-toggle__btn:hover { color: var(--navy); }
.billing-toggle__btn.is-active { color: var(--on-navy); }

/* The free trial is a SERENGETI-only offer, so it is badged on that card alone. */
.billing-toggle__save {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--navy);
}

/* Rolling price digits. Each digit is a column of 0–9 that slides to the
   target, so a price change reads as the number counting rather than swapping. */
.roller {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.roller__sep { display: inline-block; }
.roller__digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: baseline;
}
.roller__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 620ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.roller__strip b { display: block; height: 1em; font-weight: inherit; }

.plan-grid { display: grid; gap: var(--s-4); align-items: stretch; }

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--pale-deep);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--e-2); }

.plan--featured {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
  box-shadow: var(--e-3);
  position: relative;
  /* Clears the flag so it can never collide with a long package name */
  padding-top: 3.5rem;
}
.plan--featured .plan__desc,
.plan--featured .plan__best { color: var(--on-navy-muted); }
.plan--featured .plan__price-note { color: var(--on-navy-muted); }

.plan__flag {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--navy);
}

.plan__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.plan__tier {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brown);
  margin-top: 0.125rem;
}
.plan--featured .plan__tier { color: var(--orange); }

.plan__price {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--pale-deep);
}
.plan--featured .plan__price { border-top-color: var(--navy-line); }
.plan__price-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.plan__price-note { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 0.125rem; }

.plan__price-value {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.plan__price-unit { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.plan--featured .plan__price-unit { color: var(--on-navy-muted); }

.plan__billed {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-muted);
  /* Two lines' worth is always reserved: Enterprise's annual figure wraps where
     the others do not, and without this the cards jump on every period change. */
  min-height: 2.7em;
}
.plan--featured .plan__billed { color: var(--on-navy-muted); }
.plan__was { text-decoration: line-through; opacity: 0.75; }

.plan__trial {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--s-3);
  padding: 0.3rem 0.625rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(79, 192, 141, 0.16);
  color: #7FE3B4;
  border: 1px solid rgba(79, 192, 141, 0.35);
}

.plan__desc { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-muted); text-wrap: pretty; }

.plan__specs {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--pale-deep);
}
.plan--featured .plan__specs { border-top-color: var(--navy-line); }
.plan__specs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.plan__specs svg { color: var(--brown); flex: none; }
.plan--featured .plan__specs li { color: var(--on-navy); }
.plan--featured .plan__specs svg { color: var(--orange); }
.plan__best {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.plan__best b { color: inherit; font-weight: 700; }
.plan--featured .plan__best b { color: var(--on-navy); }
/* Pinned to the bottom so every card's button lines up regardless of how much
   copy sits above it */
.plan__action { margin-top: auto; padding-top: var(--s-5); }
.plan__action .btn { width: 100%; }

.pricing__note {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.pricing__note a { color: var(--navy); font-weight: 600; }


/* --------------------------------------------------------------------------
   15. Ecosystem line — deliberately low visual weight (Blueprint 4.6 / 9.3)
   -------------------------------------------------------------------------- */

.ecosystem { padding-block: var(--s-7); background: var(--white); border-top: 1px solid var(--pale-deep); }
.ecosystem__inner {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  max-width: 54rem;
  margin-inline: auto;
}
.ecosystem__icon { color: var(--ink-muted); flex: none; padding-top: 2px; }
.ecosystem__text {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.ecosystem__text a { color: var(--navy); font-weight: 600; }


/* --------------------------------------------------------------------------
   16. Closing call to action
   -------------------------------------------------------------------------- */

.closing { position: relative; overflow: hidden; text-align: center; }
.closing__glow {
  position: absolute;
  pointer-events: none;
  width: 56rem; aspect-ratio: 1;
  top: -60%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(255, 135, 0, 0.22) 0%, rgba(255, 135, 0, 0) 60%);
}
.closing__inner { position: relative; z-index: var(--z-raised); max-width: 44rem; margin-inline: auto; }
.closing__title {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.closing__text { margin-top: var(--s-4); color: var(--on-navy-muted); text-wrap: pretty; }
.closing .btn-row { justify-content: center; }
.closing__micro { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--on-navy-muted); }


/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: var(--on-navy);
  border-top: 1px solid var(--navy-line);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--s-6);
}
.footer__grid {
  display: grid;
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--navy-line);
}
.footer__about { max-width: 22rem; }
.footer__about .brand { margin-bottom: var(--s-4); margin-right: 0; }
.footer__desc { font-size: var(--fs-small); color: var(--on-navy-muted); text-wrap: pretty; }

.footer__col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-4);
}
.footer__links { display: grid; gap: 0.125rem; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--fs-small);
  color: var(--on-navy-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--orange); }

.footer__contact { display: grid; gap: var(--s-1); }
.footer__contact li { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; font-size: var(--fs-small); color: var(--on-navy-muted); }
.footer__contact svg { color: var(--orange); flex: none; }
.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;      /* short labels still get a full-size tap area */
  text-decoration: none;
}
.footer__contact a:hover { color: var(--orange); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  font-size: 0.8125rem;
  color: var(--on-navy-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;      /* short labels still get a full-size tap area */
  text-decoration: none;
}
.footer__legal a:hover { color: var(--orange); }

.footer__ecosystem {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.footer__ecosystem-label { color: rgba(174, 187, 209, 0.7); }
.footer__ecosystem a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  gap: 0.3rem;
  color: var(--on-navy-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-line-strong);
}
.footer__ecosystem a:hover { color: var(--orange); border-color: var(--orange-line); }


/* --------------------------------------------------------------------------
   18. Floating WhatsApp support action (mobile) — Blueprint 3.4
   -------------------------------------------------------------------------- */

.float-cta {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.125rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--on-navy);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--e-3);
  border: 1px solid var(--navy-line-strong);
  transition: opacity var(--t-base) var(--ease-out), transform 320ms var(--ease-out);
}
.js .float-cta { opacity: 0; transform: translateY(120%); }
.js .float-cta.is-shown { opacity: 1; transform: translateY(0); }

/* On phones the labelled pill sits across the package buttons, so it collapses
   to the brand mark alone. The accessible name stays on the anchor. */
@media (max-width: 34em) {
  .float-cta {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .float-cta__label { display: none; }
}
.float-cta svg { color: var(--orange); flex: none; }


/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

/* Hidden-until-revealed states are gated behind .js (set by an inline script in
   the head). Without scripting every one of these rules is inert, so the page
   renders complete and static rather than blank. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.97); }

.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero staged entrance, runs on load rather than on scroll */
.js .hero [data-enter] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.hero.is-ready [data-enter] {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.hero.is-ready .shot__frame {
  transition: transform 1100ms var(--ease-out);
  transition-delay: 260ms;
}

/* Chart draw-in. JS measures the real path length into --len. */
.js .chart__line {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.js .is-drawn .chart__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
.js .chart__bar { transform: scaleY(0); transform-origin: bottom; }
.js .is-drawn .chart__bar {
  transform: scaleY(1);
  transition: transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}


/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 40em) {          /* 640px */
  .pain-grid   { grid-template-columns: repeat(2, 1fr); }
  .card-grid   { grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {          /* 1024px */
  .nav__list { display: flex; }
  .nav__cta  { display: inline-flex; }
  .nav__toggle { display: none; }

  .hero__inner   { grid-template-columns: 1.05fr 1fr; }
  .preview__inner{ grid-template-columns: 1fr 1.05fr; }
  .story__inner  { grid-template-columns: 1.15fr 0.85fr; }

  .local__block  { grid-template-columns: 1fr 1fr; }
  /* Second block mirrors the first so the two do not read as a list */
  .local__block--mirrored .local__visual { order: -1; }

  .card-grid    { grid-template-columns: repeat(3, 1fr); }
  .solution-grid{ grid-template-columns: repeat(3, 1fr); }
  .plan-grid    { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }

  .float-cta { display: none; }     /* desktop has the header CTA instead */
}

/* The feature grid deliberately stops at two columns. Four columns squeezes the
   descriptions to roughly 28 characters per line, well under a readable measure. */

/* Below 1024px the tilted shot squares up so nothing clips */
@media (max-width: 63.99em) {
  .shot__frame { transform: none; }
  .shot { max-width: 34rem; margin-inline: auto; }
  .shot__chip { left: 0; bottom: -1rem; }

  /* Sideways reveals become vertical: on a narrow screen a horizontal slide
     pushes past the viewport edge and reads as a wobble rather than a reveal. */
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translate3d(0, 20px, 0); }

  /* Keep the last of the footer clear of the floating support button */
  .footer { padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: the three calls to action stack as one full-width primary above a
   two-up row, so the whole set still clears the fold on a 667px screen. */
@media (max-width: 47.99em) {
  .btn-row { display: grid; grid-template-columns: 1fr 1fr; }
  .btn-row .btn:first-child { grid-column: 1 / -1; }
  .btn-row .btn { width: 100%; padding-inline: 0.875rem; }
  .btn-row .link-arrow { grid-column: 1 / -1; width: auto; }
}

/* Four options will not sit across a phone in one row, so below 52em the
   control becomes a full-width two-by-two block and the pill moves on both
   axes. Discount badges are dropped; the note below the packages still states
   every saving. */
@media (max-width: 52em) {
  .billing-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .billing-toggle__save { display: none; }
  .billing-toggle__btn { padding-inline: 0.5rem; font-size: 0.9375rem; }

  .billing-toggle__btn:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .billing-toggle__btn:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .billing-toggle__btn:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .billing-toggle__btn:nth-of-type(4) { grid-column: 2; grid-row: 2; }

  .billing-toggle__thumb {
    transform: translate(
      calc(var(--c, 0) * (100% + 4px)),
      calc(var(--r, 0) * (100% + 4px)));
  }
}

@media (max-width: 26.5em) {        /* very small phones */
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi:last-child { display: none; }
  .shot__panels { grid-template-columns: 1fr; }
  .shot__chip { position: static; margin-top: var(--s-4); max-width: none; }
}


/* --------------------------------------------------------------------------
   21. Motion preferences and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js .hero [data-enter] { opacity: 1 !important; transform: none !important; }

  .js .chart__line { stroke-dashoffset: 0 !important; }
  .js .chart__bar  { transform: none !important; }
  .js .bar-row__fill { transform: scaleX(var(--w, 0.5)) !important; }
  .js .float-cta.is-shown { opacity: 1; transform: none; }

  /* Premium layers degrade to plain state changes */
  .js .hero__title .word > span { transform: none !important; }
  .spotlight::before { display: none !important; }
  .js .receipt__line { animation: none !important; }
  .btn:hover, .vcard:hover, .pain:hover, a.solution:hover, .plan:hover, .feature:hover { transform: none; }
}

@media print {
  .header, .float-cta, .hero__glow, .hero__grid, .hero__shard, .preview__glow, .closing__glow { display: none !important; }
  body { color: #000; background: #fff; }
  .section--navy, .hero, .footer, .strip { background: #fff !important; color: #000 !important; }
}