:root{
  --sd-black:#000000;
  --sd-blue:#0b3d91;
  --sd-blue-dark:#082c68;
  --sd-text:#1f2937;
  --sd-muted:#5b6470;
  --sd-white:#ffffff;
  --sd-soft:#f5f7fa;
  --sd-line:#e6e9ee;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Manrope',sans-serif;
  font-weight:400;
  color:var(--sd-text);
  background:var(--sd-white);
  line-height:1.7;
  font-size:1rem;
}

h1,h2,h3,h4{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--sd-text);
  margin-bottom:1rem;
}

h2{
  font-size:clamp(1.8rem,2.5vw,2.6rem);
}

p{
  margin-bottom:1.25rem;
}

ul{
  margin-bottom:1.5rem;
}

a{
  color:var(--sd-blue);
  text-decoration:none;
}

a:hover{
  color:var(--sd-blue-dark);
}

/* Header */
#header{
  background:var(--sd-black);
  padding:14px 0;
  box-shadow:0 1px 0 rgba(255,255,255,0.04);
}

#header .container{
  align-items:center;
}

#header .logo h1{
  margin:0;
  font-size:1.6rem;
  font-weight:700;
}

#header .logo a{
  color:var(--sd-white);
  text-decoration:none;
}

#header .logo-text p{
   margin:0;
  font-size:1.6rem;
  font-weight:700;
}


#header .navbar{
  background:transparent !important;
  padding:0;
}

#header .navbar-nav{
  gap:0.25rem;
}

#header .nav-link{
  color:rgba(255,255,255,0.88) !important;
  font-weight:500;
  padding:0.5rem 0.85rem !important;
}

#header .nav-link:hover,
#header .nav-link.active{
  color:var(--sd-white) !important;
}

#header .nav-link.active{
  text-decoration: underline;
  text-underline-offset: 8px;
}

/* Hero */
#hero{
  background:var(--sd-blue);
  color:var(--sd-white);
  padding:150px 0 105px;
}

#hero h1,
#hero p,
#hero li{
  color:var(--sd-white);
}

#hero h1{
  font-size:clamp(2.4rem,4vw,4.2rem);
  font-weight:800;
  max-width:900px;
  margin-bottom:1.25rem;
}

.hero-lead{
  font-size:1.2rem;
  font-weight:400;
  max-width:760px;
  margin-top:0;
  margin-bottom:1.75rem;
  opacity:0.96;
}

.hero-checklist{
  list-style:none;
  padding-left:0;
  margin:0 0 2rem 0;
  max-width:820px;
}

.hero-checklist li{
  margin-bottom:0.85rem;
  padding-left:0;
  font-size:1.05rem;
  line-height:1.7;
}

.hero-closing{
  font-size:1.15rem;
  margin-bottom:0.5rem;
}

#hero .btn{
  margin-top:0.75rem;
}

/* Sections */
section{
  padding:84px 0;
  scroll-margin-top:90px;
}


#control,
#how-we-work,
#experience{
  background:var(--sd-white);
}

#works-with,
#clarity{
  background:var(--sd-soft);
}

.features{
  border-top:1px solid var(--sd-line);
}

.features:first-of-type{
  border-top:none;
}

.content h2{
  margin-bottom:1rem;
}

.font-italic{
  color:var(--sd-muted);
  font-style:italic;
  font-size:1.05rem;
}

.content ul{
  padding-left:1.2rem;
}

.content ul li{
  margin-bottom:0.65rem;
}

.content strong{
  font-weight:700;
}

/* Buttons */
.btn{
  border-radius:999px;
  font-weight:600;
  padding:0.8rem 1.4rem;
  transition:all 0.2s ease;
}

.btn-primary{
  background:var(--sd-black);
  border-color:var(--sd-black);
  color:var(--sd-white);
}

.btn-primary:hover,
.btn-primary:focus{
  background:#1a1a1a;
  border-color:#1a1a1a;
  color:var(--sd-white);
}

#hero .btn-primary{
  background:var(--sd-white);
  border-color:var(--sd-white);
  color:var(--sd-blue);
}

#hero .btn-primary:hover,
#hero .btn-primary:focus{
  background:#eef3fb;
  border-color:#eef3fb;
  color:var(--sd-blue-dark);
}

.contact-action {
  display: inline-block;
  padding: 12px 18px;
  margin: 8px 12px 8px 0;
  min-height: 44px;
  line-height: 1.4;
  box-sizing: border-box;
  text-decoration: none;
}

/* Footer */
#footer{
  background:var(--sd-black);
  color:var(--sd-white);
  padding:60px 0 40px;
}

#footer h3,
#footer h4,
#footer p,
#footer li,
#footer a{
  color:var(--sd-white);
}

#footer h3{
  margin-bottom:1rem;
}

#footer a{
  text-decoration:none;
  opacity:.88;
}

#footer a:hover{
  opacity:1;
}

#footer .copyright{
  margin-top:1.5rem;
  font-size:0.95rem;
  opacity:0.8;
}

/* Responsive */
@media (max-width: 991.98px){
  #header{
    padding:10px 0;
  }

  #hero{
    padding:130px 0 90px;
  }

  #hero h1{
    font-size:clamp(2rem,8vw,3rem);
  }

  .hero-checklist li{
    font-size:1rem;
  }

  section{
    padding:68px 0;
  }
}

@media (max-width: 768px) {
  .contact-action {
    display: block;
    width: 100%;
    margin: 0 0 12px 0;
    box-sizing: border-box;
  }
}