/* ============================================================
   AIMO — single theme: "Graphite" (mid-dark, premium, calm)
   Loaded after base.css + sections.css. One theme, no toggle.
   ============================================================ */

:root {
  /* mid graphite — clearly not black, cool blue-grey */
  --bg:       #1c222b;
  --bg-2:     #20262f;
  --panel:    #242b35;
  --panel-2:  #2b3340;
  --line:     rgba(150,180,215,.12);
  --hair:     rgba(150,180,215,.07);
  --hair-2:   rgba(150,180,215,.20);

  --t-hi:  #f0f4f8;
  --t-mid: #b6c1cf;
  --t-lo:  #8290a0;
  --t-dim: #5b6776;

  --accent:   #46a6ff;   /* electric blue */
  --accent-2: #35d6ee;   /* cyan */
  --glow: 0 0 0 rgba(0,0,0,0), 0 12px 34px rgba(70,166,255,.26);
  --grid-op: .05;

  /* type — Sora (clean geometric display) + Manrope (readable body) */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.018em; }
.h-hero { font-weight: 700; letter-spacing: -.03em; }
body { font-weight: 400; }
.lede, .hero__copy .lede { font-weight: 400; }
/* keep hero size consistent across languages (German runs longer) */
.h-hero { font-size: clamp(34px, 4.7vw, 64px); }

body {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-2), transparent 60%),
    var(--bg);
}

/* ---------- keep it calm: strip heavy technical chrome ---------- */
.fig-hud, .fig-scan { display: none !important; }
.hero__field { display: none !important; }
.cap__num { display: none; }

/* ---------- HERO spotlight (follows pointer, like the reference) ---------- */
.hero__spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(680px circle at var(--mx, 32%) var(--my, 24%),
    rgba(120,180,255,.13), rgba(120,180,255,.04) 32%, transparent 60%);
  transition: background .18s ease;
}

/* ---------- HERO figure: 3D robot + neural-bust fallback ---------- */
.figframe {
  background: radial-gradient(120% 120% at 50% 14%, #2a333d, #14181f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.42);
}
.figframe::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(80% 80% at 50% 45%, #000 30%, transparent 82%);
  opacity: .6;
}
.figframe::after { display: none; }
/* CAD digital-twin canvas */
.figframe #figureCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
}
.fig-cap {
  position: absolute; left: 18px; bottom: 14px; z-index: 6;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-lo); pointer-events: none;
}
.fig-cap b { color: var(--accent); font-weight: 400; }
.bracket { opacity: .8; z-index: 5; }

/* ---------- surfaces tuned for graphite ---------- */
.cap { background: linear-gradient(180deg, var(--panel), var(--bg-2)) !important; }
.pipe, .case, .platform__viz { background: var(--panel) !important; }
.cap-ico, .pipe__icon { background: rgba(255,255,255,.03); }
.btn--ghost { background: rgba(255,255,255,.02); }
.btn--primary { color: #06131f !important; font-weight: 600; }
.cta { background: linear-gradient(165deg, var(--panel), #171c23) !important; }

/* ---------- TEAM (About / company) ---------- */
.team {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.team__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.member__photo {
  position: relative; aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #2a333d, #161b22);
  display: grid; place-items: center; transition: border-color .35s, transform .35s;
}
.member:hover .member__photo { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); }
.member__photo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: transparent; }
.member__photo .member__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.member__tag { display: none; }
.member-illu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.member__mono {
  position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 4vw, 54px); letter-spacing: .04em;
  color: color-mix(in srgb, var(--accent) 32%, var(--t-dim));
}
.case__img { position: relative; }
.case-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; cursor: crosshair; }
.member__tag {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--t-lo);
}
.member figcaption { padding-top: 16px; display: flex; flex-direction: column; gap: 5px; }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); color: var(--t-hi); }
.member__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 760px){ .team-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- PARTNERS strip (About / company) ---------- */
.partners {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.partners__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.partners__row {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.partner-card {
  display: grid; place-items: center; padding: 34px 40px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(120% 140% at 50% 0%, #2a333d, #14181f);
  transition: border-color .35s, transform .35s;
}
.partner-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); }
.partner-card img { height: 30px; width: auto; opacity: .92; }
.partners__note { color: var(--t-mid); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; max-width: 52ch; }
.partners__note b { color: var(--t-hi); font-weight: 600; }
@media (max-width: 680px){ .partners__row { grid-template-columns: 1fr; } }

/* ---------- LOCATION / map + building (About / company) ---------- */
.location {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.location__visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.location__photo, .location__map {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 16/10; background: radial-gradient(120% 120% at 50% 0%, #2a333d, #161b22);
}
.location__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; }
.location__map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: invert(1) hue-rotate(180deg) brightness(.96) contrast(.9) saturate(.8);
}
.location__photo .bracket, .location__map .bracket { z-index: 5; pointer-events: none; opacity: .9; }
.loc-cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 5; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-lo);
}
.location__pin {
  position: absolute; left: 14px; bottom: 12px; z-index: 5; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--t-hi);
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--hair-2); border-radius: 100px; padding: 6px 12px;
}
.location__info { margin-top: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.location__addr { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.4vw, 21px); color: var(--t-hi); line-height: 1.5; }
.location__meta { display: flex; flex-direction: column; gap: 12px; }
.location__meta span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--t-lo); }
.location__link { font-family: var(--font-mono); font-size: 13px; color: var(--accent); transition: opacity .25s; }
.location__link:hover { opacity: .75; }
@media (max-width: 760px){ .location__visuals { grid-template-columns: 1fr; } }

/* ---------- NAV: premium animated logo + technical underline ---------- */
.nav { transition: background .4s ease, border-color .4s ease, backdrop-filter .4s, box-shadow .4s; }
.nav__in { height: 104px; transition: height .4s cubic-bezier(.4,0,.2,1); }
.nav__right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }

/* language switcher */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--hair-2); border-radius: 100px; background: rgba(255,255,255,.02); }
.lang-switch button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--t-lo);
  padding: 6px 12px; border-radius: 100px; transition: color .25s, background .25s;
}
.lang-switch button:hover { color: var(--t-hi); }
.lang-switch button.active { background: var(--accent); color: #06131f; font-weight: 600; }

/* brand block */
.brand { position: relative; display: inline-flex; align-items: center; }
.brand__logo { position: relative; display: inline-block; line-height: 0; }
.brand img {
  height: 58px; width: auto; opacity: 1; position: relative; z-index: 2;
  transition: height .4s cubic-bezier(.4,0,.2,1), filter .4s ease;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 22%, transparent));
}
/* soft blue glow behind the mark */
.brand__glow {
  position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 150%; height: 230%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
  opacity: 0; filter: blur(6px);
  animation: brandGlow 1.1s ease .15s forwards;
}
/* blue AI pulse that sweeps through the logo shape after the draw */
.brand__pulse {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--accent) 92%, white) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url('../assets/aimo-logo-tight.png') center / contain no-repeat;
  mask: url('../assets/aimo-logo-tight.png') center / contain no-repeat;
  opacity: 0;
  animation: brandPulse .62s ease .82s 1;
}
/* CAD line-draw reveal: wipe the mark on left→right with a bright pen edge */
.brand__logo::after {
  content: ""; position: absolute; top: -6%; bottom: -6%; width: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 80%, transparent);
  opacity: 0; left: 0;
  animation: brandPen .82s cubic-bezier(.55,0,.3,1) .1s 1;
}
.brand img { clip-path: inset(0 100% 0 0); animation: brandDraw .82s cubic-bezier(.55,0,.3,1) .1s forwards; }

@keyframes brandDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes brandPen {
  0% { left: 0; opacity: 0; }
  8% { opacity: .9; }
  92% { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}
@keyframes brandPulse {
  0% { background-position: 160% 0; opacity: 0; }
  20% { opacity: 1; }
  100% { background-position: -60% 0; opacity: 0; }
}
@keyframes brandGlow { from { opacity: 0; } 60% { opacity: 1; } to { opacity: .55; } }

/* thin animated technical line under the header */
.nav__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; pointer-events: none; opacity: .9; }
.nav__line-trace {
  position: absolute; top: 0; left: 0; height: 100%; width: 22%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, transparent), transparent);
  animation: navTrace 6.5s linear 1.1s infinite;
}
@keyframes navTrace { 0% { transform: translateX(-30%); } 100% { transform: translateX(560%); } }

/* scrolled: sticky, compact, more solid */
.nav.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--hair-2); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.nav.scrolled .nav__in { height: 72px; }
.nav.scrolled .brand img { height: 42px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 16%, transparent)); }
.nav.scrolled .nav__line { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .brand img { clip-path: none; animation: none; }
  .brand__glow { opacity: .45; animation: none; }
  .brand__pulse, .brand__logo::after, .nav__line-trace { animation: none; }
}

.hero { padding-top: 132px; }
.foot__brand img { height: 34px; }
.nav__links { gap: 0; }
.nav__links a {
  font-size: 12px; padding: 8px clamp(16px, 1.6vw, 26px); position: relative;
}
.nav__links a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: var(--hair-2);
}
.nav__links a::after { left: clamp(16px, 1.6vw, 26px); right: clamp(16px, 1.6vw, 26px); width: auto; transform: scaleX(0); transform-origin: left; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.active { color: var(--t-hi); }
.nav__links a.active::after { transform: scaleX(1); }

/* hamburger toggle — hidden on desktop */
.nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--hair-2); border-radius: 10px; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(255,255,255,.02); transition: border-color .25s; }
.nav__toggle span { display: block; width: 18px; height: 1.6px; background: var(--t-hi); border-radius: 2px; transition: transform .3s ease, opacity .25s ease; }
.nav__toggle:hover { border-color: var(--accent); }
.nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__toggle { display: flex; }
  .nav__right { gap: 12px; }
  /* links become a dropdown panel under the header */
  .nav__links {
    position: fixed; left: 0; right: 0; top: var(--nav-h, 104px);
    flex-direction: column; gap: 0; align-items: stretch;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--hair-2);
    padding: 8px clamp(20px, 5vw, 64px) 22px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
  }
  .nav.menu-open .nav__links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links a { font-size: 15px; padding: 16px 4px; border-bottom: 1px solid var(--hair); letter-spacing: .01em; }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a + a::before { display: none; }
  .nav__links a::after { display: none; }
  .nav__links a.active { color: var(--accent); }
  .nav.scrolled .nav__links { top: 72px; }
}