:root{
  --bg:#070b11; --bg2:#0c1320; --fg:#ecf2fb; --muted:#9fb0c8;
  --primary:#86d6ff; --ok:#6cffbe; --glass:rgba(255,255,255,.07); --border:rgba(255,255,255,.12);
  --accent:#bd89ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(134,214,255,.08), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 70%);
  min-height:100svh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* NAV */
.nav{
  position:fixed; inset:16px 50% auto auto; transform:translateX(50%);
  width:min(1180px,calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:16px;
  background:var(--glass); backdrop-filter: blur(14px) saturate(130%);
  border:1px solid var(--border); z-index:1000;
}
.logo{font-weight:800; display:flex; gap:8px; text-decoration:none; color:var(--fg)}
.toplinks a{color:var(--muted); text-decoration:none; margin-left:12px; font-weight:700}
.toplinks a:hover{color:#fff}

/* HERO */
.hero{ position:relative; padding-top:120px; overflow:hidden; isolation:isolate; }
.hero-inner{ padding:80px 0 40px }
.eyebrow{letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700}
.display{font-size:clamp(40px,7vw,74px);line-height:1.02;margin:6px 0 10px;letter-spacing:-.02em}
.display .gradient{background:linear-gradient(90deg,#fff,#cfeeff 40%,#fff 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:20px;color:var(--muted);margin:0 0 16px}
.hero-ctas{display:flex;gap:12px;margin:10px 0 12px;flex-wrap:wrap;position:relative;z-index:2}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.badge{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.05);font-weight:800;letter-spacing:.02em}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.counter{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05);padding:14px}
.counter .num{font-size:34px;font-weight:900;line-height:1}
.counter .label{color:var(--muted);margin-top:4px}

/* BG visuals */
.hero-bg .orb{ position:absolute; filter:blur(60px); opacity:.35; pointer-events:none }
.orb-a{width:520px;height:520px;background:radial-gradient(closest-side, rgba(134,214,255,.30), transparent 70%);left:-120px;top:-80px;animation:floatOrb 12s ease-in-out infinite}
.orb-b{width:640px;height:640px;background:radial-gradient(closest-side, rgba(108,255,190,.25), transparent 70%);right:-160px;top:-60px;animation:floatOrb 16s ease-in-out infinite reverse}
@keyframes floatOrb{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-20px,0) scale(1.03)}}
.grid-lines{
  position:absolute;inset:-10% -10% auto -10%;height:70vh;opacity:.08;
  background:
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(0deg, rgba(255,255,255,.4) 1px, transparent 1px) 0 0/80px 80px;
}
.noise{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

/* Buttons */
.btn,.btn:link,.btn:visited{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  color:var(--fg); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease; font-weight:800;
}
.pill{ border-radius:999px; padding:14px 20px } /* nur für Buttons */
.primary{ background:linear-gradient(180deg, rgba(134,214,255,.96), rgba(134,214,255,.86)); color:#062238; border-color:rgba(134,214,255,.92);
  box-shadow:0 8px 22px rgba(134,214,255,.18), inset 0 1px 0 rgba(255,255,255,.45) }
.primary:hover{ filter:brightness(1.03); box-shadow:0 10px 26px rgba(134,214,255,.22) }
.primary:active{ transform:translateY(1px); box-shadow:0 6px 16px rgba(134,214,255,.20) }
.btn.ghost{ background:rgba(255,255,255,.03); border-color:var(--border) }
.btn.ghost:hover{ background:rgba(255,255,255,.05) }
.magnet{ position:relative }
.magnet:hover{ transform: translateY(-1px) }
.magnet:after{ content:""; position:absolute; inset:-2px; border-radius:inherit; box-shadow:0 0 0 0 rgba(134,214,255,0); transition: box-shadow .25s ease }
.magnet:hover:after{ box-shadow:0 0 40px 6px rgba(134,214,255,.12) }

/* Sections */
.section{ padding:60px 0 }
.section.alt{ background:rgba(255,255,255,.03); border-block:1px solid var(--border) }
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 14px}
.section-head h2{margin:0;font-size:32px}
.section-head .sub{margin:0;color:var(--muted)}

/* Tri cards */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{
  position:relative;padding:18px;border-radius:18px;border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease
}
.tile-head{display:flex;align-items:center;gap:10px}
.icon{font-size:22px}
.tile p{color:var(--muted);margin:8px 0 0}
.glint{pointer-events:none;position:absolute;inset:-1px;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.6,0,.999)}
.tile:hover .glint{transform:translateX(120%)}
.check{list-style:none;padding:0;margin:10px 0 0;color:var(--muted)}
.check li{margin:6px 0;padding-left:18px;position:relative}
.check li::before{content:"✔";position:absolute;left:0;color:var(--ok);font-weight:800}

/* Stepper (FlowLine untereinander) */
.stepper{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:12px}
.stepper li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.04)}
.stepper .num{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(134,214,255,.18);color:#082233;font-weight:900;border:1px solid rgba(134,214,255,.4)}
.stepper .body h4{margin:.2rem 0}

/* Bars */
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bar{position:relative;border:1px solid var(--border);border-radius:12px;padding:8px;background:rgba(255,255,255,.05)}
.bar span{display:block;height:10px;border-radius:8px;background:linear-gradient(90deg,var(--primary),#d8f3ff);width:var(--v)}
.bar label{display:block;color:var(--muted);font-size:.9rem;margin-top:6px}

/* Automation – Karten gleich hoch + eigene Bars */
.auto-tiles{align-items:stretch}
.auto-card{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}
.bar.in-card{margin-top:auto;border-radius:16px;padding:14px}
.bar.in-card span{height:18px;border-radius:12px}
.bar.in-card label{font-weight:700;margin-top:8px}

/* Insights grid */
.insights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05);padding:14px}
.kpi-top{display:flex;justify-content:space-between;align-items:center}
.kpi-title{font-weight:800}
.kpi-delta{font-weight:900}
.kpi-delta.up{color:#8ee8b7}
.kpi-delta.down{color:#9fb0c8}
.kpi-num{font-size:28px;font-weight:900;margin-top:4px}
.mini-chart{
  position:relative;height:48px;border-radius:10px;margin-top:8px;background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px, transparent 12px);
  overflow:hidden;
}
.mini-chart::after{
  content:""; position:absolute; inset:6px; height:calc(100% - 12px);
  width:var(--p,0%); border-radius:8px;
  background:linear-gradient(90deg,var(--primary),#d8f3ff); opacity:.85;
}
.board{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05);padding:14px}
.board h4{margin:0 0 8px}
.workload{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.workload li{display:flex;justify-content:space-between;align-items:center;border:1px dashed var(--border);border-radius:10px;padding:8px}
.dot{display:inline-block;width:12px;height:12px;border-radius:999px}
.dot.red{background:#ff7d7d}.dot.amber{background:#ffd480}.dot.green{background:#76e6a8}

/* Security */
.sec-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.sec-badges{display:flex;flex-wrap:wrap;gap:8px}
.s-badge{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;line-height:1;white-space:nowrap;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.05);font-weight:800}
.acc{display:grid;gap:8px}
.acc-h{width:100%;text-align:left;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--fg);padding:10px;border-radius:10px;font-weight:800;cursor:pointer}
.acc-p{display:none;border:1px dashed var(--border);border-radius:10px;padding:10px;color:var(--muted)}

/* ROI */
.roi-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:16px;
  border:1px solid var(--border); border-radius:16px; padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}
.roi-form .rg{display:grid; gap:6px; margin:8px 0}
.roi-form input[type="range"]{
  -webkit-appearance:none; appearance:none; height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border); border-radius:999px; outline:none; cursor:pointer;
}
.roi-form input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg, var(--primary), #d8f3ff);
  border:1px solid rgba(134,214,255,.65);
  box-shadow:0 4px 12px rgba(134,214,255,.25), inset 0 1px 0 rgba(255,255,255,.6);
  margin-top:-5px;
}
.roi-form input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg, var(--primary), #d8f3ff);
  border:1px solid rgba(134,214,255,.65);
  box-shadow:0 4px 12px rgba(134,214,255,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.roi-form input[type="range"]::-moz-range-track{
  height:14px; background:transparent; border:none;
}

/* Hover tilt & anchors */
.hover-tilt{will-change:transform;transform-style:preserve-3d}
.hover-tilt:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
:target{scroll-margin-top:90px}

/* Footer */
.foot{padding:28px 20px;border-top:1px solid var(--border);display:grid;gap:10px;text-align:center;color:var(--muted)}
.foot .logos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.logo-chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-weight:800;background:rgba(255,255,255,.04)}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:#fff}

/* Reveal */
.reveal{opacity:.001;transform:translateY(8px) scale(.98)}
.reveal.reveal-in{animation:revealSoft .46s cubic-bezier(.2,.6,0,.999) both}
@keyframes revealSoft{to{opacity:1;transform:none}}
.no-js .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .grid-lines,.noise{display:none!important}
}

/* Responsive */
@media (max-width:980px){
  .nav{inset:10px 50% auto auto;width:calc(100% - 20px);transform:translateX(50%)}
  .tri-grid{grid-template-columns:1fr}
  .insights-grid{grid-template-columns:repeat(2,1fr)}
  .sec-grid{grid-template-columns:1fr}
  .roi-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .container{padding:0 14px}
  .display{font-size:clamp(28px,10vw,44px)}
  .hero-ctas .btn{width:100%;text-align:center}
}