/* Hero */

/* --- Layout and state rules --- */
.hero__hint { display: block; }
@media (max-height: 699px) { .hero__hint { display: none; } }

/* Hides the rotating placeholder once the visitor types */
.hero__ph.is-filled { opacity: 0; }

/* --- Section styles --- */
/* <section> */
.hero-01{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(76px,12vh,112px) 20px clamp(10px,2vh,24px);box-sizing:border-box;text-align:center}
/* <div> */
.hero-02{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.2vh,20px);max-width:980px}
/* <div> · ✦Custom AI chatbots, built by ou */
.hero-03{display:flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);font:400 15px Geist,sans-serif;color:#d4d8ca}
/* <span> · ✦Custom AI chatbots, built by ou */
.hero-04{color:#C9FF35;font-size:16px}
/* <h1> */
.hero-05{margin:0;display:flex;flex-direction:column;align-items:center;font:500 clamp(30px,min(6.4vw,8.6vh),88px)/1 Geist,sans-serif;letter-spacing:-.055em}
/* <span> */
.hero-06{display:block;overflow:hidden;padding:0 .04em .1em}
/* <span> · An AI that knows */
.hero-07{display: block;background: linear-gradient(100deg,#6f7862 0%,#dfe5d2 55%,#f4f7ec 100%);-webkit-background-clip: text;background-clip: text;color: transparent;font-family: Unbounded, sans-serif;font-weight: 800}
/* <span> */
.hero-08{display:block;overflow:hidden;padding:0 .04em .1em;margin-top:-.08em}
/* <span> · your business by heart */
.hero-09{display:block;background:linear-gradient(100deg,#7d8870 0%,#e8eddc 50%,#C9FF35 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* <p> · Our team analyzes your business, */
.hero-10{margin: 0;max-width: 520px;font: 300 clamp(15px,2.4vh,20px)/1.45 Geist,sans-serif;color: #b3b8a8;text-wrap: balance}
/* <form> · ✦ */
.hero-11{position:relative;width:min(580px,100%);display:flex;align-items:center;gap:10px;padding:clamp(4px,.8vh,8px) clamp(4px,.8vh,8px) clamp(4px,.8vh,8px) 20px;box-sizing:border-box;border-radius:999px;background:rgba(255,255,255,.05);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 60px rgba(0,0,0,.35),0 0 0 6px rgba(201,255,53,.03)}
/* <span> · ✦ */
.hero-12{color:#C9FF35;font-size:18px}
/* <div> */
.hero-13{position:relative;flex:1;min-width:0;height:24px}
/* <input> */
.hero-14{position:absolute;inset:0;width:100%;border:0;outline:0;background:transparent;color:#eef0e6;font:400 16px Geist,sans-serif;padding:0}
/* <div> */
.hero-15{position:absolute;inset:0;overflow:hidden;pointer-events:none;text-align:left}
/* <div> */
.hero-16{display:flex;flex-direction:column}
/* <button> · Ask Chatzae → */
.hero-17{cursor:pointer;border:0;display:flex;align-items:center;gap:8px;padding:clamp(9px,1.5vh,13px) 22px;border-radius:999px;background:#C9FF35;color:#0a0b08;font:600 15px Geist,sans-serif;box-shadow:0 0 30px rgba(201,255,53,.35)}
.hero-17:hover{background:#e2ff8a}
/* <span> · → */
.hero-18{font-size:17px}
/* <div> · This chat is trained on chatzae. */
.hero-19{font:400 13px Geist,sans-serif;color:#7d8374}
/* <div> */
.hero-20 {
    position: relative;
    width: 100%;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    padding: clamp(26px, 2.5vh, 20px) 0;
}/* <div> */
.hero-21{flex:none;width:clamp(48px,9vh,96px);height:clamp(48px,9vh,96px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(201,255,53,.75);background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07)}
/* <svg> */
.hero-22{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* <div> */
.hero-23{flex:none;display:flex;align-items:center;gap:0}
/* <span> */
.hero-24{width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,255,53,.6))}
/* <span> */
.hero-25{width:9px;height:9px;border-radius:50%;background:#C9FF35;box-shadow:0 0 14px #C9FF35}
/* <div> */
.hero-26{flex:none;width:clamp(116px,24vh,236px);height:clamp(116px,24vh,236px);border-radius:50%;border:1px solid rgba(201,255,53,.22);box-shadow:0 0 80px rgba(201,255,53,.12),inset 0 0 60px rgba(201,255,53,.06)}
/* <span> */
.hero-27{width:44px;height:1px;background:linear-gradient(90deg,rgba(201,255,53,.6),transparent)}
/* <div> · {{ p }} */
.hero-28{height:24px;line-height:24px;font:400 16px Geist,sans-serif;color:#858b7b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
