:root{
    --bg: #0a0f1f;
    --panel: #111a33;
    --panel-2: #0d1428;
    --line: rgba(232,236,246,0.09);
    --text: #e8ecf6;
    --muted: #8891ac;
    --cyan: #4ce0d2;
    --gold: #f2b84b;
    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.6;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 900px 600px at 15% -10%, rgba(76,224,210,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(242,184,75,0.07), transparent 60%);
    pointer-events:none;
    z-index:0;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--cyan); color:#0a0f1f;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(10,15,31,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px; max-width:1180px; margin:0 auto;
  }
  .logo{
    font-family:var(--mono); font-weight:600; font-size:1.05rem;
    letter-spacing:0.02em; display:flex; align-items:center; gap:8px;
  }
  .logo .dot{color:var(--cyan);}
  .nav-links{display:flex; gap:36px; font-size:0.92rem; color:var(--muted);}
  .nav-links a{transition:color 0.2s;}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    font-size:0.88rem; font-weight:600; padding:10px 20px;
    border:1px solid var(--cyan); border-radius:6px; color:var(--cyan);
    transition:all 0.2s;
  }
  .nav-cta:hover{background:var(--cyan); color:#0a0f1f;}
  .burger{display:none; background:none; border:none; color:var(--text); font-size:1.4rem;}

  /* HERO */
  .hero{
    position:relative; z-index:1;
    padding:100px 32px 80px;
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
  }
  .eyebrow{
    font-family:var(--mono); font-size:0.78rem; color:var(--cyan);
    text-transform:uppercase; letter-spacing:0.12em; margin-bottom:22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);}
  h1{
    font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem, 4.6vw, 3.6rem);
    line-height:1.08; letter-spacing:-0.01em; margin-bottom:24px;
  }
  h1 em{font-style:italic; font-weight:500; color:var(--cyan);}
  .hero p.lead{
    color:var(--muted); font-size:1.08rem; max-width:46ch; margin-bottom:36px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--cyan); color:#08111f; font-weight:700; font-size:0.95rem;
    padding:14px 26px; border-radius:7px; display:inline-block;
    transition:transform 0.2s, box-shadow 0.2s;
    box-shadow:0 0 0 rgba(76,224,210,0);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(76,224,210,0.25);}
  .btn-secondary{
    border:1px solid var(--line); color:var(--text); font-weight:600; font-size:0.95rem;
    padding:14px 26px; border-radius:7px; display:inline-block; transition:border-color 0.2s;
  }
  .btn-secondary:hover{border-color:var(--muted);}

  /* Signature: wish-to-code terminal */
  .terminal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.5);
  }
  .terminal-bar{
    display:flex; align-items:center; gap:8px; padding:13px 16px;
    border-bottom:1px solid var(--line); background:var(--panel-2);
  }
  .terminal-bar span{width:10px; height:10px; border-radius:50%; background:#333d5c;}
  .terminal-bar span:nth-child(1){background:#e0645c;}
  .terminal-bar span:nth-child(2){background:#e0b04c;}
  .terminal-bar span:nth-child(3){background:#5cc98a;}
  .terminal-label{
    margin-left:8px; font-family:var(--mono); font-size:0.72rem; color:var(--muted);
  }
  .terminal-body{padding:26px 24px; font-family:var(--mono); font-size:0.87rem; min-height:280px;}
  .t-line{margin-bottom:14px; color:var(--muted);}
  .t-line .prompt{color:var(--gold);}
  .t-wish{color:var(--text);}
  .t-out{color:var(--muted); margin-left:2px;}
  .cursor{
    display:inline-block; width:7px; height:15px; background:var(--cyan);
    margin-left:2px; animation:blink 1s steps(1) infinite; vertical-align:-2px;
  }
  @keyframes blink{50%{opacity:0;}}
  .code-block{
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    padding:16px; margin-top:6px; opacity:0; transform:translateY(6px);
    animation:reveal 0.6s ease forwards; animation-delay:2.4s;
  }
  @keyframes reveal{to{opacity:1; transform:translateY(0);}}
  .code-block .kw{color:var(--cyan);} .code-block .fn{color:var(--gold);} .code-block .str{color:#9be89b;}
  .t-check{
    color:#5cc98a; opacity:0; animation:reveal 0.5s ease forwards; animation-delay:3rem;
  }

  /* SECTION generic */
  section{position:relative; z-index:1; padding:90px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-eyebrow{
    font-family:var(--mono); font-size:0.76rem; color:var(--cyan); text-transform:uppercase;
    letter-spacing:0.12em; margin-bottom:14px;
  }
  h2{
    font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing:-0.01em; margin-bottom:16px;
  }
  .section-head p{color:var(--muted); font-size:1.02rem;}

  /* LEISTUNGEN */
  .services{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:12px; overflow:hidden;}
  .service-card{background:var(--panel-2); padding:34px 30px; transition:background 0.25s;}
  .service-card:hover{background:#141d3a;}
  .service-num{font-family:var(--mono); font-size:0.78rem; color:var(--gold); margin-bottom:18px; display:block;}
  .service-card h3{font-family:var(--serif); font-weight:600; font-size:1.22rem; margin-bottom:10px;}
  .service-card p{color:var(--muted); font-size:0.93rem;}

  /* UEBER UNS */
  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;}
  .founder-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:36px; position:relative;
  }
  .founder-photo{
    width:84px; height:84px; border-radius:50%;
    background:linear-gradient(135deg, var(--cyan), var(--gold));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:600; font-size:1.7rem; color:#0a0f1f;
    margin-bottom:20px;
  }
  .founder-card blockquote{
    font-family:var(--serif); font-style:italic; font-size:1.15rem; line-height:1.5;
    color:var(--text); margin-bottom:20px;
  }
  .founder-name{font-weight:700; font-size:0.98rem;}
  .founder-role{color:var(--muted); font-size:0.85rem; font-family:var(--mono);}
  .about-text p{color:var(--muted); margin-bottom:18px; font-size:1.02rem;}
  .about-text strong{color:var(--text);}
  .stat-row{display:flex; gap:44px; margin-top:32px; flex-wrap:wrap;}
  .stat b{font-family:var(--serif); font-size:1.9rem; display:block; color:var(--cyan);}
  .stat span{color:var(--muted); font-size:0.85rem;}

  /* WARUM */
  .why{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:36px;}
  .why-item{padding-top:20px; border-top:2px solid var(--cyan);}
  .why-item h3{font-family:var(--serif); font-weight:600; font-size:1.1rem; margin-bottom:10px;}
  .why-item p{color:var(--muted); font-size:0.9rem;}

  /* KONTAKT */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
  .contact-info h2{margin-bottom:20px;}
  .contact-info p{color:var(--muted); margin-bottom:28px; max-width:42ch;}
  .info-line{display:flex; gap:14px; margin-bottom:16px; font-size:0.95rem;}
  .info-line .lbl{font-family:var(--mono); color:var(--gold); min-width:100px; font-size:0.82rem; padding-top:2px;}
  form{display:flex; flex-direction:column; gap:16px;}
  .field label{display:block; font-size:0.82rem; color:var(--muted); margin-bottom:7px; font-family:var(--mono);}
  .field input, .field textarea{
    width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:13px 14px; color:var(--text); font-family:var(--sans); font-size:0.95rem;
    transition:border-color 0.2s;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--cyan);}
  .field textarea{resize:vertical; min-height:110px;}
  .submit-btn{
    background:var(--cyan); color:#08111f; font-weight:700; border:none;
    padding:14px 26px; border-radius:7px; font-size:0.95rem; cursor:pointer;
    width:fit-content; transition:transform 0.2s;
  }
  .submit-btn:hover{transform:translateY(-2px);}

  footer{
    border-top:1px solid var(--line); padding:36px 0; position:relative; z-index:1;
  }
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-row .logo{font-size:0.95rem;}
  .footer-links{display:flex; gap:26px; font-size:0.85rem; color:var(--muted);}
  .footer-links a:hover{color:var(--text);}
  .footer-note{color:var(--muted); font-size:0.8rem; margin-top:18px;}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr; padding-top:60px;}
    .nav-links{display:none;}
    .service-grid{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr; gap:40px;}
    .why-grid{grid-template-columns:1fr 1fr;}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    .cursor{animation:none;}
    .code-block, .t-check{animation:none; opacity:1; transform:none;}
  }

  /* COOKIE CONSENT */
  #cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:var(--panel); border-top:1px solid var(--line);
    box-shadow:0 -20px 50px rgba(0,0,0,0.4);
    padding:22px 32px; display:none;
  }
  #cookie-banner.show{display:block; animation:cookieUp 0.4s ease;}
  @keyframes cookieUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
  .cookie-inner{
    max-width:1180px; margin:0 auto; display:flex; align-items:center;
    justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cookie-text{max-width:640px; font-size:0.92rem; color:var(--muted);}
  .cookie-text strong{color:var(--text); font-family:var(--serif); font-weight:600; font-size:1.02rem; display:block; margin-bottom:6px;}
  .cookie-text a{color:var(--cyan); text-decoration:underline;}
  .cookie-actions{display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0;}
  .cookie-btn{
    font-family:var(--sans); font-size:0.86rem; font-weight:600; padding:11px 18px;
    border-radius:7px; cursor:pointer; border:1px solid var(--line); background:transparent;
    color:var(--text); transition:all 0.2s; white-space:nowrap;
  }
  .cookie-btn:hover{border-color:var(--muted);}
  .cookie-btn.accept-all{background:var(--cyan); color:#08111f; border-color:var(--cyan);}
  .cookie-btn.accept-all:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(76,224,210,0.25);}

  #cookie-modal-overlay{
    position:fixed; inset:0; z-index:1100; background:rgba(6,9,20,0.7);
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  #cookie-modal-overlay.show{display:flex;}
  #cookie-modal{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    max-width:560px; width:100%; max-height:85vh; overflow-y:auto;
    padding:34px; box-shadow:0 40px 100px rgba(0,0,0,0.5);
  }
  #cookie-modal h2{font-size:1.5rem; margin-bottom:10px;}
  #cookie-modal > p{color:var(--muted); font-size:0.92rem; margin-bottom:26px;}
  .cookie-cat{
    border-top:1px solid var(--line); padding:18px 0; display:flex;
    justify-content:space-between; gap:20px; align-items:flex-start;
  }
  .cookie-cat:last-of-type{border-bottom:1px solid var(--line);}
  .cookie-cat-info h3{font-size:0.98rem; margin-bottom:6px; font-family:var(--sans); font-weight:600;}
  .cookie-cat-info p{color:var(--muted); font-size:0.85rem; max-width:38ch;}
  .cookie-toggle{
    position:relative; width:44px; height:25px; flex-shrink:0; margin-top:2px;
  }
  .cookie-toggle input{opacity:0; width:0; height:0;}
  .toggle-slider{
    position:absolute; inset:0; background:#2a3457; border-radius:20px; cursor:pointer; transition:0.2s;
  }
  .toggle-slider::before{
    content:""; position:absolute; width:19px; height:19px; left:3px; top:3px;
    background:#e8ecf6; border-radius:50%; transition:0.2s;
  }
  .cookie-toggle input:checked + .toggle-slider{background:var(--cyan);}
  .cookie-toggle input:checked + .toggle-slider::before{transform:translateX(19px); background:#08111f;}
  .cookie-toggle input:disabled + .toggle-slider{opacity:0.6; cursor:not-allowed;}
  .cookie-modal-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}

  #cookie-settings-link{
    background:none; border:none; color:var(--muted); font-size:0.85rem;
    cursor:pointer; font-family:var(--sans); padding:0; text-decoration:underline;
  }
  #cookie-settings-link:hover{color:var(--text);}