:root{
  --bg: #1f223543;
  --ink: #ffffff;
  --ink-muted:#A5A7B5;
  --panel:#ffffff;
  --accent:#25254430;
  --accent-2:#4f8cf7;
  --glass: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.15);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:20px;
  --radius-xl:35px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --maxw: 1200px;

  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-md:1rem;
  --fs-lg:1.25rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:3rem;
  --fs-hero: clamp(2rem, 8vw, 5.5rem);
}

html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }
body{
  margin:0;
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
img{ max-width:100%; display:block; }
.page-wrapper{ min-height:100%; display:flex; flex-direction:column; }
section, article{ width:100%; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline: var(--space-4); }


.hidden{ display:none !important; }
.center{ text-align:center; }
.signature{ display:block; font-size:var(--fs-sm); color:var(--ink-muted); margin-top:var(--space-4); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; font-weight:700; border-radius:999px;
  padding: .8rem 1.25rem; transition: transform .2s ease, background-color .3s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-ghost{ background:#fff; color:#1F2235; }
.btn-ghost:hover{ background:#D9DBE1; }
.btn-dark{ background:var(--accent); color:#fff; }
.btn-dark:hover{ background:#3b3b6b; }

/* ================================
   Animations (minimal)
================================ */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideDown{ from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideInRight{ from{ transform:translateX(100%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes slideLeft{ from{transform:translateX(-40px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideRight{ from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ================================
   Tagline / Speech bubbles / Titles
================================ */
.tagline{
  position:absolute; right: var(--space-4); top:25%;
  transform: translateY(-50%); color:#1F2235; background:#cecfda;
  padding: 8px 15px; border-radius: 15px; font-size: var(--fs-sm); font-weight:700;
  animation: slideInRight 1s ease-out; z-index:10; white-space:nowrap;
}
@media (max-width:768px){ .tagline{ right:10px; font-size: .9rem; } }
@media (max-width:480px){ .tagline{ right:5px; font-size: .8rem; } }

.speech, .speech-mp{
  position:relative; background:#cecfda; color:#1F2235; text-align:center;
  padding: var(--space-4); border-radius: var(--radius-xl); font-size: clamp(1rem, 2.5vw, 1.5rem);
  max-width: min(480px, 90%); margin: var(--space-4) auto 0;
}
.speech::before{
  content:""; position:absolute; left:-12px; bottom:10px; width:0; height:0;
  border: 12px solid transparent; border-right-color:#cecfda; border-bottom-color:#cecfda; border-radius:8px;
}
.speech-mp {
  max-width: 90%;
  margin: 0 auto;
  background-color: #cecfda;
  text-align: center;
  justify-self: center;
  align-items: center;
  font-size: 150%;
  border-radius: 35px;
  color: #1F2235;
  position: relative;
}

/* Center triangle at bottom */
.speech-mp::before {
  content: "";
  position: absolute;
  bottom: -18px;         /* moves below bubble */
  left: 50%;     
  padding-left: 10%;        /* center horizontally */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #cecfda;   /* triangle pointing downward */
}


.main-title{
  margin: var(--space-6) 0 var(--space-2);
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: var(--fs-hero);
  animation: slideUp 1s ease-out;
}

.description{
  background:#A5A7B5; color:#1F2235; padding: .75rem 1rem; margin: var(--space-4) auto;
  border-radius:10px; font-size: var(--fs-sm); max-width: 680px; animation: fadeIn 1.2s ease .2s both;
}

/* CTA inside forms */
.cta-button{ composes: btn btn-ghost; /* if not using PostCSS, keep rules below */ 
  margin-top: var(--space-5); padding-inline: 5%;
  background:#fff; color:#1F2235; font-size: var(--fs-sm); font-weight:700; border:none; border-radius:25px;
  animation: fadeIn .8s ease .2s both;
  cursor: pointer;
}
.cta-button:hover{ transform: scale(1.04); background:#D9DBE1; }

/* ================================
   Dropdown Menu
================================ */
.dropdown-menu{
  position:absolute; top:60px; left:0; right:0; width:96%; margin-inline:auto;
  display:none; flex-direction:column; align-items:flex-start; gap:.5rem;
  background: var(--glass); backdrop-filter: blur(10px);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 2%;
  z-index:1001; animation: fadeIn .5s ease-in-out;
}
.dropdown-menu.show{ display:flex; }
.dropdown-menu ul{ margin:0; padding:0; list-style:none; width:100%; }
.dropdown-menu li{ margin: .5rem 0; }
.dropdown-menu button{
  background:transparent; border:none; color:#fff; font-weight:700; font-size:1rem; cursor:pointer;
}
.dropdown-menu button:hover{ color:#D9DBE1; }

/* ================================
   Problem Section
================================ */
.problem-section{
  padding-block: var(--space-7);
  animation: fadeIn 1s ease-in-out;
}
.problem-section .container{ display:flex; flex-direction:column; gap: var(--space-5); }
.problem-title{
  font-size: var(--fs-lg); text-transform:uppercase; font-weight:800; width:max-content;
  border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:.25rem; animation: slideDown 1s;
}
.problem-container{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .problem-container{ grid-template-columns: 1fr; } }

.problem-left p{ font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height:1.35; font-weight:700; animation: slideLeft 1s; }
.problem-right{ border-left:2px solid rgba(255,255,255,.6); padding-left: var(--space-4); animation: slideRight 1s; }
.problem-right p{ font-size: var(--fs-md); margin-top: var(--space-4); }

.speech-bubble{
  background:#fff; color:#1F2235; border-radius:20px; padding: 10px 15px; font-size: var(--fs-sm); position:relative;
}
.speech-bubble::after{
  content:""; position:absolute; bottom:-10px; left:10%; border:10px solid transparent; border-top-color:#fff;
}

/* ================================
   Solution Section
================================ */
.solution-section{ padding-block: var(--space-7); animation: fadeIn 1s; }
.solution-title{
  font-size: var(--fs-lg); text-transform:uppercase; font-weight:800; width:max-content;
  border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:.25rem; animation: slideDown 1s;
}
.solution-content{
  margin-top: var(--space-5); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height:1.7; max-width: 800px;
  animation: slideUp 1s;
}

/* ================================
   How It Works
================================ */
.how-it-works{
  padding-block: var(--space-7); animation: fadeIn 1s;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
}
.section-title{
  font-size: var(--fs-xl); font-weight:800; text-transform:uppercase; width:max-content;
  border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:.25rem; animation: slideDown 1s;
}
.section-subtitle{
  font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight:800; margin-top: var(--space-2); animation: slideUp 1s;
}
.steps-container{
  display:grid; gap: var(--space-5); margin-top: var(--space-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .steps-container{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .steps-container{ grid-template-columns: 1fr; } }

.step{
  background:#fff; color:#1F2235; border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow); position:relative; animation: slideUp 1s;
}
.step::before{
  content:""; position:absolute; left:12px; bottom:-18px; border: 18px solid transparent; border-top-color:#fff;
  border-left-color:#fff; border-radius:8px;
}
.step-number{
  position:absolute; top:-18px; left: 1rem; width:40px; height:40px; border-radius:50%;
  background:#fff; color:#1F2235; border:2px solid #1F2235; display:grid; place-items:center; font-weight:800;
}
.step-title{ font-size: var(--fs-lg); font-weight:800; margin-top: var(--space-2); }
.step-content p{ font-size: var(--fs-sm); margin-left: 1.5rem; }


.pricing-section{ padding-block: var(--space-7); animation: fadeIn 1s; }
.pricing-section .solution-title{ margin-bottom: var(--space-5); }
.pricing-container{
  display:grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){ .pricing-container{ grid-template-columns: 1fr; } }

.pricing-card{
  border-radius: var(--radius-lg); padding: var(--space-6);
  display:flex; flex-direction:column; gap: var(--space-4);
  box-shadow: var(--shadow); transition: transform .25s ease;
}
.pricing-card:hover{ transform: translateY(-4px); }
.basic-plan{ background:#fff; color:#1F2235; border:1px solid #e0e0e0; }
.professional-plan{ background:#2525445a; color:#fff; }

.pricing-header h3{ font-size: var(--fs-xl); margin:0 0 .5rem; }
.pricing-description p{ font-size: var(--fs-md); margin:0; }
.pricing-image{ text-align:center; }
.pricing-image img{ max-width:80%; border-radius:10px; object-fit:cover; }
.basic-image img{ border:2px solid #e0e0e0; }
.professional-image img{ border:2px solid var(--accent-2); }

.pricing-price h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--space-3) 0; }
.pricing-features h4{
  margin: var(--space-4) 0 var(--space-3); font-weight:800; display:flex; align-items:center; gap: var(--space-3);
}
.feature-progress-img{ width:40%; height:auto; display:inline-block; }

.pricing-features ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pricing-features li{
  position:relative; padding-left: 40px; font-size: var(--fs-md); display:flex; align-items:center;
}
.pricing-features li::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%); width:24px; height:24px; background-size:cover;
}
.feature-1::before{ background-image:url('css/Check Circle.svg'); }
.feature-2::before{ background-image:url('css/Check Circle-w.svg'); }

.pricing-action{ margin-top:auto; text-align:center; }
.pricing-button{  margin-top: .8em;
  margin-left: auto;
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: .55em 1.1em;
  font-size: clamp(12px, 1.1vw, 14px);
  color: #fff;
  background: linear-gradient(90deg, #1a195a 0%, #5f6dff 100%);
  box-shadow: 0 8px 24px rgba(55, 70, 180, .45);
  cursor: pointer;}
.professional-plan .pricing-button{  margin-top: .8em;
  margin-left: auto;
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: .55em 1.1em;
  font-size: clamp(12px, 1.1vw, 14px);
  color: #fff;
  background: linear-gradient(90deg, #1a195a 0%, #5f6dff 100%);
  box-shadow: 0 8px 24px rgba(55, 70, 180, .45);
  cursor: pointer; }

/* ================================
   Cards (generic)
================================ */
.card{
  background:#fff; color:#1F2235; border-radius:15px; text-align:center; padding:20px; max-width:250px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1); transition: transform .25s ease;
}
.card:hover{ transform: translateY(-5px); }
.card-icon{
  background:#4a6cf7; color:#fff; width:60px; height:60px; line-height:60px; border-radius:50%;
  margin:0 auto 10px; font-weight:700; box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.card-title{ font-size:1.1rem; font-weight:800; margin:.5rem 0; }
.card-description{ font-size:.95rem; color:#666; }

/* ================================
   Blog
================================ */
.blog{ padding-block: var(--space-7); }
.blog .section-title, .blog .section-subtitle{ text-align:center; }
.frame-44{ width: min(70%, var(--maxw)); margin-inline:auto; }
.blog-list{
  display:grid; gap:25px; padding:20px; background: var(--bg);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.blog-card{
  background: var(--bg); border-radius:12px; overflow:hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.1); transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{ transform: translateY(-4px) rotateY(2deg); box-shadow: 0 6px 12px rgba(0,0,0,.15); }
.blog-card img{ width:100%; height:200px; object-fit:cover; }
.blog-content{ padding:15px; }
.blog-meta{ font-size:.8rem; color:#a5b9e2; margin:0 0 .25rem; }
.blog-title{ font-size:1.1rem; font-weight:800; margin:0; color:#fff; }
.blog-subtitle{ font-size:.95rem; font-weight:700; margin:.25rem 0 0; color:#f5eaea; }

/* ================================
   Footer & Social
================================ */
.social-icons{ display:flex; gap:15px; }
.social-icons img{ width:30px; height:30px; cursor:pointer; }
.social-icons img:hover{ opacity:.85; }
.footer-social-icons{ margin-top:10px; display:flex; gap:10px; }
.footer-social-icons a{ color:#ccc; text-decoration:none; font-size:16px; }
.footer-social-icons a:hover{ color:#fff; }
.footer-bottom{
  height:40px; display:grid; place-items:center; color:#fff; font-size:12px;
  border-top:1px solid rgba(255,255,255,.15); background: var(--accent);
}

/* ================================
   Promise
================================ */
.promise-section{ padding-block: var(--space-7); margin-bottom: var(--space-7); animation: fadeIn 1s; }
.promise-title{
  font-size: var(--fs-lg); text-transform:uppercase; font-weight:800; width:max-content;
  border-bottom:1px solid #fff; padding-bottom:.25rem; animation: slideDown 1s;
}
.promise-subtitle{ font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight:800; margin: var(--space-3) 0 var(--space-6); }
.promise-container{
  display:grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .promise-container{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .promise-container{ grid-template-columns: 1fr; } }

.promise-card{

  background: var(--bg); border-radius: var(--radius); padding: var(--space-5);
  display:flex; flex-direction:column; align-items:center; gap: var(--space-3);
  transition: transform .25s ease; box-shadow: var(--shadow);
}
.promise-card:hover{ transform: translateY(-5px); }
.promise-icon{
    cursor: pointer;
  background:#7AAFFE; border-radius:12px; width:80px; height:80px; display:grid; place-items:center; border:none;
}
.promise-icon img{ width:50%; height:50%; object-fit:contain; }
.promise-text{ font-size: var(--fs-md); }

/* ================================
   Cookie Consent
================================ */
.cookie-consent{
  position:fixed; inset:auto 20px 20px auto; z-index:1000; max-width:320px;
  background:#fff; color:#333; padding:20px; border-radius:12px; box-shadow: var(--shadow); text-align:center;
  animation: fadeIn .6s ease;
}
.cookie-consent.hidden{ display:none; }
.cookie-content h3{ font-size:1.1rem; margin:0 0 .5rem; }
.cookie-content p{ margin:.25rem 0 1rem; }
.cookie-actions{ display:flex; gap:10px; justify-content:center; }
.accept-btn, .decline-btn{
  padding:10px 15px; border:none; border-radius:8px; font-size:.95rem; cursor:pointer; transition: background .2s ease;
}
.accept-btn{ background: var(--accent); color:#fff; }
.accept-btn:hover{ background:#3b3b6b; }
.decline-btn{ background:#e0e0e0; color:#333; }
.decline-btn:hover{ background:#d0d0d0; }

/* ================================
   Dynamic 3D on scroll
================================ */
.dynamic{ transform: perspective(1000px) rotateY(15deg); opacity:0; transition: transform .8s cubic-bezier(.25,1,.5,1), opacity .8s cubic-bezier(.25,1,.5,1); }
.dynamic.visible{ transform: perspective(1000px) rotateY(0); opacity:1; }


.nav-container{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: var(--space-3) var(--space-4);
}
.nav-desktop-links{ display:flex; gap:.75rem; align-items:center; }
.nav-hamburger{ display:none; width:40px; height:40px; background: var(--glass); border-radius:6px; border:none; cursor:pointer; place-content:center; z-index:1001; }
.nav-hamburger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative; }
.nav-hamburger span::before, .nav-hamburger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px;
}
.nav-hamburger span::before{ top:-6px; }
.nav-hamburger span::after{ top:6px; }

.nav-mobile-menu{
  display:none; position:absolute; top:100%; left:0; right:0; padding:1rem; z-index:1000;
  background: rgba(255,255,255,.4); backdrop-filter: blur(8px);
  color:#000; text-align:center; flex-direction:column; gap:.75rem;
}
.nav-mobile-menu.open{ display:flex; }

.glass-btn{
  background:transparent; border: 0; border-bottom:2px solid rgb(7,7,45); color:#07072D;
  border-radius:6px; padding:.25rem .5rem; font-size:.95rem; cursor:pointer;
}
.glass-btn-lay{
  background:transparent; border:0; border-bottom:1px solid #fff; color:#fff; cursor:pointer;
}
.glass-btn-lay img{ width:90px; height:30px; object-fit:contain; display:block; }

@media (max-width: 768px){
  .nav-desktop-links{ display:none; }
  .nav-hamburger{ display:grid; }
  .glass-btn-lay{ display:inline-block; color:#584aa8; }
}
/* === HERO SECTIONS: center everything + 90% viewport height === */
article.hero-section {
  min-height: 90vh;                /* each hero takes 90% of screen height */
  display: flex;                   /* center stack */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.5vh, 28px);   /* nice vertical rhythm */
  padding: 4vh 4vw;                /* safe breathing room */
  text-align: center;
}

article.hero-section .main-title {
  width: auto;                     /* stop stretching */
  margin: 0;                       /* precise centering */
}

article.hero-section .speech{
  margin: 0;                       /* rely on gap above */
  max-width: min(720px, 90vw);     /* keep bubbles readable */
}

/* ensure the CTA stays centered & sized well */
article.hero-section .button-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
article.hero-section .cta-button {
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  padding: .9rem 1.8rem;
}

/* optional: tighten spacing on small screens */
@media (max-width: 600px){
  article.hero-section { gap: 16px; padding: 6vh 5vw; }
}
.main-title {
  display: flex;
  align-items: center;
  justify-content: center; /* centers whole line if you want */
  gap: 8px; /* space between words and logo */
}

.main-title .inline-logo {
  width: 100px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  padding: 5px 0; /* vertical balance */
}
/* Base bubble */
.speech {
  position: relative;
  display: inline-block;
  background: #cecfda;
  color: #1F2235;
  padding: 18px 28px;
  border-radius: 35px;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
}

/* Speech triangle (default bottom center) */
.speech::before {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top-color: #cecfda;
  transition: all 0.4s ease; /* for smooth move */
}

/* On hover → triangle moves right */
.speech:hover::before {
  left: 85%;
  transform: translateX(-50%);
}

/* Text swap effect for both speech + speech-mp */
.speech::after {
  content: attr(data-alt);        /* alternate text */
  position: absolute;
  inset: 0;                       /* cover full bubble */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Hide original text when hovering */
.speech:hover,
.speech-mp:hover {
  color: transparent; /* hide main text */
}

/* Show alternate text */
.speech:hover::after,
.speech-mp:hover::after {
  opacity: 1;
  color: #1F2235;
}
/* ====== Shared bubble base ====== */
.speech,
.speech-mp {
  position: relative;
  display: inline-block;
  background: #cecfda;
  color: #1F2235;
  border-radius: 35px;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* ====== Speech (normal) ====== */
.speech {
  padding: 18px 28px;
  margin-top: 1rem;
}

/* ====== Speech-mp (more padding) ====== */
.speech-mp {
  padding: 24px 36px;   /* extra padding for nicer look */
  margin: 1rem auto;
}

/* ====== Alternate text on hover ====== */
.speech::after,
.speech-mp::after {
  content: attr(data-alt);
  position: absolute;
  inset: 0; /* cover bubble */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1F2235;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* hide original text + show alt text */
.speech:hover,
.speech-mp:hover {
  color: transparent;
}
.speech:hover::after,
.speech-mp:hover::after {
  opacity: 1;
}
.speech-mp.p{
margin-left: 10px;
}
.speech-mp {
  padding-left: 100px;
}
.speech-mp {
  display: block;
  text-align: center;
  white-space: pre-line; 
}
.speech-mp {
  display: flex;
  flex-direction: column;   /* zwingt untereinander */
  align-items: center;      /* mittig */
  gap: 4px;                 /* Abstand */
}
.speech-mp span {
  display: block;
}
.speech-mp::before {
  content:"...";
}