:root{
  --blue:#7c3aed;
  --blue-dark:#5b21b6;
  --red:#ea4335;
  --yellow:#fbbc04;
  --green:#34a853;
  --text:#202124;
  --text-secondary:#5f6368;
  --border:#dadce0;
  --bg-grey:#f8f9fa;
  --radius:16px;

  /* Vibrant accent gradients used across service cards */
  --grad-1:linear-gradient(135deg,#8b5cf6,#6d28d9);
  --grad-2:linear-gradient(135deg,#ec4899,#db2777);
  --grad-3:linear-gradient(135deg,#3b82f6,#2563eb);
  --grad-4:linear-gradient(135deg,#f97316,#ea580c);
  --grad-5:linear-gradient(135deg,#14b8a6,#0d9488);
  --grad-6:linear-gradient(135deg,#22c55e,#16a34a);
  --grad-7:linear-gradient(135deg,#f43f5e,#e11d48);
  --grad-8:linear-gradient(135deg,#6366f1,#4f46e5);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Roboto','Google Sans',Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:'Google Sans','Roboto',Arial,sans-serif;font-weight:700;letter-spacing:-0.5px;}
h1{font-size:52px;line-height:1.1;}
h2{font-size:36px;line-height:1.2;margin-bottom:12px;}
h3{font-size:20px;}
p{color:var(--text-secondary);}
.section{padding:96px 0;}
.section.grey{background:var(--bg-grey);}
.eyebrow{
  color:var(--blue);font-weight:700;font-size:13px;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:12px;display:block;
}
.section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-head p{font-size:18px;margin-top:8px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:24px;font-weight:500;font-size:15px;
  cursor:pointer;border:1px solid transparent;transition:box-shadow .2s, background .2s;
  background:none;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 1px 8px rgba(26,115,232,.4);}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--border);}
.btn-outline:hover{box-shadow:0 1px 6px rgba(60,64,67,.2);}
.btn-lg{padding:14px 32px;font-size:16px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-text{background:none;color:var(--blue);padding:8px 4px;font-weight:500;}

/* Nav */
header{
  position:sticky;top:0;background:#fff;z-index:50;
  border-bottom:1px solid var(--border);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1140px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;font-family:'Google Sans';color:var(--text);}
.logo-mark{width:32px;height:32px;}
.nav-links{display:flex;gap:36px;align-items:center;}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-secondary);}
.nav-links a:hover{color:var(--blue);}
.nav-cta{display:flex;gap:12px;align-items:center;}
.menu-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;}

/* Nav auth state */
.nav-user{display:flex;align-items:center;gap:10px;}
.nav-user .avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.nav-user .name{font-size:14px;font-weight:500;}
.nav-user .logout{font-size:13px;color:var(--text-secondary);cursor:pointer;}
.nav-user .logout:hover{color:var(--red);}

/* Hero */
.hero{
  padding:88px 0 64px;text-align:center;
  background:radial-gradient(circle at 15% 0%,#f5edff 0%,#fff 45%),
             radial-gradient(circle at 100% 20%,#fdeef7 0%,#fff 50%);
}
.hero .eyebrow{
  background:linear-gradient(135deg,#f5edff,#fdeef7);color:var(--blue-dark);padding:6px 16px;border-radius:20px;
  display:inline-block;margin-bottom:24px;text-transform:none;letter-spacing:0;font-size:14px;
  border:1px solid #ecdcff;
}
.hero h1{max-width:780px;margin:0 auto 20px;}
.hero h1 .accent{color:var(--blue);}
.hero > p{font-size:19px;max-width:560px;margin:0 auto 36px;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;}
.stats-bar{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;padding-top:48px;border-top:1px solid var(--border);}
.stat b{font-size:32px;display:block;color:var(--text);}
.stat span{font-size:14px;color:var(--text-secondary);}

/* Trust strip */
.trust-strip{background:var(--bg-grey);padding:28px 0;}
.trust-strip .container{display:flex;justify-content:space-around;flex-wrap:wrap;gap:24px;}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text-secondary);}
.trust-item .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}

/* Services grid */
.service-group{margin-bottom:56px;}
.service-group:last-child{margin-bottom:0;}
.service-group-head{margin-bottom:24px;}
.service-group-head h3{font-size:22px;margin-bottom:4px;}
.service-group-head p{font-size:14px;margin:0;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.service-card{
  position:relative;isolation:isolate;z-index:0;
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  transition:box-shadow .2s, transform .2s; background:#fff;
  display:flex;flex-direction:column;
}
.service-card:hover{box-shadow:0 10px 28px rgba(80,40,150,.14);transform:translateY(-3px);}

/* Soft RGB glow behind the card on hover — a fixed, still shape; only the
   colors inside it cycle, so it reads as a glowing shadow, not a spinning box. */
@property --rgb-angle{
  syntax:'<angle>';inherits:false;initial-value:0deg;
}
.service-card::after{
  content:'';position:absolute;inset:10px;z-index:-1;
  border-radius:var(--radius);
  background:conic-gradient(from var(--rgb-angle),#ff2d55,#ff9500,#ffcc00,#34c759,#00c7be,#32ade6,#5856d6,#af52de,#ff2d55);
  filter:blur(42px) saturate(75%);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
  animation:rgbHue 8s linear infinite;
}
.service-card:hover::after{opacity:.28;}
@keyframes rgbHue{to{--rgb-angle:360deg;}}
@media (prefers-reduced-motion: reduce){
  .service-card::after{animation:none;}
}
.service-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:16px;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.icon-blue{background:#e8f0fe;}
.icon-green{background:#e6f4ea;}
.icon-yellow{background:#fef7e0;}
.icon-red{background:#fce8e6;}
.grad-1{background:var(--grad-1);}
.grad-2{background:var(--grad-2);}
.grad-3{background:var(--grad-3);}
.grad-4{background:var(--grad-4);}
.grad-5{background:var(--grad-5);}
.grad-6{background:var(--grad-6);}
.grad-7{background:var(--grad-7);}
.grad-8{background:var(--grad-8);}
.service-card h3{margin-bottom:6px;}
.service-card p{font-size:14px;margin-bottom:16px;flex:1;}
.service-price{font-weight:700;color:var(--text);font-size:15px;margin-bottom:14px;}
.service-price span{color:var(--text-secondary);font-weight:400;font-size:13px;}
.svc-book-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:24px;font-weight:600;font-size:14px;color:#fff;
  transition:opacity .15s, transform .15s;
}
.svc-book-btn:hover{opacity:.9;transform:translateY(-1px);}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.step{text-align:center;}
.step-num{
  width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
  margin:0 auto 20px;
}
.step h3{margin-bottom:8px;font-size:17px;}
.step p{font-size:14px;}

/* Why choose us */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.feature{text-align:left;}
.feature .service-icon{margin-bottom:18px;}
.feature h3{font-size:17px;margin-bottom:6px;}
.feature p{font-size:14px;}

/* Coverage */
.coverage{display:flex;align-items:center;gap:64px;}
.coverage-text{flex:1;min-width:0;}
.coverage-stats{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.coverage-stat{background:var(--bg-grey);border-radius:var(--radius);padding:24px;text-align:center;}
.coverage-stat b{font-size:28px;display:block;color:var(--blue);}
.coverage-stat span{font-size:13px;color:var(--text-secondary);}
.city-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.city-tags span{background:#fff;border:1px solid var(--border);padding:6px 14px;border-radius:16px;font-size:13px;color:var(--text-secondary);}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testimonial-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;}
.testimonial-card p.quote{font-size:15px;color:var(--text);margin-bottom:20px;font-style:italic;}
.t-author{display:flex;align-items:center;gap:12px;}
.t-avatar{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.t-author b{font-size:14px;display:block;}
.t-author span{font-size:13px;color:var(--text-secondary);}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.pricing-card{border:1px solid var(--border);border-radius:var(--radius);padding:36px;background:#fff;}
.pricing-card.highlight{border:2px solid var(--blue);position:relative;}
.badge-popular{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:12px;
}
.pricing-card h3{margin-bottom:4px;}
.pricing-card > p.desc{font-size:14px;margin-bottom:24px;}
.plan-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;}
.plan-row:last-of-type{border-bottom:none;}
.plan-row b{color:var(--text);}
.plan-price{font-size:32px;font-weight:700;margin:16px 0 4px;}
.plan-price span{font-size:14px;font-weight:400;color:var(--text-secondary);}
.pricing-card .btn{width:100%;justify-content:center;margin-top:24px;}

/* FAQ */
.faq{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 4px;cursor:pointer;font-weight:500;font-size:16px;
}
.faq-q .arrow{transition:transform .2s;color:var(--text-secondary);}
.faq-item.open .faq-q .arrow{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14px;}
.faq-item.open .faq-a{max-height:200px;padding-bottom:20px;}

/* CTA banner */
.cta-banner{
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
  border-radius:24px;padding:64px;text-align:center;color:#fff;
  margin:0 24px;
}
.cta-banner h2{color:#fff;}
.cta-banner p{color:#e8f0fe;font-size:17px;margin-bottom:28px;}
.cta-banner .btn-primary{background:#fff;color:var(--blue);}
.cta-banner .btn-primary:hover{background:#f1f3f4;}

/* Footer */
footer{background:var(--text);color:#fff;padding:64px 0 24px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;}
.footer-grid h4{font-size:14px;margin-bottom:16px;color:#fff;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{font-size:14px;color:#bdc1c6;}
.footer-grid a:hover{color:#fff;}
.footer-brand p{color:#bdc1c6;font-size:14px;margin-top:12px;max-width:280px;}
.footer-bottom{
  border-top:1px solid #3c4043;padding-top:24px;display:flex;justify-content:space-between;
  font-size:13px;color:#9aa0a6;flex-wrap:wrap;gap:12px;
}

/* =========================================
   Auth pages (login / signup)
========================================= */
.auth-shell{min-height:calc(100vh - 73px);display:flex;align-items:center;justify-content:center;background:var(--bg-grey);padding:48px 20px;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:40px;max-width:420px;width:100%;box-shadow:0 4px 24px rgba(60,64,67,.08);}
.auth-card .logo{justify-content:center;margin-bottom:8px;}
.auth-head{text-align:center;margin-bottom:28px;}
.auth-head h1{font-size:26px;margin-bottom:6px;}
.auth-head p{font-size:14px;}
.auth-tabs{display:flex;background:var(--bg-grey);border-radius:10px;padding:4px;margin-bottom:24px;}
.auth-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;color:var(--text-secondary);}
.auth-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(60,64,67,.15);}
.auth-panel{display:none;}
.auth-panel.active{display:block;}

.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;}
.input-row{display:flex;gap:8px;}
.form-control{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  font-size:15px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;
  background:#fff;
}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.phone-input{display:flex;gap:8px;}
.phone-prefix{
  padding:12px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px;
  color:var(--text);background:var(--bg-grey);min-width:64px;text-align:center;
}
.field-hint{font-size:12px;color:var(--text-secondary);margin-top:6px;}
.field-error{font-size:12px;color:var(--red);margin-top:6px;display:none;}
.field-error.show{display:block;}

.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-secondary);font-size:13px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}

.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 16px;border-radius:10px;border:1px solid var(--border);background:#fff;
  font-size:14px;font-weight:500;color:#3c4043;cursor:pointer;transition:box-shadow .15s,background .15s;
}
.btn-google:hover{box-shadow:0 1px 6px rgba(60,64,67,.2);background:#f8f9fa;}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}

.otp-row{display:flex;gap:8px;justify-content:space-between;margin:6px 0 4px;}
.otp-box{
  width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;
  border:1px solid var(--border);border-radius:10px;outline:none;
}
.otp-box:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.otp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;}
.otp-meta .resend{color:var(--blue);font-weight:500;cursor:pointer;}
.otp-meta .resend.disabled{color:var(--text-secondary);cursor:default;}
.demo-note{
  background:#fef7e0;border:1px solid #fde293;color:#7a5c00;font-size:12.5px;
  padding:10px 12px;border-radius:10px;margin-top:16px;line-height:1.5;
}

.auth-switch{text-align:center;margin-top:22px;font-size:14px;color:var(--text-secondary);}
.auth-switch a{color:var(--blue);font-weight:500;}

/* Toast */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.toast{
  background:#202124;color:#fff;padding:14px 18px;border-radius:12px;font-size:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.25); animation:toastIn .2s ease;
}
.toast.success{background:#0b3d1f;}
@keyframes toastIn{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Google account chooser (demo) */
.modal-overlay{
  position:fixed;inset:0;background:rgba(32,33,36,.55);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.modal-overlay.open{display:flex;}
.gmodal{background:#fff;border-radius:16px;width:100%;max-width:360px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.3);}
.gmodal-head{padding:24px 24px 16px;text-align:center;}
.gmodal-head svg{width:26px;height:26px;margin-bottom:10px;}
.gmodal-head h3{font-size:16px;margin-bottom:4px;}
.gmodal-head p{font-size:13px;}
.gmodal-list{padding:8px 8px 16px;}
.gmodal-account{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;cursor:pointer;
}
.gmodal-account:hover{background:var(--bg-grey);}
.gmodal-account .avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.gmodal-account .who b{display:block;font-size:14px;}
.gmodal-account .who span{font-size:12px;color:var(--text-secondary);}
.gmodal-cancel{border-top:1px solid var(--border);padding:14px;text-align:center;font-size:14px;color:var(--blue);cursor:pointer;font-weight:500;}

/* =========================================
   Find a helper
========================================= */
.filters-bar{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:32px;
}
.filter-field{flex:1;min-width:180px;}
.filter-field label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.chip{
  padding:9px 18px;border-radius:20px;border:1px solid var(--border);font-size:14px;
  cursor:pointer;color:var(--text-secondary);background:#fff;
}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}

.helper-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.helper-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:#fff;transition:box-shadow .2s;}
.helper-card:hover{box-shadow:0 4px 20px rgba(60,64,67,.15);}
.helper-top{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.helper-avatar{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;}
.helper-top h3{font-size:16px;margin-bottom:2px;}
.helper-meta{font-size:13px;color:var(--text-secondary);}
.helper-rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);font-weight:500;margin-bottom:10px;}
.helper-rating .stars{color:#fbbc04;}
.helper-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.helper-tags span{background:var(--bg-grey);color:var(--text-secondary);font-size:12px;padding:4px 10px;border-radius:12px;}
.helper-bottom{display:flex;align-items:center;justify-content:space-between;}
.helper-price{font-weight:700;font-size:16px;}
.helper-price span{font-weight:400;font-size:12px;color:var(--text-secondary);}

.booking-modal{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:32px;max-height:90vh;overflow-y:auto;}
.booking-modal h2{font-size:22px;margin-bottom:4px;}
.booking-modal .sub{font-size:14px;color:var(--text-secondary);margin-bottom:22px;}
.booking-summary{background:var(--bg-grey);border-radius:12px;padding:16px;margin-bottom:20px;display:flex;gap:12px;align-items:center;}
.booking-summary .helper-avatar{width:44px;height:44px;font-size:15px;}
.booking-success{text-align:center;padding:20px 0;}
.booking-success .check{
  width:64px;height:64px;border-radius:50%;background:#e6f4ea;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 18px;
}
.booking-id{background:var(--bg-grey);border-radius:10px;padding:12px;font-size:14px;margin:18px 0;font-weight:500;}

/* =========================================
   Become a helper
========================================= */
.stepper{display:flex;justify-content:center;gap:8px;margin-bottom:40px;}
.stepper .dot{width:36px;height:36px;border-radius:50%;background:var(--bg-grey);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;position:relative;}
.stepper .dot.active{background:var(--blue);color:#fff;}
.stepper .dot.done{background:var(--green);color:#fff;}
.stepper .line{width:40px;height:2px;background:var(--border);align-self:center;}

.apply-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:40px;max-width:560px;margin:0 auto;}
.apply-step{display:none;}
.apply-step.active{display:block;}
.service-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;}
.service-select{
  border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:14px;
}
.service-select input{width:16px;height:16px;accent-color:var(--blue);}
.service-select.checked{border-color:var(--blue);background:#e8f0fe;}
.upload-box{
  border:2px dashed var(--border);border-radius:12px;padding:28px;text-align:center;
  color:var(--text-secondary);font-size:14px;cursor:pointer;
}
.upload-box.has-file{border-color:var(--green);color:var(--green);border-style:solid;}
.review-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;}
.review-row:last-child{border-bottom:none;}
.step-actions{display:flex;gap:12px;margin-top:28px;}
.step-actions .btn{flex:1;}

/* Membership plan picker */
.plan-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;}
.plan-select{
  border:1px solid var(--border);border-radius:12px;padding:14px 8px;cursor:pointer;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.plan-select input{position:absolute;opacity:0;pointer-events:none;}
.plan-select b{font-size:14px;}
.plan-select small{font-size:15px;font-weight:700;color:var(--blue);}
.plan-select.checked{border-color:var(--blue);background:#f5edff;}

/* UPI payment block */
.payment-block{border-top:1px solid var(--border);margin-top:24px;padding-top:24px;}
.upi-box{
  display:flex;gap:20px;align-items:center;background:var(--bg-grey);
  border-radius:14px;padding:18px;margin-bottom:16px;flex-wrap:wrap;
}
.upi-box img{border-radius:10px;background:#fff;padding:8px;flex-shrink:0;}
.upi-details{flex:1;min-width:180px;}
.upi-amount{font-size:24px;font-weight:700;margin-bottom:6px;}
.upi-id-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;margin-bottom:8px;}
.upi-id-row span{background:#fff;border:1px solid var(--border);padding:6px 12px;border-radius:8px;}
.upi-placeholder{
  border:2px dashed var(--border);border-radius:14px;padding:20px;text-align:center;
  color:var(--text-secondary);font-size:13.5px;margin-bottom:16px;line-height:1.6;
}
.paid-confirm{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;padding:14px;
}
.paid-confirm input{width:18px;height:18px;accent-color:var(--blue);margin-top:1px;flex-shrink:0;}
.paid-confirm.checked{border-color:var(--green);background:#e6f4ea;}

@media(max-width:900px){
  h1{font-size:36px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .menu-toggle{display:flex;}
  .services-grid,.steps,.features-grid,.testimonials-grid,.helper-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr;}
  .coverage{flex-direction:column;align-items:stretch;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-banner{padding:40px 24px;}
  .service-select-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .services-grid,.steps,.features-grid,.testimonials-grid,.helper-grid{grid-template-columns:1fr;}
  .stats-bar{gap:32px;}
  .footer-grid{grid-template-columns:1fr;}
  .auth-card{padding:28px 22px;}
  .otp-box{width:38px;height:46px;font-size:18px;}
  .nav-user .name{display:none;}
}

/* ===== App-like mobile experience ===== */

/* Prevent iOS auto-zoom on input focus + kill tap-highlight flash everywhere */
html{-webkit-tap-highlight-color:transparent;}
a,button,.btn,.service-select,.plan-select,.paid-confirm,.upload-box{-webkit-tap-highlight-color:transparent;}
body{overscroll-behavior-y:contain;}

.menu-toggle{
  color:var(--text);
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border-radius:50%;
  padding:0;
}
.menu-toggle:active{background:var(--bg-grey);}

/* Drawer overlay (backdrop) */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(32,33,36,.5);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
  z-index:200;
}
.drawer-overlay.open{opacity:1;visibility:visible;}

/* Slide-in mobile drawer — display:none at rest (not just off-canvas via
   transform) so its closed box can't extend past the viewport and silently
   widen the page's horizontal scroll area. JS flips display on right before
   the open transition starts, and back to none once the close transition
   finishes (see initMobileDrawer in app.js). */
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,82vw);
  background:#fff;
  z-index:201;
  display:none;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-drawer.drawer-visible{display:flex;}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer:not(.open){pointer-events:none;}
.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.mobile-drawer-title{font-family:'Google Sans','Roboto',Arial,sans-serif;font-weight:700;font-size:18px;}
.drawer-close{
  background:none;border:none;font-size:26px;line-height:1;color:var(--text-secondary);
  cursor:pointer;width:36px;height:36px;border-radius:50%;
}
.drawer-close:active{background:var(--bg-grey);}
.mobile-drawer-links{display:flex;flex-direction:column;padding:8px 20px;overflow-y:auto;}
.mobile-drawer-links a{
  padding:15px 0;font-size:16px;font-weight:500;color:var(--text);
  border-bottom:1px solid var(--border);
}
.mobile-drawer-links a:active{color:var(--blue);}
.mobile-drawer-auth{
  margin-top:auto;padding:18px 20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
}
.mobile-drawer-auth .btn{width:100%;}
.mobile-drawer-auth .nav-user{flex-direction:row;justify-content:space-between;}

@media(min-width:901px){
  .drawer-overlay,.mobile-drawer{display:none;}
}

/* Bottom app-style tab bar (phones only) */
.app-tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;
  z-index:150;
  background:#fff;border-top:1px solid var(--border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.app-tabbar-inner{display:flex;justify-content:space-around;align-items:center;}
.app-tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-secondary);font-size:11px;font-weight:500;
  padding:6px 10px;border-radius:12px;min-width:56px;
}
.app-tab svg{width:22px;height:22px;}
.app-tab.active{color:var(--blue);}
.app-tab:active{background:var(--bg-grey);}

@media(max-width:900px){
  .app-tabbar{display:block;}
  body{padding-bottom:64px;}
}

/* Touch target + input polish on phones */
@media(max-width:900px){
  .form-control{font-size:16px;}
  .btn{min-height:44px;}
  .nav-links a,.mobile-drawer-links a{-webkit-tap-highlight-color:transparent;}
  header{padding-top:env(safe-area-inset-top);}
}

/* Compact icon-grid services section on phones (Urban Company style) — desktop untouched */
@media(max-width:560px){
  .service-group{margin-bottom:28px;}
  .service-group-head{margin-bottom:14px;}
  .service-group-head h3{font-size:17px;}
  .service-group-head p{font-size:12.5px;}

  .services-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .service-card{
    padding:12px 6px;border-radius:16px;
    align-items:center;text-align:center;
    border-color:#eee;min-width:0;
  }
  .service-card::after{display:none;}
  .service-icon{
    width:46px;height:46px;border-radius:13px;font-size:20px;
    margin:0 auto 8px;box-shadow:none;
  }
  .service-card h3{font-size:11.5px;line-height:1.25;font-weight:600;margin-bottom:0;}
  .service-card p,.service-price{display:none;}
  .svc-book-btn{
    position:absolute;inset:0;width:100%;height:100%;
    padding:0;border-radius:16px;opacity:0;
  }
}

/* Compact vertical timeline for "How it Works" on phones — desktop untouched */
@media(max-width:560px){
  .steps{display:flex;flex-direction:column;gap:0;}
  .step{
    display:grid;grid-template-columns:40px 1fr;column-gap:14px;
    text-align:left;position:relative;padding-bottom:24px;
  }
  .step:last-child{padding-bottom:0;}
  .step::before{
    content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;
    background:var(--border);
  }
  .step:last-child::before{content:none;}
  .step-num{
    grid-column:1;grid-row:1/3;
    width:40px;height:40px;font-size:16px;margin:0;
    position:relative;z-index:1;flex-shrink:0;
    box-shadow:0 4px 10px rgba(124,58,237,.3);
  }
  .step h3{grid-column:2;grid-row:1;font-size:15.5px;margin-bottom:3px;align-self:center;}
  .step p{grid-column:2;grid-row:2;font-size:13px;margin:0;}
}

/* Compact "Why Choose" / "Become a Helper" feature tiles on phones */
@media(max-width:560px){
  .features-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .feature{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0;}
  .feature .service-icon{width:38px;height:38px;font-size:17px;border-radius:10px;margin-bottom:8px;box-shadow:none;}
  .feature h3{font-size:13.5px;margin-bottom:3px;}
  .feature p{font-size:11.5px;line-height:1.4;}
}

/* Compact coverage section on phones — scrollable city chips, tighter stats */
@media(max-width:560px){
  .coverage{gap:28px;}
  .coverage-text p{font-size:13.5px;}
  .city-tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-top:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .city-tags::-webkit-scrollbar{display:none;}
  .city-tags span{flex-shrink:0;font-size:12.5px;padding:6px 12px;}
  .coverage-stats{gap:10px;}
  .coverage-stat{padding:14px 10px;border-radius:14px;}
  .coverage-stat b{font-size:20px;}
  .coverage-stat span{font-size:11px;}
}

/* Swipeable testimonial carousel on phones */
@media(max-width:560px){
  .testimonials-grid{
    display:flex;grid-template-columns:unset;
    overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
    padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -24px;padding-left:24px;padding-right:24px;
  }
  .testimonials-grid::-webkit-scrollbar{display:none;}
  .testimonial-card{flex:0 0 84%;scroll-snap-align:start;padding:18px;}
  .testimonial-card p.quote{font-size:13.5px;margin-bottom:14px;}
}

/* Compact pricing cards on phones */
@media(max-width:560px){
  .pricing-card{padding:20px;border-radius:16px;}
  .pricing-card > p.desc{font-size:12.5px;margin-bottom:16px;}
  .plan-row{padding:10px 0;font-size:13px;}
  .plan-price{font-size:26px;margin:12px 0 2px;}
  .pricing-card .btn{margin-top:16px;}
}

/* Drop FAQ, the repeat CTA banner, and the full footer on phones — their
   essential links/actions live in the hamburger menu and bottom tab bar instead */
@media(max-width:560px){
  #faq,#get-started,footer{display:none;}
}

/* Secondary "footer" links inside the mobile drawer */
.mobile-drawer-divider{height:1px;background:var(--border);margin:10px 0 6px;}
.mobile-drawer-links a.secondary{font-size:13.5px;color:var(--text-secondary);font-weight:400;padding:11px 0;}
.mobile-drawer-copyright{font-size:11px;color:var(--text-secondary);padding:14px 0 4px;}

/* Normalize vertical rhythm on phones — desktop's 96px section padding and
   56px heading gaps were left untouched everywhere, so the tightened tiles
   above sat inside oversized, uneven whitespace. Bring the whole scroll
   down to a consistent, app-like density. */
@media(max-width:560px){
  .hero{padding:28px 0 36px;}
  .hero .eyebrow{margin-bottom:16px;font-size:12.5px;padding:5px 12px;}
  .hero h1{margin-bottom:12px;}
  .hero > p{font-size:15px;margin-bottom:22px;}
  .hero-ctas{margin-bottom:28px;gap:10px;}
  .stats-bar{padding-top:24px;gap:20px 28px;}

  .trust-strip{padding:18px 0;}
  .trust-strip .container{display:grid;grid-template-columns:1fr 1fr;justify-content:start;gap:12px 16px;}
  .trust-item{font-size:12.5px;gap:8px;}

  .section{padding:44px 0;}
  .section-head{margin-bottom:28px;}
  .section-head p{font-size:14px;margin-top:6px;}
}