/* =====================================================================
   LEEMRO — marketing site
   Hand-written CSS, no framework, no build step. One file, one request.

   Structure:
     1. Tokens          6. Sections (hero, modules, flow, …)
     2. Reset & base    7. Product mock-ups
     3. Typography      8. Forms
     4. Buttons         9. Footer & floating CTA
     5. Chrome (nav)   10. Motion, responsive, reduced-motion
   ===================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;              /* text paints immediately; no invisible FOIT */
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces — the app's "Midnight Pro" ink ramp, kept identical so the site
     and the product feel like one thing. */
  --ink-950: #070b16;
  --ink-900: #0b1220;
  --ink-850: #0f1729;
  --ink-800: #141d33;
  --ink-700: #1e293b;
  --ink-600: #334155;

  /* Accents */
  --brand:     #06b6d4;
  --brand-400: #22d3ee;
  --brand-300: #67e8f9;
  --violet:    #6366f1;
  --violet-400:#818cf8;
  --teal:      #14b8a6;
  --amber:     #f59e0b;
  --emerald:   #10b981;
  --rose:      #f43f5e;

  /* Text */
  --text:   #e8eefc;
  --text-2: #b6c2da;
  --text-3: #8194b4;

  /* Lines & glass */
  --line:       rgb(148 163 184 / 0.14);
  --line-soft:  rgb(148 163 184 / 0.08);
  --glass:      rgb(15 23 41 / 0.72);
  --card:       linear-gradient(180deg, rgb(20 29 51 / 0.86), rgb(11 18 32 / 0.86));

  /* Type scale — fluid, so nothing needs a breakpoint to stay readable. */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem);

  --wrap: 1200px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow:     0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 20px 50px -25px rgb(0 0 0 / 0.85);
  --shadow-lg:  0 1px 0 0 rgb(255 255 255 / 0.06) inset, 0 40px 90px -40px rgb(0 0 0 / 0.9);
  --glow:       0 0 0 1px rgb(6 182 212 / 0.22), 0 18px 60px -18px rgb(6 182 212 / 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. Reset & base ───────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;        /* anchors clear the sticky header */
  /* `clip`, not `hidden`: hidden turns the element into a scroll container,
     which silently kills `position: sticky` on the header inside it. */
  overflow-x: clip;
}

body.page {
  min-height: 100svh;
  background: var(--ink-950);
  color: var(--text);
  font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                /* the orbs and float cards extend past the fold */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgb(6 182 212 / 0.3); color: #fff; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--ink-950);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: none; }

/* Scroll progress: a hairline the width of how far down the page you are. */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--brand), var(--brand-300));
  box-shadow: 0 0 14px rgb(6 182 212 / 0.7);
}

/* Ambient field: three slow colour blooms and a faint grid, behind everything. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.orb-1 {
  width: 48rem; height: 40rem;
  top: -18rem; left: -12rem;
  background: radial-gradient(circle, rgb(6 182 212 / 0.5), transparent 68%);
  animation: drift-a 26s ease-in-out infinite;
}
.orb-2 {
  width: 42rem; height: 38rem;
  top: -8rem; right: -14rem;
  background: radial-gradient(circle, rgb(99 102 241 / 0.45), transparent 68%);
  animation: drift-b 32s ease-in-out infinite;
}
.orb-3 {
  width: 40rem; height: 34rem;
  bottom: -16rem; left: 38%;
  background: radial-gradient(circle, rgb(20 184 166 / 0.32), transparent 70%);
  animation: drift-c 38s ease-in-out infinite;
}
.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(148 163 184 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(148 163 184 / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%);
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-5rem, 6rem, 0) scale(0.94); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { transform: translate3d(-7rem, -4rem, 0) scale(1.1); }
}

/* Lift the content off the ambient layer. Targeted rather than a blanket
   `.page > *`, because that also overwrote `position` on the sticky nav, the
   fixed progress bar, the drawer and the skip link. */
main, .cta-band, .foot { position: relative; z-index: 1; }

/* ── 3. Typography ─────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 680;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.018em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(6 182 212 / 0.08);
  color: var(--brand-300);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* A gradient that slowly travels through the text. */
.grad {
  background: linear-gradient(100deg, var(--brand-300), var(--violet-400) 40%, var(--brand-300) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen {
  to { background-position: -220% 0; }
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 { margin-block: 1rem 0.9rem; }

.muted { color: var(--text-3); }
.icon-xs { flex: none; }

/* ── 4. Buttons ────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 640;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--step-0); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-300), var(--brand) 55%, var(--violet));
  background-size: 180% 180%;
  color: #04121c;
  box-shadow: var(--glow);
}
.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 0 0 1px rgb(103 232 249 / 0.4), 0 24px 60px -18px rgb(6 182 212 / 0.65);
}
.btn-primary:active { transform: scale(0.975); }

.btn-ghost {
  border: 1px solid var(--line);
  background: rgb(148 163 184 / 0.06);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgb(148 163 184 / 0.12);
  border-color: rgb(148 163 184 / 0.28);
}

.btn-wa {
  background: #25d366;
  color: #06210f;
}
.btn-wa:hover { background: #34e57a; }

/* The arrow nudges forward on hover — a small signal that the link goes on. */
.btn svg { transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ── 5. Chrome ─────────────────────────────────────────────────────── */

.topbar {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, rgb(99 102 241 / 0.22), rgb(6 182 212 / 0.22));
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  color: var(--text-2);
  text-align: center;
}
.topbar-in svg { color: var(--brand-300); }
.topbar-in .tb-short { display: none; }
.topbar-in a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--brand-300);
  font-weight: 640;
  border-bottom: 1px solid transparent;
}
.topbar-in a:hover { border-bottom-color: currentColor; }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
.nav.is-stuck {
  background: rgb(7 11 22 / 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line-soft);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
/* Height-driven: width:auto keeps the artwork's own 1357x393 ratio, and the
   width/height attributes on the tag still reserve the right box so nothing
   shifts as it loads. */
/* 40px: the LEEMRO letterforms occupy ~44% of the artwork's height, so this
   puts the wordmark at ~17px — legible beside 14px nav links. Smaller and the
   "HRMS" rule beneath it degrades into noise. */
.brand img {
  height: 40px;
  width: auto;
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
.brand:hover img { transform: scale(1.035); }
.foot-logo img { height: 46px; }
.drawer-head .brand img { height: 34px; }

@media (max-width: 400px) {
  .brand img { height: 34px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 560;
  color: var(--text-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover, .nav-link.is-active { color: var(--text); background: rgb(148 163 184 / 0.08); }
.nav-link svg { transition: transform 0.25s var(--ease); }
.has-menu:hover .nav-link svg { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  width: 17rem;
  padding: 0.45rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) scale(0.97);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.has-menu:hover .menu,
.has-menu:focus-within .menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  color: var(--text-2);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.menu a svg { opacity: 0; transform: translateX(-4px); transition: all 0.2s var(--ease); }
.menu a:hover { background: rgb(6 182 212 / 0.1); color: var(--text); }
.menu a:hover svg { opacity: 1; transform: none; }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.nav-toggle { display: none; padding: 0.4rem; color: var(--text-2); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgb(4 7 14 / 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--ink-900);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  color: var(--text);
}
.drawer-links a.sub {
  padding-left: 1rem;
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--text-3);
}
.drawer-links a svg { opacity: 0.4; }
.drawer-cta { display: grid; gap: 0.6rem; margin-top: auto; }
.drawer-cta .btn { width: 100%; }

/* ── 6. Hero ───────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-block: 1.1rem 1.25rem; }
.hero .lead { max-width: 34rem; }

/* The rotating noun in the headline. Height is locked so nothing reflows. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  /* The glyph box of a word with descenders ("payroll", "your people") is
     taller than the line box, so a 1.12em clip cut the tails off. Make the
     window tall enough, then pull the surplus back with a negative margin so
     the two headline lines still sit at the original spacing. */
  height: 1.34em;
  margin-bottom: -0.22em;
}
.rotator span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  white-space: nowrap;
  /* Taken out of rendering entirely, not merely made transparent. Transparent
     was not enough: with the gradient on the wrapper, Chrome built its
     background-clip:text mask from every descendant glyph — hidden ones
     included — and painted all five words stacked on each other. The gradient
     now lives on each word, and this makes it impossible for any engine to
     paint one that is not currently in or leaving. */
  visibility: hidden;
}
.rotator span.is-in,
.rotator span.is-out { visibility: visible; }
.rotator span.is-in  { opacity: 1; transform: none; }
.rotator span.is-out { opacity: 0; transform: translateY(-100%); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  font-size: var(--step--1);
  color: var(--text-3);
}
.hero-points li { display: flex; align-items: center; gap: 0.45rem; }
.hero-points svg { color: var(--emerald); }

/* ── 7. Product mock-ups ───────────────────────────────────────────── */

.mock-stage {
  position: relative;
  perspective: 1600px;
}
.mock {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotateY(-9deg) rotateX(3deg) translateZ(0);
  transition: transform 0.9s var(--ease);
}
.mock-stage:hover .mock { transform: rotateY(-4deg) rotateX(1deg); }

.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgb(7 11 22 / 0.6);
}
.mock-bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink-600);
}
.mock-bar i:nth-child(1) { background: #ff5f57; }
.mock-bar i:nth-child(2) { background: #febc2e; }
.mock-bar i:nth-child(3) { background: #28c840; }
.mock-bar span {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.mock-body { padding: 1rem; display: grid; gap: 0.75rem; }

.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.tile {
  padding: 0.75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: rgb(7 11 22 / 0.5);
}
.tile b { display: block; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; }
.tile small { font-size: 0.68rem; color: var(--text-3); }
.tile.up b { color: var(--emerald); }
.tile.warn b { color: var(--amber); }

.mock-panel {
  padding: 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: rgb(7 11 22 / 0.5);
}
.mock-panel h4 {
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.7rem;
}

/* Bar chart — each column grows from the baseline when scrolled into view. */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 5.5rem;
}
.bars i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--brand-400), rgb(6 182 212 / 0.25));
  height: 6%;
  transition: height 1.1s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.is-in .bars i { height: var(--h); }
.bars i.alt { background: linear-gradient(180deg, var(--violet-400), rgb(99 102 241 / 0.25)); }

/* Donut — stroke drawn on reveal via dashoffset. */
.donut { display: grid; place-items: center; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.donut .track { stroke: rgb(148 163 184 / 0.12); }
.donut .val {
  stroke: url(#donutGrad);
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  transition: stroke-dashoffset 1.4s var(--ease) 0.2s;
}
.is-in .donut .val { stroke-dashoffset: var(--off, 70); }
.donut b {
  position: absolute;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.rows { display: grid; gap: 0.45rem; }
.row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgb(148 163 184 / 0.05);
  font-size: 0.76rem;
}
.avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #06121c;
  background: linear-gradient(135deg, var(--brand-300), var(--violet-400));
  flex: none;
}
.row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; color: var(--text-2); }
.pill {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.pill.ok   { background: rgb(16 185 129 / 0.16); color: #6ee7b7; }
.pill.late { background: rgb(245 158 11 / 0.16); color: #fcd34d; }
.pill.off  { background: rgb(148 163 184 / 0.14); color: var(--text-3); }
.pill.new  { background: rgb(6 182 212 / 0.16); color: var(--brand-300); }

/* Floating cards that hover beside the mock-up. */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow);
  font-size: 0.76rem;
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-card b { display: block; font-size: 0.86rem; letter-spacing: -0.02em; }
.float-card small { color: var(--text-3); font-size: 0.66rem; }
.float-card .dot {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.fc-1 { top: 4%; left: -11%; animation-delay: -1s; }
.fc-1 .dot { background: rgb(16 185 129 / 0.18); color: #6ee7b7; }
.fc-2 { bottom: 16%; right: -9%; animation-delay: -3.4s; }
.fc-2 .dot { background: rgb(6 182 212 / 0.18); color: var(--brand-300); }
.fc-3 { bottom: -5%; left: 4%; animation-delay: -5s; }
.fc-3 .dot { background: rgb(99 102 241 / 0.2); color: var(--violet-400); }

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

/* Live pulse dot */
.live {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  flex: none;
}
.live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--emerald);
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ── Stats strip ───────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--line-soft);
  overflow: hidden;
}
.stat {
  padding: 1.6rem 1.4rem;
  background: rgb(11 18 32 / 0.72);
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}
.stat:hover { background: rgb(20 29 51 / 0.85); }
.stat b {
  display: block;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--brand-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat p { margin-top: 0.45rem; font-weight: 600; font-size: var(--step--1); }
.stat small { color: var(--text-3); font-size: 0.74rem; }

/* ── Module explorer (tabs) ────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(11 18 32 / 0.6);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.tab[aria-selected="true"] { color: #04121c; }
.tab svg { width: 16px; height: 16px; }
/* The moving pill sits behind the labels and slides between them. */
.tab-pill {
  position: absolute;
  z-index: 0;
  top: 0.35rem;
  left: 0;
  height: calc(100% - 0.7rem);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-300), var(--brand) 60%, var(--violet));
  box-shadow: 0 8px 24px -10px rgb(6 182 212 / 0.8);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

.panel-wrap { margin-top: 2.5rem; }
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.panel[hidden] { display: none; }
.panel.is-entering .panel-copy > * { animation: rise 0.6s var(--ease) backwards; }
.panel.is-entering .panel-copy > *:nth-child(2) { animation-delay: 0.06s; }
.panel.is-entering .panel-copy > *:nth-child(3) { animation-delay: 0.12s; }
.panel.is-entering .panel-visual { animation: rise 0.7s var(--ease) 0.08s backwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.panel h3 { font-size: var(--step-2); margin-block: 0.85rem 0.75rem; }
.checks { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-2);
  font-size: var(--step--1);
}
.checks svg {
  margin-top: 0.28rem;
  color: var(--brand-300);
  background: rgb(6 182 212 / 0.12);
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
}

/* ── Flow (how it works) ───────────────────────────────────────────── */

.flow { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); }
.flow-step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: rgb(11 18 32 / 0.66);
  transition: background-color 0.35s ease;
}
.flow-step:hover { background: rgb(20 29 51 / 0.8); }
.flow-num {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgb(103 232 249 / 0.55);
  transition: color 0.4s ease;
}
.flow-step:hover .flow-num { color: rgb(103 232 249 / 0.14); }
.flow-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.flow-step h3 { margin-bottom: 0.4rem; }
.flow-step p { color: var(--text-3); font-size: var(--step--1); }

/* ── Feature grid with cursor spotlight ────────────────────────────── */

.f-groups { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.f-group > h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: var(--step-1);
}
.f-group > h3 svg { color: var(--brand-300); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}
.card {
  position: relative;
  padding: 1.35rem;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: var(--card);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s var(--ease);
}
.card::before {
  /* The spotlight: a soft light that follows the pointer across the card. */
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 0%),
    rgb(6 182 212 / 0.16),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgb(103 232 249 / 0.3);
  box-shadow: var(--shadow);
}
.card:hover::before { opacity: 1; }
.card h4 { font-size: var(--step-0); font-weight: 660; margin-bottom: 0.35rem; }
.card p { font-size: var(--step--1); color: var(--text-3); }
.card .card-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 0.85rem;
  border-radius: 10px;
  background: rgb(6 182 212 / 0.1);
  border: 1px solid rgb(6 182 212 / 0.2);
  color: var(--brand-300);
}

/* ── Marquee ───────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  border-block: 1px solid var(--line-soft);
  padding-block: 1.1rem;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee-track svg { color: var(--brand); opacity: 0.85; }
@keyframes slide {
  to { transform: translateX(-50%); }
}

/* ── Mobile app section & phone ────────────────────────────────────── */

.phone-wrap { display: grid; place-items: center; }
.phone {
  position: relative;
  width: 16.5rem;
  aspect-ratio: 9 / 19.5;
  border-radius: 2.6rem;
  padding: 0.55rem;
  background: linear-gradient(160deg, #26324c, #0d1424 40%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgb(148 163 184 / 0.16);
  transform: rotate(-3deg);
  transition: transform 0.8s var(--ease);
}
.phone:hover { transform: rotate(0deg) translateY(-6px); }
.phone::before {
  content: '';
  position: absolute;
  top: 0.9rem; left: 50%;
  transform: translateX(-50%);
  width: 4.5rem; height: 1.05rem;
  border-radius: 999px;
  background: #05080f;
  z-index: 3;
}
.phone-screen {
  height: 100%;
  border-radius: 2.15rem;
  background: var(--ink-950);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 0.85rem 0.85rem;
  gap: 0.6rem;
}
.phone-greet { font-size: 0.72rem; color: var(--text-3); }
.phone-greet b { display: block; font-size: 0.95rem; color: var(--text); letter-spacing: -0.02em; }
.punch {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 1.1rem;
  border-radius: var(--r);
  border: 1px solid rgb(6 182 212 / 0.25);
  background: radial-gradient(circle at 50% 0%, rgb(6 182 212 / 0.14), transparent 70%);
}
.punch-btn {
  position: relative;
  width: 5.2rem; height: 5.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  color: #04121c;
  background: linear-gradient(135deg, var(--brand-300), var(--brand));
  box-shadow: 0 12px 30px -10px rgb(6 182 212 / 0.8);
}
.punch-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand-300);
  animation: ping 2.6s var(--ease) infinite;
}
.punch small { font-size: 0.64rem; color: var(--text-3); }
.phone-rows { display: grid; gap: 0.4rem; }
.phone-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: rgb(148 163 184 / 0.06);
  font-size: 0.67rem;
  color: var(--text-2);
}
.phone-row svg { color: var(--brand-300); width: 14px; height: 14px; }
.phone-tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
}
.phone-tabs svg { width: 16px; height: 16px; }
.phone-tabs .on { color: var(--brand-300); }

/* ── Pricing ───────────────────────────────────────────────────────── */

.bill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(11 18 32 / 0.6);
  margin-inline: auto;
}
.bill-toggle button {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 620;
  color: var(--text-3);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.bill-toggle button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--brand-300), var(--brand));
  color: #04121c;
}
.save-chip {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgb(16 185 129 / 0.18);
  color: #6ee7b7;
  font-size: 0.66rem;
  font-weight: 700;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.1rem;
  align-items: start;
  /* With two plans, an uncapped auto-fit row gives each card half of a wide
     desktop — far wider than the text wants to be. Cap and centre instead. */
  max-width: 54rem;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--card);
  transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: rgb(148 163 184 / 0.24); }
.plan.featured {
  border-color: rgb(103 232 249 / 0.38);
  box-shadow: var(--glow);
  background: linear-gradient(180deg, rgb(8 145 178 / 0.14), rgb(11 18 32 / 0.9));
}
.plan-flag {
  position: absolute;
  top: -0.75rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-300), var(--violet));
  color: #04121c;
  font-size: 0.66rem;
  font-weight: 740;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan h3 { font-size: var(--step-1); }
.plan .seats { font-size: 0.72rem; color: var(--brand-300); font-weight: 620; }
.plan .blurb { font-size: var(--step--1); color: var(--text-3); }
.price { display: flex; align-items: baseline; gap: 0.35rem; }
/* The plan toggle hides one of two server-rendered prices with the `hidden`
   attribute. Any `display` rule on those spans would defeat it, so make the
   attribute win outright. */
[data-price-for][hidden] { display: none !important; }
/* "INR" is a currency prefix, not part of the figure — set it small and lifted
   so the eye still lands on the number first, the way a ₹ glyph would read. */
.price .cur {
  font-style: normal;
  font-size: 0.4em;
  font-weight: 680;
  letter-spacing: 0.06em;
  vertical-align: 0.42em;
  margin-right: 0.18em;
  color: var(--text-2);
}
.price b {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 740;
  letter-spacing: -0.045em;
  line-height: 1;
}
/* Direct child only: the amount itself lives in a <span> inside the <b>,
   and a descendant selector shrank it to the suffix's size. */
.price > span { font-size: var(--step--1); color: var(--text-3); }
.price-note { font-size: 0.72rem; color: var(--text-3); margin-top: -0.5rem; }
.plan .checks { margin-top: 0; }
.plan .btn { width: 100%; margin-top: auto; }

/* ── FAQ accordion ─────────────────────────────────────────────────── */

.faq { display: grid; gap: 0.65rem; max-width: 52rem; margin-inline: auto; }
.qa {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgb(11 18 32 / 0.62);
  overflow: hidden;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.qa.is-open { border-color: rgb(103 232 249 / 0.3); background: rgb(20 29 51 / 0.8); }
.qa > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.3rem;
  text-align: left;
  font-weight: 620;
  font-size: var(--step-0);
}
.qa .sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--brand-300);
  transition: transform 0.35s var(--ease), background-color 0.3s ease;
}
.qa.is-open .sign { transform: rotate(135deg); background: rgb(6 182 212 / 0.14); }
/* 0fr → 1fr animates to the content's real height without measuring it. */
.qa-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.qa.is-open .qa-body { grid-template-rows: 1fr; }
.qa-body > div { overflow: hidden; }
.qa-body p {
  padding: 0 1.3rem 1.2rem;
  color: var(--text-2);
  font-size: var(--step--1);
}

/* ── Prose (solution & legal pages) ────────────────────────────────── */

.prose { max-width: 46rem; }
.prose h2 { font-size: var(--step-2); margin-block: 2.4rem 0.85rem; }
.prose h3 { margin-block: 1.8rem 0.6rem; }
.prose p { color: var(--text-2); margin-bottom: 1rem; }
.prose ul { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.prose ul li {
  display: flex;
  gap: 0.6rem;
  color: var(--text-2);
}
.prose ul li::before { content: '—'; color: var(--brand-300); flex: none; }
.prose a { color: var(--brand-300); border-bottom: 1px solid rgb(103 232 249 / 0.35); }
.prose a:hover { border-bottom-color: currentColor; }
.prose strong { color: var(--text); font-weight: 650; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--brand-300); }
.crumbs span { opacity: 0.5; }

/* ── 8. Forms ──────────────────────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field { display: grid; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--text-2); }
.field label .req { color: var(--rose); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgb(7 11 22 / 0.7);
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5b6b88; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgb(7 11 22 / 0.95);
  box-shadow: 0 0 0 3px rgb(6 182 212 / 0.16);
}
.field .err { font-size: 0.74rem; color: #fda4af; }
.field.has-err input, .field.has-err textarea, .field.has-err select { border-color: var(--rose); }

/* Honeypot — visually gone, still focusable-free for real users. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  margin-bottom: 1.25rem;
}
.notice.ok  { background: rgb(16 185 129 / 0.12); color: #6ee7b7; border: 1px solid rgb(16 185 129 / 0.25); }
.notice.bad { background: rgb(244 63 94 / 0.12);  color: #fda4af; border: 1px solid rgb(244 63 94 / 0.25); }

.contact-methods { display: grid; gap: 0.75rem; }
.method {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: rgb(11 18 32 / 0.6);
  transition: border-color 0.25s ease, transform 0.3s var(--ease), background-color 0.25s ease;
}
.method:hover { border-color: rgb(103 232 249 / 0.3); transform: translateX(4px); background: rgb(20 29 51 / 0.8); }
.method .dot {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  flex: none;
  background: rgb(6 182 212 / 0.12);
  color: var(--brand-300);
}
.method.wa .dot { background: rgb(37 211 102 / 0.14); color: #4ade80; }
.method b { display: block; font-size: var(--step-0); font-weight: 640; }
.method small { color: var(--text-3); font-size: 0.74rem; }

/* ── 9. CTA band & footer ──────────────────────────────────────────── */

.cta-band { padding-block: clamp(3rem, 6vw, 5rem); }
.cta-in {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid rgb(103 232 249 / 0.22);
  background: linear-gradient(150deg, rgb(8 145 178 / 0.2), rgb(11 18 32 / 0.92) 55%, rgb(99 102 241 / 0.18));
  text-align: center;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  top: -60%; left: 50%;
  width: 44rem; height: 44rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(6 182 212 / 0.22), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
  animation: bob 9s ease-in-out infinite;
}
/* Lift the CONTENT above the glow — but never the glow itself. `.cta-in > *`
   has the same specificity as `.cta-glow` and comes later, so it was resetting
   the glow to `position: relative`, dropping a 44rem-square decorative block
   into the flow and inflating the band to ~1150px of mostly empty space. */
.cta-in > *:not(.cta-glow) { position: relative; z-index: 1; }
.cta-in h2 { margin-block: 1rem 0.85rem; }
.cta-lead { color: var(--text-2); max-width: 44rem; margin-inline: auto; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.8rem;
}
.cta-note { margin-top: 1.1rem; font-size: 0.76rem; color: var(--text-3); }

.foot {
  border-top: 1px solid var(--line-soft);
  background: rgb(5 8 16 / 0.7);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.foot-in {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem;
}
.foot-brand p { font-size: var(--step--1); color: var(--text-3); margin-top: 0.85rem; }
.foot-blurb { max-width: 28rem; }
.foot-social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.foot-social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--text-3);
  transition: all 0.25s var(--ease);
}
.foot-social a:hover {
  color: var(--brand-300);
  border-color: rgb(103 232 249 / 0.35);
  transform: translateY(-2px);
}
.foot-col h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.foot-col a, .foot-col p {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.3rem;
  font-size: var(--step--1);
  color: var(--text-2);
  transition: color 0.2s ease, transform 0.25s var(--ease);
}
.foot-col a:hover { color: var(--brand-300); transform: translateX(3px); }
.foot-col svg { color: var(--text-3); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--text-3);
}

.wa-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem;
  border-radius: 999px;
  background: #25d366;
  color: #06210f;
  font-weight: 660;
  font-size: var(--step--1);
  box-shadow: 0 14px 40px -12px rgb(37 211 102 / 0.75);
  transform: translateY(150%);
  transition: transform 0.45s var(--ease), box-shadow 0.3s ease;
}
.wa-float.is-in { transform: none; }
.wa-float span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.4s var(--ease), padding-right 0.4s var(--ease);
}
.wa-float:hover span { max-width: 9rem; padding-right: 0.4rem; }
.wa-float:hover { box-shadow: 0 18px 50px -12px rgb(37 211 102 / 0.9); }

/* ── 10. Motion ────────────────────────────────────────────────────── */

/* Two deliberate choices here, both to stop the reveal system from silently
   breaking the components it animates:

   1. `animation`, not `transition`. Most revealed elements are cards that
      declare their own `transition` shorthand for hover; a reveal rule using
      `transition` replaced it wholesale, leaving hover with no easing.
   2. the `translate` property, not `transform`. `[data-stagger].is-in > *` set
      `transform: none`, which — at equal specificity but later in the file —
      overrode `.card:hover { transform: translateY(-4px) }` and killed the
      hover lift on every card and plan on the site. `translate` is a separate
      property, so the two can never contend.

   The whole thing is gated on `.js-anim`, set by an inline script in <head>
   and withdrawn by its watchdog if site.js never boots — so a blocked script
   can degrade to a plain, fully visible page rather than a blank one. */

.js-anim [data-reveal]:not(.is-in),
.js-anim [data-stagger]:not(.is-in) > * { opacity: 0; }

.js-anim [data-reveal].is-in {
  animation: reveal-in 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}

/* Children stagger themselves off the parent's reveal. */
.js-anim [data-stagger].is-in > * { animation: reveal-in 0.7s var(--ease-out) backwards; }
.js-anim [data-stagger].is-in > *:nth-child(1) { animation-delay: 0.02s; }
.js-anim [data-stagger].is-in > *:nth-child(2) { animation-delay: 0.09s; }
.js-anim [data-stagger].is-in > *:nth-child(3) { animation-delay: 0.16s; }
.js-anim [data-stagger].is-in > *:nth-child(4) { animation-delay: 0.23s; }
.js-anim [data-stagger].is-in > *:nth-child(5) { animation-delay: 0.3s; }
.js-anim [data-stagger].is-in > *:nth-child(6) { animation-delay: 0.37s; }

@keyframes reveal-in {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mock { transform: none; }
  .mock-stage { margin-top: 1rem; }
  .float-card { display: none; }
  .panel { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .flow-step { grid-template-columns: 1fr; gap: 0.6rem; }
  .flow-num { font-size: 2rem; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .topbar-in { gap: 0.4rem; }
  .topbar-in span { font-size: 0.72rem; }
  .topbar-in .tb-long { display: none; }
  .topbar-in .tb-short { display: inline; }
  .topbar-in a { white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .tile-row { grid-template-columns: repeat(2, 1fr); }
  .wa-float span { display: none; }
  /* iOS zooms the page on focus for anything under 16px. */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Honour the OS setting. Everything decorative stops; nothing disappears. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim [data-reveal]:not(.is-in),
  .js-anim [data-stagger]:not(.is-in) > * { opacity: 1 !important; }
  .wa-float { transform: none; }
  .mock { transform: none; }
}