/* The map is a single, wide atmospheric canvas so it belongs to the page,
   rather than reading as an illustration placed inside a white website. */
.home-page { background: #e6f4ff !important; }
.home-page .page-shell {
  isolation: isolate;
  overflow: hidden;
  background: #ddecf9 !important;
}
.home-page .page-shell::before,
.home-page .page-shell::after { display: none; }

.global-network {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(248,253,255,.18), rgba(218,240,255,.03) 46%, transparent 72%),
    linear-gradient(180deg, #e9f6ff 0%, #c7e6fa 51%, #e9f6ff 100%);
}
.network-atmosphere,
.network-stars,
.network-center-light,
.network-foreground-light { position: absolute; pointer-events: none; }
.network-atmosphere {
  z-index: 1;
  inset: -7%;
  opacity: .32;
  background:
    radial-gradient(ellipse at 8% 46%, rgba(17,121,216,.4), transparent 34%),
    radial-gradient(ellipse at 89% 44%, rgba(32,132,225,.34), transparent 37%),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 28%, rgba(208,239,255,.2) 78%, rgba(255,255,255,.48));
  filter: blur(18px);
  will-change: transform;
}
.network-stars {
  z-index: 3;
  inset: 0;
  opacity: .44;
  background-image:
    radial-gradient(circle at 4% 60%, rgba(255,255,255,.96) 0 1px, transparent 2.5px),
    radial-gradient(circle at 12% 28%, rgba(184,229,255,.92) 0 1px, transparent 2.5px),
    radial-gradient(circle at 23% 85%, rgba(255,255,255,.9) 0 1px, transparent 2.5px),
    radial-gradient(circle at 73% 15%, rgba(255,255,255,.9) 0 1px, transparent 2.5px),
    radial-gradient(circle at 88% 62%, rgba(180,230,255,.92) 0 1px, transparent 2.5px),
    radial-gradient(circle at 97% 32%, rgba(255,255,255,.96) 0 1px, transparent 2.5px);
}
.network-scene {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  /* Keep the full world composition visible on large displays instead of
     enlarging it until only a close-up of the continents remains. */
  width: max(1920px, 100vw);
  min-height: 100svh;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform;
}
.network-generated-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.88) contrast(.94) brightness(1.075);
}
.network-motion-map {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* These paths are guides only: the visible lines remain part of the artwork.
   They let the animated lights follow the same global flow without adding a
   second, mismatched drawing of the world. */
.network-motion-routes { fill: none; stroke: transparent; stroke-width: 2; }
.network-pulse { opacity: 0; }
.network-pulse-core {
  fill: #fbfeff;
  stroke: #5fc8ff;
  stroke-width: 1.05;
  filter: drop-shadow(0 0 4px rgba(95,200,255,.98)) drop-shadow(0 0 10px rgba(68,170,255,.72));
}
.network-pulse-trail {
  fill: #5fc8ff;
  opacity: .48;
  filter: drop-shadow(0 0 7px rgba(95,200,255,.8));
}
.network-arrival-ripple { fill: none; stroke: #d9f7ff; stroke-width: 1.2; opacity: 0; }
.network-arrival-ripple.is-active { animation: network-arrival .78s ease-out both; }
/* The original hand-drawn SVG is retained in markup for easy rollback, but
   the generated panoramic canvas is the only geography shown. */
.network-geography,
.network-map { display: none; }
.network-center-light {
  z-index: 4;
  inset: 0;
  background: radial-gradient(ellipse 32% 31% at 50% 47%, rgba(255,255,255,.16), rgba(255,255,255,.03) 60%, transparent 85%);
}
.network-foreground-light {
  z-index: 5;
  inset: -5%;
  opacity: .52;
  background:
    radial-gradient(circle at 9% 80%, rgba(255,255,255,.94) 0 1px, transparent 3px),
    radial-gradient(circle at 20% 33%, rgba(218,245,255,.9) 0 1px, transparent 3px),
    radial-gradient(circle at 82% 75%, rgba(255,255,255,.88) 0 1px, transparent 3px),
    radial-gradient(circle at 94% 49%, rgba(219,244,255,.82) 0 1px, transparent 3px);
  will-change: transform;
}

/* Native content is clear but stays visually part of the same blue light. */
.home-page .topbar,
.home-page footer { z-index: 7; }
.home-page .topbar {
  border-bottom: 1px solid rgba(86,151,205,.2) !important;
  background: linear-gradient(180deg, rgba(249,253,255,.42), rgba(244,251,255,.04)) !important;
}
.home-page .search-hero { isolation: isolate; z-index: 6; }
.home-page .search-hero::before { content: none; }
.home-page .search-hero h1 { color: #082443 !important; text-shadow: 0 1px 18px rgba(255,255,255,.35); }
.home-page .search-hero h1 em { color: #147ce0 !important; }
.home-page .search-hero .eyebrow { color: #1277d4 !important; }
.home-page .startup-lead { color: #254d70 !important; text-shadow: 0 1px 13px rgba(255,255,255,.34); }
.home-page .about-link,
.home-page .contact-link,
.home-page .sign-in,
.home-page footer { color: #102a43 !important; }
.home-page .search-form {
  border-color: rgba(137,195,234,.7) !important;
  background: rgba(255,255,255,.87) !important;
  box-shadow: 0 14px 34px rgba(21,103,176,.15) !important;
  backdrop-filter: blur(10px);
}
.home-page .search-form:focus-within {
  border-color: rgba(40,132,205,.8) !important;
  box-shadow: 0 17px 42px rgba(21,103,176,.2) !important;
}
.home-page .suggestions a { border-color: rgba(151,207,241,.82) !important; background: rgba(255,255,255,.52) !important; }
.home-page .suggestions a:hover { background: rgba(255,255,255,.82) !important; }
.home-page .more-suggestions { background: rgba(255,255,255,.68) !important; }
.home-page .score-corner {
  z-index: 7;
  background: rgba(244,251,255,.62) !important;
  border-color: rgba(104,173,225,.36) !important;
  box-shadow: 0 12px 30px rgba(22,104,176,.1) !important;
  backdrop-filter: blur(9px);
}

@keyframes network-arrival {
  0% { r: 3; opacity: .94; }
  100% { r: 20; opacity: 0; }
}

@media (max-width: 1180px) {
  .network-scene { width: max(1640px, 168vw); }
  .network-generated-map { object-position: 50% 50%; }
}
@media (max-width: 767px) {
  .global-network { background: linear-gradient(180deg, #e5f4ff 0%, #bce3fb 48%, #e7f6ff 100%); }
  .network-atmosphere { opacity: .2; filter: blur(12px); }
  .network-scene {
    width: max(1110px, 315vw);
    min-height: 104svh;
    top: 43%;
    left: 50%;
  }
  .network-generated-map { object-position: 49% 49%; filter: saturate(1.02) brightness(1.06); }
  .network-motion-map { display: none; }
  .network-stars { opacity: .28; }
  .network-center-light { background: radial-gradient(ellipse 62% 30% at 50% 42%, rgba(255,255,255,.12), transparent 78%); }
  .network-foreground-light { display: none; }
  .home-page .search-form { background: rgba(255,255,255,.92) !important; backdrop-filter: none; }
  .home-page .score-corner { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-motion-map { display: none; }
  .network-scene { transform: translate(-50%, -50%) !important; }
  .network-atmosphere,
  .network-foreground-light { transform: translate3d(0, 0, 0) !important; }
}

/* Keep the navigation and the small footer message readable against the map. */
.home-page .about-link,
.home-page .contact-link,
.home-page .sign-in,
.home-page .footer-note,
.home-page footer {
  color: #020f22 !important;
  font-weight: 800;
  text-shadow: 0 1px 9px rgba(255,255,255,.96);
}
.home-page footer { font-size: 12px; }
.home-page .register,
.home-page .search-form button {
  background: #03182e !important;
  border-color: #03182e !important;
  box-shadow: 0 8px 18px rgba(1,22,43,.22) !important;
}
.home-page .register:hover,
.home-page .search-form button:hover { background: #072847 !important; border-color: #072847 !important; }
.home-page .suggestions a,
.home-page .more-suggestions { color: #06385f !important; }
.home-page .contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  text-decoration: none;
}
.home-page .contact-link:hover,
.home-page .contact-link:focus-visible {
  color: #003d70 !important;
  background: rgba(255,255,255,.48);
  outline: none;
}
@media (max-width: 620px) {
  .home-page .contact-link { min-height: 34px; padding: 0 6px; font-size: 12px; }
}

/* Phone layout: the map remains a page background (not a short image panel),
   while the two navigation groups form balanced left and right columns. */
@media (max-width: 767px) {
  .home-page .global-network { inset: 0; min-height: 100%; }
  .home-page .network-scene {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    transform: none !important;
  }
  .home-page .network-generated-map {
    object-fit: cover;
    object-position: 50% 48%;
  }
  .home-page .topbar {
    min-height: 80px;
    padding-bottom: 0 !important;
    align-items: flex-start;
  }
  .home-page .about-link { min-height: 36px; }
  .home-page .contact-link {
    position: absolute;
    top: 41px;
    left: 0;
    min-height: 30px;
    padding: 0;
    background: transparent !important;
    font-size: 13px;
  }
  .home-page .account-actions {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 41px 30px;
    justify-items: end;
    align-items: start;
    gap: 0;
    margin-left: auto;
  }
  .home-page .account-actions .register { grid-column: 1; grid-row: 1; align-self: start; }
  .home-page .account-actions .sign-in {
    display: inline-flex;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    min-height: 30px;
    padding: 0 4px;
    transform: none !important;
  }
  .home-page .search-hero { margin: 10px auto 0; transform: none; }
  .home-page .search-hero h1 em { display: block; }
}

/* Header controls share one deliberate alignment line, whether the visitor is
   signed out or viewing their own account. */
.home-page .topbar {
  align-items: center;
}
.home-page .account-actions {
  align-items: center;
}
.home-page .about-link,
.home-page .contact-link,
.home-page .sign-in,
.home-page .register,
.home-page .company-session,
.home-page .header-logout {
  box-sizing: border-box;
  min-height: 38px;
}
.home-page .about-link,
.home-page .sign-in,
.home-page .contact-link {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-page .about-link,
.home-page .sign-in {
  padding: 0 10px;
}
.home-page .about-link:hover,
.home-page .about-link:focus-visible,
.home-page .sign-in:hover,
.home-page .sign-in:focus-visible {
  color: #003d70 !important;
  background: rgba(255,255,255,.48);
  box-shadow: 0 5px 14px rgba(1,38,73,.12);
  outline: none;
  transform: translateY(-1px);
}
.home-page .register,
.home-page .company-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #03182e;
  border-radius: 8px;
  background: #03182e !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(1,22,43,.22);
}
.home-page .company-session {
  max-width: min(260px, 22vw);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-page .register:hover,
.home-page .register:focus-visible,
.home-page .company-session:hover,
.home-page .company-session:focus-visible {
  background: #072847 !important;
  border-color: #072847;
  color: #fff !important;
  outline: none;
}
.home-page .header-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(3,24,46,.76);
  border-radius: 8px;
  background: rgba(255,255,255,.5);
  color: #03182e !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(255,255,255,.88);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-page .header-logout:hover,
.home-page .header-logout:focus-visible {
  background: #03182e;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(1,22,43,.22);
  outline: none;
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .home-page .about-link {
    position: relative;
    top: 2px;
    margin-left: 14px;
  }
}
@media (max-width: 767px) {
  .home-page.is-logged-in .account-actions {
    display: flex !important;
    grid-template: none;
    align-items: center;
    gap: 6px;
  }
  .home-page.is-logged-in .company-session,
  .home-page.is-logged-in .header-logout {
    min-height: 34px;
    margin: 0;
    padding: 0 10px;
    font-size: 12px;
  }
  .home-page.is-logged-in .company-session { max-width: 43vw; }
}

/* Homepage service suggestions stay light and simple over the map. */
.home-page .search-autocomplete {
  background: #ffffff !important;
  border-color: rgba(137, 195, 234, .9) !important;
  box-shadow: 0 14px 30px rgba(1, 38, 73, .2) !important;
}
.home-page .search-form .search-autocomplete-option {
  background: #ffffff !important;
  border-color: rgba(194, 222, 240, .86) !important;
  color: #102a43 !important;
}
.home-page .search-form .search-autocomplete-option::before {
  color: #295b80 !important;
}
.home-page .search-form .search-autocomplete-option:hover,
.home-page .search-form .search-autocomplete-option:focus-visible,
.home-page .search-form .search-autocomplete-option.is-active {
  background: #eaf6ff !important;
  color: #071e37 !important;
  outline: none;
}