/* ══════════════════════════════════════════════════════════════
   Shared stylesheet — all four pages use this one file.
   Dark product-led system, modelled on the Vetra template.
   RTL throughout via CSS logical properties.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Ground */
  --bg:#0C0F0D;            /* page ground */
  --bg-2:#111512;          /* raised surface */
  --bg-3:#171B18;          /* card / input */
  --bg-4:#1E231F;          /* hover surface */

  /* Ink */
  --ink:#EDF2ED;
  --ink-2:#9BA69D;
  --ink-3:#6E7970;

  /* Accents */
  --accent:#4ADE80;         /* emerald — primary action */
  --accent-deep:#22C55E;
  --accent-soft:rgba(74,222,128,.12);
  --accent-2:#8B9BF0;       /* indigo — glows, secondary */
  --accent-2-soft:rgba(139,155,240,.12);

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  --shell:1160px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  --f-body:'Heebo','Assistant','Arial Hebrew',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --shadow-lg:0 40px 100px -30px rgba(0,0,0,.9);
}

/* ══════════════════ BASE ══════════════════ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.7;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.028em;line-height:1.18}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:rgba(74,222,128,.3);color:#fff}

.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:var(--f-mono);direction:ltr;unicode-bidi:isolate;font-size:.86em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{
  position:fixed;top:16px;inset-inline-start:16px;z-index:200;width:auto;height:auto;clip:auto;margin:0;
  padding:12px 20px;background:var(--accent);color:#052E16;border-radius:var(--r-pill);font-weight:600;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[dir="rtl"] .arrow{transform:scaleX(-1)}

/* ══════════════════ LAYOUT ══════════════════ */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:22px;width:100%}
@media(min-width:700px){.shell{padding-inline:34px}}
.section{position:relative;padding:76px 0}
@media(min-width:768px){.section{padding:120px 0}}
.section-sm{padding:48px 0}
.anchor{scroll-margin-top:92px}
.narrow{max-width:720px}
.center{text-align:center}
.center .head-block{margin-inline:auto}

/* Radial glow — the signature Vetra atmosphere */
.glow{
  position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0;opacity:.42;
}
/* Smooth atmosphere instead of a grid: two wide radial washes that fade
   out well before any edge, so there is nothing to see but the gradient. */
.hero::before,.cta-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 90% 46% at 50% -6%, rgba(74,222,128,.085), transparent 70%),
    radial-gradient(ellipse 55% 40% at 84% 8%, rgba(139,155,240,.07), transparent 72%);
}
.rel{position:relative;z-index:2}

/* ══════════════════ TYPE ══════════════════ */
/* Vetra's move: two-line heading, second line dimmed */
.h1{font-size:2.3rem;font-weight:500;line-height:1.16;letter-spacing:-.032em}
.h2{font-size:1.9rem;font-weight:500;line-height:1.2;letter-spacing:-.03em}
.h3{font-size:1.25rem;font-weight:500}
.h4{font-size:1.02rem;font-weight:600}
@media(min-width:700px){ .h1{font-size:3rem} .h2{font-size:2.5rem} .h3{font-size:1.4rem} }
@media(min-width:1024px){ .h1{font-size:3.5rem} }
.dim{color:var(--ink-3)}
.grad{
  background:linear-gradient(180deg,#EDF2ED 35%,rgba(250,250,250,.66));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lead{font-size:1.05rem;color:var(--ink-2);line-height:1.8}
@media(min-width:700px){.lead{font-size:1.15rem}}
.body-2{font-size:.98rem;color:var(--ink-2);line-height:1.8}
.small{font-size:.92rem;color:var(--ink-2);line-height:1.75}
.tiny{font-size:.82rem;color:var(--ink-3);line-height:1.65}
.t-accent{color:var(--accent)}
.head-block{max-width:700px;margin-bottom:48px}
@media(min-width:768px){.head-block{margin-bottom:64px}}
.head-block .h2{margin-bottom:18px}

/* Pill badge above the headline */
.badge{
  display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);
  background:var(--bg-3);border:1px solid var(--line);font-size:.83rem;color:var(--ink-2);
}
[dir="rtl"] .badge{padding:6px 6px 6px 14px}
.badge-tag{
  padding:3px 9px;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:500;letter-spacing:.05em;color:var(--accent);margin-bottom:16px;
}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--accent)}

/* ══════════════════ BUTTONS ══════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding-inline:24px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--f-body);font-weight:600;font-size:.98rem;cursor:pointer;white-space:nowrap;
  transition:background-color .22s ease,border-color .22s ease,transform .18s ease,box-shadow .22s ease,color .22s ease;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--accent);color:#052E16}
.btn-primary:hover{background:#6EE79A;box-shadow:0 10px 34px -12px rgba(74,222,128,.65);transform:translateY(-1px)}
.btn-ghost{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-4);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.btn-sm{min-height:40px;padding-inline:18px;font-size:.9rem}
.btn-lg{min-height:54px;padding-inline:30px;font-size:1.02rem}

/* ══════════════════ NAV ══════════════════ */
.nav-wrap{
  position:fixed;top:0;inset-inline:0;z-index:50;padding-top:0;
  transition:padding-top .5s cubic-bezier(.16,1,.3,1);
}
/* The bar itself is what animates — max-width, height, padding, fill and
   shadow ease together, so it reads as one object contracting rather than
   a set of properties switching at a threshold. */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:76px;max-width:1200px;margin-inline:auto;
  padding-inline:0;border:1px solid transparent;border-radius:var(--r-pill);
  transition:
    height .5s cubic-bezier(.16,1,.3,1),
    max-width .5s cubic-bezier(.16,1,.3,1),
    padding .5s cubic-bezier(.16,1,.3,1),
    background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.nav-wrap.stuck{padding-top:12px}
.nav-wrap.stuck .nav{
  height:60px;max-width:960px;padding-inline:14px;
  background:rgba(12,15,13,.66);
  -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  border-color:var(--line-2);
  box-shadow:0 14px 32px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
@media(prefers-reduced-motion:reduce){.nav,.nav-wrap{transition:none}}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#052E16;flex-shrink:0;
}
.brand-name{font-weight:600;font-size:1.04rem;letter-spacing:-.02em}
.nav-links{display:none;align-items:center;gap:2px}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-link{
  padding:8px 14px;font-size:.94rem;color:var(--ink-2);border-radius:var(--r-pill);
  transition:color .2s ease,background-color .2s ease;white-space:nowrap;
}
.nav-link:hover{color:var(--ink);background:var(--bg-3)}
.nav-link.active{color:var(--ink)}
.menu-btn{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--line);cursor:pointer;
}
@media(min-width:1000px){.menu-btn{display:none}}
.mobile-menu{padding:0 22px 20px}
@media(min-width:1000px){.mobile-menu{display:none!important}}
.mobile-inner{
  border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:3px;
  background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.mobile-link{padding:13px 15px;border-radius:var(--r-md);color:var(--ink-2);transition:color .2s,background-color .2s}
.mobile-link:hover{color:var(--ink);background:var(--bg-3)}

/* ══════════════════ HERO ══════════════════ */
.hero{position:relative;padding:126px 0 76px;text-align:center;overflow:hidden}
@media(min-width:768px){.hero{padding:160px 0 118px}}
.hero-copy{max-width:1040px;margin-inline:auto}
.hero h1{margin:26px 0 24px}
.hero .lead{max-width:600px;margin-inline:auto;margin-bottom:34px}
.hero-actions{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
@media(min-width:560px){.hero-actions{flex-direction:row}}
.hero-sub{text-align:start}
.hero-sub .hero-copy{margin-inline:0}
.hero-sub .lead{margin-inline:0}
.hero-sub .hero-actions{align-items:flex-start}
@media(min-width:560px){.hero-sub .hero-actions{align-items:center;justify-content:flex-start}}

/* The framed product surface — Vetra's signature block */
.frame{
  position:relative;margin-top:56px;border-radius:var(--r-xl);
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.03);
  padding:18px;overflow:hidden;
}
@media(min-width:768px){.frame{margin-top:72px;padding:28px}}
.frame::before{
  content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.5),transparent);
}
.frame-plain{margin-top:0}

/* ══════════════════ STATS ══════════════════ */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:var(--bg-2);padding:30px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.stat-unit{font-size:.45em;font-weight:400;margin-inline-start:.3em}
.stat-num{
  font-size:2.3rem;font-weight:300;line-height:1;letter-spacing:-.04em;margin-bottom:10px;
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;color:var(--ink);
}
@media(min-width:700px){.stat-num{font-size:2.7rem}}
.stat-label{font-size:.95rem;font-weight:500;margin-bottom:4px}

/* ══════════════════ CARDS ══════════════════ */
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
}
.card-hover:hover{border-color:var(--line-2);background:var(--bg-3);transform:translateY(-3px)}
.pad{padding:26px}
@media(min-width:700px){.pad{padding:32px}}

.grid-2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:800px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Bento: first card spans wider on large screens */
.bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(3,1fr)}
}

.syscard{display:flex;flex-direction:column;padding:28px;height:100%}
.syscard-num{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);margin-bottom:20px;direction:ltr}
.syscard-more{
  margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:.94rem;font-weight:600;color:var(--accent);transition:gap .22s ease;
}
.syscard:hover .syscard-more{gap:13px}
.icon-round{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);flex-shrink:0;border:1px solid rgba(74,222,128,.2);
}
.icon-round-2{background:var(--accent-2-soft);color:var(--accent-2);border-color:rgba(139,155,240,.2)}

.checks{display:flex;flex-direction:column;gap:15px}
.check{display:flex;gap:12px;align-items:flex-start}
.check svg{flex-shrink:0;margin-top:6px;color:var(--accent)}

/* Numbered steps */
.steps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.step{display:grid;gap:6px 24px;padding:24px 0;border-bottom:1px solid var(--line)}
@media(min-width:768px){.step{grid-template-columns:90px 1fr}}
.step-k{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);padding-top:4px;direction:ltr}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.78rem;direction:ltr;
  color:var(--ink-2);background:var(--bg-3);border:1px solid var(--line);
  transition:color .22s ease,border-color .22s ease;
}
.chip:hover{color:var(--ink);border-color:var(--line-2)}

/* ══════════════════ FAQ ══════════════════ */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 0;font-size:1rem;font-weight:500;line-height:1.6;
  display:flex;align-items:flex-start;gap:14px;transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';flex-shrink:0;width:10px;height:10px;margin-top:8px;margin-inline-start:auto;
  border-inline-end:1.8px solid var(--ink-3);border-block-end:1.8px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .25s ease,border-color .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq-item summary:hover{color:var(--accent)}
.faq-a{padding-bottom:22px;max-width:62ch}

/* ══════════════════ TESTIMONIAL ══════════════════ */
.quote{margin:0;border-inline-start:2px solid var(--accent);padding-inline-start:24px;max-width:760px}
.quote-text{font-size:1.2rem;line-height:1.7;color:var(--ink);margin-bottom:16px}
@media(min-width:700px){.quote-text{font-size:1.4rem}}
.quote-name{font-size:.95rem;font-weight:600;display:block}
.quote-role{font-size:.86rem;color:var(--ink-3)}

/* ══════════════════ FINAL CTA ══════════════════ */
.cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  border:1px solid var(--line);background:var(--bg-2);
  padding:44px 24px;text-align:center;
}
@media(min-width:768px){.cta-card{padding:72px 56px}}
.cta-card h2{max-width:680px;margin-inline:auto;margin-bottom:18px}
.cta-card .lead{max-width:540px;margin-inline:auto;margin-bottom:32px}
.reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin-top:28px;font-size:.9rem;color:var(--ink-3)}
.reassure span{display:inline-flex;align-items:center;gap:8px}

/* ══════════════════ FOOTER ══════════════════ */
.footer{border-top:1px solid var(--line);padding:42px 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
@media(min-width:768px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:start}}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.footer-link{font-size:.93rem;color:var(--ink-2);transition:color .2s ease}
.footer-link:hover{color:var(--ink)}

/* ══════════════════ MOTION ══════════════════ */
/* Gated on .js: if the script never runs, nothing is left invisible.
   The class is set by a one-line inline script in each page's <head>,
   so there is no flash of visible-then-hidden content. */
.js .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in.done{will-change:auto}

/* The hero orb arrives with a touch of scale, so it reads as settling
   into place rather than sliding up like the text beside it. */
.js .hero-visual.reveal{transform:translateY(18px) scale(.955)}

/* Rows and grids that are revealed as one block still bring their own
   items in one after another — the delays are set in app.js. */
.js .r-item{
  opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.js .reveal.in .r-item{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .r-item,.js .hero-visual.reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ══════════════════ HELPERS ══════════════════ */
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}.mb-28{margin-bottom:28px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}
.mt-20{margin-top:20px}.mt-28{margin-top:28px}.mt-40{margin-top:40px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.flex-mid{display:flex;align-items:center;gap:12px}

/* ══════════════════════════════════════════════════════════════
   ANIMATED DEMOS — dark treatment
   ══════════════════════════════════════════════════════════════ */
.demo-note{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  font-size:.85rem;color:var(--ink-3);line-height:1.7;
}
.demo-note svg{flex-shrink:0;margin-top:4px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── 1. Messenger chat ─────────────────────────────────────── */
.chat{
  max-width:400px;margin-inline:auto;border-radius:18px;overflow:hidden;
  background:#0B141A;border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.chat-bar{display:flex;align-items:center;gap:11px;padding:12px 15px;background:#1F2C33;color:#E9EDEF}
.chat-ava{
  width:33px;height:33px;border-radius:50%;background:#3B4A54;display:grid;place-items:center;
  flex-shrink:0;font-size:.88rem;font-weight:600;
}
.chat-who{font-size:.9rem;font-weight:600;line-height:1.3}
.chat-status{font-size:.71rem;opacity:.6;line-height:1.3}
.chat-body{
  padding:16px 14px;display:flex;flex-direction:column;gap:8px;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:22px 22px;
  /* Fixed height + internal scroll: the conversation grows inside the box,
     never below it, so nothing on the page shifts while you read. */
  height:400px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
/* Sits the conversation on the bottom edge like a real messenger, but
   collapses to 0 once the content overflows, so scrolling still works. */
.chat-body > :first-child{margin-block-start:auto}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.chat-body::-webkit-scrollbar-track{background:transparent}
.msg{
  max-width:82%;padding:8px 12px;border-radius:12px;font-size:.89rem;line-height:1.55;
  opacity:0;transform:translateY(8px);animation:msgIn .32s cubic-bezier(.16,1,.3,1) forwards;
  white-space:pre-line;
}
@keyframes msgIn{to{opacity:1;transform:none}}
.msg-them{align-self:flex-start;background:#1F2C33;border-start-start-radius:4px;color:#E9EDEF}
.msg-us{align-self:flex-end;background:#005C4B;border-start-end-radius:4px;color:#E9EDEF}
.msg-time{display:block;font-size:.65rem;color:rgba(233,237,239,.45);margin-top:3px;text-align:start}
.typing{
  align-self:flex-start;background:#1F2C33;border-radius:12px;border-start-start-radius:4px;
  padding:11px 14px;display:flex;gap:4px;
}
.typing i{width:6px;height:6px;border-radius:50%;background:#8696A0;animation:blip 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── 2. Voice agent ────────────────────────────────────────── */
.voice{max-width:520px;margin-inline:auto;text-align:center}
.orb-wrap{position:relative;width:146px;height:146px;margin:0 auto 24px}
.orb{
  position:absolute;inset:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #86EFAC, var(--accent-deep) 60%, #08502F);
  box-shadow:0 0 60px -8px rgba(74,222,128,.55);display:grid;place-items:center;
}
.orb-ring{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);
  opacity:0;animation:ring 2.8s ease-out infinite;
}
.orb-ring:nth-child(2){animation-delay:.9s}
.orb-ring:nth-child(3){animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.62);opacity:.5}100%{transform:scale(1);opacity:0}}
.orb.thinking{animation:think 1.4s ease-in-out infinite}
@keyframes think{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
.bars{display:flex;align-items:center;justify-content:center;gap:3px;height:34px}
.bars b{width:3px;border-radius:2px;background:#052E16;height:6px;animation:bar .9s ease-in-out infinite}
.bars b:nth-child(1){animation-delay:0s}  .bars b:nth-child(2){animation-delay:.1s}
.bars b:nth-child(3){animation-delay:.2s} .bars b:nth-child(4){animation-delay:.3s}
.bars b:nth-child(5){animation-delay:.4s} .bars b:nth-child(6){animation-delay:.15s}
.bars b:nth-child(7){animation-delay:.25s}
@keyframes bar{0%,100%{height:6px;opacity:.5}50%{height:24px;opacity:1}}
.voice.is-idle .bars b{animation-play-state:paused;height:6px}
.voice-state{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--r-pill);
  background:var(--bg-3);border:1px solid var(--line);font-size:.85rem;font-weight:500;margin-bottom:22px;
}
.transcript{
  text-align:start;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:14px;
  /* Fixed, like the chat — the transcript fills in place instead of pushing
     the page down line by line. */
  height:210px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.transcript > :first-child{margin-block-start:auto}
.transcript::-webkit-scrollbar{width:6px}
.transcript::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.transcript::-webkit-scrollbar-track{background:transparent}
.tline{display:flex;gap:11px;opacity:0;animation:msgIn .35s ease forwards}
.tline .who{font-size:.71rem;font-weight:600;letter-spacing:.03em;padding-top:3px;flex-shrink:0;width:50px}
.tline.cust .who{color:var(--ink-3)}
.tline.agent .who{color:var(--accent)}
.tline p{font-size:.92rem;line-height:1.7;color:var(--ink-2)}
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;animation:blink 1s step-end infinite}

/* ── 3. CRM table ──────────────────────────────────────────── */
.crm-demo{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.crm-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-4);
}
.crm-title{font-size:.86rem;font-weight:600}
.crm-live{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--accent);font-weight:500}
.crm-scroll{overflow-x:auto}
.crm-table{width:100%;border-collapse:collapse;min-width:560px}
.crm-table th{
  text-align:start;font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:.03em;
  padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.crm-table td{
  padding:13px 16px;font-size:.88rem;color:var(--ink-2);border-bottom:1px solid var(--line);
  transition:background-color .5s ease;white-space:nowrap;
}
.crm-table tr:last-child td{border-bottom:none}
.crm-table tr.flash td{background:rgba(74,222,128,.09);color:var(--ink)}
.pill-tag{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:500;background:var(--bg-4);border:1px solid var(--line);color:var(--ink-2);
}
.pill-tag.ok{background:var(--accent-soft);border-color:rgba(74,222,128,.25);color:var(--accent)}
.pill-tag.wait{background:var(--accent-2-soft);border-color:rgba(139,155,240,.25);color:var(--accent-2)}

.pipeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px;justify-content:center}
.pipe-node{
  padding:8px 15px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:.75rem;
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink-3);direction:ltr;
  transition:color .3s ease,border-color .3s ease,background-color .3s ease,transform .3s ease;
}
.pipe-node.on{color:var(--accent);border-color:rgba(74,222,128,.4);background:var(--accent-soft);transform:translateY(-2px)}
.pipe-arrow{color:var(--ink-3);opacity:.5;flex-shrink:0}

@media(prefers-reduced-motion:reduce){
  .msg,.tline{opacity:1;animation:none;transform:none}
  .orb-ring,.bars b,.orb.thinking,.typing i,.caret,.dot{animation:none}
  .bars b{height:14px}
}

/* Alternating section surface */
.band{background:var(--bg-2)}

/* ══════════════════════════════════════════════════════════════
   DEPTH PASS
   Flat fills read as dead on near-black. These rules add a
   top-light gradient to every surface, accent-tinted strokes,
   and glow on interaction. Later in the file, so they win.
   ══════════════════════════════════════════════════════════════ */

/* ── Surfaces: lit from above, not filled flat ─────────────── */
.card{
  position:relative;
  background:linear-gradient(180deg,#15151B 0%,var(--bg-2) 58%);
}
/* hairline catching the light along the top edge */
.card::before{
  content:'';position:absolute;inset-inline:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.card-hover{transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease,background .28s ease}
.card-hover:hover{
  background:linear-gradient(180deg,#1A1A22 0%,#101015 60%);
  border-color:rgba(74,222,128,.3);
  box-shadow:0 0 0 1px rgba(74,222,128,.08), 0 24px 56px -26px rgba(74,222,128,.4);
  transform:translateY(-4px);
}

/* ── Stats ─────────────────────────────────────────────────── */
.stats{
  border-color:transparent;
  box-shadow:0 0 0 1px var(--line), 0 30px 70px -40px rgba(74,222,128,.25);
}
.stat{
  position:relative;
  background:linear-gradient(180deg,#141419 0%,var(--bg-2) 60%);
}
.stat::before{
  content:'';position:absolute;inset-inline:18%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.stat-num{
  background:linear-gradient(180deg,#FFFFFF 28%,rgba(74,222,128,.72));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-unit{
  background:none;-webkit-text-fill-color:var(--ink-3);color:var(--ink-3);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(180deg,#4FE9B0 0%,#26C289 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 24px -12px rgba(74,222,128,.5);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#63F0BE 0%,#2FD198 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 38px -12px rgba(74,222,128,.7);
}
.btn-ghost{
  background:linear-gradient(180deg,#1A1A21,#121217);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}

/* ── Badge, chips, icons ───────────────────────────────────── */
.badge{
  background:linear-gradient(180deg,#1A1A21,#101015);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.badge-tag{
  background:linear-gradient(180deg,rgba(74,222,128,.28),rgba(74,222,128,.12));
  border:1px solid rgba(74,222,128,.3);
}
.chip{
  background:linear-gradient(180deg,#17171D,#111116);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.chip:hover{border-color:rgba(74,222,128,.35);color:var(--accent)}
.icon-round{
  background:linear-gradient(155deg,rgba(74,222,128,.26),rgba(74,222,128,.05));
  border-color:rgba(74,222,128,.3);
  box-shadow:0 0 24px -10px rgba(74,222,128,.5);
}
.icon-round-2{
  background:linear-gradient(155deg,rgba(139,155,240,.26),rgba(139,155,240,.05));
  border-color:rgba(139,155,240,.3);
  box-shadow:0 0 24px -10px rgba(139,155,240,.5);
}

/* ── Section rhythm: a lit seam instead of a hard line ──────── */
.band{
  position:relative;
  background:linear-gradient(180deg,#0C0C10 0%,var(--bg-2) 100%);
}
.band::before{
  content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.eyebrow::before{
  background:linear-gradient(90deg,transparent,var(--accent));
  width:22px;height:1px;
}

/* ── Steps & FAQ get a live edge ───────────────────────────── */
.steps,.faq{
  border-top-color:transparent;
  background-image:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top;
}
.step-k,.syscard-num{color:var(--accent);opacity:.75}
.faq-item summary{transition:color .2s ease,padding-inline-start .2s ease}
.faq-item[open] summary{color:var(--accent)}

/* ── Final CTA: light pooling from the top ─────────────────── */
.cta-card{
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%, rgba(74,222,128,.13), transparent 62%),
    linear-gradient(180deg,#131319 0%,var(--bg-2) 60%);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 40px 90px -50px rgba(74,222,128,.5);
}
.cta-card::before{
  content:'';position:absolute;inset-inline:25%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.6),transparent);
}

/* ── Framed demo surfaces ──────────────────────────────────── */
.frame{
  background:linear-gradient(180deg,#131319 0%,var(--bg-2) 55%);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04), 0 0 90px -50px rgba(74,222,128,.5);
}

/* ── Client logo strip ─────────────────────────────────────── */
.client-strip{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:46px;
}
.hero-sub .client-strip{justify-content:flex-start}
.client-label{font-size:.85rem;color:var(--ink-3);letter-spacing:.02em}
.client-logo{
  height:56px;width:auto;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.55));
}
@media(min-width:700px){.client-logo{height:68px}}

/* ══════════════════════════════════════════════════════════════
   HERO ORB — the live voice/channel visual on the home page.
   Pure CSS + SVG: ~4 KB, crisp at any zoom, and it recolours
   from the tokens above instead of from a re-render.
   Only index.html uses it; the sub-page heroes are untouched.
   ══════════════════════════════════════════════════════════════ */

/* ── two-column hero, home page only ── */
@media(min-width:940px){
  .hero-grid{
    display:grid;grid-template-columns:1.18fr .82fr;
    column-gap:48px;align-items:center;text-align:start;
  }
  .hero-grid .hero-copy{grid-column:1;grid-row:1;max-width:none;margin-inline:0}
  .hero-grid .hero-visual{grid-column:2;grid-row:1 / span 2;justify-self:center;align-self:center}
  .hero-grid .hero-foot{grid-column:1;grid-row:2}
  /* Half the width can't carry the full-width type scale — the headline
     would break mid-phrase across four lines. */
  .hero-grid .h1{font-size:clamp(1.95rem,2.7vw,2.45rem)}
  .hero-grid .lead{margin-inline:0;max-width:46ch;text-wrap:pretty}
  .hero-grid .hero-actions{justify-content:flex-start}
  .hero-grid .client-strip{justify-content:flex-start}
}
.hero-visual{margin-top:44px}
@media(min-width:940px){.hero-visual{margin-top:0}}
.hero-foot{margin-top:0}

/* ── the orb ── */
.hero-orb{position:relative;width:min(320px,78vw);aspect-ratio:1;margin-inline:auto}
@media(min-width:940px){.hero-orb{width:380px}}

/* Paths carrying each channel into the core. They're a diagram, not text,
   so the satellites are pinned with physical sides to stay on their ends. */
.ho-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ho-lines path{
  fill:none;stroke:rgba(74,222,128,.5);stroke-width:1.3;
  stroke-dasharray:4 7;animation:hoFlow 2.6s linear infinite;
}
.ho-lines path:nth-of-type(2){stroke:rgba(139,155,240,.5);animation-delay:-.9s}
.ho-lines path:nth-of-type(3){animation-delay:-1.7s}
@keyframes hoFlow{to{stroke-dashoffset:-33}}

.ho-ring{
  position:absolute;inset:23%;border-radius:50%;
  border:1px solid rgba(74,222,128,.45);opacity:0;
  animation:hoRing 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.ho-ring:nth-of-type(2){animation-delay:1.2s;border-color:rgba(139,155,240,.4)}
.ho-ring:nth-of-type(3){animation-delay:2.4s}
@keyframes hoRing{0%{transform:scale(.78);opacity:.6}100%{transform:scale(1.72);opacity:0}}

.ho-core{
  position:absolute;inset:26%;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 34% 27%,#BBF7D0 0%,#4ADE80 33%,#15A34A 63%,#064027 100%);
  box-shadow:inset 0 -20px 44px -20px rgba(0,0,0,.75);
  animation:hoMorph 9s ease-in-out infinite;
  will-change:transform;
}
/* The halo used to live on .ho-core, which meant a 170px blurred shadow was
   repainted on every frame of the morph — that is what made the whole hero
   stall on load. It is a static sibling now: painted once, never re-blurred. */
.ho-halo{
  position:absolute;inset:13%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle, rgba(74,222,128,.4) 0%, rgba(74,222,128,.15) 44%, transparent 68%),
    radial-gradient(circle at 64% 74%, rgba(139,155,240,.28) 0%, transparent 60%);
  filter:blur(24px);
}
/* Indigo sheen on the far side, so it reads two-tone and not as a flat ball. */
.ho-core::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 73% 79%,rgba(139,155,240,.6),transparent 56%);
  mix-blend-mode:screen;
}
@keyframes hoMorph{
  0%,100%{border-radius:50%;transform:scale(1)}
  33%    {border-radius:56% 44% 47% 53%/46% 55% 45% 54%;transform:scale(1.035)}
  66%    {border-radius:44% 56% 55% 45%/56% 44% 56% 44%;transform:scale(.982)}
}

.ho-bars{position:relative;z-index:2;display:flex;align-items:center;gap:4px;height:40px}
.ho-bars b{width:4px;border-radius:3px;background:#04240F;height:7px;animation:hoBar 1s ease-in-out infinite}
.ho-bars b:nth-child(1){animation-delay:0s}   .ho-bars b:nth-child(2){animation-delay:.12s}
.ho-bars b:nth-child(3){animation-delay:.26s} .ho-bars b:nth-child(4){animation-delay:.06s}
.ho-bars b:nth-child(5){animation-delay:.32s} .ho-bars b:nth-child(6){animation-delay:.18s}
.ho-bars b:nth-child(7){animation-delay:.4s}
@keyframes hoBar{0%,100%{height:7px;opacity:.55}50%{height:30px;opacity:1}}

.ho-sat{
  position:absolute;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(180deg,#1C211D,#101410);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--ink-2);animation:hoFloat 6s ease-in-out infinite;
}
.ho-sat svg{width:22px;height:22px}
/* WhatsApp keeps its own green so the channel is recognisable at a glance. */
.ho-sat.s1{
  top:2%;left:4%;animation-delay:0s;color:#3FD06A;border-color:rgba(63,208,106,.3);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -8px rgba(63,208,106,.45);
}
.ho-sat.s2{top:36%;right:-4%;animation-delay:-2s;color:var(--accent)}
.ho-sat.s3{bottom:4%;left:12%;animation-delay:-4s;color:var(--accent-2)}
@keyframes hoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Fixed height, so the cycling caption never nudges the hero. */
.ho-state{
  position:absolute;bottom:6%;inset-inline:0;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.ho-state span{
  position:absolute;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:.85rem;color:var(--ink-2);opacity:0;animation:hoState 10.5s ease-in-out infinite;
}
.ho-state span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.ho-state span:nth-child(2){animation-delay:3.5s}
.ho-state span:nth-child(3){animation-delay:7s}
@keyframes hoState{0%{opacity:0;transform:translateY(5px)}6%,28%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-5px)}}

@media (prefers-reduced-motion:reduce){
  .ho-core,.ho-ring,.ho-bars b,.ho-sat,.ho-lines path,.ho-state span{animation:none}
  .ho-ring{opacity:.18;transform:scale(1.25)}
  .ho-bars b{height:18px;opacity:1}
  .ho-state span{opacity:0}
  .ho-state span:first-child{opacity:1}
}