:root{
  --primary:#0a2c4a;
  --accent:#059668;
  --violet:#6d28d9;
  --text:#0b1220;
  --muted:#556276;
  --bg:#ffffff;
  --surface:#f6f8fb;
  --surface2:#edf3f8;
  --border:#dbe4ef;
  --shadow: 0 18px 44px rgba(10,44,74,.10);
  --radius:16px;
  --container:1320px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.container{max-width:var(--container); margin:0 auto; padding:0 22px}
.section{padding:72px 0}
.section.tight{padding:56px 0}
.surface{background:var(--surface)}
.surface2{background:var(--surface2)}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.navwrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand img{height:64px; width:auto}
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  font-size:14px;
  font-weight:650;
  letter-spacing:.2px;
  color:rgba(10,44,74,.86);
  padding:10px 10px;
  border-radius:12px;
}
.nav a.active{background:rgba(10,44,74,.08);}
.nav a.cta{background:var(--primary); color:white; padding:10px 14px; box-shadow:var(--shadow)}
.nav a.cta:hover{text-decoration:none; opacity:.96}

.mobileToggle{display:none; border:1px solid var(--border); background:white; border-radius:12px; padding:10px 12px; font-weight:700; color:var(--primary)}
.mobileMenu{display:none; padding:0 0 14px 0}
.mobileMenu a{display:block; padding:10px 12px; border-radius:12px}
.mobileMenu a.cta{text-align:center}

@media (max-width: 920px){
  .nav{display:none}
  .mobileToggle{display:inline-flex}
  .mobileMenu.open{display:block}
}

.h1{font-size:44px; line-height:1.12; letter-spacing:-.5px; margin:0 0 14px 0; color:var(--primary)}
.h2{font-size:30px; line-height:1.2; letter-spacing:-.4px; margin:0 0 10px 0; color:var(--primary)}
.h3{font-size:18px; line-height:1.3; margin:0 0 8px 0; color:var(--primary)}
.p{margin:0 0 14px 0; color:rgba(11,18,32,.88)}
.small{font-size:13px; color:var(--muted)}

.grid2{display:grid; grid-template-columns:1.2fr .8fr; gap:26px}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width: 920px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

.card{
  background:white;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow: 0 10px 26px rgba(10,44,74,.06);
  padding:18px 18px;
}
.card.soft{background:rgba(255,255,255,.88)}
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(10,44,74,.62); font-weight:750; margin:0 0 10px 0}
.hr{height:1px; background:var(--border); border:0; margin:18px 0}

.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-size:12px; font-weight:700; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:white; color:rgba(10,44,74,.82)}
.badge.ok{border-color:rgba(5,150,104,.25); background:rgba(5,150,104,.06); color:rgba(5,150,104,.98)}
.badge.note{border-color:rgba(109,40,217,.22); background:rgba(109,40,217,.06); color:rgba(109,40,217,.95)}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  font-weight:750;
  font-size:14px;
  letter-spacing:.2px;
  background:white;
  color:rgba(10,44,74,.92);
  cursor:pointer;
}
.btn.primary{background:var(--primary); border-color:var(--primary); color:white; box-shadow:var(--shadow)}
.btn.primary:hover{text-decoration:none; opacity:.96}
.btn:hover{text-decoration:none; background:rgba(10,44,74,.04)}

.footer{
  border-top:1px solid var(--border);
  padding:28px 0 42px 0;
  background:white;
}
.footergrid{display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:start}
.footer a{font-weight:650}
.footerlinks{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
@media (max-width: 920px){
  .footergrid{grid-template-columns:1fr}
  .footerlinks{justify-content:flex-start}
}

/* Slider */
.heroSlider{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg, rgba(10,44,74,.06), rgba(5,150,104,.03), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
.sliderTrack{position:relative; overflow:hidden}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 1.4s ease;
  pointer-events:none;
}
.slide.active{
  opacity:1;
  pointer-events:auto;
}
.sliderViewport{position:relative; min-height:700px}
.slideInner{min-height:700px; display:flex; align-items:center}
.slideBg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(109,40,217,.10), transparent 60%),
    radial-gradient(700px 380px at 80% 35%, rgba(5,150,104,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 75%, rgba(10,44,74,.10), transparent 60%);
  pointer-events:none;
}
.slideContent{position:relative; z-index:2}
.heroLead{font-size:18px; color:rgba(11,18,32,.84); margin:0 0 18px 0; max-width:56ch}
.heroNote{font-size:13px; color:rgba(85,98,118,.92); max-width:66ch}
.sliderDots{display:flex; gap:8px; padding:14px 0 18px 0}
.dot{width:10px; height:10px; border-radius:999px; border:1px solid rgba(10,44,74,.35); background:white; cursor:pointer}
.dot.active{background:rgba(10,44,74,.82)}

/* Tables */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:white}
.table th, .table td{text-align:left; padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.table th{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:rgba(10,44,74,.72); background:rgba(10,44,74,.03)}
.table tr:last-child td{border-bottom:0}

/* Forms */
.input, .select, .textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  font-size:14px;
  outline:none;
}
.textarea{min-height:120px; resize:vertical}
.label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:rgba(10,44,74,.72); margin:14px 0 8px 0; font-weight:800}
.helper{font-size:13px; color:var(--muted); margin-top:8px}

.notice{
  border:1px solid rgba(10,44,74,.16);
  background:rgba(10,44,74,.04);
  padding:14px 14px;
  border-radius:18px;
  color:rgba(11,18,32,.88);
}
.notice strong{color:rgba(10,44,74,.96)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  color:rgba(10,44,74,.86);
  background:white;
}
.pill.pending{border-color:rgba(109,40,217,.22); background:rgba(109,40,217,.06)}
.pill.approved{border-color:rgba(5,150,104,.22); background:rgba(5,150,104,.06)}
.pill.hidden{border-color:rgba(85,98,118,.22); background:rgba(85,98,118,.06)}


/* Hero typography (premium, bolder emphasis on slider headlines) */
.heroTitle{font-size:clamp(52px, 6.2vw, 104px); line-height:1.02; letter-spacing:-1.2px; margin:0 0 14px 0; color:var(--primary)}
.heroTitle.sm{font-size:clamp(44px, 5.2vw, 86px)}
.heroLead{font-size:22px; color:rgba(11,18,32,.84); margin:0 0 18px 0; max-width:82ch}

@media (max-width: 920px){
  .sliderViewport{min-height:620px}
  .slideInner{min-height:620px}
  .heroLead{font-size:18px}
}

@media (max-width: 520px){
  .sliderViewport{min-height:560px}
  .slideInner{min-height:560px}
  .heroLead{font-size:16px}
}


/* Chat */
.chatLauncher{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
}
.chatBtn{
  border:1px solid rgba(10,44,74,.22);
  background:var(--primary);
  color:white;
  border-radius:999px;
  padding:12px 14px;
  font-weight:850;
  letter-spacing:.2px;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.chatBtn:hover{opacity:.96}

.chatModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1300;
}
.chatModal.open{display:block}
.chatBackdrop{
  position:absolute;
  inset:0;
  background:rgba(11,18,32,.44);
}
.chatWindow{
  position:absolute;
  right:18px;
  bottom:18px;
  width:min(460px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  background:white;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow: 0 22px 60px rgba(10,44,74,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chatHeader{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chatTitle{
  font-weight:900;
  color:var(--primary);
  letter-spacing:-.2px;
}
.chatSub{
  font-size:12px;
  color:rgba(85,98,118,.92);
  margin-top:2px;
}
.chatClose{
  border:1px solid var(--border);
  background:white;
  border-radius:12px;
  padding:10px 12px;
  font-weight:850;
  color:rgba(10,44,74,.92);
  cursor:pointer;
}
.chatBody{
  padding:12px 12px;
  overflow:auto;
  background:rgba(246,248,251,.7);
}
.chatMsg{
  display:flex;
  margin:10px 0;
}
.chatMsg.me{justify-content:flex-end}
.chatBubble{
  max-width: 86%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(10,44,74,.14);
  background:white;
  color:rgba(11,18,32,.90);
  font-size:14px;
}
.chatMsg.me .chatBubble{
  background:rgba(10,44,74,.08);
  border-color:rgba(10,44,74,.16);
}
.chatInputRow{
  padding:12px 12px;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  background:white;
}
.chatInput{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
.chatFineprint{
  padding:10px 12px 14px 12px;
  font-size:12px;
  color:rgba(85,98,118,.95);
  background:white;
  border-top:1px solid var(--border);
}

/* StaffAi modal */
.modal{position:fixed;inset:0;z-index:9999;}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.modalCard{position:relative;max-width:720px;margin:8vh auto;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(10,44,74,.12);}
.modalHeader h3{margin:0;font-size:18px;color:rgba(10,44,74,1);}
.modalClose{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:rgba(10,44,74,.65);}
.modalBody{padding:18px 20px;}
.card{display:block;padding:18px;border:1px solid rgba(10,44,74,.12);border-radius:16px;text-decoration:none;color:inherit;background:#fff;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px;}
.videoWrap{border-radius:16px;overflow:hidden;border:1px solid rgba(10,44,74,.12);}
video{width:100%;height:auto;display:block;}

/* Chat enhancements */
.chatTyping{display:flex;gap:6px;align-items:center;padding:10px}
.chatTyping .dot{width:6px;height:6px;border-radius:999px;background:rgba(10,44,74,.6);display:inline-block;animation:staffaiPulse 1.2s infinite ease-in-out}
.chatTyping .dot:nth-child(2){animation-delay:.15s}
.chatTyping .dot:nth-child(3){animation-delay:.3s}
@keyframes staffaiPulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}


/* StaffAi patches */
.cta.ctaGreen{background:rgba(5,150,104,1); border-color:rgba(5,150,104,1);}
.cta.ctaGreen:hover{opacity:.96}

.videoFrame{max-width:920px; margin:0 auto;}

.dashwrap{max-width:1100px;}