:root{--bg:#f7fbfa;--card:#fff;--ink:#0f2a2a;--mut:#5b7370;--line:#dcebe8;--teal:#0d9488;--teal2:#14b8a6;--soft:#e6f6f3;--red:#e5484d}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,env(safe-area-inset-left));background:rgba(247,251,250,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.mark{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 7px;border-radius:9px;background:var(--teal)}
.mark i{display:block;width:3px;border-radius:2px;background:#fff}
.mark i:nth-child(1){height:8px}.mark i:nth-child(2){height:16px}.mark i:nth-child(3){height:11px}.mark i:nth-child(4){height:14px}
main{max-width:880px;margin:0 auto;padding:0 18px}
section{padding:52px 0}
.hero{text-align:center;padding-top:56px}
.chip{display:inline-block;font-size:13px;font-weight:600;color:var(--teal);background:var(--soft);border:1px solid #bfe7e0;padding:5px 12px;border-radius:99px;margin-bottom:20px}
h1{font-size:clamp(30px,8vw,52px);line-height:1.1;letter-spacing:-.035em;font-weight:800;max-width:15em;margin:0 auto 18px}
h1 em{font-style:normal;color:var(--teal)}
h2{font-size:clamp(24px,5.5vw,32px);letter-spacing:-.025em;margin-bottom:22px;text-align:center}
.lead{font-size:clamp(16px,4.2vw,19px);color:var(--mut);max-width:30em;margin:0 auto 28px}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;padding:15px 30px;border-radius:14px;box-shadow:0 8px 22px -8px rgba(13,148,136,.55);transition:transform .15s}
.btn:active{transform:scale(.97)}.btn.small{padding:9px 18px;font-size:14px;box-shadow:none;border-radius:11px}
.note{margin-top:16px;font-size:13px;color:var(--mut)}
.grid{display:grid;gap:14px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
article b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--teal);margin-bottom:12px}
article h3{font-size:18px;margin-bottom:6px}article p{color:var(--mut);font-size:15px}
.stack{text-align:center}.stack p{max-width:36em;margin:0 auto;color:var(--mut);font-size:17px}.stack strong{color:var(--ink)}
.try{text-align:center}.sub{color:var(--mut);margin:-8px auto 22px;max-width:28em}
.phone{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px 20px 26px;max-width:380px;margin:0 auto;box-shadow:0 24px 50px -28px rgba(13,148,136,.4)}
.orb{width:104px;height:104px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5eead4,var(--teal));transition:transform .2s}
.orb span{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9)}
.orb.speak{animation:pulse 1.1s ease-in-out infinite}.orb.listen{box-shadow:0 0 0 10px var(--soft)}
@keyframes pulse{50%{transform:scale(1.1)}}
.state{font-weight:700;font-size:17px;min-height:26px}
.bars{display:flex;justify-content:center;align-items:center;gap:5px;height:44px;margin:12px 0 18px}
.bars i{width:6px;height:6px;border-radius:3px;background:var(--teal2);transition:height .08s}
.call{width:100%;max-width:280px;border:0;background:var(--teal);color:#fff;font:700 18px inherit;font-family:inherit;padding:16px;border-radius:16px;cursor:pointer}
.call.on{background:var(--red)}
.hint{min-height:20px;margin-top:12px;font-size:13px;color:var(--mut)}
footer{text-align:center;padding:30px 18px 40px;color:var(--mut);font-size:13px;border-top:1px solid var(--line)}
footer a{color:var(--teal)}
