/* TallyGo public site — static, no trackers, no external fonts.
   Dark by default, same palette as the office page (Israel, 2026-10-18).
   The only script on the site is the small one on request.html that posts the form.
   Every colour is a token here; nothing below reads a literal hex. */
:root{
  color-scheme:dark;
  --bg:#0A0C0F; --ink:#E8EAF0; --muted:#8A90A0; --line:#222530;
  --brand:#00E5A0; --brand-ink:#04120C; --soft:#111318; --card:#111318;
  --blue:#6EA4FF; --warn-bg:#2a2210; --warn-ink:#f1d98a; --bad:#FF6B7A;
  --glow:rgba(0,229,160,.14);
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif }
a{ color:var(--brand) }
.wrap{ max-width:980px; margin:0 auto; padding:0 16px }
header.site{ border-bottom:1px solid var(--line); background:var(--card) }
header.site .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding-top:14px; padding-bottom:14px }
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.2px; color:var(--ink); text-decoration:none }
.logo b{ color:var(--brand) }
.mark{ width:28px; height:28px; border-radius:8px; background:var(--brand); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center }
.mark svg{ width:17px; height:17px }
nav a{ white-space:nowrap; margin-right:16px; text-decoration:none; color:var(--muted); font-size:15px }
nav a:last-child{ margin-right:0 }
nav a:hover,nav a.on{ color:var(--ink) }
.hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding:56px 0 36px }
.hero h1{ font-size:clamp(30px,5vw,46px); line-height:1.12; margin:0 0 16px; letter-spacing:-.8px }
.hero p{ font-size:18px; color:var(--muted); max-width:560px; margin:0 0 24px }
.hero .sub{ font-size:14px; margin:12px 0 0 }
.btn{ display:inline-block; background:var(--brand); color:var(--brand-ink); padding:13px 22px; border-radius:10px; text-decoration:none; font-weight:700; border:0; font:inherit; font-weight:700; cursor:pointer }
.btn:hover{ filter:brightness(1.08) }
.btn[disabled]{ opacity:.5; cursor:not-allowed }
h2{ font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:48px 0 14px; font-weight:700 }
h3{ font-size:18px; margin:24px 0 6px }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; padding:0; margin:0; list-style:none; counter-reset:s }
.steps li{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; counter-increment:s }
.steps li:before{ content:counter(s); display:inline-block; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-weight:700; margin-bottom:8px }
.steps strong{ display:block; margin-bottom:4px }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px }
.card h3{ margin-top:0 }
.pilot{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:12px; padding:18px 20px }
.pilot h3{ margin:0 0 6px }
.sms{ background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-family:ui-monospace,Consolas,monospace; font-size:14px; white-space:pre-wrap; word-break:break-word }
.note{ background:var(--soft); border-left:4px solid var(--brand); padding:12px 14px; border-radius:6px; margin:16px 0 }
.todo{ background:var(--warn-bg); color:var(--warn-ink); padding:1px 5px; border-radius:4px; font-weight:700 }
main.doc{ padding:32px 0 24px; max-width:760px }
main.doc h1{ font-size:32px; margin:0 0 4px }
main.doc .meta{ color:var(--muted); margin:0 0 20px; font-size:14px }
main.doc h2{ font-size:22px; text-transform:none; letter-spacing:0; color:var(--ink); margin:32px 0 10px }
footer.site{ border-top:1px solid var(--line); margin-top:56px; padding:22px 0 36px; color:var(--muted); font-size:14px }
footer.site a{ color:var(--muted); margin-right:14px }

/* ---- request form ---- */
form.req{ display:grid; gap:14px; max-width:480px }
form.req label{ display:block; font-size:13px; color:var(--muted); margin:0 0 5px; font-weight:600 }
form.req input{ width:100%; font:inherit; padding:11px 12px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink) }
form.req input:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand) }
form.req .hint{ font-size:13px; color:var(--muted); margin:5px 0 0 }
form.req .hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.msg{ padding:12px 14px; border-radius:9px; font-size:15px; margin:0 0 14px }
.msg.ok{ background:var(--glow); color:var(--brand); border:1px solid var(--brand) }
.msg.err{ background:rgba(255,107,122,.12); color:var(--bad); border:1px solid var(--bad) }
.gone{ display:none !important }

/* ---- the hero animation: CSS only, one 18-second loop, no script ----------
   Three scenes (dictate -> sign -> delivered) fade in turn inside a phone frame.
   Sample items only; no real client. Reduced motion shows the last scene still. */
.phone{ width:270px; height:500px; margin:0 auto; border:9px solid var(--line); border-radius:38px; background:var(--card);
  position:relative; overflow:hidden; box-shadow:0 0 0 1px var(--bg),0 20px 60px var(--glow) }
.phone .bar{ height:34px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; border-bottom:1px solid var(--line) }
.scene{ position:absolute; inset:34px 0 0 0; padding:14px 14px; opacity:0 }
.scene h4{ margin:0 0 10px; font-size:14px }
.s1{ animation:sc1 18s infinite } .s2{ animation:sc2 18s infinite } .s3{ animation:sc3 18s infinite }
@keyframes sc1{ 0%{opacity:0} 3%,31%{opacity:1} 34%,100%{opacity:0} }
@keyframes sc2{ 0%,33%{opacity:0} 36%,64%{opacity:1} 67%,100%{opacity:0} }
@keyframes sc3{ 0%,66%{opacity:0} 69%,96%{opacity:1} 99%,100%{opacity:0} }
.mic{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:13px; color:var(--muted) }
.mic i{ width:14px; height:14px; border-radius:50%; background:var(--bad); box-shadow:0 0 0 0 rgba(255,107,122,.6); animation:pulse 1.4s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 12px rgba(255,107,122,0) } 100%{ box-shadow:0 0 0 0 rgba(255,107,122,0) } }
.row{ display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin:0 0 8px; font-size:14px; opacity:0; transform:translateY(8px) }
.row b{ width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:none }
.row em{ margin-left:auto; font-style:normal; font-size:11px; color:var(--blue); background:rgba(110,164,255,.14); padding:1px 7px; border-radius:99px }
.r1{ animation:ra 18s infinite } .r2{ animation:rb 18s infinite } .r3{ animation:rc 18s infinite } .r4{ animation:rd 18s infinite }
@keyframes ra{ 0%,3%{opacity:0;transform:translateY(8px)} 6%,31%{opacity:1;transform:none} 34%,100%{opacity:0} }
@keyframes rb{ 0%,9%{opacity:0;transform:translateY(8px)} 12%,31%{opacity:1;transform:none} 34%,100%{opacity:0} }
@keyframes rc{ 0%,15%{opacity:0;transform:translateY(8px)} 18%,31%{opacity:1;transform:none} 34%,100%{opacity:0} }
@keyframes rd{ 0%,21%{opacity:0;transform:translateY(8px)} 24%,31%{opacity:1;transform:none} 34%,100%{opacity:0} }
.say{ position:absolute; left:14px; right:14px; bottom:16px; text-align:center; font-size:13px; color:var(--muted) }
.say q{ color:var(--brand); font-weight:700; quotes:"“" "”" }
.sum{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; margin:0 0 12px }
.sum span{ color:var(--muted) }
.sign{ border:1px dashed var(--muted); border-radius:10px; height:110px; position:relative }
.sign small{ position:absolute; left:10px; top:6px; font-size:11px; color:var(--muted) }
.sign svg{ position:absolute; inset:0; width:100%; height:100% }
.sign path{ fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420; animation:draw 18s infinite }
@keyframes draw{ 0%,40%{stroke-dashoffset:420} 52%,66%{stroke-dashoffset:0} 67%,100%{stroke-dashoffset:420} }
.lock{ margin-top:12px; font-size:13px; color:var(--brand); opacity:0; animation:lockin 18s infinite }
@keyframes lockin{ 0%,54%{opacity:0} 58%,66%{opacity:1} 67%,100%{opacity:0} }
.pdf{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:12px; margin:0 0 12px }
.pdf i{ width:36px; height:44px; border-radius:5px; background:var(--soft); border:1px solid var(--muted); position:relative; flex:none }
.pdf i:after{ content:"PDF"; position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:9px; font-style:normal; color:var(--bad); font-weight:700 }
.pdf div{ font-size:13px } .pdf div span{ display:block; color:var(--muted); font-size:12px }
.pill{ display:inline-block; padding:3px 11px; border-radius:99px; font-size:12px; font-weight:700; background:var(--glow); color:var(--brand); opacity:0; animation:pillin 18s infinite }
@keyframes pillin{ 0%,76%{opacity:0;transform:scale(.9)} 80%,96%{opacity:1;transform:none} 99%,100%{opacity:0} }
.env{ font-size:13px; color:var(--muted); margin:0 0 10px; opacity:0; animation:envin 18s infinite }
@keyframes envin{ 0%,70%{opacity:0;transform:translateY(-10px)} 74%,96%{opacity:1;transform:none} 99%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .scene,.row,.sign path,.lock,.pill,.env,.mic i{ animation:none !important }
  .s1,.s2{ display:none }
  .s3{ opacity:1 } .pill,.env{ opacity:1 }
}
@media (max-width:820px){ .hero{ grid-template-columns:1fr; padding-top:36px } .phone{ width:240px; height:450px } }
@media (max-width:520px){ nav a{ margin-right:12px; font-size:14px } }