/* Aloha AI marketing mock. Tokens copied from ai-receptionist/app-scaffold/src/theme/tokens.js (dark palette),
   radius scale, glow values and button styles mirror GlowButton.tsx / Card.tsx. System font stack = the app's RN-web default. */
:root{
  --bg:#060C14;--surface:#0F171F;--surface-2:#1B222A;--tabbar:#0B121A;--border:#252E39;--divider:#212830;
  --text:#F8FAFC;--muted:#9AA3AE;--dim:#828C98;--cyan:#22D3EE;--cyan-bright:#0EC5DA;--cyan-deep:#07B1C8;--cyan-fill:#082C35;
  --chip-on:#0A4651;--chip-on-text:#46E6F0;--on-cyan:#0B0F14;--sparkle:#7C83FD;
  --high:#4CDB5A;--high-bg:#0D261E;--high-border:#2F5D41;--med:#F5C518;--med-bg:#352B0A;--med-border:#6B5714;
  --low:#AEB6C1;--low-bg:#1A222C;--low-border:#3A444E;--spam:#EF4650;--spam-bg:#311419;--spam-border:#6A2A31;
  --pri:#F2A93B;--pri-bg:#2E2210;--pri-border:#6E4E1C;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;
  --glow-soft:0 0 14px 0 rgba(34,211,238,.40);--glow-strong:0 0 28px 2px rgba(14,197,218,.55);--glow-pressed:0 0 8px 0 rgba(34,211,238,.30);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;border-radius:50%;opacity:var(--min);animation:tw var(--dur) ease-in-out var(--delay) infinite}
@keyframes tw{0%,100%{opacity:var(--min)}50%{opacity:var(--max)}}
main,header,footer{position:relative;z-index:1}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(6,12,20,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--divider)}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text);text-decoration:none}
.logo img{width:30px;height:30px;border-radius:8px}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font-size:14.5px}
.nav a:hover{color:var(--text)}
/* buttons (GlowButton) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-lg);border:1px solid var(--cyan);background:var(--cyan-fill);color:var(--text);font:500 16px var(--font);text-decoration:none;cursor:pointer;box-shadow:var(--glow-soft);transition:box-shadow .15s,transform .15s,opacity .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{box-shadow:var(--glow-pressed);opacity:.85}
.btn.solid{background:var(--cyan-bright);border-color:var(--cyan-bright);color:var(--on-cyan);font-weight:700;box-shadow:var(--glow-strong)}
.btn.lg{height:56px;padding:0 28px;font-size:18px}
.btn.sm{height:40px;padding:0 14px;font-size:14.5px}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:18px;height:18px}
/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid}
.pill.high{color:var(--high);background:var(--high-bg);border-color:var(--high-border)}
.pill.med{color:var(--med);background:var(--med-bg);border-color:var(--med-border)}
.pill.low{color:var(--low);background:var(--low-bg);border-color:var(--low-border)}
.pill.spam{color:var(--spam);background:var(--spam-bg);border-color:var(--spam-border)}
.pill.pri{color:var(--pri);background:var(--pri-bg);border-color:var(--pri-border)}
.ph{display:inline-block;font:700 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--pri);background:var(--pri-bg);border:1px dashed var(--pri-border);border-radius:6px;padding:5px 8px}
.eyebrow{color:var(--cyan);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
h1,h2,h3{line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:800}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:750}
h3{font-size:18px;font-weight:650}
.lead{color:var(--muted);font-size:clamp(16px,1.7vw,19px);max-width:640px}
section{padding:72px 0}
.muted{color:var(--muted)}.dim{color:var(--dim);font-size:13px}
/* form */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
input,select,textarea{width:100%;height:50px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--tabbar);color:var(--text);font:16px var(--font);outline:none}
input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
/* chat */
.chat{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto;padding:4px}
.msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:15px}
.msg.ai{background:var(--cyan-fill);border:1px solid var(--chip-on);align-self:flex-start;border-bottom-left-radius:4px}
.msg.you{background:var(--surface-2);align-self:flex-end;border-bottom-right-radius:4px}
.msg b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.talk{width:120px;height:120px;border-radius:50%;border:1px solid var(--cyan-bright);background:radial-gradient(circle at 50% 40%,#13d6ea,#07B1C8);color:var(--on-cyan);display:grid;place-items:center;cursor:pointer;box-shadow:var(--glow-strong);font:700 15px var(--font);position:relative}
.talk svg{width:34px;height:34px}
.talk.live::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--cyan);animation:ring 1.4s ease-out infinite}
@keyframes ring{from{transform:scale(.9);opacity:.9}to{transform:scale(1.25);opacity:0}}
pre.prompt{white-space:pre-wrap;background:var(--tabbar);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfd6de;max-height:380px;overflow:auto;margin:0}
.footer{border-top:1px solid var(--divider);padding:36px 0;color:var(--dim);font-size:14px}
@media (prefers-reduced-motion:reduce){.star{animation:none;opacity:.18}.arrows span,.talk.live::after{animation:none!important}html{scroll-behavior:auto}}
/* Voice orb (assets/voice-orb.js) */
.orb-btn{position:relative;width:min(260px,72vw);aspect-ratio:1;border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%;--orb-level:0;-webkit-tap-highlight-color:transparent}
.orb-btn::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.26) 0%,rgba(14,197,218,.10) 38%,rgba(6,12,20,0) 68%);opacity:calc(.65 + var(--orb-level)*.7);transform:scale(calc(var(--orb-scale,1) + var(--orb-level)*.12));pointer-events:none}
.orb-btn[data-orb=listening]::before{background:radial-gradient(circle,rgba(77,237,178,.24) 0%,rgba(45,200,150,.09) 38%,rgba(6,12,20,0) 68%)}
.orb-btn .orb-canvas{position:absolute;left:50%;top:50%;width:100%;max-width:360px;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);background:transparent;pointer-events:none}
.orb-btn .orb-label{position:relative;z-index:1;font:600 13px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-shadow:0 0 12px rgba(6,12,20,.95),0 0 3px rgba(6,12,20,.9);padding:6px 12px;border-radius:999px;background:rgba(6,12,20,.35);transition:opacity .3s}
.orb-btn[data-orb=speaking] .orb-label,.orb-btn[data-orb=listening] .orb-label{opacity:.55}
.orb-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
/* CSS-only fallback orb (no canvas): masked dot field that drifts and pulses */
.orb-css{position:absolute;inset:12%;border-radius:50%;pointer-events:none;background-image:radial-gradient(circle,rgba(70,230,240,.95) 0 1.4px,transparent 2px),radial-gradient(circle,rgba(34,211,238,.6) 0 1px,transparent 1.6px);background-size:11px 11px,7px 7px;background-position:0 0,3px 4px;-webkit-mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.55) 62%,transparent 71%);mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.55) 62%,transparent 71%);animation:orbDrift 9s linear infinite,orbPulse 3.2s ease-in-out infinite;box-shadow:inset 0 0 40px rgba(34,211,238,.35);scale:var(--orb-scale,1);opacity:calc(.75 + var(--orb-level)*.25)}
.orb-btn[data-orb=listening] .orb-css{background-image:radial-gradient(circle,rgba(90,240,190,.95) 0 1.4px,transparent 2px),radial-gradient(circle,rgba(60,210,160,.6) 0 1px,transparent 1.6px)}
.orb-btn[data-orb=connecting] .orb-css{box-shadow:inset 0 0 40px rgba(34,211,238,.35),0 0 0 2px rgba(100,190,255,.35)}
.orb-btn[data-orb=speaking] .orb-css{animation-duration:4s,.6s}.orb-btn[data-orb=connecting] .orb-css{animation-duration:2s,1.2s}.orb-btn[data-orb=ended] .orb-css{opacity:.4}
@keyframes orbDrift{to{background-position:110px 0,-70px 7px}}
@keyframes orbPulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.orb-css{animation:none}}
.page-err{position:fixed;left:8px;right:8px;bottom:8px;z-index:50;background:var(--spam-bg);color:#ffd7da;border:1px solid var(--spam-border);border-radius:10px;padding:8px 12px;font:12px/1.4 var(--font);opacity:.92}