/* Demo landing in the style of a product page: centred product name and tagline, real product shots in
   device frames, alternating white / light-gray / black sections, pill buttons and chevron links. System
   font first (SF on Apple devices), Inter elsewhere. Original design and copy; no third-party branding. */
:root {
  --bg: #ffffff;
  --alt: #f5f5f7;
  --tile: #ffffff;           /* tiles that sit on --alt */
  --tile-on-bg: #f5f5f7;     /* tiles that sit on --bg */
  --ink: #1d1d1f;
  --sec: #6e6e73;            /* 5.1:1 on white, 4.6:1 on --alt */
  --line: #d2d2d7;
  --link: #0066cc;           /* 5.6:1 on white */
  --btn: #0071e3;
  --btn-hover: #0077ed;
  --on-btn: #ffffff;
  --eyebrow: #b64400;        /* 5.9:1 on white */
  --ok: #1d8a43;
  --closed: #b86e00;
  --frame: #1d1d1f;
  --frame-ring: rgba(0, 0, 0, .08);
  --shadow-device: 0 30px 60px -20px rgba(0, 0, 0, .28), 0 18px 36px -18px rgba(0, 0, 0, .3);
  --nav-bg: rgba(255, 255, 255, .78);
  --glow: rgba(0, 113, 227, .26);
  --dark-bg: #000000; --dark-tile: #161617; --dark-ink: #f5f5f7; --dark-sec: #a1a1a6; --dark-link: #2997ff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --alt: #161617; --tile: #1d1d1f; --tile-on-bg: #161617; --ink: #f5f5f7; --sec: #a1a1a6;
    --line: #424245; --link: #2997ff; --eyebrow: #ff9f45; --ok: #30d158; --closed: #ffb340;
    --frame: #2c2c2e; --frame-ring: rgba(255, 255, 255, .14); --shadow-device: 0 30px 60px -20px rgba(0, 0, 0, .9);
    --nav-bg: rgba(22, 22, 23, .78); --dark-bg: #000000; --dark-tile: #1d1d1f; --glow: rgba(41, 151, 255, .30);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --alt: #161617; --tile: #1d1d1f; --tile-on-bg: #161617; --ink: #f5f5f7; --sec: #a1a1a6;
  --line: #424245; --link: #2997ff; --eyebrow: #ff9f45; --ok: #30d158; --closed: #ffb340;
  --frame: #2c2c2e; --frame-ring: rgba(255, 255, 255, .14); --shadow-device: 0 30px 60px -20px rgba(0, 0, 0, .9);
  --nav-bg: rgba(22, 22, 23, .78); --dark-bg: #000000; --dark-tile: #1d1d1f; --glow: rgba(41, 151, 255, .30);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.47 var(--font); letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.mono { font: 500 .9375rem/1.4 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.skip { position: absolute; left: 16px; top: 8px; z-index: 50; background: var(--bg); color: var(--ink); padding: 8px 14px; border-radius: 10px; transform: translateY(calc(-100% - 40px)); }
.skip:focus { transform: none; }
.wide { max-width: 1068px; margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.narrow { max-width: 820px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }
.center { text-align: center; }

/* Scroll reveal (only when motion is allowed and JS runs) */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.motion .reveal.in { opacity: 1; transform: none; }

/* Buttons and links */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border-radius: 980px; border: 0; background: var(--btn); color: var(--on-btn);
  font-size: 1.0625rem; font-weight: 400; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.pill:hover { background: var(--btn-hover); text-decoration: none; }
.pill.small { min-height: 28px; padding: 0 12px; font-size: .75rem; letter-spacing: -.01em; }
.more { font-size: 1.0625rem; color: var(--link); white-space: nowrap; }
.more::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .3em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-.1em) rotate(45deg); }

/* Ribbon and local nav */
.ribbon { margin: 0; padding: 12px 22px; background: var(--alt); color: var(--sec); font-size: .875rem; line-height: 1.43; text-align: center; letter-spacing: -.016em; }
.ribbon strong { color: var(--ink); font-weight: 600; }
.localnav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--frame-ring); }
@media (prefers-reduced-transparency: reduce) { .localnav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.localnav-in { max-width: 1068px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; gap: 24px; }
.localnav-title { color: var(--ink); font: 600 1.3125rem/1 var(--font-display); letter-spacing: .011em; text-decoration: none; white-space: nowrap; }
.localnav-title:hover { text-decoration: none; }
.localnav-menu { margin-left: auto; display: flex; gap: 24px; }
.localnav-menu a { color: var(--ink); opacity: .8; font-size: .75rem; letter-spacing: -.01em; }
.localnav-menu a:hover { opacity: 1; color: var(--link); text-decoration: none; }
@media (max-width: 833px) { .localnav-menu { display: none; } .localnav-in > .pill { margin-left: auto; } .localnav-title { font-size: 1.1875rem; } }

/* Hero */
.hero { text-align: center; padding: clamp(56px, 7vw, 88px) 22px 0; overflow: hidden; }
.eyebrow { color: var(--eyebrow); font-size: clamp(1.0625rem, .4vw + 1rem, 1.3125rem); font-weight: 600; letter-spacing: .01em; }
.hero h1 { margin-top: 8px; font-size: clamp(3rem, 5.2vw + 1.2rem, 5.5rem); line-height: 1.05; letter-spacing: -.015em; font-weight: 700; }
.tagline { margin-top: 10px; font: 600 clamp(1.5rem, 1.6vw + 1rem, 2.5rem)/1.1 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.cta { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; }
.hero-media { margin: 64px auto 0; display: flex; justify-content: center; padding-bottom: clamp(64px, 8vw, 112px); }
.hero-media .phone { width: clamp(260px, 26vw, 330px); }
.motion .hero-media.reveal { transform: translateY(60px); transition-duration: 1.2s; }
.motion .hero-media.reveal.in { transform: none; }

/* Device frames */
.phone { position: relative; padding: 11px; border-radius: 56px; background: var(--frame); box-shadow: 0 0 0 1px var(--frame-ring), var(--shadow-device); }
.phone img { border-radius: 46px; width: 100%; aspect-ratio: 393 / 852; object-fit: cover; object-position: top; background: var(--alt); }
.window { max-width: 1068px; margin: 56px auto 0; padding: 0 22px; }
.window > picture, .window-bar { display: block; }
.window-bar { position: relative; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--alt); border: 1px solid var(--frame-ring); border-bottom: 0; border-radius: 14px 14px 0 0; }
.window-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window-bar p { position: absolute; left: 50%; transform: translateX(-50%); font-size: .75rem; color: var(--sec); }
.window img { width: 100%; border: 1px solid var(--frame-ring); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--shadow-device); }

/* Sections */
.section { padding: clamp(80px, 10vw, 140px) 0; }
.section.alt { background: var(--alt); }
.section h2 { font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem); line-height: 1.07; letter-spacing: -.005em; font-weight: 600; }
.section .eyebrow + h2 { margin-top: 8px; }
.intro { margin-top: 20px; font-size: clamp(1.1875rem, .5vw + 1rem, 1.5rem); line-height: 1.38; font-weight: 500; color: var(--sec); letter-spacing: .004em; }
.intro strong { color: var(--ink); font-weight: 600; }
.center .intro { margin-left: auto; margin-right: auto; max-width: 720px; }
.center .more { display: inline-block; margin-top: 24px; font-size: 1.1875rem; }

/* Ask */
.ask { margin: 40px auto 0; max-width: 620px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 22px; background: var(--tile); border-radius: 980px; box-shadow: 0 0 0 1px var(--frame-ring), 0 10px 30px -12px rgba(0, 0, 0, .18); }
.ask:focus-within { box-shadow: 0 0 0 2px var(--btn), 0 10px 30px -12px rgba(0, 0, 0, .18); }
.ask input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 1.0625rem/1.4 var(--font); letter-spacing: -.022em; }
.ask input::placeholder { color: var(--sec); }

/* Procedure row */
.cats { max-width: 1068px; margin: 56px auto 0; padding: 0 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 833px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px 20px; border: 0; border-radius: 22px; background: var(--tile); cursor: pointer; text-align: center; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--ink); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.cat:hover { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .2); }
@media (prefers-reduced-motion: no-preference) { .cat:hover { transform: scale(1.03); } }
.cat-ico { width: 52px; height: 52px; display: grid; place-items: center; color: var(--btn); }
.cat-ico svg, .safety svg, .round svg, .done-mark svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.cat-ico svg { width: 36px; height: 36px; stroke-width: 1.4; }

/* Five-step gallery */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.head-row .intro { max-width: 640px; }
.count { color: var(--sec); font-size: 1.0625rem; padding-bottom: 6px; }
.count strong { color: var(--ink); font-weight: 600; }
.gallery { margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: max(22px, calc((100vw - 1068px) / 2 + 22px)); }
.gallery::-webkit-scrollbar { display: none; }
.cards { display: flex; gap: 20px; width: max-content; padding: 4px max(22px, calc((100vw - 1068px) / 2 + 22px)) 24px; }
.card { scroll-snap-align: start; flex: none; width: min(372px, 82vw); min-height: 500px; display: flex; flex-direction: column; padding: 34px 32px 30px; border-radius: 28px; background: var(--tile-on-bg); }
.card-eyebrow { font-size: 1.0625rem; font-weight: 600; color: var(--sec); display: flex; align-items: center; justify-content: space-between; }
.done-mark { display: none; align-items: center; gap: 6px; font-size: .875rem; color: var(--ok); }
.done-mark svg { width: 18px; height: 18px; stroke-width: 2.4; }
.step.done .done-mark { display: inline-flex; }
.card h3 { margin-top: 10px; font-size: 1.75rem; line-height: 1.14; letter-spacing: .004em; }
.card > p:not(.card-eyebrow):not(.expect) { margin-top: 14px; color: var(--sec); font-size: 1.0625rem; }
.card > p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.tries { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.try { max-width: 100%; text-align: left; min-height: 44px; padding: 11px 18px; border-radius: 22px; border: 0; background: var(--bg); color: var(--ink); font-size: .9375rem; line-height: 1.35; cursor: pointer; box-shadow: 0 0 0 1px var(--frame-ring); transition: background-color .2s ease, color .2s ease; }
.try:hover { background: var(--btn); color: var(--on-btn); }
.expect { margin-top: 16px; font-size: .875rem; color: var(--sec); line-height: 1.43; }
.gallery-nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--tile-on-bg); color: var(--ink); cursor: pointer; transition: opacity .2s ease, background-color .2s ease; }
.round:hover { background: var(--line); }
.round:disabled { opacity: .36; cursor: default; }
.round svg { width: 22px; height: 22px; stroke-width: 2; }

/* WhatsApp split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 8vw, 120px); align-items: center; }
@media (max-width: 833px) { .split { grid-template-columns: minmax(0, 1fr); text-align: center; } .split-text .intro { margin-left: auto; margin-right: auto; } }
.split-text .more { display: inline-block; font-size: 1.1875rem; }
.wa-links { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (max-width: 833px) { .wa-links { justify-content: center; } }
.split-media { display: flex; justify-content: center; }
.split-media .phone { width: clamp(250px, 24vw, 310px); }

/* Console features */
.features { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 833px) { .features { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.features h3 { font-size: 1.3125rem; line-height: 1.19; }
.features p { margin-top: 8px; color: var(--sec); }

/* Security, always dark */
.section.dark { background: var(--dark-bg); color: var(--dark-ink); }
.section.dark .eyebrow { color: var(--dark-sec); }
.section.dark .intro { color: var(--dark-sec); }
.section.dark .intro strong { color: var(--dark-ink); }
.section.dark :focus-visible { outline-color: var(--dark-link); }
.safety { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 833px) { .safety { grid-template-columns: minmax(0, 1fr); } }
.safety li { padding: 32px 30px; border-radius: 24px; background: var(--dark-tile); }
.safety svg { width: 34px; height: 34px; stroke-width: 1.5; color: var(--dark-link); }
.safety h3 { margin-top: 18px; font-size: 1.3125rem; line-height: 1.19; color: var(--dark-ink); }
.safety p { margin-top: 8px; color: var(--dark-sec); font-size: 1rem; }

/* Specs */
.specs-title { font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem) !important; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.specs { margin: 0; }
.specs > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 733px) { .specs > div { grid-template-columns: minmax(0, 1fr); } }
.specs dt { font-size: 1.1875rem; font-weight: 600; letter-spacing: .01em; }
.specs dd { margin: 0; font-size: 1.0625rem; display: block; }
.spec-sub { display: block; margin-top: 6px; color: var(--sec); font-size: .9375rem; }
.state { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--sec); vertical-align: .1em; }
.state.open { background: var(--ok); }
.state.closed { background: var(--closed); }
.logins { border-collapse: collapse; width: 100%; }
.logins td { padding: 6px 0; vertical-align: top; }
.logins td:first-child { padding-right: 24px; white-space: nowrap; }
.logins td:last-child { color: var(--sec); }
@media (max-width: 600px) { .logins tr { display: block; padding: 6px 0; } .logins td { display: block; padding: 0; } .logins td:first-child { white-space: normal; } }
.code { display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--alt); }
.code code { flex: 1; min-width: 0; font: 500 .8125rem/1.45 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; letter-spacing: 0; overflow-wrap: anywhere; color: var(--ink); }
.copy { flex: none; min-height: 32px; padding: 0 14px; border-radius: 980px; border: 0; background: var(--btn); color: var(--on-btn); font-size: .8125rem; cursor: pointer; }

/* Footer */
.foot { background: var(--alt); color: var(--sec); font-size: .75rem; line-height: 1.33; letter-spacing: -.01em; padding: 18px 0 22px; }
.foot-notes { padding: 18px 0; border-bottom: 1px solid var(--line); }
.foot-notes p + p { margin-top: 10px; }
.foot strong { color: var(--ink); font-weight: 600; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 24px 40px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
.foot h2 { font-size: .75rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.foot li + li, .foot-cols p + p { margin-top: 6px; }
.foot a { color: var(--sec); }
.foot a:hover { color: var(--ink); }
.foot-legal { padding-top: 16px; }

/* Hero stage: the console window with the web chat and WhatsApp phones in front, on one soft glow */
.stage { position: relative; max-width: 1068px; margin: 64px auto 0; padding: 0 22px clamp(72px, 9vw, 120px); }
.stage-glow { position: absolute; inset: 4% 8% 14%; background: radial-gradient(55% 55% at 50% 50%, var(--glow), transparent 72%); filter: blur(8px); pointer-events: none; }
.stage-win { position: relative; width: 76%; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--frame-ring); background: var(--alt); box-shadow: var(--shadow-device); }
.stage-win img { width: 100%; display: block; }
.stage-phone { position: absolute; width: clamp(140px, 19%, 214px); padding: 7px; border-radius: 34px; }
.stage-phone img { border-radius: 28px; }
.stage-phone.a { left: 22px; top: 24%; }
.stage-phone.b { right: 22px; top: 34%; }
.motion .stage.reveal { transform: translateY(60px); transition-duration: 1.2s; }
.motion .stage.reveal.in { transform: none; }
@media (max-width: 733px) {
  .stage-win { width: 100%; }
  .stage-phone { width: 36%; }
  .stage-phone.a { left: 4%; top: 30%; }
  .stage-phone.b { right: 4%; top: 42%; }
  .stage { padding-bottom: 56%; }
}
/* Sections now alternate white / light gray; tiles take the opposite surface */
.section:not(.alt) .cat { background: var(--tile-on-bg); }
.section.alt .card { background: var(--tile); }
.section.alt .try { background: var(--alt); }
/* Tender requirements */
.reqs { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reqs { grid-template-columns: minmax(0, 1fr); } }
.req { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px 26px 22px; border-radius: 22px; background: var(--tile); }
.req-tag { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--eyebrow); }
.req h3 { font-size: 1.3125rem; line-height: 1.2; text-wrap: balance; }
.req > p:not(.req-tag) { color: var(--sec); font-size: 1rem; }
.req-go { margin-top: auto; padding-top: 10px; align-self: flex-start; background: none; border: 0; cursor: pointer; color: var(--link); font-size: 1rem; text-align: left; }
.req-go::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .35em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-.1em) rotate(45deg); }
.req-go:hover { text-decoration: underline; }