:root {
  --navy:#102d4a;
  --deep:#081e32;
  --teal:#008f87;
  --cyan:#55d9d0;
  --text:#26384a;
  --muted:#607589;
  --light:#eef5f7;
  --white:#ffffff;
  --border:#d9e5eb;
  --shadow:0 8px 30px rgba(15,45,70,.07);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,
              "Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.65;
}

a { color:var(--teal); }
a:hover { color:var(--navy); }
img { max-width:100%; }

.container {
  width:min(1160px,calc(100% - 40px));
  margin-inline:auto;
}

.skip-link {
  position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:100;
}
.skip-link:focus { top:0; }

.site-header {
  background:white;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:88px;
}

.brand img {
  width:205px;
  display:block;
}

.nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:17px;
}

.nav a {
  color:var(--navy);
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  padding:8px 0;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color:var(--teal);
}

.nav-toggle {
  display:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  background:white;
  color:var(--navy);
  font:inherit;
  cursor:pointer;
}

.hero {
  padding:92px 0;
  color:white;
  background:
    radial-gradient(circle at 88% 18%,
      rgba(34,207,188,.28),transparent 37%),
    linear-gradient(125deg,#081e32,#16456a);
}

.hero h1 {
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.13;
  max-width:880px;
  margin:10px 0 24px;
  letter-spacing:-.035em;
}

.hero p {
  font-size:1.19rem;
  max-width:760px;
  color:#deedf3;
}

.eyebrow {
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.15em;
  font-weight:800;
  color:var(--teal);
}
.hero .eyebrow { color:var(--cyan); }

.button {
  display:inline-block;
  padding:12px 22px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  background:var(--teal);
  color:white;
  margin:12px 10px 0 0;
}
.button:hover {
  color:white;
  background:#006d69;
}
.button.secondary {
  color:white;
  background:transparent;
  border:1px solid #a1d7dc;
}

.page-intro {
  background:var(--light);
  padding:56px 0;
  border-bottom:1px solid var(--border);
}

.page-intro h1 {
  color:var(--navy);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.2;
  margin:8px 0 15px;
}

.page-intro p {
  max-width:850px;
  font-size:1.12rem;
}

.section { padding:65px 0; }
.section.alt { background:#f5f9fa; }

h2 {
  color:var(--navy);
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.25;
}

h3 {
  color:var(--navy);
  line-height:1.3;
}

.lead {
  font-size:1.15rem;
  max-width:850px;
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px;
  margin-top:28px;
}

.grid.two {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.card {
  padding:28px;
  border:1px solid var(--border);
  border-radius:14px;
  background:white;
  box-shadow:var(--shadow);
}

.card h3 { margin-top:0; }
.card p { color:var(--muted); }

.card-link {
  font-weight:700;
  text-decoration:none;
}

.callout {
  border-left:5px solid var(--teal);
  background:var(--light);
  padding:22px 27px;
  margin:28px 0;
  border-radius:0 10px 10px 0;
}

.callout h3 { margin-top:0; }

.feature-list {
  padding-left:1.5rem;
  max-width:940px;
}

.feature-list li { margin-bottom:12px; }

.label-chip {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  background:#eaf9f7;
  color:var(--navy);
  font-weight:800;
}

.label-dot {
  background:var(--teal);
  width:13px;
  height:13px;
  border-radius:50%;
}

.code-example {
  background:var(--deep);
  color:#e9f5f6;
  padding:24px;
  border-radius:12px;
  overflow-x:auto;
  font-size:.9rem;
  line-height:1.5;
}

.principles {
  counter-reset:principle;
}

.principle {
  display:flex;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--border);
}

.principle:before {
  counter-increment:principle;
  content:counter(principle);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--navy);
  color:white;
  font-weight:800;
}

.principle h3 { margin:0 0 7px; }
.principle p { margin:0; }

.site-footer {
  background:var(--deep);
  color:#c4d7e4;
  padding:43px 0;
  margin-top:45px;
}

.site-footer a { color:#8de3df; }

.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:30px;
  flex-wrap:wrap;
}

.footer-inner p { margin:7px 0; }

@media(max-width:900px) {
  .header-inner {
    flex-wrap:wrap;
    padding:12px 0;
  }

  .nav-toggle { display:block; }

  .nav {
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-bottom:12px;
  }

  .nav.open { display:flex; }

  .nav a {
    padding:12px 4px;
    border-bottom:1px solid var(--border);
  }

  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:620px) {
  .container {
    width:min(100% - 28px,1160px);
  }

  .brand img { width:175px; }

  .hero { padding:65px 0; }
  .page-intro { padding:40px 0; }
  .section { padding:42px 0; }

  .grid,.grid.two {
    grid-template-columns:1fr;
  }

  .card { padding:23px; }
}