/* ============ Vantis Landingpage — ein Screen, direkt auf den Punkt ============ */
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --bg:#06070d; --ink:#eef1f8; --muted:#9aa3bd;
  --line:rgba(255,255,255,.09); --glass:rgba(255,255,255,.045);
  --blue:#4f8cff; --blue-2:#74a6ff; --cyan:#46e0ff; --violet:#9b7bff;
  --font-display:'Bricolage','Hanken',system-ui,sans-serif;
  --font-body:'Hanken',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
a { color:inherit; text-decoration:none; }
h1 { font-family:var(--font-display); font-weight:800; line-height:1.03; letter-spacing:-.02em; }
.grad { background:linear-gradient(100deg,#fff 8%,#9cc2ff 46%,var(--cyan) 92%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- Atmosphäre ---- */
body::before {
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 82% 42%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 32% 64%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 74% 78%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255,255,255,.35), transparent);
}
.aurora { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; mix-blend-mode:screen; }
.b1 { width:62vw; height:62vw; left:-16vw; top:-22vh; background:radial-gradient(circle,rgba(79,140,255,.65),transparent 70%); animation:drift1 24s ease-in-out infinite; }
.b2 { width:50vw; height:50vw; right:-12vw; top:6vh; background:radial-gradient(circle,rgba(70,224,255,.42),transparent 70%); animation:drift2 28s ease-in-out infinite; }
.b3 { width:48vw; height:48vw; left:28vw; bottom:-24vh; background:radial-gradient(circle,rgba(155,123,255,.4),transparent 70%); animation:drift3 32s ease-in-out infinite; }
@keyframes drift1 { 50%{ transform:translate(7vw,5vh) scale(1.12);} }
@keyframes drift2 { 50%{ transform:translate(-6vw,7vh) scale(1.08);} }
@keyframes drift3 { 50%{ transform:translate(5vw,-6vh) scale(1.14);} }
.grain {
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Ein-Screen-Layout ---- */
.shell { min-height:100svh; display:flex; flex-direction:column; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); }

/* ---- Nav ---- */
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; }
.nav-brand { display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em; }
.nav-brand img { filter:drop-shadow(0 0 8px rgba(79,140,255,.5)); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:1rem;
  border-radius:999px; padding:.8rem 1.45rem; cursor:pointer; white-space:nowrap;
  transition:transform .16s, box-shadow .25s, background .2s, border-color .2s;
}
.btn .arr { font-style:normal; transition:transform .2s; }
.btn:hover .arr { transform:translateX(3px); }
.btn-primary { background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#fff; box-shadow:0 10px 32px rgba(79,140,255,.38), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 48px rgba(79,140,255,.55), inset 0 1px 0 rgba(255,255,255,.32); }
.btn-xl { font-size:1.18rem; padding:1.1rem 2.3rem; }

/* ---- Hero ---- */
.hero { flex:1; display:grid; grid-template-columns:1.08fr .92fr; gap:3rem; align-items:center; padding:1rem 0; }
.hero h1 { font-size:clamp(2.6rem,5.6vw,4.6rem); margin-bottom:1.2rem; }
.lede { font-size:clamp(1.05rem,1.55vw,1.27rem); color:var(--muted); max-width:38ch; }
.hero-cta { display:flex; gap:.9rem; margin:2.1rem 0 1.7rem; flex-wrap:wrap; }
.hero-trust { list-style:none; display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.9rem; color:var(--muted); font-weight:500; }

/* ---- Vantis-System (Hero-Visual) ---- */
.hero-visual { display:grid; place-items:center; }
.vantis-system { position:relative; width:min(420px,92%); aspect-ratio:1; display:grid; place-items:center; }
.halo { position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,rgba(79,140,255,.4),transparent 64%); filter:blur(22px); animation:pulse 6s ease-in-out infinite; }
@keyframes pulse { 50%{ opacity:.65; transform:scale(1.06);} }
.stage { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(64deg); }
.ring { position:absolute; border-radius:50%; border:1.5px solid rgba(150,190,255,.26); }
.ring.r1 { inset:18%; animation:spin 15s linear infinite; }
.ring.r2 { inset:4%; border-color:rgba(120,170,255,.34); animation:spin 25s linear infinite reverse; }
.ring.r3 { inset:-9%; border-color:rgba(70,224,255,.22); animation:spin 38s linear infinite; }
@keyframes spin { to { transform:rotateZ(360deg);} }
.planet { position:absolute; top:-7px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#cfe2ff,var(--blue)); box-shadow:0 0 16px rgba(79,140,255,.9); }
.p2 { background:radial-gradient(circle at 35% 30%,#d6fbff,var(--cyan)); box-shadow:0 0 16px rgba(70,224,255,.9); }
.p3 { background:radial-gradient(circle at 35% 30%,#e6dcff,var(--violet)); box-shadow:0 0 16px rgba(155,123,255,.9); }
.p4 { top:auto; bottom:-7px; left:auto; right:50%; margin-right:-7px; width:10px; height:10px; background:radial-gradient(circle at 35% 30%,#cfe2ff,var(--blue-2)); }
.core {
  position:relative; z-index:2; width:36%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 40% 34%,rgba(46,68,120,.95),rgba(9,12,26,.96));
  box-shadow:0 0 60px rgba(79,140,255,.5), inset 0 0 32px rgba(79,140,255,.35);
  border:1px solid rgba(150,190,255,.32);
}
.core img { filter:drop-shadow(0 4px 16px rgba(79,140,255,.7)); width:62%; height:62%; }

/* ---- Footer ---- */
.foot { padding:1.4rem 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; }
.foot-credit strong { color:var(--ink); font-weight:600; }

/* ---- Reveal (beim Laden) ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; }
.reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; text-align:center; gap:1.4rem; align-content:center; }
  .hero-copy { order:2; }
  .hero-visual { order:1; }
  .hero h1, .lede { margin-left:auto; margin-right:auto; }
  .lede { max-width:50ch; }
  .hero-cta, .hero-trust { justify-content:center; }
  .hero-cta { margin:1.6rem 0 1.2rem; }
  .vantis-system { width:min(240px,58vw); }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .hero h1 { font-size:clamp(2.1rem,9vw,2.6rem); }
}
@media (max-height:640px) {
  .vantis-system { width:min(190px,40vh); }
  .hero { gap:1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  *, *::before, *::after { animation:none !important; }
}