:root {
      --bg: #f4f0df;
      --ink: #090909;
      --muted: #3b3b3b;
      --yellow: #fff500;
      --pink: #ff4fd8;
      --blue: #3d5afe;
      --green: #00e676;
      --orange: #ff7a00;
      --white: #ffffff;
      --line: #090909;
      --max: 1180px;
      --shadow: 8px 8px 0 var(--ink);
      --shadow-big: 14px 14px 0 var(--ink);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: Helvetica, Arial, sans-serif;
      background:
        linear-gradient(90deg, rgba(9,9,9,.055) 1px, transparent 1px),
        linear-gradient(rgba(9,9,9,.055) 1px, transparent 1px),
        var(--bg);
      background-size: 28px 28px;
      color: var(--ink);
      line-height: 1.1;
    }

    a { color: inherit; text-decoration: none; }
    .page { overflow: hidden; }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--yellow);
      border-bottom: 4px solid var(--ink);
    }

    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: .85rem 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      font-weight: 900;
      letter-spacing: -.04em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: .7rem;
      font-size: 1.1rem;
    }

    .brand-mark {
      width: 2.1rem;
      height: 2.1rem;
      border: 4px solid var(--ink);
      background: var(--pink);
      box-shadow: 4px 4px 0 var(--ink);
      transform: rotate(-7deg);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .nav-links a:not(.btn) {
      padding: .35rem .5rem;
      border: 3px solid transparent;
    }

    .nav-links a:hover {
      border-color: var(--ink);
      background: var(--white);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .9rem 1.15rem;
      border: 4px solid var(--ink);
      background: var(--white);
      color: var(--ink);
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 5px 5px 0 var(--ink);
      transition: .14s ease;
    }

    .btn:hover {
      transform: translate(3px, 3px);
      box-shadow: 2px 2px 0 var(--ink);
    }

    .btn-primary { background: var(--green); }

    section { padding: 5rem 1.2rem; }
    .container { max-width: var(--max); margin: 0 auto; }

    .hero {
      min-height: 88vh;
      display: grid;
      align-items: center;
      padding-top: 4rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
      gap: 2rem;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      padding: .55rem .8rem;
      border: 4px solid var(--ink);
      background: var(--pink);
      color: var(--ink);
      font-size: .95rem;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 5px 5px 0 var(--ink);
      margin-bottom: 1.25rem;
      transform: rotate(-1.5deg);
    }

    h1 {
      font-size: clamp(4rem, 11vw, 9.6rem);
      line-height: .78;
      letter-spacing: -.095em;
      text-transform: uppercase;
      font-weight: 900;
    }

    .hero h1 span {
      display: inline-block;
      background: var(--yellow);
      border: 5px solid var(--ink);
      padding: .04em .08em .09em;
      box-shadow: var(--shadow-big);
      transform: rotate(1deg);
    }

    .lead {
      margin-top: 1.8rem;
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      line-height: 1.12;
      color: var(--ink);
      max-width: 760px;
      font-weight: 800;
    }

    .hero-actions {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .hero-card {
      min-height: 500px;
      border: 5px solid var(--ink);
      background: var(--white);
      padding: 1rem;
      box-shadow: var(--shadow-big);
      transform: rotate(1.2deg);
      position: relative;
    }

    .hero-card::before {
      content: "PROTOTYPEN MIT WIRKUNG";
      position: absolute;
      top: -1.2rem;
      left: 1rem;
      background: var(--orange);
      border: 4px solid var(--ink);
      padding: .35rem .6rem;
      font-weight: 900;
      font-size: .82rem;
      transform: rotate(-3deg);
    }

    .mini-window {
      border: 4px solid var(--ink);
      background: var(--blue);
      padding: 1rem;
      margin-bottom: 1rem;
      box-shadow: 5px 5px 0 var(--ink);
    }

    .mini-window:nth-child(2) { background: var(--green); transform: rotate(-1.5deg); }

    .window-dots { display: flex; gap: .45rem; margin-bottom: 1rem; }
    .dot { width: .8rem; height: .8rem; border: 3px solid var(--ink); background: var(--yellow); }

    .code-line {
      height: .95rem;
      border: 3px solid var(--ink);
      background: var(--white);
      margin: .65rem 0;
    }
    .code-line.short { width: 44%; }
    .code-line.medium { width: 68%; }
    .code-line.long { width: 88%; }
    .code-line.accent { background: var(--pink); }

    .floating-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      margin-top: 1rem;
    }

    .tag {
      padding: .65rem .8rem;
      border: 4px solid var(--ink);
      background: var(--yellow);
      font-size: .95rem;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .tag:nth-child(2n) { background: var(--pink); }
    .tag:nth-child(3n) { background: var(--green); }

    .section-head { max-width: 900px; margin-bottom: 2.2rem; }

    .kicker {
      display: inline-block;
      background: var(--ink);
      color: var(--white);
      padding: .4rem .65rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: .82rem;
      margin-bottom: .9rem;
    }

    h2 {
      font-size: clamp(2.8rem, 6.5vw, 6rem);
      line-height: .82;
      letter-spacing: -.08em;
      text-transform: uppercase;
      font-weight: 900;
      margin-bottom: 1rem;
    }

    .section-text {
      color: var(--ink);
      font-size: 1.25rem;
      line-height: 1.17;
      max-width: 760px;
      font-weight: 800;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    .card {
      background: var(--white);
      border: 5px solid var(--ink);
      padding: 1.1rem;
      min-height: 220px;
      box-shadow: var(--shadow);
    }

    .card:nth-child(2) { background: var(--yellow); transform: rotate(1deg); }
    .card:nth-child(3) { background: var(--pink); transform: rotate(-1deg); }

    .card-icon {
      width: 3rem;
      height: 3rem;
      display: grid;
      place-items: center;
      border: 4px solid var(--ink);
      background: var(--green);
      font-size: 1.5rem;
      font-weight: 900;
      margin-bottom: 1rem;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .card h3 {
      font-size: 1.6rem;
      line-height: .95;
      margin-bottom: .7rem;
      letter-spacing: -.04em;
      text-transform: uppercase;
      font-weight: 900;
    }

    .card p { color: var(--ink); font-weight: 750; line-height: 1.18; }

    .split {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 2rem;
      align-items: start;
    }

    .feature-list { display: grid; gap: .85rem; }

    .feature {
      padding: 1rem;
      background: var(--white);
      border: 5px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
    }

    .feature:nth-child(2n) { background: var(--yellow); }
    .feature:nth-child(3n) { background: var(--green); }

    .feature strong {
      display: block;
      font-size: 1.35rem;
      line-height: .95;
      margin-bottom: .35rem;
      text-transform: uppercase;
      letter-spacing: -.04em;
      font-weight: 900;
    }

    .feature span { color: var(--ink); font-weight: 750; line-height: 1.18; }

    .quote-block {
      padding: 1.5rem;
      background: var(--blue);
      color: var(--white);
      border: 5px solid var(--ink);
      box-shadow: var(--shadow-big);
      position: sticky;
      top: 6rem;
      transform: rotate(-1.5deg);
    }

    .quote-block p {
      font-size: clamp(2.1rem, 4vw, 3.6rem);
      line-height: .84;
      letter-spacing: -.07em;
      font-weight: 900;
      text-transform: uppercase;
    }

    .quote-block small {
      display: block;
      color: var(--white);
      margin-top: 1rem;
      font-weight: 800;
      line-height: 1.15;
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      counter-reset: step;
    }

    .step {
      counter-increment: step;
      background: var(--white);
      border: 5px solid var(--ink);
      padding: 1rem;
      box-shadow: var(--shadow);
    }

    .step:nth-child(1) { background: var(--yellow); }
    .step:nth-child(2) { background: var(--pink); }
    .step:nth-child(3) { background: var(--green); }
    .step:nth-child(4) { background: var(--orange); }

    .step::before {
      content: "0" counter(step);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border: 4px solid var(--ink);
      background: var(--white);
      font-weight: 900;
      margin-bottom: 1.3rem;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .step h3 {
      margin-bottom: .5rem;
      font-size: 1.45rem;
      line-height: .9;
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .step p { color: var(--ink); font-weight: 750; line-height: 1.18; }

    .highlight {
      background: var(--ink);
      color: var(--white);
      border-top: 5px solid var(--ink);
      border-bottom: 5px solid var(--ink);
    }

    .big-statement {
      font-size: clamp(3rem, 7.2vw, 7rem);
      line-height: .78;
      letter-spacing: -.085em;
      font-weight: 900;
      text-transform: uppercase;
      max-width: 1080px;
    }

    .big-statement span {
      display: inline-block;
      color: var(--ink);
      background: var(--yellow);
      padding: .03em .08em .08em;
      border: 5px solid var(--white);
      transform: rotate(-1deg);
    }

    .pill-grid {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: 2rem;
    }

    .pill {
      padding: .75rem .95rem;
      border: 4px solid var(--ink);
      background: var(--white);
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .pill:nth-child(2n) { background: var(--pink); }
    .pill:nth-child(3n) { background: var(--green); }

    .projects {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    .project {
      background: var(--white);
      border: 5px solid var(--ink);
      padding: 1.15rem;
      min-height: 210px;
      box-shadow: var(--shadow);
    }

    .project:nth-child(4n+1) { background: var(--yellow); }
    .project:nth-child(4n+2) { background: var(--pink); }
    .project:nth-child(4n+3) { background: var(--green); }
    .project:nth-child(4n+4) { background: var(--blue); color: var(--white); }

    .project-featured {
      min-height: 330px;
      box-shadow: var(--shadow-big);
      transform: rotate(-.8deg);
    }

    .project-featured:nth-child(2) { transform: rotate(1deg); }

    .project-label {
      display: inline-flex;
      margin-bottom: .9rem;
      padding: .35rem .55rem;
      border: 3px solid currentColor;
      background: var(--white);
      color: var(--ink);
      font-size: .75rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .project:nth-child(4n+4) .project-label { color: var(--ink); }

    .project h3 {
      font-size: clamp(2rem, 4vw, 3.6rem);
      line-height: .82;
      letter-spacing: -.075em;
      text-transform: uppercase;
      font-weight: 900;
      margin-bottom: .8rem;
    }

    .project:not(.project-featured) h3 { font-size: clamp(1.6rem, 3vw, 2.45rem); }

    .project p {
      color: inherit;
      font-size: 1.05rem;
      line-height: 1.14;
      font-weight: 800;
    }

    .project ul {
      list-style: none;
      margin-top: 1rem;
      display: grid;
      gap: .45rem;
      color: inherit;
      font-weight: 900;
      text-transform: uppercase;
      font-size: .9rem;
    }

    .project li::before {
      content: "→";
      margin-right: .45rem;
    }

    .cta { text-align: center; padding-bottom: 6rem; }

    .cta-box {
      padding: clamp(2rem, 6vw, 5rem);
      background: var(--yellow);
      border: 6px solid var(--ink);
      box-shadow: var(--shadow-big);
      transform: rotate(.5deg);
    }

    .cta h2 { max-width: 980px; margin-left: auto; margin-right: auto; }

    .cta p {
      max-width: 760px;
      margin: 0 auto 1.8rem;
      color: var(--ink);
      font-size: 1.25rem;
      line-height: 1.15;
      font-weight: 850;
    }

    footer {
      padding: 1.5rem 1.2rem;
      color: var(--white);
      background: var(--ink);
      font-size: .92rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    footer .container {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    @media (max-width: 920px) {
      .hero-grid, .split { grid-template-columns: 1fr; }
      .hero-card { min-height: 380px; }
      .cards, .process { grid-template-columns: repeat(2, 1fr); }
      .quote-block { position: relative; top: auto; }
    }

    @media (max-width: 620px) {
      section { padding: 3.5rem 1rem; }
      .nav-inner { padding: .75rem 1rem; }
      .cards, .process, .projects { grid-template-columns: 1fr; }
      .hero { min-height: auto; padding-top: 3rem; }
      h1 { font-size: clamp(3.6rem, 19vw, 5.6rem); }
      .hero-actions { flex-direction: column; }
      .btn { width: 100%; }
      .hero-card, .quote-block, .cta-box, .project-featured { transform: none; }
    }

/* ==================================================
   Utilities & accessibility
   ================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 4px;
}

body.nav-open {
  overflow: hidden;
}

/* ==================================================
   Mobile navigation
   ================================================== */
.nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--ink);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  place-items: center;
  gap: .2rem;
  padding: .45rem;
}

.nav-toggle-line {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--ink);
}

/* ==================================================
   Project images
   ================================================== */
.project-media {
  margin: 1rem 0 1rem;
  border: 4px solid currentColor;
  background: var(--white);
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
}

.project-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project:nth-child(4n+4) .project-media {
  border-color: var(--white);
  box-shadow: 5px 5px 0 var(--white);
}

/* ==================================================
   Lightweight JS animation hooks
   ================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px) {
  .nav-toggle {
    display: grid;
  }

  .nav-links {
    position: fixed;
    inset: 4.7rem 1rem auto 1rem;
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: 5px solid var(--ink);
    background: var(--yellow);
    box-shadow: var(--shadow-big);
    transform: translateY(-130%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a:not(.btn),
  .nav-links .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}