/* Helpmekaar App microsite — implemented from Claude Design handoff
   (Helpmekaar.dc.html + RoadDivider.dc.html), 2026-07-23. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f2e8;color:#2a1c0a;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:#a97e2c;text-decoration:none}
a:hover{color:#7c5a20}
button{font-family:inherit}
input:focus,textarea:focus{border-color:#c69a3e!important;box-shadow:0 0 0 3px rgba(198,154,62,.16);outline:none}

@keyframes busRoute{0%{offset-distance:0%;opacity:0}5%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes driveR{from{transform:translateX(-100px)}to{transform:translateX(100vw)}}
@keyframes driveL{from{transform:translateX(100vw) scaleX(-1)}to{transform:translateX(-100px) scaleX(-1)}}
@keyframes laneDash{from{background-position:0 0}to{background-position:-56px 0}}
@keyframes blink{0%,44%{opacity:1}55%,100%{opacity:.12}}
@keyframes headlamp{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dashFlow{to{stroke-dashoffset:-16}}
@keyframes popIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes paceP{0%{transform:translateX(0)}15%{transform:translateX(0)}25%{transform:translateX(90px)}30%{transform:translateX(90px)}34%{transform:translateX(68px)}38%{transform:translateX(90px)}42%{transform:translateX(68px)}46%{transform:translateX(90px)}55%{transform:translateX(90px)}65%{transform:translateX(0)}80%{transform:translateX(0)}86%{transform:translateX(18px)}90%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes facePace{0%{transform:scaleX(1)}30%{transform:scaleX(-1)}34%{transform:scaleX(1)}38%{transform:scaleX(-1)}42%{transform:scaleX(1)}55%{transform:scaleX(-1)}80%{transform:scaleX(1)}86%{transform:scaleX(-1)}90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes walkBoyL{0%{transform:translateX(0)}28%{transform:translateX(-300px)}33%{transform:translateX(-300px)}36%{transform:translateX(-274px)}39%{transform:translateX(-300px)}42%{transform:translateX(-274px)}45%{transform:translateX(-300px)}52%{transform:translateX(-300px)}80%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes faceBoyL{0%{transform:scaleX(-1)}33%{transform:scaleX(1)}36%{transform:scaleX(-1)}39%{transform:scaleX(1)}42%{transform:scaleX(-1)}52%{transform:scaleX(1)}80%{transform:scaleX(-1)}100%{transform:scaleX(-1)}}
@keyframes paceL{0%{transform:translateX(0)}15%{transform:translateX(0)}25%{transform:translateX(-120px)}30%{transform:translateX(-120px)}34%{transform:translateX(-95px)}38%{transform:translateX(-120px)}42%{transform:translateX(-95px)}46%{transform:translateX(-120px)}55%{transform:translateX(-120px)}65%{transform:translateX(0)}80%{transform:translateX(0)}86%{transform:translateX(-22px)}90%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes faceL{0%{transform:scaleX(-1)}30%{transform:scaleX(1)}34%{transform:scaleX(-1)}38%{transform:scaleX(1)}42%{transform:scaleX(-1)}55%{transform:scaleX(1)}80%{transform:scaleX(-1)}86%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes walkBoy{0%{transform:translateX(0)}28%{transform:translateX(300px)}33%{transform:translateX(300px)}36%{transform:translateX(274px)}39%{transform:translateX(300px)}42%{transform:translateX(274px)}45%{transform:translateX(300px)}52%{transform:translateX(300px)}80%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes faceBoy{0%{transform:scaleX(1)}33%{transform:scaleX(-1)}36%{transform:scaleX(1)}39%{transform:scaleX(-1)}42%{transform:scaleX(1)}52%{transform:scaleX(-1)}80%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes legF{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes legB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes armF{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
@keyframes popBubble{0%{opacity:0;transform:scale(.4) translateY(8px)}6%{opacity:1;transform:scale(1) translateY(0)}20%{opacity:1;transform:scale(1) translateY(0)}28%{opacity:0;transform:scale(.7) translateY(4px)}100%{opacity:0}}
.msr{font-family:'Material Symbols Rounded';font-variation-settings:'FILL' 1;line-height:1;font-weight:400}

.page{min-height:100vh;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(169,126,44,.16)}
.nav-inner{max-width:1180px;margin:0 auto;padding:12px clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{height:42px;width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(80,52,10,.25));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.brand:hover img{transform:rotate(-5deg) scale(1.06)}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{font-family:'Bricolage Grotesque';font-weight:800;font-size:18px;color:#2a1c0a;letter-spacing:-.02em}
.brand-name span{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:#a97e2c;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:clamp(6px,2vw,26px);flex-wrap:wrap;justify-content:flex-end}
.nav-link{font-size:14.5px;font-weight:700;padding:6px 4px;border-bottom:2px solid transparent;color:#5a4a35;transition:color .15s,border-color .15s}
.nav-link.active{border-bottom-color:#a97e2c;color:#7c5a20}
.btn-login{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#8a6320,#c69a3e);color:#fff;font-weight:700;font-size:14px;padding:9px 18px;border-radius:11px;box-shadow:0 8px 20px -8px rgba(138,99,32,.7)}
.btn-login{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.btn-login:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 26px -10px rgba(138,99,32,.85)}
.btn-login:active{transform:translateY(1px) scale(.98)}

/* ---------- Page headers ---------- */
.hdr{position:relative;background:linear-gradient(158deg,#241706 0%,#432c0e 42%,#7c5a20 100%);color:#fff;overflow:hidden}
.hdr-glow{position:absolute;inset:0;background:radial-gradient(55% 60% at 82% 0%,rgba(232,181,101,.3),transparent 70%);pointer-events:none}
.hdr-dots{position:absolute;inset:0;opacity:.10;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.hdr-inner{position:relative;max-width:900px;margin:0 auto;padding:clamp(44px,6vw,84px) clamp(16px,4vw,40px) clamp(80px,11vw,130px);text-align:center}
.hdr-inner img{height:70px;width:auto;margin:0 auto 20px;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e8b565}
.hdr-inner h1{font-weight:800;font-size:clamp(34px,5.5vw,60px);margin:12px 0 0;letter-spacing:-.03em}
.hdr-inner .sub{font-size:clamp(15px,1.9vw,19px);color:rgba(255,255,255,.85);max-width:520px;margin:16px auto 0;line-height:1.55}

/* ---------- Road divider ---------- */
.road{position:relative;height:82px;width:100%;overflow:hidden;background:linear-gradient(180deg,#2b1d0b 0%,#3a2812 50%,#2b1d0b 100%)}
.road .curb-t{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#7c5a20,#e8b565,#7c5a20)}
.road .curb-b{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#7c5a20,#e8b565,#7c5a20)}
.road .edge{position:absolute;top:4px;left:0;right:0;height:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.road .dash{position:absolute;top:50%;left:0;right:0;height:5px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#f2e3bd 0 28px,transparent 28px 56px);opacity:.92;animation:laneDash 1s linear infinite}
.bus-r1{position:absolute;top:13px;left:0;animation:driveR 11s linear infinite}
.bus-r2{position:absolute;top:13px;left:0;animation:driveR 11s linear infinite;animation-delay:-5.5s}
.bus-l1{position:absolute;bottom:13px;left:0;animation:driveL 12.5s linear infinite;animation-delay:-1.5s}
.bus-l2{position:absolute;bottom:14px;left:0;animation:driveL 12.5s linear infinite;animation-delay:-7.5s}

/* ---------- Store buttons ---------- */
.stores{display:flex;flex-wrap:wrap;gap:13px}
.stores.center{justify-content:center}
.btn-store{display:inline-flex;align-items:center;gap:11px;background:#160e03;color:#fff;padding:12px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.btn-store{transition:transform .16s ease,filter .16s ease}
.btn-store:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.12)}
.btn-store:active{transform:translateY(1px) scale(.98)}
.btn-store .lines{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn-store .lines small{font-size:10.5px;opacity:.8}
.btn-store .lines b{font-size:16px;font-weight:700;font-family:'Bricolage Grotesque'}

/* ---------- Cards ---------- */
.card{background:#fffdf8;border:1px solid #eee2cc;border-radius:22px}
.section-kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a97e2c}

/* ---------- Footer ---------- */
.footer{position:relative;background:linear-gradient(158deg,#a67c2e 0%,#7c5a20 30%,#241706 100%);color:#fff;overflow:hidden}
.footer-glow{position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 120%,rgba(232,181,101,.28),transparent 70%);pointer-events:none}
.footer-inner{position:relative;max-width:900px;margin:0 auto;padding:clamp(90px,12vw,150px) clamp(16px,4vw,40px) clamp(44px,6vw,70px);text-align:center}
.footer-inner img{height:72px;width:auto;margin:0 auto 22px;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
.footer-inner h2{font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.03em}
.footer-inner .sub{font-size:clamp(15px,1.9vw,19px);color:rgba(255,255,255,.85);max-width:440px;margin:14px auto 0}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-top:50px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15);font-size:14px;font-weight:600}
.footer-links a{color:rgba(255,255,255,.82)}
.footer-links a:hover{color:#fff}
.footer-copy{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.5)}

/* ---------- Home: steps ---------- */
.step-card{position:relative;z-index:0;display:flex;gap:16px;align-items:flex-start;width:100%;cursor:pointer;text-align:left;border-radius:18px;padding:20px 22px;transition:border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background:#fffdf8;border:1px solid #eee2cc;box-shadow:0 1px 0 rgba(80,52,10,.03)}
/* Gradient lives on a fading overlay: background-image can't interpolate, so
   transitioning it on .active snaps while text colors lag (ugly in Safari). */
.step-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#4a3212,#8a6320);opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.step-card.active{border-color:#a97e2c;box-shadow:0 22px 46px -22px rgba(74,50,18,.75);transform:translateY(-2px)}
.step-card.active::before{opacity:1}
.step-num{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:17px;transition:all .25s;background:#f4ecdb;color:#a97e2c;border:1px solid #ece0c8}
.step-card.active .step-num{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.step-title{font-family:'Bricolage Grotesque';font-weight:700;font-size:17px;transition:color .2s;color:#2a1c0a}
.step-card.active .step-title{color:#fff}
.step-body{font-size:14px;line-height:1.55;margin-top:5px;transition:color .2s;color:#6b5a41}
.step-card.active .step-body{color:rgba(255,255,255,.85)}
.step-dot{height:8px;width:8px;border-radius:4px;border:none;cursor:pointer;padding:0;transition:all .3s;background:#e0d3ba}
.step-dot.active{width:26px;background:#a97e2c}
.step-shot{width:280px;max-width:100%;height:auto;display:block;border-radius:24px;box-shadow:0 30px 60px rgba(30,18,4,.35);transition:opacity .3s}

/* ---------- FAQs ---------- */
.faq{background:#fffdf8;border:1px solid #eee2cc;border-radius:18px;overflow:hidden;transition:border-color .2s}
.faq.open{border-color:#dcc38a;box-shadow:0 20px 44px -30px rgba(80,52,10,.5)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;cursor:pointer;padding:22px 24px;text-align:left}
.faq-q span:first-child{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(16px,2vw,19px);color:#2a1c0a}
.faq-icon{flex:0 0 auto;font-size:26px;font-weight:300;line-height:1;color:#a97e2c;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.faq.open .faq-icon{transform:rotate(45deg)}
.faq-a{overflow:hidden;transition:max-height .32s ease,opacity .28s ease;max-height:0;opacity:0}
.faq.open .faq-a{max-height:320px;opacity:1}
.faq-a p{padding:0 24px 22px;font-size:15px;line-height:1.65;color:#6b5a41}

/* ---------- Forms ---------- */
.field{width:100%;padding:13px 15px;border:1px solid #e3d8c2;border-radius:12px;background:#fbf7ee;font-size:15px;font-family:inherit;color:#2a1c0a;outline:none;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}
.field-label{display:block;font-size:13px;font-weight:700;color:#2a1c0a;margin-bottom:7px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8a6320,#c69a3e);color:#fff;font-weight:700;font-size:16px;border:none;border-radius:13px;padding:15px 24px;cursor:pointer;box-shadow:0 14px 30px -14px rgba(138,99,32,.8)}
.btn-primary{transition:transform .16s ease,filter .16s ease}
.btn-primary:hover{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px) scale(.99)}


/* ---------- v2: live route ticker ---------- */
.ticker-band{position:relative;background:linear-gradient(180deg,#f1e8d5,#f7f2e8);border-bottom:1px solid #ece0c8;overflow:hidden;padding:16px 0}
.ticker-mask{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker-row{display:flex;width:max-content;gap:12px;animation:marquee 34s linear infinite}
.chip{display:inline-flex;align-items:center;gap:11px;background:#fffdf8;border:1px solid #ece0c8;border-radius:100px;padding:8px 16px 8px 8px;white-space:nowrap;box-shadow:0 8px 18px -14px rgba(80,52,10,.6)}
.chip .rt{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#8a6320,#c69a3e);color:#fff;font-family:'Bricolage Grotesque';font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.chip .nm{font-weight:700;font-size:14px;color:#2a1c0a}
.chip .ok{font-size:11.5px;font-weight:700;color:#1f7a2e;background:#e3f3e6;padding:3px 9px;border-radius:100px}
.chip .go{font-size:11.5px;font-weight:700;color:#a86a12;background:#faeccd;padding:3px 9px;border-radius:100px}
.chip .eta{font-size:12.5px;color:#8a7757;font-weight:700;margin-left:-4px}

/* ---------- v2: scroll reveal (JS adds .reveal-ready, IO adds .revealed) ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal].reveal-ready{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
  [data-reveal].revealed{opacity:1;transform:none}
}