/* Kröll Consulting .com — the agent tour. KC brand at night: navy, one blue, mono HUD. */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/geist-mono-500.woff2') format('woff2')}

:root{
  --bg:#090E1A; --panel:#0E1626; --panel-2:#111B30;
  --ink:#EAF0FB; --body:#B9C4DA; --muted:#8B97B0;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
  --accent:#2563EB; --accent-2:#3B82F6; --accent-soft:rgba(59,130,246,.12);
  --green:#22C55E; --amber:#F5B544;
  --r:14px; --r-lg:20px; --r-pill:999px;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Hanken Grotesk',system-ui,sans-serif;
  --font-m:'Geist Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:var(--font-b);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent-soft);color:#fff}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--font-d);color:var(--ink);letter-spacing:-.025em;line-height:1.04;font-weight:700}
.mono{font-family:var(--font-m);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1100px;margin:0 auto;padding-inline:clamp(20px,5vw,52px)}
.ai{background:linear-gradient(100deg,var(--accent-2),#7FA8F8);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;padding-right:.06em}

/* buttons */
.pbtn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:var(--r-pill);padding:13px 24px;border:1px solid transparent;box-shadow:0 14px 30px -14px rgba(37,99,235,.5);transition:transform .2s,box-shadow .2s}
.pbtn:hover{transform:translateY(-2px)}
.pbtn .arr{transition:transform .2s}
.pbtn:hover .arr{transform:translateX(3px)}
.pbtn.small{padding:9px 18px;font-size:13.5px}
.pbtn.big{padding:16px 30px;font-size:16.5px}
.gbtn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:13px 24px;background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s}
.gbtn:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.gbtn.big{padding:16px 30px;font-size:16.5px}

/* ---------- HUD ---------- */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,32px);background:linear-gradient(rgba(9,14,26,.92),rgba(9,14,26,.75) 70%,transparent);backdrop-filter:blur(8px)}
.hud-brand{font-family:var(--font-d);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.hud-brand .hb-mark{color:var(--accent-2);font-family:var(--font-m);font-weight:500;margin-right:2px}
.hud-brand .dim{color:var(--muted);font-weight:600}
.hud-nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,26px)}
.hud-link{font-size:14px;font-weight:600;color:var(--body);transition:color .2s;white-space:nowrap}
.hud-link:hover{color:#fff}
.hud-progress{position:fixed;left:clamp(16px,3vw,32px);bottom:18px;z-index:50;opacity:0;transition:opacity .4s;pointer-events:none}
.hud-progress.on{opacity:1}
.hp-label{font-family:var(--font-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.hp-bar{width:150px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.hp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;transition:width .15s linear}

/* ---------- BOOT ---------- */
.boot{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(70% 55% at 50% 0%,rgba(37,99,235,.14),transparent 70%),var(--bg)}
.boot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(80% 70% at 50% 35%,#000,transparent 80%);mask-image:radial-gradient(80% 70% at 50% 35%,#000,transparent 80%)}
.boot-frame{position:absolute;inset:clamp(14px,2.5vw,28px);border:1px solid var(--line-2);border-radius:var(--r-lg);pointer-events:none}
.boot-frame::before,.boot-frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--accent-2);opacity:.7}
.boot-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.boot-frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.boot-inner{position:relative;z-index:2;max-width:840px;padding:0 22px}
.boot-line{font-size:11.5px;color:var(--accent-2);min-height:1.4em}
.boot-line::after{content:"▌";animation:blink 1.1s steps(1) infinite;color:var(--accent-2)}
@keyframes blink{50%{opacity:0}}
.boot h1{margin-top:26px;font-size:clamp(46px,8vw,96px)}
.boot-sub{margin-top:26px;font-size:clamp(16.5px,2vw,19px);color:var(--body);max-width:56ch;margin-inline:auto}
.boot-cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.boot-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:10.5px;letter-spacing:.3em;color:var(--muted);animation:bsp 2.4s ease-in-out infinite}
@keyframes bsp{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ---------- WORLD (vertical stack by default; JS enables the horizontal journey) ---------- */
.world-track{display:block}
.station{position:relative;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:60px 22px;border-top:1px solid var(--line-2)}
.world-floor{display:none}

.js-on .world{height:calc(var(--n) * 92vh)}
.js-on .world-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.js-on .world-floor{display:block;position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,rgba(37,99,235,.05));border-top:1px solid var(--line-2)}
.js-on .world-track{display:flex;height:100%;will-change:transform}
.js-on .station{flex:0 0 100vw;min-height:0;height:100%;border-top:none;justify-content:center;padding:90px 22px 110px}

.st-scene{display:flex;align-items:flex-end;gap:clamp(18px,4vw,44px);min-height:170px}
.bot-slot{width:clamp(110px,16vw,160px)}
.bot-slot svg{width:100%;height:auto;display:block}
.st-scene.two .bot-slot,.st-scene.three .bot-slot{width:clamp(86px,11vw,120px)}

/* dialogue panel: classic RPG box */
.st-dialog{position:relative;width:min(680px,92vw);background:rgba(14,22,38,.92);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px 22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.st-dialog::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-2);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
.st-tag{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.st-name{font-family:var(--font-d);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.st-role{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.st-text{font-size:16px;line-height:1.65;color:var(--body);min-height:3.2em}
.st-text::after{content:"▼";font-size:10px;color:var(--accent-2);margin-left:8px;animation:blink 1.2s steps(1) infinite}
.station.done .st-text::after{content:""}
.st-exit{position:absolute;right:clamp(20px,4vw,48px);bottom:90px;font-size:11px;letter-spacing:.26em;color:var(--muted)}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);font-family:var(--font-m);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.live{color:#5BE49B;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3)}
.chip.built{color:#FFD58A;background:rgba(245,181,68,.08);border:1px solid rgba(245,181,68,.3)}
.chip.planned{color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.chip.human{color:#9FC1FF;background:var(--accent-soft);border:1px solid rgba(59,130,246,.35)}

/* bots: idle animations */
.bot{animation:bob 3.2s ease-in-out infinite}
.bot .eye{animation:wink 4.6s steps(1) infinite}
.bot .antenna-tip{animation:pulse 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.bot .eye{transform-origin:center 58px}

/* ---------- BLOCKS (vertical sections) ---------- */
.block{position:relative;padding:clamp(80px,11vw,140px) 0;border-top:1px solid var(--line-2)}
.block.tight{padding-top:0;border-top:none}
.bk-eyebrow{font-size:11px;color:var(--accent-2);margin-bottom:18px}
.block h2{font-size:clamp(34px,4.6vw,58px);max-width:18ch}
.bk-sub{margin-top:18px;font-size:clamp(16px,1.9vw,18px);color:var(--body);max-width:58ch}

.ach-grid{margin-top:clamp(36px,5vw,54px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ach{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;transition:transform .25s,border-color .25s}
.ach:hover{transform:translateY(-3px);border-color:rgba(59,130,246,.35)}
.ach-tag{font-size:9px;color:var(--accent-2);letter-spacing:.22em;margin-bottom:14px}
.ach-n{font-family:var(--font-m);font-weight:500;font-size:clamp(28px,3vw,38px);color:var(--ink);letter-spacing:-.02em;line-height:1}
.ach-n .to{color:var(--accent-2)}
.ach-l{margin-top:8px;font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--ink)}
.ach p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.55}
.alink{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--accent-2)}

.patch{margin-top:clamp(32px,4vw,44px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;max-width:820px}
.patch-head{padding:14px 22px;border-bottom:1px solid var(--line-2);font-size:10.5px;color:var(--muted);letter-spacing:.2em}
.patch-list{list-style:none}
.patch-list li{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.6}
.patch-list li:last-child{border-bottom:none}
.pl-tag{flex:none;margin-top:3px;font-size:9px;letter-spacing:.16em;padding:4px 9px;border-radius:6px}
.pl-tag.fix{color:#FFD58A;background:rgba(245,181,68,.08);border:1px solid rgba(245,181,68,.25)}
.pl-tag.design{color:#9FC1FF;background:var(--accent-soft);border:1px solid rgba(59,130,246,.3)}

.cta-block{text-align:left;background:radial-gradient(60% 60% at 50% 100%,rgba(37,99,235,.12),transparent 70%)}
.cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.cta-social{margin-top:26px;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.cta-social a{color:var(--body)}
.cta-social a:hover{color:#fff}
.cta-social .sep{margin:0 10px}

.foot{border-top:1px solid var(--line-2);padding:26px 0 34px}
.foot-row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.foot-row .mono{font-size:10px;letter-spacing:.16em}
.foot-row a{margin-left:18px;color:var(--body)}
.foot-row a:first-child{margin-left:0}
.foot-row a:hover{color:#fff}

/* ---------- responsive ---------- */
@media(max-width:1080px){.ach-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){
  .hud-link{display:none}
  .hud-nav .pbtn{display:inline-flex}
  .hud-nav a[lang="de"]{display:inline-flex}
}
@media(max-width:560px){
  .ach-grid{grid-template-columns:1fr}
  .st-dialog{padding:20px 18px 18px}
  .st-text{font-size:15px}
  .js-on .station{padding:80px 16px 120px}
  .hp-bar{width:110px}
}

/* ---------- reduced motion: static vertical tour ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bot,.bot .eye,.bot .antenna-tip,.boot-scroll,.boot-line::after,.st-text::after{animation:none}
  .js-on .world{height:auto}
  .js-on .world-sticky{position:static;height:auto;overflow:visible}
  .js-on .world-track{display:block;transform:none!important}
  .js-on .station{flex:none;min-height:70vh;height:auto;border-top:1px solid var(--line-2)}
  .hud-progress{display:none}
}