:root{
  --primary:#1f4fb6;
  --primary-600:#2543a2;
  --navy:#0a2a66;
  --text:#1a1f36;
  --muted:#5b6b8c;
  --border:#e6e9f2;
  --bg:#f7f9fc;
  --accent:#ff8c2a;
  --accent-700:#e67614;
  --success:#2bb673;
  --note:#ffe6ad;
  --note-ink:#8a5b00;
  --chip:#edf2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", sans-serif;
  color:var(--text);
  background:var(--bg);
}
.page{
  max-width:420px;
  margin:0 auto;
  background:#fff;
  min-height:100%;
  box-shadow:0 10px 30px rgba(17, 27, 71, .08);
  padding-bottom:76px; /* ensure content not hidden behind bottom nav */
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  box-shadow:0 1px 0 rgba(17,24,39,0.04);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--navy);
  font-weight:800;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:.2px;
}
.brand svg{
  width:28px;height:28px;flex:0 0 28px;
}
.brand img{height:28px; width:auto; flex:0 0 auto; display:block}
.brand span{
  font-size:20px;
}
.menu-toggle{
  appearance:none;border:0;background:#f2f6ff;color:#1f2a56;
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(16,24,40,.08) inset;
}
.call{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  background:#f2f6ff;
  padding:8px 12px;
  border-radius:999px;
}
.call svg{width:16px;height:16px;color:#2aa85a}

/* Hero */
.hero{
  margin:0 18px;
  background:linear-gradient(180deg,#ebf1ff 0%, #f4f7ff 100%);
  border-radius:14px;
  padding:22px 18px 130px; /* reserve space for layered art, tighter under CTA */
  position:relative;
  overflow:hidden;
  isolation:isolate; /* keep blend modes scoped to hero */
}
.hero h1{
  margin:2px 0 10px;
  font-size:30px;
  line-height:1.15;
  color:var(--navy);
  font-family:Poppins, Inter, sans-serif;
  font-weight:800;
  letter-spacing:.2px;
}
.hero p{
  margin:0 0 16px;
  color:#334066;
  line-height:1.55;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  font-family:Inter, sans-serif;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  width:max-content;
  box-shadow:0 6px 14px rgba(31,79,182,.18);
}
.cta:hover{background:var(--primary-600)}

/* CTA row */
.hero-actions{display:inline-flex; align-items:center; gap:12px; margin-top:12px; position:relative; z-index:3;}

/* Layered hero artwork */
.hero-art{
  position:absolute;
  right:0;
  bottom:12px; /* lift artwork closer to CTA to remove white band */
  width:70%;
  max-width:320px;
  pointer-events:none;
  user-select:none;
}
.hero-art img{position:absolute; right:0; bottom:0; width:100%; height:auto; display:block}
.hero-bg{
  z-index:0;
  opacity:.85;
  width:250%;
  right:-28px;
  bottom:0;
  transform:none;
}
.hero-fore{
  z-index:1;
  width:62%;
  right:8px;
  bottom:0;
  mix-blend-mode:multiply; /* hide white matte from non-transparent PNGs */
}

@media (max-width: 380px){
  .hero-art{ width:64%; max-width:300px; }
  .hero-fore{ width:58%; }
}

/* Off-canvas navigation */
.nav-overlay{
  position:fixed;inset:0;background:rgba(10,16,30,.35);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  z-index: 98; /* ensure above any selects/dropdowns */
}
.nav-drawer{
  position:fixed;left:0;top:0;height:100dvh;width:min(86%,360px);
  background:#fff;border-radius:0 20px 20px 0;
  box-shadow:0 20px 60px rgba(17,27,71,.15);
  transform:translateX(-105%);transition:transform .25s ease;
  display:flex;flex-direction:column;gap:4px;padding:16px 16px 20px;
  z-index: 99; /* drawer above overlay and page */
}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
body.nav-open .nav-drawer{transform:translateX(0)}
/* prevent underlying page controls (like selects) from interacting when drawer open */
/* disable interactions on underlying page content, but keep drawer/overlay/bottom-nav clickable */
body.nav-open .page > *:not(.nav-drawer):not(.nav-overlay):not(.bottom-nav){pointer-events:none}
/* hide native dropdown UIs that can render above overlays on some platforms */
body.nav-open select{visibility:hidden !important}
body.nav-open .select{visibility:hidden !important}

.nav-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #eef2f9}
.brand-large{display:flex;align-items:center;gap:10px}
.brand-large img{height:34px;width:auto;display:block}
.brand-large span{font-size:22px;font-weight:800;color:var(--navy);font-family:Poppins, Inter, sans-serif}
.menu-close{appearance:none;border:0;background:#f4f6fb;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}

.nav-phone{display:flex;align-items:center;gap:10px;margin:14px 2px 8px;color:#143a7a;text-decoration:none;font-weight:600}
.nav-phone-icon{background:#e8fff1;color:#1b8f4b;border-radius:8px;padding:6px 8px;display:inline-flex}

.nav-links{display:flex;flex-direction:column;margin-top:4px}
.nav-links a{display:flex;align-items:center;gap:14px;padding:14px 6px;color:#1a2a57;text-decoration:none;border-bottom:1px solid #f0f3fa}
.nav-links .nav-ic{width:28px;height:28px;display:inline-grid;place-items:center;background:#eef4ff;border-radius:8px;font-size:16px}
.nav-cta{margin-top:auto;display:block;text-align:center;background:#2bb673;color:#fff;text-decoration:none;font-weight:800;border-radius:12px;padding:14px 16px}

/* Drawer grouped links */
.nav-section{margin:8px 0 4px;padding-top:8px;border-top:1px solid #eef2f9}
.nav-group-title{font-size:13px;font-weight:800;color:#163a7a;opacity:.9;margin:4px 2px 4px}
.nav-sublinks{display:flex;flex-direction:column;margin-bottom:4px}
.nav-sublinks a{display:block;padding:12px 6px 12px 28px;color:#1a2a57;text-decoration:none;font-weight:600}
.nav-sublinks a + a{border-top:1px dashed #eef2f9}

/* Auth / Registration page */
.auth{padding:16px 18px 32px}
.auth-hero{
  background:linear-gradient(180deg,#eef3ff 0%, #f7f9ff 100%);
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
}
.auth-hero h1{
  margin:6px 0 6px;font-size:26px;line-height:1.2;color:var(--navy);font-family:Poppins, Inter, sans-serif;font-weight:800;
}
.auth-hero p{margin:0;color:#4b5a7a}
.auth-card{
  border:1px solid #e9eef8;border-radius:14px;padding:14px;background:#fff;box-shadow:0 6px 18px rgba(17,27,71,.05);
  display:flex;flex-direction:column;gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13px;color:#3d4b6b;font-weight:700}
.input{display:flex;align-items:center;border:1px solid #dbe4f7;border-radius:10px;padding:10px 12px;background:#fff}
.input input{border:0;outline:none;width:100%;font-size:15px}
.input.with-prefix .prefix{display:inline-flex;align-items:center;gap:8px;margin-right:10px;padding-right:10px;border-right:1px solid #e8eefc}
.prefix img{width:22px;height:14px;border-radius:2px}
.prefix .code{font-weight:700;color:#1b2a57}
.btn-primary{background:var(--primary);color:#fff;border:0;border-radius:12px;padding:12px 14px;font-weight:800;box-shadow:0 6px 14px rgba(31,79,182,.18)}
.btn-primary:hover{background:var(--primary-600)}
.w-full{width:100%}
.divider{display:flex;align-items:center;gap:8px;color:#9aa6bf;font-size:12px;margin:2px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#edf1fb}
.otp-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:6px;
  width:100%;
  max-width:100%;
}
.otp{
  border:1px solid #dbe4f7;border-radius:10px;padding:12px 0;text-align:center;font-size:18px;font-weight:700;
  min-width:0; /* allow shrinking inside grid cells */
}
.auth-card{overflow:hidden}

/* Make OTP boxes fit on very small screens */
@media (max-width: 360px){
  .otp-grid{gap:6px}
  .otp{padding:10px 0;font-size:16px}
}
.link-resend{align-self:flex-end;margin-top:6px;background:none;border:0;color:var(--primary);font-weight:700}

/* Profile page */
.profile{padding:16px 18px 32px}
.profile-hero{
  position:relative;
  background:linear-gradient(180deg,#eef3ff 0%, #f7f9ff 100%);
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
  overflow:hidden;
  min-height:140px;
}
.profile-hero h1{margin:6px 0 6px;font-size:26px;line-height:1.2;color:var(--navy);font-family:Poppins, Inter, sans-serif;font-weight:800}
.profile-hero p{margin:0;color:#4b5a7a}
.profile-art{position:absolute; right:6px; bottom:0; width:48%; max-width:210px; pointer-events:none; user-select:none}
.profile-art img{position:absolute; right:0; bottom:0; width:100%; height:auto; display:block}
.profile-bg{opacity:.55; width:160%; right:-20px}
.profile-fore{width:80%; right:0}

.form-card{
  border:1px solid #e9eef8;border-radius:14px;padding:14px;background:#fff;box-shadow:0 6px 18px rgba(17,27,71,.05);
  display:flex;flex-direction:column;gap:14px;
}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;color:#3d4b6b;font-weight:800}
.text-input{
  border:1px solid #dbe4f7;border-radius:10px;padding:12px 12px;background:#fff;font-size:15px;outline:none
}
.select-wrap{position:relative}
.select{
  appearance:none; border:1px solid #dbe4f7;border-radius:10px;padding:12px 40px 12px 12px;background:#fff;font-size:15px;outline:none;width:100%;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.text-area{
  border:1px solid #dbe4f7;border-radius:10px;padding:12px;background:#fff;font-size:15px;outline:none;resize:vertical;min-height:84px
}
.btn-success{background:#2bb673;color:#fff;border:0;border-radius:12px;padding:12px 14px;font-weight:800;box-shadow:0 6px 14px rgba(43,182,115,.18)}
.btn-success:hover{filter:brightness(.96)}
.stepper{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.stepper-input{border:1px solid #dbe4f7;border-radius:10px;padding:12px;text-align:center;font-size:16px;width:100%}
.stepper-btn{width:40px;height:40px;border-radius:10px;border:1px solid #dbe4f7;background:#f5f8ff;font-size:22px;line-height:1}

/* Jobs list */
.jobs{padding:16px 18px 76px}
.jobs-hero{position:relative;background:linear-gradient(180deg,#eef3ff 0%, #f7f9ff 100%);border-radius:14px;padding:18px;margin-bottom:12px;overflow:hidden}
.jobs-hero h1{margin:6px 0;font-size:24px;line-height:1.2;color:var(--navy);font-family:Poppins, Inter, sans-serif;font-weight:800}
.jobs-hero p{margin:0;color:#4b5a7a}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px;align-items:center}
.tab{appearance:none;border:1px solid #dfe6fb;background:#f6f8ff;color:#1a2a57;border-radius:999px;padding:8px 12px;font-weight:700;flex:0 1 auto;white-space:nowrap}
.tab.active{background:#e8eeff;border-color:#cfd9ff}
.tab.ghost{background:#fff}
.job-list{display:flex;flex-direction:column;gap:10px}
.job-card{border:1px solid #e8eef8;border-radius:12px;padding:12px;background:#fff;box-shadow:0 6px 14px rgba(17,27,71,.05)}
.job-card h3{margin:2px 0 6px;font-size:16px;color:#142a63}
.job-meta{display:flex;flex-direction:column;gap:4px;color:#4a5b7a;font-size:13px}
.job-meta .price{color:#168f4f;font-weight:800}
.job-meta .price small{font-weight:600;color:#6a7aa0}
.job-meta .loc{position:relative;padding-left:18px}
.job-meta .loc::before{content:"📍";position:absolute;left:0;top:-2px}
.job-actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.btn-outline{border:1px solid #dbe4f7;background:#f5f8ff;color:#1a2a57;border-radius:10px;padding:8px 12px;font-weight:700}
.btn-outline, .btn-outline:hover, .btn-outline:visited, .btn-call, .btn-primary, .btn-primary:hover, .btn-primary:visited{ text-decoration:none }
.time{font-size:12px;color:#6a7aa0}
.time.dot{position:relative;padding-left:16px}
.time.dot::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#17c964}

.bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:420px;
  background:#fff;
  border-top:1px solid #eef2f9;
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  z-index:90;
}
.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#1a2a57;text-decoration:none;font-size:12px;font-weight:700}
.bottom-nav .nav-item.active{color:var(--primary)}

/* Workers list (customer) */
.workers{padding:16px 18px 76px}
.workers-hero{background:linear-gradient(180deg,#eef3ff 0%, #f7f9ff 100%);border-radius:14px;padding:18px;margin-bottom:12px}
.workers-hero h1{margin:6px 0;font-size:24px;line-height:1.2;color:var(--navy);font-family:Poppins, Inter, sans-serif;font-weight:800}
.workers-hero p{margin:0;color:#4b5a7a}
.workers-sub{color:#6a7aa0;font-size:12px;margin:0 2px 8px}
.worker-list{display:flex;flex-direction:column;gap:10px}
.worker-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid #e8eef8;border-radius:14px;padding:14px;background:#fff;box-shadow:0 6px 14px rgba(17,27,71,.05)}
.worker-av{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#eef3ff;box-shadow:0 2px 8px rgba(17,27,71,.08)}
.worker-info{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.worker-name{font-weight:800;color:#142a63;font-size:15px;line-height:1.3}
.worker-role{font-size:15px;color:#1f4fb6;font-weight:800;line-height:1.3;text-transform:capitalize}
.worker-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#607099}
.worker-meta .meta-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worker-subskills{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.skill-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;color:#2543a2;background:#eef4ff;border:1px solid #d4e2ff;padding:2px 7px;border-radius:5px;white-space:nowrap;flex-shrink:0}
.stars{color:#ffb400}
.btn-outline.small{padding:8px 10px}
.btn-call{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#ffc107 0%,#ff9800 50%,#f57c00 100%);
  color:#3e2723;font-weight:800;
  border:none;border-radius:999px;
  padding:8px 14px;font-size:13px;
  box-shadow:0 3px 8px rgba(245,124,0,.35);
  text-decoration:none
}
.btn-call:hover{background:linear-gradient(135deg,#ffb300 0%,#fb8c00 50%,#ef6c00 100%);box-shadow:0 4px 12px rgba(245,124,0,.4)}
.btn-call:visited{color:#3e2723}
.btn-call svg{flex-shrink:0}
/* Emphasized wage on worker card */
.worker-wage{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:96px
}
.worker-wage .amount{
  font-size:18px;font-weight:900;color:#168f4f;line-height:1
}
.worker-wage .unit{
  font-size:11px;color:#607099
}
.worker-more{grid-column:1 / -1;margin-top:6px;color:#506089;font-size:12px}
.hidden{display:none}

/* Feature list */
.features{
  padding:16px 18px 8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.feature{
  display:flex;
  gap:12px;
}
.icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 38px;
  background:#eef2ff;
  color:var(--primary);
}
.icon svg{width:20px;height:20px}
.feature h3{
  margin:2px 0 4px;
  font-size:16px;
  color:var(--navy);
}
.feature p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

/* Promo */
.promo{
  margin:18px;
  background:var(--note);
  border:2px solid #ffdf8e;
  border-radius:12px;
  padding:14px;
}
.promo h4{
  margin:0 0 6px;
  color:#6b4700;
  font-size:18px;
  font-weight:800;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:.2px;
}
.promo p{
  margin:0 0 12px;
  color:var(--note-ink);
  font-size:13px;
}
.cta-secondary{
  display:block;
  text-align:center;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:12px 16px;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(255,140,42,.25);
}
.cta-secondary:hover{background:var(--accent-700)}

/* Testimonial */
.testimonial{
  padding:2px 18px 32px;
}
.card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}
.who{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#d7e3ff,#b1c7ff);
  display:grid;place-items:center;
  color:#27408b;font-weight:700;
}
.who .name{
  font-weight:700;color:var(--navy)
}
.chips{
  display:flex;gap:6px;margin-top:2px;flex-wrap:wrap
}
.chip{
  font-size:11px;
  background:var(--chip);
  color:var(--primary-600);
  border:1px solid #dfE6ff;
  padding:4px 8px;border-radius:999px
}
.stars{color:#ffb400;font-size:14px;margin-left:auto}
.who-row{display:flex;align-items:center;gap:10px}
.card p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5}

/* Small screens fine-tuning */
@media (max-width:360px){
  .hero h1{font-size:28px}
}