:root {
  --paper: #f5f7f8;
  --white: #fff;
  --graphite: #1e2a32;
  --muted: #56636b;
  --rule: #c9d1d5;
  --blue: #006b9b;
  --blue-soft: #e5f1f6;
  --teal: #167a67;
  --teal-soft: #e1f0eb;
  --amber: #b66a00;
  --panel: #141b20;
  --panel-surface: #1d272d;
  --panel-text: #e7edef;
  --panel-muted: #a9b6bc;
  --panel-rule: #35434b;
  --panel-blue: #69bee3;
  --panel-teal: #62c3a8;
  --mono: "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 16px/1.6 "DejaVu Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; }
a:focus-visible, summary:focus-visible { outline: 3px solid #68b7da; outline-offset: 3px; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.skip-link { position: fixed; left: 16px; top: 8px; z-index: 50; padding: 12px 16px; background: var(--white); color: var(--blue); border: 1px solid var(--blue); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.brand { flex: 0 1 180px; }
.brand img { width: 180px; }
.main-nav { display: none; gap: 32px; font-size: 14px; font-weight: 700; }
.main-nav a { padding-block: 12px; }
.main-nav a:hover { color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 32px; border: 1px solid var(--blue); border-radius: 4px; background: var(--blue); color: var(--white); font-size: 14px; font-weight: 700; text-align: center; transition: background-color .15s; }
.button:hover { background: #005a83; }
.header-contact { flex-shrink: 0; min-height: 44px; padding-inline: 16px; font-size: 13px; }
.desktop-label { display: none; }
.button-secondary { background: var(--white); color: var(--blue); }
.button-secondary:hover { background: var(--blue-soft); }
.hero { display: grid; gap: 48px; align-items: start; padding-block: 48px; }
.hero-copy, .system-diagram { min-width: 0; }
.eyebrow { margin-bottom: 16px; color: var(--blue); font: 700 13px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
h1 { margin-bottom: 24px; font-size: 36px; line-height: 1.1; letter-spacing: -.025em; }
.hero-description { max-width: 540px; margin-bottom: 48px; color: var(--muted); }
.hero-actions { display: flex; flex-direction: column; gap: 16px; }
.system-diagram { padding: 24px; border: 1px solid var(--panel-rule); border-radius: 8px; background: var(--panel); color: var(--panel-text); box-shadow: 0 12px 36px rgb(30 42 50 / 8%); }
.system-diagram figcaption { margin: -8px -8px 24px 0; color: var(--panel-muted); font: 10px/1.6 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .05em; }
.diagram-network { display: grid; gap: 32px; align-items: center; }
.control-plane { padding: 16px; border: 1px solid var(--panel-rule); border-radius: 4px; background: var(--panel-surface); text-align: center; }
.diagram-label { margin-bottom: 8px; color: var(--panel-blue); font: 11px/1.6 var(--mono); text-transform: uppercase; }
.control-title { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.control-note { color: var(--panel-muted); font-size: 12px; }
.diagram-connection { width: 2px; height: 40px; margin-inline: auto; border-left: 2px dashed var(--panel-rule); }
.diagram-connection span { display: none; }
.edge-nodes { display: grid; gap: 16px; padding: 0; list-style: none; }
.edge-nodes li { padding: 12px; border: 1px solid var(--panel-rule); border-left: 4px solid var(--panel-blue); background: var(--panel-surface); font-size: 13px; font-weight: 700; }
.edge-nodes li:nth-child(2) { border-left-color: var(--panel-teal); }
.edge-nodes li:nth-child(3) { border-left-color: var(--panel-muted); }
.device-stack { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--panel-rule); text-align: center; }
.stack-caption { margin-bottom: 16px; color: var(--panel-muted); font: 11px/1.6 var(--mono); text-transform: uppercase; }
.device-stack ol { display: grid; gap: 8px; max-width: 320px; margin-inline: auto; padding: 0; list-style: none; }
.device-stack li { padding: 10px; border: 1px solid var(--panel-rule); border-radius: 4px; background: var(--panel-surface); font-size: 12px; }
.device-stack li:first-child { border-color: rgb(105 190 227 / 30%); background: #203943; color: var(--panel-blue); font-weight: 700; }
.device-stack li:last-child { background: var(--panel); color: var(--panel-muted); }
.section-rule { height: 1px; background: var(--rule); }
.section { padding-block: 64px; }
h2 { margin-bottom: 48px; font-size: 28px; line-height: 1.6; }
.benefits { display: grid; gap: 24px; }
.benefit-card { padding: 32px; border: 1px solid var(--rule); border-radius: 8px; background: var(--white); }
.card-number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); font: 700 14px/1.6 var(--mono); }
.benefit-card:nth-child(2) .card-number { background: var(--teal-soft); color: var(--teal); }
.benefit-card:nth-child(3) .card-number { border: 1px solid #87939a; background: var(--paper); color: var(--muted); }
.benefit-card h3 { margin-bottom: 12px; font-size: 18px; }
.benefit-card p { color: var(--muted); font-size: 14px; }
.section-white { border-block: 1px solid var(--rule); background: var(--white); }
.with-intro { margin-bottom: 16px; }
.section-intro { max-width: 720px; margin-bottom: 48px; color: var(--muted); }
.principles { display: grid; gap: 24px; }
.principles article { padding-top: 16px; border-top: 3px solid var(--graphite); }
.principles article:nth-child(2) { border-top-color: var(--blue); }
.principles article:nth-child(3) { border-top-color: var(--teal); }
.principles article:nth-child(4) { border-top-color: var(--amber); }
.principles h3 { margin-bottom: 8px; font-size: 15px; }
.principles p { color: var(--muted); font-size: 13px; }
details > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-weight: 700; }
details > summary::-webkit-details-marker { display: none; }
.chevron { flex: 0 0 16px; color: var(--blue); text-align: center; }
details[open] > summary .chevron { transform: rotate(180deg); }
.scenarios { display: grid; gap: 16px; max-width: 800px; }
.scenarios details { border: 1px solid var(--rule); border-radius: 4px; background: var(--white); }
.scenarios details:first-child { border-left: 4px solid var(--blue); }
.scenarios summary { padding: 20px 24px; font-size: 18px; }
.scenario-content { padding: 0 24px 24px; color: var(--muted); font-size: 15px; }
.scenario-content .eyebrow { margin-bottom: 12px; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.scenario-content h3 { margin-bottom: 16px; color: var(--graphite); font-size: 24px; }
.scenario-content ul { margin-top: 16px; padding-left: 20px; color: var(--graphite); font-size: 14px; }
.scenario-content li + li { margin-top: 8px; }
.faq-container { max-width: 800px; }
.faq-container h2 { text-align: center; }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { padding-block: 20px; font-size: 16px; }
.faq summary:hover { color: var(--blue); }
.faq details > p { padding: 0 40px 20px 0; color: var(--muted); font-size: 15px; }
.contact { text-align: center; }
.contact-card { max-width: 600px; margin-inline: auto; padding: 24px; border-top: 2px solid var(--teal); background: var(--teal-soft); }
.contact-card h2 { margin-bottom: 16px; font-size: 28px; }
.contact-card > p { margin-bottom: 32px; color: var(--muted); font-size: 15px; }
.email-link { max-width: 100%; padding-inline: 16px; }
.contact-card .contact-note { margin: 24px 0 0; font: 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.site-footer { padding-block: 48px; border-top: 1px solid var(--rule); background: var(--white); color: var(--muted); font-size: 12px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; text-align: center; }
.footer-brand { display: grid; justify-items: center; gap: 16px; }
.footer-brand img { width: 150px; }
.footer-brand p { font-family: var(--mono); }
.footer-description { max-width: 300px; }

@media (min-width: 640px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .email-link { font-size: 16px; }
}

@media (min-width: 768px) {
  .container { padding-inline: 48px; }
  .hero { padding-block: 96px; }
  h1 { font-size: 56px; }
  .hero-description { font-size: 18px; }
  .system-diagram { padding: 32px; }
  .diagram-network { grid-template-columns: .8fr .65fr 1fr; gap: 16px; }
  .diagram-connection { position: relative; display: grid; align-content: center; gap: 16px; width: auto; height: 120px; border: 0; font: 10px/1.6 var(--mono); text-align: center; text-transform: uppercase; }
  .diagram-connection::before { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--panel-rule); content: ""; }
  .diagram-connection span { position: relative; display: block; background: var(--panel); color: var(--panel-teal); }
  .diagram-connection span + span { color: var(--panel-muted); }
  .section { padding-block: 96px; }
  h2 { font-size: 36px; }
  .benefits { gap: 32px; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { padding-block: 120px; }
  .contact-card { padding: 64px; }
  .email-link { padding-inline: 32px; }
  .footer-inner { flex-direction: row; text-align: left; }
  .footer-brand { justify-items: start; }
  .footer-description { text-align: right; }
}

@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .desktop-label { display: inline; }
  .mobile-label { display: none; }
  .header-contact { padding-inline: 24px; font-size: 14px; }
  .hero { grid-template-columns: .45fr .55fr; gap: 64px; }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}