:root{
  --primary-color:#05326d;
  --highlight-color:#00a46a;
  --light-blue:#c3dcfc;
  --card-bg:#e9f2fe;
  --card-shadow:0 4px 16px rgba(0,0,0,0.05);
  --card-radius:16px;
  --text-color:rgba(0,0,0,0.8);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Lato',sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:1.4;
  text-wrap:balance;
  text-align:center;
  color:var(--text-color);
  background-color:#fff;
  scroll-behavior:smooth;
}

h1{ font-size:48px; }
h2{ font-size:36px; }
a{ color:inherit; text-decoration:none; }

/* Accessibility & utilities */
.skip-link{
  position:absolute; top:-3rem; left:1rem;
  background:#000; color:#fff; padding:.5rem 1rem; z-index:1000;
  transition:top .3s ease-in-out; text-decoration:none;
}
.skip-link:focus{ top:1rem; }

.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* Header & nav */
.main-header{
  display:flex; justify-content:space-between; align-items:baseline;
  min-height:80px; padding:1rem 2rem;
  background-color:var(--primary-color);
  border-bottom:2px solid var(--highlight-color);
  position:sticky; top:0; z-index:999;
}

.logo img{ height:36px; width:auto; display:block; }

/* Desktop nav */
.main-nav ul{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.main-nav a{
  color:#fff; font-weight:500; position:relative; display:inline-block;
}
.main-nav a::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background-color:#fff; transition:width .3s ease;
}
.main-nav a:hover::after, .main-nav a:focus::after{ width:100%; }

/* Hamburger */
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:.5rem; z-index:1000; }
.hamburger-icon{ width:30px; height:22px; display:flex; flex-direction:column; justify-content:space-between; }
.hamburger-icon span{ display:block; width:100%; height:3px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s; }

.nav-toggle.is-open .hamburger-icon span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.nav-toggle.is-open .hamburger-icon span:nth-child(2){ opacity:0; }
.nav-toggle.is-open .hamburger-icon span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

/* Focus */
.nav-toggle:focus-visible, .main-nav a:focus-visible, .skip-link:focus-visible, .logo a:focus-visible{
  outline:3px solid var(--primary-color); outline-offset:3px; border-radius:2px;
}
.nav-toggle:focus, .main-nav a:focus, .skip-link:focus, .logo a:focus{ outline:none; }

section{ width:100%; }
.container{ max-width:1200px; margin:0 auto; padding:0 3rem; }
section h1{ font-weight:800; line-height:1.1; }
section h2{ font-weight:600; }
section p{ line-height:1.6; }

/* Intro */
#intro{ padding:2rem 0; background:linear-gradient(to bottom,#e9f2fe,var(--light-blue)); color:var(--primary-color); }
#intro p{ padding:0; font-size:21px; }

/* Why HTML */
#why{ text-align:center; background:#fff; }
#why h2{ padding-top:3rem; margin-top:0; color:var(--primary-color); }
.card-container{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:2rem; justify-content:center; }
.why-card{
  width:400px; background:var(--card-bg); color:var(--text-color);
  padding:2rem 1rem; box-shadow:var(--card-shadow); border-radius:var(--card-radius);
}
.why-card .icon{ display:flex; justify-content:center; align-items:center; }
.why-card .icon img{ height:96px; width:auto; }

/* Compare */
#compare h2{ color:var(--primary-color); padding-top:8rem; margin:0; }
.compare-images{ padding:2rem 0; display:flex; flex-flow:row wrap; justify-content:center; gap:2rem; }
.compare-images figure{ display:flex; flex-direction:column; align-items:center; }
.compare-images img{ width:320px; }
.compare-images figcaption{ margin-top:.5rem; font-size:1.5rem; font-weight:700; color:var(--primary-color); margin-bottom:.5rem; }

/* Stats */
#stats{ background:var(--light-blue); }
.stat-cards-container{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; padding:3rem 0; }
.stat-card{ background:#fff; box-shadow:var(--card-shadow); border-radius:var(--card-radius); padding:2rem; width:300px; }
.stat-card .percentage{
  width:128px; height:128px; font-size:3rem; font-weight:800; color:#fff;
  background:var(--primary-color); display:flex; align-items:center; justify-content:center; border-radius:50%; margin:0 auto 1rem;
}

/* Quote */
#quote{ background:#fff; padding:2rem 0; color:var(--primary-color); }
#quote p{ max-width:800px; margin:0 auto 1rem; color:var(--text-color); }

/* Contact */
#contact{ background:var(--primary-color); color:#fff; padding:2rem 0; }
.contact-card{
  background:#fff; width:100%; max-width:680px; margin:0 auto; color:var(--primary-color);
  border-radius:var(--card-radius); padding:2rem;
}
.contact-phone, .contact-email, .contact-location{ display:flex; align-items:center; gap:1rem; text-align:left; }
.contact-card img{ width:32px; padding:0; }
.contact-card p{ margin:0; color:var(--text-color); padding:1rem 0; }

/* Responsive */
@media (max-width:950px){
  .nav-toggle{ display:block; align-self:flex-end; }
  .main-header{ align-items:baseline; }
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    border-bottom:2px var(--highlight-color) solid; padding:1rem 2rem;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav ul{ flex-direction:column; gap:.5rem; align-items:flex-start; }
  .main-nav a{ padding:.5rem 0; color:var(--primary-color); width:100%; }
  .main-nav a::after{ content:none; }
}

@media (max-width:768px){
  body,section,p,h2{ text-align:center; }
  #why .card-container{ flex-direction:column; align-items:center; }
  .why-card{ max-width:100%; }
  .contact-card p{ text-align:left; }
  #stats{ flex-direction:column; align-items:center; }
}

@media (max-width:400px){
  body{ overflow-wrap:break-word; word-break:break-word; }
  .logo img{ max-width:100%; }
  .container{ padding:0 1rem; }
  .compare-images img{ padding:0; width:100%; height:auto; }
}