/* Poppins (400, 600, 800) - self-hosted, latin + latin-ext; no Google Fonts network requests */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-800.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg-dark:#0a0a0c;
  --accent-start:#00ff66;
  --accent-end:#10b981;
  --accent:#00ff66;
  --cta-solid:#10b981;
  --cta-solid-hover:#34d399;
  --text-white: #ffffff;
  --text-secondary: #a3a3a3;
  --muted: #737373;
  --subtle: #525252;
  --max-width: 1200px;
  --header-height: 120px;
  --indicator-transition: 260ms cubic-bezier(.2,.9,.3,1);
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.06);
  --soft-surface: rgba(9,18,38,0.72);
}

/* reset basics */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text-white);
  -webkit-font-smoothing:antialiased;
  line-height:1.75;
  background-color: var(--bg-dark);
}

/* background - layered mesh + deep blue-black + gold accent */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 100% 55% at 50% -15%, rgba(0,255,102,0.16), transparent 52%),
    radial-gradient(ellipse 70% 45% at 95% 30%, rgba(25,55,120,0.28), transparent 48%),
    radial-gradient(ellipse 55% 40% at 0% 75%, rgba(15,40,90,0.24), transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 85%, rgba(0,255,102,0.06), transparent 50%),
    linear-gradient(168deg, #020510 0%, #0a1428 42%, #050a18 100%);
  filter: none;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(125deg, rgba(0,255,102,0.03) 0%, transparent 42%),
    linear-gradient(215deg, rgba(40,80,160,0.08) 0%, transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.42) 100%);
  pointer-events:none;
}
body.site-premium::before,
body.site-premium::after{
  display:none;
}
body.site-premium{
  background-color:#0a0a0c;
}

/* --- Header --- */
#site-header-root{
  min-height:56px;
}
header#siteHeader,
#siteHeader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:250;
  display:flex;
  justify-content:center;
  background:rgba(0,0,0,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  align-items:center;
  isolation:isolate;
}

.nav-inner{
  width:100%;
  max-width:var(--max-width);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(12px, 2.4vw, 28px);
  min-width:0;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text-white);
  flex:0 0 auto;
  margin-left:0;
}

.logo-img{
  display:block;
  width: clamp(120px, 11vw, 380px);
  height:auto;
  object-fit:contain;
  max-height: calc(100vh - 40px);
}

.footer-phone-soon{
  display:block;
  color:var(--text-secondary);
  font-size:14px;
  padding:4px 0;
}

.legal-placeholder-body p{
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.65;
}

.nav-center{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:clamp(10px, 1.8vw, 20px);
  flex-shrink:0;
  justify-self:end;
}

/* --- Mobile header (nav collapses to hamburger below this width) --- */
/* Header primary nav only (never use bare `nav` - it also matches .mobile-menu nav) */
#mainNav{
  min-width:0;
  max-width:100%;
}
#mainNav > .nav-list{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.4vw, 18px);
  min-width:0;
  max-width:100%;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#mainNav > .nav-list::-webkit-scrollbar{
  display:none;
}
#mainNav > .nav-list > li{
  flex-shrink:0;
}
/* As the header gets tight, drop nav links in order (Wechsel -> Why Pages) before hamburger */
@media (max-width: 1180px){
  #mainNav .nav-list > li:has(.nav-link[data-target="wechsel"]),
  #mainNav .nav-list > li:has(.nav-link[href*="#wechsel"]){
    display:none;
  }
}
@media (max-width: 1040px){
  #mainNav .nav-list > li:has(.nav-link[data-target="about"]),
  #mainNav .nav-list > li:has(.nav-link[href*="#about"]){
    display:none;
  }
}
@media (max-width: 920px){
  body.site-premium #mainNav > .nav-list{
    gap:clamp(6px, 1.2vw, 12px);
  }
  body.site-premium .nav-link{
    padding:9px 14px;
  }
}
/* Collapse primary nav + show hamburger (breakpoint matches main.js MOBILE_NAV_MAX) */
@media (max-width:768px){
  .nav-inner{
    grid-template-columns:auto auto;
    justify-content:space-between;
    gap: 10px;
    min-width: 0;
  }
  .nav-center{ display:none; }
  #mainNav{ display:none; }
  #getStartedBtn{ display:none; }
  .nav-actions{
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
  }
  .lang-switch{
    flex-shrink: 0;
  }
  .lang-btn{
    padding: 6px 7px;
    font-size: 12px;
    min-width: 34px;
  }
}
/* Desktop header nav links - text + accent underline (no pill backgrounds) */
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  text-decoration:none;
  font-weight:600;
  font-size:clamp(15px, 0.92rem + 0.55vw, 17px);
  white-space:nowrap;
  color:var(--text-secondary);
  border-radius:0;
  background:none;
  box-shadow:none;
  outline-offset:4px;
  transition:color .3s ease-in-out;
}
.nav-link__label{
  position:relative;
  z-index:1;
}
.nav-link__underline{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:1px;
  background:linear-gradient(90deg, var(--accent-start), var(--accent-end));
  transform:scaleX(0);
  transform-origin:center center;
  transition:transform .3s ease-out;
  pointer-events:none;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active{
  color:var(--text-white);
}
.nav-link:focus-visible .nav-link__underline{
  transform:scaleX(1);
}
@media (hover:hover){
  .nav-link:hover .nav-link__underline{
    transform:scaleX(1);
  }
}
.nav-link.active .nav-link__underline{
  transform:scaleX(1);
}

#getStartedBtn.cta{
  font-size:clamp(14px, 0.88rem + 0.35vw, 16px);
  font-weight:700;
  padding:11px 24px;
  background:linear-gradient(135deg, #00ff66 0%, #16c47f 45%, #38f5b0 100%);
  box-shadow:0 10px 26px rgba(0, 255, 102, 0.3), 0 0 22px rgba(22, 196, 127, 0.35);
}

#checkoutSubmitBtn.cta{
  background:linear-gradient(135deg, #00ff66 0%, #16c47f 45%, #38f5b0 100%);
  box-shadow:0 10px 26px rgba(0, 255, 102, 0.3), 0 0 22px rgba(22, 196, 127, 0.35);
}

/* CTA & hamburger */
.cta{
  padding:10px 22px;
  border-radius:28px;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--cta-solid);
  color:#000000;
  text-decoration:none;
  transition:background 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
  letter-spacing:0.02em;
}
.cta:hover{
  transform:translateY(-1px);
  background:var(--cta-solid-hover);
  box-shadow:0 0 15px rgba(16,185,129,0.4);
}
.cta--hero-primary{
  padding:12px 32px;
  font-size:15px;
  font-weight:700;
}
a.cta--ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-white);
  text-decoration:none;
  box-shadow:none;
}
a.cta--ghost:hover{
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.09);
  box-shadow:0 4px 18px rgba(0,0,0,0.2);
}
.hamburger{
  display:none;
  box-sizing:border-box;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-white);
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.hamburger:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.hamburger__bars{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
}
.hamburger__bar{
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
.hamburger[aria-expanded="true"]{
  background: rgba(0,255,102,0.12);
  border-color: rgba(0,255,102,0.28);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2){
  opacity: 0;
  transform: scaleX(0.2);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Must come after the base `.hamburger{display:none}` above - otherwise mobile never shows the icon */
@media (max-width: 768px) {
  #siteHeader .nav-actions .hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Standalone subpages: primary nav stays visible (links go to index.html#…; no main.js / hamburger) */
body.site-subpage.checkout-b2b-page .nav-inner{
  grid-template-columns: auto 1fr auto;
  justify-items: stretch;
}
@media (max-width: 768px) {
  body.site-subpage .nav-inner{
    grid-template-columns: auto 1fr auto;
    justify-content: stretch;
  }
  body.site-subpage .nav-center{
    display: flex;
    min-width: 0;
    justify-self: stretch;
  }
  body.site-subpage #mainNav{
    display: block;
    width: 100%;
    min-width: 0;
  }
  body.site-subpage #siteHeader .nav-actions .hamburger{
    display: none !important;
  }
}

/* Subpages: footer stays at bottom of viewport when content is short (no “floating” gap below) */
body.site-subpage{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body.site-subpage > main{
  width:100%;
  box-sizing:border-box;
}
body.site-subpage > footer.site-footer{
  margin-top:auto;
  flex-shrink:0;
}

/* main / hero */
main{ position:relative; padding-top: calc(var(--header-height) + 16px); scroll-padding-top: calc(var(--header-height) + 8px); }
.hero{
  min-height:72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  gap:16px;
}
.hero-inner{ max-width:min(960px, 100%); }
h1{ margin:0 0 16px 0; font-size:clamp(32px, 5vw, 52px); font-weight:800; color:var(--text-white); line-height:1.15; letter-spacing:-0.04em; }
h2,h3,h4,h5,h6{ letter-spacing:-0.04em; }
.lead{ color:var(--text-secondary); font-size:clamp(16px, 2.5vw, 20px); line-height:1.75; }
.hero .lead{ margin-top:4px; max-width:52rem; margin-left:auto; margin-right:auto; }
.hero-actions{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.hero-cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Made in Germany - subtle seal + label */
.mi-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-align:left;
}
.mi-badge__mark{
  display:block;
  flex-shrink:0;
  width:26px;
  height:26px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.35)) drop-shadow(0 0 0.5px rgba(255,255,255,0.08));
}
.mi-badge__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  line-height:1.45;
  color:rgba(228,235,246,0.95);
  max-width:30ch;
  min-height:2.9em;
  display:inline-flex;
  align-items:center;
}
.mi-badge--hero{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:0;
  border:none;
  background:transparent;
}
.mi-badge--hero .mi-badge__label{
  text-align:left;
  max-width:min(32ch, 92vw);
  color:rgba(228,235,246,0.95);
}
.mi-badge--hero .mi-badge__mark{
  width:27px;
  height:27px;
}
.mi-badge--footer{
  margin-top:18px;
  align-items:flex-start;
}
.mi-badge--footer .mi-badge__label{
  max-width:30ch;
  font-size:11.5px;
  color:rgba(220,230,244,0.9);
}
.mi-badge--pricing{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:20px 14px 22px;
  margin-top:2px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.07);
  background:linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(8,14,28,0.35) 100%);
  box-shadow:0 10px 32px rgba(0,0,0,0.22);
  max-width:168px;
  flex-shrink:0;
}
.mi-badge__label--pricing{
  margin:0;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(200,208,220,0.72);
  line-height:1.5;
  max-width:14em;
}

/* section headings */
section{ padding:80px 20px; max-width:var(--max-width); margin:0 auto; color:var(--text-white); }
section[id]:not(#home){
  background:
    linear-gradient(155deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, transparent 65%),
    linear-gradient(210deg, rgba(0,255,102,0.04) 0%, transparent 45%),
    var(--soft-surface);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  margin-bottom:18px;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,255,102,0.04) inset;
}
section#pricing:not(#home),
section#portfolio:not(#home),
section#dashboard-demo:not(#home),
section#faq:not(#home),
section#wechsel:not(#home){
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
section#pricing:not(#home){
  padding-bottom: clamp(96px, 14vw, 152px);
}
section#wechsel:not(#home){
  padding-top: clamp(40px, 5vw, 64px);
}
section#portfolio:not(#home){
  padding: clamp(72px, 9vw, 112px) clamp(20px, 3vw, 28px) clamp(104px, 12vw, 152px);
  width: 80vw;
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
}
section#dashboard-demo:not(#home){
  padding: clamp(48px, 6vw, 80px) clamp(20px, 3vw, 28px) clamp(64px, 8vw, 96px);
  width: min(100%, 1120px);
  max-width: min(1120px, 96vw);
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: calc(var(--header-height) + 12px);
}
section#faq:not(#home){
  padding-top: clamp(44px, 5vw, 56px);
  padding-bottom: clamp(96px, 13vw, 148px);
}
h2{
  margin-top:0;
  margin-bottom:12px;
  font-size:clamp(24px, 3.5vw, 34px);
  font-weight:800;
  position:relative;
  display:inline-block;
}
h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:3px;
  margin-top:10px;
}
.section-subtitle{
  color:var(--text-secondary);
  font-size:17px;
  max-width:640px;
  margin-bottom:40px;
  line-height:1.6;
}

/* Nahtloser Wechsel */
.section-kicker{
  margin:0 0 8px 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(200,208,220,0.5);
}
section#wechsel.section--wechsel h2{
  max-width:52rem;
  line-height:1.25;
}
.section-subtitle--wechsel{
  max-width:46rem;
  margin-bottom:0;
}
.section--wechsel .wechsel-section__intro .section-kicker{
  margin-bottom:10px;
}
.section--wechsel .wechsel-card__meta{
  justify-content:flex-start;
  margin-bottom:16px;
}
.section--wechsel .wechsel-card .process-card__desc{
  font-size:14px;
  line-height:1.65;
  color:rgba(210,218,232,0.82);
}
.wechsel-cta-wrap{
  margin-top:28px;
  text-align:center;
}
.wechsel-cta-wrap #wechselCta{
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 700;
}
@media (max-width:960px){
  .wechsel-cta-wrap{
    margin-top:22px;
  }
  .wechsel-cta-wrap #wechselCta{
    width: 100%;
    max-width: 340px;
  }
}

/* === About / Features === */
.features-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  margin-top:8px;
}
.feature-card{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, rgba(8,14,32,0.4) 100%);
  border: 1px solid var(--card-border);
  border-radius:14px;
  padding:28px 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color: rgba(0,255,102,0.22);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.32),
    0 0 40px rgba(0,255,102,0.06);
}
.feature-icon{
  font-size:32px;
  margin-bottom:14px;
  display:block;
}
.feature-card h3{
  font-size:18px;
  font-weight:600;
  margin:0 0 8px 0;
}
.feature-card p{
  color:var(--text-secondary);
  font-size:14px;
  margin:0;
  line-height:1.6;
}
#about .feature-card p strong{
  color:var(--text-white);
  font-weight:800;
}

/* --- Standalone legal pages (Impressum, Datenschutz) --- */
.legal-main{
  max-width: min(1080px, 94vw);
  margin: 0 auto;
  padding: 52px 22px 72px;
}
.legal-main .section-subtitle{
  color: var(--text-secondary);
  margin: 0 0 26px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.72;
}
.legal-main h2{
  margin: 0 0 12px 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.01em;
}
/* Impressum: two equal columns, third block full width below */
.impressum-layout{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: 8px;
  align-items: stretch;
}
.impressum-layout .feature-card--span-full{
  grid-column: 1 / -1;
}
@media (max-width: 640px){
  .impressum-layout{
    grid-template-columns: 1fr;
  }
}
.impressum-layout .impressum-card{
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 32px);
}
.impressum-layout .impressum-card h3{
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px 0;
  color: var(--text-white);
  overflow-wrap: break-word;
}
.impressum-layout .impressum-card p{
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: rgba(210, 218, 232, 0.9);
}
.impressum-layout .impressum-card .legal-card-kicker{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(210, 218, 232, 0.78);
  margin: 0 0 10px 0;
  overflow-wrap: anywhere;
}
.impressum-layout .impressum-card p + p{
  margin-top: 12px;
}
.impressum-layout .impressum-card .legal-note{
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
}
.impressum-layout .impressum-card .legal-subhead{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 198, 90, 0.88);
  margin: 20px 0 8px;
}
.impressum-layout .impressum-card .legal-subhead:first-of-type{
  margin-top: 6px;
}

/* Privacy / long legal: single column, readable measure */
.legal-main .legal-page-stack{
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.8vw, 30px);
  margin-top: 10px;
  max-width: 100%;
}
.legal-main .legal-placeholder-card{
  width: 100%;
  padding: clamp(24px, 2.9vw, 36px);
  min-height: 0;
  border: 1px solid rgba(246, 198, 90, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.legal-main .legal-placeholder-card h3{
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  margin: 0 0 18px 0;
  color: var(--text-white);
  line-height: 1.3;
}
.legal-main .legal-placeholder-body{
  max-width: 74ch;
}
.legal-main .legal-placeholder-body p{
  margin: 0 0 1.2em;
  font-size: clamp(14px, 0.35vw + 13px, 16px);
  line-height: 1.82;
  color: rgba(210, 218, 232, 0.9);
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}
.legal-main .legal-placeholder-body p:last-child{
  margin-bottom: 0;
}
.legal-main .legal-placeholder-body strong{
  color: var(--text-white);
  font-weight: 700;
}
.legal-main .legal-placeholder-body a{
  color: rgba(246, 198, 90, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-main .legal-placeholder-body a:hover{
  color: #ffe6a8;
}
.legal-main .legal-placeholder-body h4.legal-subhead{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(246, 198, 90, 0.96);
  margin: 1.5em 0 0.6em;
  border-left: 2px solid rgba(246, 198, 90, 0.5);
  padding-left: 10px;
}
.legal-main .legal-placeholder-body h4.legal-subhead:first-child{
  margin-top: 0;
}
.legal-main .legal-placeholder-body p.legal-card-kicker{
  font-size: 13px;
  font-weight: 600;
  color: rgba(210, 218, 232, 0.78);
  margin: 1em 0 0.5em;
}
.legal-main .legal-placeholder-body ul{
  margin: 0.2em 0 1.25em;
  padding-left: 1.4em;
  font-size: clamp(14px, 0.35vw + 13px, 16px);
  line-height: 1.8;
  color: rgba(210, 218, 232, 0.9);
  list-style-type: disc;
}
.legal-main .legal-placeholder-body li{
  margin-bottom: 0.42em;
}

.legal-main .feature-card{
  min-height: 0;
}
.legal-main .feature-card a{
  color: rgba(246, 198, 90, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-main .feature-card a:hover{
  color: #ffe6a8;
}
.legal-actions{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (max-width: 760px){
  .legal-main{
    max-width: min(100%, 96vw);
    padding: 34px 14px 52px;
  }
  .legal-main .legal-placeholder-card{
    padding: 18px 16px 20px;
  }
  .legal-main .legal-placeholder-card h3{
    font-size: 18px;
    margin-bottom: 14px;
  }
  .legal-main .legal-placeholder-body{
    max-width: 100%;
  }
  .legal-main .legal-placeholder-body p,
  .legal-main .legal-placeholder-body ul{
    font-size: 14px;
    line-height: 1.74;
  }
}
.legal-actions a.cta{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.legal-actions a.cta--ghost{
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.legal-actions a.cta--ghost:hover{
  color: var(--text-white);
  border-color: rgba(246, 198, 90, 0.45);
  background: rgba(255, 255, 255, 0.12);
}

/* === Process / How it works - business-premium grid === */
.section-process{
  position:relative;
}
.process-section__intro{
  margin-bottom:28px;
}
.process-section__title{
  display:block;
  margin:0 0 14px 0;
  font-size:clamp(28px, 4vw, 40px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.12;
  color:var(--text-white);
}
.process-section__title::after{
  margin-top:12px;
}
.process-section__subtitle{
  margin:0;
  max-width:42rem;
  font-size:clamp(15px, 1.9vw, 18px);
  font-weight:400;
  line-height:1.65;
  color:rgba(210,218,232,0.72);
}
.process-panel{
  margin-top:0;
  padding:28px 24px 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.028) 42%, rgba(6,12,26,0.5) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 18px 48px rgba(0,0,0,0.28);
}
.process-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}
.process-card{
  position:relative;
  margin:0;
  padding:22px 20px 24px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(6,14,32,0.45);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.process-card:hover{
  border-color:rgba(0,255,102,0.22);
  box-shadow:0 12px 32px rgba(0,0,0,0.25);
  transform:translateY(-2px);
}
.process-card__meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.process-card__index{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(200,208,220,0.55);
}
.process-card__icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(0,255,102,0.18);
  background:rgba(0,255,102,0.06);
  color:rgba(246,210,140,0.92);
}
.process-icon{
  width:26px;
  height:26px;
  display:block;
}
.process-card__title{
  margin:0 0 10px 0;
  font-size:clamp(17px, 2vw, 19px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--text-white);
}
.process-card__desc{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(200,208,220,0.78);
}
.process-trust{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 0;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.18);
}
.process-trust__mark{
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid rgba(0,255,102,0.2);
  color:rgba(246,210,140,0.9);
  background:rgba(0,255,102,0.07);
}
.process-trust__icon{
  width:18px;
  height:18px;
  display:block;
}
.process-trust__text{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.02em;
  line-height:1.45;
  color:rgba(198,206,220,0.88);
}
@media (max-width: 960px){
  .process-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .process-panel{
    padding:22px 18px 18px;
  }
}

/* carousel */
.carousel{
  position:relative;
  max-width:960px;
  margin:0 auto 28px auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  outline: none;
}
.slides{ position:relative; overflow:hidden; border-radius:10px; }
.slide{ display:none; align-items:center; justify-content:center; min-height:320px; position:relative; }
.portfolio-slide-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.slide img{ width:100%; height:auto; display:block; border-radius:10px; object-fit:cover; cursor:pointer; aspect-ratio:8 / 5; }
.slide .portfolio-compare img{
  aspect-ratio:auto;
  height:100%;
  cursor:ew-resize;
  border-radius:0;
  user-select:none;
  -webkit-user-drag:none;
}
.portfolio-compare{
  position:relative;
  width:100%;
  aspect-ratio:8 / 5;
  border-radius:10px;
  overflow:hidden;
  background:#0a0e18;
  touch-action:none;
  outline:none;
}
.portfolio-compare:focus-visible{
  box-shadow:0 0 0 2px rgba(0,255,102,0.45), 0 0 0 4px rgba(4,8,18,0.9);
}
.portfolio-compare.portfolio-compare--dragging{
  cursor:grabbing;
}
.portfolio-compare.portfolio-compare--dragging .portfolio-compare__layer img,
.portfolio-compare.portfolio-compare--dragging .portfolio-compare__divider{
  cursor:grabbing;
}
.portfolio-compare__layer{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.portfolio-compare__layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.portfolio-compare__layer--before{
  clip-path:inset(0 0 0 var(--split, 50%));
}
.portfolio-compare__layer--after{
  clip-path:inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.portfolio-compare__divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split, 50%);
  width:56px;
  margin-left:-28px;
  cursor:ew-resize;
  pointer-events:auto;
  z-index:2;
  background:transparent;
  touch-action:none;
}
.portfolio-compare__divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  margin-left:-1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.95) 10%, rgba(255,255,255,0.95) 90%, transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,0.5);
  pointer-events:none;
}
.portfolio-compare__handle{
  position:absolute;
  left:var(--split, 50%);
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  background:rgba(4,8,18,0.82);
  border:2px solid rgba(255,255,255,0.88);
  box-shadow:0 4px 18px rgba(0,0,0,0.45);
  pointer-events:none;
  z-index:3;
  transform-origin:50% 50%;
}
.portfolio-compare:not(.portfolio-compare--dragging) .portfolio-compare__divider:hover + .portfolio-compare__handle{
  transform:scale(1.06);
  box-shadow:0 6px 22px rgba(0,0,0,0.52), 0 0 0 1px rgba(0,255,102,0.26);
}
.portfolio-compare__handle-glyph{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.9);
  line-height:1;
  user-select:none;
  white-space:nowrap;
}
@keyframes portfolio-handle-pulse{
  0%, 3%, 14%, 100%{
    transform:scale(1);
    box-shadow:0 4px 18px rgba(0,0,0,0.45);
  }
  8%{
    transform:scale(1.09);
    box-shadow:0 6px 22px rgba(0,0,0,0.52), 0 0 0 1px rgba(0,255,102,0.38);
  }
}
.portfolio-compare--affordance .portfolio-compare__handle{
  animation:portfolio-handle-pulse 4.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .portfolio-compare--affordance .portfolio-compare__handle{
    animation:none;
  }
}
.portfolio-compare__badge{
  position:absolute;
  z-index:4;
  top:10px;
  padding:4px 9px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  pointer-events:none;
  background:rgba(4,8,18,0.78);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(230,236,245,0.92);
}
.portfolio-compare__badge--before{ right:10px; }
.portfolio-compare__badge--after{ left:10px; }
.slide .caption{ position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); padding:6px 14px; border-radius:8px; color:#fff; font-size:13px; font-weight:600; }
.slide .caption.portfolio-caption{
  left:12px;
  right:12px;
  bottom:12px;
  max-width:min(100%, 440px);
  padding:14px 16px 15px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  background:rgba(4,8,18,0.72);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.portfolio-caption__title{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  color:var(--text-white);
  letter-spacing:0.01em;
}
.portfolio-caption__desc{
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:rgba(230,236,245,0.88);
}
.portfolio-caption__features{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(0,255,102,0.92);
  margin-top:2px;
}
@media (max-width:520px){
  .slide .caption.portfolio-caption{
    max-width:none;
    padding:12px 14px;
  }
  .portfolio-caption__title{ font-size:14px; }
  .portfolio-caption__desc{ font-size:12px; }
  .portfolio-caption__features{ font-size:9.5px; letter-spacing:0.08em; }
}

.slide[data-active="true"]{ display:block; }

/* arrow buttons */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:52px;
  border-radius:10px;
  border:0;
  background: rgba(4,8,16,0.55);
  backdrop-filter:blur(6px);
  color:var(--text-white);
  font-size:24px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition: background .2s ease;
}
.carousel-btn:hover{ background:rgba(4,8,16,0.75); }
.carousel-btn.left{ left:8px; }
.carousel-btn.right{ right:8px; }

/* indicators */
.carousel-indicators{ display:flex; gap:10px; justify-content:center; padding:12px 0; align-items:center; }
.carousel-radio{ display:none; }
.carousel-indicators label{
  width:10px; height:10px; border-radius:50%; display:inline-block; background:rgba(255,255,255,0.18); cursor:pointer; border:2px solid rgba(255,255,255,0.06); transition: all .2s ease;
}
.carousel-radio:checked + label{ background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); border-color:transparent; transform:scale(1.2); }

/* pricing */
.contract-term-wrap{
  text-align:center;
  max-width:560px;
  margin:0 auto 28px auto;
  padding:0 8px;
}
.contract-term-wrap__label{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(200,208,220,0.52);
  margin-bottom:12px;
}
.contract-term-segmented{
  display:inline-flex;
  width:100%;
  max-width:520px;
  padding:4px;
  border-radius:999px;
  background:rgba(4,10,24,0.55);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 28px rgba(0,0,0,0.22);
  gap:2px;
}
.contract-term-segment{
  flex:1;
  min-width:0;
  position:relative;
  cursor:pointer;
  border-radius:999px;
  border:1px solid transparent;
  transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, transform 0.2s ease;
}
.contract-term-segment input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}
.contract-term-segment__text{
  display:block;
  padding:11px 14px;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:0.02em;
  color:rgba(198,206,220,0.78);
  transition: color 0.28s ease;
}
.contract-term-segment--standard .contract-term-segment__text{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
}
.contract-term-segment:has(input:checked){
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 12px rgba(0,0,0,0.2);
}
.contract-term-segment:has(input:checked) .contract-term-segment__text{
  color:rgba(248,250,252,0.96);
}
.contract-term-segment:has(input:focus-visible){
  outline:2px solid rgba(0,255,102,0.65);
  outline-offset:2px;
}
@media (max-width:520px){
  .contract-term-segment__text{
    font-size:11px;
    padding:10px 10px;
  }
  .contract-term-segment--standard .contract-term-segment__text{
    font-size:11px;
  }
}
.price-block{
  min-height:3.2em;
}
.price-amount{
  display:inline-block;
  transition:opacity 0.22s ease, transform 0.24s cubic-bezier(.2,.85,.25,1);
}
.price-amount.is-updating{
  opacity:0.25;
  transform:translateY(4px);
}
.pricing-card .price-block .price{
  margin-bottom:4px;
}
.pricing-layout{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.pricing-main-with-badge{
  display:block;
  width:100%;
  margin-bottom:clamp(32px, 5vw, 56px);
}
.pricing-row--main{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(22px, 2.8vw, 32px);
  align-items:stretch;
}
.pricing-row--main .pricing-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
}
.pricing-row--main .pricing-card > .pricing-content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pricing-row--main .pricing-card ul{
  flex:1;
  hyphens:none;
  word-break:normal;
  overflow-wrap:anywhere;
}
.pricing-row--main .pricing-card li{
  hyphens:none;
}
.pricing-row--bottom{
  display:flex;
  gap:18px;
  margin-top:0;
  align-items:stretch;
}
.pricing-custom-offer{
  flex:2;
  min-width:0;
  position:relative;
  border-radius:16px;
  padding:2px;
  overflow:hidden;
  background:linear-gradient(145deg, rgba(0,255,102,0.35), rgba(255,255,255,0.06) 45%, rgba(0,255,102,0.12));
  border:1px solid rgba(0,255,102,0.22);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.2) inset,
    0 20px 48px rgba(0,0,0,0.35),
    0 0 80px rgba(0,255,102,0.06);
  transition:border-color .3s ease, box-shadow .3s ease, transform .28s ease;
}
.pricing-custom-offer::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(ellipse 70% 50% at 20% 0%, rgba(0,255,102,0.14), transparent 55%);
  pointer-events:none;
  z-index:0;
}
.pricing-custom-offer:hover{
  border-color:rgba(0,255,102,0.38);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.15) inset,
    0 24px 56px rgba(0,0,0,0.4),
    0 0 100px rgba(0,255,102,0.1);
  transform:translateY(-2px);
}
.pricing-custom-content{
  position:relative;
  z-index:1;
  height:100%;
  border-radius:14px;
  padding:26px 26px 28px;
  background:linear-gradient(165deg, rgba(12,22,42,0.94), rgba(6,12,26,0.92));
  border:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.pricing-custom-badge{
  margin-bottom:14px;
}
.pricing-custom-headline{
  margin:0 0 14px 0;
  font-size:clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight:800;
  line-height:1.22;
  background:linear-gradient(135deg, #fff 0%, #a7f3d0 38%, var(--accent-start) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.pricing-custom-text{
  margin:0 0 16px 0;
  color:rgba(255,255,255,0.72);
  font-size:15px;
  line-height:1.68;
  max-width:42em;
}
.pricing-custom-choose{
  margin:0 0 6px 0;
  color:rgba(255,255,255,0.88);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.45;
  max-width:42em;
}
.pricing-custom-bullets{
  list-style:none;
  padding:0;
  margin:0 0 18px 0;
  max-width:42em;
  width:100%;
}
.pricing-custom-bullets li{
  position:relative;
  padding:7px 0 7px 22px;
  color:rgba(255,255,255,0.72);
  font-size:15px;
  line-height:1.58;
  hyphens:none;
  word-break:normal;
  overflow-wrap:anywhere;
}
.pricing-custom-bullets li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:7px;
  color:var(--accent);
  font-weight:700;
  font-size:14px;
  line-height:1.4;
}
.pricing-custom-outro{
  margin:0 0 22px 0;
  color:rgba(255,255,255,0.72);
  font-size:15px;
  line-height:1.68;
  max-width:42em;
}
.pricing-custom-text--lead{
  margin-bottom:18px;
  font-size:clamp(15px, 1.2vw, 16px);
  line-height:1.72;
  color:rgba(255,255,255,0.8);
  max-width:46em;
}
.pricing-custom-bullets--enterprise li{
  padding-left:20px;
}
.pricing-custom-bullets--enterprise li::before{
  content:"•";
  color:rgba(255,255,255,0.5);
  font-weight:700;
  font-size:12px;
  top:8px;
}
.pricing-custom-cta{
  text-decoration:none;
  display:inline-block;
  margin-top:auto;
  padding:14px 28px;
  font-size:16px;
  font-weight:700;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.pricing-custom-cta:hover{
  filter:brightness(1.05);
}
.pricing-card--club{
  flex:1;
  min-width:min(220px, 100%);
  display:flex;
  flex-direction:column;
  height:100%;
}
.pricing-card--club > .pricing-content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pricing-card--club ul{
  flex:1;
  hyphens:none;
  word-break:normal;
  overflow-wrap:anywhere;
}
@media (max-width:900px){
  .pricing-row--main{ grid-template-columns:1fr; }
  .pricing-row--bottom{ flex-direction:column; }
  .pricing-card--club{ min-width:0; }
}
.pricing-row--main .pricing-card,
.pricing-row--bottom .pricing-card--club{
  transition:transform .28s ease, opacity .28s ease, border-color .25s ease, box-shadow .25s ease;
}
.pricing-row--main:has(.pricing-card input:checked) .pricing-card:not(:has(input:checked)){
  transform:scale(0.96);
  opacity:0.88;
}
.pricing-row--main:has(.pricing-card input:checked) .pricing-card:has(input:checked){
  transform:scale(1.02);
  opacity:1;
  z-index:1;
}
.pricing-row--bottom:has(.pricing-card--club input:checked) .pricing-custom-offer{
  transform:scale(0.96);
  opacity:0.88;
}
.pricing-row--bottom:has(.pricing-card--club input:checked) .pricing-card--club{
  transform:scale(1.04);
  opacity:1;
  z-index:1;
}
.pricing-grid{ display:flex; gap:20px; flex-wrap:wrap; }
.pricing-notes{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:18px;
}
.pricing-notes p{
  margin:0 0 8px 0;
  color:var(--text-secondary);
  font-size:14px;
}
.pricing-notes p:last-child{ margin-bottom:0; }
.pricing-extra-support{
  margin-top:22px;
  margin-bottom:0;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(0,255,102,0.28);
  border-left:4px solid var(--accent-start);
  border-radius:12px;
  padding:18px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
.pricing-extra-support p{
  margin:0;
  color:#f0e6d4;
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:0.01em;
}
.form-consult-kicker{
  margin:0 0 12px 0;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(186,196,212,0.88);
  font-weight:500;
}
.form-consult-extras{
  margin-bottom:18px;
}
.check-option--consult{
  align-items:flex-start;
  padding:12px 14px;
  border-radius:12px;
  border-color:rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
}
.check-option--consult span:last-of-type{
  font-size:13px;
  line-height:1.5;
  font-weight:500;
}
.form-post-submit{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.form-demo-consent{
  margin:0 0 12px 0;
  font-size:12px;
  line-height:1.55;
  color:rgba(186,196,212,0.88);
}
.form-demo-consent a{
  color:rgba(0,255,102,0.95);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-demo-consent a:hover{
  color:#ffe6a8;
}
.check-option--marketing{
  align-items:flex-start;
  margin-top:4px;
}
.check-option--marketing-before-submit{
  margin-top:16px;
}
.check-option--marketing span:last-of-type{
  font-size:13px;
  line-height:1.5;
  color:rgba(210,218,232,0.9);
}
.timeline-hint{
  margin:8px 0 0 0;
  font-size:12px;
  color:var(--subtle);
  line-height:1.45;
  max-width:520px;
}
.one-time-estimate-wrap{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.estimate-header-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:8px;
}
.one-time-estimate-label{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--accent);
  margin:0;
}
.estimate-savings-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#1a1206;
  background:linear-gradient(135deg, #00ff66, #10b981);
  box-shadow:0 0 0 1px rgba(0,255,102,0.35);
}
.logo-choice-row .logo-option-paid{
  align-items:flex-start;
}
.logo-choice-row .logo-option-paid > span{
  font-size:13px;
  color:var(--text-secondary);
}
.estimate-detail--logo{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:rgba(0,255,102,0.88);
  line-height:1.4;
}
.pricing-cta-wrap{
  margin-top:22px;
  display:flex;
  justify-content:center;
}
.pricing-card{
  display:block;
  border-radius:14px;
  padding:28px 24px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 45%, rgba(6,12,28,0.5) 100%);
  cursor:pointer;
  min-width:220px;
  flex:1 1 280px;
  border:2px solid var(--card-border);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pricing-card:hover{
  transform:translateY(-3px);
}
.pricing-card input{ display:none; }
.pricing-card h3{ margin:0 0 6px 0; font-size:clamp(1.25rem, 2.2vw, 1.55rem); font-weight:800; }
.pricing-card .price.price--setup{
  margin:8px 0 4px 0;
  font-size:32px;
  font-weight:800;
  line-height:1.15;
}
.pricing-card .price-setup-row{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px;
}
.pricing-card .price .price-amount{
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.pricing-card .price-amount-was{
  font-size:0.55em;
  font-weight:700;
  color:rgba(210,218,232,0.45);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  -webkit-text-fill-color:unset;
  background:none;
  margin-right:4px;
}
.pricing-card .price-once-badge{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(210,218,232,0.42);
  -webkit-text-fill-color:unset;
  background:none;
  line-height:1;
}
.pricing-card .price-once{
  font-size:13px;
  color:var(--text-secondary);
  font-weight:600;
  margin:0 0 4px 0;
}
.pricing-card .price-monthly{
  font-size:15px;
  font-weight:700;
  color:var(--accent);
  margin:0 0 16px 0;
  display:flex;
  align-items:center;
  gap:6px;
}
.pricing-card .price-monthly .monthly-tag{
  background:rgba(0,255,102,0.1);
  border:1px solid rgba(0,255,102,0.2);
  border-radius:6px;
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.pricing-card ul{
  list-style:none;
  padding:0;
  margin:0;
}
.pricing-card li{
  padding:6px 0;
  color:var(--text-secondary);
  font-size:14px;
  position:relative;
  padding-left:22px;
}
.pricing-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
}
.pricing-card:has(input:checked), .pricing-card:hover{ border-color: rgba(0,255,102,0.22); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.pricing-card .badge{
  display:inline-block;
  background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color:#08132a;
  font-size:12px;
  font-weight:800;
  padding:5px 14px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:12px;
}

/* FAQ accordion (#faq): floats on page bg - same pattern as portfolio */
.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:960px;
  margin:0 auto;
  padding-top:4px;
}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.faq-item:first-child{
  border-top:1px solid rgba(255,255,255,0.1);
}
.faq-item__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 4px 16px 2px;
  margin:0;
  font:inherit;
  color:var(--text-white);
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
}
.faq-item__trigger:focus-visible{
  outline:2px solid rgba(0,255,102,0.45);
  outline-offset:3px;
  border-radius:8px;
}
.faq-item__question{
  font-size:clamp(15px, 0.35vw + 14px, 17px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.02em;
}
.faq-item__chevron{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:var(--accent);
  transition:transform var(--indicator-transition);
}
.faq-item.is-open .faq-item__chevron{
  transform:rotate(180deg);
}
.faq-item__answer{
  margin:0;
  padding:0 36px 18px 2px;
  font-size:14px;
  line-height:1.65;
  color:var(--text-secondary);
}
@media (max-width:720px){
  .faq-item__answer{
    padding-right:8px;
  }
}

/* === Contact Section === */
.contact-section{
  text-align:center;
  padding-top: clamp(44px, 6vw, 68px);
  padding-bottom: clamp(52px, 8vw, 92px);
}
.contact-section__trust{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  align-items:center;
}

/* modal */
.modal{ display:none; position:fixed; inset:0; z-index:220; align-items:center; justify-content:center; padding:28px; padding-top: calc(var(--header-height) + 16px); }
.modal[aria-hidden="false"]{ display:flex; }
.modal-backdrop{ display:none; position:fixed; inset:0; z-index:219; background:rgba(6,10,22,0.22); backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); cursor:default; }
.modal-backdrop[aria-hidden="false"]{ display:block; }

.modal-panel{
  width:100%;
  max-width:720px;
  background: linear-gradient(180deg, rgb(12, 20, 40), rgb(8, 14, 32));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:28px 24px;
  position:relative;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  max-height: calc(90vh - var(--header-height));
  overflow-y:auto;
}
.modal-actions{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
}
.modal-reset{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:rgba(210,218,232,0.85);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.modal-reset:hover{
  border-color:rgba(0,255,102,0.35);
  color:var(--text-white);
  background:rgba(0,255,102,0.08);
}

/* Custom scrollbar for modal */
.modal-panel::-webkit-scrollbar{
  width:8px;
}
.modal-panel::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.03);
  border-radius:8px;
}
.modal-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent-start), var(--accent-end));
  border-radius:8px;
  border:2px solid rgb(12, 20, 40);
}
.modal-panel::-webkit-scrollbar-thumb:hover{
  background: var(--accent);
}
/* Firefox scrollbar */
.modal-panel{
  scrollbar-width:thin;
  scrollbar-color: var(--accent-start) rgba(255,255,255,0.03);
}

/* Request modal on phones: iOS zooms focused inputs when computed font-size < 16px; also reduce scroll chaining. */
@media (max-width: 768px) {
  .modal {
    align-items: flex-start;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .modal-panel {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: min(88vh, calc(100vh - var(--header-height) - 24px));
    padding: 22px 16px max(22px, env(safe-area-inset-bottom, 0px));
  }
  @supports (height: 100dvh) {
    .modal-panel {
      max-height: min(88dvh, calc(100dvh - var(--header-height) - 24px));
    }
  }
  .modal-panel input[type="text"],
  .modal-panel input[type="email"],
  .modal-panel input[type="tel"],
  .modal-panel input[type="url"],
  .modal-panel input[type="number"],
  .modal-panel input[type="search"],
  .modal-panel input[type="password"],
  .modal-panel input:not([type]),
  .modal-panel textarea,
  .modal-panel select {
    font-size: 16px;
    line-height: 1.35;
  }
}

.modal-close{ position:static; background:transparent; border:0; color:var(--text-secondary); font-size:18px; line-height:1; cursor:pointer; transition: color .2s ease; padding:4px; }
.modal-close:hover{ color:var(--text-white); }

/* form */
#modalTitle{
  padding-right:min(200px, 38%);
}
.form-intro{
  color:var(--text-secondary);
  font-size:14px;
  margin:0 0 20px 0;
  line-height:1.5;
}

/* Lead modal wizard */
.lead-wizard-tracker{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  padding:0 0 14px 0;
  margin:0 0 12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  justify-content:space-between;
}
.lead-wizard-tracker__step{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(186,196,212,0.45);
}
.lead-wizard-tracker__step--current{
  color:var(--accent);
}
.lead-wizard-tracker__step--done{
  color:rgba(210,218,232,0.88);
}
.lead-wizard-tracker__dot{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.lead-wizard-tracker__step--current .lead-wizard-tracker__dot{
  border-color:rgba(0,255,102,0.45);
  background:rgba(0,255,102,0.1);
}
.lead-wizard-tracker__step--done .lead-wizard-tracker__dot{
  border-color:rgba(0,255,102,0.38);
  background:rgba(0,255,102,0.14);
}
.lead-wizard-tracker__step--done .lead-wizard-tracker__dot::after{
  content:"✓";
  font-size:11px;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}
.lead-wizard-tracker__step--todo .lead-wizard-tracker__dot{
  opacity:0.65;
}
.lead-wizard-sticky-bar{
  /* In-flow footer above nav - not `sticky`, which pinned to the modal viewport and overlapped wizard content mid-scroll. */
  position:relative;
  z-index:auto;
  margin:18px -24px 0 -24px;
  padding:12px 24px;
  background:linear-gradient(180deg, rgb(8, 14, 32), rgb(10, 16, 30));
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 -4px 16px rgba(0,0,0,0.22);
}
.lead-wizard-sticky-bar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  font-size:13px;
  color:rgba(210,218,232,0.92);
}
.lead-wizard-sticky-bar__sep{
  color:rgba(186,196,212,0.45);
}
.lead-wizard-sticky-bar__bit strong{
  color:var(--text-white);
  font-weight:700;
}
.lead-wizard-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.lead-wizard-nav__back{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:rgba(210,218,232,0.88);
  font-size:13px;
  font-weight:600;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.lead-wizard-nav__back:hover{
  border-color:rgba(0,255,102,0.28);
  color:var(--text-white);
}
.lead-wizard-nav__next{
  margin-left:auto;
}
.form-timeline-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.form-timeline-label-row label{
  margin:0;
}
.timeline-express-info{
  flex-shrink:0;
  width:26px;
  height:26px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:rgba(210,218,232,0.88);
  font-size:12px;
  font-weight:800;
  font-style:italic;
  cursor:help;
  line-height:1;
}
.timeline-express-info:hover{
  border-color:rgba(0,255,102,0.35);
  color:var(--accent);
}
.migration-check-cta{
  display:inline-flex;
  margin-top:4px;
  font-size:13px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
}
.lead-addons-grid{
  margin-top:8px;
}
@media (max-width:768px){
  .lead-wizard-sticky-bar{
    margin-left:-16px;
    margin-right:-16px;
    padding-left:16px;
    padding-right:16px;
  }
}
.form-reply-guarantee{
  margin:12px 0 0 0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,255,102,0.06));
  color:rgba(255,255,255,0.9);
  font-size:13px;
  line-height:1.52;
  font-weight:500;
}
.form-reply-guarantee strong{
  color:var(--accent-start);
}
.form-reply-guarantee--trust{
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
/* Lead form: server-checked honeypot (leave blank; visually hidden). */
.form-antispam-trap{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.form-section{
  border:none;
  padding:0 0 16px 0;
  margin:0 0 16px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.form-section:last-of-type{
  border-bottom:none;
  margin-bottom:8px;
  padding-bottom:8px;
}
.form-section-title{
  font-size:15px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:14px;
  padding:0;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:600px){
  .form-row{ grid-template-columns:1fr; }
}
.form-group{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.form-group label{ font-size:13px; font-weight:600; color:var(--text-secondary); }
.form-group[hidden]{ display:none !important; }

/* Keep domain-dependent rows in sync with selected domain status even if JS races. */
#formMigrationSection:has(#domain_status_no:checked) #domainUrlWrap,
#formMigrationSection:has(#domain_status_no:checked) #migrationCheckWrap{
  display:none !important;
}
#formMigrationSection:has(#domain_status_have:checked) #domainUrlWrap,
#formMigrationSection:has(#domain_status_have:checked) #migrationCheckWrap{
  display:flex;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], textarea, select{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color:var(--text-white);
  padding:11px 14px;
  border-radius:10px;
  font-family:inherit;
  font-size:14px;
  transition: border-color .2s ease;
  width:100%;
}
select{
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}
select option{
  background:#0c1428;
  color:var(--text-white);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus{
  border-color: rgba(0,255,102,0.3);
}
input::placeholder, textarea::placeholder{
  color:var(--subtle);
}
.checkbox-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:10px;
  row-gap:14px;
}
/* e.g. Branchen-Module: breathing room before the second row (coming soon). */
.checkbox-grid + .checkbox-grid{
  margin-top:16px;
}
.checkbox-grid--full{
  grid-template-columns:1fr;
  margin-top:8px;
}
.check-option--full{
  width:100%;
  align-items:flex-start;
}
.check-option--full span:first-of-type{
  line-height:1.45;
}
.feature-group{
  margin-bottom:12px;
}
.feature-group--restricted{
  opacity:0.48;
  pointer-events:none;
  user-select:none;
}
.migration-check-link-wrap{
  margin-top:4px;
}
.migration-check-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:#0b1224;
  background:linear-gradient(135deg, rgba(0,255,102,0.95), rgba(16,185,129,0.92));
  box-shadow:0 7px 18px rgba(16,185,129,0.2);
  border:1px solid rgba(255,255,255,0.12);
  transition:transform .15s ease, box-shadow .15s ease;
}
.migration-check-link:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(16,185,129,0.24);
  color:#061018;
}
.vat-estimate-summary{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.vat-estimate-summary__kicker{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.vat-estimate-summary__line{
  margin:0 0 4px 0;
  font-size:13px;
  line-height:1.45;
  color:var(--text-secondary);
}
.feature-group-title{
  margin:0 0 8px 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:700;
  color:var(--accent);
}
.feature-group-subtitle{
  margin:-4px 0 12px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
}
.feature-group--included{
  margin-bottom:14px;
  padding:12px 14px 14px;
  border-radius:10px;
  border:1px solid rgba(0,255,102,0.14);
  background:rgba(0,255,102,0.04);
}
.included-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.included-list__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  line-height:1.45;
  color:var(--text-secondary);
}
.included-list__text strong{
  display:block;
  color:var(--text-white);
  font-weight:700;
  margin-bottom:2px;
}
.included-pill{
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,255,102,0.14);
  color:rgba(0,255,102,0.95);
  border:1px solid rgba(0,255,102,0.28);
}
.checkbox-assistive{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.feature-price-tag--once{
  color:rgba(0,255,102,0.95);
  font-weight:700;
}
.feature-price-tag--monthly{
  color:rgba(255,255,255,0.82);
  font-weight:600;
  border-color:rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
}
.feature-price-tag--muted{
  opacity:0.45;
  font-weight:600;
}
.feature-price-tag-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  flex-shrink:0;
  flex-wrap:nowrap;
}
.check-option__label{
  flex:1;
  min-width:0;
  padding-right:10px;
}
/* Extra separation before the Gastro block (follows the starter add-on grid). */
.checkbox-grid + .feature-group-title{
  margin-top:22px;
}
.gastro-stripe-fees-note{
  margin:10px 0 0;
  font-size:0.72rem;
  line-height:1.45;
  color:var(--text-secondary);
  max-width:52rem;
}
.gastro-stripe-fees-note--industry-foot{
  margin-top:14px;
  margin-bottom:0;
}
@media (max-width:600px){
  .checkbox-grid{ grid-template-columns:1fr; }
}
.check-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
  font-size:13px;
  color:var(--text-secondary);
}
.check-option span:first-of-type{
  flex:1;
}
.check-option:has(input:checked){
  border-color:rgba(0,255,102,0.22);
  background:rgba(0,255,102,0.06);
  color:var(--text-white);
}
.check-option--disabled{
  opacity:0.52;
  cursor:not-allowed;
}
.check-option--disabled input{
  cursor:not-allowed;
}
.check-option input[type="checkbox"]{
  accent-color:var(--accent);
  width:16px;
  height:16px;
  cursor:pointer;
}
.check-option a{
  color:var(--accent);
}
.check-option a:hover{
  color:#7dffb5;
}
.checkout-summary-block{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(0,255,102,0.22);
  border-radius:12px;
  background:rgba(0,255,102,0.07);
}
.checkout-summary-block h4{
  margin:0 0 10px;
  font-size:14px;
  color:var(--text-white);
}
.checkout-summary-row{
  margin:0;
  padding:6px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text-secondary);
}
.checkout-summary-row strong{
  color:var(--text-white);
}
.checkout-summary-note{
  margin:10px 0 0;
  font-size:12px;
  color:var(--text-secondary);
}
.checkout-compliance{
  margin-top:14px;
}
.check-option--vat-optout{
  margin-top:10px;
  background:rgba(0,255,102,0.08);
  border-color:rgba(0,255,102,0.26);
}
.checkout-compliance-separator{
  margin:14px 0 8px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.checkout-or-divider{
  margin:8px 0 0;
  text-align:center;
  font-size:12px;
  color:rgba(186,196,212,0.78);
}
.checkout-secondary-cta{
  background:transparent;
  border:1px solid rgba(0,255,102,0.35);
  color:var(--accent);
}
.checkout-secondary-cta:hover{
  background:rgba(0,255,102,0.08);
  box-shadow:none;
}
.verify-otp-box{
  border:1px solid rgba(132, 151, 178, 0.8) !important;
  background:rgba(10,16,30,0.95) !important;
  color:#e7edf6 !important;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.verify-otp-box:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px rgba(0,255,102,.22) !important;
}
.feature-price-tag{
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  border:1px solid rgba(0,255,102,0.22);
  border-radius:999px;
  padding:2px 8px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.legal-required-wrap{
  margin:0 0 12px 0;
  padding:10px;
  border:1px solid rgba(0,255,102,0.35);
  border-radius:10px;
  background:linear-gradient(135deg, rgba(0,255,102,0.12), rgba(255,255,255,0.04));
}
.check-option--required{
  border-color:rgba(0,255,102,0.38);
  background:rgba(0,255,102,0.1);
}
.required-pill{
  font-size:11px;
  font-weight:800;
  color:#11213c;
  background:linear-gradient(135deg,var(--accent-start),var(--accent-end));
  border-radius:999px;
  padding:3px 10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.legal-required-note{
  margin:8px 2px 0 2px;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,0.78);
}
.addon-preview-card{
  position:fixed;
  z-index:350;
  width:min(440px, calc(100vw - 20px));
  background:linear-gradient(180deg, rgba(12,20,40,0.98), rgba(8,14,32,0.99));
  border:1px solid rgba(0,255,102,0.28);
  border-radius:12px;
  box-shadow:0 22px 44px rgba(0,0,0,0.48);
  padding:14px;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
}
.addon-preview-card[data-open="true"]{
  opacity:1;
  transform:translateY(0);
}
.addon-preview-title{
  margin:0 0 6px 0;
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.addon-preview-text{
  margin:0 0 12px 0;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.82);
}
.addon-preview-image-wrap{
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:9px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
}
.addon-preview-image{
  display:block;
  width:100%;
  height:230px;
  object-fit:cover;
}
.addon-preview-mock{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:9px;
  background:rgba(255,255,255,0.03);
  padding:12px;
  font-size:12px;
  color:rgba(255,255,255,0.84);
  line-height:1.55;
}
.addon-preview-mock strong{
  color:var(--accent-start);
}
.form-pkg-price{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.form-package-radios .form-package-custom{
  flex-basis:100%;
  margin-top:4px;
}
.inline-option{ display:inline-flex; gap:8px; align-items:center; margin-right:12px; cursor:pointer; font-size:13px; color:var(--text-secondary); }
.inline-option:has(input:checked){ color:var(--text-white); }
.inline-option input[type="radio"]{ accent-color:var(--accent); cursor:pointer; }
.form-package-legend{
  display:block;
  margin-bottom:10px;
  font-size:17px;
  font-weight:800;
  letter-spacing:0.02em;
  color:var(--text-white);
}
.form-plan-choice-legend{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--text-white);
}
.form-plan-choice{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form-plan-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.form-plan-option:has(input:checked){
  border-color:rgba(0,255,102,0.45);
  background:rgba(0,255,102,0.08);
}
.form-plan-option input[type="radio"]{
  margin-top:3px;
  accent-color:var(--accent);
  cursor:pointer;
  flex-shrink:0;
}
.form-plan-option__text{
  font-size:14px;
  line-height:1.45;
  color:var(--text-secondary);
}
.form-plan-option:has(input:checked) .form-plan-option__text{
  color:var(--text-white);
}
.form-plan-choice--contract{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:8px;
  background:rgba(255,255,255,0.02);
}
.form-plan-choice--contract .form-plan-option{
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  text-align:center;
  min-height:48px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.02);
}
.form-plan-choice--contract .form-plan-option__text{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.01em;
}
.form-plan-choice--contract .form-plan-option input[type="radio"]{
  margin-top:0;
}
@media (max-width:560px){
  .form-plan-choice--contract{
    grid-template-columns:1fr;
  }
}
.form-package-radios--large .inline-option{
  font-size:16px;
  font-weight:600;
  color:var(--text-secondary);
}
.form-package-radios--large .inline-option:has(input:checked){
  color:var(--text-white);
}
.form-package-radios--large .form-pkg-price{
  font-size:14px;
  font-weight:700;
}
.form-package-radios--large .form-package-custom{
  font-size:16px;
}
.addon-free-hint{
  margin:-4px 0 10px 0;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,0.55);
  max-width:40em;
}
.content-upsell-note{
  margin:8px 0 0 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,255,102,0.28);
  background:linear-gradient(135deg, rgba(0,255,102,0.12), rgba(0,255,102,0.05));
  color:rgba(255,255,255,0.9);
  font-size:12px;
  line-height:1.45;
}
.feature-estimator{
  margin-top:0;
  border:1px solid rgba(0,255,102,0.2);
  border-radius:12px;
  padding:14px 16px;
  background:rgba(0,255,102,0.06);
}
.feature-estimator-split{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.estimate-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.estimate-block--monthly{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.estimate-kicker{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
}
.estimate-value--once{
  font-size:18px;
  font-weight:800;
  color:#ffe4ac;
  letter-spacing:0.02em;
}
.estimate-detail{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.58);
  line-height:1.45;
}
.estimate-value--monthly{
  font-size:16px;
  font-weight:800;
  color:var(--accent-start);
}
.estimate-migration-summary{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.estimate-migration-summary__kicker{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(200,208,220,0.5);
  margin-bottom:6px;
}
.estimate-migration-summary__text{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  font-weight:500;
  color:rgba(210,218,232,0.82);
}
.form-domain-choice{
  margin-top:4px;
}
.estimate-sub{
  font-size:11px;
  color:var(--subtle);
  line-height:1.4;
  max-width:36em;
}

/* === Footer (compact) === */
.site-footer.site-footer--compact{
  background:#0a0a0c;
  border-top:1px solid rgba(255,255,255,0.16);
  padding:30px clamp(20px, 4vw, 28px) 20px;
}
.footer-inner.footer-inner--compact{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px 32px;
}
.footer-inner--compact .footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.footer-brand .logo-img{
  width:168px;
}
.footer-nav-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 4px;
  font-size:15px;
  font-weight:600;
}
.footer-nav-inline a{
  color:#e5e7eb;
  text-decoration:none;
  padding:4px 6px;
  border-radius:6px;
  transition:color 0.2s ease, background 0.2s ease;
}
.footer-nav-inline a:hover{
  color:var(--text-white);
  background:rgba(255,255,255,0.06);
}
.footer-nav-inline__sep{
  color:#525252;
  user-select:none;
  padding:0 2px;
}
.footer-bottom.footer-bottom--compact{
  max-width:var(--max-width);
  margin:18px auto 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
}
.footer-entity-mirror-wrap{
  flex:1 1 100%;
  margin:0;
}
.footer-entity-mirror{
  margin:0 0 6px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  text-align:center;
}
.footer-entity-mirror a{
  color:#cbd5e1;
  text-decoration:none;
  transition:color 0.2s ease;
}
.footer-entity-mirror a:hover{
  color:var(--text-white);
}
.footer-entity-mirror__hint{
  font-weight:500;
  color:#94a3b8;
}
.footer-entity-mirror__sep{
  color:#525252;
  user-select:none;
  padding:0 6px;
}
.footer-entity-mirror--standalone{
  margin:0;
  padding:16px clamp(16px, 4vw, 24px);
  text-align:center;
  font-size:13px;
  font-weight:600;
  border-top:1px solid rgba(255,255,255,0.1);
  background:#0a0a0c;
}
.footer-entity-mirror--standalone a{
  color:#a3a3a3;
  text-decoration:none;
}
.footer-entity-mirror--standalone a:hover{
  color:var(--text-white);
}
.footer-copy{
  margin:0;
  font-size:12.5px;
  color:#9ca3af;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  font-size:12.5px;
}
.footer-legal a{
  color:#cbd5e1;
  text-decoration:none;
  transition:color 0.2s ease;
}
.footer-legal a:hover{
  color:#a3a3a3;
}
@media (max-width:700px){
  .footer-inner--compact{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-bottom--compact{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-entity-mirror{
    text-align:left;
  }
  .footer-legal{
    width:100%;
    justify-content:flex-start;
  }
}

/* responsive */
@media (max-width:920px){
  /* Header logo only: keep nav links readable (do not use bare .logo-img - overrides footer etc.) */
  #siteHeader .logo-img{
    width: clamp(88px, 16vw, 168px);
    max-height: 52px;
  }
  .nav-actions{ gap:10px; }
  main{ padding-top: calc(var(--header-height) + 8px); }
  .carousel{ padding:8px; }
  .carousel-btn{ width:40px; height:48px; }
  h1{ font-size:clamp(28px, 6vw, 40px); }
}

/* focus outline for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(0,255,102,0.18); outline-offset:3px; }
/* sicherstellen, dass mobile-overlay/CTA auf Desktop nicht sichtbar ist */
@media (min-width: 769px) {
  .mobile-menu, .mobile-cta-btn { display: none !important; }
}

/* bessere ARIA-basierte Visibility */
.mobile-menu[aria-hidden="true"] {
  display: none !important;
}

/* mobile CTA */
.mobile-cta-btn { display:none; }
@media (max-width:768px) {
  .mobile-cta-btn { display:inline-block; width: 100%; max-width: 100%; text-align: center; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* MOBILE MENU (drawer below fixed header; backdrop sits under header z-index) */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  display: none;
}

.mobile-menu.open,
.mobile-menu[aria-hidden="false"]{
  display: block;
  pointer-events: auto;
}

.mobile-menu__backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(2, 6, 14, 0.62);
  -webkit-tap-highlight-color: transparent;
  animation: mobileNavBackdropIn .22s ease-out both;
}

.mobile-menu__sheet{
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6,12,26,0.98) 0%, rgba(3,8,18,0.99) 48%, rgba(2,5,12,1) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
  animation: mobileNavSheetIn .26s cubic-bezier(.2,.85,.2,1) both;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.mobile-menu__title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.mobile-menu__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text-white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mobile-menu__close:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.mobile-menu__nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-menu .mobile-link{
  font-size: 17px;
  font-weight: 600;
  padding: 14px 14px;
  text-decoration: none;
  color: var(--text-white);
  border-radius: 10px;
  border: 1px solid transparent;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.mobile-menu .mobile-link:hover,
.mobile-menu .mobile-link:focus-visible{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.mobile-menu .mobile-link.active{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}

@keyframes mobileNavBackdropIn{
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mobileNavSheetIn{
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__backdrop,
  .mobile-menu__sheet{
    animation: none !important;
  }
}

.nav-inner, .logo, .nav-center, .nav-actions { z-index: 1; position: relative; }

/* lang switch */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.05);
  box-shadow:inset 0 0 0 1px rgba(8,18,38,0.3), 0 6px 16px rgba(0,0,0,0.24);
}
.lang-btn{
  min-width:42px;
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.03em;
  color:rgba(235,241,252,0.95);
  background:transparent;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.lang-btn[aria-pressed="true"]{
  color:#0b1630;
  background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  border-color:rgba(0,255,102,0.52);
  box-shadow:0 3px 10px rgba(0,255,102,0.25);
}
.lang-btn:hover:not([aria-pressed="true"]){
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.08);
}

/* Cross-domain locale banner */
.locale-hint{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:260;
  width:min(94vw, 720px);
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px 14px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
  background:linear-gradient(145deg, rgba(8,16,34,0.97), rgba(6,12,26,0.96));
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
}
.locale-hint__title{
  grid-column:1 / 2;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(0,255,102,0.95);
}
.locale-hint__text{
  grid-column:1 / 2;
  color:rgba(223,232,245,0.9);
  font-size:14px;
  line-height:1.45;
}
.locale-hint__switch{
  grid-column:2 / 3;
  justify-self:end;
  white-space:nowrap;
  text-decoration:none;
  color:#0b1630;
  background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  border:1px solid rgba(0,255,102,0.52);
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  box-shadow:0 6px 14px rgba(0,255,102,0.25);
}
.locale-hint__switch:hover{
  filter:brightness(1.03);
}
.locale-hint__dismiss{
  grid-column:3 / 4;
  margin:0;
  border:0;
  background:transparent;
  color:rgba(210,220,236,0.72);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
}
@media (max-width: 700px){
  .locale-hint{
    grid-template-columns:1fr auto;
    row-gap:8px;
  }
  .locale-hint__title,
  .locale-hint__text{
    grid-column:1 / -1;
  }
  .locale-hint__switch{
    grid-column:1 / 2;
    justify-self:start;
  }
  .locale-hint__dismiss{
    grid-column:2 / 3;
    justify-self:end;
  }
}

/* copy-to-clipboard trigger */
.copy-trigger{ cursor:copy; }

/* toast notification */
.toast{
  position:fixed;
  bottom:max(28px, env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg, rgba(12,20,40,0.97), rgba(8,14,32,0.99));
  border:1px solid rgba(0,255,102,0.28);
  color:var(--text-white);
  padding:14px 22px;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
  line-height:1.45;
  white-space:pre-line;
  width:min(520px, calc(100vw - 28px));
  max-width:min(520px, calc(100vw - 28px));
  box-sizing:border-box;
  text-align:center;
  z-index:300;
  pointer-events:none;
  opacity:0;
  transition: opacity .28s ease, transform .28s ease;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.toast.toast--large{
  padding:20px 28px;
  border-radius:16px;
  font-size:clamp(17px, 2.2vw, 20px);
  font-weight:600;
  line-height:1.5;
  width:min(640px, calc(100vw - 28px));
  max-width:min(640px, calc(100vw - 28px));
  border-color:rgba(0,255,102,0.38);
  box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* --- Checkout / Pay page --- */
body.pay-page header#siteHeader{
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  background: linear-gradient(90deg, rgba(0,23,57, 0.95), rgba(3, 8, 18, 0.85));
}
.pay-main{
  max-width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 24px) 80px;
  min-width: 0;
}
/* .pay-main padding shorthand overrides `main` header offset; pay-page uses in-flow header. */
body.site-subpage:not(.pay-page) main.pay-main{
  padding-top:calc(var(--header-height) + 16px);
}
@media (max-width:920px){
  body.site-subpage:not(.pay-page) main.pay-main{
    padding-top:calc(var(--header-height) + 8px);
  }
}
.pay-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--accent);
  font-weight:600;
  text-decoration:none;
  margin-bottom:24px;
  font-size:15px;
}
.pay-back:hover{ text-decoration:underline; }
button.pay-back{
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.reset-password-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}
input.reset-otp-input{
  letter-spacing:0.22em;
  font-variant-numeric:tabular-nums;
  max-width:16em;
}
.pay-card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding: clamp(20px, 4vw, 28px);
  margin-bottom:20px;
  backdrop-filter: blur(8px);
  min-width: 0;
  overflow: visible;
}
.pay-card h1{
  margin:0 0 8px;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
}
.pay-kicker{
  color: var(--text-secondary);
  font-size:14px;
  margin-bottom:20px;
}
.pay-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:15px;
}
.pay-row:last-of-type{ border-bottom:none; }
.pay-row .pay-label{ color: var(--text-secondary); flex:0 1 auto; }
.pay-row .pay-val{ margin:0; font-weight:600; text-align:right; flex:0 0 auto; }
.pay-subhead{
  font-size:1rem;
  margin:16px 0 8px;
  font-weight:700;
}
.pay-methods > h2{
  font-size:1.05rem;
  margin:0 0 16px;
}
.pay-methods-row{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:stretch;
}
@media (min-width: 700px){
  .pay-methods-row{
    grid-template-columns:1fr 1fr;
  }
}
.pay-method{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:18px 18px 20px;
  margin:0;
  background: rgba(255,255,255,0.02);
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
}
.pay-method h3{
  margin:0 0 10px;
  font-size:1rem;
  color: var(--accent);
}
.pay-method p{
  margin:0 0 10px;
  color: var(--text-secondary);
  font-size:14px;
  line-height:1.55;
}
.pay-method p:last-child{
  margin-bottom:0;
}
.pay-method .cta{
  margin-top:12px;
  width:100%;
  justify-content:center;
}
.pay-method .cta.secondary{
  background: transparent;
  border:1px solid rgba(0,255,102,0.35);
  color: var(--accent);
}
.pay-method .cta.secondary:hover{
  background: rgba(0,255,102,0.08);
}
.pay-note{
  font-size:12px;
  color: var(--muted);
  margin-top:8px;
  line-height:1.45;
}
.pay-note.pay-note--error{
  color:#ff6b6b;
}
.pay-method .pay-note{
  margin-top:10px;
}
.pay-empty{
  text-align:center;
  padding:40px 20px;
  color: var(--text-secondary);
}
.pay-empty a{ color: var(--accent); font-weight:600; }

.pay-404{
  text-align:center;
  padding:clamp(32px, 6vw, 56px) clamp(20px, 4vw, 32px);
  box-shadow:0 28px 64px rgba(0,0,0,0.5), inset 0 -18px 34px rgba(0,0,0,0.22);
}
.pay-404__code{
  margin:0 0 4px;
  font-size:clamp(4.5rem, 18vw, 8rem);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.05em;
  background:linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.07) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pay-404 h1{
  margin:8px 0 16px;
  font-size:clamp(1.35rem, 4vw, 1.85rem);
  font-weight:700;
  color:var(--text-white);
}
.pay-404__lead{
  margin:0 auto;
  max-width:36em;
  font-size:clamp(15px, 2vw, 17px);
  line-height:1.6;
  color:var(--text-secondary);
}
.pay-404__actions{
  margin:28px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
}
.pay-404__actions .cta{
  display:inline-flex;
  justify-content:center;
  min-width:min(240px, 100%);
  box-shadow:0 14px 26px rgba(0,0,0,0.4), 0 2px 0 rgba(255,255,255,0.12) inset;
}
.pay-stripe-return{
  text-align:center;
  padding:clamp(28px, 5vw, 44px) clamp(18px, 3vw, 28px);
}
.pay-stripe-return--stacked{
  text-align:left;
  padding:clamp(22px, 4vw, 32px) clamp(18px, 3vw, 26px);
}
.pay-stripe-return h1{
  margin-bottom:12px;
}
.pay-stripe-return .pay-kicker{
  margin:0 auto 8px;
  max-width:40em;
  font-size:clamp(14px, 1.8vw, 16px);
}
.pay-stripe-return--stacked .pay-kicker{
  margin-left:0;
  margin-right:0;
}
.pay-stripe-return .pay-404__actions{
  margin-top:24px;
}
.pay-success-card{
  text-align:center;
  padding:clamp(28px, 5vw, 40px) clamp(18px, 3vw, 28px);
  border-color:rgba(0,255,102,0.22);
  background:linear-gradient(165deg, rgba(0,255,102,0.09) 0%, rgba(255,255,255,0.02) 42%);
}
.pay-success-icon{
  width:56px;
  height:56px;
  margin:0 auto 14px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
  color:var(--accent);
  background:rgba(0,255,102,0.12);
  border:1px solid rgba(0,255,102,0.35);
}
.pay-success-title{
  margin:0 0 10px;
  font-size:clamp(1.35rem, 3.5vw, 1.65rem);
  font-weight:800;
  color:var(--text-white);
}
.pay-success-lead{
  margin:0 auto;
  max-width:38em;
  font-size:clamp(14px, 1.9vw, 16px);
  line-height:1.55;
  color:var(--text-secondary);
}
.pay-success-next{
  margin-top:16px;
  color:var(--accent);
  font-weight:600;
  font-size:13px;
}
.checkout-legal-reuse{
  margin-top:4px;
  margin-bottom:12px;
  max-width:40em;
}
.pay-recovery-note{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  max-width:40em;
  margin-left:auto;
  margin-right:auto;
}
.pay-recovery-note a{
  color:var(--accent);
  font-weight:600;
}

/* --- B2B password checkout (checkout.html) - no PostHog on this page --- */
body.checkout-b2b-page .nav-inner{
  grid-template-columns:1fr;
  justify-items:center;
}
.checkout-brand{
  font-weight:800;
  font-size:clamp(18px, 2.5vw, 22px);
  color:var(--text-white);
  letter-spacing:0.02em;
}
.checkout-b2b-main{
  max-width:min(560px, 100%);
}
.checkout-h1{
  margin:0 0 10px;
  font-size:clamp(1.25rem, 3.2vw, 1.55rem);
  font-weight:800;
  color:var(--text-white);
}
.checkout-gate-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}
.checkout-label{
  font-size:13px;
  font-weight:600;
  color:rgba(210,218,232,0.88);
}
.checkout-input{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.22);
  color:var(--text-white);
  font-size:15px;
  font-family:inherit;
}
.checkout-input:focus{
  outline:none;
  border-color:rgba(0,255,102,0.45);
  box-shadow:0 0 0 2px rgba(0,255,102,0.12);
}
.checkout-checkboxes{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:16px 0 20px;
}
.checkout-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.55;
  color:rgba(210,218,232,0.92);
  cursor:pointer;
}
.checkout-check input{
  margin-top:4px;
  flex-shrink:0;
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--accent);
}
.checkout-check a{
  color:rgba(0,255,102,0.95);
  text-decoration:underline;
  text-underline-offset:2px;
}
.checkout-check a:hover{
  color:#ffe6a8;
}
.migration-check-link-wrap{
  margin:0;
}
.checkout-compliance .check-option + .check-option{
  margin-top:14px;
}
.checkout-package{
  font-weight:700;
  color:var(--text-white);
  margin:0 0 12px;
  font-size:15px;
}
.checkout-legal-hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin:16px 0 0;
}
.checkout-stripe-fees-note{
  font-size:12px;
  line-height:1.5;
  margin:10px 0 0;
  color:var(--muted);
}
.checkout-stripe-fees-note strong{
  font-weight:700;
  color:var(--text-secondary);
}
.checkout-avv-textbtn{
  display:inline;
  margin:0;
  padding:0;
  border:none;
  background:none;
  color:rgba(0,255,102,0.95);
  font:inherit;
  font-size:inherit;
  line-height:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  vertical-align:baseline;
}
.checkout-avv-textbtn:hover{
  color:#ffe6a8;
}
.checkout-avv-modal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.checkout-avv-modal[hidden]{
  display:none !important;
}
.checkout-avv-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,5,16,0.72);
  backdrop-filter:blur(4px);
}
.checkout-avv-modal__dialog{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  max-height:min(88vh, 900px);
  display:flex;
  flex-direction:column;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(165deg, rgba(18,28,48,0.98), rgba(6,10,22,0.98));
  box-shadow:0 24px 80px rgba(0,0,0,0.55);
  overflow:hidden;
}
.checkout-avv-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.checkout-avv-modal__title{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:var(--text-white);
}
.checkout-avv-modal__x{
  border:none;
  background:rgba(255,255,255,0.06);
  color:var(--text-white);
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.checkout-avv-modal__x:hover{
  background:rgba(255,255,255,0.12);
}
.checkout-avv-modal__iframe{
  width:100%;
  flex:1;
  min-height:min(60vh, 520px);
  border:0;
  background:#0a1428;
}
.checkout-avv-modal__foot{
  margin:0;
  padding:10px 16px 14px;
  font-size:13px;
  border-top:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.checkout-avv-modal__foot a{
  color:rgba(0,255,102,0.95);
}
.legal-avv-standalone .legal-avv-main{
  padding-top:max(24px, var(--header-height, 100px));
  padding-bottom:40px;
  max-width:720px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
button.cta:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
button.cta:disabled:hover{
  transform:none;
  box-shadow:none;
}

/* ========== Premium landing: aurora, hero, bento ========== */

.aurora-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:#0a0a0c;
  pointer-events:none;
}
.aurora-bg__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  -webkit-filter:blur(120px);
  mix-blend-mode:screen;
  opacity:0.6;
  will-change:transform, opacity;
  pointer-events:none;
}
.aurora-bg__orb--1{
  width:min(92vw, 760px);
  height:min(92vw, 760px);
  top:-16%;
  right:-14%;
  background:radial-gradient(circle at 38% 42%, rgba(0,255,102,0.45), rgba(16,185,129,0.12) 48%, transparent 72%);
  animation:aurora-float-1 28s ease-in-out infinite;
}
.aurora-bg__orb--2{
  width:min(100vw, 820px);
  height:min(100vw, 820px);
  bottom:-22%;
  left:-18%;
  background:radial-gradient(circle at 50% 50%, rgba(13,148,136,0.5), rgba(15,118,110,0.12) 50%, transparent 72%);
  animation:aurora-float-2 24s ease-in-out infinite;
}
.aurora-bg__orb--3{
  width:min(85vw, 640px);
  height:min(85vw, 640px);
  left:26%;
  top:32%;
  background:radial-gradient(circle at 50% 50%, rgba(99,102,241,0.45), rgba(67,56,202,0.1) 55%, transparent 70%);
  animation:aurora-float-3 31s ease-in-out infinite;
}
@keyframes aurora-float-1{
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.58; }
  40%{ transform:translate(-5vw, 4vh) scale(1.07); opacity:0.66; }
  70%{ transform:translate(3vw, -3vh) scale(0.95); opacity:0.55; }
}
@keyframes aurora-float-2{
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.55; }
  45%{ transform:translate(6vw, -5vh) scale(1.05); opacity:0.64; }
  75%{ transform:translate(-4vw, 4vh) scale(0.97); opacity:0.52; }
}
@keyframes aurora-float-3{
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.52; }
  50%{ transform:translate(-3vw, -6vh) scale(1.08); opacity:0.62; }
  80%{ transform:translate(4vw, 3vh) scale(0.94); opacity:0.5; }
}
@media (prefers-reduced-motion: reduce){
  .aurora-bg__orb{ animation:none; opacity:0.45; }
}

/* Hero sits below main's header offset - do not add header height again on padding-top */
.hero.hero--premium{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - var(--header-height) - 16px);
  min-height:calc(100dvh - var(--header-height) - 16px);
  padding:10px clamp(20px, 4vw, 48px) clamp(24px, 4vh, 40px);
  text-align:left;
}
.hero-premium-grid{
  width:100%;
  max-width:min(1360px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 0.42fr);
  gap:clamp(16px, 3vw, 40px);
  align-items:center;
}
.hero-premium__main{
  min-width:0;
  position:relative;
  z-index:1;
}
.hero-title{
  margin:0 0 clamp(10px, 1.6vw, 16px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.04em;
  color:var(--text-white);
  font-size:clamp(2.25rem, 1.35rem + 3.8vw, 3rem);
}
@media (min-width: 768px){
  .hero-title{ font-size:clamp(2.75rem, 1.5rem + 3.2vw, 3.75rem); }
}
@media (min-width: 1024px){
  .hero-title{ font-size:clamp(3.1rem, 1.25rem + 3.4vw, 4.5rem); }
}
.hero-title-line{
  display:block;
  white-space:normal;
  overflow-wrap:break-word;
}
@media (min-width: 1025px){
  .hero-title-line{
    white-space:nowrap;
    overflow-wrap:normal;
  }
}
.hero-title-line--secondary{
  color:rgba(255,255,255,0.8);
}
.hero-title-plain{
  display:inline;
}
.hero-reveal-word{
  display:inline-block;
  margin-right:0.28em;
  opacity:0;
  transform:translate3d(0, 0.28em, 0);
  animation:hero-word-in 0.85s cubic-bezier(0.2, 0.82, 0.2, 1) forwards;
  animation-delay:calc(0.055s * var(--stagger, 0));
}
.hero-reveal-word:last-child{ margin-right:0; }
@keyframes hero-word-in{
  to{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-reveal-word{
    animation:none;
    opacity:1;
    transform:none;
  }
}
.hero-lead{
  max-width:36rem;
  margin:0;
  font-size:clamp(1rem, 1.35vw, 1.2rem);
  line-height:1.75;
  color:#a3a3a3;
}
.hero.hero--premium .lead.hero-lead{
  margin-left:0;
  margin-right:0;
}
.hero--premium .hero-actions{
  margin-top:clamp(24px, 3vw, 36px);
  align-items:flex-start;
}
.hero--premium .hero-cta-row{
  justify-content:flex-start;
}
.hero-magnetic-wrap,
.cta-magnetic-wrap{
  --mx:0px;
  --my:0px;
  display:inline-block;
  padding:28px;
  margin:-28px;
  transform:translate3d(var(--mx), var(--my), 0);
  transition:transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform;
}
.cta-magnetic-wrap--header{
  padding:14px;
  margin:-14px;
}
.cta-magnetic-wrap--menu{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:10px 0;
  margin:-10px 0;
}
.js-magnetic{
  position:relative;
}
.hero-premium__viz{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
  /* Decorative column: SVG is wider than the track and spills over the copy/CTA - must not capture clicks. */
  pointer-events:none;
}
.hero-pattern-svg{
  width:min(140%, 560px);
  height:auto;
  max-height:min(70vh, 520px);
  margin-right:-12%;
  opacity:1;
  filter:
    drop-shadow(0 0 22px rgba(0,255,102,0.38))
    drop-shadow(0 14px 36px rgba(0,255,102,0.22))
    drop-shadow(0 0 2px rgba(255,255,255,0.12));
}
.hero-pattern-float{
  transform-origin:52% 42%;
}
@media (prefers-reduced-motion: no-preference){
  .hero-pattern-float{
    animation:hero-pattern-drift 22s ease-in-out infinite;
  }
}
@keyframes hero-pattern-drift{
  0%,100%{ transform:translate3d(0, 0, 0) rotate(0deg); }
  33%{ transform:translate3d(0, -12px, 0) rotate(0.9deg); }
  66%{ transform:translate3d(0, 6px, 0) rotate(-0.7deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-pattern-float{ animation:none; }
}
@media (max-width: 1024px){
  .hero.hero--premium{
    position:relative;
    align-items:center;
    min-height:calc(100vh - var(--header-height) - 24px);
    min-height:calc(100dvh - var(--header-height) - 24px);
    padding-top:clamp(18px, 3.5vw, 30px);
    padding-bottom:clamp(22px, 4.5vh, 40px);
    text-align:center;
    overflow-x:clip;
    overflow-y:visible;
  }
  .hero-premium-grid{
    grid-template-columns:1fr;
    position:relative;
    min-height:0;
  }
  .hero-premium__main{
    position:relative;
    z-index:1;
    padding-bottom:clamp(12px, 4vw, 28px);
  }
  .hero-title{
    font-size:clamp(2.55rem, 2.1rem + 5.2vw, 3.45rem);
    line-height:1.1;
    margin-bottom:clamp(14px, 2.4vw, 22px);
  }
  .hero-lead{
    font-size:clamp(1.05rem, 2.6vw, 1.22rem);
    max-width:min(36rem, 92vw);
  }
  .hero--premium .hero-actions{
    margin-top:clamp(28px, 5vw, 44px);
  }
  .hero-premium__viz{
    order:0;
    position:absolute;
    inset:0;
    z-index:0;
    justify-content:center;
    align-items:center;
    margin-right:0;
    min-height:0;
    opacity:0.46;
  }
  .hero-pattern-svg{
    width:min(118%, 520px);
    margin-right:0;
    margin-top:clamp(-8px, -1.2vw, 6px);
    max-height:min(42vh, 320px);
  }
  .hero--premium .hero-actions,
  .hero--premium .hero-cta-row{
    align-items:center;
    justify-content:center;
  }
  .hero-lead{
    margin-left:auto;
    margin-right:auto;
  }
}
.section-bento{
  padding-top:clamp(44px, 7vw, 96px);
  padding-bottom:clamp(52px, 8vw, 88px);
  padding-left:clamp(18px, 4vw, 36px);
  padding-right:clamp(18px, 4vw, 36px);
  max-width:1200px;
  margin:0 auto;
}
.bento-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width: 1024px){
  .bento-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(140px, auto));
    gap:18px;
  }
  .bento-card--primary{
    grid-column:span 2;
    grid-row:span 2;
  }
}
.bento-card{
  position:relative;
  border-radius:1rem;
  padding:clamp(20px, 2.5vw, 28px);
  background:rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  overflow:hidden;
  isolation:isolate;
}
.bento-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0.55;
  background:radial-gradient(
    520px circle at var(--spot-x, 50%) var(--spot-y, 40%),
    rgba(255,255,255,0.14),
    transparent 55%
  );
  mix-blend-mode:screen;
  transition:opacity 0.35s ease;
  z-index:0;
}
.bento-card--primary::after{
  opacity:0.42;
}
.bento-card > *{
  position:relative;
  z-index:1;
}
.bento-kicker{
  margin:0 0 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(0,255,102,0.95);
}
.bento-card__h2{
  margin:0 0 12px;
  font-size:clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight:800;
  line-height:1.1;
}
.bento-card__lead{
  margin:0 0 18px;
  font-size:clamp(0.95rem, 1.2vw, 1.05rem);
  line-height:1.75;
  color:rgba(226,232,240,0.88);
}
.bento-highlights{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bento-highlights li{
  position:relative;
  padding-left:1.1em;
  font-size:0.95rem;
  line-height:1.6;
  color:rgba(203,213,225,0.92);
}
.bento-highlights li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(0,255,102,0.85);
}
.bento-icon{
  display:block;
  font-size:1.35rem;
  margin-bottom:10px;
}
.bento-icon svg{
  display:block;
  width:1.35em;
  height:1.35em;
  color:rgba(0,255,102,0.95);
}
.bento-card__h3{
  margin:0 0 8px;
  font-size:1.1rem;
  font-weight:700;
}
.bento-card__p{
  margin:0;
  font-size:0.92rem;
  line-height:1.75;
  color:rgba(186,198,220,0.9);
}

/* ========== Charcoal + neon: wireframe sections (about, pricing), portfolio title utility ========== */
.wire-frame__title{
  margin:0;
  padding:0 2px 12px;
  font-weight:800;
  letter-spacing:-0.04em;
  background:transparent;
  color:var(--text-white);
}

/* Legacy dashboard-showcase split (e.g. reused patterns): wide 50/50 - no section panel */
.dashboard-showcase--split{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
  width:100%;
  max-width:none;
  margin:0;
}
.dashboard-showcase__media{
  margin:0;
  border-radius:clamp(14px, 1.5vw, 20px);
  overflow:hidden;
  background:#0a0e18;
  border:1px solid rgba(0, 255, 102, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 102, 0.08),
    0 24px 56px rgba(0, 0, 0, 0.35);
}
.dashboard-showcase__media img{
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
}
.dashboard-showcase__aside{
  padding:clamp(8px, 1.5vw, 20px) 0;
  min-width:0;
}
.dashboard-showcase__tagline{
  margin:0 0 clamp(18px, 2.5vw, 28px);
  font-size:clamp(1.35rem, 2.4vw + 0.85rem, 2.35rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.03em;
  color:var(--text-white);
  max-width:18ch;
}
/* Dashboard hero link: accent-forward secondary CTA (overrides generic .cta--ghost here only) */
a.dashboard-showcase__link.cta--ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:fit-content;
  margin-top:2px;
  padding:14px 22px 14px 26px;
  font-size:clamp(0.98rem, 0.35vw + 0.9rem, 1.08rem);
  font-weight:700;
  letter-spacing:0.02em;
  color:rgba(248,252,255,0.98);
  text-decoration:none;
  border-radius:999px;
  background:linear-gradient(
    155deg,
    rgba(0,255,102,0.14) 0%,
    rgba(8,16,36,0.72) 55%,
    rgba(6,12,28,0.92) 100%
  );
  border:1px solid rgba(0,255,102,0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 32px rgba(0,0,0,0.28),
    0 0 24px rgba(0,255,102,0.06);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    color 0.2s ease;
}
a.dashboard-showcase__link.cta--ghost::after{
  content:"\2192";
  margin-left:0.5em;
  font-size:1.05em;
  font-weight:600;
  opacity:0.92;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
@media (hover:hover){
  a.dashboard-showcase__link.cta--ghost:hover{
    transform:translateY(-2px);
    color:#ffffff;
    border-color:rgba(0,255,102,0.55);
    background:linear-gradient(
      155deg,
      rgba(0,255,102,0.22) 0%,
      rgba(10,26,48,0.78) 50%,
      rgba(8,18,36,0.95) 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 14px 40px rgba(0,0,0,0.35),
      0 0 36px rgba(0,255,102,0.14);
  }
  a.dashboard-showcase__link.cta--ghost:hover::after{
    transform:translateX(3px);
    opacity:1;
  }
}
a.dashboard-showcase__link.cta--ghost:focus-visible{
  outline:2px solid rgba(0,255,102,0.55);
  outline-offset:3px;
}
@media (max-width:900px){
  .dashboard-showcase--split{
    grid-template-columns:1fr;
    gap:clamp(24px, 4vw, 40px);
  }
  .dashboard-showcase__tagline{
    max-width:none;
  }
}

/* ========== Dashboard interactive showcase (dashboard.html #dashboard-demo; homepage portfolio teaser separate) ========== */
.dash-showcase-section{
  --dash-ui-bg:#0f1117;
  --dash-ui-card:#1e2433;
  --dash-ui-border:rgba(255,255,255,0.08);
  --dash-ui-muted:rgba(186,198,220,0.72);
  --dash-ui-text:#f4f7ff;
  --dash-ring:var(--accent);
  --dash-font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --dash-font-mono:"JetBrains Mono","Cascadia Code",Consolas,ui-monospace,monospace;
}
.dash-showcase{
  width:100%;
  max-width:100%;
  margin:0 auto;
}
.dash-showcase__header{
  text-align:center;
  max-width:52rem;
  margin:0 auto clamp(28px, 4vw, 44px);
}
.dash-showcase__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 14px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(240,253,250,0.92);
  background:linear-gradient(140deg, rgba(0,255,102,0.18), rgba(16,185,129,0.1));
  border:1px solid rgba(0,255,102,0.35);
  border-radius:999px;
}
.dash-showcase__title{
  margin:0 0 12px;
  font-size:clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.2;
  color:var(--text-white);
}
.dash-showcase__title::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin:14px auto 0;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:3px;
}
.dash-showcase__sub{
  margin:0;
  font-size:clamp(1rem, 0.35vw + 0.92rem, 1.12rem);
  line-height:1.65;
  color:var(--text-secondary);
  max-width:42rem;
  margin-left:auto;
  margin-right:auto;
}
.dash-showcase__mock-outer{
  width:100%;
  max-width:min(1040px, 92vw);
  margin:0 auto clamp(28px, 4vw, 40px);
}
.dash-browser{
  border-radius:clamp(12px, 1.2vw, 16px);
  overflow:hidden;
  background:linear-gradient(180deg, #151922 0%, #0c0e14 100%);
  border:1px solid rgba(0,255,102,0.22);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 48px rgba(0,255,102,0.06);
}
.dash-browser__chrome{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.dash-browser__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:0.85;
}
.dash-browser__dot--r{background:#ff5f56;}
.dash-browser__dot--y{background:#febc2e;}
.dash-browser__dot--g{background:#28c840;}
.dash-browser__url{
  flex:1;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.38);
  font-family:var(--dash-font-mono);
  letter-spacing:0.02em;
}
.dash-browser__body{
  padding:0;
  overflow:hidden;
}
.dash-app-mock{
  display:flex;
  min-height:min(420px, 56vh);
  max-height:560px;
  font-family:var(--dash-font-ui);
  font-size:13px;
  color:var(--dash-ui-text);
  background:var(--dash-ui-bg);
}
.dash-sidebar{
  width:200px;
  flex-shrink:0;
  padding:14px 10px 16px;
  background:rgba(0,0,0,0.28);
  border-right:1px solid var(--dash-ui-border);
}
.dash-sidebar__brand{
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.02em;
  padding:4px 10px 14px;
  color:rgba(255,255,255,0.92);
}
.dash-sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dash-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  color:var(--dash-ui-muted);
  transition:background 0.2s ease,color 0.2s ease;
}
.dash-nav-item--active{
  background:rgba(0,255,102,0.1);
  color:#fff;
}
.dash-nav-item .dash-icon{
  flex-shrink:0;
  opacity:0.9;
}
.dash-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.dash-main__top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--dash-ui-border);
  background:rgba(30,36,51,0.35);
}
.dash-main__title{
  font-weight:700;
  font-size:15px;
}
.dash-main__meta{
  font-size:11px;
  color:var(--dash-ui-muted);
}
.dash-main__scroll{
  flex:1;
  overflow:auto;
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dash-kpi-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.dash-kpi{
  position:relative;
  padding:12px 12px 14px;
  background:var(--dash-ui-card);
  border:1px solid var(--dash-ui-border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.dash-kpi__label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--dash-ui-muted);
  margin-bottom:6px;
  letter-spacing:0.02em;
}
.dash-kpi__value{
  font-family:var(--dash-font-mono);
  font-size:clamp(1.15rem, 1.5vw + 0.85rem, 1.45rem);
  font-weight:700;
  letter-spacing:-0.02em;
}
.dash-kpi__value--star{
  font-family:var(--dash-font-ui);
}
.dash-kpi__hint{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:rgba(186,198,220,0.55);
}
.dash-mini-badge{
  position:absolute;
  top:8px;
  right:8px;
  padding:3px 7px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:rgba(0,255,102,0.95);
  background:rgba(0,255,102,0.1);
  border:1px solid rgba(0,255,102,0.28);
  border-radius:6px;
}
.dash-mid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.dash-panel{
  background:var(--dash-ui-card);
  border:1px solid var(--dash-ui-border);
  border-radius:12px;
  padding:12px;
  min-height:0;
}
.dash-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:12px;
  font-weight:600;
  color:rgba(244,247,255,0.88);
}
.dash-panel__link{
  font-size:11px;
  color:rgba(0,255,102,0.85);
  cursor:default;
}
.dash-orders{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-order-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:8px 10px;
  align-items:center;
  padding:8px 10px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  font-size:11.5px;
}
.dash-order-row__id{
  font-family:var(--dash-font-mono);
  color:rgba(0,255,102,0.88);
  font-weight:600;
}
.dash-order-row__meta{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:rgba(220,228,240,0.88);
}
.dash-order-row__price{
  font-family:var(--dash-font-mono);
  color:rgba(255,255,255,0.92);
  font-weight:600;
}
.dash-pill{
  justify-self:end;
  padding:3px 8px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
}
.dash-pill--ok{
  background:rgba(16,185,129,0.18);
  color:#6ee7b7;
}
.dash-pill--warn{
  background:rgba(245,158,11,0.15);
  color:#fbbf24;
}
.dash-chart{
  padding:4px 0 0;
}
.dash-chart__bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  height:120px;
  padding-top:8px;
}
.dash-chart__col{
  flex:1;
  min-width:0;
  height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  font-size:9px;
  color:rgba(186,198,220,0.55);
}
.dash-chart__bar{
  width:100%;
  max-width:28px;
  min-height:6px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, rgba(0,255,102,0.85), rgba(16,185,129,0.45));
  transform-origin:bottom;
}
.dash-chart__bar--peak{
  background:linear-gradient(180deg, #34d399, rgba(0,255,102,0.55));
}
.dash-status-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.dash-status-card{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  font-size:11px;
  line-height:1.45;
  color:rgba(230,238,248,0.88);
  background:rgba(30,36,51,0.65);
  border:1px solid var(--dash-ui-border);
  border-radius:10px;
}
.dash-status-card--wide{
  grid-column:1 / -1;
}
.dash-status-dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.22);
  animation:dash-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dash-dot-pulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 3px rgba(34,197,94,0.22); }
  50%{ opacity:0.85; transform:scale(1.08); box-shadow:0 0 0 6px rgba(34,197,94,0.18); }
}
@media (prefers-reduced-motion: reduce){
  .dash-status-dot{ animation:none; }
}
/* Feature-tab highlight rings */
.dash-app-mock .dash-zone{
  position:relative;
  border-radius:12px;
  transition:box-shadow 0.4s cubic-bezier(.2,.9,.3,1), transform 0.4s cubic-bezier(.2,.9,.3,1);
}
.dash-app-mock[data-active-tab="orders"] .dash-zone--orders,
.dash-app-mock[data-active-tab="menu"] .dash-zone--menu,
.dash-app-mock[data-active-tab="reviews"] .dash-zone--reviews,
.dash-app-mock[data-active-tab="analytics"] .dash-zone--analytics,
.dash-app-mock[data-active-tab="compliance"] .dash-zone--compliance{
  box-shadow:
    0 0 0 2px rgba(0,255,102,0.65),
    0 0 32px rgba(0,255,102,0.14);
  z-index:1;
}
.dash-app-mock[data-active-tab="menu"] .dash-zone--menu.dash-nav-item{
  background:rgba(0,255,102,0.12);
  color:#fff;
}

/* Scroll reveal (keyframes - no layout jump; plays when .is-revealed) */
@keyframes dash-fade-up{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes dash-fade-slide{
  from{ opacity:0; transform:translateX(8px); }
  to{ opacity:1; transform:translateX(0); }
}
.dash-showcase-section.is-revealed .dash-reveal-y{
  animation:dash-fade-up 0.75s cubic-bezier(.2,.9,.3,1) forwards;
}
.dash-showcase-section.is-revealed .dash-reveal-stagger{
  animation:dash-fade-up 0.55s cubic-bezier(.2,.9,.3,1) forwards;
  opacity:0;
}
.dash-showcase-section.is-revealed .dash-reveal-stagger:nth-child(1){ animation-delay:0.05s; }
.dash-showcase-section.is-revealed .dash-reveal-stagger:nth-child(2){ animation-delay:0.12s; }
.dash-showcase-section.is-revealed .dash-reveal-stagger:nth-child(3){ animation-delay:0.19s; }
.dash-showcase-section.is-revealed .dash-reveal-stagger:nth-child(4){ animation-delay:0.26s; }
@media (prefers-reduced-motion: reduce){
  .dash-showcase-section.is-revealed .dash-reveal-y,
  .dash-showcase-section.is-revealed .dash-reveal-stagger{
    animation:none;
    opacity:1;
    transform:none;
  }
}
.dash-caption-transition{
  animation:dash-fade-slide 0.35s ease forwards;
}

.dash-feature-tabs-wrap{
  max-width:min(920px, 94vw);
  margin:0 auto clamp(20px, 3vw, 32px);
}
.dash-feature-tabs__label{
  margin:0 0 12px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  text-align:center;
}
.dash-feature-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:16px;
}
.dash-feature-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font:inherit;
  font-size:0.88rem;
  font-weight:600;
  color:rgba(248,250,252,0.88);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease,transform 0.2s ease;
}
.dash-feature-tab:hover{
  background:rgba(0,255,102,0.08);
  border-color:rgba(0,255,102,0.35);
}
.dash-feature-tab:focus-visible{
  outline:2px solid rgba(0,255,102,0.65);
  outline-offset:3px;
}
.dash-feature-tab[aria-selected="true"]{
  background:rgba(0,255,102,0.14);
  border-color:rgba(0,255,102,0.55);
  color:#fff;
}
.dash-feature-tab__ic{
  font-size:1.05em;
  line-height:1;
}
.dash-showcase__caption{
  margin:0 auto;
  max-width:44rem;
  text-align:center;
  font-size:clamp(0.92rem, 0.25vw + 0.85rem, 1.02rem);
  line-height:1.65;
  color:rgba(203,213,225,0.92);
  min-height:3.2em;
}
.dash-proof-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px 14px;
  margin:0 auto clamp(24px, 4vw, 36px);
  padding:14px 18px;
  max-width:min(920px, 94vw);
  font-size:0.82rem;
  color:rgba(226,232,240,0.85);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
}
.dash-proof-strip__sep{
  opacity:0.45;
}
.dash-showcase__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.dash-showcase__cta .cta{
  min-width:min(280px, 88vw);
}
.dash-showcase__cta-secondary{
  font-size:0.95rem;
  font-weight:600;
  color:rgba(0,255,102,0.88);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease,color 0.2s ease;
}
.dash-showcase__cta-secondary:hover{
  color:#6ee7b7;
  border-bottom-color:rgba(110,231,183,0.5);
}
.dash-showcase__cta-secondary:focus-visible{
  outline:2px solid rgba(0,255,102,0.55);
  outline-offset:4px;
  border-radius:4px;
}

@media (max-width:900px){
  .dash-mid{
    grid-template-columns:1fr;
  }
  .dash-kpi-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .dash-app-mock{
    max-height:none;
  }
}
@media (max-width:767px){
  .dash-feature-tabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    margin-left:calc(-1 * clamp(12px, 3vw, 20px));
    margin-right:calc(-1 * clamp(12px, 3vw, 20px));
    padding-left:clamp(12px, 3vw, 20px);
    padding-right:clamp(12px, 3vw, 20px);
    scrollbar-width:thin;
    gap:8px;
  }
  .dash-feature-tab{
    flex-shrink:0;
  }
  .dash-sidebar{
    display:none;
  }
  .dash-app-mock{
    min-height:0;
  }
  .dash-order-row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .dash-order-row__price,
  .dash-pill{
    justify-self:start;
  }
  .dash-chart__bars{
    height:100px;
  }
}
@media (max-width:480px){
  .dash-kpi-row{
    grid-template-columns:1fr;
  }
}

/* dashboard.html */
.dashboard-subpage-wrap{
  max-width:min(820px, 94vw);
  margin:0 auto;
  padding:calc(var(--header-height) + 24px) 20px 80px;
}
.dashboard-subpage-hero{
  margin-bottom:clamp(28px, 4vw, 44px);
}
.dashboard-subpage-wrap h1{
  margin:0 0 14px;
  font-size:clamp(26px, 4vw, 34px);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--text-white);
}
.dashboard-subpage-wrap h1::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:3px;
  margin-top:10px;
}
.dashboard-subpage-lead{
  margin:0 0 24px;
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.72;
  max-width:62ch;
}
.dashboard-subpage-back{
  margin:0;
}
.dashboard-about-section{
  margin-bottom:clamp(36px, 5vw, 52px);
}
.dashboard-about-h2{
  margin:0 0 16px;
  font-size:clamp(20px, 2.5vw, 24px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text-white);
}
.dashboard-about-h2::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:3px;
  margin-top:8px;
}
.dashboard-about-list{
  margin:0;
  padding-left:1.25em;
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.68;
}
.dashboard-about-list li{
  margin-bottom:10px;
}
.dashboard-about-list li:last-child{
  margin-bottom:0;
}
.dashboard-about-body{
  margin:0;
  max-width:62ch;
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.72;
}
.dashboard-about-figure{
  margin:0;
}
.dashboard-about-figure img{
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
  border-radius:clamp(14px, 1.5vw, 18px);
  background:#0a0e18;
  border:1px solid rgba(0,255,102,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(0,255,102,0.08),
    0 18px 44px rgba(0,0,0,0.32);
}
.dashboard-about-caption{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.55;
  color:rgba(200,208,220,0.78);
}
.dashboard-subpage-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:clamp(8px, 2vw, 16px);
  padding-top:clamp(22px, 3vw, 36px);
  border-top:1px solid rgba(255,255,255,0.08);
}
.dashboard-subpage-actions .dashboard-subpage-back{
  flex-basis:100%;
  margin-top:8px;
  padding-top:12px;
}

/* About: comparison table + mobile tabs */
.about-compare__intro{
  margin-bottom:clamp(20px, 3vw, 32px);
}
.about-compare__desktop{
  width:100%;
}
.about-compare__mobile{
  width:100%;
}
@media (max-width: 767px){
  .about-compare__desktop{
    display:none;
  }
}
@media (min-width: 768px){
  .about-compare__mobile{
    display:none;
  }
}
.about-compare-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:clamp(0.88rem, 1.12vw, 1rem);
  font-variant-numeric:tabular-nums;
}
.about-compare-table thead th{
  vertical-align:bottom;
  padding:14px 12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.14);
  font-weight:700;
  line-height:1.4;
}
.about-compare-table tbody th,
.about-compare-table tbody td{
  padding:15px 12px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  vertical-align:top;
  line-height:1.62;
  overflow-wrap:break-word;
  hyphens:auto;
}
.about-compare-table tbody tr:nth-child(even) .about-compare-table__criterion{
  background:rgba(255,255,255,0.02);
}
.about-compare-table tbody tr:nth-child(even) .about-compare-table__cell-muted{
  background:rgba(255,255,255,0.025);
}
.about-compare-table tbody tr:last-child th,
.about-compare-table tbody tr:last-child td{
  border-bottom:none;
}
.about-compare-table__th-criterion{
  width:22%;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(180,190,205,0.95);
  text-align:left;
}
.about-compare-table__th-muted{
  width:26%;
  color:rgba(218,226,238,0.9);
  text-align:left;
  font-weight:600;
  font-size:clamp(0.82rem, 1.05vw, 0.92rem);
  line-height:1.45;
}
.about-compare-table__th-pages{
  width:26%;
  position:relative;
  text-align:left;
  font-size:clamp(0.98rem, 1.08vw, 1.06rem);
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(245,250,255,0.98);
  background:rgba(5,12,26,0.92);
  border-left:none;
  border-top:none;
  border-radius:0;
  padding:16px 14px 14px;
  line-height:1.2;
  box-shadow:inset 4px 0 0 var(--accent);
  border-bottom:1px solid rgba(0,255,102,0.28);
}
.about-compare-table__criterion{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-align:left;
  color:rgba(195,205,220,0.95);
  padding-right:12px;
}
/* Never use display:flex on <td> - it breaks table column layout. Flex lives on __cell-inner. */
.about-compare-table__cell-muted{
  color:rgba(208,218,232,0.92);
}
.about-compare-table__cell-pages{
  font-weight:500;
  color:rgba(232,240,252,0.98);
  background:rgba(5,14,28,0.58);
  border-left:none;
  box-shadow:inset 4px 0 0 rgba(0,255,102,0.78);
}
.about-compare-table__cell-pages .about-compare-table__cell-inner{
  align-items:center;
  gap:10px;
}
.about-compare-table__cell-inner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.about-compare-table__cell-inner > span:last-child{
  flex:1;
  min-width:0;
}
.about-compare-table tbody tr:nth-child(even) .about-compare-table__cell-pages{
  background:rgba(5,14,28,0.58);
}
.about-compare-table tbody tr:not(:last-child) .about-compare-table__cell-pages{
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.about-compare-table tbody tr:last-child .about-compare-table__cell-pages{
  border-bottom:none;
}
.about-compare-table__cell-pages .about-compare-table__icon--check,
.about-compare-tabpanel--pages .about-compare-table__icon--check{
  margin-top:0;
  width:auto;
  min-width:1em;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  font-size:1.12em;
  font-weight:700;
  line-height:1;
  background:none;
  box-shadow:none;
  color:var(--accent);
}
.about-compare-tabpanel--pages .about-compare-stack__value--pages{
  align-items:center;
}
.about-compare-table__icon{
  flex-shrink:0;
  display:inline-block;
  margin-top:0.2em;
  font-size:1.05em;
  line-height:1;
}
.about-compare-table__icon--minus{
  color:rgba(255,255,255,0.5);
}
.about-compare-table__icon--check{
  color:var(--accent);
}
.about-compare-tablist{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}
.about-compare-tab{
  flex:1;
  min-width:0;
  padding:9px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
  font-weight:600;
  font-size:clamp(0.78rem, 2.8vw, 0.88rem);
  font-family:inherit;
  cursor:pointer;
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.about-compare-tab:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.about-compare-tab--on{
  background:rgba(0,255,102,0.12);
  border-color:rgba(0,255,102,0.38);
  color:var(--text-white);
}
.about-compare-tabpanel{
  padding:2px 0 6px;
}
.about-compare-tabpanel--pages{
  padding:16px 18px 18px;
  border-radius:12px;
  background:rgba(5,14,28,0.72);
  border:1px solid rgba(255,255,255,0.08);
  border-left:4px solid var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 40px rgba(0,0,0,0.28);
}
.about-compare-stack{
  display:flex;
  flex-direction:column;
  gap:0;
}
.about-compare-stack__row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.about-compare-stack__row:last-child{
  border-bottom:none;
  padding-bottom:2px;
}
.about-compare-stack__label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(195,205,220,0.95);
}
.about-compare-stack__value{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:clamp(0.92rem, 3.4vw, 1.02rem);
  line-height:1.62;
  overflow-wrap:break-word;
}
.about-compare-stack__value--muted{
  color:rgba(208,218,232,0.94);
}
.about-compare-stack__value > span:last-child{
  flex:1;
  min-width:0;
}
.about-compare-stack__value--pages{
  font-weight:700;
  color:rgba(248,250,252,0.98);
}
.about-compare__cta{
  margin-top:clamp(18px, 3vw, 28px);
  text-align:center;
}
.about-compare__cta .cta-magnetic-wrap{
  padding:20px;
  margin:-20px;
}
#aboutCompareCta.cta{
  font-size:clamp(15px, 0.92rem + 0.42vw, 18px);
  font-weight:700;
  padding:14px 40px;
  border-radius:30px;
  background:linear-gradient(135deg, #00ff66 0%, #16c47f 45%, #38f5b0 100%);
  box-shadow:0 10px 26px rgba(0, 255, 102, 0.3), 0 0 22px rgba(22, 196, 127, 0.35);
}
#aboutCompareCta.cta:hover{
  background:linear-gradient(135deg, #34f588 0%, #22d493 45%, #58ffc4 100%);
  box-shadow:0 12px 30px rgba(0, 255, 102, 0.38), 0 0 26px rgba(22, 196, 127, 0.42);
}

/* Pricing tiers: individual cards (match club), centered row */
#pricing.section-wire .pricing-row--main-tiers{
  width:100%;
  max-width:min(1120px, 100%);
  margin:0 auto 22px;
  gap:20px;
  justify-content:center;
  align-items:stretch;
}
#pricing.section-wire .pricing-row--main-tiers .pricing-card{
  margin:0;
}
#pricing.section-wire .pricing-card .badge{
  color:#000000;
}
@media (max-width:900px){
  #pricing.section-wire .pricing-row--main-tiers{
    max-width:100%;
  }
}