:root {
  --night: #06182d;
  --night-deep: #030b18;
  --sky: #0f7cff;
  --sky-bright: #58a7ff;
  --moon: #dceeff;
  --surface: #ffffff;
  --ink: #162033;
  --muted: #5e6b80;
  --line: #dce5ef;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 78% 8%, rgba(113, 178, 255, .22), transparent 26rem),
    linear-gradient(145deg, var(--night-deep), var(--night) 58%, #0a2a4b);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  width: min(860px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 42px 48px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .28);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -22px -42px 64px;
  padding: 24px 42px;
  color: var(--moon);
  background:
    radial-gradient(circle at 15% 120%, rgba(17, 124, 255, .46), transparent 18rem),
    linear-gradient(115deg, #06172b, #123a62);
  border-bottom: 3px solid var(--sky);
}

.brand {
  color: #fff;
  font-weight: 780;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand::before {
  margin-right: .45rem;
  content: "🦉";
  font-size: 1.15em;
}

nav { display: flex; gap: 20px; }

nav a {
  color: var(--moon);
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
}

nav a:hover,
nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

a { color: #075ed0; font-weight: 650; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: #176de0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 4px #e7f1ff;
  content: "";
}

h1 {
  max-width: 680px;
  margin: 14px 0 20px;
  color: var(--ink);
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  letter-spacing: -.06em;
  line-height: 1.02;
}

h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}

.lede {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: 1.16rem;
}

.card {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  padding: 30px;
  background: #f7faff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(11, 42, 77, .08);
}

.card::before {
  position: absolute;
  top: -54px;
  right: -46px;
  width: 148px;
  height: 148px;
  border: 22px solid rgba(88, 167, 255, .12);
  border-radius: 50%;
  content: "";
}

.card p { position: relative; margin: 0; }

footer {
  margin-top: 82px;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 520px) {
  main { width: min(100% - 24px, 860px); padding: 18px 24px 38px; }
  header { margin: -18px -24px 50px; padding: 20px 24px; }
  nav { gap: 14px; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.4rem); }
  .card { padding: 24px; }
}


.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand::before { display: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

.hero {
  position: relative;
  min-height: 270px;
  margin: -64px -42px 54px;
  padding: 152px 42px 30px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3, 11, 24, .78), rgba(3, 11, 24, .26)),
    url("/assets/forest-banner.jpg") center / cover no-repeat;
}
.hero::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 11, 24, .5), transparent 60%); content: ""; }
.hero-copy { position: relative; z-index: 1; max-width: 540px; }
.hero p { margin: 0; color: var(--moon); font-size: 1.05rem; }
.hero strong { display: block; margin-bottom: .2rem; font-size: 1.35rem; letter-spacing: -.02em; }

@media (max-width: 520px) {
  .brand-mark { width: 34px; height: 34px; }
  .hero { min-height: 230px; margin: -50px -24px 42px; padding: 124px 24px 24px; background-position: 54% center; }
}