/* ==========================================================================
   Deviam – Website
   One stylesheet, two themes (dark = default, light).
   Theme selection: <html data-theme="dark|light"> set by assets/js/theme.js
   (stored choice → otherwise system preference). Without JS the system
   preference is applied through the media query below.
   Always-dark surfaces (terminal, code, contact) use the .on-dark class.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* brand */
  --teal:#1cb9c8;
  --lime:#c8f56a;

  /* type & layout */
  --sans:"Bricolage Grotesque","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(18px,4vw,64px);
  --r:24px;
  --max:1300px;
  --nav-offset:90px;            /* scroll-padding below the floating nav */
  --first-gap:134px;            /* nav offset + section padding: where the first content of every section starts */

  /* theme: DARK (default) */
  color-scheme:dark;
  --bg:#07090b;
  --fg:#eef2f3;
  --mute:#8a979b;
  --line:#ffffff17;
  --line-strong:#ffffff2e;
  --teal-t:#1cb9c8;            /* teal used for text */
  --accent2:var(--lime);
  --surface:#0b0f12;
  --card-a:#131a1e; --card-b:#0e1215;
  --card-shadow:none;
  --card-shadow-hover:none;
  --nav-bg:#0b0f12b3;
  --nav-shadow:none;
  --btn-bg:var(--fg); --btn-fg:#000; --btn-hover-fg:#000;
  --btn-glow:0 0 40px #1cb9c880;
  --ghost-border:var(--line); --ghost-hover-bg:#1cb9c812; --ghost-hover-border:var(--teal);
  --chip-bg:#ffffff08;
  --chip-dot:var(--lime);
  --grad:linear-gradient(100deg,#fff 0%,var(--teal) 55%,var(--lime) 100%);
  --grid:#ffffff0f;
  --aur2:#3a5bff; --o1:.35; --o2:.25; --o3:.12;
  --grain-o:.12; --grain-blend:normal;
  --stat-green:var(--lime);
  --net-node:28,185,200; --net-line:28,185,200; --net-hover:200,245,106;
  --toggle-sun:none; --toggle-moon:block;
}
/* theme: LIGHT – system preference (no JS) … */
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg:#f4f1ea; --fg:#0e2a36; --mute:#58707a; --line:#0e2a3620; --line-strong:#0e2a3640;
    --teal-t:#0a7d8a; --surface:#fff; --card-a:#fff; --card-b:#faf8f3;
    --card-shadow:0 20px 40px -32px #0e2a3680; --card-shadow-hover:0 30px 60px -30px #0e2a3680;
    --nav-bg:#ffffffb8; --nav-shadow:0 10px 40px -20px #0e2a3655;
    --btn-bg:var(--fg); --btn-fg:#fff; --btn-hover-fg:var(--fg); --btn-glow:0 10px 40px -8px #1cb9c8aa;
    --ghost-hover-bg:#1cb9c820; --ghost-hover-border:#0a7d8a; --chip-bg:#ffffffaa; --chip-dot:#7fc41a;
    --grad:linear-gradient(100deg,#0e2a36 0%,#0a7d8a 55%,var(--teal) 100%);
    --grid:#0e2a3614; --aur2:#8fa6ff; --o1:.4; --o2:.28; --o3:.55;
    --grain-o:.09; --grain-blend:multiply; --stat-green:#4d7c0f;
    --net-line:10,125,138; --net-hover:10,125,138;
    --toggle-sun:block; --toggle-moon:none;
  }
}
/* … and explicit choice */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f1ea; --fg:#0e2a36; --mute:#58707a; --line:#0e2a3620; --line-strong:#0e2a3640;
  --teal-t:#0a7d8a; --surface:#fff; --card-a:#fff; --card-b:#faf8f3;
  --card-shadow:0 20px 40px -32px #0e2a3680; --card-shadow-hover:0 30px 60px -30px #0e2a3680;
  --nav-bg:#ffffffb8; --nav-shadow:0 10px 40px -20px #0e2a3655;
  --btn-bg:var(--fg); --btn-fg:#fff; --btn-hover-fg:var(--fg); --btn-glow:0 10px 40px -8px #1cb9c8aa;
  --ghost-hover-bg:#1cb9c820; --ghost-hover-border:#0a7d8a; --chip-bg:#ffffffaa; --chip-dot:#7fc41a;
  --grad:linear-gradient(100deg,#0e2a36 0%,#0a7d8a 55%,var(--teal) 100%);
  --grid:#0e2a3614; --aur2:#8fa6ff; --o1:.4; --o2:.28; --o3:.55;
  --grain-o:.09; --grain-blend:multiply; --stat-green:#4d7c0f;
  --net-line:10,125,138; --net-hover:10,125,138;
  --toggle-sun:block; --toggle-moon:none;
}
/* Surfaces that stay dark in both themes */
.on-dark{
  color-scheme:dark;
  --fg:#eef2f3; --mute:#8a979b; --line:#ffffff17; --line-strong:#ffffff2e; --teal-t:#1cb9c8;
  --grad:linear-gradient(100deg,#fff 0%,var(--teal) 55%,var(--lime) 100%);
  color:var(--fg);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-offset);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;
  font-size:clamp(15px,1.05vw,17px);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .35s,color .35s;
}
/* blueprint grid, drawn in CSS so it follows the theme */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%);
}
a{color:inherit}
img,svg{display:block;max-width:100%}
i{font-style:normal;color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:.6em 1em;border-radius:10px}
.skip:focus{left:8px}
.tag{font-family:var(--mono);font-size:.8rem;color:var(--teal-t);text-transform:uppercase;letter-spacing:.08em}

/* ---------- 3. Atmosphere ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;filter:blur(90px) saturate(1.3);pointer-events:none}
.aurora i{position:absolute;border-radius:50%;animation:float 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:55vw;height:55vw;left:-12vw;top:-18vw;background:var(--teal);opacity:var(--o1)}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:10vh;background:var(--aur2);opacity:var(--o2);animation-delay:-8s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-18vw;background:var(--lime);opacity:var(--o3);animation-delay:-14s}
@keyframes float{to{transform:translate(8vw,6vh) scale(1.2)}}
.grain{
  position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:var(--grain-o);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* ---------- 4. Navigation ---------- */
.nav{
  position:fixed;z-index:50;top:16px;left:50%;translate:-50% 0;width:min(1100px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:10px 12px 10px 20px;
  border:1px solid var(--line);border-radius:99px;background:var(--nav-bg);box-shadow:var(--nav-shadow);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:-.04em}
.brand svg{width:26px;height:26px}
/* "!" in the wordmark: random hue per page load (set in js/theme.js), lightness tuned per theme for contrast */
.brand i{color:hsl(var(--bang-h,187) 85% 58%)}
:root[data-theme="light"] .brand i{color:hsl(var(--bang-h,187) 85% 38%)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .brand i{color:hsl(var(--bang-h,187) 85% 38%)}}
.menu{display:flex;align-items:center;gap:1.6rem;font-size:.92rem;color:var(--mute)}
.menu a{text-decoration:none;transition:color .2s}
.menu a:hover{color:var(--fg)}
.nav-end{display:flex;align-items:center;gap:.5rem}
.theme{margin-left:clamp(1rem,2.4vw,2rem);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:.25s}
.theme:hover{border-color:var(--teal);background:var(--ghost-hover-bg)}
.theme svg{width:18px;height:18px}
.theme .sun{display:var(--toggle-sun)}.theme .moon{display:var(--toggle-moon)}
.burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--fg);border-radius:2px;transition:.25s}
.burger span:first-child{top:15px}.burger span:last-child{top:22px}
.burger[aria-expanded="true"] span:first-child{top:19px;rotate:45deg}
.burger[aria-expanded="true"] span:last-child{top:19px;rotate:-45deg}

.cta,.btn{
  display:inline-block;text-decoration:none;font-weight:600;border-radius:99px;padding:.7em 1.3em;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:inherit;transition:.25s;
}
.cta:hover,.btn:hover{background:var(--teal);color:var(--btn-hover-fg);box-shadow:var(--btn-glow)}
.btn{padding:.95em 1.6em}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--ghost-border)}
.btn.ghost:hover{border-color:var(--ghost-hover-border);box-shadow:none;background:var(--ghost-hover-bg);color:var(--fg)}

/* ---------- 5. Hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:start;gap:2rem;padding:var(--first-gap) var(--pad) 56px;max-width:var(--max);margin:auto}
.hero .term{align-self:center}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent)}
.chip{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:99px;padding:.4em 1em;font-family:var(--mono);font-size:.78rem;color:var(--mute);background:var(--chip-bg)}
.chip b{width:8px;height:8px;border-radius:50%;background:var(--chip-dot);box-shadow:0 0 12px var(--lime)}
h1{font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.045em;font-weight:800;margin:1.2rem 0}
.hero p{color:var(--mute);max-width:44ch;font-size:1.02rem;margin-bottom:1.6rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}

.term{
  border:1px solid var(--line);border-radius:var(--r);background:#0b0f12cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:.82rem;overflow:hidden;box-shadow:0 40px 90px -30px #0e2a36aa;rotate:2deg;transition:rotate .5s;
}
:root:not([data-theme="light"]) .term{box-shadow:0 40px 120px -30px #1cb9c855}
.term:hover{rotate:0deg}
.bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--mute)}
.bar i{width:10px;height:10px;border-radius:50%;background:#ffffff22}
.bar span{margin-inline:auto}
pre#typed{padding:18px;min-height:250px;white-space:pre-wrap;color:#b9c6c9}
pre#typed .ok{color:var(--lime)}pre#typed .pr{color:var(--teal)}

/* ---------- 6. Sections ---------- */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--pad)}
.sh{max-width:760px;margin-bottom:1.5rem}
.sh h2,.contact h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;letter-spacing:-.045em;font-weight:800;margin:.6rem 0 1rem}
.sh p{color:var(--mute);font-size:1.1rem}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--card-a),var(--card-b));box-shadow:var(--card-shadow);
  padding:clamp(22px,2.4vw,34px);transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#1cb9c822,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover::before{opacity:1}
.card h3{font-size:1.7rem;letter-spacing:-.03em;margin:1rem 0 .5rem}
.card p{color:var(--mute)}
.c1{grid-column:span 4;grid-row:span 2}.c2{grid-column:span 2;grid-row:span 2}
.c3{grid-column:span 3}.c4{grid-column:span 1}.c5{grid-column:span 2}
.c4,.c5{display:flex;flex-direction:column;justify-content:flex-end;min-height:190px}
.c4 b,.c5 b{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.05em;line-height:1}
.c4 b{color:var(--teal-t)}.c5 b{color:var(--stat-green)}
.c4 span,.c5 span{color:var(--mute);font-size:.9rem;margin-top:.5rem}
.viz{width:100%;max-height:200px;margin-bottom:.6rem}
.viz .node{fill:var(--surface)}
.flow{stroke-dasharray:6 8;animation:dash 2s linear infinite}
.flow.d2{animation-duration:3s;stroke-opacity:.5}
@keyframes dash{to{stroke-dashoffset:-56}}
.pl{animation:pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{transform:scale(1.9);opacity:.4}}
.code{font-family:var(--mono);font-size:.82rem;color:#b9c6c9;background:#0b1418;border:1px solid #ffffff17;border-radius:14px;padding:14px;overflow:auto}
.code .k{color:#ff7ab6}.code .f{color:var(--lime)}.code .s{color:#ffd479}

/* timeline */
.tl{position:relative;display:grid;gap:14px;padding-left:46px}
.rail{position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--line)}
.fill{width:100%;height:0;background:linear-gradient(var(--teal),var(--lime));box-shadow:0 0 18px var(--teal)}
.tl article{
  position:relative;display:grid;grid-template-columns:90px 1fr;grid-template-rows:auto auto;column-gap:1.2rem;
  border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--surface);opacity:.4;transition:.5s;
}
.tl article.on{opacity:1;border-color:var(--teal);box-shadow:var(--card-shadow)}
.tl article::before{content:"";position:absolute;left:-39px;top:36px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--mute);transition:.4s}
.tl article.on::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 16px var(--teal)}
.tl .no{grid-row:span 2;font-family:var(--mono);font-size:2.6rem;color:var(--teal-t);letter-spacing:-.05em;line-height:1}
.tl h3{font-size:1.4rem;letter-spacing:-.025em}
.tl p{color:var(--mute);max-width:60ch}

/* contact */
.contact{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:36px;
  padding:clamp(30px,6vw,90px);background:linear-gradient(160deg,#10272b,#0b0f12 60%);
}
.contact h2{font-size:clamp(2.6rem,7.5vw,7rem);max-width:12ch}
.rows{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.5rem}
.rows a{
  flex:1 1 280px;text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:20px 24px;
  font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.03em;background:#ffffff06;transition:.3s;
}
.rows a:hover{border-color:var(--teal);background:#1cb9c814;transform:translateY(-3px)}
.rows small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem;font-weight:400}

/* the last section must be tall enough to scroll up to the same offset as the others */
#kontakt{min-height:calc(100svh - var(--nav-offset) - 84px)}

/* footer */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;max-width:var(--max);margin:auto;padding:30px var(--pad);color:var(--mute);font-size:.9rem;border-top:1px solid var(--line)}
.foot nav{display:flex;gap:1.2rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--fg);text-decoration:underline}

/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:150px var(--pad) 80px}
.legal h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 2rem}
.legal h2{font-size:1.35rem;letter-spacing:-.02em;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--mute);margin-bottom:.8rem;max-width:70ch}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal a{color:var(--teal-t)}
.legal strong{color:var(--fg)}

/* reveal on scroll (enabled by JS, so content is visible without it) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.js .rv.in{opacity:1;transform:none}

/* ---------- 7. Responsive ---------- */
@media(max-width:900px){
  .burger{display:block}
  .theme{margin-left:0}
  .menu{
    position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-bg);border:1px solid var(--line);border-radius:24px;padding:10px 20px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;font-size:1.05rem;color:var(--fg);
  }
  .menu.open{display:flex}
  .menu a{padding:.9em 0;border-bottom:1px solid var(--line)}.menu a:last-child{border-bottom:0}
  .hero{grid-template-columns:1fr;padding-top:110px}.term{rotate:0deg}
  .bento{grid-template-columns:1fr 1fr}
  .c1,.c2,.c3,.c5{grid-column:span 2;grid-row:auto}.c4{grid-column:span 2}
  .tl article{grid-template-columns:1fr}.tl .no{grid-row:auto;margin-bottom:.5rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}

/* footer: text-style button that reopens the cookie settings */
.foot button{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.foot button:hover{color:var(--fg);text-decoration:underline}
.inline-link{background:none;border:0;padding:0;font:inherit;color:var(--teal-t);text-decoration:underline;cursor:pointer}