/* Base */
* { box-sizing: border-box; }
:root {
  --brand: #1e3a8a;
  --gold: #fbbf24;
  --ink: #1f2937;
  --muted: #6b7280;
  --bg: #f3f4f6;
  --card: #ffffff;
}
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Header */
.site-header {
  background: #003366;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo {
  font-size: 2.2em;
  font-weight: 900;
  letter-spacing: 2px;
}
.nav a {
  font-weight: bold;
  font-size: 1.1em;
  color: #fff;
  text-decoration: none;
  margin-left: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: .9;
}
.nav a:hover, .nav a.active { background: rgba(255,255,255,.12); opacity: 1; }
.header-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* Footer */
.site-footer { background: var(--brand); color: #fff; margin-top: 48px; }
.site-footer .wrap { padding: 18px 0; text-align: center; font-size: 0.95rem; }

/* Buttons */
.btn { display: inline-block; padding: 12px 18px; border: 0; border-radius: 12px; background: var(--gold); color: #111; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .08s ease; }
.btn:active { transform: translateY(1px); }
.btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
.whatsapp-btn {
  background: #25d366;
}
.chat-btn {
  background: #ff9800;
}

/* HERO */
.hero {
  position: relative;
  height: 72vh;
  background: url('https://images.unsplash.com/photo-1581092795360-10fabc0f1d6a?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)); display: grid; place-items: center; }
.hero-content { width: min(760px, 92%); color: #fff; text-align: center; animation: fadeUp .7s ease both; }
.hero-content h2 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 42px); }
.hero-content p { opacity: .95; line-height: 1.6; }
.tracking-box {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.tracking-box input {
  width: min(320px, 100%);
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  outline: none;
  font-size: 1em;
}
.tracking-box .btn {
  padding: 12px 24px;
  font-size: 1em;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gallery strip */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 4%; background: #fff; }
.gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* Info / page sections */
.info { background: #fff; padding: 38px 0; line-height: 1.75; }
.page-hero { position: relative; height: 42vh; }
.page-hero.service-hero { background: url('https://images.unsplash.com/photo-1529078155058-5d716f45d604?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; }
.page-hero.help-hero { background: url('https://images.unsplash.com/photo-1581091215367-59ab6dcef1e0?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; }
.page-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); display: flex; align-items: end; }
.page-hero .wrap { color: #fff; padding-bottom: 26px; }
.page-hero h2 { margin: 0 0 6px; font-size: clamp(26px, 4.2vw, 40px); }
.page-hero p { margin: 0; opacity: .95; }

.page-wrap { padding: 34px 0 48px; }
.long-copy { background: #fff; padding: 26px; border-radius: 16px; box-shadow: 0 20px 40px rgba(2,6,23,.06); line-height: 1.8; }
.long-copy h3 { margin-top: 0; }
.wide-img { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; margin: 16px 0; }

/* Result page */
.banner { height: 36vh; background: url('https://images.unsplash.com/photo-1542228262-3d663b306a56?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; position: relative; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6)); display: flex; align-items: end; color: #fff; }
.banner .wrap { padding-bottom: 24px; }
.result-wrap { margin-top: -80px; }
.result-card { background: var(--card); border-radius: 18px; box-shadow: 0 30px 60px rgba(2,6,23,.10); padding: 22px; }
.result-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.label { font-size: .85rem; color: var(--muted); margin: 0; }
.value { font-size: 1.15rem; font-weight: 700; margin: 4px 0 0; }

/* Progress Bar */
.progress-track { height: 6px; background: #e5e7eb; border-radius: 999px; }
.progress-fill { height: 6px; background: var(--brand); border-radius: 999px; width: 0; box-shadow: 0 6px 16px rgba(30,58,138,.35); transition: width 1.1s ease; }
.progress-track { height: 6px; background: #e5e7eb; border-radius: 999px; }
.progress-fill { height: 6px; background: var(--brand); border-radius: 999px; width: 0; box-shadow: 0 6px 16px rgba(30,58,138,.35); transition: width 1.1s ease; }
.progress { margin: 28px 0 18px; position: relative; }
.progress-track { height: 6px; background: #e5e7eb; border-radius: 999px; }
.progress-fill { height: 6px; background: var(--brand); border-radius: 999px; width: 0; box-shadow: 0 6px 16px rgba(30,58,138,.35); transition: width 1.1s ease; }
.progress-steps { position: relative; display: flex; justify-content: space-between; margin-top: -14px; }
.dot { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #111; display: grid; place-items: center; font-size: .85rem; font-weight: 700; border: 2px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.08); transition: background .4s ease, color .4s ease, transform .2s ease; }
.dot.active { background: var(--brand); color: #fff; transform: scale(1.04); }
.progress-labels { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; font-size: .85rem; color: var(--muted); }

/* Timeline */
.timeline { margin-top: 22px; border-left: 3px solid #e5e7eb; padding-left: 16px; }
.tl-item { position: relative; margin: 16px 0; padding-left: 6px; }
.tl-item::before {
  content: ""; position: absolute; left: -10.5px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.tl-item.done::before { background: var(--brand); }
.tl-time { font-size: .84rem; color: var(--muted); margin: 0; }
.tl-title { margin: 2px 0 0; font-weight: 700; }
.tl-loc { margin: 0; color: var(--muted); }

/* Result copy */
.result-copy { margin-top: 16px; line-height: 1.75; color: #374151; }

/* Actions */
.actions { margin-top: 16px; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 860px) {
  .result-head { grid-template-columns: 1fr; }
  .progress-labels { font-size: .76rem; }
  .gallery img { height: 180px; }
}
@media (max-width: 600px) {
  .site-header .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .logo {
    font-size: 1.5em;
    margin-bottom: 8px;
  }
  .nav {
    display: none;
    flex-direction: column;
    background: #003366;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    z-index: 999;
    padding: 16px 0;
  }
  .nav.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    margin-left: auto;
    cursor: pointer;
  }
  .nav a {
    padding: 8px 0;
    font-size: 1em;
  }
  .gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 0;
  }
  .gallery figure {
    margin: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    left: 0;
    right: 0;
    transform: none;
  }
  .gallery img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
  }
}
.progress-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 1.1em;
  font-weight: 600;
}
.progress-info span {
  display: flex;
  align-items: center;
}
.progress-info svg {
  width: 22px;
  height: 22px;
  margin-left: 4px;
}