.home-page { overflow: hidden; background: var(--cream); }
.home-header { background: var(--cream); }
.home-hero { min-height: 670px; padding: 42px clamp(22px, 5vw, 76px) 72px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.hero-copy h1 { max-width: 720px; margin: 0; color: var(--navy); font-size: clamp(51px, 6.3vw, 89px); line-height: .94; letter-spacing: -.065em; font-weight: 850; }
.hero-copy h1 em { color: var(--orange); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.07em; }
.hero-lede { max-width: 600px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 30px; }
.text-link { color: var(--navy); font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--navy); }
.trust-note { margin-top: 34px; display: flex; align-items: center; gap: 12px; color: var(--muted); }
.trust-note p { margin: 0; font-size: 13px; line-height: 1.45; }
.trust-note strong { color: var(--navy); }
.trust-shield { width: 34px; height: 38px; display: grid; place-items: center; color: #187852; background: var(--mint); border-radius: 48% 48% 56% 56%; font-weight: 900; }
.hero-visual { position: relative; min-height: 560px; border-radius: 220px 12px 12px 12px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 70px rgba(6,45,59,.18); }
.hero-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82); }
.photo-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(5,50,63,.08) 25%, rgba(3,39,51,.58) 100%); }
.ussd-card { position: absolute; right: 28px; bottom: 34px; width: min(330px, 75%); padding: 22px; background: rgba(255,255,255,.95); border-radius: 14px; box-shadow: 0 20px 50px rgba(3,38,49,.3); backdrop-filter: blur(5px); }
.ussd-top { margin: -22px -22px 18px; padding: 11px 15px; display: flex; justify-content: space-between; background: var(--navy); color: white; border-radius: 14px 14px 0 0; font-size: 12px; font-weight: 750; }
.signal { color: #78d3b0; font-size: 9px; }
.ussd-card > p { margin: 0 0 13px; font-weight: 850; font-size: 14px; }
.ussd-card ol { padding: 0; margin: 0; list-style: none; display: grid; gap: 9px; }
.ussd-card li { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 650; }
.ussd-card li span { width: 25px; height: 25px; display: grid; place-items: center; background: #edf1ef; border-radius: 50%; font-size: 11px; }
.ussd-input { margin-top: 16px; padding: 9px 6px 3px; display: flex; justify-content: space-between; color: #839095; border-top: 1px solid var(--line); font-size: 11px; }
.ussd-input strong { color: var(--orange-dark); }
.photo-credit { position: absolute; left: 20px; bottom: 9px; margin: 0; color: rgba(255,255,255,.75); font-size: 9px; }
.trust-strip { min-height: 104px; padding: 26px clamp(22px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 26px; background: white; border-top: 1px solid #e8ece9; border-bottom: 1px solid #e8ece9; }
.trust-strip p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trust-strip div { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 13px; font-weight: 750; }
.trust-strip span { width: 29px; height: 29px; display: grid; place-items: center; color: #197a55; border: 1px solid #a9d8c4; border-radius: 50%; }
.how-section { padding: 110px clamp(22px, 6vw, 92px); background: #fff; }
.section-heading { text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2 { max-width: 720px; margin: 0 auto; color: var(--navy); font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.055em; }
.section-heading > p:last-child { color: var(--muted); }
.steps-grid { max-width: 1180px; margin: 55px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps-grid article { position: relative; min-height: 295px; padding: 28px; background: var(--cream); border: 1px solid transparent; border-radius: 12px; }
.steps-grid article:nth-child(2) { background: var(--navy); color: white; transform: translateY(-13px); }
.steps-grid article > b { position: absolute; top: 24px; right: 24px; color: #a9b3b0; font-size: 12px; }
.step-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 16px 0 44px; background: white; color: var(--orange); border-radius: 50% 50% 50% 15%; font-size: 22px; }
.step-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.steps-grid article:nth-child(2) .step-icon { background: #22a447; color: white; }
.steps-grid h3 { margin: 0 0 10px; color: inherit; font-size: 21px; letter-spacing: -.035em; }
.steps-grid p { margin: 0; color: #667b81; font-size: 14px; }
.steps-grid article:nth-child(2) p { color: #b9cbd0; }
.home-cta { padding: 75px clamp(22px, 6vw, 92px); display: flex; align-items: center; justify-content: space-between; gap: 50px; background: var(--navy); color: white; }
.home-cta h2 { max-width: 820px; margin: 0; font-size: clamp(35px, 4.6vw, 61px); line-height: 1.02; letter-spacing: -.055em; }
.orange-button { flex: none; background: var(--orange); color: white; min-width: 208px; }

@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 45px; }
  .hero-copy { max-width: 730px; }
  .hero-visual { min-height: 500px; border-radius: 150px 12px 12px; }
  .trust-strip { flex-wrap: wrap; justify-content: flex-start; }
  .trust-strip p { width: 100%; }
}
@media (max-width: 680px) {
  .home-hero { padding: 40px 20px 50px; gap: 45px; }
  .hero-copy h1 { font-size: clamp(48px, 15vw, 67px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-visual { min-height: 440px; border-radius: 100px 10px 10px; }
  .ussd-card { right: 14px; bottom: 32px; width: calc(100% - 28px); }
  .trust-strip div { width: 100%; }
  .how-section { padding: 75px 20px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article:nth-child(2) { transform: none; }
  .home-cta { align-items: flex-start; flex-direction: column; padding: 64px 20px; }
}

/* Phone-to-care communication hero */
.home-header .active { color: var(--orange-dark); border-color: var(--orange); }
.home-hero { min-height: 720px; grid-template-columns: minmax(0,.88fr) minmax(480px,1.12fr); background: radial-gradient(circle at 82% 32%,rgba(38,102,224,.12),transparent 31%),linear-gradient(145deg,#fbf8f0,#f1f5ef); isolation:isolate; }
.hero-copy,.communication-stage { position:relative; z-index:2; }
.hero-copy h1 { font-size:clamp(54px,6.4vw,92px); }
.communication-stage { min-height:600px; overflow:visible; border-radius:34px 180px 34px 34px; background:radial-gradient(circle at 48% 44%,#0b4f75 0,#072f4a 34%,#041d2f 70%); border:1px solid rgba(36,111,194,.25); box-shadow:0 35px 80px rgba(6,45,59,.22); }
.communication-stage::before { content:"AI KITO COMMUNICATION NETWORK"; position:absolute; top:22px; left:26px; color:rgba(255,255,255,.48); font-size:9px; font-weight:900; letter-spacing:.16em; }
.communication-stage::after { content:"LIVE"; position:absolute; top:18px; right:28px; padding:4px 9px; color:#8df0c7; background:rgba(47,163,117,.16); border:1px solid rgba(106,225,174,.35); border-radius:99px; font-size:8px; font-weight:900; letter-spacing:.12em; }
.hero-visual .feature-phone { position:absolute; z-index:4; left:50%; top:51%; width:43%; height:86%; object-fit:contain; object-position:center; transform:translate(-50%,-50%) rotate(-6deg); filter:drop-shadow(0 28px 28px rgba(0,0,0,.46)); animation:phoneHover 5s ease-in-out infinite; }
.hero-visual:hover .feature-phone { transform:translate(-50%,-50%) rotate(-3deg) scale(1.025); }
.signal-ring { position:absolute; z-index:1; left:50%; top:48%; border:1px solid rgba(102,181,255,.25); border-radius:50%; transform:translate(-50%,-50%); animation:signalExpand 3.8s ease-out infinite; }
.ring-one{width:240px;height:240px}.ring-two{width:365px;height:365px;animation-delay:1.2s}.ring-three{width:500px;height:500px;animation-delay:2.4s}
.comm-node { position:absolute; z-index:6; min-width:195px; padding:13px 15px; display:flex; align-items:center; gap:11px; color:var(--navy); background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.72); border-radius:12px; box-shadow:0 15px 36px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.comm-node>span { width:32px;height:32px;display:grid;place-items:center;flex:none;background:var(--orange);color:white;border-radius:50%;font-size:10px;font-weight:900}.comm-node>div{display:grid}.comm-node small{color:#778a91;font-size:8px;font-weight:850;letter-spacing:.1em}.comm-node strong{font-size:12px}.community-node{left:22px;top:112px;animation:nodeFloat 4.4s ease-in-out infinite}.clinic-node{right:20px;bottom:128px;animation:nodeFloat 4.4s .8s ease-in-out infinite}.clinic-node>span{background:#16805a}
.signal-status { position:absolute; z-index:6; right:18px; top:106px; padding:11px 14px; display:flex;align-items:center;gap:10px;color:white;background:rgba(2,25,40,.7);border:1px solid rgba(123,224,184,.25);border-radius:10px}.signal-status i{width:9px;height:9px;background:#6ee0b1;border-radius:50%;box-shadow:0 0 0 6px rgba(110,224,177,.12);animation:statusPulse 1.8s ease-out infinite}.signal-status p{margin:0;display:grid;line-height:1.3}.signal-status strong{font-size:10px}.signal-status span{color:#88aab5;font-size:8px}
.communication-flow { position:absolute; z-index:6; left:28px; right:28px; bottom:24px; padding:13px 18px; display:flex;align-items:center;justify-content:center;gap:13px;color:#adc6cf;background:rgba(1,22,35,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.communication-flow i{width:44px;height:1px;background:linear-gradient(90deg,#6fe1b2,var(--orange));position:relative}.communication-flow i::after{content:"";position:absolute;right:0;top:-2px;border-left:4px solid var(--orange);border-top:2px solid transparent;border-bottom:2px solid transparent}
.germ-field { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.germ { position:absolute; width:180px; height:180px; object-fit:cover; border-radius:50%; opacity:.09; mix-blend-mode:multiply; filter:saturate(.8); animation:germDrift 14s ease-in-out infinite; }
.germ-one{left:3%;top:8%;width:150px;height:150px}.germ-two{right:5%;top:4%;animation-delay:-5s}.germ-three{left:38%;bottom:-45px;width:220px;height:220px;animation-delay:-9s}
@keyframes phoneHover{0%,100%{transform:translate(-50%,-50%) rotate(-6deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-3deg) translateY(-12px)}}
@keyframes signalExpand{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(110,224,177,.5)}100%{box-shadow:0 0 0 13px rgba(110,224,177,0)}}
@keyframes germDrift{0%,100%{transform:translate(0,0) rotate(-10deg)}35%{transform:translate(34px,-24px) rotate(8deg)}70%{transform:translate(-18px,20px) rotate(18deg)}}
@media(max-width:980px){.home-hero{grid-template-columns:1fr}.communication-stage{width:100%;max-width:760px}}
@media(max-width:680px){.communication-stage{min-height:510px;border-radius:24px 90px 24px 24px}.hero-visual .feature-phone{width:58%;height:76%;top:49%}.comm-node{min-width:150px;padding:9px}.community-node{left:10px;top:84px}.clinic-node{right:10px;bottom:92px}.signal-status{right:10px;top:65px}.communication-flow{left:10px;right:10px;bottom:14px;gap:7px}.communication-flow i{width:18px}.ring-three{width:390px;height:390px}}
@media(prefers-reduced-motion:reduce){.feature-phone,.signal-ring,.comm-node,.signal-status i,.germ{animation:none!important}}

/* Interactive health assistant hero */
.chatbot-shell { position:absolute; z-index:4; left:50%; top:51%; width:min(420px,62%); min-height:442px; display:flex; flex-direction:column; transform:translate(-50%,-50%); overflow:hidden; color:var(--navy); background:#f8fbfa; border:1px solid rgba(255,255,255,.8); border-radius:24px; box-shadow:0 28px 55px rgba(0,0,0,.42); animation:chatbotHover 5s ease-in-out infinite; }
.chatbot-head { min-height:68px; padding:13px 15px; display:flex; align-items:center; gap:10px; color:white; background:linear-gradient(135deg,#0a5262,#073446); }
.chatbot-avatar { width:38px; height:38px; display:grid; place-items:center; flex:none; color:white; background:linear-gradient(145deg,#20a568,#0a7449); border-radius:12px 12px 12px 4px; font-weight:900; }
.chatbot-head>div { display:grid; line-height:1.25; }
.chatbot-head strong { font-size:13px; }
.chatbot-head small { color:#b9d6db; font-size:9px; }
.chatbot-head small i { width:6px; height:6px; display:inline-block; margin-right:4px; background:#69dfad; border-radius:50%; box-shadow:0 0 0 3px rgba(105,223,173,.12); }
.chatbot-badge { margin-left:auto; padding:4px 8px; color:#8ce6bd; background:rgba(80,205,151,.1); border:1px solid rgba(105,223,173,.25); border-radius:99px; font-size:8px; font-weight:900; letter-spacing:.12em; }
.chatbot-messages { height:222px; padding:17px 15px 8px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; scrollbar-width:thin; }
.chat-message { display:flex; align-items:flex-end; gap:7px; }
.chat-message>span { width:23px; height:23px; display:grid; place-items:center; flex:none; color:white; background:#16805a; border-radius:8px 8px 8px 3px; font-size:8px; font-weight:900; }
.chat-message p { max-width:82%; margin:0; padding:9px 11px; color:#294952; background:white; border:1px solid #dce8e5; border-radius:12px 12px 12px 3px; font-size:10px; line-height:1.45; box-shadow:0 4px 12px rgba(6,45,59,.05); }
.user-message { justify-content:flex-end; }
.user-message p { color:white; background:#0c5b70; border-color:#0c5b70; border-radius:12px 12px 3px 12px; }
.chatbot-choices { padding:4px 15px 11px; display:flex; flex-wrap:wrap; gap:6px; }
.chatbot-choices button { padding:6px 9px; color:#0c6676; background:#e5f5ef; border:1px solid #b9dfd2; border-radius:99px; cursor:pointer; font-size:8px; font-weight:800; }
.chatbot-choices button:hover,.chatbot-choices button:focus-visible { color:white; background:#16805a; border-color:#16805a; outline:none; }
.chatbot-composer { margin:auto 12px 0; padding:6px 6px 6px 12px; display:flex; align-items:center; gap:8px; background:white; border:1px solid #d5e3e0; border-radius:12px; box-shadow:0 4px 14px rgba(6,45,59,.06); }
.chatbot-composer:focus-within { border-color:#27a97a; box-shadow:0 0 0 3px rgba(39,169,122,.12); }
.chatbot-composer input { min-width:0; flex:1; color:var(--navy); background:transparent; border:0; outline:0; font-size:10px; }
.chatbot-composer input::placeholder { color:#879b9f; }
.chatbot-composer button { width:31px; height:31px; display:grid; place-items:center; flex:none; color:white; background:var(--orange); border:0; border-radius:9px; cursor:pointer; font-weight:900; }
.chatbot-composer button:hover,.chatbot-composer button:focus-visible { background:var(--orange-dark); outline:2px solid white; outline-offset:-4px; }
.chatbot-note { margin:7px 12px 9px; color:#779095; text-align:center; font-size:7px; font-weight:700; letter-spacing:.03em; }
@keyframes chatbotHover { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-9px)} }
@media(max-width:680px){.chatbot-shell{width:calc(100% - 34px); min-height:405px; top:50%; border-radius:19px}.chatbot-messages{height:192px}.community-node,.clinic-node{display:none}.signal-status{z-index:7}.chatbot-head{padding-right:74px}}
@media(prefers-reduced-motion:reduce){.chatbot-shell{animation:none!important}}