/* WikaCloud landing page. Scoped to .landing-page so portal/admin remain unchanged. */
.landing-page {
  --lp-ink: #101827;
  --lp-ink-soft: #4d5b6c;
  --lp-paper: #f5f7f9;
  --lp-white: #ffffff;
  --lp-dark: #071017;
  --lp-dark-2: #0b1720;
  --lp-line: #d8e0e7;
  --lp-line-dark: rgba(177, 208, 224, .16);
  --lp-cyan: #22c7d6;
  --lp-green: #54d39a;
  --lp-red: #e94b55;
  --lp-red-dark: #c82f3a;
  --lp-amber: #f2b84b;
  --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lp-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  overflow: clip;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-font);
  letter-spacing: 0;
}

.landing-page *,
.landing-page *::before,
.landing-page *::after { letter-spacing: 0; }

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page p { margin-top: 0; }

.landing-page h1,
.landing-page h2,
.landing-page h3 {
  font-family: var(--lp-display);
  font-weight: 700;
  line-height: 1.12;
}

.landing-page button,
.landing-page a { touch-action: manipulation; }

.landing-page button { font: inherit; }

.landing-page .container { max-width: 1248px; }

.lp-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--lp-white);
  color: var(--lp-dark);
  border: 2px solid var(--lp-cyan);
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 180ms ease-out;
}

.lp-skip:focus { transform: translateY(0); }

.lp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lp-icon svg { width: 20px; height: 20px; display: block; }

.landing-page .btn {
  min-height: 48px;
  border-radius: 6px;
  justify-content: center;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.landing-page .btn .lp-icon svg { width: 17px; height: 17px; }

.landing-page .btn--primary {
  border-color: var(--lp-red);
  background: var(--lp-red);
  color: #fff;
  box-shadow: 0 12px 28px rgba(233, 75, 85, .24);
}

.landing-page .btn--primary:hover {
  border-color: var(--lp-red-dark);
  background: var(--lp-red-dark);
  box-shadow: 0 14px 32px rgba(233, 75, 85, .3);
  transform: translateY(-1px);
}

.landing-page .btn--ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
  backdrop-filter: none;
}

.landing-page .btn--ghost:hover {
  border-color: var(--lp-cyan);
  background: rgba(34, 199, 214, .08);
  color: var(--lp-cyan);
}

.landing-page .btn:focus-visible,
.landing-page button:focus-visible,
.landing-page summary:focus-visible,
.landing-page a:focus-visible {
  outline: 3px solid var(--lp-cyan);
  outline-offset: 3px;
}

.lp-kicker,
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--lp-cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.lp-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.lp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-green);
  box-shadow: 0 0 0 5px rgba(84, 211, 154, .14);
  animation: lp-status-pulse 2.4s ease-in-out infinite;
}

@keyframes lp-status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(84, 211, 154, .12); }
  50% { box-shadow: 0 0 0 9px rgba(84, 211, 154, 0); }
}

/* Hero: real datacenter image remains the first-viewport signal. */
.lp-hero {
  position: relative;
  min-height: calc(100svh - 64px);
  overflow: hidden;
  background: var(--lp-dark);
  color: #e8f0f5;
}

.lp-hero__image,
.lp-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lp-hero__image {
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.1) brightness(.55);
}

.lp-hero__veil {
  background: rgba(3, 10, 15, .58);
  box-shadow: inset 55vw 0 150px rgba(2, 8, 12, .72), inset 0 -180px 160px rgba(2, 8, 12, .74);
}

.lp-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: center;
  gap: 64px;
  min-height: calc(100svh - 180px);
  padding-top: 74px;
  padding-bottom: 120px;
}

.lp-hero__copy { max-width: 730px; }

.lp-hero h1 {
  max-width: 720px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 60px;
  text-shadow: 0 3px 32px rgba(0, 0, 0, .48);
}

.lp-hero h1 span { color: var(--lp-cyan); }

.lp-hero__lead {
  max-width: 690px;
  margin-bottom: 30px;
  color: #cfdae1;
  font-size: 18px;
  line-height: 1.72;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.lp-hero__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .42); }

.lp-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c2d0d8;
  font-size: 13px;
}

.lp-hero__proof .lp-icon { color: var(--lp-green); }
.lp-hero__proof .lp-icon svg { width: 17px; height: 17px; }
.lp-hero__proof b { color: #fff; }

.lp-ops {
  position: relative;
  border: 1px solid rgba(181, 215, 229, .25);
  border-radius: 8px;
  background: rgba(5, 15, 22, .9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.lp-ops::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(77, 126, 148, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 126, 148, .08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.lp-ops > * { position: relative; z-index: 1; }

.lp-ops__head,
.lp-ops__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--lp-line-dark);
  color: #95a9b6;
  font-family: var(--font-mono);
  font-size: 11px;
}

.lp-ops__state { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-green); }
.lp-ops__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.lp-ops__signal {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 118px;
  padding: 30px 20px 18px;
  border-bottom: 1px solid var(--lp-line-dark);
}

.lp-ops__signal span {
  flex: 1 1 0;
  height: 34%;
  background: var(--lp-cyan);
  opacity: .45;
  transform-origin: bottom;
  animation: lp-signal 2.2s ease-in-out infinite alternate;
}

.lp-ops__signal span:nth-child(2n) { height: 62%; animation-delay: -1.5s; }
.lp-ops__signal span:nth-child(3n) { height: 88%; animation-delay: -.9s; background: var(--lp-green); }
.lp-ops__signal span:nth-child(5n) { height: 48%; animation-delay: -.3s; }
.lp-ops__signal span:nth-child(7n) { height: 76%; animation-delay: -1.9s; }

@keyframes lp-signal {
  from { transform: scaleY(.65); opacity: .3; }
  to { transform: scaleY(1); opacity: .78; }
}

.lp-ops__grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.lp-ops__grid div { min-width: 0; padding: 18px; border-bottom: 1px solid var(--lp-line-dark); }
.lp-ops__grid div:nth-child(odd) { border-right: 1px solid var(--lp-line-dark); }
.lp-ops__grid dt { color: #78909d; font-size: 11px; text-transform: uppercase; }
.lp-ops__grid dd { margin: 5px 0 0; color: #f0f6f8; font-family: var(--lp-display); font-size: 16px; font-weight: 600; }
.lp-ops__footer { border: 0; color: #a9bac3; }
.lp-ops__footer span:last-child { color: var(--lp-green); }

.lp-metric-band {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(181, 215, 229, .2);
  background: rgba(4, 13, 19, .92);
  backdrop-filter: blur(10px);
}

.lp-metric-band__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-metric-band__grid > div { min-width: 0; padding: 21px 24px; border-right: 1px solid rgba(181, 215, 229, .14); }
.lp-metric-band__grid > div:last-child { border-right: 0; }
.lp-metric-band strong { display: block; color: #fff; font-family: var(--lp-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.lp-metric-band span { display: block; margin-top: 2px; color: #8fa5b1; font-size: 12px; }

/* Shared page bands and headings. */
.lp-band { position: relative; padding: 104px 0; }
.lp-band--light { background: #edf2f5; }
.lp-band--white { background: var(--lp-white); }
.lp-band--catalog { background: #f0f3f6; }
.lp-band--dark { background: var(--lp-dark); color: #d6e0e6; }

.lp-section-copy h2,
.lp-section-head h2 {
  max-width: 650px;
  margin-bottom: 20px;
  color: var(--lp-ink);
  font-size: 43px;
}

.lp-section-copy > p:not(.lp-eyebrow),
.lp-section-head > p,
.lp-section-head > div + p {
  color: var(--lp-ink-soft);
  font-size: 16px;
  line-height: 1.75;
}

.lp-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .62fr);
  align-items: end;
  gap: 80px;
  margin-bottom: 48px;
}

.lp-section-head h2 { margin-bottom: 0; }
.lp-section-head > p { margin-bottom: 4px; }

.lp-section-head--dark h2 { color: #f5f8fa; }
.lp-section-head--dark > p { color: #9eb0ba; }

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out var(--reveal-delay, 0ms), transform 400ms ease-out var(--reveal-delay, 0ms);
}

[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Compute and vSAN cluster. */
.lp-infra {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: 80px;
}

.lp-spec-list { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--lp-line); }
.lp-spec-list > div { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--lp-line); }
.lp-spec-list .lp-icon { width: 42px; height: 42px; color: #14899a; }
.lp-spec-list .lp-icon svg { width: 24px; height: 24px; }
.lp-spec-list span { display: grid; gap: 2px; }
.lp-spec-list b { color: var(--lp-ink); font-size: 14px; }
.lp-spec-list small { color: #697888; font-size: 13px; }

.lp-note { margin: 18px 0 0; color: #71808f !important; font-size: 12px !important; line-height: 1.6 !important; }

.lp-cluster {
  border: 1px solid #cbd6dd;
  border-radius: 8px;
  background: #e6ecef;
  box-shadow: 0 26px 60px rgba(32, 58, 73, .12);
  overflow: hidden;
}

.lp-cluster__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #cbd6dd;
  background: #f5f8f9;
  color: #6b7b87;
  font-family: var(--font-mono);
  font-size: 11px;
}

.lp-cluster__label b { display: inline-flex; align-items: center; gap: 6px; color: #167f58; }
.lp-cluster__label b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-green); }

.lp-cluster__canvas { position: relative; min-height: 430px; overflow: hidden; }
.lp-cluster__canvas::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(95, 120, 133, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 120, 133, .1) 1px, transparent 1px); background-size: 28px 28px; }
.lp-cluster__routes { position: absolute; inset: 20px 24px; width: calc(100% - 48px); height: calc(100% - 40px); }
.cluster-route { stroke: #229eaf; stroke-width: 2; stroke-dasharray: 8 9; animation: lp-data-flow 3s linear infinite; }
.route-b { animation-delay: -1s; stroke: #47b984; }
.route-c { animation-delay: -2s; stroke: #db626a; }

@keyframes lp-data-flow { to { stroke-dashoffset: -68; } }

.lp-cluster__node,
.lp-cluster__core {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  color: var(--lp-ink);
}

.lp-cluster__node {
  width: 118px;
  height: 86px;
  border: 1px solid #b9c8d0;
  border-radius: 6px;
  background: #f8fafb;
  box-shadow: 0 12px 24px rgba(50, 75, 88, .1);
}

.lp-cluster__node i { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.lp-cluster__node .lp-icon { margin-bottom: 6px; color: #238695; }
.lp-cluster__node b { font-family: var(--font-mono); font-size: 11px; }
.lp-cluster__node span { color: #74838e; font-size: 10px; }
.lp-cluster__node.node-a { top: 32px; left: calc(50% - 59px); }
.lp-cluster__node.node-b { top: 164px; left: 34px; }
.lp-cluster__node.node-c { top: 164px; right: 34px; }

.lp-cluster__core {
  right: calc(50% - 76px);
  bottom: 28px;
  width: 152px;
  height: 112px;
  border: 1px solid #8db9c1;
  border-radius: 8px;
  background: #f9fbfb;
  box-shadow: 0 14px 34px rgba(22, 102, 117, .16);
}

.lp-cluster__core .lp-icon { position: relative; color: #117f91; }
.lp-cluster__core b { position: relative; margin-top: 5px; color: #0f5864; font-size: 18px; }
.lp-cluster__core small { position: relative; color: #71828c; font-size: 10px; }
.lp-cluster__rings { position: absolute; width: 66px; height: 66px; border: 1px solid rgba(34, 158, 175, .34); border-radius: 50%; animation: lp-ring 2.4s ease-out infinite; }

@keyframes lp-ring { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }

.lp-cluster__legend { display: flex; justify-content: center; gap: 24px; padding: 13px 18px; border-top: 1px solid #cbd6dd; background: #f5f8f9; color: #60717d; font-size: 11px; }
.lp-cluster__legend span { display: inline-flex; align-items: center; gap: 7px; }
.lp-cluster__legend i { width: 7px; height: 7px; border-radius: 50%; }
.lp-cluster__legend .is-green { background: var(--lp-green); }
.lp-cluster__legend .is-cyan { background: var(--lp-cyan); }
.lp-cluster__legend .is-red { background: var(--lp-red); }

/* Global map and ping comparison. */
.lp-network {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  border: 1px solid var(--lp-line-dark);
  border-radius: 8px;
  overflow: hidden;
  background: var(--lp-dark-2);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .24);
}

.lp-map { position: relative; min-height: 590px; border-right: 1px solid var(--lp-line-dark); overflow: hidden; }
.lp-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(91, 139, 159, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 139, 159, .07) 1px, transparent 1px); background-size: 36px 36px; }
.lp-map__world,
.lp-map__routes { position: absolute; top: 9%; left: 4%; width: 92%; height: 78%; }
.lp-map__world path { fill: #102733; stroke: #264451; stroke-width: 1.5; }
.lp-map__routes path { stroke: rgba(34, 199, 214, .4); stroke-width: 1.4; stroke-dasharray: 7 9; animation: lp-map-route 4s linear infinite; }
.lp-map__routes path:nth-child(2n) { animation-delay: -2s; stroke: rgba(84, 211, 154, .34); }

@keyframes lp-map-route { to { stroke-dashoffset: -64; } }

.lp-map__pin,
.lp-map__hub {
  position: absolute;
  z-index: 3;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
}

.lp-map__pin {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lp-cyan);
  cursor: pointer;
}

.lp-map__pin span { position: absolute; top: 17px; left: 17px; width: 10px; height: 10px; border: 2px solid var(--lp-dark); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(34, 199, 214, .18); transition: box-shadow 180ms ease-out, transform 180ms ease-out, background-color 180ms ease-out; }
.lp-map__pin:hover span,
.lp-map__pin.is-active span { background: var(--lp-green); box-shadow: 0 0 0 9px rgba(84, 211, 154, .16); transform: scale(1.2); }

.lp-map__hub { display: grid; justify-items: center; gap: 8px; color: var(--lp-green); font-family: var(--font-mono); font-size: 10px; font-weight: 700; pointer-events: none; }
.lp-map__hub i { width: 18px; height: 18px; border: 4px solid var(--lp-dark); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 8px rgba(84, 211, 154, .16); }

.lp-map__readout {
  position: absolute;
  z-index: 4;
  bottom: 24px;
  left: 24px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 270px;
  padding: 14px 16px;
  border: 1px solid var(--lp-line-dark);
  border-radius: 6px;
  background: rgba(5, 16, 23, .92);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

.lp-map__readout .fi { width: 24px; height: 18px; border-radius: 2px; }
.lp-map__readout div { display: grid; }
.lp-map__readout small { color: #738b98; font-size: 9px; text-transform: uppercase; }
.lp-map__readout b { color: #e8f0f4; font-size: 13px; }
.lp-map__readout strong { color: var(--lp-green); font-size: 18px; }

.lp-ping-list { display: grid; align-content: center; padding: 20px; }
.lp-ping-row {
  display: grid;
  grid-template-columns: 20px minmax(82px, 1fr) minmax(50px, .72fr) 62px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #b8c8d0;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}

.lp-ping-row:hover,
.lp-ping-row.is-active { border-color: rgba(34, 199, 214, .25); background: rgba(34, 199, 214, .07); color: #fff; }
.lp-ping-row .fi { width: 20px; height: 15px; border-radius: 2px; }
.lp-ping-row > span:nth-child(2) { font-size: 12px; }
.lp-ping-row__bar { height: 3px; background: #1e3540; overflow: hidden; }
.lp-ping-row__bar i { display: block; width: var(--ping-width); height: 100%; background: var(--lp-cyan); transition: width 250ms ease-out, background-color 180ms ease-out; }
.lp-ping-row.is-active .lp-ping-row__bar i { background: var(--lp-green); }
.lp-ping-row b { justify-self: end; color: #dbe8ed; font-size: 11px; }

/* Workloads and fit guide. */
.lp-workload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lp-line); border-left: 1px solid var(--lp-line); }
.lp-workload {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-height: 190px;
  padding: 30px;
  border-right: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-white);
  transition: background-color 180ms ease-out;
}

.lp-workload:hover { background: #f6f9fa; }
.lp-workload__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #b9d5da; border-radius: 6px; color: #118898; }
.lp-workload__icon .lp-icon svg { width: 23px; height: 23px; }
.lp-workload h3 { margin-bottom: 9px; color: var(--lp-ink); font-size: 18px; }
.lp-workload p { margin-bottom: 0; color: #607080; font-size: 14px; line-height: 1.65; }
.lp-workload__index { position: absolute; top: 12px; right: 14px; color: #b5c2ca; font-size: 10px; }

.lp-fit { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 0; margin-top: 40px; border: 1px solid var(--lp-line); border-radius: 8px; background: #f5f8f9; overflow: hidden; }
.lp-fit > div { display: grid; min-height: 104px; align-content: center; gap: 1px; padding: 20px 24px; border-right: 1px solid var(--lp-line); }
.lp-fit span { color: #168c9c; font-family: var(--font-mono); font-size: 10px; }
.lp-fit b { color: var(--lp-ink); font-size: 13px; }
.lp-fit small { color: #6c7b87; font-size: 11px; }
.lp-fit .btn { margin: 0 24px; }

/* Live catalog. */
.lp-location-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.lp-location-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max-content;
  min-height: 46px;
  padding: 9px 15px;
  border: 1px solid #ccd7de;
  border-radius: 5px;
  background: #fff;
  color: #536473;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms ease-out, color 180ms ease-out, background-color 180ms ease-out;
}

.lp-location-tab:hover { border-color: #7aaeb7; color: #0c7c8c; }
.lp-location-tab.is-active { border-color: #0c7c8c; background: #0c7c8c; color: #fff; }
.lp-location-tab .fi { width: 20px; height: 15px; border-radius: 2px; }
.lp-location-tab .lp-icon svg { width: 17px; height: 17px; }

.lp-plan-panel[hidden] { display: none; }
.lp-plan-panel.is-active { animation: lp-panel-in 240ms ease-out; }
@keyframes lp-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.lp-plan-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.lp-plan-panel__head > div { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink); font-family: var(--lp-display); font-size: 20px; font-weight: 700; }
.lp-plan-panel__head .fi { width: 28px; height: 21px; border-radius: 2px; }
.lp-plan-panel__head p { margin: 0; color: #6d7c89; }
.lp-plan-panel__head p b { color: #0b7e8d; font-size: 20px; }
.lp-plan-panel__head p span { font-size: 12px; }

.lp-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-plan { border: 1px solid #ced9df; border-radius: 8px; background: #fff; overflow: hidden; transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; }
.lp-plan:hover { border-color: #80b3bc; box-shadow: 0 16px 32px rgba(44, 71, 84, .11); transform: translateY(-2px); }
.lp-plan__top { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid #e1e7eb; color: #6b7b87; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.lp-plan__top i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 0 4px rgba(84, 211, 154, .13); }
.lp-plan__specs { display: grid; grid-template-columns: repeat(3, 1fr); }
.lp-plan__specs > span { display: grid; justify-items: center; gap: 3px; padding: 22px 8px; border-right: 1px solid #e1e7eb; color: #198c9c; }
.lp-plan__specs > span:last-child { border-right: 0; }
.lp-plan__specs .lp-icon svg { width: 18px; height: 18px; }
.lp-plan__specs b { color: var(--lp-ink); font-size: 20px; }
.lp-plan__specs small { color: #758591; font-size: 10px; }
.lp-plan__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-top: 1px solid #e1e7eb; background: #f9fbfb; }
.lp-plan__foot p { display: grid; margin: 0; }
.lp-plan__foot p b { color: #0a7a89; font-size: 17px; }
.lp-plan__foot p span { color: #7b8994; font-size: 10px; }
.lp-plan__foot .btn { min-height: 40px; color: #314451; }
.lp-empty { padding: 32px; border: 1px solid #ced9df; background: #fff; color: #637480; text-align: center; }
.lp-empty a { color: #0c7c8c; font-weight: 700; }

/* Proxy service band. */
.lp-band--services { padding: 80px 0; background: #dfe8ec; }
.lp-services { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; }
.lp-services__copy h2 { max-width: 510px; margin-bottom: 18px; color: var(--lp-ink); font-size: 40px; }
.lp-services__copy > p:not(.lp-eyebrow) { max-width: 550px; color: #566978; line-height: 1.72; }
.lp-services__price { display: flex; align-items: baseline; gap: 7px; margin: 24px 0 20px; color: #627481; }
.lp-services__price b { color: #0b7c8b; font-size: 28px; }
.lp-services__price small { font-size: 11px; }
.lp-proxy-types { display: grid; border-top: 1px solid #bdcbd2; }
.lp-proxy-types article { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding: 18px 0; border-bottom: 1px solid #bdcbd2; }
.lp-proxy-types article > div { display: flex; align-items: center; gap: 15px; }
.lp-proxy-types article .lp-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #9dbac4; border-radius: 5px; color: #0e8292; }
.lp-proxy-types article span { display: grid; }
.lp-proxy-types article b { color: var(--lp-ink); }
.lp-proxy-types article small { color: #677a86; }
.lp-proxy-types article strong { display: grid; justify-items: end; color: #0c7482; font-size: 18px; }
.lp-proxy-types article strong small { font-size: 10px; font-weight: 500; }

/* FAQ and final CTA. */
.lp-band--faq { background: #fff; }
.lp-faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 96px; }
.lp-faq-layout .lp-section-copy h2 { font-size: 40px; }
.lp-faq { border-top: 1px solid var(--lp-line); }
.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq summary { position: relative; min-height: 68px; padding: 21px 46px 20px 0; color: var(--lp-ink); font-family: var(--lp-display); font-weight: 600; list-style: none; cursor: pointer; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; position: absolute; top: 16px; right: 4px; color: #178696; font-family: var(--lp-font); font-size: 26px; font-weight: 400; }
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq p { max-width: 720px; margin: -2px 0 23px; color: #5d6e7d; line-height: 1.7; }

.lp-final { padding: 88px 0; background: var(--lp-dark); color: #d7e1e6; }
.lp-final__inner { display: grid; grid-template-columns: 1.15fr .85fr auto; align-items: center; gap: 54px; }
.lp-final h2 { margin: 0; color: #fff; font-size: 38px; }
.lp-final p:not(.lp-kicker) { margin: 0; color: #9eb0ba; line-height: 1.7; }
.lp-final__inner > div:last-child { display: flex; gap: 10px; }
.lp-final .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }

@media (max-width: 1120px) {
  .lp-hero__inner { grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; }
  .lp-hero h1 { font-size: 50px; }
  .lp-infra { grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: 52px; }
  .lp-network { grid-template-columns: minmax(0, 1fr) 330px; }
  .lp-workload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-fit { grid-template-columns: repeat(3, 1fr); }
  .lp-fit .btn { grid-column: 1 / -1; margin: 18px 24px 24px; }
  .lp-final__inner { grid-template-columns: 1fr 1fr; }
  .lp-final__inner > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .lp-hero { min-height: auto; }
  .lp-hero__veil { background: rgba(3, 10, 15, .66); box-shadow: inset 0 -180px 160px rgba(2, 8, 12, .8); }
  .lp-hero__inner { grid-template-columns: 1fr; min-height: auto; padding-top: 76px; padding-bottom: 190px; }
  .lp-hero__copy { max-width: 760px; }
  .lp-ops { max-width: 620px; }
  .lp-metric-band__grid { grid-template-columns: repeat(5, minmax(144px, 1fr)); overflow-x: auto; }
  .lp-infra,
  .lp-services,
  .lp-faq-layout { grid-template-columns: 1fr; gap: 52px; }
  .lp-infra { align-items: start; }
  .lp-cluster { max-width: 680px; width: 100%; }
  .lp-section-head { grid-template-columns: 1fr; gap: 16px; }
  .lp-section-head > p { max-width: 680px; }
  .lp-network { grid-template-columns: 1fr; }
  .lp-map { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--lp-line-dark); }
  .lp-ping-list { grid-template-columns: 1fr 1fr; align-content: start; }
  .lp-ping-row { grid-template-columns: 20px minmax(80px, 1fr) 56px; }
  .lp-ping-row__bar { display: none; }
  .lp-services { align-items: start; }
  .lp-final__inner { grid-template-columns: 1fr; gap: 24px; }
  .lp-final__inner > div:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .landing-page .container { padding-right: 18px; padding-left: 18px; }
  .lp-hero__image { object-position: 58% center; }
  .lp-hero__inner { gap: 32px; padding-top: 64px; padding-bottom: 174px; }
  .lp-hero h1 { font-size: 38px; overflow-wrap: anywhere; }
  .lp-hero__lead { font-size: 16px; line-height: 1.66; }
  .lp-hero__actions { display: grid; grid-template-columns: 1fr; }
  .lp-hero__proof { display: grid; gap: 10px; }
  .lp-ops__head { align-items: flex-start; flex-direction: column; }
  .lp-ops__signal { height: 96px; }
  .lp-ops__grid { grid-template-columns: 1fr; }
  .lp-ops__grid div:nth-child(odd) { border-right: 0; }
  .lp-metric-band__grid { grid-template-columns: repeat(5, 150px); }
  .lp-metric-band__grid > div { padding: 17px 18px; }
  .lp-metric-band strong { font-size: 17px; }
  .lp-band { padding: 72px 0; }
  .lp-section-copy h2,
  .lp-section-head h2,
  .lp-services__copy h2,
  .lp-faq-layout .lp-section-copy h2 { font-size: 32px; }
  .lp-cluster__canvas { min-height: 500px; }
  .lp-cluster__routes { display: none; }
  .lp-cluster__node { width: calc(50% - 28px); }
  .lp-cluster__node.node-a { top: 24px; left: 16px; }
  .lp-cluster__node.node-b { top: 24px; right: 16px; left: auto; }
  .lp-cluster__node.node-c { top: 136px; right: auto; left: 16px; width: calc(100% - 32px); }
  .lp-cluster__core { right: 16px; bottom: 28px; width: calc(100% - 32px); }
  .lp-cluster__legend { align-items: flex-start; flex-direction: column; gap: 7px; }
  .lp-map { min-height: 430px; }
  .lp-map__world,
  .lp-map__routes { top: 7%; left: -10%; width: 120%; height: 72%; }
  .lp-map__readout { right: 14px; bottom: 14px; left: 14px; min-width: 0; }
  .lp-map__hub span { display: none; }
  .lp-ping-list { grid-template-columns: 1fr; padding: 14px; }
  .lp-ping-row__bar { display: block; }
  .lp-ping-row { grid-template-columns: 20px minmax(82px, 1fr) minmax(40px, .8fr) 56px; }
  .lp-workload-grid { grid-template-columns: 1fr; }
  .lp-workload { min-height: 0; padding: 24px 20px; }
  .lp-fit { grid-template-columns: 1fr; }
  .lp-fit > div { min-height: 88px; border-right: 0; border-bottom: 1px solid var(--lp-line); }
  .lp-fit .btn { grid-column: auto; margin: 18px; }
  .lp-plan-panel__head { align-items: flex-start; flex-direction: column; }
  .lp-plan-grid { grid-template-columns: 1fr; }
  .lp-plan__foot { align-items: stretch; flex-direction: column; }
  .lp-proxy-types article { align-items: flex-start; flex-direction: column; gap: 10px; }
  .lp-proxy-types article strong { justify-items: start; padding-left: 59px; }
  .lp-final { padding: 68px 0; }
  .lp-final h2 { font-size: 32px; }
  .lp-final__inner > div:last-child { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .lp-hero h1 { font-size: 34px; }
  .lp-map__readout { grid-template-columns: 20px 1fr; }
  .lp-map__readout strong { grid-column: 2; }
  .lp-ping-row { grid-template-columns: 20px minmax(80px, 1fr) 52px; }
  .lp-ping-row__bar { display: none; }
  .lp-plan__specs b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Appearance controls selected in admin settings. The landing page preserves
   its real data-centre image while allowing its type scale and composition to
   follow the site-wide system. */
body[data-font] .landing-page {
  --lp-font: var(--font);
  --lp-display: var(--font);
}
body[data-content-width] .landing-page .container { max-width: var(--maxw); }

body[data-density="compact"] .landing-page .lp-band { padding-block: 72px; }
body[data-density="airy"] .landing-page .lp-band { padding-block: 124px; }
body[data-density="compact"] .landing-page .lp-hero__inner {
  min-height: calc(100svh - 220px);
  padding-top: 56px;
  padding-bottom: 84px;
}
body[data-density="airy"] .landing-page .lp-hero__inner {
  padding-top: 96px;
  padding-bottom: 144px;
}

@media (min-width: 901px) {
  body[data-hero-layout="center"] .landing-page .lp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  body[data-hero-layout="center"] .landing-page .lp-hero__copy,
  body[data-hero-layout="center"] .landing-page .lp-ops { max-width: 760px; }
  body[data-hero-layout="center"] .landing-page .lp-hero__actions,
  body[data-hero-layout="center"] .landing-page .lp-hero__proof { justify-content: center; }

  body[data-hero-layout="focus"] .landing-page .lp-hero { min-height: 740px; }
  body[data-hero-layout="focus"] .landing-page .lp-hero__inner {
    min-height: 620px;
    padding-top: 56px;
    padding-bottom: 88px;
  }
  body[data-hero-layout="focus"] .landing-page .lp-hero h1 { font-size: 52px; }
}

@media (max-width: 640px) {
  body[data-density="compact"] .landing-page .lp-band { padding-block: 56px; }
  body[data-density="airy"] .landing-page .lp-band { padding-block: 88px; }
  body[data-density="compact"] .landing-page .lp-hero__inner,
  body[data-density="airy"] .landing-page .lp-hero__inner {
    min-height: auto;
    padding-top: 64px;
    padding-bottom: 174px;
  }
}