.home {
  --diagram-surface: #1d1429;
  --diagram-rule: #584362;
  --diagram-muted: #d5c1d9;
}

.home-container {
  width: min(100% - 64px, 1216px);
  margin-inline: auto;
}

.home main.home-container { padding: 0; }

.home-top {
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.home-nav, .home-footer > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.home-nav { min-height: 72px; }
.home-nav .brand, .home-footer .brand { font-size: 23px; letter-spacing: -.055em; }

.home-nav-links, .home-nav-actions, .home-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-nav-links { gap: clamp(16px, 3vw, 37px); font-size: 13px; font-weight: 650; }
.home-nav-links a { color: var(--muted); }
.home-nav-links a:hover { color: var(--pink); }
.home-nav .button { min-height: 39px; font-size: 12px; }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(26px, 5.5vw, 85px);
  padding: clamp(43px, 6vw, 85px) 0 clamp(50px, 7vw, 96px);
}

.home-kicker, .hero-figure-heading, .hero-figure-legend, .topology-figure figcaption {
  font: 600 11px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.home-kicker { color: var(--pink); margin: 0 0 13px; }

.home-hero h1 {
  margin: 0;
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 730;
  letter-spacing: -.072em;
  line-height: 1.02;
}

.home-lead {
  max-width: 41ch;
  margin: 20px 0 26px;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
}

.home-actions { flex-wrap: wrap; gap: 14px 20px; }
.home-button { min-height: 44px; padding-inline: 18px; font-size: 13px; }
.home-text-link { font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: .22em; }

.hero-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--diagram-rule);
  border-radius: 17px;
  background: var(--diagram-surface);
  color: var(--paper);
  box-shadow: 0 14px 34px #23192f24;
}

.hero-figure-heading, .hero-figure-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 47px;
  padding: 10px 16px;
  background: var(--plum);
  color: var(--diagram-muted);
}

.hero-figure-heading { border-bottom: 1px solid var(--diagram-rule); }
.hero-figure-heading span:last-child { font: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hero-figure-legend { border-top: 1px solid var(--diagram-rule); }

.hero-figure-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: .12em;
}

.hero-stage, .topology-figure {
  background-image:
    radial-gradient(ellipse at 65% 42%, #49304e, transparent 72%),
    linear-gradient(#fbf5ee0b 1px, transparent 1px),
    linear-gradient(90deg, #fbf5ee0b 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
}

.hero-stage { position: relative; aspect-ratio: 1.84; }
.hero-window { position: absolute; display: flex; flex-direction: column; overflow: hidden; width: 52%; height: 56%; border-radius: 10px; }
.hero-window-remote { top: 14%; right: 12%; border: 1px solid #a583b3; background: #3e294e; }
.hero-window-local { bottom: 13%; left: 12%; border: 1px solid #e1bdd5; background: var(--plum); box-shadow: 0 14px 25px #100c1c82; }

.hero-window-bar {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding-left: 11px;
  border-bottom: 1px solid #d5a8df45;
}

.hero-window-bar span { width: 4px; height: 4px; border-radius: 50%; background: #e5b5d0; box-shadow: 8px 0 #e5b5d0, 16px 0 #e5b5d0; }
.hero-window-screen { flex: 1; overflow: hidden; position: relative; background: linear-gradient(145deg, #6d476d, #352443 80%); }
.hero-window-remote .hero-window-screen { background: linear-gradient(145deg, #453252, #30223d); }

.hero-window-local .hero-window-screen::after {
  content: "";
  position: absolute;
  width: 126%;
  height: 160%;
  left: 8%;
  top: 29%;
  border-radius: 50%;
  transform: rotate(-26deg);
  background: linear-gradient(115deg, #edb0b9, #ac5d90 55%, #62375e);
}

.hero-signal { position: absolute; top: 57%; left: 64%; right: 12%; height: 1px; background: var(--signal); }

.hero-signal::after {
  content: "";
  position: absolute;
  left: 29%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px #ff729933, 0 0 18px #ff7299bd;
}

.home-section { padding: clamp(38px, 5vw, 68px) 0; border-top: 1px solid var(--border); }
.home-section-heading { margin-bottom: 24px; }
.home-section-heading h2, .home-cta h2 { margin: 0; font-size: clamp(28px, 3.5vw, 45px); line-height: 1.12; letter-spacing: -.055em; }
.home-section-heading > p:last-child:not(.home-kicker) { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.home-topologies { display: grid; gap: 15px; }

.home-topology {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(0, 2.25fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(15px, 2.5vw, 30px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.topology-copy { align-self: center; padding: 8px 0; }
.topology-copy h3 { margin: 0; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.045em; line-height: 1.2; }
.topology-copy > p:last-child { margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.topology-figure {
  margin: 0;
  padding: 16px clamp(12px, 2vw, 24px) 22px;
  border: 1px solid var(--diagram-rule);
  border-radius: 12px;
  background-color: var(--diagram-surface);
  color: var(--paper);
}

.topology-figure figcaption {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--diagram-rule);
  color: var(--diagram-muted);
}

.topology-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(64px, .64fr) minmax(0, 1.13fr) minmax(64px, .64fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.topology-node {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 104px;
  padding: 10px 5px;
  border: 1px solid var(--diagram-rule);
  border-radius: 9px;
  background: #2a2036;
  text-align: center;
  line-height: 1.35;
}

.topology-relay { background: #3f2949; border-color: #a6769a; }
.topology-node strong { font-size: 13px; }
.topology-node > span:last-child { color: var(--diagram-muted); font-size: 11px; }
.topology-icon { display: grid; place-items: center; margin-bottom: 3px; color: #ff9db9; }
.topology-icon svg, .shared-icon svg { width: 25px; height: 25px; }
.topology-link { position: relative; display: grid; gap: 7px; align-items: center; color: #dfc6e2; text-align: center; }
.topology-link strong { font: 600 11px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.topology-link small { position: absolute; top: calc(100% + 7px); width: 100%; color: var(--diagram-muted); font-size: 10px; line-height: 1.3; }
.topology-tunnel { color: var(--signal); }
.topology-line { position: relative; display: block; width: calc(100% - 3px); height: 1px; background: currentColor; }
.topology-line::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }

.home-shared {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  margin-top: 16px;
  padding: 19px clamp(16px, 2.5vw, 28px);
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--pink-soft);
}

.shared-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 9px; background: var(--surface); color: var(--pink); }
.home-shared h3, .home-steps h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.home-shared p, .home-steps p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.home-steps li { padding-top: 17px; border-top: 1px solid var(--border); counter-increment: steps; }
.home-steps li::before { display: block; content: "0" counter(steps); margin-bottom: 10px; color: var(--pink); font: 650 12px/1 ui-monospace, monospace; }
.home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 22px; }
.home-faq .home-section-heading { margin: 0; }
.home-accordion details { padding: 15px 0; border-bottom: 1px solid var(--border); }
.home-accordion details:first-child { border-top: 1px solid var(--border); }
.home-accordion summary { color: var(--ink); font-size: 14px; font-weight: 650; }
.home-accordion details p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }

.home-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--diagram-rule);
  border-radius: 16px;
  background: var(--plum);
  color: var(--paper);
}

.home-cta h2 { font-size: clamp(22px, 3vw, 34px); }
.home-footer { display: block; margin-top: 46px; padding: 23px 0; background: var(--surface); }

@media (max-width: 950px) {
  .home-topology { grid-template-columns: 1fr; gap: 12px; }
  .topology-copy { max-width: 65ch; }
}

@media (max-width: 760px) {
  .home-container { width: calc(100% - 36px); }
  .home-nav { flex-wrap: wrap; gap: 0 14px; padding-top: 10px; }
  .home-nav-links { order: 1; width: 100%; padding: 12px 0; }
  .home-hero, .home-faq { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: clamp(39px, 8.6vw, 65px); }
  .home-hero .home-lead { margin: 16px 0 20px; }
  .home-shared { grid-template-columns: auto minmax(0, 1fr); }
  .home-shared .home-text-link { grid-column: 2; }
}

@media (max-width: 535px) {
  .home-nav .brand, .home-footer .brand { font-size: 20px; }
  .home-nav .brand .brand-mark { width: 26px; height: 26px; }
  .home-nav .theme-toggle [data-theme-label] { display: none; }
  .home-nav .theme-toggle { min-width: 39px; min-height: 39px; }
  .home-nav-actions { gap: 7px; }
  .hero-figure-heading, .hero-figure-legend { padding-inline: 11px; min-height: 38px; font-size: 10px; letter-spacing: .045em; }
  .topology-grid { grid-template-columns: 1fr; justify-items: center; gap: 7px; }
  .topology-node { width: min(100%, 230px); min-height: 78px; }
  .topology-link { grid-template-columns: minmax(73px, 1fr) 1px minmax(73px, 1fr); gap: 9px; width: min(100%, 230px); }
  .topology-link strong { text-align: right; }
  .topology-link small { position: static; text-align: left; }
  .topology-line { width: 1px; height: 21px; }
  .topology-line::after { right: -2px; top: auto; bottom: 0; transform: rotate(135deg); }
  .home-steps { grid-template-columns: 1fr; }
}