:root{
  --blue-900:#0a2a43;
  --blue-800:#0f3a5a;
  --blue-700:#134b74;
  --blue-600:#1d6fa5;
  --blue-500:#2b8fd1;
  --blue-400:#57a7dc;
  --blue-300:#86c0e7;
  --blue-200:#b8daf2;
  --blue-100:#e6f3fc;
  --accent:#00d1ff;
  --muted:#e6e7e9;
  --text:#0f172a;
}

html,body{height:100%}
body{font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;color:var(--text)}
h1,h2,h3,h4,h5,h6{font-family:Catamaran,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans;font-weight:800!important}
.rounded{border-radius:1rem!important}.rounded-pill{border-radius:5rem}
.btn-xl{text-transform:uppercase;padding:1.5rem 3rem;font-size:.9rem;font-weight:700;letter-spacing:.1rem}

header.masthead{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blue-600) 0%,var(--blue-800) 100%);background-repeat:no-repeat;background-position:center;background-size:cover}
header.masthead .masthead-picture{position:relative;overflow:hidden;padding-top:15rem;padding-bottom:10rem;background:linear-gradient(180deg,var(--blue-600) 0%,var(--blue-800) 100%),url("img/navandy_hero.jpg");background-repeat:no-repeat;background-position:bottom center;background-size:cover}
header.masthead .masthead-picture::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
header.masthead .masthead-content{position:relative;z-index:1}
header.masthead .masthead-content .masthead-heading{font-size:3rem}
header.masthead .masthead-content .masthead-subheading{font-size:1.5rem}
@media (min-width:992px){
  header.masthead .masthead-content .masthead-heading{font-size:5rem}
  header.masthead .masthead-content .masthead-subheading{font-size:3rem}
}

header.masthead .bg-circle{position:absolute;border-radius:100%;background:linear-gradient(0deg,var(--blue-500) 0%,var(--blue-700) 100%);opacity:.25}
header.masthead .bg-circle-1{height:90rem;width:90rem;bottom:-55rem;left:-55rem}
header.masthead .bg-circle-2{height:50rem;width:50rem;top:-25rem;right:-25rem}
header.masthead .bg-circle-3{height:20rem;width:20rem;bottom:-10rem;right:5%}
header.masthead .bg-circle-4{height:30rem;width:30rem;top:-5rem;right:35%}

.bg-primary{background-color:var(--blue-500)!important}
.btn-primary{background-color:var(--blue-500);border-color:var(--blue-500)}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:var(--blue-600)!important;border-color:var(--blue-600)!important}
.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,209,255,.35)}
.btn-secondary{background-color:var(--blue-800);border-color:var(--blue-800)}
.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background-color:var(--blue-700)!important;border-color:var(--blue-700)!important}
.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(19,75,116,.35)}

section{padding:2rem 0}
@media (min-width:992px){section{padding:3rem 0}}

.feature{background:#fff;padding:2rem 0 1.25rem}
@media (min-width:992px){.feature{padding:2.5rem 0 1.5rem}}
.feature .row{row-gap:1rem}
.feature h2{margin-bottom:.5rem}
.feature p.lead{margin-bottom:1rem}
.feature ul{font-size:1.25rem;font-weight:300}
.feature-icon{width:90px;height:90px;border-radius:50%;background:var(--muted);object-fit:contain;box-shadow:0 4px 12px rgba(0,0,0,.08);display:block;margin:0 auto}
@media (min-width:768px){.feature-icon{width:110px;height:110px}}
@media (min-width:1200px){.feature-icon{width:130px;height:130px}}

.section-intro p{max-width:600px;margin:0 auto}
#screenshots{padding-bottom:0}
#screenshots .section-intro{margin-bottom:1.25rem}
#screenshots img{display:block;margin:0 auto}
@media (max-width:576px){#screenshots img{max-width:80%}}

.signup-tight .masthead-padding{padding-top:5rem;padding-bottom:4rem;background:linear-gradient(90deg,var(--blue-700) 0%,var(--blue-900) 100%)}
#signup .logo-wrap{display:inline-block}
#signup .logo{max-width:220px}
@media (max-width:768px){#signup .logo{max-width:160px}}
@media (max-width:576px){#signup .logo{max-width:130px}}

footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
