/* ===================== Tokens ===================== */
:root {
  --brand-900: #3f0418;
  --brand-800: #5a0623;
  --brand-700: #6e0729;
  --brand-600: #860a35;
  --brand-500: #a00e40;
  --brand-400: #b3124f;
  --brand-50:  #fbeef2;
  --brand-25:  #fdf6f8;

  --ink:   #1c1a24;
  --body:  #5d5a66;
  --muted: #8a8792;
  --line:  #ece8ec;
  --bg:    #ffffff;
  --bg-soft: #f6f5f7;
  --ok:    #1f9d55;
  --bad:   #d93838;

  --radius: 14px;
  --shadow: 0 18px 50px -18px rgba(63, 4, 24, .35);
  --shadow-sm: 0 6px 20px -8px rgba(28, 26, 36, .18);
  --max: 1840px;
  --gutter: clamp(16px, 6.5vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; font-size: clamp(16px, calc(9px + .55vw), 18px); }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 800; }
p { margin: 0; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* Let grid columns shrink below their content's width (mockups, code blocks) */
[class$="__inner"] > *, [class$="__grid"] > * { min-width: 0; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 12px;
}
.eyebrow--light { color: rgba(255,255,255,.85); }

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: .92rem;
  padding: 12px 22px; border-radius: 8px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 15px 26px; }
.btn--pill { border-radius: 999px; padding: 9px 20px; }
.btn--light { background: #fff; color: var(--brand-700); }
.btn--light:hover { box-shadow: 0 8px 22px -8px rgba(0,0,0,.4); }
.btn--outline-light { color: #fff; border-color: rgba(255,255,255,.75); }
.btn--outline-light:hover { background: rgba(255,255,255,.1); }
.btn--primary { background: var(--brand-700); color: #fff; }
.btn--primary:hover { background: var(--brand-600); box-shadow: var(--shadow-sm); }
.btn--outline { color: var(--brand-700); border-color: var(--brand-700); }
.btn--outline:hover { background: var(--brand-50); }

/* ===================== Navbar ===================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand-700);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.nav__inner { display: flex; align-items: center; gap: 32px; height: 68px; }
.nav__brand { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__brand img { height: 46px; width: auto; }
.nav__name { color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links > a {
  color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 500; position: relative; padding: 6px 0;
}
.nav__links > a:hover { color: #fff; }
/* the active tab is underlined with a brush stroke that paints itself in,
   in the hand of the logo's script */
.nav__links > a::after {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -3px; height: 11px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.8C14 8.9 30 8.2 50 7.6 72 7 92 6.6 112 5.6c2.2-.1 4.6-.6 6-1.2-1.2 1.6-3.6 2.8-6.4 3.4C93 9.4 72 9.9 51 10.5 34 10.9 18 11.4 5 12.3c-1.9.2-3.4-.4-3.6-1.3-.1-.6.2-1.1.6-1.2z'/%3E%3Cpath opacity='.55' d='M24 11.9c14-.7 30-1.1 46-1.5 10-.3 19-.5 27-1.1-8 1.1-17 1.6-27 2-15 .5-31 .9-46 1.6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.8C14 8.9 30 8.2 50 7.6 72 7 92 6.6 112 5.6c2.2-.1 4.6-.6 6-1.2-1.2 1.6-3.6 2.8-6.4 3.4C93 9.4 72 9.9 51 10.5 34 10.9 18 11.4 5 12.3c-1.9.2-3.4-.4-3.6-1.3-.1-.6.2-1.1.6-1.2z'/%3E%3Cpath opacity='.55' d='M24 11.9c14-.7 30-1.1 46-1.5 10-.3 19-.5 27-1.1-8 1.1-17 1.6-27 2-15 .5-31 .9-46 1.6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}
.nav__links > a.is-active::after { clip-path: inset(0 0 0 0); }
.nav__cta { display: flex; gap: 12px; margin-left: 24px; }
.nav__mobile-cta { display: none; }
.nav__toggle { display: none; }

/* ===================== Hero ===================== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 85% 0%, var(--brand-500) 0%, var(--brand-700) 45%, var(--brand-800) 100%);
  padding: 64px 0 72px;
}
.hero__shapes {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 60%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.04) 75%, transparent 75%),
    linear-gradient(45deg, transparent 70%, rgba(0,0,0,.08) 70%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 3vw, 64px); align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 3.4vw, 5rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: 22px; }
.hero__lead { font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 36rem; margin-bottom: 26px; }
.hero__checks { list-style: none; padding: 0; margin: 0 0 34px; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.hero__checks li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; }
.hero__checks li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e0729' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ===================== Mockups (shared) ===================== */
.mock { font-size: clamp(6.5px, .7vw, 12px); }
.hero__visual { position: relative; padding: 0 10% 0 0; }

.laptop { width: 92%; }
.laptop__screen {
  background: #16131a; border-radius: 1.6em 1.6em .4em .4em; padding: 1.4em 1.4em 1em;
  box-shadow: var(--shadow);
}
.laptop__base {
  height: 1.6em; margin: 0 -6%; border-radius: 0 0 2em 2em;
  background: linear-gradient(#d9d6dc, #a9a5ad);
  box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.6);
}
.dash { display: grid; grid-template-columns: 11em 1fr; background: #fff; border-radius: .4em; overflow: hidden; color: var(--ink); min-height: 27em; }
.dash__side { background: var(--brand-700); color: rgba(255,255,255,.85); padding: 1.4em .9em; display: flex; flex-direction: column; gap: .35em; }
.dash__logo { display: flex; align-items: center; gap: .45em; font-weight: 800; color: #fff; font-size: 1.1em; white-space: nowrap; margin-bottom: 1.2em; }
.dash__logo img { height: 3.2em; width: auto; }
.dash__item { padding: .55em .8em; border-radius: .4em; font-size: .95em; }
.dash__item.is-on { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.dash__main { padding: 1.4em; background: #faf9fb; display: flex; flex-direction: column; gap: 1em; }
.dash__title { font-weight: 700; font-size: 1.5em; }
.dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.stat { background: #fff; border-radius: .6em; padding: .8em 1em; box-shadow: 0 .2em .8em rgba(0,0,0,.05); display: flex; flex-direction: column; }
.stat small { color: var(--muted); font-size: .85em; }
.stat b { font-size: 1.45em; }
.stat em { font-style: normal; font-size: .8em; font-weight: 600; }
.up { color: var(--ok); } .down { color: var(--bad); }
.dash__card { background: #fff; border-radius: .6em; padding: .9em 1em; box-shadow: 0 .2em .8em rgba(0,0,0,.05); }
.dash__card-head { display: flex; justify-content: space-between; font-weight: 700; font-size: .95em; margin-bottom: .5em; }
.chip { font-weight: 500; font-size: .85em; border: 1px solid var(--line); border-radius: .3em; padding: 0 .5em; color: var(--muted); }
.dash__chart { width: 100%; height: 5.5em; display: block; }
.dash__chart path { vector-effect: non-scaling-stroke; }
.msgrow { display: grid; grid-template-columns: 1.6em 1fr auto auto; align-items: center; gap: .8em; padding: .45em 0; border-top: 1px solid var(--line); font-size: .9em; }
.msgrow:first-of-type { border-top: 0; }
.msgrow .dot { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--brand-600); }
.msgrow b { display: block; font-weight: 600; }
.msgrow small { color: var(--muted); font-size: .85em; }
.msgrow .ok { color: var(--ok); background: #e6f6ec; border-radius: 999px; padding: .1em .7em; font-weight: 600; font-size: .85em; }
.msgrow time { color: var(--muted); font-size: .85em; }

.phone {
  position: absolute; width: 15em; border-radius: 2.4em; background: #f3f1f4;
  border: .55em solid #17141b; box-shadow: var(--shadow); overflow: hidden;
}
.phone__notch { width: 40%; height: 1.4em; background: #17141b; border-radius: 0 0 1em 1em; margin: 0 auto; }
.phone--hero { right: 4%; top: 12%; height: 30em; display: flex; flex-direction: column; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; background: var(--brand-700); color: #fff; padding: .8em 1em; font-weight: 600; margin-top: -1.4em; padding-top: 2em; }
.phone__chat { flex: 1; padding: 1em; display: flex; flex-direction: column; gap: .8em; }
.bubble { background: #fff; color: var(--ink); border-radius: .9em .9em .9em .2em; padding: .7em .9em; font-size: .95em; line-height: 1.4; box-shadow: 0 .2em .6em rgba(0,0,0,.06); }
.bubble small { display: block; color: var(--muted); font-size: .8em; margin-top: .3em; }
.phone__input { margin: .8em; padding: .6em 1em; border-radius: 999px; background: #fff; color: var(--muted); font-size: .9em; }

.toast {
  position: absolute; right: -2%; top: 52%; width: 19em;
  display: flex; gap: .9em; align-items: center;
  background: #fff; color: var(--ink); border-radius: .9em; padding: 1.1em 1.2em;
  box-shadow: var(--shadow); animation: float 5s ease-in-out infinite;
}
.toast b { display: block; font-size: 1.05em; }
.toast small { color: var(--body); font-size: .9em; line-height: 1.35; display: block; }
.toast__ico { flex: none; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--brand-700); color: #fff; display: grid; place-items: center; }
.toast__ico svg { width: 1.6em; height: 1.6em; stroke-width: 3; }

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

/* ===================== Features ===================== */
.features { padding: clamp(40px, 3.5vw, 64px) 0; border-bottom: 1px solid var(--line); }
.features__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.feature { padding: 18px 22px; border-left: 1px solid var(--line); }
.feature:first-child { border-left: 0; padding-left: 0; }
.feature__ico {
  width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); margin-bottom: 20px;
}
.feature h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.feature p { font-size: .85rem; color: var(--muted); }

/* ===================== Use cases ===================== */
.usecases { background: var(--bg-soft); padding: clamp(72px, 5vw, 110px) 0; overflow: hidden; }
.usecases__inner { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: clamp(32px, 3.5vw, 72px); align-items: center; }
.usecases__intro h2 { margin-bottom: 20px; }
.usecases__intro p:not(.eyebrow) { margin-bottom: 28px; max-width: 26rem; }
.usecases__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.usecases__list li { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; }
.usecases__list li::before {
  content: ""; grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--brand-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.usecases__list b { color: var(--ink); font-size: .92rem; }
.usecases__list span { font-size: .82rem; color: var(--muted); }

.usecases__visual { position: relative; font-size: clamp(7px, .75vw, 13px); padding: 3em 0 1em; }
.usecases__glow {
  position: absolute; left: 10%; right: 10%; top: 18%; bottom: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(179,18,79,.22), rgba(179,18,79,0));
  filter: blur(10px);
}
.usecases__phones {
  position: relative; width: 112%; max-width: none; height: auto; margin-left: -26%;
}
.sending {
  position: absolute; right: 16%; top: 6%; width: 15em; z-index: 2;
  background: #fff; border-radius: 1em; padding: 1.4em; box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
.sending svg { color: var(--brand-700); width: 2.4em; height: 2.4em; margin-bottom: .6em; }
.sending p { color: var(--ink); font-size: 1.15em; line-height: 1.35; margin-bottom: .9em; }
.sending__bar { height: .55em; background: var(--line); border-radius: 999px; overflow: hidden; }
.sending__bar span { display: block; height: 100%; width: 68%; background: var(--brand-700); border-radius: inherit; animation: load 3.2s ease-in-out infinite; }
@keyframes load { 0% { width: 12%; } 70%,100% { width: 92%; } }

/* ===================== Stats ===================== */
.stats { background: linear-gradient(90deg, var(--brand-800), var(--brand-600)); color: #fff; padding: 34px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stats__grid div { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid rgba(255,255,255,.22); }
.stats__grid div:first-child { border-left: 0; }
.stats b { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.stats span { font-size: .9rem; opacity: .9; }

/* ===================== Pricing ===================== */
.pricing { padding: clamp(84px, 6vw, 120px) 0; }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 48px; }
.section-head h2 { margin-bottom: 14px; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2vw, 40px); align-items: stretch; }
.plan {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px;
  display: flex; flex-direction: column; background: #fff;
}
.plan h3 { font-size: 1.15rem; margin-bottom: 14px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan__price b { font-size: 2.2rem; color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.plan__vol { font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; flex: 1; align-content: start; font-size: .9rem; }
.plan li::before { content: "✓"; color: var(--brand-600); font-weight: 800; margin-right: 10px; }
.plan--featured { background: linear-gradient(160deg, var(--brand-600), var(--brand-800)); border-color: transparent; color: rgba(255,255,255,.9); box-shadow: var(--shadow); transform: translateY(-8px); }
.plan--featured h3, .plan--featured .plan__price b { color: #fff; }
.plan--featured .plan__vol { color: rgba(255,255,255,.75); }
.plan--featured li::before { color: #fff; }
.plan__badge { position: absolute; top: -12px; right: 24px; background: #fff; color: var(--brand-700); font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* ===================== Developers ===================== */
.devs { background: var(--brand-900); color: rgba(255,255,255,.85); padding: clamp(84px, 6vw, 120px) 0; }
.devs__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.devs h2 { color: #fff; margin-bottom: 18px; }
.devs__list { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 8px; }
.devs__list li::before { content: "→"; margin-right: 10px; color: #ff8fb4; }
.code {
  margin: 0; background: #1a0d12; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 26px; overflow-x: auto; font: 500 .85rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #f4e9ee;
}
.code .c { color: #9c8a92; } .code .s { color: #ffb3cb; }

/* ===================== Closing ===================== */
.closing { background: var(--bg-soft); padding: 64px 0 0; overflow: hidden; }
.closing__inner { display: grid; grid-template-columns: 1.05fr .9fr 1.05fr; gap: clamp(32px, 3vw, 64px); align-items: end; }
.testimonial { padding-bottom: 124px; }
.testimonial h2 { margin-bottom: 18px; }
.testimonial blockquote { margin: 0 0 24px; font-size: .98rem; }
.person { display: flex; gap: 14px; align-items: center; }
.person__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-700); color: #fff; display: grid; place-items: center; font-weight: 700; }
.person b { color: var(--ink); display: block; font-size: .92rem; }
.person small { display: block; font-size: .8rem; color: var(--muted); }
.stars { color: var(--brand-700); letter-spacing: 2px; font-size: .9rem; }

.closing__visual { position: relative; left: -6vw; height: clamp(380px, 28vw, 520px); align-self: end; }
/* behind the photo: a maroon card at a slant and a pale one further back;
   both sink into the bottom line, cut off there just like the person */
.closing__shape { position: absolute; inset: -10% -30% 0 -30%; pointer-events: none; clip-path: inset(0 0 0 0); }
.closing__shape::before, .closing__shape::after {
  content: ""; position: absolute; border-radius: 30px; transform-origin: 50% 50%;
}
/* the pale card stays further back on the left */
.closing__shape::before {
  left: 25%; bottom: -14%; width: 56%; height: 78%;
  background: linear-gradient(170deg, rgba(179, 18, 79, .11), rgba(179, 18, 79, .03));
  transform: rotate(14deg);
}
/* the maroon card runs behind the person at a slant, so it shows on both
   sides: above the right shoulder, and from halfway down the left arm */
.closing__shape::after {
  left: 2%; bottom: -65.7%; width: 72%; height: 100%;
  transform-origin: 50% 0;
  background: linear-gradient(165deg, var(--brand-500) 0%, var(--brand-700) 55%, var(--brand-800) 100%);
  box-shadow: 0 30px 60px -30px rgba(63, 4, 24, .6);
  transform: rotate(-30deg);
}
.closing__photo { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 94%; width: auto; max-width: none; z-index: 2; }

.cta-card { background: #f5e9ee; border: 1px solid #efdde5; border-radius: 18px; padding: 32px; margin-bottom: 40px; align-self: center; }
.cta-card h2 { font-size: 1.6rem; margin-bottom: 12px; }
.cta-card > p:not(.eyebrow):not(.cta-card__notes) { font-size: .9rem; margin-bottom: 22px; }
.cta-card__notes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: .78rem; color: var(--muted); }
.cta-card__notes span + span::before { content: "•"; margin-right: 16px; }
.contact-lines { display: grid; gap: 4px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--brand-700); }

/* ===================== Footer ===================== */
.footer { background: linear-gradient(180deg, var(--brand-900) 0%, #540622 100%); color: rgba(255,255,255,.88); }
.footer a { transition: color .15s, background .15s, transform .15s; }
.footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 80px); padding: clamp(56px, 5vw, 88px) 0 clamp(40px, 3.5vw, 64px); }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col h4 { margin: 0 0 8px; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.footer__col a { font-size: .98rem; }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.footer__about { max-width: 460px; }
.footer__brand { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.footer__brand img { height: 64px; width: auto; }
.footer__name { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.footer__about p { font-size: .92rem; line-height: 1.75; }

.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 24px 0 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a:hover { color: #fff; text-decoration: underline; }

/* ===================== Contact form ===================== */
.contact { padding: clamp(84px, 6vw, 120px) 0; background: #fff; }
.contact__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact__intro h2 { margin-bottom: 16px; }
.contact__intro > p:not(.eyebrow) { max-width: 28rem; margin-bottom: 28px; }
.contact__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact__ways a {
  display: flex; flex-direction: column; padding: 16px 20px; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease-out);
}
.contact__ways a:hover { border-color: rgba(134, 10, 53, .35); transform: translateY(-2px); }
.contact__ways b { color: var(--ink); font-size: .95rem; }
.contact__ways span { color: var(--brand-700); font-weight: 600; font-size: .9rem; }
.contact__form {
  display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 20px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: .82rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink); width: 100%;
  padding: 12px 14px; border-radius: 10px; border: 1px solid #ddd6dc; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(134, 10, 53, .12);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--bad); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__form .btn { justify-self: start; }
.contact__form .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.contact__status { font-size: .9rem; font-weight: 600; min-height: 1.4em; }
.contact__status.is-ok { color: var(--ok); }
.contact__status.is-error { color: var(--bad); }

.footer__social { display: flex; gap: 14px; }
.footer__social[hidden] { display: none; }
.footer__social svg { width: 18px; height: 18px; }
.footer__social a:hover { color: #fff; }
.testimonial blockquote, .testimonial .person { transition: opacity .35s ease; }
.testimonial.is-switching blockquote, .testimonial.is-switching .person { opacity: 0; }

/* ===================== Chat button =====================
   A maroon bubble with a heartbeat, bottom right, on every part of the page.
   It opens the ways to reach us (WhatsApp, a call). */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  /* waits out of sight below the screen, then rises into place (see main.js) */
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease;
}
.chat-fab.shown { transform: none; opacity: 1; pointer-events: auto; }
.chat-main {
  position: relative; width: 64px; height: 64px; padding: 0; border: none; border-radius: 50%;
  background: var(--brand-700); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(110, 7, 41, .38);
  transition: transform .2s, background .2s;
}
.chat-main:hover { transform: scale(1.1); background: var(--brand-600); box-shadow: 0 14px 30px rgba(110, 7, 41, .45); }
/* the page sets every svg to a stroked outline; these icons are filled */
.chat-main svg { position: relative; z-index: 1; transition: transform .25s ease, opacity .2s ease; }
.chat-main .chat-glyph { width: 34px; height: 34px; fill: #fff; stroke: none; }
.chat-main .chat-chev { position: absolute; width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.6; opacity: 0; transform: rotate(-90deg) scale(.6); }
.chat-fab.open .chat-main .chat-glyph { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat-fab.open .chat-main .chat-chev { opacity: 1; transform: none; }
/* the heartbeat: a ring swells out of the button and fades, twice in quick
   succession like a heartbeat, then rests a few seconds before beating again */
.chat-ping {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: var(--brand-700); opacity: 0;
  animation: chat-beat 5s cubic-bezier(0, 0, .2, 1) infinite;
}
.chat-ping + .chat-ping { animation-delay: .45s; }
.chat-fab.open .chat-ping { display: none; }
@keyframes chat-beat {
  0%   { transform: scale(1); opacity: .35; }
  18%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
/* unread badge on the button */
.chat-badge {
  position: absolute; top: -3px; right: -3px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: #e11d2e; color: #fff; border: 2px solid #fff;
  font-size: .75rem; font-weight: 800; line-height: 20px; text-align: center;
  animation: chat-badge-in .35s cubic-bezier(.2, .9, .3, 1.4) both;
}
.chat-badge[hidden] { display: none; }
@keyframes chat-badge-in { from { transform: scale(0); } to { transform: scale(1); } }
/* welcome message standing above the button, like a chat that just came in */
.chat-msg {
  position: absolute; right: 0; bottom: calc(100% + 16px); width: 300px;
  background: #fff; color: var(--ink); border-radius: 16px 16px 4px 16px;
  padding: 16px 20px 18px; box-shadow: 0 14px 40px -10px rgba(28, 26, 36, .35);
  cursor: pointer; animation: chat-msg-in .35s ease-out both;
}
.chat-msg[hidden], .chat-fab.open .chat-msg { display: none; }
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-msg p { font-size: .92rem; line-height: 1.6; }
.chat-msg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .78rem; font-weight: 700; color: var(--brand-700); }
.chat-msg__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.chat-msg__close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.chat-msg__close:hover { background: var(--bg-soft); color: var(--ink); }
/* the ways to reach us, standing above the button */
.chat-options {
  position: absolute; right: 4px; bottom: calc(100% + 14px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.chat-options[hidden] { display: none; }
.chat-opt { display: flex; align-items: center; gap: 12px; animation: chat-opt-in .22s ease-out both; }
.chat-opt:nth-child(2) { animation-delay: .05s; }
@keyframes chat-opt-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.chat-label {
  background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600;
  padding: 8px 16px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.chat-icon {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s;
}
.chat-opt:hover .chat-icon { transform: scale(1.07); }
.chat-icon svg { width: 26px; height: 26px; fill: #fff; stroke: none; }
.chat-icon.wa { background: #25d366; }
.chat-icon.call { background: var(--brand-900); }

/* ===================== FAQ ===================== */
.faq { padding: clamp(84px, 6vw, 120px) 0; background: var(--bg-soft); }
.faq__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head h2 { margin-bottom: 16px; }
.faq__head p:not(.eyebrow) { max-width: 26rem; }
.faq__head a, .faq__a a { color: var(--brand-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq__list { display: grid; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s, box-shadow .25s; }
.faq__item.is-open { border-color: rgba(134, 10, 53, .3); box-shadow: 0 14px 34px -18px rgba(63, 4, 24, .35); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.faq__q:hover { color: var(--brand-700); }
/* a plus that folds into a minus */
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-50); transition: background .25s; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--brand-700); transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .25s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--brand-700); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; transform: rotate(180deg); }
/* the answer opens by growing its row from 0fr to 1fr */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 22px; font-size: .95rem; opacity: 0; translate: 0 -6px; transition: opacity .3s, translate .45s cubic-bezier(.22, 1, .36, 1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: 1; translate: 0 0; transition-delay: .08s; }

/* ===================== Motion =====================
   One idea throughout: messages being sent and arriving. Text comes into
   focus from a blur, pieces slide in sideways like chat bubbles, ticks draw
   themselves, numbers count up, code types itself out. Each part plays as it
   comes into view, leaves as it goes out, and plays again on the way back.
   Entrances use the individual translate/scale/rotate properties so they
   never fight the transforms and float animations the elements already have. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
html.motion-setup [data-anim], html.motion-setup [data-anim]::before, html.motion-setup [data-anim]::after { transition: none !important; }

.nav { position: sticky; }

/* hover: things lean towards you, they do not balloon */
.feature { transition: transform .35s var(--ease-out); }
.feature__ico { transition: background .3s, color .3s; }
.feature__ico svg { transition: translate .35s var(--ease-out); }
@media (hover: hover) {
  .feature:hover { transform: translateY(-4px); }
  .feature:hover .feature__ico { background: var(--brand-700); color: #fff; }
  .feature:hover .feature__ico svg { translate: 2px -2px; }
  .plan { transition: box-shadow .3s, border-color .3s; }
  .plan:not(.plan--featured):hover { border-color: rgba(134, 10, 53, .35); box-shadow: var(--shadow-sm); }
}

/* ---- hero: plays whenever the hero comes back into view (.is-live, see main.js) ---- */
html.motion .hero.is-live .eyebrow { animation: type-in .9s steps(20, end) .15s both; }
html.motion .hero.is-live h1 .w { display: inline-block; animation: focus-in 1s var(--ease-out) both; animation-delay: calc(.35s + var(--i) * .14s); }
html.motion .hero.is-live .hero__lead { animation: focus-in 1s var(--ease-out) .8s both; }
html.motion .hero.is-live .hero__checks li { animation: slide-in-left .7s var(--ease-out) both; animation-delay: calc(1s + var(--i) * .12s); }
html.motion .hero.is-live .hero__checks li::before { animation: tick-pop .45s var(--ease-out) both; animation-delay: calc(1.15s + var(--i) * .12s); }
html.motion .hero.is-live .hero__actions .btn { animation: wipe-in .8s var(--ease-out) both; animation-delay: calc(1.45s + var(--i) * .12s); }
.hero__visual { perspective: 1600px; }
html.motion .hero.is-live .laptop { animation: laptop-in 1.3s var(--ease-out) .3s both; }
html.motion .hero.is-live .phone--hero { animation: rise-in 1s var(--ease-out) .95s both; }
html.motion .hero.is-live .toast { animation: toast-in .8s var(--ease-out) 1.7s both, float 5s ease-in-out 2.5s infinite; }
html.motion .hero.is-live .dash__chart .line { animation: type-in 1.6s ease-out 1.2s both; }
html.motion .hero.is-live .dash__chart .area { animation: fade 1s ease-out 2s both; }
html.motion .hero.is-live .msgrow .ok { animation: tick-pop .5s var(--ease-out) both; }
html.motion .hero.is-live .msgrow:nth-of-type(1) .ok { animation-delay: 2.1s; }
html.motion .hero.is-live .msgrow:nth-of-type(2) .ok { animation-delay: 2.4s; }

@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes focus-in { from { opacity: 0; filter: blur(14px); translate: .35em 0; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes slide-in-left { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tick-pop { from { scale: 0; } to { scale: 1; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
@keyframes laptop-in { from { opacity: 0; translate: 80px 0; rotate: y -16deg; } to { opacity: 1; translate: 0 0; rotate: y 0deg; } }
@keyframes rise-in { from { opacity: 0; translate: 0 90px; } to { opacity: 1; translate: 0 0; } }
@keyframes toast-in { from { opacity: 0; translate: 60px 0; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- the rest of the page, as it scrolls into view (main.js tags the elements) ---- */
html.motion [data-anim] {
  transition: opacity .8s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out),
              rotate 1s var(--ease-out), filter .8s var(--ease-out), clip-path 1s var(--ease-out),
              transform .35s var(--ease-out), box-shadow .3s, border-color .3s;
  transition-delay: var(--d, 0ms);
}
html.motion [data-anim="focus"]   { opacity: 0; filter: blur(10px); translate: 0 14px; }
html.motion [data-anim="left"]    { opacity: 0; translate: -44px 0; }
html.motion [data-anim="right"]   { opacity: 0; translate: 56px 0; }
html.motion [data-anim="bubble"]  { opacity: 0; translate: 40px 0; scale: .94; transform-origin: 100% 50%; }
html.motion [data-anim="zoom"]    { opacity: 0; scale: .88; }
html.motion [data-anim="rise"]    { opacity: 0; translate: 0 70px; }
html.motion [data-anim="flip"]    { opacity: 0; translate: 0 40px; rotate: x 24deg; transform-origin: 50% 100%; }
html.motion [data-anim="unveil"]  { clip-path: inset(100% 0 0 0); }
html.motion [data-anim="type"]    { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s steps(13, end) var(--d, 0ms); }
html.motion [data-anim="person"]  { opacity: 0; translate: 0 90px; scale: .94; transform-origin: 50% 100%;
                                    transition-duration: .9s, 1.3s, 1.3s; transition-delay: var(--d, 0ms); }
html.motion [data-anim].is-in { opacity: 1; translate: 0 0; scale: 1; rotate: x 0deg; clip-path: inset(0 0 0 0); }
html.motion [data-anim="focus"].is-in { filter: blur(0); }
html.motion .usecases__list li[data-anim]::before { scale: 0; transition: scale .45s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .3s); }
html.motion .usecases__list li.is-in::before { scale: 1; }
.pricing__grid { perspective: 1400px; }

/* the person rises first, on their own; then the pale card slides up from the
   right and turns into place behind them, and the maroon card swings open
   from its top edge to its slant. Once in, the maroon card drifts gently. */
html.motion .closing__shape::before {
  opacity: 0; translate: 70px 60px; rotate: 18deg;
  transition: opacity .8s ease-out, translate 1.2s var(--ease-out), rotate 1.3s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 750ms);
}
html.motion .closing__shape::after {
  opacity: 0; scale: .8; rotate: 26deg;
  transition: opacity .7s ease-out, scale 1.3s var(--ease-out), rotate 1.4s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 950ms);
}
html.motion .closing__shape.is-in::before { opacity: 1; translate: 0 0; rotate: 0deg; }
html.motion .closing__shape.is-in::after {
  opacity: 1; scale: 1; rotate: 0deg;
  animation: card-drift 7s ease-in-out 2.4s infinite alternate;
}
@keyframes card-drift { from { translate: 0 0; } to { translate: 6px -8px; } }


/* ===================== Responsive ===================== */
@media (min-width: 1200px) {
  .hero h1 { white-space: nowrap; }
}

@media (max-width: 1080px) {
  .nav__links { gap: 20px; }
  .features__grid { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .feature:nth-child(4) { border-left: 0; padding-left: 0; }
  .usecases__inner { grid-template-columns: 1fr 1fr; }
  .usecases__visual { grid-column: span 2; max-width: 520px; width: 100%; margin: 0 auto; }
  .closing__inner { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: repeat(3, 1fr); }
  .footer__about { grid-column: 1 / -1; }
  .closing__shape::after { left: -2.7%; bottom: -62.4%; width: 80%; }
  .closing__visual { left: 0; grid-column: 1 / -1; order: 3; width: 100%; max-width: 440px; height: 360px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .nav__cta { display: none; }
  .nav__toggle {
    display: flex; flex-direction: column; gap: 5px; margin-left: auto;
    background: none; border: 0; padding: 10px; cursor: pointer;
  }
  .nav__toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--brand-800); padding: 8px 24px 24px; margin: 0;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,.4);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav__links > a::after { display: none; }
  .nav__mobile-cta { display: flex; gap: 12px; margin-top: 20px; }
  .nav__mobile-cta .btn { flex: 1; }

  .hero { padding: 48px 0 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { font-size: clamp(5.5px, 1.6vw, 10px); max-width: 640px; }
  .devs__inner { grid-template-columns: 1fr; gap: 36px; }
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
  .contact__inner { grid-template-columns: 1fr; gap: 32px; }
  .faq__head { position: static; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .plan--featured { transform: none; }
}

@media (max-width: 640px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__visual { font-size: 1.45vw; padding-right: 6%; }
  .features__grid { grid-template-columns: 1fr 1fr; }
  .feature, .feature:first-child { border-left: 0; padding: 14px 0; }
  .usecases__inner { grid-template-columns: 1fr; gap: 36px; }
  .usecases__visual { grid-column: auto; font-size: 2.2vw; padding-top: 5em; }
  .usecases__phones { width: 100%; margin-left: 0; }
  .sending { right: 0; }
  .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .stats__grid div:nth-child(3) { border-left: 0; }
  .closing__inner { grid-template-columns: 1fr; }
  .testimonial { padding-bottom: 0; }
  .cta-card { padding: 24px; }
  .code { font-size: .75rem; padding: 18px; }
  .faq__q { padding: 18px; font-size: .96rem; }
  .field-row { grid-template-columns: 1fr; }
  .contact__form .btn { justify-self: stretch; }
  .faq__a p { padding: 0 18px 20px; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer__name { font-size: 1.6rem; }
  .footer__brand img { height: 52px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .chat-fab { right: 16px; bottom: 16px; }
  .chat-main { width: 56px; height: 56px; }
  .chat-main .chat-glyph { width: 30px; height: 30px; }
  .chat-msg { width: min(280px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chat-ping { display: none; }
  html { scroll-behavior: auto; }
}