/* ============================================================
   Jürgen Höller — shared design system
   Used by index.html and all subpages.
   ============================================================ */
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }

:root{
  /* --- deepened, modern navy core --- */
  --navy-950:#050a16;
  --navy-900:#070f22;
  --navy-850:#0a1530;
  --navy-800:#0d1d3f;
  --navy-700:#13305f;
  --navy-600:#1c4584;
  --navy-500:#2c5da8;
  --navy-400:#4d80d3;
  --navy-300:#84a9e4;
  --navy-200:#bdcfee;
  --navy-100:#e6ecf8;

  /* --- modern accents: electric blue + violet --- */
  --blue:#4f86ff;
  --blue-bright:#73a0ff;
  --violet:#8a63ff;
  --violet-bright:#a98bff;
  --cyan:#39d9e6;

  /* --- warm energy accents --- */
  --amber:#ffb43e;
  --amber-deep:#f5912a;
  --coral:#ff7b3c;

  /* --- ink + surfaces --- */
  --ink:#0a1224;
  --ink-2:#2a3349;
  --ink-3:#5b6479;
  --ink-4:#8b93a6;
  --paper:#ffffff;
  --paper-2:#f4f6fc;
  --paper-3:#e9edf6;
  --line:#e4e8f0;
  --line-2:#cdd4e1;

  --grad-hero:radial-gradient(120% 90% at 80% 0%, #16305f 0%, #0a1530 45%, #070f22 75%, #050a16 100%);
  --grad-brand:linear-gradient(135deg,#13305f 0%,#2c5da8 55%,#4d80d3 100%);
  --grad-accent:linear-gradient(120deg,#4f86ff 0%,#8a63ff 100%);
  --grad-better:linear-gradient(96deg,#FFD27A 0%,#FFA63D 44%,#FF7B3C 78%,#FFAE6B 100%);

  --shadow-1:0 1px 2px rgba(8,18,40,.06),0 1px 0 rgba(8,18,40,.04);
  --shadow-2:0 6px 22px rgba(8,18,40,.09),0 2px 6px rgba(8,18,40,.05);
  --shadow-3:0 20px 50px rgba(8,18,40,.14),0 4px 12px rgba(8,18,40,.07);
  --shadow-4:0 40px 100px rgba(5,10,22,.30),0 10px 24px rgba(5,10,22,.16);
  --shadow-blue:0 24px 56px rgba(79,134,255,.40);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.06),0 30px 70px rgba(5,10,22,.5);

  --font-sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,.14,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);color:var(--ink);background:var(--navy-950);
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.015em;line-height:1.08}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(79,134,255,.45);border-radius:6px}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1420px;margin:0 auto;padding:0 40px}
@media(max-width:820px){.wrap,.wrap-wide{padding:0 22px}}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-500);
}
.eyebrow.on-dark{color:var(--blue-bright)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:13px;
  font:600 15px/1 var(--font-sans);letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-lg{padding:18px 32px;font-size:16px;border-radius:15px}
/* filled CTA — the "better" gradient */
.btn-primary{background:var(--grad-better);color:var(--navy-900);
  box-shadow:0 16px 38px rgba(245,145,42,.34)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(245,145,42,.48);
  filter:brightness(1.04)}
.btn-primary:active{transform:translateY(-1px) scale(.99)}
.btn-primary.on-light{color:var(--navy-900)}
.btn-light{background:#fff;color:var(--navy-900);box-shadow:0 16px 36px rgba(5,10,22,.32)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 26px 54px rgba(5,10,22,.42)}
.btn-dark{background:var(--navy-900);color:#fff}
.btn-dark:hover{transform:translateY(-3px);background:var(--navy-800);box-shadow:var(--shadow-3)}
.btn-outline{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
.btn-outline-dark{background:transparent;color:var(--navy-800);border-color:var(--line-2)}
.btn-outline-dark:hover{background:var(--paper-2);border-color:var(--navy-400);transform:translateY(-3px)}
.btn-amber{background:linear-gradient(120deg,var(--amber),var(--amber-deep));color:#3a2400;box-shadow:0 18px 40px rgba(245,145,42,.4)}
.btn-amber:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(245,145,42,.55)}
.btn-ghost{background:transparent;color:var(--blue);padding:8px 2px}
.btn-ghost:hover{color:var(--violet)}

/* ---------- icons ---------- */
[data-lucide]{width:20px;height:20px;stroke-width:2;flex-shrink:0}

/* ---------- 3D reveal system ---------- */
main{perspective:1600px;perspective-origin:50% 22%}
.reveal{
  opacity:0;transform:translateY(54px) scale(.975);
  transition:opacity 1s var(--ease),transform 1.05s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal-3d{
  opacity:0;transform:translateY(70px) rotateX(13deg) scale(.95);
  transform-origin:50% 100%;
  transition:opacity 1s var(--ease),transform 1.15s var(--ease);
  will-change:opacity,transform;
}
.reveal-3d.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-3d{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;z-index:100;
  background:var(--grad-accent);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 14px rgba(79,134,255,.7);
}

/* ---------- glass ---------- */
.glass{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* ---------- section helpers ---------- */
.section-dark{background:var(--grad-hero);color:#fff;position:relative}
.section-dark p{color:rgba(255,255,255,.74)}

/* ---------- marquee ---------- */
.mq-track{display:flex;gap:54px;width:max-content;animation:mq 42s linear infinite}
.mq-wrap:hover .mq-track{animation-play-state:paused}

/* ---------- responsive grid helpers ---------- */
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cols-6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){ .cols-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .cols-6{grid-template-columns:repeat(2,1fr)}
}

/* ---------- keyframes ---------- */
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes shine{to{background-position:200% 50%}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
@keyframes gridDrift{to{background-position:60px 60px}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes scrollHint{0%{transform:translateY(0);opacity:0}40%{opacity:1}80%,100%{transform:translateY(13px);opacity:0}}
@keyframes glowBreath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(40px) rotateX(20deg)}to{opacity:1;transform:none}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .nav-links{display:none!important}
  .nav-burger{display:inline-flex!important}
}
@media(max-width:960px){
  .grid-2{grid-template-columns:1fr!important}
  .hero-figure{opacity:.34!important;right:-12%!important}
}
@media(max-width:760px){
  .grid-2,.grid-3,.grid-flex{grid-template-columns:1fr!important}
  .stack-sm{flex-direction:column!important;align-items:flex-start!important}
  .hide-sm{display:none!important}
}