/* =========================================================
   DESIGN TOKENS & GLOBAL STYLES
   ========================================================= */

:root {
  --night: #10161F;
  --night2: #141d29;
  --frost: #EEF2F6;
  --bifrost: #5FB8D6;
  --steel: #4D6A8C;
  --shadow: #2E3D50;
  --muted: #8A99AB;
  --line: #263444;
  --panel: #151f2b;
  --danger: #d87878;
  --ok: #74c69d;
  --max: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--frost);
  font-family: Inter,Arial,sans-serif;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
.eyebrow,
.btn,
.main-nav,
.project-status,
.metric-card strong {
  font-family: "Chakra Petch",Arial,sans-serif;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */

.site-header {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px,calc((100vw - var(--max))/2));
  border-bottom: 1px solid rgba(95,184,214,.12);
  position: relative;
  z-index: 20;
  background: rgba(16,22,31,.94);
  backdrop-filter: blur(14px);
}

.brand {
  width: 250px;
  height: 90px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.brand img {
  width: 250px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  letter-spacing: .08em;
}

.main-nav>a {
  color: #b8c2ce;
  transition: .2s;
}

.main-nav>a:hover {
  color: var(--frost);
}

.client-link {
  padding: 10px 14px;
  border: 1px solid #33465c;
}

.lang-switch {
  display: flex;
  gap: 7px;
  color: #596b80;
}

.lang-switch a.active {
  color: var(--bifrost);
}

.lang-switch i {
  font-style: normal;
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 26px;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 720px;
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  position: relative;
  padding: 85px 30px 110px;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(77,106,140,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(77,106,140,.08) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right,black,transparent 90%);
  opacity: .55;
}

.hero-copy,
.hero-symbol {
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--bifrost);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(46px,6vw,82px);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -.02em;
  max-width: 880px;
  margin: 0 0 28px;
}

.hero-copy>p {
  font-size: 18px;
  color: #aab6c4;
  max-width: 690px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 38px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  letter-spacing: .08em;
  font-size: 13px;
  cursor: pointer;
}

.btn.primary {
  background: var(--bifrost);
  color: #0b131c;
}

.btn.ghost {
  border-color: #36485c;
  color: #d4dde6;
  background: transparent;
}

.btn.wide {
  width: 100%;
}

.hero-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end;
  width: 340px;
}

.hero-symbol img {
  width: 250px;
  opacity: .95;
}

.signal-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--steel),var(--bifrost),transparent);
  margin: 18px 0;
}

.hero-symbol small {
  font-family: "Chakra Petch";
  letter-spacing: .2em;
  color: #6e89a6;
}

.hero-symbol i {
  font-style: normal;
  color: var(--bifrost);
}

/* =========================================================
   COMMON SECTIONS / EXPERTISE
   ========================================================= */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 30px;
}

.section-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 28px;
  margin-bottom: 48px;
}

.section-heading>span {
  font-family: "Chakra Petch";
  color: var(--bifrost);
  border-top: 1px solid var(--bifrost);
  padding-top: 9px;
}

.section-heading h2 {
  font-size: 38px;
  font-weight: 500;
  margin: 0 0 12px;
}

.section-heading p {
  max-width: 780px;
  margin: 0;
  color: #8f9bab;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.capability-card {
  min-height: 310px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  background: linear-gradient(180deg,rgba(255,255,255,.015),transparent);
}

.capability-card>b {
  font: 12px "Chakra Petch";
  color: #61758d;
}

.capability-card h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 50px 0 15px;
}

.capability-card p {
  font-size: 14px;
  color: #8f9bab;
}

.capability-card>span {
  position: absolute;
  right: 25px;
  bottom: 22px;
  color: var(--bifrost);
}

/* =========================================================
   SYSTEM THINKING STATEMENT
   ========================================================= */

.statement {
  max-width: var(--max);
  margin: 30px auto 80px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  padding: 60px 30px;
}

.statement-line {
  background: linear-gradient(135deg,transparent 48%,var(--shadow) 49%,var(--bifrost) 50%,transparent 51%);
  min-height: 300px;
  opacity: .7;
}

.statement h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 25px;
}

.statement p {
  color: #9aa6b5;
  max-width: 620px;
}

/* =========================================================
   PUBLIC REFERENCES
   ========================================================= */

.references {
  border-top: 1px solid rgba(95,184,214,.12);
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.reference-card {
  border: 1px solid var(--line);
  padding-bottom: 25px;
  background: #121a24;
}

.reference-art {
  height: 210px;
  margin-bottom: 25px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(145deg,#182535,#10161f 55%,#1d3445);
  position: relative;
  overflow: hidden;
}

.reference-art:before,
.reference-art:after {
  content: "";
  position: absolute;
  width: 220px;
  height: 1px;
  background: var(--steel);
  transform: rotate(-35deg);
  right: -40px;
  top: 80px;
}

.reference-art:after {
  top: 112px;
  background: var(--bifrost);
}

.reference-art span {
  font: 11px "Chakra Petch";
  letter-spacing: .25em;
  color: #8194a8;
}

.reference-card h3,
.reference-card p {
  margin-left: 24px;
  margin-right: 24px;
}

.reference-card h3 {
  font-size: 21px;
}

.reference-card p {
  font-size: 14px;
  color: #8f9bab;
}

/* =========================================================
   CONTACT CTA
   ========================================================= */

.contact-strip {
  max-width: var(--max);
  margin: 40px auto 100px;
  padding: 54px 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-strip>span {
  font: 11px "Chakra Petch";
  letter-spacing: .28em;
  color: #64788f;
}

.contact-strip h2 {
  font-size: 38px;
  font-weight: 500;
  max-width: 780px;
}

.contact-strip a {
  color: var(--bifrost);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  max-width: var(--max);
  margin: auto;
  padding: 45px 30px 55px;
  border-top: 1px solid rgba(95,184,214,.12);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 40px;
  color: #718197;
  font-size: 13px;
}

.site-footer>div:first-child {
  display: grid;
  grid-template-columns: 46px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}

.footer-mark {
  width: 44px;
  grid-row: 1/3;
}

.site-footer strong {
  font: 18px "Chakra Petch";
  letter-spacing: .15em;
  color: #d9e0e7;
}

.site-footer strong span {
  color: var(--bifrost);
}

.site-footer p {
  margin: 1px 0;
  font-family: "Chakra Petch";
  letter-spacing: .08em;
}

.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-contact b {
  color: #c8d1da;
}

.footer-copy {
  align-self: end;
}

/* =========================================================
   PUBLIC SUBPAGES
   ========================================================= */

.page-hero {
  max-width: var(--max);
  margin: auto;
  padding: 120px 30px 70px;
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(42px,5vw,68px);
  font-weight: 500;
  line-height: 1.08;
  max-width: 900px;
  margin: 0 0 25px;
}

.page-hero p {
  font-size: 18px;
  color: #9aa6b5;
  max-width: 760px;
}

.prose-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line);
  padding: 1px;
}

.prose-grid article {
  background: var(--night);
  padding: 42px;
}

.prose-grid h2 {
  font-size: 24px;
  font-weight: 500;
}

.prose-grid p {
  color: #8f9bab;
}

.contact-panel {
  max-width: var(--max);
  margin: 70px auto 110px;
  border: 1px solid var(--line);
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
}

.contact-panel span {
  font: 11px "Chakra Petch";
  letter-spacing: .25em;
  color: #64788f;
}

.contact-panel h2 {
  font-size: 34px;
}

.contact-panel a {
  display: block;
  color: var(--bifrost);
  margin: 7px 0;
}

.contact-mark img {
  opacity: .65;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-shell {
  max-width: 1100px;
  margin: 100px auto 120px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 90px;
  align-items: center;
}

.login-intro h1 {
  font-size: 58px;
  font-weight: 500;
  margin: 0;
}

.login-intro>p {
  color: #99a6b5;
  max-width: 520px;
}

.secure-note {
  font: 11px "Chakra Petch";
  letter-spacing: .12em;
  color: #74859a;
  margin-top: 35px;
}

.secure-note span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 7px;
}

.login-card {
  border: 1px solid var(--line);
  background: #121b25;
  padding: 36px;
}

.login-card label {
  display: block;
  font-size: 12px;
  color: #8795a7;
  margin-bottom: 22px;
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: #0f1620;
  border: 1px solid #314154;
  color: white;
  padding: 14px;
  font: 15px Inter;
}

.form-error {
  border-left: 3px solid var(--danger);
  background: rgba(216,120,120,.08);
  padding: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #e8b7b7;
}

/* =========================================================
   CLIENT AREA / PROJECTS
   ========================================================= */

.client-topbar,
.project-header {
  max-width: var(--max);
  margin: auto;
  padding: 60px 30px 36px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.client-topbar h1,
.project-header h1 {
  font-size: 44px;
  font-weight: 500;
  margin: 0;
}

.client-topbar p,
.project-header p {
  color: #8190a3;
}

.client-projects {
  padding-top: 55px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.project-card {
  border: 1px solid var(--line);
  padding: 26px;
  min-height: 250px;
  background: #121b25;
  transition: .2s;
}

.project-card:hover {
  border-color: #48647f;
  transform: translateY(-2px);
}

.project-card-head {
  display: flex;
  justify-content: space-between;
  font: 11px "Chakra Petch";
  letter-spacing: .15em;
  color: #718198;
}

.status-dot {
  font-size: 10px;
  color: #7e8996;
}

.status-dot.online {
  color: var(--ok);
}

.project-card h2 {
  margin-top: 45px;
  font-size: 25px;
}

.project-card p {
  color: #8190a3;
  font-size: 14px;
}

.project-meta {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  font-size: 10px;
  color: #65768b;
}

.project-meta strong {
  color: #9aa8b8;
}

.empty-state {
  border: 1px solid var(--line);
  padding: 40px;
  color: #8594a5;
}

.back-link {
  font: 11px "Chakra Petch";
  letter-spacing: .12em;
  color: #72849a;
  display: inline-block;
  margin-bottom: 24px;
}

.project-status {
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 30px;
}

.project-status>span {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #697586;
  margin-right: 7px;
}

.project-status.online>span {
  background: var(--ok);
  box-shadow: 0 0 18px rgba(116,198,157,.6);
}

.project-status b {
  letter-spacing: .13em;
}

.project-status small {
  display: block;
  color: #69798e;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   TELEMETRY METRICS
   ========================================================= */

.telemetry-grid {
  max-width: var(--max);
  margin: 30px auto 0;
  padding: 0 30px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.metric-card {
  border: 1px solid var(--line);
  padding: 23px;
  background: #121b25;
}

.metric-card>span {
  font: 10px "Chakra Petch";
  letter-spacing: .18em;
  color: #697a8f;
}

.metric-card strong {
  display: block;
  font-size: 35px;
  font-weight: 500;
  margin-top: 14px;
}

.metric-card small {
  color: #718399;
}

.metric-card.accent {
  border-top: 2px solid var(--bifrost);
}

/* =========================================================
   MAP & HISTORY CONTROLS
   ========================================================= */

.map-panel {
  max-width: calc(var(--max) - 60px);
  margin: 28px auto;
  border: 1px solid var(--line);
  background: #121b25;
}

.panel-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 22px 24px;
}

.panel-toolbar h2 {
  font-size: 24px;
  margin: 0;
}

.history-controls {
  display: flex;
  gap: 6px;
}

.history-controls a {
  font: 10px "Chakra Petch";
  border: 1px solid var(--line);
  padding: 8px 10px;
  color: #74869b;
}

.history-controls a.active {
  border-color: var(--bifrost);
  color: var(--bifrost);
}

#telemetry-map {
  height: 520px;
  background: #0b1118;
}

.map-footer {
  display: flex;
  gap: 30px;
  padding: 12px 20px;
  color: #66778b;
  font: 10px "Chakra Petch";
  letter-spacing: .08em;
}

.map-footer b {
  color: #9bacbd;
}

/* =========================================================
   TELEMETRY DETAILS TABLE
   ========================================================= */

.data-table-section {
  padding-top: 45px;
}

.section-heading.compact {
  grid-template-columns: 128px 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 25px;
}

.telemetry-table {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.telemetry-table>div {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.telemetry-table span {
  font-size: 10px;
  color: #6f8094;
}

.telemetry-table b {
  font: 14px "Chakra Petch";
  margin-top: 8px;
}

/* =========================================================
   LEAFLET MAP CORE + HAL4TEC THEME
   Local core rules intentionally included so the map remains
   correctly laid out even if the external Leaflet CSS CDN is
   unavailable. They also neutralise the global img rule above.
   ========================================================= */

.leaflet-container {
  position: relative;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
  background: #10161F;
  outline-offset: 1px;
  -webkit-tap-highlight-color: transparent;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-map-pane,
.leaflet-control-container {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-map-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  max-width: none !important;
  max-height: none !important;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.leaflet-tile {
  width: 256px;
  height: 256px;
  visibility: hidden;
  filter: saturate(.55) brightness(.72) contrast(1.05);
}

.leaflet-tile-loaded { visibility: inherit; }

.leaflet-zoom-animated {
  transform-origin: 0 0;
}

.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: auto;
  float: left;
  clear: both;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }
.leaflet-right .leaflet-control { float: right; }
.leaflet-top .leaflet-control { margin-top: 10px; }
.leaflet-bottom .leaflet-control { margin-bottom: 10px; }
.leaflet-left .leaflet-control { margin-left: 10px; }
.leaflet-right .leaflet-control { margin-right: 10px; }

.leaflet-control-zoom {
  border: 1px solid var(--line);
  background: rgba(16,22,31,.92);
}

.leaflet-control-zoom a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--frost);
  background: rgba(16,22,31,.94);
  border-bottom: 1px solid var(--line);
}

.leaflet-control-zoom a:last-child { border-bottom: 0; }

.leaflet-control-attribution {
  padding: 2px 5px;
  font-size: 9px;
  color: #708296;
  background: rgba(16,22,31,.84);
}

.leaflet-control-attribution a { color: var(--bifrost); }

.map-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 36px;
  background:
    linear-gradient(rgba(95,184,214,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,184,214,.035) 1px, transparent 1px),
    #0b1118;
  background-size: 32px 32px;
  text-align: center;
}

.map-empty span {
  display: block;
  color: var(--bifrost);
  font: 11px "Chakra Petch", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.map-empty strong {
  display: block;
  margin-top: 8px;
  font: 500 24px "Chakra Petch", Arial, sans-serif;
  color: var(--frost);
}

.map-empty p {
  max-width: 520px;
  margin: 10px auto 0;
  color: #74869b;
  font-size: 13px;
}

/* =========================================================
   RESPONSIVE LAYOUT – BASE
   ========================================================= */

@media (max-width:900px) {
  .site-header {
    padding: 0 20px;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: #10161f;
    padding: 25px;
    border-bottom: 1px solid var(--line);
  }

  .main-nav.open {
    display: flex;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 65px;
  }

  .hero-symbol {
    display: none;
  }

  .capability-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .statement {
    grid-template-columns: 1fr;
  }

  .statement-line {
    min-height: 180px;
  }

  .reference-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .login-shell {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .project-header {
    align-items: flex-start;
    gap: 30px;
  }

  .telemetry-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .telemetry-table {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:600px) {
  .brand {
    width: 190px;
  }

  .brand img {
    width: 190px;
  }

  .hero {
    min-height: 620px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section {
    padding: 70px 20px;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .capability-grid {
    grid-template-columns: 1fr;
  }

  .statement {
    padding: 35px 20px;
  }

  .reference-grid {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: 80px 20px 50px;
  }

  .prose-grid {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    grid-template-columns: 1fr;
    margin: 45px 20px;
    padding: 30px;
  }

  .contact-mark {
    display: none;
  }

  .login-shell {
    margin: 50px auto;
    padding: 20px;
  }

  .login-intro h1 {
    font-size: 44px;
  }

  .client-topbar,
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 45px 20px 30px;
  }

  .project-status {
    text-align: left;
    border-left: 0;
    padding-left: 0;
  }

  .telemetry-grid {
    padding: 0 20px;
    grid-template-columns: 1fr 1fr;
  }

  .map-panel {
    margin: 20px;
  }

  .panel-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .history-controls {
    flex-wrap: wrap;
  }

  #telemetry-map {
    height: 380px;
  }

  .telemetry-table {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================
   HAL4TEC VISUAL TUNING v0.1.4
   Final alignment corrections for header, hero and footer
   ========================================================= */

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.site-header {
  height: 136px;
  padding: 0 max(30px, calc((100vw - var(--max)) / 2 + 30px));
}

/*
 * The replacement SVG is tightly cropped, so the visible logo
 * now starts almost exactly at the left edge of this container.
 */
.brand {
  width: 190px;
  height: 128px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.brand img {
  width: 170px;
  max-width: none;
  height: auto;
}

.main-nav {
  gap: 36px;
  font-size: 16px;
  letter-spacing: .07em;
}

.client-link {
  padding: 13px 20px;
}

.lang-switch {
  gap: 8px;
  font-size: 15px;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
  align-items: start;
  padding: 85px 30px 110px;
}

/*
 * Lift the complete Bifrost block so the symbol visually aligns
 * with the main "Engineering beyond..." headline.
 */
.hero-symbol {
  align-self: start;
  justify-self: end;
  width: 360px;
  margin-top: -10px;
}

.hero-symbol img {
  width: 240px;
}

.signal-line {
  margin: 18px 0 16px;
}

.hero-symbol small {
  font-size: 15px;
  letter-spacing: .18em;
}

/* ---------------------------------------------------------
   Contact strip
   --------------------------------------------------------- */

.contact-strip h2 {
  font-size: 46px;
  line-height: 1.18;
  max-width: 760px;
  margin: 14px 0 28px;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.site-footer {
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  padding: 36px 30px 40px;
}

.site-footer > div.footer-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-column: 1;
}

.footer-logo {
  width: 185px;
  max-width: none;
  height: auto;
}

/* Copyright is intentionally centered in the footer. */
.footer-copy {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  text-align: center;
}

/* Contact block is intentionally on the right. */
.footer-contact {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .site-header {
    height: 124px;
    padding: 0 20px;
  }

  .brand {
    width: 170px;
    height: 116px;
  }

  .brand img {
    width: 155px;
  }

  .main-nav {
    top: 124px;
    font-size: 14px;
  }

  .hero {
    padding-top: 70px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer > div.footer-brand {
    justify-content: center;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-contact {
    grid-column: auto;
    align-items: center;
    text-align: center;
  }

  .footer-copy {
    grid-column: auto;
    align-self: center;
    justify-self: center;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {
  .site-header {
    height: 112px;
  }

  .brand {
    width: 150px;
    height: 104px;
  }

  .brand img {
    width: 138px;
  }

  .main-nav {
    top: 112px;
  }

  .hero {
    padding-top: 60px;
  }

  .hero-symbol {
    display: none;
  }

  .footer-logo {
    width: 170px;
  }

  .contact-strip h2 {
    font-size: 34px;
  }
}

/* =========================================================
   HAL4TEC ADMINISTRATION / DEVICE DASHBOARD v0.2
   ========================================================= */
.admin-nav-link {
  font: 11px "Chakra Petch";
  letter-spacing: .14em;
  color: var(--bifrost);
}

.admin-page,
.admin-page main {
  background: #0d141d;
}

.admin-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 38px 30px 80px;
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 30px;
}

.admin-sidebar {
  border: 1px solid var(--line);
  background: #111a24;
  padding: 24px 18px;
  align-self: start;
  position: sticky;
  top: 24px;
}

.admin-sidebar-title span,
.admin-sidebar-title b {
  display: block;
  font-family: "Chakra Petch";
  letter-spacing: .13em;
}
.admin-sidebar-title span { color: var(--bifrost); font-size: 12px; }
.admin-sidebar-title b { color: #d9e2ec; font-size: 14px; margin-top: 5px; }
.admin-sidebar nav { margin-top: 28px; display: grid; gap: 5px; }
.admin-sidebar nav a {
  padding: 11px 12px;
  border-left: 2px solid transparent;
  color: #8292a5;
  font-size: 13px;
}
.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
  color: #e2eaf2;
  background: #162230;
  border-left-color: var(--bifrost);
}
.admin-sidebar-user { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-sidebar-user span,
.admin-sidebar-user a { display: block; font-size: 11px; }
.admin-sidebar-user span { color: #9daabb; }
.admin-sidebar-user a { color: var(--bifrost); margin-top: 7px; }

.admin-main { min-width: 0; }
.admin-page-head {
  min-height: 120px;
  padding: 8px 0 28px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.admin-page-head h1 { font-size: 38px; font-weight: 500; margin: 5px 0; }
.admin-page-head p { color: #7d8da1; margin: 0; max-width: 780px; }
.admin-page-head .back-link { margin-bottom: 12px; }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.admin-stat-grid > * {
  min-height: 120px;
  padding: 19px;
  border: 1px solid var(--line);
  background: #111a24;
}
.admin-stat-grid span { display: block; color: #6e7f94; font: 10px "Chakra Petch"; letter-spacing: .13em; }
.admin-stat-grid strong { display: block; margin-top: 22px; font: 34px "Chakra Petch"; color: #dce5ef; }
.admin-stat-grid .ok strong { color: var(--ok); }

.admin-two-col { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.75fr); gap: 20px; }
.admin-panel {
  border: 1px solid var(--line);
  background: #111a24;
  padding: 24px;
  margin-bottom: 22px;
}
.admin-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.admin-panel-head h2 { margin: 4px 0 0; font-size: 22px; }
.admin-panel-head p { margin: 6px 0 0; color: #728399; font-size: 13px; }
.admin-panel-head > a { color: var(--bifrost); font-size: 12px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.admin-table th {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid #2b3848;
  color: #66798f;
  font: 10px "Chakra Petch";
  letter-spacing: .12em;
  white-space: nowrap;
}
.admin-table td { padding: 13px 12px; border-bottom: 1px solid #202c39; color: #a7b3c1; font-size: 12px; vertical-align: middle; }
.admin-table tbody tr:hover { background: #141f2b; }
.admin-table td a { color: #e0e8ef; font-weight: 600; }
.admin-table td small { display: block; color: #65778d; margin-top: 4px; }
.admin-table code { color: #93cbd2; font: 11px "Chakra Petch"; }
.admin-state { font: 9px "Chakra Petch"; letter-spacing: .1em; color: #7b8795; white-space: nowrap; }
.admin-state.online { color: var(--ok); }

.admin-audit-list { display: grid; }
.admin-audit-list > div { padding: 12px 0; border-bottom: 1px solid #202c39; }
.admin-audit-list span,.admin-audit-list small { color: #687a8e; font-size: 10px; }
.admin-audit-list b { display: block; color: #aeb9c6; font-size: 12px; margin: 3px 0; }
.audit-json { max-width: 420px; overflow-wrap: anywhere; }

.admin-form label { display: block; color: #91a0b2; font-size: 11px; }
.admin-form label > small { display: block; color: #607388; margin-top: 6px; line-height: 1.45; }
.admin-form input:not([type="checkbox"]),
.admin-form select,
.admin-form textarea,
.inline-form input,
.variable-add input,
.variable-add select,
.module-editor-row input:not([type="checkbox"]) {
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #314154;
  background: #0e1620;
  color: #e2e8ef;
  font: 13px Inter;
  outline: none;
}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus,
.inline-form input:focus,.variable-add input:focus,.variable-add select:focus { border-color: #5b8195; }
.admin-form textarea { resize: vertical; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 20px; }
.check-row { margin-top: 17px; display: flex !important; align-items: center; gap: 9px; }
.check-card { border: 1px solid #2e3d4f; padding: 14px; display: flex !important; gap: 12px; align-items: start; margin-top: 0 !important; }
.check-card span b,.check-card span small { display: block; }
.check-card span b { color: #c6d0dc; }
.check-card span small { color: #6e8196; margin-top: 5px; }
.admin-actions { margin-top: 24px; padding-top: 18px; border-top: 1px solid #263442; display: flex; gap: 10px; flex-wrap: wrap; }
.btn.small { padding: 9px 12px; font-size: 10px; }
.admin-errors,.admin-flash { border-left: 3px solid var(--danger); padding: 13px 15px; margin-bottom: 18px; background: rgba(216,120,120,.08); color: #e1b5b5; font-size: 12px; }
.admin-flash.success { border-left-color: var(--ok); background: rgba(116,198,157,.08); color: #aad6bf; }
.admin-flash.error { border-left-color: var(--danger); }

.module-editor { display: grid; gap: 8px; }
.module-editor-row { display: grid; grid-template-columns: 44px 130px minmax(220px,1fr) 90px; align-items: center; gap: 10px; border: 1px solid #263442; padding: 9px 11px; background: #0f1721; }
.module-editor-row code { color: #7891a8; font: 10px "Chakra Petch"; }
.module-editor-row input { margin-top: 0 !important; }
.module-editor-row .order-input { width: 90px; }
.switch input { display: none; }
.switch span { width: 34px; height: 18px; border-radius: 20px; background: #344150; display: block; position: relative; }
.switch span:after { content:""; width: 12px; height:12px; border-radius:50%; background:#8a98a8; position:absolute; top:3px; left:3px; transition:.15s; }
.switch input:checked + span { background: rgba(116,198,157,.28); }
.switch input:checked + span:after { left:19px; background:var(--ok); }

.token-reveal { border: 1px solid #50796a; background: rgba(116,198,157,.07); padding: 18px; margin-bottom: 18px; }
.token-reveal b,.token-reveal small { display:block; }
.token-reveal b { color: var(--ok); font: 11px "Chakra Petch"; letter-spacing:.12em; }
.token-reveal code { display:block; margin:12px 0; padding:12px; background:#0a1219; color:#d6edf0; overflow-wrap:anywhere; }
.token-reveal small { color:#80988e; }
.inline-form { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:10px; align-items:end; margin-bottom:20px; }
.inline-form input { margin-top:0; }
.text-button { border:0; background:none; color:#8da1b6; font:11px Inter; cursor:pointer; padding:0; }
.text-button.danger { color:#cf8888; }
.variable-add { margin-top:18px; display:grid; grid-template-columns:1.4fr 1.3fr .7fr .7fr .5fr auto; gap:8px; align-items:end; }
.variable-add input,.variable-add select { margin-top:0; }
.admin-subsection { margin-top:28px; padding-top:24px; border-top:1px solid #263442; }
.admin-subsection h2 { margin:5px 0; }
.admin-subsection p { color:#708297; font-size:12px; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:15px; }
.permission-grid label { border:1px solid #2a3948; padding:11px; display:grid; grid-template-columns:1fr 135px; align-items:center; gap:12px; }
.permission-grid b,.permission-grid small { display:block; }
.permission-grid b { color:#c3ced9; }
.permission-grid small { color:#66798d; margin-top:3px; }
.permission-grid select { margin-top:0; }

.device-switcher { max-width:var(--max); margin:22px auto 0; padding:0 30px; display:flex; gap:8px; overflow-x:auto; }
.device-switcher a { min-width:190px; padding:13px 16px; border:1px solid var(--line); background:#111a24; }
.device-switcher a.active { border-color:#507185; }
.device-switcher span,.device-switcher small { display:block; color:#6d8095; font-size:9px; }
.device-switcher b { display:block; color:#c8d2dc; margin:3px 0; font-size:13px; }
.device-identity { max-width:var(--max); margin:25px auto 0; padding:0 30px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.device-identity h2 { font-size:27px; margin:4px 0; }
.device-identity p { color:#718299; margin:0; }
.device-identity > div:last-child { text-align:right; }
.device-identity > div:last-child span,.device-identity > div:last-child small { display:block; color:#6c7e92; font-size:9px; }
.device-identity code { display:block; color:#95cbd0; margin:5px 0; }
.telemetry-grid-five { grid-template-columns:repeat(5,1fr); }
.dashboard-module { padding-top:45px; }
.fup-panel { border:1px solid var(--line); background:#111a24; display:grid; grid-template-columns:1.2fr 1.8fr; }
.fup-primary { padding:28px; border-right:1px solid var(--line); }
.fup-primary > span,.fup-details span { color:#6c7f94; font:10px "Chakra Petch"; letter-spacing:.12em; }
.fup-primary strong { display:block; font:35px "Chakra Petch"; margin:12px 0 3px; }
.fup-primary small { color:#73869a; }
.fup-bar { margin-top:22px; height:7px; background:#263340; overflow:hidden; }
.fup-bar i { height:100%; display:block; background:var(--bifrost); max-width:100%; }
.fup-details { display:grid; grid-template-columns:repeat(2,1fr); }
.fup-details > div { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.fup-details b { display:block; margin-top:6px; font:17px "Chakra Petch"; }
.connectivity-table { grid-template-columns:repeat(3,1fr); }
.wrap-value { overflow-wrap:anywhere; }
.signal-strength { display:flex; flex-direction:column; gap:10px; }
.signal-strength-bar { height:7px; background:#263340; overflow:hidden; }
.signal-strength-bar i { display:block; height:100%; background:var(--bifrost); max-width:100%; }
.signal-strength small { color:#6f8094; font-size:10px; }
.integration-placeholder { border:1px dashed #3a4b5d; background:#101922; padding:30px; }
.integration-placeholder span { color:#6b7d91; font:10px "Chakra Petch"; letter-spacing:.13em; }
.integration-placeholder strong { display:block; font:28px "Chakra Petch"; color:#8ca5b5; margin:10px 0; }
.integration-placeholder p { color:#718398; max-width:700px; margin:0; }

@media (max-width:1100px) {
  .admin-stat-grid { grid-template-columns:repeat(3,1fr); }
  .admin-two-col { grid-template-columns:1fr; }
  .telemetry-grid-five { grid-template-columns:repeat(3,1fr); }
  .variable-add { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; padding:24px 20px 60px; }
  .admin-sidebar { position:static; }
  .admin-sidebar nav { grid-template-columns:repeat(3,1fr); }
  .admin-form-grid,.permission-grid { grid-template-columns:1fr; }
  .module-editor-row { grid-template-columns:40px 100px minmax(180px,1fr) 70px; }
  .fup-panel { grid-template-columns:1fr; }
  .fup-primary { border-right:0; border-bottom:1px solid var(--line); }
  .connectivity-table { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .admin-page-head { flex-direction:column; align-items:flex-start; }
  .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
  .admin-sidebar nav { grid-template-columns:1fr 1fr; }
  .module-editor-row { grid-template-columns:40px 1fr 70px; }
  .module-editor-row code { grid-column:2; }
  .variable-add { grid-template-columns:1fr; }
  .inline-form { grid-template-columns:1fr; }
  .telemetry-grid-five { grid-template-columns:1fr 1fr; }
  .device-identity { flex-direction:column; align-items:flex-start; }
  .device-identity > div:last-child { text-align:left; }
  .connectivity-table { grid-template-columns:1fr; }
  .fup-details { grid-template-columns:1fr; }
}

/* =========================================================
   GPS TRACK FILTER / MAP MODE CONTROLS
   ========================================================= */
.map-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.track-mode-controls {
  display: flex;
  gap: 6px;
}

.track-mode-controls button {
  appearance: none;
  background: transparent;
  font: 10px "Chakra Petch";
  border: 1px solid var(--line);
  padding: 8px 10px;
  color: #74869b;
  cursor: pointer;
}

.track-mode-controls button.active {
  border-color: var(--bifrost);
  color: var(--bifrost);
}

.admin-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  color: #7f91a5;
  font-size: 12px;
}

.admin-note b { color: #9fb1c2; }

@media (max-width: 760px) {
  .map-controls {
    width: 100%;
    justify-content: flex-start;
  }
}


/* HAL4TEC v4 - LAN control + GPS track hover */
.lan-control-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:20px; }
.lan-control-grid > div { padding:20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.lan-control-grid > div > span { color:#6f8094; font:10px "Chakra Petch"; letter-spacing:.12em; }
.lan-control-grid > div > b:not(.admin-state) { font:16px "Chakra Petch"; }
.lan-control-grid small { color:#6f8094; }
.lan-control-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lan-control-actions .inline-form { flex:1 1 520px; }
.leaflet-tooltip.hal4tec-track-tooltip { background:#101922; color:#dce7ef; border:1px solid #38516a; border-radius:0; box-shadow:0 8px 24px rgba(0,0,0,.35); font-family:"Chakra Petch",sans-serif; padding:9px 11px; }
.leaflet-tooltip.hal4tec-track-tooltip:before { border-top-color:#38516a; }
.hal4tec-track-tooltip .track-time { color:var(--bifrost); font-weight:600; margin-bottom:3px; }
.hal4tec-track-tooltip .track-meta { color:#8fa4b8; font-size:11px; }
@media (max-width:900px) { .lan-control-grid { grid-template-columns:1fr; } }


/* =========================================================
   HAL4TEC GPS TRACK POINTS v4.1.2
   Visible points + hover/click timestamp detail.
   ========================================================= */

.hal4tec-track-point {
  cursor: pointer;
  stroke: var(--bifrost);
  fill: #101922;
}

.leaflet-tooltip.hal4tec-track-tooltip {
  pointer-events: none;
}

.leaflet-popup.hal4tec-track-popup .leaflet-popup-content-wrapper {
  background: #101922;
  color: #dce7ef;
  border: 1px solid #38516a;
  border-radius: 0;
}

.leaflet-popup.hal4tec-track-popup .leaflet-popup-tip {
  background: #101922;
}

.leaflet-popup.hal4tec-track-popup .leaflet-popup-content {
  margin: 10px 12px;
  font-family: "Chakra Petch", sans-serif;
}

.leaflet-popup.hal4tec-track-popup .track-time {
  color: var(--bifrost);
  font-weight: 600;
  margin-bottom: 3px;
}

.leaflet-popup.hal4tec-track-popup .track-meta {
  color: #8fa4b8;
  font-size: 11px;
}


/* =========================================================
   HAL4TEC / LEAFLET INTERACTION FIX v4.1.3
   SVG path markers need pointer-events:auto to receive
   mouseover/click events. The points were visible before,
   but hover could not reach them.
   ========================================================= */

.leaflet-pane > svg path {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: auto;
}

.leaflet-pane > svg path.hal4tec-track-point {
  pointer-events: auto;
  cursor: pointer;
}

/* =========================================================
   HAL4TEC EDGE / PLC DATA STATUS v5.0
   ========================================================= */

.plc-status-card.plc-ok { border-top: 2px solid var(--ok); }
.plc-status-card.plc-stale { border-top: 2px solid #d4aa67; }
.plc-status-card.plc-no-data { border-top: 2px solid #697586; }

.plc-source-status {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: 18px;
}
.plc-source-status > div {
  min-width: 0;
  padding: 17px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plc-source-status span {
  font: 9px "Chakra Petch";
  letter-spacing: .12em;
  color: #6f8094;
}
.plc-source-status b {
  margin-top: 8px;
  font: 14px "Chakra Petch";
  color: #c7d1dc;
  overflow-wrap: anywhere;
}
.plc-source-status small { margin-top: 5px; color: #66798d; }
.plc-source-status.ok > div:first-child b { color: var(--ok); }
.plc-source-status.stale > div:first-child b { color: #d4aa67; }
.plc-source-status.no-data > div:first-child b { color: #8594a5; }
.plc-variable-table span small { color: #52677c; font-size: 8px; }

.variable-add-profile {
  grid-template-columns: 1.4fr 1.3fr .7fr .55fr .7fr .7fr .55fr .5fr 1.2fr auto;
}

@media (max-width:1100px) {
  .plc-source-status { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .variable-add-profile { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:600px) {
  .plc-source-status { grid-template-columns: 1fr; }
  .variable-add-profile { grid-template-columns: 1fr; }
}