@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --peu-bg:#0A1A2F;
  --peu-accent:#05E0FF;
  --peu-text:#FFFFFF;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background: var(--peu-bg);
  color: var(--peu-text);
}

/* Helpers (small, pragmatic utility layer on top of Bootstrap) */
.bg-peu { background: var(--peu-bg) !important; }
.text-peu-accent { color: var(--peu-accent) !important; }
.border-peu-accent-20 { border-color: rgba(5,224,255,.20) !important; }
.border-peu-accent-30 { border-color: rgba(5,224,255,.30) !important; }
.border-peu-accent-50 { border-color: rgba(5,224,255,.50) !important; }
.bg-white-5 { background: rgba(255,255,255,.05) !important; }
.bg-accent-10 { background: rgba(5,224,255,.10) !important; }
.text-white-60 { color: rgba(255,255,255,.60) !important; }
.text-white-70 { color: rgba(255,255,255,.70) !important; }
.text-white-80 { color: rgba(255,255,255,.80) !important; }
.shadow-accent { box-shadow: 0 1rem 2rem rgba(5,224,255,.15) !important; }

.btn-peu {
  --bs-btn-color: #0A1A2F;
  --bs-btn-bg: var(--peu-accent);
  --bs-btn-border-color: var(--peu-accent);
  --bs-btn-hover-color: #0A1A2F;
  --bs-btn-hover-bg: rgba(5,224,255,.9);
  --bs-btn-hover-border-color: rgba(5,224,255,.9);
  --bs-btn-focus-shadow-rgb: 5,224,255;
  font-weight: 600;
}

.btn-peu-outline {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,.10);
  --bs-btn-hover-border-color: rgba(255,255,255,.25);
}

.card-peu {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(5,224,255,.20);
  border-radius: .75rem;
}
.card-peu:hover{
  border-color: rgba(5,224,255,.50);
  box-shadow: 0 1rem 2rem rgba(5,224,255,.15);
}

/* Hero overlay gradient */
.hero-overlay{
  background: linear-gradient(90deg, rgba(10,26,47,1) 0%, rgba(10,26,47,.8) 55%, rgba(10,26,47,0) 100%);
}

/* Simple modal */
.peu-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1050;
}
.peu-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1051;
}
.peu-modal-dialog{
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  overflow: hidden;
  border-radius: .75rem;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A1A2F; }
::-webkit-scrollbar-thumb { background: #05E0FF; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #04c7e0; }


/* Navbar look closer to original Horizon */
.navbar .nav-link{
  color: rgba(255,255,255,.80) !important;
  padding: .75rem 1rem;
  position: relative;
}
.navbar .nav-link:hover{ color: #fff !important; }
.navbar .nav-link.active{
  color: var(--peu-accent) !important;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left: 1rem;
  right: 1rem;
  bottom: .25rem;
  height: 2px;
  background: var(--peu-accent);
  border-radius: 2px;
}