:root{
  --pp-primary:#046FAA;
  --pp-primary-2:#0B7FBD;
  --pp-light:#62A4CB;
  --pp-ink:#0b1b2a;
  --pp-muted:#5b6b79;
  --pp-bg:#f6fbff;
  --pp-card:#ffffff;
  --pp-border: rgba(4,111,170,.15);
}

html{scroll-behavior:smooth;}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  color: var(--pp-ink);
  
  background: linear-gradient(180deg, #ffffff 0%, var(--pp-bg) 60%, #ffffff 100%);
}

.navbar{
  background: var(--pp-primary);
  /* background: var(--pp-bg); */
}
.navbar .nav-link, .navbar .navbar-brand{ color:#fff !important; }
.navbar .nav-link{ opacity:.9; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ opacity:1; }
.navbar .dropdown-menu{ border:1px solid var(--pp-border); }
.brand-lockup img{ height: 52px; width:auto; }

.btn-pp{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--pp-primary-2);
  --bs-btn-border-color: var(--pp-primary-2);
  --bs-btn-hover-bg: #096da3;
  --bs-btn-hover-border-color:#096da3;
  --bs-btn-focus-shadow-rgb: 9,109,163;
  --bs-btn-active-bg:#075c89;
  --bs-btn-active-border-color:#075c89;
}
.btn-outline-pp{
  --bs-btn-color:#fff !important;
  --bs-btn-border-color: rgba(255,255,255,.75);
  --bs-btn-hover-bg: rgba(255,255,255,.12);
  --bs-btn-hover-border-color: rgba(255,255,255,.95);
  --bs-btn-hover-color:#fff;
  --bs-btn-active-bg: rgba(255,255,255,.18);
  --bs-btn-active-border-color: rgba(255,255,255,.95);
}

.hero{
  min-height: 100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 600px at 20% 10%, rgba(98,164,203,.35) 0%, rgba(98,164,203,0) 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(4,111,170,.25) 0%, rgba(4,111,170,0) 60%),
    linear-gradient(135deg, var(--pp-primary) 0%, #043b63 55%, #022946 100%);
  color:#fff;
}
.hero:before{
  content:"";
  position:absolute; inset:0;
  background-image:url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=2000&q=70");
  background-size:cover;
  background-position:center;
  opacity:.16;
  filter: saturate(1.1) contrast(1.05);
}
.hero .container{ position:relative; z-index:2; }
.hero-card{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius: 1.25rem;
}
.kpi{
  border:1px solid rgba(255,255,255,.16);
  border-radius:1rem;
  padding:1rem;
  background: rgba(255,255,255,.06);
}
.section{
  padding: 5rem 0;
}
.section-title{
  font-weight:800;
  letter-spacing:-.02em;
}
.lead-muted{ color: rgba(255,255,255,.82); }

.card{
  border:1px solid var(--pp-border);
  border-radius: 1.25rem;
  box-shadow: 0 14px 40px rgba(2,25,45,.06);
}
.card-icon{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(4,111,170,.12);
  border:1px solid rgba(4,111,170,.18);
  color: var(--pp-primary);
}
.badge-soft{
  background: rgba(4,111,170,.12);
  border:1px solid rgba(4,111,170,.18);
  color: var(--pp-primary);
}
.bg-soft{
  background: linear-gradient(180deg, rgba(98,164,203,.14) 0%, rgba(98,164,203,.06) 100%);
  border-top:1px solid rgba(4,111,170,.10);
  border-bottom:1px solid rgba(4,111,170,.10);
}

.pricing .price{
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing:-.02em;
}
.pricing .card.featured{
  border:2px solid rgba(4,111,170,.35);
  box-shadow: 0 18px 60px rgba(4,111,170,.12);
}
.pricing small{ color: var(--pp-muted); }

.gallery-img{
  border-radius: 1.25rem;
  border:1px solid var(--pp-border);
  box-shadow: 0 14px 40px rgba(2,25,45,.08);
}

.footer{
  background: #031f34;
  color: rgba(255,255,255,.85);
}
.footer a{ color: rgba(255,255,255,.85); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }

.form-control, .form-select{
  border-radius: 1rem;
  border:1px solid var(--pp-border);
}
.accordion-item{
  border:1px solid var(--pp-border);
  border-radius: 1rem !important;
  overflow:hidden;
}
.accordion-button:not(.collapsed){
  color: var(--pp-primary);
  background: rgba(98,164,203,.12);
}
hr.soft{
  opacity:1;
  border:0;
  height:1px;
  background: linear-gradient(90deg, rgba(4,111,170,0) 0%, rgba(4,111,170,.22) 50%, rgba(4,111,170,0) 100%);
}