:root{
  --bg:#020912;
  --bg-2:#061325;
  --panel:rgba(4,17,34,.72);
  --panel-solid:#0a1627;
  --line:rgba(97,166,255,.16);
  --line-strong:rgba(97,166,255,.24);
  --text:#f4f7ff;
  --muted:#b1bfda;
  --soft:#7f92b2;
  --blue:#1694ff;
  --blue-2:#5ec8ff;
  --glow:0 0 0 1px rgba(95,170,255,.14), 0 28px 90px rgba(5,13,30,.55), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(0,128,255,.14), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(62,116,255,.16), transparent 26%),
    radial-gradient(circle at 85% 80%, rgba(0,126,255,.11), transparent 26%),
    linear-gradient(180deg, #020912 0%, #040d18 35%, #02070e 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-1;
}
body::before{
  width:55vw;height:55vw;right:-10vw;top:-7vw;
  border-radius:50%;
  border:1px solid rgba(77,143,255,.18);
  box-shadow:0 0 110px rgba(0,111,255,.12), inset 0 0 50px rgba(0,111,255,.06);
}
body::after{
  width:66vw;height:66vw;left:35%;top:10%;
  border-radius:50%;
  border:1px solid rgba(77,143,255,.08);
}
.container{width:min(1280px, calc(100% - 52px));margin:0 auto}
.section{padding:30px 0}
.glass{
  background:linear-gradient(180deg, rgba(9,23,42,.76), rgba(4,12,23,.92));
  border:1px solid var(--line);
  box-shadow:var(--glow);
  backdrop-filter:blur(14px);
}
.header{position:sticky;top:0;z-index:40;background:rgba(2,8,16,.54);backdrop-filter:blur(14px);border-bottom:1px solid rgba(104,155,255,.08)}
.nav{display:flex;align-items:center;gap:28px;min-height:82px}
.logo-link{display:inline-flex;align-items:center}
.logo{width:240px;max-width:100%;display:block}
.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto}
.nav-links a,.footer-nav a{color:#eaf2ff;text-decoration:none;font-size:15px;font-weight:500;opacity:.9}
.nav-links a:hover,.footer-nav a:hover{color:#81d8ff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:16px;padding:15px 24px;font-weight:700;transition:.2s ease;white-space:nowrap
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#0d73ff,#23a8ff);color:white;box-shadow:0 10px 30px rgba(16,124,255,.34)}
.btn-secondary{color:white;border:1px solid rgba(140,193,255,.22);background:rgba(7,16,28,.55)}
.nav-cta{margin-left:10px;padding:14px 20px;border-radius:14px}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(113,159,255,.25);color:white;border-radius:12px;padding:10px 12px;font-size:19px}

.hero{padding-top:36px;padding-bottom:18px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:start}
.hero-copy{padding-top:54px}
.pill,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(112,174,255,.2);
  color:#c9dcff;
  background:rgba(5,17,30,.76);
  border-radius:999px;
  padding:11px 18px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.eyebrow{border:none;background:none;padding:0;color:#85bbff}
.hero h1{font-size:clamp(3.6rem,6vw,6rem);line-height:.95;letter-spacing:-.055em;margin:18px 0 18px;font-weight:900;max-width:670px}
.hero h1 br + text, .hero h1 span{display:block}
.hero h1::first-line{color:#57b5ff}
.hero-text{font-size:1.35rem;line-height:1.42;color:#d9e6ff;max-width:690px;margin:0 0 26px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.hero-points{display:flex;flex-wrap:wrap;gap:18px 30px;color:#d0dcf4;font-size:1rem}
.hero-points span{position:relative;padding-left:28px}
.hero-points span::before{content:"✓";position:absolute;left:0;top:-1px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(112,174,255,.26);color:#76d2ff;font-size:.8rem}

.hero-visual{position:relative;min-height:730px}
.dashboard-card{border-radius:30px;padding:18px 18px 20px;position:relative;overflow:hidden}
.dashboard-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 100%, rgba(24,145,255,.16), transparent 35%);pointer-events:none}
.window-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.window-dots{display:flex;gap:7px}
.window-dots span{width:9px;height:9px;border-radius:50%;background:#21334f;border:1px solid rgba(117,156,212,.16)}
.window-search{flex:1;height:38px;border-radius:12px;background:rgba(6,15,28,.6);border:1px solid rgba(100,149,212,.14)}
.window-close{color:#94a6c4;font-size:20px;line-height:1}
.dashboard-body{display:grid;grid-template-columns:170px 1fr;gap:18px}
.dashboard-sidebar{border-radius:22px;padding:14px;background:rgba(5,16,29,.4);border:1px solid rgba(99,147,217,.12)}
.brand-mini{display:flex;align-items:center;gap:8px;color:#f5f8ff;font-weight:700;font-size:14px;margin-bottom:14px}
.brand-mini-icon,.logo-disc{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #79e2ff, #1484ff 55%, #08224a 100%);box-shadow:0 0 18px rgba(35,162,255,.5)}
.side-item{display:block;padding:11px 12px;border-radius:12px;color:#a7b9d8;font-size:14px;text-decoration:none;margin-bottom:6px;background:transparent;border:1px solid transparent}
.side-item.active{background:rgba(10,26,47,.86);border-color:rgba(121,179,255,.18);color:#f1f6ff}
.dashboard-main{display:flex;flex-direction:column;gap:18px}
.dashboard-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.dashboard-top h3{margin:0;font-size:2rem}
.dashboard-top p{margin:6px 0 0;color:#94a8cb}
.time-chip{padding:10px 14px;border:1px solid rgba(128,180,255,.18);border-radius:12px;background:rgba(8,18,32,.7);color:#bdd5ff;font-size:13px;white-space:nowrap}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.metric-box{padding:18px;border-radius:22px;background:rgba(7,17,31,.86);border:1px solid rgba(116,172,255,.14)}
.metric-box strong{display:block;font-size:2rem;margin-bottom:6px}
.metric-box span{display:block;color:#acc0de;font-size:.95rem}
.metric-box small{display:inline-flex;margin-top:12px;padding:6px 10px;background:rgba(11,126,255,.12);color:#5bd0ff;border-radius:999px;font-weight:700}
.chart-box{padding:18px;border-radius:24px;background:rgba(7,17,31,.86);border:1px solid rgba(116,172,255,.14)}
.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#d7e6ff;font-weight:700}
.growth-pill{padding:7px 12px;border-radius:999px;background:rgba(11,126,255,.14);color:#73d7ff;font-size:13px}
.chart-area{position:relative;height:230px;border-radius:22px;background:linear-gradient(180deg, rgba(6,15,28,.2), rgba(6,15,28,.65));overflow:hidden}
.chart-grid{position:absolute;inset:0;background:linear-gradient(transparent 95%, rgba(110,155,219,.08) 96%), linear-gradient(90deg, transparent 95%, rgba(110,155,219,.08) 96%);background-size:100% 25%, 20% 100%}
.chart-line{position:absolute;left:6%;right:6%;bottom:20%;height:2px;background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, #33a5ff 6%, #6ed4ff 70%, #2a86ff 100%);clip-path:path('M 0 160 C 55 145, 85 135, 125 120 S 190 95, 240 110 S 315 130, 360 85 S 420 45, 500 35 L 500 170 L 0 170 Z');box-shadow:0 0 26px rgba(43,145,255,.45)}
.chart-line::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:150px;background:linear-gradient(180deg, rgba(42,157,255,.35), rgba(42,157,255,0));clip-path:path('M 0 120 C 55 105, 85 95, 125 80 S 190 55, 240 70 S 315 90, 360 45 S 420 5, 500 -5 L 500 160 L 0 160 Z')}
.chart-months{display:flex;justify-content:space-between;margin-top:10px;color:#90a3c5;font-size:13px}

.chat-card{position:absolute;right:-8px;top:24px;width:320px;border-radius:26px;padding:18px;background:linear-gradient(180deg, rgba(249,252,255,.98), rgba(240,245,255,.96));color:#10192a;border:1px solid rgba(185,208,255,.42);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.chat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.chat-top-left{display:flex;gap:10px;align-items:center}
.chat-top-left strong{display:block;font-size:1.15rem}
.chat-top-left small{display:block;color:#586b89}
.status{color:#3dbd6d;font-size:12px;white-space:nowrap}
.chat-messages{display:flex;flex-direction:column;gap:10px}
.bubble{border-radius:18px;padding:12px 14px;line-height:1.4}
.bubble-ai{background:#edf4ff;color:#234}
.bubble-option{background:#fff;border:1px solid rgba(180,199,230,.7);font-weight:600;color:#3b5375}
.chat-input{margin-top:16px;height:52px;border-radius:18px;background:#f7fbff;border:1px solid rgba(173,197,233,.78);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:#8a9db9}
.chat-input button{width:36px;height:36px;border:none;border-radius:12px;background:linear-gradient(135deg,#0e7dff,#29b2ff);color:#fff;font-size:16px}
.always-on{position:absolute;right:-42px;top:140px;color:#fff;font-size:1.9rem;font-weight:700;text-align:center;line-height:1.08;transform:rotate(-7deg);opacity:.95;text-shadow:0 0 22px rgba(83,182,255,.22)}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{border-radius:24px;padding:24px;display:grid;grid-template-columns:62px 1fr 24px;gap:18px;align-items:start}
.feature-icon,.process-icon,.stat-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(108,173,255,.2);background:linear-gradient(180deg, rgba(7,18,34,.95), rgba(8,22,40,.82));box-shadow:inset 0 0 18px rgba(24,146,255,.14);font-size:1.4rem}
.feature-card h3,.process-card h3{margin:0 0 10px;font-size:1.8rem;line-height:1.08}
.feature-card p,.process-card p,.section-heading p,.bottom-copy p{margin:0;color:#b7c5df;line-height:1.55}
.feature-arrow{align-self:center;font-size:1.55rem;color:#9ecfff}

.process{padding-top:6px}
.section-heading h2{font-size:3rem;margin:0 0 10px;text-align:center}
.section-heading p{text-align:center;font-size:1.15rem}
.process-grid{display:grid;grid-template-columns:1fr 50px 1fr 50px 1fr;align-items:center;gap:10px;margin-top:28px}
.process-card{display:grid;grid-template-columns:56px 64px 1fr;gap:18px;align-items:flex-start;padding:20px 10px;border-radius:20px}
.process-card.active{background:linear-gradient(180deg, rgba(12,25,46,.8), rgba(5,13,24,.9));border:1px solid rgba(107,169,255,.18)}
.step-number{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(16,123,255,.12);border:1px solid rgba(98,159,255,.24);color:#7fd0ff;font-weight:800}
.process-arrow{font-size:3rem;color:#8abfff;text-align:center;opacity:.9}

.testimonial-wrap{border-radius:28px;padding:28px}
.quote-block{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;padding-bottom:26px;border-bottom:1px solid rgba(110,156,214,.12)}
.avatar-card{height:100%;display:flex;align-items:center}
.avatar-photo{width:170px;height:170px;border-radius:22px;background:linear-gradient(135deg,#28415f,#7f98b8);display:grid;place-items:center;font-size:3rem;font-weight:800;color:#fff;box-shadow:inset 0 0 40px rgba(255,255,255,.08)}
.quote-mark{font-size:4rem;line-height:1;color:#77cbff;margin-bottom:10px}
.quote-copy p{margin:0 0 16px;font-size:1.14rem;color:#e2ecff;max-width:760px}
.quote-author strong{display:block;font-size:1.1rem}
.quote-author span{color:#9eb3d2}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:24px}
.stat-item{display:flex;align-items:center;gap:16px;padding:12px 0}
.stat-item strong{display:block;font-size:2rem;color:#69c8ff}
.stat-item span{display:block;color:#c6d4eb;line-height:1.35}

.bottom-cta-card{border-radius:30px;padding:34px 34px 30px;display:grid;grid-template-columns:1.2fr .85fr;gap:34px;align-items:end;position:relative;overflow:hidden}
.bottom-cta-card::after{content:"";position:absolute;right:-80px;bottom:-110px;width:360px;height:360px;border-radius:36px;background:radial-gradient(circle at 30% 30%, rgba(69,172,255,.25), rgba(16,31,57,.08) 55%, rgba(0,0,0,0) 70%);border:1px solid rgba(92,153,255,.12);transform:rotate(15deg)}
.bottom-copy h2{font-size:3rem;line-height:1.04;margin:10px 0 12px;max-width:780px}
.bottom-copy p{font-size:1.1rem;max-width:760px}
.bottom-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start;justify-content:flex-end;position:relative;z-index:1}
.bottom-bullets{display:flex;flex-wrap:wrap;gap:18px;color:#d4e3fc}
.bottom-bullets span{position:relative;padding-left:22px}
.bottom-bullets span::before{content:"✓";position:absolute;left:0;color:#76d2ff}

.footer{padding:20px 0 30px}
.footer-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding-top:16px;border-top:1px solid rgba(93,151,233,.12)}
.footer-logo{width:190px}
.footer-nav{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.copyright{margin:0;color:#8aa1c4;font-size:14px;text-align:right}

@media (max-width: 1200px){
  .hero-grid,.bottom-cta-card{grid-template-columns:1fr}
  .hero-visual{min-height:760px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:1fr;gap:18px}
  .process-arrow{display:none}
  .stats-row{grid-template-columns:1fr}
  .footer-wrap{grid-template-columns:1fr;justify-items:center}
  .copyright{text-align:center}
}
@media (max-width: 980px){
  .menu-toggle{display:block}
  .nav{flex-wrap:wrap;padding:14px 0}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:16px;padding:12px 0 0;margin:0}
  .nav-links.open{display:flex}
  .nav-cta{display:none}
  .hero-copy{padding-top:20px}
  .dashboard-body{grid-template-columns:1fr}
  .dashboard-sidebar{display:none}
  .metric-grid{grid-template-columns:1fr}
  .quote-block{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .container{width:min(100% - 26px, 1280px)}
  .logo{width:190px}
  .hero h1{font-size:3.2rem}
  .hero-text{font-size:1.06rem}
  .hero-visual{min-height:800px}
  .chat-card{position:relative;right:auto;top:auto;width:100%;margin-top:18px}
  .always-on{display:none}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{grid-template-columns:52px 1fr}
  .feature-arrow{display:none}
  .feature-card h3,.process-card h3{font-size:1.4rem}
  .process-card{grid-template-columns:46px 54px 1fr;padding:18px 0}
  .section-heading h2,.bottom-copy h2{font-size:2.2rem}
  .hero-points,.bottom-bullets{flex-direction:column;gap:10px}
}
/* Compact animated navigation and robust responsive spacing */
.header{transition:background .28s ease,box-shadow .28s ease}
.nav{min-height:82px;transition:min-height .28s ease,padding .28s ease}
.logo{width:210px;height:auto;transition:width .28s ease}
.header.is-scrolled{background:rgba(2,8,16,.94);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.header.is-scrolled .nav{min-height:54px}
.header.is-scrolled .logo{width:145px}
.header.is-scrolled .nav-cta{padding:9px 14px;font-size:13px}
.hero-visual{min-width:0}
.dashboard-card{min-width:0}
.hero-grid>*{min-width:0}
.hero h1{overflow-wrap:normal}
@media(max-width:1200px){
 .hero-grid{gap:20px}
 .hero-visual{max-width:800px;width:100%;margin:auto}
 .always-on{display:none}
}
@media(max-width:980px){
 .header .nav{min-height:66px}
 .header.is-scrolled .nav{min-height:48px}
 .nav-links{order:3}
 .nav-links.open{background:rgba(4,14,28,.98);padding:18px;border-radius:14px}
 .hero-copy{padding-top:12px}
 .hero-visual{min-height:0;padding-bottom:16px}
 .dashboard-card{max-width:100%}
 .chat-card{position:relative;top:auto;right:auto;margin:18px auto 0;max-width:380px;width:100%}
}
@media(max-width:760px){
 .logo{width:170px}
 .header.is-scrolled .logo{width:120px}
 .hero h1{font-size:clamp(2.2rem,10vw,3.3rem);line-height:1.08;overflow-wrap:anywhere}
 .dashboard-main{min-width:0}
 .dashboard-top{flex-wrap:wrap}
 .dashboard-top h3{font-size:1.45rem}
 .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .metric-box{padding:9px 6px;border-radius:10px}
 .metric-box strong{font-size:1.15rem}
 .metric-box span{font-size:.65rem;overflow-wrap:anywhere}
 .metric-box small{padding:3px 5px;font-size:.65rem}
 .chart-area{height:145px}
 .feature-card,.testimonial-wrap,.bottom-cta-card{padding:18px}
 .bottom-copy h2{overflow-wrap:anywhere}
 .footer-nav{gap:12px}
}
@media(prefers-reduced-motion:reduce){.header,.nav,.logo{transition:none}}

/* Header-Fix: kleiner, sauber und beim Scrollen nicht im Weg */
.header{
  position:relative;
  top:auto;
  background:rgba(2,8,16,.92);
  backdrop-filter:blur(10px);
}
.nav{
  min-height:64px;
  padding:6px 0;
  gap:20px;
}
.logo{
  width:155px;
  height:auto;
}
.nav-links{
  gap:24px;
}
.nav-links a{
  font-size:14px;
}
.nav-cta{
  padding:11px 16px;
  border-radius:12px;
  font-size:14px;
}
@media (max-width: 980px){
  .header{position:relative}
  .nav{min-height:58px;padding:6px 0}
  .logo{width:145px}
}
@media (max-width: 760px){
  .logo{width:132px}
  .nav{min-height:56px}
}
.footer-logo{width:150px}

/* FINAL LAYOUT FIX – kompakter statischer Header + kein Hero-Overlap */
.header{
  position:static !important;
  top:auto !important;
  height:72px !important;
  min-height:72px !important;
  overflow:hidden;
  background:#030d1a !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.header .nav{
  height:72px !important;
  min-height:72px !important;
  padding:0 !important;
  gap:24px !important;
  flex-wrap:nowrap !important;
}
.header .logo-link{
  height:52px !important;
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto;
}
.header .logo{
  width:150px !important;
  height:52px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.header .nav-links{
  gap:24px !important;
  margin-left:auto !important;
}
.header .nav-links a{font-size:13px !important}
.header .nav-cta{
  padding:10px 15px !important;
  font-size:13px !important;
  border-radius:11px !important;
  margin-left:4px !important;
}
.header.is-scrolled,
.header.is-scrolled .nav,
.header.is-scrolled .logo{
  height:inherit !important;
  min-height:inherit !important;
  width:auto;
  box-shadow:none !important;
}
.header.is-scrolled .logo{
  width:150px !important;
  height:52px !important;
}

.hero{padding-top:24px !important}
.hero-grid{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:62px !important;
}
.hero-copy{padding-top:42px !important;min-width:0}
.hero h1{
  font-size:clamp(3rem,4.55vw,5.15rem) !important;
  line-height:.98 !important;
  max-width:610px !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.hero-text{max-width:610px !important;font-size:1.16rem !important}
.hero-visual{min-width:0 !important}
.dashboard-card{width:100% !important;max-width:100% !important}

@media(max-width:1050px){
  .header{height:66px !important;min-height:66px !important}
  .header .nav{height:66px !important;min-height:66px !important}
  .header .logo-link{height:46px !important}
  .header .logo,.header.is-scrolled .logo{width:135px !important;height:46px !important}
  .menu-toggle{display:block !important}
  .header .nav-links{display:none !important;position:absolute;top:66px;left:13px;right:13px;background:#04101f;padding:16px;border:1px solid rgba(112,174,255,.16);border-radius:14px;z-index:50}
  .header .nav-links.open{display:flex !important;flex-direction:column;align-items:flex-start}
  .header .nav-cta{display:none !important}
  .hero-grid{grid-template-columns:1fr !important;gap:24px !important}
  .hero-copy{padding-top:18px !important}
  .hero h1{max-width:720px !important}
}

@media(max-width:760px){
  .header{height:60px !important;min-height:60px !important;overflow:visible}
  .header .nav{height:60px !important;min-height:60px !important}
  .header .logo-link{height:42px !important}
  .header .logo,.header.is-scrolled .logo{width:122px !important;height:42px !important}
  .header .nav-links{top:60px}
  .hero h1{font-size:clamp(2.35rem,10vw,3.25rem) !important;line-height:1.02 !important}
}

/* ===== Desktop wide-layout fix: preserve mobile design, use desktop width ===== */
@media (min-width: 1051px){
  .header{position:relative !important;top:auto !important;height:auto !important;min-height:0 !important;overflow:visible !important;}
  .header .nav{min-height:76px !important;height:76px !important;max-width:1480px !important;width:min(1480px,calc(100% - 56px)) !important;padding:0 !important;}
  .header .logo-link{height:58px !important;display:flex !important;align-items:center !important;overflow:hidden !important;}
  .header .logo,.header.is-scrolled .logo{width:190px !important;height:58px !important;object-fit:contain !important;object-position:left center !important;}
  .header .nav-links{gap:32px !important;margin-left:auto !important;}
  .header .nav-links a{font-size:14px !important;}
  .header .nav-cta{padding:12px 18px !important;font-size:14px !important;margin-left:14px !important;}

  .container{width:min(1480px,calc(100% - 56px)) !important;max-width:1480px !important;}

  .hero{padding-top:28px !important;padding-bottom:28px !important;}
  .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,44%) minmax(0,56%) !important;
    gap:54px !important;
    align-items:center !important;
  }
  .hero-grid>*{min-width:0 !important;}
  .hero-copy{padding-top:0 !important;min-width:0 !important;}
  .hero h1{
    font-size:clamp(3.75rem,4.8vw,5.2rem) !important;
    line-height:.96 !important;
    letter-spacing:-.05em !important;
    max-width:620px !important;
    margin:18px 0 20px !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  .hero-text{font-size:1.18rem !important;max-width:650px !important;}
  .hero-actions{gap:14px !important;}
  .hero-points{gap:14px 24px !important;font-size:.92rem !important;}

  .hero-visual{
    min-height:560px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    position:relative !important;
  }
  .dashboard-card{
    width:calc(100% - 210px) !important;
    min-width:0 !important;
    margin-left:0 !important;
  }
  .dashboard-body{grid-template-columns:150px minmax(0,1fr) !important;gap:14px !important;}
  .dashboard-top h3{font-size:1.55rem !important;}
  .metric-box{padding:14px !important;}
  .metric-box strong{font-size:1.55rem !important;}
  .chart-area{height:170px !important;}
  .chat-card{width:285px !important;right:0 !important;top:24px !important;}
  .always-on{right:-16px !important;top:168px !important;font-size:1.35rem !important;}

  .features{padding-top:20px !important;}
  .feature-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .feature-card{
    grid-template-columns:52px minmax(0,1fr) 20px !important;
    gap:14px !important;
    padding:22px !important;
    min-height:185px !important;
  }
  .feature-card h3{font-size:1.28rem !important;}
  .feature-card p{font-size:.92rem !important;}

  .process{padding-top:14px !important;}
  .section-heading h2{font-size:2.4rem !important;}
  .section-heading p{font-size:1rem !important;}
  .process-grid{
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) !important;
    gap:12px !important;
  }
  .process-card{grid-template-columns:44px 54px minmax(0,1fr) !important;gap:14px !important;padding:20px 10px !important;}
  .process-card h3{font-size:1.2rem !important;}
  .process-card p{font-size:.92rem !important;}

  .testimonial-wrap{padding:28px 30px !important;}
  .quote-block{grid-template-columns:170px minmax(0,1fr) !important;}
  .avatar-photo{width:140px !important;height:140px !important;}
  .stats-row{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .stat-item strong{font-size:1.55rem !important;}

  .bottom-cta-card{grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr) !important;gap:36px !important;}
  .bottom-copy h2{font-size:2.55rem !important;}

  .footer-wrap{grid-template-columns:auto minmax(0,1fr) auto !important;}
}

/* ===== Final desktop hero spacing fix: no overlap between dashboard and chat ===== */
@media (min-width: 1051px){
  .hero-grid{
    grid-template-columns:minmax(0,42%) minmax(0,58%) !important;
    gap:64px !important;
  }
  .hero-visual{
    min-height:670px !important;
    overflow:visible !important;
  }
  .dashboard-card{
    width:calc(100% - 320px) !important;
    max-width:none !important;
    margin:0 !important;
  }
  .chat-card{
    width:292px !important;
    right:0 !important;
    top:20px !important;
    z-index:3 !important;
  }
  .always-on{
    right:24px !important;
    top:610px !important;
    font-size:1rem !important;
    line-height:1.15 !important;
    transform:none !important;
    z-index:2 !important;
  }
}

/* FINAL HERO PREVIEW – ein zusammenhängendes Website-/Dashboard-Mockup ohne Überlagerung */
.hero-visual-clean{min-height:0 !important;display:flex;align-items:center}
.product-preview{
  width:100%;
  border-radius:30px;
  padding:16px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 84% 12%,rgba(33,153,255,.15),transparent 22%),
    linear-gradient(180deg,rgba(7,19,36,.94),rgba(3,12,24,.98));
}
.product-preview::after{
  content:"";position:absolute;inset:-30% -10% auto auto;width:70%;height:130%;
  border:1px solid rgba(50,137,255,.14);border-radius:50%;pointer-events:none;transform:rotate(-12deg)
}
.preview-browser-bar{height:46px;display:flex;align-items:center;gap:14px;padding:0 8px 12px;border-bottom:1px solid rgba(98,158,240,.10)}
.preview-dots{display:flex;gap:6px}.preview-dots span{width:8px;height:8px;border-radius:50%;background:#365274}
.preview-address{height:26px;flex:1;max-width:360px;border-radius:9px;background:#09182b;border:1px solid rgba(105,161,237,.12)}
.preview-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(275px,.72fr);gap:16px;padding-top:16px;position:relative;z-index:1}
.preview-dashboard{min-width:0;display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px;border-radius:22px;background:rgba(3,14,27,.62);border:1px solid rgba(74,157,255,.20);box-shadow:inset 0 0 40px rgba(26,123,255,.04)}
.preview-side{padding:12px 10px;border-radius:16px;background:rgba(4,18,35,.9);border:1px solid rgba(103,164,241,.11);display:flex;flex-direction:column;gap:12px}
.preview-side-logo{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7ce9ff,#188dff 55%,#07234a);box-shadow:0 0 18px rgba(33,166,255,.45);margin-bottom:5px}
.preview-side-item{height:9px;width:70%;border-radius:999px;background:#183659}.preview-side-item.active{width:90%;background:linear-gradient(90deg,#118dff,#75d9ff);box-shadow:0 0 12px rgba(38,153,255,.35)}
.preview-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.preview-topline{display:flex;align-items:center;justify-content:space-between;gap:15px}.preview-line{display:block;height:11px;border-radius:999px;background:#18385e}.preview-line.long{width:38%}.preview-pill{width:72px;height:24px;border-radius:999px;background:#0b203d;border:1px solid rgba(105,164,244,.13)}
.preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-kpi{min-height:86px;border-radius:15px;padding:13px;background:#07182d;border:1px solid rgba(95,159,244,.13)}
.preview-kpi span,.preview-kpi i,.preview-kpi b{display:block;border-radius:999px;background:#1a3a61}.preview-kpi span{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6ddcff,#1689ff 58%,#092b5a);margin-bottom:10px}.preview-kpi i{width:55%;height:8px;margin-bottom:7px}.preview-kpi b{width:34%;height:7px;background:#146dc1}
.preview-chart-card{padding:13px;border-radius:16px;background:#07182d;border:1px solid rgba(95,159,244,.13)}
.preview-chart-head{display:flex;justify-content:space-between}.preview-chart-head span,.preview-chart-head i{height:8px;border-radius:999px;background:#1a3a61}.preview-chart-head span{width:27%}.preview-chart-head i{width:50px}
.preview-chart{height:215px;margin-top:10px;border-radius:13px;overflow:hidden;background:linear-gradient(rgba(48,112,186,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(48,112,186,.08) 1px,transparent 1px),rgba(4,13,25,.65);background-size:20% 25%}.preview-chart svg{width:100%;height:100%}
.preview-chat{display:flex;flex-direction:column;border-radius:24px;padding:16px;background:linear-gradient(180deg,#f7faff,#edf4ff);color:#18263b;box-shadow:0 20px 48px rgba(0,0,0,.24);border:1px solid rgba(190,214,255,.75)}
.preview-chat-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding-bottom:12px}.preview-chat-id{display:flex;gap:10px;align-items:center}.preview-chat-logo{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#87efff,#1a8cff 55%,#092958);box-shadow:0 0 16px rgba(23,143,255,.35)}
.preview-chat-id strong{display:block;font-size:1.02rem}.preview-chat-id small{display:block;color:#6f82a2;font-size:.7rem;line-height:1.25}.preview-online{font-size:.68rem;color:#32b56a;white-space:nowrap}
.preview-chat-body{display:flex;flex-direction:column;gap:9px}.preview-message{border-radius:16px;padding:10px 12px;font-size:.79rem;line-height:1.35}.preview-message.ai{background:#e5effd}.preview-message.option{background:#fff;border:1px solid #cfdef3;color:#375477;font-weight:600}
.preview-chat-input{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:6px 7px 6px 12px;border-radius:15px;background:#fff;border:1px solid #cdddf2;color:#91a5c3;font-size:.76rem}.preview-chat-input button{width:34px;height:34px;border:none;border-radius:11px;background:linear-gradient(135deg,#0b79ff,#2ab1ff);color:#fff;font-size:15px}

@media(min-width:1201px){
  .hero-grid{grid-template-columns:minmax(560px,.9fr) minmax(760px,1.35fr) !important;gap:54px !important}
  .container{width:min(1540px,calc(100% - 72px)) !important}
}
@media(max-width:1200px){
  .preview-layout{grid-template-columns:1fr}.preview-chat{max-width:430px;width:100%;justify-self:center}.preview-dashboard{min-height:430px}
}
@media(max-width:760px){
  .product-preview{padding:10px;border-radius:22px}.preview-browser-bar{height:38px}.preview-layout{gap:12px;padding-top:10px}.preview-dashboard{grid-template-columns:1fr;padding:10px;min-height:0}.preview-side{display:none}.preview-kpis{gap:6px}.preview-kpi{min-height:68px;padding:8px}.preview-chart{height:150px}.preview-chat{padding:13px}.preview-message{font-size:.76rem;padding:9px 10px}
}


/* Desktop side imagery: fills the otherwise empty widescreen margins. Mobile stays unchanged. */
.side-decoration{display:none;pointer-events:none;position:fixed;z-index:0;top:66px;bottom:0;background-repeat:no-repeat;opacity:.9}
@media (min-width:1400px){
  .side-decoration{display:block}
  header,main,footer{position:relative;z-index:1}
  .side-decoration-left{
    left:0;
    width:max(150px,calc((100vw - 1320px)/2));
    background-image:linear-gradient(90deg,rgba(2,9,18,.02),rgba(2,9,18,.25) 55%,rgba(2,9,18,1) 100%),url('side-left.png');
    background-position:left 48%;
    background-size:cover;
    filter:saturate(.9) brightness(.8);
  }
  .side-decoration-right{
    right:0;
    width:max(165px,calc((100vw - 1320px)/2));
    background-image:linear-gradient(270deg,rgba(2,9,18,.02),rgba(2,9,18,.25) 52%,rgba(2,9,18,1) 100%),url('side-right.png');
    background-position:right top;
    background-size:cover;
    filter:saturate(1.05) brightness(.9);
  }
  .side-decoration-right::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(2,9,18,.12),transparent 22%,transparent 74%,rgba(2,9,18,.9));
  }
}
@media (min-width:1800px){
  .side-decoration-left,.side-decoration-right{max-width:260px}
}

/* ===== 2026-10 final full-width desktop fix ===== */
:root{
  --page-max: 1680px;
}

/* Keep mobile look, fix desktop width + prevent overlap */
.side-decoration,
.site-shell,
.always-on{
  display:none !important;
}

body{
  background:
    radial-gradient(circle at 8% 22%, rgba(12,97,255,.18), transparent 22%),
    radial-gradient(circle at 92% 10%, rgba(64,139,255,.18), transparent 22%),
    linear-gradient(180deg, #020912 0%, #040d18 40%, #02070e 100%) !important;
}

.container{
  width:min(var(--page-max), calc(100% - 48px)) !important;
  max-width:var(--page-max) !important;
}

main, .hero, .features, .process, .testimonial, .bottom-cta, .footer{
  position:relative;
  z-index:1;
}

.header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(2,8,16,.78) !important;
  backdrop-filter:blur(16px) !important;
  border-bottom:1px solid rgba(95,150,255,.10) !important;
}
.header .nav{
  width:min(var(--page-max), calc(100% - 48px)) !important;
  margin:0 auto !important;
}

.hero{
  padding-top:34px !important;
  padding-bottom:26px !important;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(2,9,18,.96) 0%, rgba(2,9,18,.92) 16%, rgba(2,9,18,.72) 38%, rgba(2,9,18,.40) 56%, rgba(2,9,18,.12) 72%, rgba(2,9,18,.04) 100%),
    url('hero-background.png') right center / cover no-repeat;
  opacity:.95;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 66% 34%, rgba(37,124,255,.14), transparent 28%),
    radial-gradient(circle at 18% 55%, rgba(11,114,255,.09), transparent 24%),
    linear-gradient(180deg, rgba(2,9,18,.04), rgba(2,9,18,.25));
  pointer-events:none;
}

.hero-grid{
  grid-template-columns:minmax(520px, .88fr) minmax(700px, 1.12fr) !important;
  gap:56px !important;
  align-items:center !important;
}
.hero-copy{
  padding-top:8px !important;
  min-width:0;
}
.hero h1{
  max-width:640px !important;
  font-size:clamp(4rem, 4.7vw, 5.6rem) !important;
  line-height:.95 !important;
  margin-bottom:22px !important;
}
.hero-text{
  max-width:700px !important;
  font-size:1.28rem !important;
  color:#e5efff !important;
}
.hero-actions{margin-bottom:22px !important;}
.hero-points{
  max-width:820px;
  gap:14px 26px !important;
}

.hero-visual{
  min-height:620px !important;
}
.product-preview{
  max-width:100% !important;
  border-radius:34px !important;
  padding:18px !important;
  background:
    radial-gradient(circle at 84% 12%,rgba(33,153,255,.18),transparent 22%),
    linear-gradient(180deg, rgba(7,19,36,.84), rgba(3,12,24,.96)) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(96,164,255,.12) !important;
}
.preview-layout{
  grid-template-columns:minmax(0, 1.78fr) minmax(280px, .72fr) !important;
  gap:18px !important;
}
.preview-dashboard{min-width:0 !important;}
.preview-main{min-width:0 !important;}
.preview-chat{
  align-self:start;
  min-height:405px;
}
.preview-chart{height:250px !important;}
.preview-chat-body{gap:10px !important;}
.preview-message.option{font-size:.88rem !important;}

.features{
  padding-top:24px !important;
}
.feature-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:20px !important;
}
.feature-card{
  min-height:190px;
}

.process{padding-top:8px !important;}
.process-grid{
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr) !important;
}

.testimonial-wrap,
.bottom-cta-card{
  position:relative;
  overflow:hidden;
}
.testimonial-wrap::before,
.bottom-cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,11,20,.92) 0%, rgba(3,11,20,.75) 56%, rgba(3,11,20,.46) 100%),
    url('hero-background.png') right center / cover no-repeat;
  opacity:.24;
  z-index:0;
  pointer-events:none;
}
.testimonial-wrap > *,
.bottom-cta-card > *{
  position:relative;
  z-index:1;
}

.footer{
  padding-top:12px !important;
}
.footer-wrap{
  width:100%;
}

/* laptop / medium desktop */
@media (max-width: 1440px){
  :root{--page-max: 1500px;}
  .hero-grid{grid-template-columns:minmax(420px,.9fr) minmax(620px,1.1fr) !important; gap:42px !important;}
  .hero h1{font-size:clamp(3.4rem, 4.6vw, 4.8rem) !important;}
  .preview-layout{grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr) !important;}
  .preview-chart{height:220px !important;}
}

@media (max-width: 1180px){
  .container{width:min(100% - 28px, var(--page-max)) !important;}
  .hero::before{
    background:
      linear-gradient(180deg, rgba(2,9,18,.94) 0%, rgba(2,9,18,.86) 42%, rgba(2,9,18,.78) 100%),
      url('hero-background.png') center / cover no-repeat;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .hero-copy{padding-top:6px !important;}
  .hero h1{max-width:760px !important;}
  .hero-visual{min-height:0 !important;}
  .preview-layout{grid-template-columns:1fr !important;}
  .preview-chat{
    max-width:430px;
    width:100%;
    justify-self:center;
    min-height:auto;
  }
  .feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
  .process-grid{grid-template-columns:1fr !important; gap:18px !important;}
  .process-arrow{display:none !important;}
  .stats-row{grid-template-columns:1fr !important;}
  .bottom-cta-card{grid-template-columns:1fr !important;}
}

@media (max-width: 760px){
  .container{width:min(100% - 22px, var(--page-max)) !important;}
  .header .nav{width:min(100% - 22px, var(--page-max)) !important;}
  .hero{padding-top:20px !important;}
  .hero h1{font-size:clamp(2.4rem, 11vw, 3.35rem) !important;}
  .hero-text{font-size:1.05rem !important;}
  .feature-grid{grid-template-columns:1fr !important;}
  .feature-card{min-height:0;}
}

/* ===== Demo request modal ===== */
.demo-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:22px}
.demo-modal.is-open{display:flex}
.demo-modal-backdrop{position:absolute;inset:0;background:rgba(0,5,12,.78);backdrop-filter:blur(10px)}
.demo-modal-card{position:relative;z-index:1;width:min(760px,100%);max-height:min(88vh,850px);overflow:auto;padding:34px;border-radius:28px;background:linear-gradient(180deg,rgba(7,21,40,.98),rgba(3,11,22,.99));border:1px solid rgba(92,166,255,.28);box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 60px rgba(11,127,255,.14)}
.demo-modal-close{position:absolute;right:18px;top:16px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(126,180,255,.18);background:rgba(4,15,29,.85);color:#dceaff;font-size:26px;line-height:1;cursor:pointer}
.demo-modal-card h2{font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:12px 48px 10px 0}
.demo-modal-intro{margin:0 0 24px;color:#b8c9e3;max-width:650px}
.demo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-form label{display:block;color:#d8e5f8;font-size:.86rem;font-weight:700}
.demo-form input,.demo-form textarea{width:100%;margin-top:7px;border:1px solid rgba(115,169,239,.22);background:rgba(4,14,27,.88);color:#fff;border-radius:13px;padding:13px 14px;font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.demo-form input:focus,.demo-form textarea:focus{border-color:rgba(65,174,255,.72);box-shadow:0 0 0 3px rgba(22,137,255,.12)}
.demo-form textarea{resize:vertical;min-height:110px}
.demo-form-full{grid-column:1/-1}
.demo-form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.demo-form-note{color:#8ea4c4;font-size:.82rem}
.demo-form-status{margin-top:14px;min-height:22px;font-weight:700;font-size:.92rem}
.demo-form-status.success{color:#6fe0ad}.demo-form-status.error{color:#ff8f9d}
body.modal-open{overflow:hidden}
@media(max-width:680px){.demo-modal{padding:12px}.demo-modal-card{padding:24px 18px;border-radius:22px}.demo-form-grid{grid-template-columns:1fr}.demo-form-full{grid-column:auto}.demo-modal-card h2{margin-right:38px}.demo-form-actions .btn{width:100%}}