:root {
  color-scheme: dark;
  --bg: #080b10;
  --panel: #10151d;
  --line: #26313e;
  --text: #f3f6fa;
  --muted: #aab5c3;
  --subtle: #778494;
  --cyan: #7fe1f0;
  --max: 1120px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: radial-gradient(ellipse at 78% 2%, rgb(48 80 132 / 15%), transparent 35rem), var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
a { color: var(--cyan); text-decoration-color: rgb(127 225 240 / 42%); text-underline-offset: 0.22em; }
a:hover { color: #c2f5fb; text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }
.skip-link {
  position: absolute; z-index: 5; top: 0.75rem; left: 0.75rem; padding: 0.65rem 0.9rem;
  transform: translateY(-160%); border-radius: 8px; background: var(--text); color: var(--bg);
}
.skip-link:focus { transform: translateY(0); }
.site-header, .site-footer, .container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.site-header {
  display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 2rem;
  border-bottom: 1px solid rgb(143 160 179 / 16%);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text); font-size: 0.9rem; font-weight: 750; letter-spacing: 0.18em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.primary-nav a, .footer-links a { color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.primary-nav a:hover, .footer-links a:hover { color: var(--text); }
.hero {
  display: grid; min-height: 620px; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: center; gap: clamp(2.5rem, 8vw, 7rem); padding-block: 6rem 5rem;
}
.eyebrow {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.25rem; color: var(--cyan);
  font-size: 0.72rem; font-weight: 750; letter-spacing: 0.17em; line-height: 1.5; text-transform: uppercase;
}
.eyebrow::before { width: 1.4rem; height: 1px; background: currentColor; content: ""; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); line-height: 1.12; text-wrap: balance; }
h1 { max-width: 790px; margin-bottom: 1.5rem; font-size: clamp(2.85rem, 7.4vw, 5.6rem); font-weight: 620; letter-spacing: -0.065em; }
h1 span { color: #aab7c8; }
.hero-lead { max-width: 680px; margin-bottom: 1rem; color: #d4dce5; font-size: clamp(1.12rem, 2vw, 1.38rem); line-height: 1.55; }
.hero-copy { max-width: 720px; }
.hero-description { max-width: 620px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0.65rem 1rem;
  border: 1px solid var(--cyan); border-radius: 8px; background: var(--cyan); color: #061014;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
}
.button:hover { border-color: #baf4fb; background: #baf4fb; color: #061014; }
.button-secondary { border-color: var(--line); background: transparent; color: var(--text); }
.button-secondary:hover { border-color: #526171; background: #141b25; color: var(--text); }
.private-note { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1.75rem; color: var(--subtle); font-size: 0.82rem; }
.private-note svg { width: 16px; height: 16px; flex: none; margin-top: 0.24rem; color: var(--cyan); }
.route-card {
  position: relative; padding: clamp(1.25rem, 3vw, 2rem); overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(145deg, rgb(24 34 47 / 88%), rgb(13 18 25 / 95%));
  box-shadow: 0 28px 70px rgb(0 0 0 / 23%);
}
.route-card::after {
  position: absolute; right: -3rem; bottom: -5rem; width: 12rem; height: 12rem;
  border: 1px solid rgb(127 225 240 / 14%); border-radius: 50%; content: "";
}
.route-card-label { margin-bottom: 1.35rem; color: var(--subtle); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.route-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0.9rem; padding-block: 0.95rem; }
.route-step + .route-step { border-top: 1px solid rgb(143 160 179 / 13%); }
.route-icon {
  display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #354354; border-radius: 11px;
  background: #111a25; color: var(--cyan); font-size: 0.74rem; font-weight: 750;
}
.route-step strong { display: block; color: var(--text); font-size: 0.94rem; line-height: 1.4; }
.route-step span { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); border-top: 1px solid rgb(143 160 179 / 14%); }
.section-heading {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(240px, 0.7fr); align-items: end;
  gap: 2rem; margin-bottom: 2.75rem;
}
.section-heading h2 { max-width: 660px; margin-bottom: 0; font-size: clamp(2rem, 4.6vw, 3.55rem); font-weight: 570; letter-spacing: -0.05em; }
.section-heading > p { max-width: 470px; margin-bottom: 0.15rem; color: var(--muted); }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: rgb(15 20 28 / 72%); }
.workflow-step { min-height: 210px; padding: 1.5rem; }
.workflow-step + .workflow-step { border-left: 1px solid var(--line); }
.step-number { display: block; margin-bottom: 2.25rem; color: var(--cyan); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.15em; }
.workflow-step h3 { margin-bottom: 0.55rem; font-size: 1rem; font-weight: 650; }
.workflow-step p { margin-bottom: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.section-note { margin: 1.25rem 0 0; color: var(--subtle); font-size: 0.84rem; }
.scope-panel {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr); gap: 2rem;
  padding: clamp(1.4rem, 4vw, 2.6rem); border: 1px solid #31404f; border-radius: var(--radius);
  background: linear-gradient(125deg, rgb(62 109 142 / 15%), transparent 55%), var(--panel);
}
.scope-code {
  display: inline-flex; align-items: center; padding: 0.45rem 0.7rem; border: 1px solid #3f5a69;
  border-radius: 7px; background: #0b141c; color: #b8eff7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; overflow-wrap: anywhere;
}
.scope-panel h3 { margin-block: 1rem 0.6rem; font-size: 1.25rem; font-weight: 620; }
.scope-panel p, .scope-panel li { color: var(--muted); font-size: 0.92rem; }
.scope-panel ul { margin: 0; padding-left: 1.15rem; }
.scope-panel li + li { margin-top: 0.35rem; }
.scope-caveat { padding-left: 1rem; border-left: 2px solid var(--cyan); }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.boundary-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.boundary-card h3 { margin-bottom: 0.65rem; font-size: 1.05rem; }
.boundary-card p { margin-bottom: 0; color: var(--muted); font-size: 0.9rem; }
.privacy-callout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #31404f; border-radius: var(--radius);
  background: linear-gradient(120deg, #111923, #0b1017);
}
.privacy-callout h2 { margin-bottom: 0.6rem; font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 600; letter-spacing: -0.04em; }
.privacy-callout p { max-width: 640px; margin-bottom: 0; color: var(--muted); }
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.65rem 2.25rem;
  border-top: 1px solid rgb(143 160 179 / 14%); color: var(--subtle); font-size: 0.8rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.document-main { max-width: 860px; padding-block: clamp(3rem, 8vw, 6rem) 7rem; }
.document-heading { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.document-heading h1 { max-width: 800px; margin-bottom: 1rem; font-size: clamp(2.5rem, 6vw, 4.2rem); }
.document-intro { max-width: 690px; color: #c4ced9; font-size: 1.15rem; }
.document-section { margin-top: 2.65rem; }
.document-section h2 { margin-bottom: 0.9rem; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.025em; }
.document-section h3 { margin-top: 1.4rem; margin-bottom: 0.5rem; font-size: 1.03rem; font-weight: 640; }
.document-section p, .document-section li { color: #c0cad5; font-size: 0.95rem; }
.document-section ul, .document-section ol { padding-left: 1.35rem; }
.document-section li + li { margin-top: 0.55rem; }
.document-section strong { color: var(--text); }
.inline-code { padding: 0.12rem 0.36rem; border: 1px solid #34414f; border-radius: 4px; background: #101720; color: #c1ecf4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; overflow-wrap: anywhere; }
.document-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 2rem; color: var(--muted); font-size: 0.88rem; }
.contact-box { padding: 1.15rem 1.25rem; border: 1px solid #645632; border-radius: 10px; background: rgb(77 60 22 / 15%); }
.contact-box p:last-child { margin-bottom: 0; }
.not-found { min-height: 60vh; display: grid; align-content: center; padding-block: 5rem; }
.not-found h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); }

@media (max-width: 800px) {
  .hero { min-height: unset; grid-template-columns: 1fr; gap: 3rem; padding-block: 4.5rem; }
  .route-card { max-width: 600px; }
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-step:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .workflow-step:nth-child(4) { border-top: 1px solid var(--line); }
  .scope-panel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-header, .site-footer, .container { width: min(100% - 32px, var(--max)); }
  .site-header { min-height: 70px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.65rem; padding-block: 0.8rem; }
  .brand { gap: 0.55rem; font-size: 0.82rem; }
  .brand-mark { width: 28px; height: 28px; }
  .primary-nav { width: 100%; justify-content: space-between; gap: 0.75rem; }
  .primary-nav a { font-size: 0.78rem; }
  .hero { padding-block: 3.5rem; }
  h1 { font-size: clamp(2.7rem, 13vw, 4.1rem); }
  .section { padding-block: 4.25rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.75rem; }
  .workflow { grid-template-columns: 1fr; }
  .workflow-step { min-height: unset; }
  .workflow-step + .workflow-step, .workflow-step:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .step-number { margin-bottom: 1rem; }
  .boundary-grid { grid-template-columns: 1fr; }
  .privacy-callout { grid-template-columns: 1fr; gap: 1.25rem; }
  .privacy-callout .button { width: 100%; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}