.bot-how-section{ padding:104px 0; background:#F6F7FA; font-family:'Inter',sans-serif; }
.bot-how-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .bot-how-wrap{ padding:0 20px; } }
.bot-how-shead{ max-width:600px; margin-bottom:56px; }
.bot-how-kicker{ font-size:13px; font-weight:700; color:#2A54FF; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
.bot-how-section h2{ font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:700; color:#0B0D14; margin:0; letter-spacing:-0.02em; }

.bot-how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:860px){ .bot-how-steps{ grid-template-columns:1fr; gap:40px; } }

.bot-how-step{ background:#fff; border:1px solid #E3E6EF; border-radius:18px; padding:28px 24px 26px; box-shadow:0 1px 2px rgba(11,13,20,0.04), 0 12px 32px -12px rgba(11,13,20,0.10); transition:transform .35s cubic-bezier(.22,.9,.35,1), box-shadow .35s ease; }
.bot-how-step:hover{ transform:translateY(-6px); box-shadow:0 4px 10px rgba(11,13,20,0.06), 0 20px 40px -14px rgba(11,13,20,0.18); }

.bot-how-circlewrap{ position:relative; margin-bottom:20px; height:52px; display:flex; align-items:center; }
.bot-how-connector{ position:absolute; right:100%; top:50%; transform:translateY(-50%); width:0; height:2px; background:linear-gradient(90deg,#C7D0EA,#2A54FF); margin-right:14px; transition:width .7s cubic-bezier(.22,.9,.35,1) .1s; }
@media (max-width:860px){ .bot-how-connector{ display:none; } }
.bot-how-step.bot-how-inview .bot-how-connector{ width:48px; }

.bot-how-circle{ width:52px; height:52px; border-radius:50%; background:#0B0D14; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; flex:none; position:relative; z-index:1; transform:scale(.5); opacity:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1) .2s, opacity .35s ease .2s, background .3s ease; box-shadow:0 0 0 6px #F6F7FA; }
.bot-how-step.bot-how-inview .bot-how-circle{ transform:scale(1); opacity:1; }
.bot-how-step:hover .bot-how-circle{ background:#2A54FF; }

.bot-how-step h3{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; margin-bottom:10px; color:#0B0D14; }
.bot-how-step p{ font-size:14.5px; color:#5A5F72; line-height:1.6; margin:0; }

.bot-how-reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.35,1); }
.bot-how-reveal.bot-how-inview{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .bot-how-reveal{ opacity:1; transform:none; transition:none; } .bot-how-circle{ opacity:1; transform:none; transition:none; } .bot-how-connector{ width:48px; transition:none; } }