*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:   #0b1c2d;
  --secondary: #1f3a56;
  --accent:    #ff6a2a;
  --accent2:   #ff8c57;
  --light:     #f5f7fa;
  --muted:     #8a9ab0;
  --text:      #1c1c1c;
  --dark-card: #111d2b;
  --border:    rgba(255,255,255,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── NAV ─── */
/* Floating rounded bar. Detaches from the edges once the page is scrolled,
   and swaps between a dark and a light theme depending on the section behind
   it (toggled by nav.js via .nav--dark / .nav--light). */
nav {
  position: fixed;
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 0.9rem 0 1.35rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(11,28,45,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  overflow: visible;
  transition:
    top 0.35s ease, left 0.35s ease, right 0.35s ease, height 0.35s ease,
    border-radius 0.35s ease, background-color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease;
}

/* at the very top of the page: flush, full-width, edge to edge */
nav.nav--top {
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  border-radius: 0;
  border-width: 0 0 1px 0;
  box-shadow: none;
}

/* over dark sections */
nav.nav--dark {
  background: rgba(11,28,45,0.72);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}
nav.nav--dark.nav--top { box-shadow: none; }

/* over light sections */
nav.nav--light {
  background: rgba(246,248,251,0.82);
  border-color: rgba(11,28,45,0.09);
  box-shadow: 0 12px 34px rgba(11,28,45,0.10);
}
nav.nav--light.nav--top { box-shadow: none; }

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.nav-logo span { color: var(--accent); }

.nav-logo img {
  height: 30px;
  width: auto;
  display: block;
  /* transparent white artwork — shown as-is on the dark bar */
  filter: none;
  transition: filter 0.35s ease;
}

/* dark mark on the light bar */
nav.nav--light .nav-logo img {
  filter: brightness(0);
}

/* LinkedIn mark — sits just right of the logo and follows the bar theme */
.nav-social {
  display: inline-flex;
  align-items: center;
  margin-left: 0.95rem;
  color: #fff;
  opacity: 0.72;
  transition: opacity 0.2s ease, color 0.35s ease;
}
.nav-social svg { display: block; width: 20px; height: 20px; }
.nav-social:hover { opacity: 1; }
nav.nav--light .nav-social { color: var(--primary); }

/* Hamburger — hidden on desktop, shown by the responsive block below */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
nav.nav--light .nav-toggle { color: var(--primary); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
nav.nav--open .nav-toggle span { background: transparent; }
nav.nav--open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
nav.nav--open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-links a:hover { color: #fff; }

nav.nav--light .nav-links a { color: rgba(11,28,45,0.66); }
nav.nav--light .nav-links a:hover { color: var(--primary); }

/* hover: a thin rule in the current text colour that grows out from the middle
   of the word to both edges */
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 0.6rem 1.35rem;
  border-radius: 100px;
  font-weight: 700 !important;
  transition: background 0.2s, transform 0.15s !important;
}

.nav-cta:hover { background: var(--accent2) !important; transform: translateY(-1px); }

/* ─── SOLUTIONS DROPDOWN ─── */
.nav-links .has-submenu { position: relative; }

.submenu {
  position: absolute;
  top: calc(100% + 1.65rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 5;
  min-width: 234px;
  list-style: none;
  padding: 0.4rem;
  border-radius: 12px;
  background: rgba(11,28,45,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  transition-delay: 0s;            /* closes immediately on mouse-out */
}

/* invisible bridge so the pointer can travel from the link into the panel */
.submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.9rem;
  height: 2.1rem;
}

.nav-links .has-submenu:hover .submenu,
.nav-links .has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.25s;         /* hover intent: wait before opening */
}

/* keyboard focus opens without the wait */
.nav-links .has-submenu:focus-within .submenu {
  transition-delay: 0s;
}

.submenu li { display: block; }

.submenu a {
  display: block;
  padding: 0.62rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255,255,255,0.78);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-links .submenu a::after { content: none; display: none; }
.submenu a:hover { background: rgba(255,255,255,0.09); color: #fff; }

nav.nav--light .submenu {
  background: rgba(246,248,251,0.96);
  border-color: rgba(11,28,45,0.1);
  box-shadow: 0 18px 44px rgba(11,28,45,0.16);
}

nav.nav--light .submenu a { color: rgba(11,28,45,0.72); }
nav.nav--light .submenu a:hover { background: rgba(11,28,45,0.06); color: var(--primary); }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(to bottom, rgba(11,28,45,0) 84%, var(--primary) 100%),
    linear-gradient(160deg, #12283f 0%, #0b1c2d 55%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 8rem 2.5rem 5rem;
}

.hero-inner {
  max-width: 1200px;
  margin: auto;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,106,42,0.15);
  border: 1px solid rgba(255,106,42,0.4);
  color: var(--accent2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.8rem;
}

.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.5px;
  margin-bottom: 1.5rem;
}

.hero h1 .hl {
  display: block;
  white-space: nowrap;
}

.hero h1 .hl-accent {
  color: var(--accent);
}

@media (max-width: 620px) {
  .hero h1 .hl { white-space: normal; }
}

.hero p {
  max-width: 580px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.15s;
}

.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
}

.stat-item strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.stat-item span {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── SECTION WRAPPER ─── */
.section {
  max-width: 1200px;
  margin: auto;
  padding: 6rem 2.5rem;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 1.05rem;
  color: #555;
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 3.5rem;
}

/* ─── SIDE DECO ───
   A faint dot texture in the empty gutters beside the content.
   Only appears once the viewport is wider than the 1200px content column,
   and fades out before it reaches the text. Tint is set per section
   via --deco-dot so it stays within each section's colour scheme. */
.deco { position: relative; }
.deco > * { position: relative; z-index: 1; }

.deco::before,
.deco::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(0px, calc((100% - 1240px) / 2), 190px);
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--deco-dot, rgba(255,255,255,0.05)) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

.deco::before {
  left: 0;
  -webkit-mask: linear-gradient(to right, #000, transparent);
          mask: linear-gradient(to right, #000, transparent);
}

.deco::after {
  right: 0;
  -webkit-mask: linear-gradient(to left, #000, transparent);
          mask: linear-gradient(to left, #000, transparent);
}

.usecases-wrap { --deco-dot: rgba(255,255,255,0.05); }
.hardware-wrap { --deco-dot: rgba(255,255,255,0.055); }
.platform-wrap { --deco-dot: rgba(255,255,255,0.075); }
.contact-wrap  { --deco-dot: rgba(255,255,255,0.06); }
.team-wrap     { --deco-dot: rgba(11,28,45,0.05); }

/* ─── USE CASES ─── */
.usecases-wrap {
  background: var(--primary);
}

.usecases-wrap .section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.usecases-wrap .section-title { color: #fff; }
.usecases-wrap .section-sub   { color: var(--muted); }

.usecase-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .usecase-cards { grid-template-columns: 1fr; }
}

.usecase-card {
  display: flex;
  flex-direction: column;
  background: #1b2d42;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.usecase-card .usecase-tag { align-self: flex-start; }

.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  border-color: rgba(255,106,42,0.45);
}

/* click affordance — arrow slides in on hover */
.usecase-card::after {
  content: '\2192';
  position: absolute;
  right: 1.6rem;
  bottom: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}

.usecase-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.usecase-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.usecase-icon {
  width: 56px; height: 56px;
  background: rgba(255,106,42,0.12);
  border: 1px solid rgba(255,106,42,0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
  font-size: 1.6rem;
}

.usecase-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,106,42,0.1);
  border: 1px solid rgba(255,106,42,0.2);
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.usecase-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.usecase-card p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.93rem;
  margin-bottom: 1.6rem;
}

/* photo under the card text — inset so the card's blue frames it, cropped to
   fit, pinned to the bottom so every card's image lines up */
.usecase-card img {
  display: block;
  width: 100%;
  height: 158px;
  margin-top: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  object-position: center;
}

.usecase-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.usecase-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
}

.usecase-features li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 0.55rem;
  flex-shrink: 0;
}

/* ─── HARDWARE ─── */
.hardware-wrap {
  /* eases up out of the darker Solutions section */
  background: linear-gradient(#0b1c2d 0, #13293e 90px);
  overflow: hidden;
}

.hardware-inner {
  max-width: 1200px;
  margin: auto;
  padding: 6rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .hardware-inner {
    grid-template-columns: 1fr;
    padding: 4rem 1.4rem;
  }
}

.hardware-text .section-title { color: #fff; }

.hardware-text p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 2.5rem;
}

.hardware-model {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── pod render (interactive 3D) ── */
.hardware-render {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 400px;          /* definite height so <model-viewer> can fill it */
  margin: 0 auto;
}

.hardware-render .model-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,106,42,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hardware-render model-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  cursor: grab;
}

.hardware-render model-viewer:active { cursor: grabbing; }

@media (max-width: 900px) {
  .hardware-render { height: 320px; }
}

/* ─── TEAM ─── */
.team-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
}
.team-head-text { max-width: 640px; }
.team-head-text .section-sub { margin-bottom: 0; }
.team-head-cta {
  flex-shrink: 0;
  align-self: flex-start;
  white-space: nowrap;
  margin-top: 3.4rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; }
}

@media (max-width: 720px) {
  .team-head-row { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .team-head-cta { margin-bottom: 0; }
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 3px solid #e8ecf0;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.team-role {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.team-info p {
  font-size: 0.88rem;
  color: #888;
}

/* ─── CAPABILITIES ─── */
.platform-wrap {
  /* eases up from Our Technology, then softly down into the light Team section.
     Extra bottom padding on the section keeps the white fade clear of the cards. */
  background: linear-gradient(
    #13293e 0,
    #1e4165 90px,
    #1e4165 calc(100% - 110px),
    #ffffff 100%
  );
}

.platform-wrap .section {
  padding-bottom: 10rem;
}

.platform-wrap .section-title { color: #fff; }
.platform-wrap .section-sub   { color: var(--muted); }

.caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.cap-card {
  /* a shade darker than the section behind it, with a faint orange edge */
  background: #16324e;
  border-radius: 10px;
  padding: 2rem;
  border: 1px solid rgba(255,106,42,0.28);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.cap-card:hover {
  box-shadow: 0 12px 34px rgba(0,0,0,0.3);
  border-color: rgba(255,106,42,0.55);
  transform: translateY(-2px);
}

.cap-card .icon {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.cap-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.cap-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
}

/* ─── PARTNER SLIDER ─── */
.partners-wrap {
  background: var(--light);
  overflow: hidden;
  padding: 3.5rem 0;
}

.partners-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 2.5rem;
}

.slider-track-wrap {
  overflow: hidden;
  position: relative;
}

.slider-track-wrap::before,
.slider-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.slider-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--light), transparent);
}

.slider-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--light), transparent);
}

.slider-track {
  display: flex;
  gap: 3rem;
  animation: scroll-left 22s linear infinite;
  width: max-content;
}

.slider-track:hover { animation-play-state: paused; }

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 1rem 2.5rem;
  background: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
  min-width: 320px;
  transition: filter 0.2s;
}

.partner-logo:hover { filter: opacity(0.8); }

.partner-logo img {
  max-height: 60px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
}

/* FT logo has white text — give it a dark background */
.partner-logo.dark-bg {
  background: #1a1a1a;
  border-color: #333;
}

/* ─── CONTACT ─── */
.contact-wrap {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

/* Home page contact band: ease in from the light Partners section, out into the footer */
#contact.contact-wrap {
  background:
    linear-gradient(to bottom, var(--light) 0, rgba(245,247,250,0) 95px),
    linear-gradient(to bottom, rgba(8,15,24,0) 90%, #080f18 100%),
    linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

/* Careers "Open Application" band: white content above and below, so it
   eases in from white at the top and back to white at the bottom */
#open-application.contact-wrap {
  background:
    linear-gradient(to bottom,
      #ffffff 0, rgba(255,255,255,0) 90px,
      rgba(255,255,255,0) calc(100% - 90px), #ffffff 100%),
    linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

/* extra vertical room so the white fade clears the text */
#open-application .section {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.contact-wrap .section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.contact-text .section-title { color: #fff; }
.contact-text .section-sub   { color: var(--muted); margin-bottom: 0; }

.contact-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 3rem;
  text-align: center;
  min-width: 280px;
}

.contact-box p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.contact-box a {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent2);
  text-decoration: none;
}

.contact-box a:hover { text-decoration: underline; }

/* ─── SUBPAGES (contact form, request a demo) ─── */
.subpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.subpage-inner {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: auto;
  padding: 9rem 2.5rem 5rem;
}

.subpage-inner .section-label { color: var(--accent); }
.subpage-inner .section-title { color: var(--primary); }
.subpage-inner .section-sub   { color: #555; margin-bottom: 2.5rem; }

.subpage-inner .hero-actions {
  margin-top: 0.5rem;
}

.subpage-inner .btn-ghost {
  color: var(--secondary);
  border-color: #cdd6e0;
}

.subpage-inner .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── SOLUTION DETAIL (text + media, e.g. Communications / Locator) ─── */
.solution-media {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9rem 2.5rem 5rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}

.solution-media--text-left { grid-template-columns: minmax(260px, 330px) 1fr; }
.solution-media--split {
  grid-template-columns: 0.82fr 1.18fr;
  align-items: start;
}

/* ─── SOLUTION DETAIL PAGES (Emergency Comms, Aerial Threat Detection) ─── */
.comm-page { flex: 1; width: 100%; }

/* HERO: full-width text band on a blurred photo */
.comm-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 9rem 2.5rem 5rem;
}
.comm-hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: url("images/Communication/kaartachtergrond.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(3px);
  opacity: 0.45;
  z-index: 0;
}
.comm-hero--drone::before {
  background-image: url("images/Aerial Threat Detection/DroneUkraine.jpg");
  opacity: 0.34;
}
/* keep the text side readable over the darker drone photo */
.comm-hero--drone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(255,255,255,0.15) 100%);
  z-index: 0;
}
.comm-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.comm-hero .section-label { color: var(--accent); }
.comm-hero .section-title { color: var(--primary); }
.comm-hero .section-sub { color: #3f4650; max-width: 820px; }
.comm-hero .hero-actions { margin-top: 2rem; }
.comm-hero .btn-ghost { color: var(--secondary); border-color: #cdd6e0; }
.comm-hero .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* content blocks: photo + text side by side */
.comm-block { padding: 6rem 2.5rem; }

/* Technology block gets a soft blue tint, fading in and out of white */
.comm-block--tech {
  background: linear-gradient(
    #ffffff 0,
    #e9eef6 120px,
    #e9eef6 calc(100% - 120px),
    #ffffff 100%
  );
}

.comm-block__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 3.75rem;
  align-items: center;
}
.comm-block__inner--text-first { grid-template-columns: 1fr minmax(280px, 380px); }

.comm-block__media { margin: 0; }
.comm-block__media img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e2e7ee;
  object-fit: cover;
  display: block;
}
.comm-block--tech .comm-block__media img { aspect-ratio: 3 / 4; }      /* portrait */
.comm-block--gateway .comm-block__media img { aspect-ratio: 4 / 3; }

.comm-block__text .section-title { color: var(--primary); margin-bottom: 1.2rem; }
.comm-block__text p {
  color: #46505c;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 560px;
}

@media (max-width: 860px) {
  .comm-hero { padding: 7rem 1.4rem 3.5rem; }
  .comm-block { padding: 4rem 1.4rem; }
  .comm-block__inner,
  .comm-block__inner--text-first {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .comm-block__inner--text-first .comm-block__media { order: -1; }
}

.solution-media__col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.solution-media__text .section-sub  { margin-bottom: 1.5rem; }
.solution-media__text .hero-actions { margin-top: 0.5rem; }

.solution-media__text .btn-ghost {
  color: var(--secondary);
  border-color: #cdd6e0;
}

.solution-media__text .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.solution-media__img {
  margin: 0;
}

.solution-media__img img {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  background: var(--light);
  display: block;
}

@media (max-width: 860px) {
  .solution-media,
  .solution-media--text-left,
  .solution-media--split,
  .solution-media--comm {
    grid-template-columns: 1fr;
    padding: 7rem 1.4rem 3.5rem;
    gap: 2rem;
  }
  .solution-media__img img { max-height: 420px; }
  .solution-media--comm .solution-media__img img { height: 240px; }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Application form sits inside a full-width .section (careers page) */
.section > .contact-form,
.section > .form-status {
  max-width: 640px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
}

.form-row input,
.form-row select,
.form-row textarea {
  font: inherit;
  color: var(--text);
  background: var(--light);
  border: 1px solid #d5dce4;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,42,0.15);
}

.form-row textarea {
  resize: vertical;
  min-height: 160px;
}

.form-submit {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 700;
  padding: 0.9rem 2.2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.form-submit:hover { background: var(--accent2); transform: translateY(-1px); }

.form-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.25rem;
}

.form-status {
  margin-top: 1.5rem;
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.form-status.is-success {
  background: #eef2f7;
  border: 1px solid #cdd6e0;
  color: var(--primary);
}

.form-status.is-error {
  background: rgba(255,106,42,0.08);
  border: 1px solid rgba(255,106,42,0.4);
  color: #9a3a12;
}

/* ─── CAREERS ─── */
.careers-hero {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.careers-hero .section-sub {
  margin-bottom: 2rem;
}

.careers-hero__media {
  margin: 0;
}

.careers-hero__media img,
.careers-hero__media .media-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  object-fit: cover;
}

.careers-hero__media .media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--light);
  border: 1px dashed #c7d0da;
  color: #97a3b2;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.careers-hero__media .media-placeholder::before {
  content: "";
  width: 46px;
  height: 46px;
  border: 2px dashed #c7d0da;
  border-radius: 12px;
}

@media (max-width: 820px) {
  .careers-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.job-card {
  display: flex;
  flex-direction: column;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.job-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,106,42,0.1);
  border: 1px solid rgba(255,106,42,0.2);
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
}

.job-tag.is-type {
  color: var(--secondary);
  background: rgba(31,58,86,0.08);
  border-color: rgba(31,58,86,0.22);
}

.job-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.job-card p {
  flex: 1;
  margin-bottom: 1.5rem;
}

.job-card .btn-primary {
  align-self: flex-start;
  font-size: 0.85rem;
  padding: 0.7rem 1.4rem;
}

/* "Stay tuned" placeholder where the job cards were */
.stay-tuned {
  border: 1px dashed #cdd6e0;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--light);
}

.stay-tuned__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.stay-tuned p {
  color: #555;
  margin-bottom: 1.6rem;
}

/* ─── TEAM PAGE ─── */
.team-page { background: #eef1f5; }

/* whole-page background: a blurred version of the raster artwork */
.team-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("images/Team/rasterachtergrond.png") center / cover no-repeat;
  filter: blur(9px);
  transform: scale(1.08);
}

.team-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 9rem 2.5rem 5rem;
}

.team-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.team-head .section-label { color: var(--accent); }
.team-head .section-title { color: var(--primary); }
.team-head__hint {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  color: #556072;
}

.team-body { display: flex; justify-content: center; }

.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem;
  width: 100%;
  max-width: 820px;
}

/* second block ("Meet the team") sits below the founders, 4 across */
.team-group + .team-group { margin-top: 4.75rem; }

.founders--team {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
}

.founder {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  display: block;
  will-change: transform;
}

.founder__inner {
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.team-group:not(.is-detail) .founder:hover .founder__inner { transform: scale(1.05); }

.founder__photo {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  /* subtle dark-blue glow / outline */
  box-shadow:
    0 0 0 1px rgba(31,58,86,0.35),
    0 10px 30px rgba(11,28,45,0.20),
    0 0 26px rgba(31,58,86,0.22);
  transition: box-shadow 0.35s ease;
}

.team-group:not(.is-detail) .founder:hover .founder__photo {
  box-shadow:
    0 0 0 1px rgba(31,58,86,0.55),
    0 16px 42px rgba(11,28,45,0.28),
    0 0 36px rgba(31,58,86,0.34);
}

.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* placeholder shown until a real photo is dropped in */
.founder__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #e6eaef, #d2dae2);
  color: #aab5c1;
}
.founder__ph svg { width: 42%; height: 42%; }

.founder__name {
  display: block;
  margin-top: 1.1rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #111;
  transition: opacity 0.3s ease;
}

.founder__role {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity 0.3s ease;
}

/* ── detail view: photos pile on the left, bio on the right ── */
.team-group.is-detail .team-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3.5rem;
  align-items: start;
  justify-content: start;
  max-width: 980px;
  margin: 0 auto;
}

.team-group.is-detail .founders {
  display: block;
  position: relative;
  width: 260px;
  height: 320px;
  max-width: none;
  margin: 2.75rem 0 0;
}

.team-group.is-detail .founder {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}

.team-group.is-detail .founder__name,
.team-group.is-detail .founder__role {
  opacity: 0;
  pointer-events: none;
}

.team-group.is-detail .founder[data-stack="0"] { transform: translate(0, 0) rotate(0deg);              z-index: 20; opacity: 1;    }
.team-group.is-detail .founder[data-stack="1"] { transform: translate(20px, 18px) scale(0.96) rotate(-3deg);    z-index: 19; opacity: 0.85; }
.team-group.is-detail .founder[data-stack="2"] { transform: translate(38px, 34px) scale(0.92) rotate(-6deg);    z-index: 18; opacity: 0.7;  }
.team-group.is-detail .founder[data-stack="3"] { transform: translate(53px, 47px) scale(0.89) rotate(-8.5deg);  z-index: 17; opacity: 0.58; }
.team-group.is-detail .founder[data-stack="4"] { transform: translate(66px, 58px) scale(0.87) rotate(-10.5deg); z-index: 16; opacity: 0.48; }
.team-group.is-detail .founder[data-stack="5"] { transform: translate(77px, 67px) scale(0.85) rotate(-12deg);   z-index: 15; opacity: 0.4;  }
.team-group.is-detail .founder[data-stack="6"] { transform: translate(86px, 74px) scale(0.83) rotate(-13deg);   z-index: 14; opacity: 0.34; }
.team-group.is-detail .founder[data-stack="7"] { transform: translate(93px, 79px) scale(0.82) rotate(-13.5deg); z-index: 13; opacity: 0.29; }
.team-group.is-detail .founder[data-stack="8"] { transform: translate(98px, 83px) scale(0.81) rotate(-14deg);   z-index: 12; opacity: 0.25; }
.team-group.is-detail .founder[data-stack="9"] { transform: translate(101px, 85px) scale(0.8) rotate(-14deg);   z-index: 11; opacity: 0.22; }

.stack-back {
  position: absolute;
  top: -2.9rem;
  left: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(31,58,86,0.22);
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.stack-back span { font-size: 1.05em; }
.stack-back:hover { background: #fff; color: var(--primary); border-color: var(--accent); }

.founder-detail {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.founder-detail.is-visible { opacity: 1; transform: none; }

.founder-detail .bio h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #111;
  letter-spacing: -0.6px;
}
.founder-detail .bio__role {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-detail .bio p:not(.bio__role) {
  margin-top: 1.4rem;
  max-width: 460px;
  color: #444;
  line-height: 1.75;
}

.bio__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.7rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(31,58,86,0.22);
  border-radius: 100px;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bio__linkedin svg { width: 18px; height: 18px; }
.bio__linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }

@media (max-width: 1040px) {
  .founders--team { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
}

@media (max-width: 780px) {
  .team-main { padding: 7rem 1.4rem 3.5rem; }
  .founders { grid-template-columns: 1fr; max-width: 280px; gap: 2.2rem; }
  .founders--team { grid-template-columns: 1fr; max-width: 280px; }
  .team-group.is-detail .team-body { grid-template-columns: 1fr; gap: 2.5rem; justify-content: center; }
  .team-group.is-detail .founders { margin: 2.75rem auto 0; }
  .founder-detail { transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .founder,
  .founder__inner,
  .founder-detail,
  .team-group.is-detail .founder { transition-duration: 0.001s !important; }
}

/* ─── FOOTER ─── */
footer {
  background: #080f18;
  color: rgba(255,255,255,0.35);
  text-align: center;
  font-size: 0.82rem;
  padding: 1.8rem 2rem;
}

/* subpages end on white content, so soften the seam into the dark footer */
body.subpage footer {
  padding-top: 3rem;
  background:
    linear-gradient(to bottom, #ffffff 0, rgba(255,255,255,0) 34px),
    #080f18;
}

footer strong { color: rgba(255,255,255,0.6); }

/* ─── RESPONSIVE ─── */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-social { margin-left: auto; }

  /* the link list becomes a dropdown panel under the bar */
  .nav-links {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 0.5rem;
    border-radius: 14px;
    background: rgba(11,28,45,0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 46px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  nav.nav--light .nav-links {
    background: rgba(246,248,251,0.98);
    border-color: rgba(11,28,45,0.12);
  }
  nav.nav--open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-links > li:last-child { border-bottom: 0; }
  nav.nav--light .nav-links > li { border-color: rgba(11,28,45,0.08); }

  .nav-links a {
    display: block;
    padding: 0.85rem 0.9rem;
    font-size: 0.95rem;
    white-space: normal;
  }
  .nav-links a:not(.nav-cta)::after { content: none; }

  /* submenu shown inline and always expanded — no hover on touch */
  .submenu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0.35rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .submenu::before { content: none; }
  .submenu a { padding-left: 1.8rem; font-size: 0.88rem; opacity: 0.85; }

  /* in the dropdown the CTA is just another row — drop the orange pill */
  .nav-cta,
  .nav-cta:hover {
    display: block;
    margin: 0;
    padding: 0.85rem 0.9rem;
    background: transparent !important;
    border-radius: 0;
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.95rem;
    font-weight: 500 !important;
    text-align: left;
    transform: none !important;
    transition: color 0.3s ease !important;
  }
  nav.nav--light .nav-cta { color: rgba(11,28,45,0.66) !important; }
  .nav-cta:hover { color: #fff !important; }
  nav.nav--light .nav-cta:hover { color: var(--primary) !important; }
}

@media (max-width: 768px) {
  nav {
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    height: 54px;
    padding: 0 0.6rem 0 1rem;
  }
  nav.nav--top { top: 0; left: 0; right: 0; height: 60px; }
  .hero { padding: 7rem 1.4rem 4rem; }
  .section { padding: 4rem 1.4rem; }
  .platform-wrap .section { padding-bottom: 7rem; }
  #open-application .section { padding-top: 7rem; padding-bottom: 7rem; }
  .hero-stats { gap: 2rem; }
  .contact-wrap .section { flex-direction: column; }
  .contact-box { width: 100%; }
  .subpage-inner { padding: 7rem 1.4rem 3.5rem; }
}