/* ==========================================================================
   hero.css - hero, animated terminal + phone, flow strip, "What is" box
   ========================================================================== */

.hero{position:relative;overflow:hidden;padding:76px 0 110px;background:radial-gradient(700px 420px at 88% 25%,rgba(18,140,126,.16),transparent 70%),radial-gradient(500px 380px at 0 100%,rgba(37,211,102,.1),transparent 70%),linear-gradient(180deg,#fff,var(--bg))}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:800}
.lead{margin:20px 0 14px;font-size:1.08rem;color:var(--muted);max-width:520px}
.works{margin-bottom:28px;font-weight:600;color:var(--text)}
.works strong{color:var(--green-dark);display:inline-block;min-width:9ch;transition:opacity .3s}
.note{margin-top:22px;color:var(--muted);font-size:.86rem}
.note i{color:var(--green-dark);margin-right:4px}

/* "API is operational" pill */
.pill{display:inline-flex;gap:8px;align-items:center;background:#ecfdf3;border:1px solid #d1fadf;color:#087443;padding:6px 14px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.7)}100%{box-shadow:0 0 0 12px rgba(37,211,102,0)}}

/* Terminal + phone demo */
.demo{display:grid;grid-template-columns:1fr 215px;gap:16px;align-items:end}
.term{background:#0b2723;border-radius:var(--r);overflow:hidden;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;box-shadow:0 24px 50px rgba(7,94,84,.22)}
.term .bar{display:flex;gap:6px;padding:10px 12px;background:#0f3530}
.term .bar b{width:10px;height:10px;border-radius:50%;background:#2c5d55}
.term pre{padding:14px;min-height:250px;color:#bff5d3;white-space:pre-wrap;word-break:break-word}
.term .k{color:#7dd3fc}
.term .s{color:#fde68a}
.cur::after{content:"▍";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.phone{background:#17202a;border-radius:30px;padding:8px;box-shadow:0 30px 60px rgba(16,24,40,.28);transform:rotate(3deg)}
.screen{background:var(--wall);border-radius:24px;height:360px;overflow:hidden;display:flex;flex-direction:column}
.ph-top{background:var(--green);color:#fff;padding:10px 12px;font-size:.8rem;font-weight:600}
.ph-top small{display:block;font-weight:400;opacity:.75;font-size:.68rem}
.msgs{flex:1;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.m{max-width:88%;padding:7px 10px;border-radius:10px;font-size:.72rem;line-height:1.35;color:#111;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.m.out{align-self:flex-end;background:var(--bubble);border-top-right-radius:2px}
.m.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.tk{float:right;margin:4px 0 0 8px;font-size:.6rem;color:#8a9a96}
.tk.read{color:#34b7f1}
.typing{align-self:flex-start;background:#fff;border-radius:10px;padding:8px 12px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9aa8a4;animation:bounce 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-4px);opacity:.5}}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(10px)}}

/* Flow strip: app -> API -> WhatsApp */
.flow{margin-top:-52px;position:relative;z-index:2}
.flow-c{background:#fff;border:1px solid var(--border);border-radius:22px;padding:30px;display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:center;text-align:center;box-shadow:0 20px 50px rgba(16,24,40,.08)}
.node .ni{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 10px;border-radius:18px;background:var(--soft);font-size:1.5rem;color:var(--green-dark)}
.node b{display:block}
.node small{color:var(--muted)}
.wire{height:4px;background:repeating-linear-gradient(90deg,var(--green-dark) 0 10px,transparent 10px 20px);background-size:20px 4px;animation:march 1s linear infinite;border-radius:4px}
@keyframes march{to{background-position:20px 0}}