/* welp.work — strict-CSP-konform: self-hosted fonts, keine Inline-Styles, kein data: */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/chakra-petch-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}

:root{
  --bg:#07090d; --bg2:#0b0e15;
  --ink:#e9edf2; --mut:#8a93a3; --dim:#525a6b;
  --acc:#5eead4; --acc2:#38bdf8;
  --line:rgba(94,234,212,.14);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Chakra Petch',var(--mono);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(1100px 700px at 78% -10%,rgba(56,189,248,.10),transparent 60%),
    radial-gradient(900px 800px at 8% 110%,rgba(94,234,212,.09),transparent 55%),
    radial-gradient(600px 500px at 50% 40%,rgba(120,80,200,.05),transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,212,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,212,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 18%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 18%,#000 35%,transparent 78%);
}
canvas#net{position:fixed;inset:0;z-index:-1;opacity:.55}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url('/assets/grain.svg')}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 28px}

header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;font-size:12.5px;letter-spacing:.04em}
.brand{font-family:var(--disp);font-weight:700;letter-spacing:.06em;color:var(--ink);text-decoration:none}
.brand b{color:var(--acc)}
.status{display:flex;align-items:center;gap:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(94,234,212,.6);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,234,212,.5)}70%{box-shadow:0 0 0 9px rgba(94,234,212,0)}100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}}

main{min-height:calc(100vh - 92px);display:flex;flex-direction:column;justify-content:center;padding:40px 0 70px}
.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--acc);margin-bottom:26px;opacity:0;animation:rise .9s .15s forwards}
.eyebrow::before{content:"// ";color:var(--dim)}
h1{font-family:var(--disp);font-weight:700;line-height:.96;letter-spacing:-.01em;font-size:clamp(3.4rem,13vw,9.5rem);margin-bottom:.18em}
h1 .a{display:inline-block;opacity:0;animation:rise 1s forwards}
h1 .d1{animation-delay:.2s}
h1 .d2{animation-delay:.34s}
h1 .dom{color:var(--ink)}
h1 .tld{color:transparent;-webkit-text-stroke:1.4px var(--acc);text-shadow:0 0 38px rgba(94,234,212,.28)}
.lead{max-width:46ch;font-size:clamp(1rem,2.1vw,1.22rem);color:var(--mut);margin-bottom:40px;opacity:0;animation:rise 1s .5s forwards}
.lead strong{color:var(--ink);font-weight:500}

.pills{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:54px;opacity:0;animation:rise 1s .7s forwards}
.pill{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:12.5px;letter-spacing:.05em;border:1px solid var(--line);border-radius:2px;color:var(--mut);background:linear-gradient(180deg,rgba(94,234,212,.04),transparent);backdrop-filter:blur(2px)}
.pill svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:1.6}
.pill b{color:var(--ink);font-weight:500}

.meta{display:flex;flex-wrap:wrap;gap:28px 46px;padding-top:30px;border-top:1px solid rgba(255,255,255,.06);opacity:0;animation:rise 1s .9s forwards}
.meta div{font-size:11.5px;letter-spacing:.05em}
.meta .k{color:var(--dim);text-transform:uppercase;letter-spacing:.18em;margin-bottom:6px;font-size:10px}
.meta .v{color:var(--ink)}
.meta .v .acc{color:var(--acc)}

footer{position:relative;z-index:1;padding:30px 0 40px;border-top:1px solid rgba(255,255,255,.05)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:11px;letter-spacing:.06em;color:var(--dim)}
footer a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent;transition:.25s}
footer a:hover{color:var(--acc);border-color:var(--acc)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.eyebrow,.lead,.pills,.meta,h1 .a{opacity:1}}
@media (max-width:560px){header .brand{font-size:13px}.meta{gap:22px 30px}}