:root{
  --bg:#0d1117; --card:#000; --fg:#fff; --muted:#cbd5e1;
  --maxw:1100px; --pad:clamp(16px,2.5vw,28px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:var(--fg); background:var(--bg); }

/* Fixed Background Video Layer */
.bg-layer{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.bg-blur{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 28%, rgba(118,52,255,.2) 0%, rgba(118,52,255,0) 42%),
    radial-gradient(circle at 74% 72%, rgba(47,223,209,.26) 0%, rgba(47,223,209,0) 38%),
    radial-gradient(circle at 85% 10%, rgba(47,223,209,.12) 0%, rgba(47,223,209,0) 55%),
    rgba(12,16,24,.74);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
}
/* NEW: noise overlay above blur */
.bg-noise{ position:absolute; inset:0; z-index:-1; background-image:url("noise-128.png"); background-repeat:repeat; background-size:96px 96px; opacity:.22; mix-blend-mode:overlay; pointer-events:none; }

/* Layout */
header,footer,section{padding:var(--pad)}
.wrap{max-width:var(--maxw); margin:0 auto}

/* Header */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:100; background:linear-gradient(180deg, rgba(13,17,23,.9), rgba(13,17,23,.6) 60%, transparent); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid rgba(255,255,255,.06); }
.navbar .brand{ margin:0; margin-left:var(--pad); margin-right:auto; padding:var(--pad) 0; justify-content:flex-start; }
.brand{display:flex;align-items:center;gap:12px; padding:var(--pad);} 
.brand img{height:32px;width:auto; filter: drop-shadow(0 0 8px rgba(0,0,0,.8));}

/* Hero */
.hero-video{ width:100%; display:block; margin:0; border-radius:0; object-fit:cover; }
.hero-text{ text-align:center; margin-top:6rem; padding:var(--pad) }
.hero-text .headline{ font-size:clamp(20px,5vw,28px); margin:0 0 .5rem; font-weight:500; color:var(--fg); }
.hero-text .subline{ font-size:clamp(16px,2vw,20px); color:var(--muted); margin:.5rem 0 0; }
.hero-logo{ display:block; margin:1rem auto; max-width:220px; height:auto; filter: drop-shadow(0 8px 26px rgba(0,0,0,.95)); }
.hero-logo.shadow{ filter: drop-shadow(0 0 15px rgba(0,0,0,1)); }

/* iOS Buttons (App‑Store Style) */
.ios-btn{
  display:none; margin:1rem auto 0; padding:12px 18px;
  background:#000; color:#fff; border-radius:12px; text-decoration:none;
  font-weight:600; font-size:15px; border:1px solid #2a3348;
  display:flex; align-items:center; justify-content:center; gap:8px; width:max-content;
  box-shadow: 0 18px 22px rgba(0,0,0,1), 0 3px 0 rgba(0,0,0,.98);
  transition: transform .18s ease, box-shadow .18s ease, background .2s;
}
.ios-btn img{ height:20px; width:auto }
.ios-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 22px rgba(0,0,0,1), 0 3px 0 rgba(0,0,0,.95); }

/* Cluster: Mobile/Tablet → Text hat Card-Background (schwarz); Desktop → gemeinsame Card */
.cluster{
  position:relative;
  padding:clamp(24px,3vw,40px);
  background:rgba(8,12,18,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  isolation:isolate;
  overflow:hidden;
}
.cluster-grid{ position:relative; display:grid; align-items:flex-start; gap:clamp(18px,2.4vw,32px); grid-template-columns: 1.1fr 1fr; }
.cluster-grid.alt{ grid-template-columns: 1fr 1.1fr; }
.cluster-col{ position:relative; z-index:1; }
.cluster-col p{ color:var(--muted); }

/* Mobile/Tablet: nur Text bekommt Card-Style (schwarz) */
.cluster::before,
.cluster::after{ content:none; }
.cluster h2{ margin-top:0; }
.cluster p + p{ margin-top:12px; }

.cluster-col.text{
  background:rgba(11,16,24,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:clamp(20px,2.4vw,34px);
  box-shadow:0 18px 36px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
/* Desktop Card-Optik: Wrapper umschließt Text+Video; Text-Card zurücksetzen */


/* Video */
.video-shell{ position:relative; border-radius:12px; overflow:hidden; background:#000; }
video{ display:block; width:100%; height:auto; object-fit:contain; outline:none; border-radius:0; box-shadow: 0 0 20px rgba(0,0,0,.8); }


/* Simple CTA */
a.cta{ display:inline-block; margin-top:14px; padding:10px 14px; background:#fff; color:#111; border-radius:10px; text-decoration:none }

.card{
  position:relative;
  padding:clamp(28px,3vw,56px);
  background:rgba(5,8,15,.78);
  border:1px solid rgba(148,163,184,.08);
  border-radius:20px;
  text-align:center;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  isolation:isolate;
}
.card h2{ margin:0 0 12px; }
.card p{ margin:0 0 18px; color:var(--muted); }
.card.center::before,
.card.center::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.75;
  z-index:-1;
  pointer-events:none;
}
.card.center::before{
  top:10%;
  left:18%;
  background:radial-gradient(circle at center, rgba(118,52,255,.75) 0%, rgba(118,52,255,0) 65%);
}
.card.center::after{
  bottom:-20%;
  right:12%;
  background:radial-gradient(circle at center, rgba(47,223,209,.7) 0%, rgba(47,223,209,0) 65%);
}
.legal{ margin-top:clamp(40px,8vw,80px); }
.legal-columns{ display:grid; gap:clamp(18px,2vw,28px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.legal-card{ background:rgba(6,10,16,.72); border:1px solid rgba(148,163,184,.12); border-radius:18px; padding:clamp(20px,2.6vw,32px); box-shadow:0 20px 40px rgba(0,0,0,.45); text-align:left; }
.legal-card h3{ margin:0 0 12px; font-size:1.05rem; }
.legal-card p{ margin:0 0 12px; color:var(--muted); line-height:1.5; }
.legal-card a{ color:var(--fg); text-decoration:none; }
.legal-card a:hover{ text-decoration:underline; }
.legal-hint{ font-size:.85rem; color:rgba(203,213,225,.82); }
.legal-note{ margin:clamp(18px,3vw,32px) auto 0; max-width:720px; font-size:.85rem; color:rgba(203,213,225,.75); text-align:center; }
/* Reveal Animations */
.reveal{
  --reveal-x: 0;
  --reveal-y: 26px;
  --reveal-scale: .98;
  --reveal-delay: 0s;
  opacity:0;
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
  filter: blur(12px);
  transition: opacity .6s ease var(--reveal-delay), transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay), filter .6s ease var(--reveal-delay);
  will-change: opacity, transform, filter;
}
.reveal.in{
  opacity:1;
  --reveal-x: 0;
  --reveal-y: 0;
  --reveal-scale: 1;
  filter: blur(0);
}
.reveal-left{ --reveal-x: -32px; --reveal-y: 0; }
.reveal-right{ --reveal-x: 32px; --reveal-y: 0; }
.reveal-up{ --reveal-y: -32px; }
.reveal-scale{ --reveal-scale: .92; }

/* Responsive */
@media (max-width: 1024px){ .cluster-grid, .cluster-grid.alt{ grid-template-columns: 1fr; } }
@media (max-width: 820px){
  main{ scroll-snap-type:y mandatory; scroll-behavior:smooth; }
  section{ padding:24px 18px; }
  .snap-section{ min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }
  .hero-text{ margin-top:6rem; }
  .hero-text .headline{ font-size:22px; font-weight:500; }
}
@media (prefers-reduced-motion: reduce){
  main{scroll-behavior:auto}
  .reveal{transition-duration:0s !important; filter:none !important; transform:none !important; opacity:1 !important;}
}

/* Footer */
.site-footer{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:.85rem; opacity:.85; padding-bottom:clamp(24px,6vw,48px); }
.site-footer a, .footer-copy{ color:var(--muted); }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--fg); text-decoration:underline; }
.legal-links{ display:flex; gap:14px; }

.hero-card{
  position:relative;
  padding:clamp(24px,3vw,44px);
  background:rgba(5,8,15,.78);
  border:1px solid rgba(148,163,184,.08);
  border-radius:22px;
  box-shadow:0 32px 64px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  isolation:isolate;
}
.hero-card::before,
.hero-card::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.8;
  pointer-events:none;
  z-index:-1;
}
.hero-card::before{
  top:8%;
  left:16%;
  background:radial-gradient(circle at center, rgba(118,52,255,.75) 0%, rgba(118,52,255,0) 65%);
}
.hero-card::after{
  bottom:-18%;
  right:12%;
  background:radial-gradient(circle at center, rgba(47,223,209,.7) 0%, rgba(47,223,209,0) 65%);
}
.hero-card-inner{
  position:relative;
  padding:clamp(18px,2vw,30px);
  text-align:center;
}
.hero-card-inner .hero-logo{ margin:1.5rem auto; }
.hero-card-inner .subline{ max-width:580px; margin:0 auto; }
.hero-card video{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  margin-bottom:clamp(18px,2vw,32px);
  box-shadow:0 18px 38px rgba(0,0,0,.48);
}


@media (max-width: 600px){
  .site-footer{ padding-bottom:clamp(48px,12vw,72px); }
}

.contact-card{
  position:relative;
  padding:clamp(26px,3.2vw,44px);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.contact-stage{
  position:relative;
  height:clamp(230px,42vw,320px);
  border-radius:24px;
  overflow:hidden;
  background:transparent;
  --capsule-width: calc(95% / 2);
  --capsule-gap: 2.5%;
  --capsule-shift-left: -80%;
  --capsule-shift-right: 80%;
  --capsule-height: calc(var(--capsule-width) * .6);
}

.contact-capsule{
  position:absolute;
  top:50%;
  width:var(--capsule-width);
  transform:translateY(-50%);
  transition:transform .7s cubic-bezier(.22,.7,.18,1);
  pointer-events:none;
  z-index:2;
}

.capsule-left{ left:var(--capsule-gap); }
.capsule-right{ right:var(--capsule-gap); }
.capsule-left img{ transform:rotate(180deg); }
.capsule-right img{ filter: drop-shadow(-15px 0 9px rgba(0,0,0,.65));}

.contact-capsule img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}

.contact-info{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:calc(var(--capsule-height) * .92);
  max-height:var(--capsule-height);
  transform:translateY(-50%);
  background:linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(229,231,235,.94) 100%);
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  box-shadow:0 16px 30px rgba(15,23,42,.14);
  padding:0 clamp(22px,4.4vw,42px);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
  z-index:1;
  color:#0b1120;
}

.contact-info a{
  color:currentColor;
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:600;
  text-decoration:none;
}

.contact-info a:hover{ text-decoration:underline; }

.contact-card.open .contact-info{ opacity:1; transform:translateY(-50%); pointer-events:auto; }
.contact-card.open .capsule-left{ transform:translate(var(--capsule-shift-left), -50%); }
.contact-card.open .capsule-right{ transform:translate(var(--capsule-shift-right), -50%); }

@media (max-width: 820px){
  .contact-card{
    padding:clamp(18px,5vw,30px);
  }
  .contact-stage{
    height:clamp(240px,72vw,300px);
    --capsule-width: calc(90% / 2);
    --capsule-gap: 4%;
    --capsule-shift-left: -88%;
    --capsule-shift-right: 88%;
    --capsule-height: calc(var(--capsule-width) * .64);
  }
}

@media (max-width: 540px){
  .contact-card{
    padding:clamp(14px,6vw,22px);
  }
  .contact-stage{
    height:clamp(210px,82vw,240px);
    --capsule-width: calc(92% / 2);
    --capsule-gap: 4%;
    --capsule-shift-left: -92%;
    --capsule-shift-right: 92%;
    --capsule-height: calc(var(--capsule-width) * .7);
  }
  .capsule-right img{ filter: drop-shadow(-24px 0 28px rgba(0,0,0,.65)); }
  .contact-info{
    height:calc(var(--capsule-height) * .88);
    max-height:calc(var(--capsule-height) * .94);
    padding:0 clamp(16px,7vw,24px);
  }
}








.innovation-image{
  display:block;
  width:100%;
  margin:32px 0 0;
  border-radius:18px;
  
}