/* Mavinarflow public website styles */
:root {
  --brand: #396ea3;
  --brand-dark: #2b5580;
  --brand-deeper: #1e3d5c;
  --teal: #26a69a;
  --ink: #1d2b3a;
  --muted: #5b6b7c;
  --line: #e3eaf1;
  --bg-soft: #f4f8fb;
  --positive: #21ba45;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(30, 61, 92, 0.12);
  --header-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Icons ----------
   Feather Icons — MIT licence — https://github.com/feathericons/feather
   (https://feathericons.com). Inlined as SVG so there are no external
   requests; presentation lives here so every icon keeps the same 2px
   stroke weight and inherits its colour from `currentColor`. */
.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.nav-links a:hover { color: var(--brand); text-decoration: none; }
.nav-links .btn-primary, .nav-links .btn-primary:hover { color: #fff; }

/* Mobile menu trigger — hidden until JS marks the document, so that with
   JavaScript off the nav simply wraps instead of hiding behind a dead button. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer;
}
.nav-toggle .ico { width: 24px; height: 24px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.nav-backdrop { display: none; }
body.nav-open { overflow: hidden; }

/* ---------- Google Play badge ----------
   Official badge asset, used unmodified. The supplied PNG is 646x250 with the
   564x168 badge artwork centred inside 41px of transparent padding — that
   padding IS Google's required clear space (one quarter of the badge height),
   so the image must never be cropped or restyled. The extra margin below only
   guarantees the clear space is not encroached on by neighbouring elements. */
.badge-google-play { display: inline-block; margin: 0 4px 4px 0; }
.badge-google-play:hover { text-decoration: none; }
.badge-google-play img { width: 196px; height: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(57, 110, 163, 0.35); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-light { background: #fff; color: var(--brand-deeper); }
.btn-outline-light { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
.nav .btn { padding: 8px 18px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--brand-deeper) 0%, var(--brand) 55%, #4d84ba 100%);
  color: #fff;
  overflow: hidden;
}
.hero .container {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px;
  align-items: center; padding-top: 72px; padding-bottom: 88px;
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.15; letter-spacing: -0.02em; }
.hero p.lead { margin: 20px 0 32px; font-size: 1.15rem; color: rgba(255, 255, 255, 0.88); max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { margin-top: 18px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.eyebrow {
  display: inline-block; margin-bottom: 16px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- Phone mockups (dummy data) ---------- */
.phone {
  width: 290px; margin: 0 auto;
  background: #10202f; border-radius: 38px; padding: 12px;
  box-shadow: 0 25px 60px rgba(10, 25, 40, 0.45);
}
.phone-screen {
  background: #fff; border-radius: 28px; overflow: hidden;
  height: 560px; display: flex; flex-direction: column;
  font-size: 0.78rem;
}
.phone-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 4px; font-size: 0.68rem; color: #8fa2b3;
}
.phone-statusbar .status-icons { display: flex; align-items: center; gap: 6px; }
.phone-statusbar .ico { width: 13px; height: 13px; }
.phone-appbar .ico { width: 16px; height: 16px; }
.chip .ico { width: 11px; height: 11px; vertical-align: -1px; }
.phone-appbar {
  background: var(--brand); color: #fff;
  padding: 10px 14px; font-weight: 600; font-size: 0.85rem;
  display: flex; align-items: center; gap: 8px;
}
.phone-body { flex: 1; overflow: hidden; background: var(--bg-soft); padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.task-card {
  background: #fff; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(30, 61, 92, 0.08);
}
.task-card .task-title { font-weight: 600; color: var(--ink); }
.task-card .task-meta { color: var(--muted); font-size: 0.7rem; margin-top: 2px; }
.chip {
  display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: 0.65rem; font-weight: 600;
}
.chip-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 5px; vertical-align: 1px;
}
.chip-pending { background: #fff3d6; color: #a87900; }
.chip-done { background: #ddf5e3; color: #167a33; }
.chip-live { background: #e3f0fb; color: var(--brand-dark); }

/* chat mockup */
.bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; line-height: 1.4; }
.bubble-them { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: 0 2px 5px rgba(30,61,92,0.08); align-self: flex-start; }
.bubble-me { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble-photo {
  align-self: flex-end; width: 62%; height: 90px; border-radius: 14px; border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, #b9cfe2 0%, #8fb0cc 45%, #6d94b8 100%);
  position: relative;
}
.bubble-photo .photo-label {
  position: absolute; bottom: 6px; left: 10px;
  display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 0.62rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.bubble-photo .ico { width: 11px; height: 11px; }
.chat-time { font-size: 0.6rem; color: #9fb0c0; align-self: center; }
.chat-input {
  margin-top: auto; background: #fff; border-radius: 999px;
  padding: 8px 14px; color: #9fb0c0; box-shadow: 0 2px 6px rgba(30,61,92,0.08);
}

/* map mockup */
.map-mock {
  flex: 1; border-radius: 10px; position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 48%, #d8e4ee 48%, #d8e4ee 52%, transparent 52%),
    linear-gradient(0deg, transparent 30%, #d8e4ee 30%, #d8e4ee 33%, transparent 33%),
    linear-gradient(35deg, transparent 60%, #cfdfeb 60%, #cfdfeb 63%, transparent 63%),
    linear-gradient(0deg, #eaf2f8, #eef5fa);
}
.map-pin {
  position: absolute; top: 42%; left: 55%; width: 18px; height: 18px;
  background: var(--brand); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(57, 110, 163, 0.25), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.map-banner {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: #fff; border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(30, 61, 92, 0.18);
}
.map-banner strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.72rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px rgba(33, 186, 69, 0.25); }
.map-banner span { color: var(--muted); font-size: 0.65rem; }

/* requests mockup */
.req-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-mini {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600;
}
.btn-mini-accept { background: var(--brand); color: #fff; }
.btn-mini-decline { border: 1px solid var(--line); color: var(--muted); background: #fff; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section.alt { background: var(--bg-soft); }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 52px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.01em; }
.section-head p { margin-top: 12px; color: var(--muted); font-size: 1.05rem; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #e7eff7; color: var(--brand); margin-bottom: 16px;
}
.feature-card .icon .ico { width: 22px; height: 22px; vertical-align: 0; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 0.93rem; }

.screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
.screen-item { text-align: center; }
.screen-item h3 { margin-top: 22px; font-size: 1.05rem; }
.screen-item p { color: var(--muted); font-size: 0.9rem; max-width: 20rem; margin: 6px auto 0; }
.dummy-note { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 36px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700; margin-bottom: 16px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.93rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--brand-deeper), var(--brand));
  color: #fff; text-align: center; padding: 80px 24px;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { margin: 14px auto 30px; max-width: 32rem; color: rgba(255, 255, 255, 0.85); }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: #10202f; color: #9fb0c0; padding: 44px 0; font-size: 0.88rem; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.footer-brand img { width: 26px; height: 26px; border-radius: 6px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: #9fb0c0; }
.footer-links a:hover { color: #fff; }

/* ---------- Privacy page ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 64px 24px 96px; }
.legal h1 { font-size: 2rem; margin-bottom: 6px; }
.legal .updated { color: var(--muted); margin-bottom: 36px; }
.legal h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.legal p, .legal li { color: #37485a; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal li { margin: 6px 0; }
.callout {
  background: #eef4fa; border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 18px 0;
}
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.92rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { background: var(--bg-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; padding-top: 56px; padding-bottom: 64px; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .feature-grid, .screens-grid, .steps { grid-template-columns: 1fr; }
  .screens-grid { gap: 48px; }

  /* No JavaScript: keep every link reachable by letting the nav wrap. */
  html:not(.js) .nav { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  html:not(.js) .nav-links { flex-wrap: wrap; gap: 12px 18px; justify-content: flex-start; }

  /* With JavaScript: a real disclosure menu behind the hamburger. */
  .js .nav-toggle { display: inline-flex; }
  .js .nav-links {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    padding: 4px 24px 22px;
    background: #fff; border-bottom: 1px solid var(--line);
    visibility: hidden;
    z-index: 49;
  }
  .js .nav-links.is-open { visibility: visible; }
  .js .nav-links a:not(.btn) {
    padding: 15px 2px; font-size: 1rem; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .js .nav-links .btn { margin-top: 18px; align-self: stretch; padding: 13px 22px; font-size: 0.98rem; }
  .js .nav-backdrop {
    display: block; position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: rgba(16, 32, 47, 0.35);
    z-index: 48;
  }
  .js .nav-backdrop[hidden] { display: none; }
}

/* Very narrow phones: keep the badge inside the viewport. */
@media (max-width: 380px) {
  .badge-google-play img { width: 100%; max-width: 196px; }
}