*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #1A1A2E; background: #FFFFFF; min-height: 100vh; line-height: 1.6;
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; font-family: inherit; }

    :root {
      --navy: #0D1B2A;
      --navy-mid: #1B2838;
      --gold: #C8963E;
      --gold-light: #D4A84E;
      --white: #FFFFFF;
      --light-text: #E0E7EE;
      --muted: #94A3B8;
      --dim: #64748B;
      --font-headline: 'DM Serif Display', Georgia, serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
      --transition: all 0.3s ease;
      --glass-bg: rgba(255,255,255,0.04);
      --glass-border: rgba(255,255,255,0.08);
      --container: 900px;
    }

    /* NAV */
    .nav {
      background: rgba(13,27,42,0.95); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0 24px; position: sticky; top: 0; z-index: 100;
    }
    .nav-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between; height: 64px;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 700; font-size: 0.95rem; color: var(--white);
    }
    .logo-gold { color: var(--gold); }
    .nav-links { display: flex; align-items: center; gap: 24px; }
    .nav-links a {
      color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 500;
      transition: color 0.2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--gold); }
    .nav-cta {
      background: var(--gold); color: var(--white); padding: 8px 20px;
      border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    }
    .nav-cta:hover { background: var(--gold-light); }

    .hamburger { display: none; flex-direction: column; gap: 4px; background: none; padding: 4px; }
    .hamburger span { width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 98; }
    .mobile-overlay.show { display: block; }
    .mobile-menu {
      position: fixed; top: 0; right: -280px; width: 260px; height: 100vh;
      background: var(--navy); z-index: 99; padding: 72px 24px 24px;
      transition: right 0.3s ease;
    }
    .mobile-menu.open { right: 0; }
    .mobile-nav-link {
      display: block; padding: 12px 0; color: rgba(255,255,255,0.7);
      border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.95rem;
    }
    .mobile-nav-link:hover { color: var(--gold); }

    /* CONTAINER */
    .container { max-width: var(--container); margin: 0 auto; padding: 32px 24px; }

    /* SEARCH FORM */
    .search-section { text-align: center; padding: 40px 0 20px; }
    .search-section h1 {
      font-family: var(--font-headline); font-size: 2rem; color: #1A1A2E; margin-bottom: 8px;
    }
    .search-section h1 .gold { color: var(--gold); }
    .search-section p { color: #6B7280; font-size: 1rem; margin-bottom: 24px; }
    .search-form {
      display: flex; gap: 12px; max-width: 500px; margin: 0 auto;
    }
    .search-form input {
      flex: 1; padding: 12px 16px; background: #F5F5F5;
      border: 1px solid #E5E7EB; border-radius: 8px;
      color: #1A1A2E; font-size: 0.95rem; font-family: var(--font-body);
    }
    .search-form input::placeholder { color: #9CA3AF; }
    .search-form input:focus { outline: none; border-color: var(--gold); }
    .search-form button {
      padding: 12px 24px; background: var(--gold); color: var(--white);
      border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: var(--transition);
    }
    .search-form button:hover { background: var(--gold-light); }

    /* STATES */
    .loading-state { text-align: center; padding: 80px 20px; color: #6B7280; font-size: 1rem; }
    .loading-state .dot-loader { display: inline-flex; gap: 4px; margin-top: 12px; }
    .loading-state .dot {
      width: 8px; height: 8px; background: var(--gold); border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out both;
    }
    .loading-state .dot:nth-child(2) { animation-delay: 0.16s; }
    .loading-state .dot:nth-child(3) { animation-delay: 0.32s; }
    @keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }

    .error-state { text-align: center; padding: 80px 20px; }
    .error-state h2 { color: #ef4444; font-family: var(--font-headline); margin-bottom: 12px; }
    .error-state p { color: #6B7280; }

    .empty-state { text-align: center; padding: 60px 20px; color: #6B7280; display: none; }
    .empty-state .icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }

    /* STATUS CARD */
    .status-card {
      background: #FFFFFF; border: 1px solid #E5E7EB;
      border-radius: 12px; padding: 28px; margin-bottom: 24px;
    }
    .ref-number { font-size: 0.8rem; color: var(--gold); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 4px; text-transform: uppercase; }
    .route-line { font-size: 1.5rem; font-weight: 700; color: #1A1A2E; margin-bottom: 16px; font-family: var(--font-headline); }
    .route-line .arrow { color: var(--gold); margin: 0 10px; }
    .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
    .info-item label {
      display: block; font-size: 0.7rem; color: var(--dim); text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 4px;
    }
    .info-item span { font-size: 0.95rem; color: #1A1A2E; font-weight: 500; }

    /* PROGRESS */
    .progress-section { margin-bottom: 24px; }
    .progress-bar-container {
      display: flex; align-items: center; justify-content: space-between;
      position: relative; padding: 0 20px; margin: 32px 0 16px;
    }
    .progress-line {
      position: absolute; top: 16px; left: 40px; right: 40px;
      height: 3px; background: #E5E7EB; border-radius: 2px;
    }
    .progress-fill {
      height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light));
      border-radius: 2px; transition: width 0.8s ease;
    }
    .progress-step { position: relative; z-index: 2; text-align: center; flex: 1; }
    .step-dot {
      width: 32px; height: 32px; border-radius: 50%;
      background: #F5F5F5; border: 3px solid #E5E7EB;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 8px; font-size: 0.8rem; color: var(--muted);
      transition: all 0.3s;
    }
    .step-dot.completed { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 700; }
    .step-dot.active { background: #FFFFFF; border-color: var(--gold); color: var(--gold); animation: pulse 2s infinite; }
    .step-label { font-size: 0.7rem; color: var(--dim); }
    .step-label.completed { color: var(--gold); }
    .step-label.active { color: var(--gold); font-weight: 600; }
    @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,150,62,0.4); } 50% { box-shadow: 0 0 0 8px rgba(200,150,62,0); } }

    /* LOCATION & ETA */
    .location-eta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
    .loc-card, .eta-card {
      background: #FFFFFF; border: 1px solid #E5E7EB;
      border-radius: 10px; padding: 20px;
    }
    .loc-card h3, .eta-card h3 {
      font-size: 0.7rem; color: var(--dim); text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 10px;
    }
    .loc-value { font-size: 1.15rem; color: #1A1A2E; font-weight: 600; }
    .loc-time { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

    /* TIMELINE */
    .timeline-section { margin-bottom: 24px; }
    .timeline-section h3 {
      font-size: 0.8rem; color: var(--muted); text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 16px;
    }
    .timeline { position: relative; padding-left: 28px; }
    .timeline::before {
      content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px;
      width: 2px; background: #E5E7EB;
    }
    .timeline-item { position: relative; padding-bottom: 20px; }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-dot {
      position: absolute; left: -24px; top: 4px;
      width: 12px; height: 12px; border-radius: 50%;
      background: #E5E7EB;
    }
    .timeline-dot.completed { background: var(--gold); }
    .timeline-item .tl-label { font-size: 0.9rem; color: #1A1A2E; font-weight: 500; }
    .timeline-item .tl-sub { font-size: 0.75rem; color: var(--dim); margin-top: 2px; }

    /* CONTACT */
    .contact-section {
      background: rgba(200,150,62,0.06); border: 1px solid rgba(200,150,62,0.15);
      border-radius: 10px; padding: 24px; text-align: center; margin-top: 12px;
    }
    .contact-section h3 { color: var(--gold); font-size: 0.9rem; margin-bottom: 8px; }
    .contact-section p { color: var(--muted); font-size: 0.85rem; }
    .contact-section a { color: var(--gold); font-weight: 600; }

    /* FOOTER */
    .footer {
      text-align: center; padding: 32px 24px; color: var(--dim);
      font-size: 0.75rem; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 40px;
      background: var(--navy);
    }
    .footer a { color: var(--gold); }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .location-eta { grid-template-columns: 1fr; }
      .route-line { font-size: 1.2rem; }
      .progress-bar-container { padding: 0 8px; }
      .step-label { font-size: 0.6rem; }
      .search-form { flex-direction: column; }
    }