/* =========================
   RESET + BOX MODEL
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

:root{
  /* Brand */
  --brand:#0b2f4a;     /* navy */
  --brand2:#1e78b4;    /* light blue */

  /* Dark site */
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.62);

  --border:rgba(255,255,255,.14);
  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.04);

  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;

  /* Header (light) */
  --header-bg: rgba(255,255,255,.96);
  --header-border: #e5e7eb;
  --header-text: #334155; /* slate-700 */
}

body{
  margin:0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x:hidden;
  background:#0b1f3a; /* fallback */
}

/* =========================
   GLOBAL BLUE DOTTED BACKGROUND
   ========================= */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1px),
    radial-gradient(900px 600px at 18% 0%, rgba(56,189,248,.33), transparent 60%),
    radial-gradient(800px 600px at 82% 12%, rgba(34,211,238,.26), transparent 60%),
    linear-gradient(180deg, #0b1f3a 0%, #071a30 100%);
  background-size: 28px 28px, auto, auto, auto;
}

/* =========================
   BASE ELEMENTS + LAYOUT
   ========================= */
a{ color:inherit; text-decoration:none; }
.container{ max-width:1120px; margin:0 auto; padding:0 18px; }

.grid{ display:grid; gap:18px; }
.grid > * { min-width: 0; } /* critical for overflow fixes */

@media(min-width:900px){
  .grid-2{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width:900px) and (max-width:1100px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .grid-3{ grid-template-columns: 1fr; }
}

.h1{ font-size:44px; line-height:1.05; letter-spacing:-.02em; margin:14px 0 10px; }
.p{ color: var(--muted); font-size:18px; line-height:1.6; max-width:58ch; }
.small{ font-size:13px; color: var(--muted2); }
.hr{ border-top:1px solid rgba(255,255,255,.10); }
.section{ padding:56px 0; }

/* =========================
   TOPBAR + HEADER
   ========================= */
.topbar{
  background: var(--brand);
  color:#eaf2f8;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.header{
  position: sticky;
  top:0;
  z-index:50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--header-border);
}

.logo{ height:40px; width:auto; display:block; }

/* =========================
   NAV MENU (SPACING)
   ========================= */
.nav{
  display:flex;
  align-items:center;
  gap:36px;
}

.nav a{
  font-size:18px;
  font-weight:500;
  color: var(--header-text);
  letter-spacing:.2px;
  position:relative;
  white-space: nowrap;
}

.nav a:hover{ color: var(--brand2); }

.nav a.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background: var(--brand2);
  border-radius:2px;
}

/* =========================
   UI COMPONENTS (DARK)
   ========================= */
.pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.78rem;
}

.card{
  background: var(--surface);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

.card-lite{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}

/* Optional: true white panel when needed */
.card.is-white{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e5e7eb !important;
  box-shadow: 0 18px 60px rgba(2,6,23,.16) !important;
}
.card.is-white .small,
.card.is-white p{ color:#475569 !important; }

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  border-radius:14px;
  font-weight:700;
  transition:.2s ease;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

.btn-primary{
  background: linear-gradient(135deg, #22d3ee, #60a5fa);
  border:none;
  color:#071021;
  font-weight:800;
}

.btn-primary:hover{ filter: brightness(1.05); }

/* =========================
   FORMS (LOCK DARK GLASS)
   ========================= */
.input, .select, .textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  display:block;

  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);

  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;

  outline:none;
  box-shadow:none;
}

.input::placeholder, .textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(125,211,252,.75);
  box-shadow: 0 0 0 4px rgba(125,211,252,.15);
}

/* dropdown arrow + option colors */
.select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.select option{
  background:#0b1f3a;
  color:#ffffff;
}

.form-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:640px){
  .form-grid-2{ grid-template-columns: 1fr; }
}

/* =========================
   PAGE HELPERS (MATCH HMS LOOK)
   ========================= */
.page-wrap{ padding:56px 0 60px; } /* only vertical */
.page-hero{ padding:44px 18px 14px; }
.page-body{ padding:14px 18px 56px; }

.page-hero h1{
  margin:14px 0 8px;
  font-size:40px;
  letter-spacing:-.02em;
}
.page-hero p{
  max-width:75ch;
  line-height:1.65;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.footer a{ color:#7dd3fc; }
.footer a:hover{ text-decoration: underline; }
/* ========= Header layout helpers ========= */
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 18px;
  font-size:13px;
  gap:12px;
}
.topbar-text{ opacity:.92; }
.topbar-link{
  text-decoration:underline;
  text-underline-offset:4px;
  color:#eaf2f8;
  white-space:nowrap;
}

/* Header inner row */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  gap:12px;
}

/* Desktop-only blocks */
.nav-desktop{ display:flex; }
.header-actions{ display:flex; gap:10px; align-items:center; }
.header-actions-desktop{ display:flex; }

/* Mobile menu button */
.menu-btn{
  display:none;
  border:1px solid var(--header-border);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
  line-height:0;
}
.menu-bar{
  display:block;
  width:22px;
  height:2px;
  background: var(--header-text);
  margin:5px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-btn.is-open .menu-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open .menu-bar:nth-child(2){ opacity:0; }
.menu-btn.is-open .menu-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.mobile-nav{
  border-top:1px solid var(--header-border);
  background: var(--header-bg);
}
.mobile-nav-inner{
  padding:12px 18px 16px;
  display:grid;
  gap:10px;
}
.mobile-nav a{
  color: var(--header-text);
  font-weight:600;
  padding:10px 10px;
  border-radius:12px;
}
.mobile-nav a:hover{
  background: rgba(2,6,23,.06);
  color: var(--brand2);
}
.mobile-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Prevent page scroll when menu open */
.no-scroll{ overflow:hidden; }

/* Responsive switch */
@media (max-width: 899px){
  .nav-desktop{ display:none !important; }
  .header-actions-desktop{ display:none !important; }
  .menu-btn{ display:inline-block; }
}

/* Make topbar not break on small screens */
@media (max-width: 560px){
  .topbar-inner{ flex-direction:column; align-items:flex-start; }
}