/* ═══════════════════════════════════════════════════════════════
   KNOXTRA — marketing site stylesheet
   Concept: the brand is strictly monochrome (like the logo);
   color belongs to the products — TwinTrack green, Assessoris
   purple. A "spectrum" of product color sweeps through the
   monochrome wordmark as the signature motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #05060a;
  --bg-2:      #0a0c13;
  --card:      #0c0f17;
  --card-2:    #10131d;
  --line:      rgba(235,238,248,.09);
  --line-2:    rgba(235,238,248,.17);
  --text:      #f2f3f7;
  --muted:     #a0a5b4;
  --dim:       #686d7d;

  /* TwinTrack — green */
  --tt-1: #3df5a6;
  --tt-2: #0fa871;
  /* Assessoris — purple */
  --as-1: #a97dff;
  --as-2: #6c3df4;

  --font-display: 'Sora', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;
  --font-mono:    'Geist Mono', monospace;

  --ease: cubic-bezier(.22,.61,.24,1);
  --nav-h: 72px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;   /* anchor for .page-glow */
}

::selection{ background:rgba(242,243,247,.9); color:#05060a; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Shared layout ────────────────────────────────── */
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }

.section{ padding:clamp(90px,11vw,150px) 0; position:relative; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--line-2);
  flex:none;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.02em; }

.h-lg{ font-size:clamp(34px,5vw,58px); max-width:18ch; }
.lead{ font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:60ch; margin-top:24px; }

/* ── Scroll reveals ───────────────────────────────── */
.rv{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
.rv.in{ opacity:1; transform:none; }

/* ═══ NAV ══════════════════════════════════════════ */
.site-nav{
  position:fixed; inset:0 0 auto 0;
  height:var(--nav-h);
  z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(5,6,10,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:1160px; margin:0 auto; padding:0 24px;
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-brand img{ height:20px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-link{
  font-size:14.5px; font-weight:500; color:var(--muted);
  position:relative;
  transition:color .25s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--text);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover{ color:var(--text); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-cta{
  font-size:14px; font-weight:600; color:var(--text);
  padding:9px 20px; border:1px solid var(--line-2); border-radius:99px;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-cta:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

.nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; }
.nav-toggle svg{ width:24px; height:24px; stroke:var(--text); }

.nav-mobile{
  display:none;
  position:absolute; top:var(--nav-h); left:0; right:0;
  background:rgba(5,6,10,.96);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:12px 24px 26px;
  flex-direction:column; gap:4px;
}
.nav-mobile .nav-link{ padding:12px 0; font-size:17px; }
.nav-mobile .nav-cta{ margin-top:14px; text-align:center; }
.site-nav.open .nav-mobile{ display:flex; }

/* ═══ HERO ═════════════════════════════════════════ */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  position:relative;
  padding:calc(var(--nav-h) + 40px) 24px 90px;
  overflow:hidden;
}

/* dot grid, faded towards edges */
.hero-grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(242,243,247,.055) 1px, transparent 1.4px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 25%, transparent 72%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 25%, transparent 72%);
}

/* ambient product-colored orbs.
   NOTE: no filter:blur() here — blurring elements this size is what
   kills scrolling performance on mobile GPUs. The soft glow comes
   entirely from the radial gradient, which composites for free. */
.orb{
  position:absolute;
  width:min(58vw,640px); aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
}
.orb-green{
  top:-16%; left:-12%;
  background:radial-gradient(circle, rgba(24,190,130,.15) 0%, rgba(24,190,130,.08) 35%, transparent 68%);
  animation:orbDrift 22s var(--ease) infinite alternate;
}
.orb-purple{
  bottom:-20%; right:-14%;
  background:radial-gradient(circle, rgba(122,73,246,.15) 0%, rgba(122,73,246,.08) 35%, transparent 68%);
  animation:orbDrift 27s var(--ease) infinite alternate-reverse;
}
@keyframes orbDrift{
  from{ transform:translate(0,0) scale(1); }
  to  { transform:translate(9vw,7vh) scale(1.18); }
}

/* dissolve the hero into the ticker/content below — no hard seam */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:300px;
  background:linear-gradient(180deg,
    rgba(5,6,10,0) 0%, rgba(5,6,10,.35) 40%, rgba(5,6,10,.75) 70%, var(--bg) 100%);
  pointer-events:none; z-index:1;
}
.hero-inner{ position:relative; z-index:2; text-align:center; width:100%; max-width:1020px; }

/* motto — the promise under the name */
.hero-motto{
  margin:34px auto 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(17px,2.4vw,24px);
  letter-spacing:.01em;
  width:fit-content;
  background:linear-gradient(100deg, var(--tt-1), #e9ebf2 50%, var(--as-1));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(10.5px,1.4vw,12.5px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:16px;
}
.hero-eyebrow::before,
.hero-eyebrow::after{
  content:""; width:34px; height:1px; background:var(--line-2);
}

/* the wordmark — signature element */
.hero-word{ margin:44px auto 0; width:min(88vw,920px); }
.hero-word svg{ width:100%; height:auto; overflow:visible; }
.hero-word .lg{
  fill:var(--text);
  opacity:0;
}
body.loaded .hero-word .lg{
  animation:letterIn 1s var(--ease) forwards;
  animation-delay:calc(var(--i) * 95ms + .25s);
}
@keyframes letterIn{
  from{ opacity:0; transform:translateY(46px); filter:blur(14px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}
/* spectrum sweep across the letters */
.hero-word .sweep{
  transform:translateX(0);
  opacity:0;
}
body.loaded .hero-word .sweep{
  animation:sweep 7s linear infinite;
  animation-delay:1.6s;
}
@keyframes sweep{
  0%   { transform:translateX(0);      opacity:0; }
  6%   { opacity:.9; }
  38%  { opacity:.9; }
  46%  { transform:translateX(2620px); opacity:0; }
  100% { transform:translateX(2620px); opacity:0; }
}
/* hovering the wordmark takes over the light — it follows the cursor */
body.loaded .hero-word.manual .sweep{
  animation:none;
  opacity:.95;
  transform:translateX(var(--sx, 550px));
  transition:transform .14s linear, opacity .3s var(--ease);
}

.hero-sub{
  margin:36px auto 0;
  max-width:56ch;
  font-size:clamp(16.5px,2vw,19px);
  color:var(--muted);
}
.hero-sub strong{ color:var(--text); font-weight:600; }

.hero-ctas{
  margin-top:40px;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:15px; font-weight:600;
  padding:15px 30px; border-radius:99px;
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-solid{ background:var(--text); color:var(--bg); }
.btn-solid:hover{ transform:translateY(-2px); background:#fff; }
.btn-ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--text); }

/* product chips under the CTAs */
.hero-chips{
  margin-top:56px;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--muted);
  padding:8px 16px;
  border:1px solid var(--line); border-radius:99px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
a.chip:hover{ border-color:var(--line-2); color:var(--text); }
.chip .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.dot-tt{ background:linear-gradient(135deg,var(--tt-1),var(--tt-2)); box-shadow:0 0 10px rgba(61,245,166,.55); }
.dot-as{ background:linear-gradient(135deg,var(--as-1),var(--as-2)); box-shadow:0 0 10px rgba(169,125,255,.55); }
.dot-next{ border:1px solid var(--dim); background:transparent; }

/* staged entrance for the rest of the hero */
.hero-stage{ opacity:0; transform:translateY(18px); }
body.loaded .hero-stage{
  animation:stageIn .9s var(--ease) forwards;
  animation-delay:var(--s,1s);
}
@keyframes stageIn{ to{ opacity:1; transform:none; } }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:2;
  width:1px; height:52px;
  background:var(--line-2);
  overflow:hidden;
}
.scroll-cue::after{
  content:""; position:absolute; left:0; top:-40%;
  width:100%; height:40%;
  background:var(--text);
  animation:cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop{
  0%{ top:-40%; } 65%,100%{ top:110%; }
}

/* ═══ TICKER ═══════════════════════════════════════ */
/* no borders, no band — the strip floats on the page background
   so the hero dissolves into the content without a visible line */
.ticker{
  padding:26px 0;
  overflow:hidden;
  background:transparent;
}
.ticker-track{
  display:flex; gap:0; width:max-content;
  animation:tick 36s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
  padding:0 30px;
  white-space:nowrap;
  display:flex; align-items:center; gap:60px;
}
.ticker-track span::after{
  content:"✦"; font-size:10px; color:var(--line-2);
}
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ═══ WHAT WE DO ═══════════════════════════════════ */
.pillars{
  margin-top:clamp(56px,7vw,84px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.pillar{
  border-top:1px solid var(--line-2);
  padding-top:28px;
}
.pillar-icon{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:12px;
  margin-bottom:20px;
}
.pillar-icon svg{ width:19px; height:19px; stroke:var(--text); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pillar h3{ font-size:19px; margin-bottom:10px; }
.pillar p{ font-size:15px; color:var(--muted); }

/* ═══ PRODUCTS ═════════════════════════════════════ */
/* slightly lifted tone, but fading in and out — no hard edges */
.products{
  background:linear-gradient(180deg, var(--bg), var(--bg-2) 14%, var(--bg-2) 86%, var(--bg));
}

.p-grid{
  margin-top:clamp(56px,7vw,84px);
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}

.p-card{
  --c1:var(--text); --c2:var(--muted);
  --mx:50%; --my:0%;
  position:relative;
  border:1px solid color-mix(in srgb, var(--c1) 24%, var(--line));
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--c1) 17%, transparent), transparent 55%),
    radial-gradient(90% 60% at 0% 110%, color-mix(in srgb, var(--c2) 12%, transparent), transparent 60%),
    linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(30px,4vw,46px);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.p-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--c1) 45%, var(--line));
  box-shadow:0 24px 70px color-mix(in srgb, var(--c1) 14%, transparent);
}

/* gradient hairline along the top, in product color */
.p-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent);
  opacity:.85;
}
/* cursor-following glow */
.p-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(560px circle at var(--mx) var(--my),
             color-mix(in srgb, var(--c1) 14%, transparent), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.p-card:hover::after{ opacity:1; }

.card-tt{ --c1:var(--tt-1); --c2:var(--tt-2); }
.card-as{ --c1:var(--as-1); --c2:var(--as-2); }

.p-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line); border-radius:99px;
  padding:7px 14px;
  margin-bottom:26px;
}
.p-tag .dot{ width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); }

/* logo + name header */
.p-head{
  display:flex; align-items:center; gap:16px;
  margin-bottom:4px;
}
.p-logo{
  width:48px; height:48px; flex:none;
  border-radius:13px;
  box-shadow:0 8px 24px color-mix(in srgb, var(--c1) 30%, transparent);
}
.p-name{
  font-size:clamp(26px,3vw,34px);
  background:linear-gradient(100deg,var(--c1),var(--c2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  width:fit-content;
}
/* Assessoris wordmark — its own drawn logo font, not our display face.
   The real logo SVG is used as a mask so the brand letterforms render
   in the product's purple gradient. */
.as-wordmark{
  height:clamp(21px,2.4vw,28px);
  aspect-ratio:9206 / 1121;
  background:linear-gradient(100deg,var(--c1),var(--c2));
  -webkit-mask:url("../img/assessoris-text.svg") no-repeat left center / contain;
  mask:url("../img/assessoris-text.svg") no-repeat left center / contain;
}
.prod .as-wordmark{ height:clamp(25px,2.9vw,34px); }
.p-card > p{ margin-top:16px; color:var(--muted); font-size:15.5px; max-width:52ch; }

.p-list{ margin-top:24px; display:grid; gap:11px; }
.p-list li{
  display:flex; align-items:baseline; gap:13px;
  font-size:14.5px; color:var(--text);
}
.p-list li::before{
  content:""; flex:none;
  width:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  transform:translateY(-4px);
}

.p-link{
  margin-top:32px;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:14.5px; font-weight:600;
  color:var(--c1);
}
.p-link svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.p-link:hover svg{ transform:translateX(5px); }

/* "in the lab" card — spans the row, spectrum accent */
.card-lab{
  grid-column:1 / -1;
  --c1:var(--tt-1); --c2:var(--as-1);
  display:flex; flex-direction:column; align-items:flex-start;
}
.card-lab::before{
  background:linear-gradient(90deg, transparent, var(--tt-1), var(--as-1), transparent);
  animation:labShimmer 5s var(--ease) infinite alternate;
}
@keyframes labShimmer{ from{ opacity:.35; } to{ opacity:1; } }
.card-lab .p-name{
  background:linear-gradient(100deg,var(--tt-1),#7ee0e8,var(--as-1));
  -webkit-background-clip:text; background-clip:text;
}
.card-lab .p-tag .dot{
  background:conic-gradient(var(--tt-1),#7ee0e8,var(--as-1),var(--tt-1));
  animation:spinDot 3.5s linear infinite;
}
@keyframes spinDot{ to{ transform:rotate(360deg); } }

/* ═══ FOUNDERS ═════════════════════════════════════ */
.founders-grid{
  margin-top:clamp(56px,7vw,84px);
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.f-card{
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(28px,3.5vw,40px);
  display:flex; gap:26px; align-items:flex-start;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.f-card:hover{ transform:translateY(-5px); border-color:var(--line-2); }

.f-avatar{
  flex:none;
  width:82px; height:82px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:22px; font-weight:600;
  color:var(--text);
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg,rgba(242,243,247,.4),rgba(242,243,247,.08)) border-box;
  border:1.5px solid transparent;
  transition:background .4s var(--ease);
}
.f-card:hover .f-avatar{
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg,var(--tt-1),var(--as-1)) border-box;
}
.f-name{ font-size:21px; }
.f-role{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
  margin:7px 0 13px;
}
.f-bio{ font-size:15px; color:var(--muted); }

/* ═══ CONTACT / CTA ════════════════════════════════ */
.contact{
  text-align:center;
  background:
    radial-gradient(ellipse 60% 90% at 18% 110%, rgba(24,190,130,.09), transparent 60%),
    radial-gradient(ellipse 60% 90% at 82% 110%, rgba(122,73,246,.10), transparent 60%);
}
.contact .eyebrow{ justify-content:center; }
.contact .eyebrow::after{ content:""; width:26px; height:1px; background:var(--line-2); flex:none; }
.contact .h-lg{ margin:0 auto; }
.contact .lead{ margin-left:auto; margin-right:auto; }
.contact .btn{ margin-top:42px; font-size:16px; padding:18px 38px; }
.contact-alt{
  margin-top:22px;
  font-family:var(--font-mono); font-size:13px; color:var(--dim);
}
.contact-alt a{ color:var(--muted); border-bottom:1px solid var(--line-2); transition:color .25s var(--ease); }
.contact-alt a:hover{ color:var(--text); }

/* ═══ FOOTER ═══════════════════════════════════════ */
.site-footer{
  border-top:1px solid var(--line);
  padding:44px 0 40px;
  background:var(--bg);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.footer-brand img{ height:15px; width:auto; opacity:.5; transition:opacity .3s var(--ease); }
.footer-brand:hover img{ opacity:1; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a{
  font-size:13.5px; color:var(--dim);
  transition:color .25s var(--ease);
}
.footer-links a:hover{ color:var(--text); }
.footer-note{
  margin-top:30px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--dim);
}

/* ═══ LANGUAGE TOGGLE ══════════════════════════════ */
.lang-toggle{
  display:inline-flex; align-items:center;
  border:1px solid var(--line-2); border-radius:99px;
  padding:3px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.08em;
}
.lang-toggle button{
  padding:5px 11px; border-radius:99px;
  color:var(--dim);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lang-toggle button.active{ background:var(--text); color:var(--bg); }
.lang-toggle button:not(.active):hover{ color:var(--text); }
.nav-mobile .lang-toggle{ align-self:flex-start; margin-top:14px; }

/* ═══ MASCOT — the Knoxtra robot ═══════════════════ */
.mascot{
  position:absolute; left:0; bottom:10px;
  width:100%; height:120px;
  pointer-events:none;
  z-index:3;
}
.mascot-walk{
  position:absolute; bottom:0; left:0;
  animation:mWalk 34s linear infinite;
  will-change:transform;
}
.mascot-flip{ animation:mFlip 34s steps(1) infinite; }
.mascot-svg{
  width:74px; height:auto;
  pointer-events:auto; cursor:pointer;
  animation:mBob .55s ease-in-out infinite alternate;
}
@keyframes mWalk{
  0%    { transform:translateX(-100px); }
  44%   { transform:translateX(calc(100vw - 100px)); }
  52%   { transform:translateX(calc(100vw - 100px)); }
  96%   { transform:translateX(-100px); }
  100%  { transform:translateX(-100px); }
}
@keyframes mFlip{
  0%,47.9%  { transform:scaleX(1); }
  48%,97.9% { transform:scaleX(-1); }
  98%,100%  { transform:scaleX(1); }
}
@keyframes mBob{ from{ transform:translateY(0); } to{ transform:translateY(-3px); } }

.m-leg,.m-arm,.m-eye,.m-tip{ transform-box:fill-box; }
.m-leg{ transform-origin:center top; }
.m-leg-l{ animation:mStep .55s ease-in-out infinite alternate; }
.m-leg-r{ animation:mStep .55s ease-in-out infinite alternate-reverse; }
@keyframes mStep{ from{ transform:rotate(16deg); } to{ transform:rotate(-16deg); } }

.m-arm{ transform-origin:center top; }
.m-arm-l{ animation:mStep .55s ease-in-out infinite alternate-reverse; }
.m-arm-r{ animation:mStep .55s ease-in-out infinite alternate; }
.mascot-svg:hover .m-arm-r{ animation:mWave .5s ease-in-out infinite alternate; }
@keyframes mWave{ from{ transform:rotate(-150deg); } to{ transform:rotate(-190deg); } }

.m-eye{ transform-origin:center center; animation:mBlink 4.6s infinite; }
@keyframes mBlink{
  0%,93%,100%{ transform:scaleY(1); }
  95%,97%    { transform:scaleY(.08); }
}
.m-tip{
  animation:mTip 7s ease-in-out infinite alternate;
}
@keyframes mTip{
  from{ fill:#3df5a6; filter:drop-shadow(0 0 6px rgba(61,245,166,.9)); }
  to  { fill:#a97dff; filter:drop-shadow(0 0 6px rgba(169,125,255,.9)); }
}

/* ═══ SUBPAGE HERO + PAGE GLOW ═════════════════════ */
/* The ambient lights live OUTSIDE the hero, in a tall page-level
   layer that reaches deep into the content and fades out through a
   mask — big, dynamic, and impossible to produce a seam. */
.page-glow{
  position:absolute; top:0; left:0; right:0;
  height:175vh;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 98%);
  mask-image:linear-gradient(180deg, #000 55%, transparent 98%);
}
.page-glow .orb{
  width:min(75vw,900px);
}
.page-glow .orb-green{ top:-12%; left:-14%; }
.page-glow .orb-purple{ top:18%; right:-16%; bottom:auto; }

.page-hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(70px,9vw,120px)) 0 clamp(56px,7vw,90px);
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .h-xl{
  font-size:clamp(38px,5.5vw,64px);
  max-width:16ch;
}
.page-hero .lead{ max-width:56ch; }

/* ═══ ABOUT PAGE ═══════════════════════════════════ */
.story-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px);
  align-items:start;
}
.story-copy p{ color:var(--muted); margin-bottom:18px; font-size:16.5px; }
.story-copy p strong{ color:var(--text); font-weight:600; }
.story-aside{
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(26px,3vw,36px);
  position:sticky; top:calc(var(--nav-h) + 24px);
}
.story-aside h3{ font-size:16px; margin-bottom:18px; }
.fact{ display:flex; gap:14px; align-items:baseline; padding:13px 0; border-top:1px solid var(--line); }
.fact:first-of-type{ border-top:0; padding-top:0; }
.fact-k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); flex:none; width:96px;
}
.fact-v{ font-size:14.5px; color:var(--text); }
.fact-v .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; }

/* founder profiles with photos */
.profiles{
  margin-top:clamp(56px,7vw,84px);
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.profile{
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.profile:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.profile-photo{
  position:relative;
  aspect-ratio:5 / 4;
  background:#0d1018;
  overflow:hidden;
}
.profile-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:grayscale(.25);
  transition:filter .5s var(--ease), transform .6s var(--ease);
}
.profile:hover .profile-photo img{ filter:grayscale(0); transform:scale(1.03); }
.profile-photo::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--tt-1),var(--as-1));
}
.photo-fallback{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:52px; font-weight:600; color:var(--dim);
  background:
    radial-gradient(circle at 30% 20%, rgba(61,245,166,.07), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(169,125,255,.08), transparent 55%),
    #0d1018;
}
.profile-body{ padding:clamp(24px,3vw,34px); }
.profile-body .f-role{ margin:6px 0 14px; }
.profile-body p{ font-size:15px; color:var(--muted); }

/* consulting band */
.consult{
  margin-top:clamp(70px,9vw,110px);
  border:1px solid var(--line); border-radius:26px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(32px,5vw,60px);
  position:relative; overflow:hidden;
}
.consult::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--tt-1), var(--as-1), transparent);
}
.consult-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); align-items:center; }
.consult h2{ font-size:clamp(26px,3.4vw,40px); }
.consult p{ color:var(--muted); margin-top:16px; }
.consult .p-list{ margin-top:0; }
.consult .p-list li::before{ background:linear-gradient(90deg,var(--tt-1),var(--as-1)); }

/* ═══ CONTACT PAGE ═════════════════════════════════ */
.contact-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:24px;
  align-items:start;
}
.form-card{
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(26px,3.5vw,42px);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  margin-bottom:9px;
}
.field input,
.field textarea{
  width:100%;
  background:rgba(5,6,10,.55);
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--text);
  font-family:var(--font-body); font-size:15.5px;
  padding:13px 16px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:160px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--dim); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(61,245,166,.55);
  box-shadow:0 0 0 3px rgba(61,245,166,.12);
}
/* honeypot — visually gone, still in the DOM for bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  display:none;
  margin:0 0 20px;
  padding:13px 16px; border-radius:12px;
  font-size:14.5px;
}
.form-status.show{ display:block; }
.form-status.success{ background:rgba(61,245,166,.09); border:1px solid rgba(61,245,166,.35); color:#8ff7c8; }
.form-status.error{ background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.35); color:#ff9d9d; }

.recaptcha-tos{
  margin-top:18px;
  font-size:12px; color:var(--dim); line-height:1.6;
}
.recaptcha-tos a{ color:var(--muted); border-bottom:1px solid var(--line-2); }
.recaptcha-tos a:hover{ color:var(--text); }
/* hide Google's floating badge — ToS requires the inline disclosure instead */
.grecaptcha-badge{ visibility:hidden; }

/* contact aside: map + direct info */
.contact-aside{ display:grid; gap:24px; }
.info-card{
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(24px,3vw,32px);
}
.info-card h3{ font-size:16px; margin-bottom:16px; }
.info-row{
  display:flex; gap:13px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--muted);
}
.info-row:first-of-type{ border-top:0; padding-top:0; }
.info-row a{ color:var(--text); border-bottom:1px solid var(--line-2); }
.info-row a:hover{ border-bottom-color:var(--text); }
.info-k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); flex:none; width:88px;
}

/* ═══ MAP WIDGET ═══════════════════════════════════ */
.map-card{
  display:block;
  position:relative;
  border:1px solid var(--line); border-radius:22px;
  overflow:hidden;
  aspect-ratio:4 / 3.4;
  background:#0a0c13;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.map-card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.map-card svg{ position:absolute; inset:0; width:100%; height:100%; }

.map-pin{
  position:absolute; left:50%; top:44%;
  transform:translate(-50%,-100%);
  display:block;
}
.map-pin .pin-head{
  display:block; position:relative;
  width:22px; height:22px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--tt-1),var(--as-2));
  box-shadow:0 0 18px rgba(61,245,166,.45);
  animation:pinHover 2.4s ease-in-out infinite;
}
.map-card:hover .pin-head{ animation-duration:1s; }
.map-pin .pin-head::after{
  content:""; position:absolute; inset:6px;
  border-radius:50%; background:#05060a;
}
@keyframes pinHover{ 0%,100%{ transform:rotate(-45deg) translate(0,0); } 50%{ transform:rotate(-45deg) translate(-4px,4px); } }
.pin-pulse{
  position:absolute; left:50%; top:44%;
  display:block;
  width:14px; height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(61,245,166,.35);
  animation:pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{
  from{ transform:translate(-50%,-50%) scale(1); opacity:.8; }
  to  { transform:translate(-50%,-50%) scale(5.5); opacity:0; }
}

.map-label{
  position:absolute; left:16px; bottom:16px; right:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(5,6,10,.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
}
.map-label .city{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--text); }
.map-label .coords{
  display:block;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim);
  margin-top:3px;
}
.map-label .open{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.map-label .open svg{ width:12px; height:12px; position:static; }
.map-card:hover .open{ color:var(--text); }

/* ═══ CTA STRIP (subpages) ═════════════════════════ */
.cta-strip{
  text-align:center;
  background:
    radial-gradient(ellipse 60% 90% at 18% 110%, rgba(24,190,130,.09), transparent 60%),
    radial-gradient(ellipse 60% 90% at 82% 110%, rgba(122,73,246,.10), transparent 60%);
}
.cta-strip .h-lg{ margin:0 auto; }
.cta-strip .lead{ margin-left:auto; margin-right:auto; }
.cta-strip .btn{ margin-top:38px; }

/* ═══ PRODUCTS PAGE — detail panels ════════════════ */
.prod{
  --c1:var(--text); --c2:var(--muted);
  position:relative;
  border:1px solid color-mix(in srgb, var(--c1) 24%, var(--line));
  border-radius:26px;
  background:
    radial-gradient(110% 80% at 90% -12%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 55%),
    radial-gradient(80% 55% at -5% 112%, color-mix(in srgb, var(--c2) 11%, transparent), transparent 60%),
    linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(32px,5vw,60px);
  overflow:hidden;
}
.prod::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent);
}
.prod-tt{ --c1:var(--tt-1); --c2:var(--tt-2); }
.prod-as{ --c1:var(--as-1); --c2:var(--as-2); }

.prod .p-logo{ width:56px; height:56px; border-radius:15px; }
.prod .p-name{ font-size:clamp(30px,3.6vw,42px); }
.prod-lead{ color:var(--muted); font-size:clamp(15.5px,1.8vw,17px); max-width:64ch; margin-top:18px; }

.feat-grid{
  margin-top:clamp(30px,4vw,44px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px 26px;
}
.feat{
  border-top:1px solid color-mix(in srgb, var(--c1) 30%, var(--line));
  padding-top:16px;
}
.feat h4{
  font-family:var(--font-display); font-size:15.5px; font-weight:600;
  margin-bottom:7px;
}
.feat p{ font-size:14px; color:var(--muted); }

.prod-ctas{
  margin-top:clamp(30px,4vw,44px);
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.prod-ctas .btn-solid{
  background:linear-gradient(120deg,var(--c1),var(--c2));
  color:#04120c;
}
.prod-as .prod-ctas .btn-solid{ color:#fff; }

/* consulting-first section on the products page */
.indiv{
  --c1:var(--tt-1); --c2:var(--as-1);
  position:relative;
  border:1px solid var(--line-2);
  border-radius:26px;
  background:
    radial-gradient(90% 70% at 0% -10%, rgba(61,245,166,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 110%, rgba(169,125,255,.11), transparent 55%),
    linear-gradient(180deg,var(--card-2),var(--card));
  padding:clamp(32px,5vw,60px);
  overflow:hidden;
}
.indiv::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--tt-1), var(--as-1), transparent);
}

/* ═══ COOKIE BANNER (DSGVO) ════════════════════════ */
.cookie-banner{
  position:fixed; left:20px; bottom:20px; z-index:300;
  max-width:410px;
  background:rgba(10,12,19,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(24px);
  animation:cookieIn .7s var(--ease) .9s forwards;
}
@keyframes cookieIn{ to{ opacity:1; transform:none; } }
.cookie-banner p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.cookie-banner p strong{ color:var(--text); }
.cookie-actions{
  margin-top:15px;
  display:flex; align-items:center; gap:18px;
}
.cookie-ok{
  background:var(--text); color:var(--bg);
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  padding:9px 22px; border-radius:99px;
  transition:transform .25s var(--ease);
}
.cookie-ok:hover{ transform:translateY(-2px); }
.cookie-more{
  font-size:12.5px; color:var(--dim);
  border-bottom:1px solid var(--line-2);
  transition:color .25s var(--ease);
}
.cookie-more:hover{ color:var(--text); }
@media (max-width:560px){
  .cookie-banner{ left:14px; right:14px; bottom:14px; max-width:none; }
}

/* ═══ LEGAL PAGES (Impressum / Datenschutz) ════════ */
.legal{ max-width:820px; }
.legal h2{ font-size:21px; margin:46px 0 14px; }
.legal h3{ font-size:16.5px; margin:28px 0 10px; }
.legal p, .legal li{ color:var(--muted); font-size:15px; line-height:1.7; }
.legal p{ margin-bottom:13px; }
.legal ul{ list-style:disc; padding-left:22px; margin-bottom:14px; }
.legal li{ margin-bottom:6px; }
.legal a{ color:var(--text); border-bottom:1px solid var(--line-2); }
.legal a:hover{ border-bottom-color:var(--text); }
.legal strong{ color:var(--text); }
/* bracketed values that still need real data — visually flagged */
.legal .ph{
  background:rgba(255,193,7,.13);
  color:#ffd970;
  padding:1px 7px; border-radius:6px;
  font-size:.92em;
}

/* ═══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width:960px){
  .pillars{ grid-template-columns:1fr; gap:36px; }
  .p-grid{ grid-template-columns:1fr; }
  .founders-grid{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .story-aside{ position:static; }
  .profiles{ grid-template-columns:1fr; }
  .consult-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .feat-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  /* keep the EN/DE toggle visible in the top bar — German and English
     customers must find it without opening the menu. Only the links
     and CTA collapse into the hamburger. */
  .nav-links{ display:flex; margin-left:auto; }
  .nav-links .nav-link,
  .nav-links .nav-cta{ display:none; }
  .nav-mobile .lang-toggle{ display:none; }
  .nav-inner{ gap:14px; }
  .nav-toggle{ display:flex; }
  /* backdrop blur on a fixed bar is expensive on phone GPUs —
     use a near-opaque background instead */
  .site-nav.scrolled{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(5,6,10,.96);
  }
  .hero{ padding-bottom:110px; }
  .hero-chips{ margin-top:44px; }
  .f-card{ flex-direction:column; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .mascot-svg{ width:58px; }
}

/* ═══ REDUCED MOTION ═══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .hero-word .lg,.hero-stage{ opacity:1; transform:none; }
  .hero-word .sweep{ display:none; }
  .rv{ opacity:1; transform:none; }
  .mascot,.pin-pulse{ display:none; }
}