@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Inter-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/SpaceGrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/SpaceGrotesk-700.woff2') format('woff2')}

  :root{--bg:#06070a;--ink:#eef2f9;--muted:#7e8699;--line:rgba(255,255,255,.07);--glow:#7fd5ff;--mx:50%;--my:25%}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}
  ::selection{background:rgba(127,213,255,.25)}
  .veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% -5%,rgba(38,66,104,.22),transparent 50%),radial-gradient(circle at 85% 90%,rgba(64,52,112,.14),transparent 55%)}
  .spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(340px circle at var(--mx) var(--my),rgba(127,213,255,.06),transparent 60%);transition:.12s}
  .grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;background:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px)}
  canvas#dust{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4}
  .wrap{position:relative;z-index:4;max-width:1140px;margin:0 auto;padding:0 26px}
  .badge{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9;background:rgba(16,18,24,.78);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:11px;letter-spacing:.14em;color:#9fb6dd}

  nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;opacity:0;animation:fd .9s .2s forwards}
  .brand{display:flex;align-items:center;gap:13px;font-family:'Space Grotesk';font-weight:700;letter-spacing:.14em;font-size:19px}
  .brand img{width:50px;height:50px;border-radius:13px;filter:drop-shadow(0 0 18px rgba(127,213,255,.5))}
  .nav-r{display:flex;gap:8px;align-items:center}
  .navlink{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;transition:.25s}
  .navlink:hover{color:#fff}
  .navlink.solid{border:1px solid var(--line)}
  .navlink.solid:hover{border-color:var(--glow);box-shadow:0 0 22px rgba(127,213,255,.28)}

  header{padding:40px 0 26px;text-align:center;position:relative}
  .halo{position:absolute;width:360px;height:360px;border-radius:50%;top:-44px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(127,213,255,.16),transparent 62%);filter:blur(10px);pointer-events:none;opacity:0;animation:decloak 1.5s .2s forwards}
  .hero-logo{width:132px;height:132px;border-radius:30px;object-fit:cover;box-shadow:0 34px 100px rgba(0,0,0,.7),0 0 80px rgba(127,213,255,.3);opacity:0;transform:translateY(20px) scale(.9);animation:rise 1.1s .25s cubic-bezier(.2,.8,.2,1) forwards,float 6.5s 1.4s ease-in-out infinite}
  .eyebrow{margin-top:26px;font-size:11.5px;letter-spacing:.44em;color:var(--glow);font-weight:700;opacity:0;animation:decloak 1s .8s forwards}
  .title{font-family:'Space Grotesk';font-size:clamp(48px,9vw,108px);font-weight:700;line-height:.95;letter-spacing:-.02em;margin:14px 0 0}
  .title .ch{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.2em);animation:letter .85s forwards;background:linear-gradient(180deg,#fff,#9ab0d4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tag{max-width:620px;color:#bfc7d8;font-size:clamp(15px,1.9vw,19px);line-height:1.65;margin:20px auto 0;opacity:0;animation:decloak 1s 1.7s forwards}
  .cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap;justify-content:center;opacity:0;animation:decloak 1s 2s forwards}
  .btn{border:none;cursor:pointer;font-weight:700;font-size:15px;padding:16px 30px;border-radius:14px;color:#06121f;text-decoration:none;background:linear-gradient(135deg,#a6e3ff,#6f9fd8);transition:.3s;font-family:inherit}
  .btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(127,213,255,.45)}
  .btn.ghost{background:transparent;color:#cfd8ea;border:1px solid var(--line)}
  .btn.ghost:hover{border-color:var(--glow);color:#fff;box-shadow:0 0 26px rgba(127,213,255,.22)}

  /* realistic stage */
  .stagewrap{width:min(1000px,96vw);margin:50px auto 0;opacity:0;transform:translateY(28px);animation:decloak 1.1s 2.3s forwards}
  .stagecap{font-size:12.5px;letter-spacing:.04em;color:var(--muted);margin-bottom:13px;text-align:center}
  .stagecap b{color:#cfd8ea}
  .stage{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(130% 110% at 50% -10%,#1b2334,#080b11 72%);box-shadow:0 50px 130px rgba(0,0,0,.7)}
  .tasktop{position:absolute;inset:0 0 auto 0;height:34px;background:rgba(7,9,13,.55);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:11px;color:#7b8499;z-index:1}
  .tasktop .ti{display:flex;align-items:center;gap:7px}.tasktop .ti img{width:15px;height:15px;border-radius:4px}
  .tasktop .clock{margin-left:auto;color:#9aa3b6}
  .win{position:absolute;left:8%;top:14%;width:72%;height:76%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#fbfdff;box-shadow:0 30px 70px rgba(0,0,0,.55)}
  .winbar{height:40px;background:#eef1f6;display:flex;align-items:center;gap:8px;padding:0 13px;border-bottom:1px solid #dde2ea}
  .light{width:11px;height:11px;border-radius:50%}.l1{background:#ff5f57}.l2{background:#febc2e}.l3{background:#28c840}
  .url{margin-left:10px;flex:1;height:23px;border-radius:8px;background:#fff;border:1px solid #dde2ea;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#6b7686}.url b{color:#2b303a}
  .page{padding:22px 28px;height:calc(100% - 40px);overflow:hidden;color:#1c2230;text-align:left}
  .kicker{font-size:10px;letter-spacing:.14em;color:#b23b3b;font-weight:800;text-transform:uppercase}
  .head{font-family:Georgia,serif;font-size:22px;font-weight:700;line-height:1.2;margin:6px 0 4px;color:#10141c}
  .byline{font-size:11px;color:#8a93a3;margin-bottom:14px}
  .page p{font-size:13px;line-height:1.78;color:#39414f;margin-bottom:10px;max-width:560px}

  .cursor{position:absolute;z-index:6;width:19px;height:19px;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));opacity:0;transition:left .9s cubic-bezier(.3,.6,.3,1),top .9s cubic-bezier(.3,.6,.3,1),opacity .3s}
  .capflash{position:absolute;inset:0;z-index:5;background:#eef8ff;opacity:0;pointer-events:none}
  /* input bar (original: thin, top-center, translucent) */
  /* input bar: INSIDE the white window, adapts to light bg (light frosted, faint dark text) */
  .inbar{position:absolute;z-index:8;left:44%;top:25%;transform:translateX(-50%) translateY(-8px);width:min(52%,350px);
    background:rgba(250,252,255,.5);backdrop-filter:blur(4px);border:1px solid rgba(20,30,50,.06);border-radius:11px;
    display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 6px 18px rgba(0,0,0,.06);opacity:0;transition:.5s cubic-bezier(.2,.8,.2,1)}
  .inbar.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .inbar .ph{width:6px;height:6px;border-radius:50%;background:rgba(70,120,180,.4);flex:none;opacity:.6}
  .inbar .txt{font-size:13.5px;color:rgba(30,42,62,.5);white-space:nowrap;overflow:hidden}
  .inbar .cr{display:inline-block;width:7px;height:15px;background:rgba(40,60,90,.4);vertical-align:-3px;animation:blink 1s steps(1) infinite}
  /* overlay: INSIDE the white window, bottom-right, adapts to light bg (almost invisible, no glow) */
  .overlay{position:absolute;z-index:7;right:23%;bottom:15%;width:30%;min-width:200px;
    background:rgba(250,252,255,.46);backdrop-filter:blur(4px);border:1px solid rgba(20,30,50,.05);border-radius:11px;
    padding:12px 14px;opacity:0;transform:translateY(10px);transition:.7s;box-shadow:0 8px 22px rgba(0,0,0,.06)}
  .overlay.show{opacity:1;transform:none}
  .overlay .oa{font-size:13px;line-height:1.55;color:rgba(28,40,60,.55);min-height:36px}
  .overlay .cr2{display:inline-block;width:7px;height:13px;background:rgba(40,60,90,.4);vertical-align:-2px;animation:blink 1s steps(1) infinite}

  /* steps */
  section{padding:64px 0}
  .h2{font-family:'Space Grotesk';font-size:clamp(27px,4vw,44px);font-weight:700;text-align:center;margin-bottom:8px;background:linear-gradient(180deg,#fff,#9ab0d4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{text-align:center;color:var(--muted);margin-bottom:48px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .step{position:relative;background:rgba(15,18,26,.5);border:1px solid var(--line);border-radius:16px;padding:26px 22px;opacity:0;filter:blur(12px);transform:translateY(28px);transition:.9s cubic-bezier(.2,.7,.2,1)}
  .step.seen{opacity:1;filter:none;transform:none}
  .step .n{font-family:'Space Grotesk';font-size:13px;color:var(--glow);font-weight:700;letter-spacing:.1em}
  .step h3{font-size:17px;margin:10px 0 7px}.step p{color:#a3abbd;font-size:14px;line-height:1.6}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{background:rgba(15,18,26,.55);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:18px;padding:28px 24px;opacity:0;filter:blur(14px);transform:translateY(30px) scale(.97);transition:1s cubic-bezier(.2,.7,.2,1)}
  .card.seen{opacity:1;filter:blur(0);transform:none}
  .card .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;font-size:22px;background:linear-gradient(135deg,rgba(127,213,255,.18),rgba(120,110,200,.12));border:1px solid var(--line)}
  .card h3{font-size:18px;margin-bottom:8px}.card p{color:#a3abbd;font-size:14px;line-height:1.6}
  .card:hover{border-color:var(--glow);box-shadow:0 18px 48px rgba(127,213,255,.12);transform:translateY(-4px)}

  .contact{max-width:480px;margin:0 auto;display:grid;gap:12px}
  .contact input,.contact textarea{padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(15,18,26,.6);color:#fff;font-family:inherit;font-size:14px;transition:.25s}
  .contact input:focus,.contact textarea:focus{outline:none;border-color:var(--glow);box-shadow:0 0 22px rgba(127,213,255,.16)}
  footer{padding:40px 0 60px;text-align:center;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
  footer img{width:26px;height:26px;border-radius:7px;vertical-align:-8px;margin-right:8px;opacity:.8}

  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes decloak{to{opacity:1;transform:none;filter:none}}
  @keyframes letter{to{opacity:1;filter:blur(0);transform:none}}
  @keyframes fd{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  @keyframes blink{50%{opacity:0}}
  @media(max-width:780px){.steps,.grid{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important}.card,.step{opacity:1;filter:none;transform:none}}

  /* ===== Responsive: Tablet ===== */
  @media (max-width:900px){
    .wrap{padding:0 18px}
    nav{padding:18px 0}
    .brand{font-size:16px}
    .brand img{width:42px;height:42px}
    .hero-logo{width:108px;height:108px}
    .title{font-size:clamp(40px,11vw,80px)}
    .stagewrap{margin-top:40px}
    .page{padding:16px 18px}
    .head{font-size:18px}
    .page p{font-size:11.5px;line-height:1.6}
    .byline{font-size:10px}
    .inbar .txt{font-size:12px}
    .overlay .oa{font-size:12px}
  }

  /* ===== Responsive: Smartphone ===== */
  @media (max-width:560px){
    .wrap{padding:0 14px}
    nav{flex-direction:column;gap:12px;padding:16px 0}
    .nav-r{gap:6px}
    .hero-logo{width:92px;height:92px;border-radius:22px}
    .halo{width:240px;height:240px;top:-28px}
    .eyebrow{font-size:10px;letter-spacing:.3em}
    .title{font-size:clamp(38px,15vw,64px)}
    .tag{font-size:15px;line-height:1.55}
    .cta{flex-direction:column;width:100%;gap:10px}
    .cta .btn{width:100%;text-align:center}
    /* Demo-Szene: höher, damit Inhalt + Overlay Platz haben */
    .stagewrap{margin-top:34px}
    .stagecap{font-size:11px}
    .stage{aspect-ratio:3/4}
    .tasktop{height:30px;font-size:10px}
    .win{left:5%;top:11%;width:90%;height:83%}
    .winbar{height:34px}
    .url{font-size:10px;height:20px}
    .head{font-size:16px}
    .page{padding:14px 16px}
    .page p{font-size:11px;line-height:1.55}
    .inbar{left:50%;top:23%;width:80%;padding:9px 12px}
    .inbar .txt{font-size:11px}
    .overlay{right:7%;bottom:11%;width:62%;padding:11px 12px}
    .overlay .oa{font-size:11px;line-height:1.5}
    section{padding:46px 0}
    .h2{font-size:26px}
    .sub{font-size:14px}
    .card{padding:22px 18px}
    .step{padding:22px 18px}
    .btn{padding:14px 24px;font-size:14px}
    footer{padding:32px 0 48px}
  }

  /* Touch-Geräte: Cursor-Spotlight aus (kein Hover) */
  @media (hover:none){.spot{display:none}}