:root{
    --blue-900:#003366;
    --blue-600:#005bb5;
    --cyan:#00b3ff;
    --gold:#d4af37;
    --yellow:#ffd24d;
    --muted:#6b7280;
    --card-radius:12px;
    --shadow-soft: 0 8px 30px rgba(2,6,23,0.06);
  }

  .btn-primary{
    background-color: var(--blue-900)!important;
    color: white;
    box-shadow: 0 6px 18px rgba(0,91,181,0.18);
    transition: all 0.25s ease;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,91,181,0.25);
  }
  .btn-danger{
    background-color: #F10505!important;
    color: white;
    box-shadow: 0 4px 14px rgba(241,5,5,0.18);
  }
  html,body{height:100%;margin:0;font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,#fbfdff 0%, #f0f6ff 100%);color:#17202a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

  /* --- Topbar (keeps same DOM) --- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 20px;
    background: linear-gradient(90deg,var(--blue-900), var(--blue-600));
    color:#fff;
    box-shadow: 0 8px 30px rgba(0,50,100,0.12);
    position:sticky; top:0; z-index:1200;
  }
  .brand { display:flex; align-items:center; gap:12px; }
  .brand img{ height:48px; width:auto; background:#fff; padding:6px; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  .brand h1{ font-size:1.03rem; margin:0; font-weight:700; letter-spacing:0.2px; color:#fff; }
  .brand p{ margin:0; font-size:.82rem; opacity:.95; color:rgba(255,255,255,0.9); }

  .top-actions { display:flex; gap:10px; align-items:center; }
  .btn {
    border: 1px solid rgba(255,255,255,0.14);
    padding:8px 14px;
    border-radius:999px;
    background: rgba(255,255,255,0.06);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition: all .18s ease;
    backdrop-filter: blur(6px);
  }
  .btn:hover{ transform:translateY(-3px); box-shadow: 0 12px 34px rgba(0,91,181,0.12); background: rgba(255,255,255,0.10); }

  /* --- Hero banner (uses assets/banner.jpg, 1640x560 recommended) --- */
  .hero-wrap{ max-width:1200px; margin:22px auto 8px; padding:0 18px; }
  .hero {
    border-radius: var(--card-radius);
    overflow:hidden;
    box-shadow: var(--shadow-soft);
    height:420px; /* moderate height as requested */
    position:relative;
    display:flex;
    align-items:center;
  }
  .hero .banner {
    position:absolute; inset:0;
    background-image: url('images/banner.png');
    background-size:cover;
    background-position:center;
    filter: saturate(1.02) contrast(1);
    transform: translateZ(0);
  }
  /* soft overlay for official tint (blue->gold) */
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,51,102,0.45) 0%, rgba(212,175,55,0.06) 60%);
    mix-blend-mode: overlay;
    pointer-events:none;
  }
  .hero-content {
    position:relative;
    z-index:;
    padding: 34px 42px;
    color:#fff;
    max-width:760px;
  }
  .hero h2 { margin:0 0 8px; font-size:2.05rem; line-height:1.05; color:var(--yellow); text-shadow:0 6px 20px rgba(0,0,0,0.45); }
  .hero p { margin:0 0 18px; color: rgba(255,255,255,0.95); font-size:1.02rem; max-width:680px; }
  .hero .ctas { display:flex; gap:12px; align-items:center; margin-top:8px; }
  .hero .primary { background: linear-gradient(90deg,var(--gold), var(--yellow)); color:var(--blue-900); padding:12px 18px; border-radius:10px; border:none; font-weight:700; box-shadow: 0 12px 40px rgba(212,175,55,0.16); cursor:pointer; }
  .hero .primary:hover{ transform:translateY(-3px); box-shadow: 0 20px 60px rgba(212,175,55,0.22); }
  .hero .ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.18); padding:10px 14px; border-radius:8px; }

  /* --- Main content area (keeps structure; new content added below hero) --- */
  .container { max-width:1100px; margin:26px auto 64px; padding: 0 18px; }
  .grid { display:grid; grid-template-columns: 1fr 340px; gap:20px; align-items:start; }
  .card { background:#fff; border-radius:12px; box-shadow: 0 8px 30px rgba(2,6,23,0.04); padding:18px; }
  .muted { color:var(--muted); }

  .how-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
  .how-cards .item { background: linear-gradient(180deg,#fff,#fbfdff); padding:14px; border-radius:10px; text-align:center; box-shadow: 0 8px 18px rgba(3,18,30,0.04); }
  .how-cards .item strong { display:block; margin-bottom:8px; color:var(--blue-900); }

  /* --- Right panel tweaks (status panel) --- */
  .status-panel { position:sticky; top:92px; }
  .status-panel .panel { background:linear-gradient(180deg,#fff,#fbfdff); padding:14px; border-radius:12px; box-shadow: 0 8px 30px rgba(3,18,30,0.04); }

  /* --- FAQ (keeps your selectors) --- */
  .faq .question { background:#fff; border-radius:10px; padding:12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; border:1px solid rgba(3,18,30,0.04); }
  .faq .answer { display:none; padding:12px; background: linear-gradient(180deg,#fbfbff,#f5f9ff); border-left:4px solid var(--blue-600); border-radius:8px; margin-bottom:12px; color:var(--muted); }

  .primary-btn {
  background: linear-gradient(90deg, #004d99, #00b3ff);
  color: white;
  border: none;
  padding: 0.9rem 2.2rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 91, 181, 0.3);
}
.primary-btn:hover {
  background: linear-gradient(90deg, #005bb5, #00d4ff);
  box-shadow: 0 10px 25px rgba(0, 140, 255, 0.35);
  transform: translateY(-2px);
}

/* ============ Floating Chat Icon ============ */
.chat-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, #004d99, #00b3ff);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0,179,255,0.5);
  animation: pulseGlow 3s infinite ease-in-out;
  transition: transform 0.3s ease;
  z-index: 2000;
}
.chat-float:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0,179,255,0.7);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(0,179,255,0.4); }
  50% { box-shadow: 0 0 25px rgba(0,179,255,0.8); }
}
.chat-float svg {
  width: 28px;
  height: 28px;
  fill: white;
}

/* ============ Clock ============ */
.clock {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.clock span { font-weight: 600; }
.clock #ampm { font-size: 0.75rem; color: #555; }

/* ============ Modals ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.modal-overlay.active {
  visibility: visible;
  opacity: 1;
}
.modal {
  background: white;
  border-radius: 1rem;
  width: 90%;
  max-width: 420px;
  padding: 1.8rem;
  position: relative;
  transform: translateY(-20px);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  z-index: 9999;
}
.modal.open { transform: translateY(0); }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #003366;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #A55E5E;
  cursor: pointer;
  transition: color 0.2s;
}
.close-btn:hover { color: #EB0707; }
.form-input {
  width: 90%;
  padding: 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid #ccc;
  margin: 0.5rem auto;
  outline: none;
  transition: all 0.3s;
}
.form-input:focus {
  border-color: #00b3ff;
  box-shadow: 0 0 8px rgba(0,179,255,0.25);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}
.secondary-btn {
  background: #f5f6f7;
  border: none;
  border-radius: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}
.secondary-btn:hover { background: #e3e4e6; }

.result-box {
  background: #f9fafb;
  border-radius: 0.7rem;
  padding: 1rem;
  margin-top: 1rem;
  animation: fadeIn 0.4s ease;
}
.status-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.85rem;
}
.status-approved { background: #d1fae5; color: #047857; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-rejected { background: #fee2e2; color: #b91c1c; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  /* small screens */
  @media (max-width:980px){
    .grid { grid-template-columns:1fr; }
    .hero { height:320px; }
    .hero-content{ padding:20px; }
    .how-cards { grid-template-columns:1fr; }
    .status-panel{ position:relative; top:auto; }
    .modal { max-width:92%; }
  }