/* =========================================================
   Services.css – Shared Styles for Services pages
   Works with your existing Style.css tokens/buttons
   ========================================================= */

/* ---------- HERO ---------- */
.svcHero{
  padding: 34px 0 22px;
}
.svcHero__inner{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:stretch;
}

.svcHero__top{
  border-radius:22px;
  padding:22px 22px 20px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.svcHero__top::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 280px at 18% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(700px 280px at 82% 0%, rgba(53,255,122,.10), transparent 60%);
  z-index:0;
}
.svcHero__kicker{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:fit-content;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.70);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.svcHero__title{
  position:relative;
  z-index:1;
  margin:12px 0 8px;
  font-size:clamp(34px, 4.6vw, 58px);
  letter-spacing:-.02em;
  line-height:1.05;
}
.svcHero__subtitle{
  position:relative;
  z-index:1;
  margin:0;
  max-width:70ch;
  color:rgba(14,17,22,.68);
  line-height:1.7;
  font-size:15.5px;
}
.svcHero__actions{
  position:relative;
  z-index:1;
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Right panel */
.svcHero__panel{
  border-radius:22px;
  padding:18px;
  background: linear-gradient(180deg, rgba(22,24,28,.96), rgba(22,24,28,.90));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 60px rgba(16,24,40,.14);
  color:rgba(255,255,255,.88);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.svcHero__panel::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(700px 240px at 80% 0%, rgba(53,255,122,.16), transparent 60%);
  z-index:0;
  filter: blur(1px);
}
.svcHero__panelTitle{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.9;
  margin-bottom:12px;
}
.svcHero__stats{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}
.svcStat{
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.svcStat__num{
  font-size:18px;
  margin-bottom:6px;
}
.svcStat__label{
  font-weight:900;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.svcStat__text{
  color:rgba(255,255,255,.72);
  line-height:1.5;
  font-size:13.5px;
}
.svcHero__note{
  position:relative;
  z-index:1;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.5;
}

/* ---------- PAGE LAYOUT ---------- */
.serviceShell{
  display:grid;
  gap:44px;
  padding: 18px 0 72px;
}

/* Intro card */
.svcIntroCard{
  border-radius:22px;
  padding:18px 18px 16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.08);
}
.svcIntroCard__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.01em;
}
.svcIntroCard__text{
  margin:0;
  color:rgba(14,17,22,.70);
  line-height:1.75;
  font-size:15px;
  max-width:80ch;
}

/* Section headings */
.serviceBlock{
  display:grid;
  gap:14px;
}
.serviceBlock__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.serviceBlock__title{
  margin:0;
  font-size:clamp(22px, 2.6vw, 32px);
  letter-spacing:-.02em;
}
.serviceBlock__hint{
  margin:0;
  color:rgba(14,17,22,.62);
  font-weight:650;
  font-size:13px;
}

/* ---------- FEATURE CARDS ---------- */
.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.featureCard{
  border-radius:20px;
  padding:16px 16px 14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(16,24,40,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
  will-change: transform;
}
.featureCard:hover{
  transform: translateY(-2px);
  border-color: rgba(10,16,26,.18);
  box-shadow:0 26px 70px rgba(16,24,40,.14);
}
.featureCard__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  margin-bottom:10px;
  font-size:18px;
}
.featureCard__title{
  font-weight:950;
  letter-spacing:-.01em;
  margin-bottom:6px;
  color:rgba(14,17,22,.92);
}
.featureCard__text{
  color:rgba(14,17,22,.68);
  line-height:1.65;
  font-size:14.5px;
}
.featureCard--soft{
  background:linear-gradient(180deg, #ffffff, #f7f9fc);
  border-style:dashed;
}

/* ---------- PACKAGES ---------- */
.pkgGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.pkgCard{
  border-radius:22px;
  padding:16px 16px 14px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(16,24,40,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;
}
.pkgCard__badge{
  width:fit-content;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(14,17,22,.70);
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
}
.pkgCard__badge--hot{
  color:#06110a;
  border:0;
  background: linear-gradient(90deg, rgba(53,255,122,.95), rgba(124,92,255,.85));
}
.pkgCard__head{
  font-weight:950;
  font-size:18px;
  letter-spacing:-.01em;
}
.pkgCard ul{
  margin:0;
  padding-left:18px;
  color:rgba(14,17,22,.70);
  line-height:1.6;
}
.pkgCard__foot{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(10,16,26,.08);
  font-size:13px;
  font-weight:700;
  color:rgba(14,17,22,.55);
}
.pkgCard--highlight{
  border-color: rgba(53,255,122,.40);
  box-shadow:0 26px 70px rgba(16,24,40,.14);
}
.pkgCard--highlight::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 300px at 30% 0%, rgba(53,255,122,.16), transparent 60%),
    radial-gradient(700px 300px at 70% 0%, rgba(124,92,255,.14), transparent 60%);
  z-index:0;
}
.pkgCard--highlight *{ position:relative; z-index:1; }

/* ---------- SPLIT CARD (Builder/Hybrid) ---------- */
.splitCard{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.splitCard__left,
.splitCard__right{
  border-radius:22px;
  padding:16px 16px 14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(16,24,40,.08);
}
.splitCard__badge{
  width:fit-content;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(14,17,22,.70);
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
}
.splitCard__badge--soft{
  border-style:dashed;
}
.splitCard__title{
  margin:10px 0 6px;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.01em;
}
.splitCard__text{
  margin:0;
  color:rgba(14,17,22,.68);
  line-height:1.7;
  font-size:14.5px;
}
.splitCard__fineprint{
  margin-top:10px;
  color:rgba(14,17,22,.55);
  font-size:12.5px;
  font-weight:650;
}

/* ---------- CTA ---------- */
.serviceCta{
  margin-top:10px;
}
.serviceCta__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.serviceCta__inner::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(700px 260px at 85% 0%, rgba(53,255,122,.10), transparent 60%);
  z-index:0;
}
.serviceCta__kicker{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:fit-content;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.70);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.serviceCta__title{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  font-size:20px;
  font-weight:950;
  letter-spacing:-.01em;
  max-width:60ch;
}
.serviceCta__text{
  position:relative;
  z-index:1;
  margin:0;
  color:rgba(14,17,22,.68);
  line-height:1.7;
  max-width:72ch;
  font-size:14.5px;
}
.serviceCta__actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width: 220px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .svcHero__inner{
    grid-template-columns:1fr;
  }
  .featureGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .pkgGrid{
    grid-template-columns:1fr;
  }
  .splitCard{
    grid-template-columns:1fr;
  }
  .serviceCta__inner{
    flex-direction:column;
  }
  .serviceCta__actions{
    width:100%;
    min-width: 0;
  }
  .serviceCta__actions .btn{
    width:100%;
  }
}

@media (max-width: 620px){
  .featureGrid{
    grid-template-columns:1fr;
  }
  .svcHero__actions .btn{
    width:100%;
  }
}
/* Mini highlights (instead of the right panel) */
.svcHero__pills{
  position:relative;
  z-index:1;
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.svcPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.78);
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(10,16,26,.06);
}

/* Services.css
   Shared for all Services-* pages
   Works with your Style.css tokens (light page, dark head/footer)
*/

/* ---------- Service Hero ---------- */
.svcHero{
  padding: 26px 0 10px;
}

.svcHero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}

.svcHero__copy{
  padding: 18px 0 0;
}

.svcHero__kicker{
  display:inline-flex;
  width:fit-content;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color:#2a3140;
  margin-bottom:14px;
}

.svcHero__title{
  margin:0;
  font-size:clamp(34px, 5vw, 60px);
  line-height:1.05;
  letter-spacing:-.02em;
}

.svcHero__subtitle{
  margin:10px 0 0;
  max-width:75ch;
  color:rgba(14,17,22,.68);
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.65;
}

.svcHero__actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* small line under CTAs */
.svcHero__tip{
  margin-top:14px;
  color:rgba(14,17,22,.58);
  font-weight:650;
  font-size:13px;
}

/* Pills */
.svcHero__pills{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.svcPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.78);
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(10,16,26,.06);
}

/* Right showcase card */
.svcHero__showcase{
  display:flex;
  align-items:stretch;
}

.svcShowCard{
  width:100%;
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.svcShowCard::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(700px 260px at 80% 0%, rgba(53,255,122,.10), transparent 60%);
  z-index:0;
}

.svcShowCard__top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.svcShowBadge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(14,17,22,.70);
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
}

.svcShowTag{
  font-size:12px;
  font-weight:900;
  color:rgba(14,17,22,.62);
}

.svcShowGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.svcShowItem{
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(10,16,26,.10);
}

.svcShowItem__h{
  font-weight:950;
  color:rgba(14,17,22,.90);
  margin-bottom:4px;
}

.svcShowItem__p{
  margin:0;
  color:rgba(14,17,22,.66);
  line-height:1.45;
  font-size:13.5px;
}

/* ---------- Sections ---------- */
.svcSectionHead{
  margin-bottom:14px;
  display:grid;
  gap:8px;
}

.svcSectionTitle{
  margin:0;
  font-size:clamp(22px, 2.2vw, 30px);
  letter-spacing:-.02em;
}

.svcSectionText{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  max-width:75ch;
}

/* Feature grid */
.svcFeatureGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.svcFeature{
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(10,16,26,.08);
}

.svcFeature--soft{
  background:linear-gradient(180deg, #ffffff, #f7f9fc);
  border-style:dashed;
}

.svcFeature__icon{
  width:40px; height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  margin-bottom:10px;
  font-size:18px;
}

.svcFeature__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:950;
  color:rgba(14,17,22,.92);
}

.svcFeature__text{
  margin:0;
  color:rgba(14,17,22,.68);
  line-height:1.65;
  font-size:14px;
}

/* Plans */
.svcPlanGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.svcPlan{
  border-radius:20px;
  padding:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 20px 60px rgba(16,24,40,.10);
  display:flex;
  flex-direction:column;
}

.svcPlan--featured{
  border-color:rgba(53,255,122,.35);
  box-shadow:0 26px 70px rgba(16,24,40,.14);
}

.svcPlan__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.svcPlan__name{
  font-weight:950;
  font-size:18px;
  letter-spacing:-.01em;
}

.svcPlan__badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.72);
}

.svcPlan__note{
  color:rgba(14,17,22,.62);
  font-weight:700;
  font-size:13px;
  margin:0 0 8px;
}

.svcList{
  margin:0;
  padding-left:18px;
  color:rgba(14,17,22,.70);
  line-height:1.65;
  font-size:14px;
}

.svcPlan__foot{
  margin-top:auto;
  padding-top:12px;
  display:grid;
  gap:10px;
}

.svcPlan__fit{
  color:rgba(14,17,22,.60);
  font-weight:650;
  font-size:13px;
  line-height:1.5;
}

.svcPlan__cta{
  width:100%;
  justify-content:center;
}

.svcNote{
  margin-top:14px;
  border-radius:18px;
  padding:14px 16px;
  background:rgba(14,17,22,.03);
  border:1px dashed rgba(10,16,26,.14);
  color:rgba(14,17,22,.62);
  font-weight:650;
  line-height:1.6;
}

/* Accounts table-like block */
.svcAccounts{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,16,26,.12);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(10,16,26,.08);
}

.svcAccountRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(10,16,26,.08);
}

.svcAccountRow:last-child{ border-bottom:0; }

.svcAccountName{
  font-weight:900;
  color:rgba(14,17,22,.88);
}

.svcAccountValue{
  color:rgba(14,17,22,.66);
  font-weight:650;
  text-align:right;
}

/* CTA */
.svcCta{
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.svcCta::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:
    radial-gradient(800px 280px at 20% 0%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(800px 280px at 80% 0%, rgba(53,255,122,.08), transparent 60%);
  z-index:0;
}

.svcCta > *{ position:relative; z-index:1; }

.svcCta__kicker{
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(14,17,22,.62);
  margin-bottom:6px;
}

.svcCta__title{
  margin:0;
  font-size:clamp(20px, 2.2vw, 28px);
  letter-spacing:-.02em;
}

.svcCta__text{
  margin:6px 0 0;
  color:rgba(14,17,22,.68);
  line-height:1.6;
  max-width:60ch;
}

.svcCta__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .svcHero__inner{ grid-template-columns:1fr; }
  .svcShowGrid{ grid-template-columns:1fr; }
  .svcFeatureGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svcPlanGrid{ grid-template-columns:1fr; }
  .svcAccountRow{ grid-template-columns:1fr; }
  .svcAccountValue{ text-align:left; }
  .svcCta{ flex-direction:column; align-items:flex-start; }
  .svcCta__actions .btn{ width:100%; }
}

@media (max-width: 520px){
  .svcFeatureGrid{ grid-template-columns:1fr; }
  .svcHero__actions .btn{ width:100%; }
}
/* Services.css
   Additions for Design page (keeps all previous rules)
   -> Du kannst das einfach UNTEN an deine bestehende Services.css dranhängen.
*/

/* Design hero tint */
.svcHero--design .svcShowCard::before{
  background:
    radial-gradient(750px 280px at 20% 0%, rgba(53,255,122,.10), transparent 60%),
    radial-gradient(750px 280px at 80% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(700px 260px at 50% 120%, rgba(255,188,66,.08), transparent 60%);
}

/* small mock "art" row */
.svcMockRow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.svcMock{
  height:64px;
  border-radius:16px;
  border:1px solid rgba(10,16,26,.10);
  background:rgba(255,255,255,.78);
  overflow:hidden;
  position:relative;
}

.svcMock::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(180px 60px at 20% 30%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(180px 60px at 70% 70%, rgba(53,255,122,.14), transparent 60%);
}

.svcMock--2::before{
  background:
    radial-gradient(180px 60px at 30% 30%, rgba(255,188,66,.14), transparent 60%),
    radial-gradient(180px 60px at 75% 70%, rgba(124,92,255,.14), transparent 60%);
}

.svcMock--3::before{
  background:
    radial-gradient(180px 60px at 30% 30%, rgba(53,255,122,.14), transparent 60%),
    radial-gradient(180px 60px at 75% 70%, rgba(0,0,0,.10), transparent 60%);
}

/* Plan divider (needed for the long plan blocks) */
.svcPlan__divider{
  height:1px;
  background:rgba(10,16,26,.10);
  margin:12px 0;
}

/* CTA tint for design */
.svcCta--design::before{
  background:
    radial-gradient(850px 300px at 18% 0%, rgba(255,188,66,.10), transparent 60%),
    radial-gradient(850px 300px at 82% 0%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(850px 300px at 50% 120%, rgba(53,255,122,.08), transparent 60%);
}

/* Responsive tweak */
@media (max-width: 520px){
  .svcMockRow{ grid-template-columns:1fr; }
  .svcMock{ height:56px; }
}

/* ============================
   FIX: Hero right side cards
   (replaces the pills)
   ============================ */

/* Make hero a 2-column layout */
.svcHero__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}

/* Left box keeps your current styling */
.svcHero__top{
  border-radius:22px;
  padding:22px 22px 20px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Kill pills completely */
.svcHero__pills{ display:none !important; }
.svcPill{ display:none !important; }

/* Right side container */
.svcHero__side{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

/* The tall cards */
.svcSideCard{
  border-radius:28px;
  padding:18px 14px;
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;

  background:rgba(255,255,255,.40);
  border:1px solid rgba(10,16,26,.10);
  box-shadow:0 18px 45px rgba(16,24,40,.06);

  position:relative;
  overflow:hidden;
}

/* Soft glass gradient like in your screenshot */
.svcSideCard::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:
    radial-gradient(600px 280px at 20% 0%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(600px 280px at 80% 0%, rgba(53,255,122,.08), transparent 60%),
    radial-gradient(500px 220px at 50% 120%, rgba(0,0,0,.06), transparent 60%);
  filter: blur(1px);
  opacity:.9;
}

.svcSideCard__title,
.svcSideCard__text{
  position:relative;
  z-index:1;
}

.svcSideCard__title{
  font-weight:950;
  letter-spacing:-.01em;
  color:rgba(14,17,22,.88);
  font-size:14px;
}

.svcSideCard__text{
  color:rgba(14,17,22,.62);
  line-height:1.6;
  font-size:13.5px;
}

/* Responsive: stack right cards under left hero */
@media (max-width: 980px){
  .svcHero__inner{ grid-template-columns:1fr; }
  .svcHero__side{ grid-template-columns:1fr; }
  .svcSideCard{ min-height: 120px; }
}
/* ============================
   HERO right side (rows like screenshot)
   ============================ */

/* make hero 2 columns */
.svcHero__inner{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:stretch;
}

/* kill old pills / old side cards */
.svcHero__pills,
.svcPill,
.svcHero__side,
.svcSideCard{
  display:none !important;
}

/* right wrapper */
.svcHero__aside{
  display:flex;
  align-items:stretch;
}

.svcAsideBox{
  width:100%;
  border-radius:22px;
  padding:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.08);
}

/* rows */
.svcAsideRow{
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(10,16,26,.10);
  box-shadow:0 10px 24px rgba(16,24,40,.05);
  margin-bottom:10px;
}

.svcAsideLabel{
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(14,17,22,.55);
  margin-bottom:6px;
}

.svcAsideValue{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
  color:rgba(14,17,22,.90);
  line-height:1.35;
}

/* contact button (full width like screenshot) */
.svcAsideBtn{
  width:100%;
  justify-content:center;
  margin-top:6px;
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
}

/* responsive */
@media (max-width: 980px){
  .svcHero__inner{ grid-template-columns:1fr; }
  .svcAsideBox{ padding:12px; }
  .svcAsideRow{ margin-bottom:10px; }
}
/* =========================================
   DESIGN HERO: Right side rows (override chaos)
   ========================================= */

/* 2 columns on desktop, stack on mobile */
.svcHero--design .svcHero__inner{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:stretch;
}

/* remove old right showcase + pills ONLY on design page */
.svcHero--design .svcHero__showcase{ display:none !important; }
.svcHero--design .svcHero__pills{ display:none !important; }

/* right wrapper */
.svcHero--design .svcHero__aside{
  display:flex;
  align-items:stretch;
}

.svcHero--design .svcAsideBox{
  width:100%;
  border-radius:22px;
  padding:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.08);
  position:relative;
  overflow:hidden;
}

/* subtle tint like the other page */
.svcHero--design .svcAsideBox::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 0%, rgba(53,255,122,.08), transparent 60%);
  z-index:0;
}

.svcHero--design .svcAsideRow{
  position:relative;
  z-index:1;
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(10,16,26,.10);
  box-shadow:0 10px 24px rgba(16,24,40,.05);
}
.svcHero--design .svcAsideRow + .svcAsideRow{ margin-top:10px; }

.svcHero--design .svcAsideLabel{
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(14,17,22,.55);
  margin-bottom:6px;
}

.svcHero--design .svcAsideValue{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
  color:rgba(14,17,22,.90);
  line-height:1.35;
}

.svcHero--design .svcAsideBtn{
  position:relative;
  z-index:1;
  width:100%;
  justify-content:center;
  margin-top:12px;
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
}

/* responsive */
@media (max-width: 980px){
  .svcHero--design .svcHero__inner{ grid-template-columns:1fr; }
}
/* =========================================
   WEB HERO – Blueprint Aside (like Mgmt page)
   ========================================= */

.svcHero__aside{ display:flex; align-items:stretch; }

.svcAsideBox--blueprint{
  width:100%;
  border-radius:22px;
  padding:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 22px 60px rgba(16,24,40,.08);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.svcAsideBox--blueprint::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 0%, rgba(53,255,122,.08), transparent 60%);
  z-index:0;
}

.svcAsideTop{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.svcAsideBadge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(14,17,22,.70);
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
}

.svcAsideTag{
  font-size:12px;
  font-weight:900;
  color:rgba(14,17,22,.62);
  white-space:nowrap;
}

.svcFlow{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}

.svcFlowRow{
  display:grid;
  grid-template-columns: 16px 1fr;
  gap:10px;
  align-items:start;
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(10,16,26,.10);
  box-shadow:0 10px 24px rgba(16,24,40,.05);
}

.svcDot{
  width:12px;
  height:12px;
  border-radius:999px;
  margin-top:4px;
  background: linear-gradient(90deg, rgba(53,255,122,.95), rgba(124,92,255,.85));
  box-shadow:0 10px 22px rgba(16,24,40,.10);
}

.svcFlowH{
  font-weight:950;
  letter-spacing:-.01em;
  color:rgba(14,17,22,.92);
  margin-bottom:2px;
}

.svcFlowP{
  color:rgba(14,17,22,.70);
  line-height:1.55;
  font-size:13.5px;
}

.svcMiniStats{
  position:relative;
  z-index:1;
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.svcMiniStat{
  border-radius:16px;
  padding:10px 10px 9px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border:1px solid rgba(10,16,26,.10);
}

.svcMiniStatN{
  font-weight:950;
  font-size:16px;
  letter-spacing:-.02em;
  color:rgba(14,17,22,.92);
}

.svcMiniStatL{
  margin-top:2px;
  font-size:12px;
  font-weight:750;
  color:rgba(14,17,22,.62);
}

/* responsive */
@media (max-width: 980px){
  .svcAsideTag{ white-space:normal; }
  .svcMiniStats{ grid-template-columns:1fr; }
}
/* ============================
   Beispielseiten – Quick Links
   ============================ */

.svcSiteLinks{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.svcSiteLink{
  display:inline-flex;
  align-items:center;
  padding:14px 18px;
  border-radius:999px;
  font-weight:950;
  letter-spacing:-.01em;
  text-decoration:none;

  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  color:rgba(14,17,22,.90);

  box-shadow:0 12px 30px rgba(16,24,40,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.svcSiteLink:hover{
  transform: translateY(-2px);
  border-color: rgba(10,16,26,.20);
  box-shadow:0 22px 60px rgba(16,24,40,.14);
}

.svcSiteLink--accent{
  background: linear-gradient(90deg, rgba(53,255,122,.95), rgba(124,92,255,.85));
  border:0;
  color:#06110a;
}

/* ============================
   Beispielseiten – 3 nebeneinander
   ============================ */

.svcRefs{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.svcRefRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border-radius:18px;
  padding:14px 16px;

  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(10,16,26,.08);

  text-decoration:none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-width:0;
}

.svcRefRow:hover{
  transform: translateY(-2px);
  border-color: rgba(10,16,26,.18);
  box-shadow:0 26px 70px rgba(16,24,40,.14);
}

.svcRefMain{ flex:1; min-width:0; }

.svcRefTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.svcRefTitle{
  font-weight:950;
  letter-spacing:-.01em;
  color:rgba(14,17,22,.92);
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.svcRefTag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;

  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.72);
}

.svcRefGo{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;

  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
  color:rgba(14,17,22,.70);
  font-weight:900;
}

/* optional: eins hervorheben */
.svcRefRow--accent{
  border:0;
  background: linear-gradient(90deg, rgba(53,255,122,.95), rgba(124,92,255,.85));
  box-shadow:0 22px 60px rgba(16,24,40,.14);
}
.svcRefRow--accent .svcRefTitle{ color:#06110a; }
.svcRefRow--accent .svcRefGo{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#06110a;
}
.svcRefTag--dark{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#06110a;
}

/* Responsive */
@media (max-width: 980px){
  .svcRefs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .svcRefs{ grid-template-columns: 1fr; }
  .svcRefTitle{ white-space:normal; }
}
    /* ============================
       Tools we use – Logo Grid + Hover Tooltip
       (local-only, no extra deps)
       ============================ */

    .svcTools{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap:12px;
    }

    .svcTool{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;

      border-radius:18px;
      padding:14px 12px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(10,16,26,.12);
      box-shadow:0 18px 45px rgba(10,16,26,.08);
      cursor:default;

      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      user-select:none;
      min-height:72px;
      overflow:visible;
    }

    .svcTool:hover{
      transform: translateY(-2px);
      border-color: rgba(10,16,26,.18);
      box-shadow:0 26px 70px rgba(16,24,40,.14);
    }

    .svcToolLogo{
      width:34px;
      height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(14,17,22,.04);
      border:1px solid rgba(10,16,26,.10);
      overflow:hidden;
    }

    .svcToolLogo img{
      width:22px;
      height:22px;
      object-fit:contain;
      display:block;
    }

    .svcToolName{
      font-weight:950;
      letter-spacing:-.01em;
      color:rgba(14,17,22,.88);
      font-size:13.5px;
      line-height:1.1;
      text-align:center;
      display:none; /* default: keep it clean – can enable if you want names visible */
    }

    /* Tooltip */
    .svcTip{
      position:absolute;
      left:50%;
      transform: translateX(-50%) translateY(8px);
      bottom: calc(100% + 10px);

      width: min(320px, 72vw);
      padding:12px 12px 11px;
      border-radius:16px;

      background: rgba(22,24,28,.96);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 24px 70px rgba(0,0,0,.30);

      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      z-index:50;
    }

    .svcTool:hover .svcTip,
    .svcTool:focus-within .svcTip{
      opacity:1;
      transform: translateX(-50%) translateY(0px);
    }

    .svcTip::after{
      content:"";
      position:absolute;
      left:50%;
      transform: translateX(-50%);
      top:100%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(22,24,28,.96);
      filter: drop-shadow(0 3px 2px rgba(0,0,0,.18));
    }

    .svcTipTitle{
      margin:0 0 6px;
      font-size:13px;
      font-weight:950;
      letter-spacing:-.01em;
      color:rgba(255,255,255,.92);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .svcTipKicker{
      font-size:11px;
      font-weight:950;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(255,255,255,.60);
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      padding:6px 8px;
      border-radius:999px;
      flex:0 0 auto;
    }

    .svcTipText{
      margin:0;
      color:rgba(255,255,255,.72);
      line-height:1.55;
      font-size:12.8px;
    }

    /* a subtle "featured" tool */
    .svcTool--accent{
      border:0;
      background: linear-gradient(90deg, rgba(53,255,122,.95), rgba(124,92,255,.85));
      box-shadow:0 22px 60px rgba(16,24,40,.14);
    }
    .svcTool--accent .svcToolLogo{
      background:rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.35);
    }
    .svcTool--accent .svcTip{
      border-color: rgba(255,255,255,.20);
    }

    /* Responsive */
    @media (max-width: 980px){
      .svcTools{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 620px){
      .svcTools{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ===== Tools we use (compact + hover tooltip) ===== */
.svcTools{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
}

.svcTool{
  position:relative;
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,16,26,.12);
  box-shadow:0 18px 45px rgba(10,16,26,.06);
  display:grid;
  place-items:center;
  cursor:default;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.svcTool:hover,
.svcTool:focus{
  transform: translateY(-2px);
  border-color: rgba(10,16,26,.18);
  box-shadow:0 26px 70px rgba(10,16,26,.10);
  outline:none;
}

.svcToolLogo{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(14,17,22,.04);
  border:1px solid rgba(10,16,26,.10);
}

.svcToolLogo img{
  width:28px;
  height:28px;
  display:block;
}

.svcTip{
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  width:min(320px, 80vw);
  border-radius:16px;
  padding:12px 12px 10px;
  background:rgba(22,24,28,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 60px rgba(0,0,0,.30);
  color:rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  z-index:50;
}

.svcTip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform: translateX(-50%);
  border:8px solid transparent;
  border-top-color: rgba(22,24,28,.96);
}

.svcTool:hover .svcTip,
.svcTool:focus .svcTip{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

.svcTipTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:950;
  letter-spacing:-.01em;
  margin-bottom:6px;
}

.svcTipKicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.svcTipText{
  margin:0;
  color:rgba(255,255,255,.75);
  line-height:1.5;
  font-size:13px;
}

@media (max-width: 980px){
  .svcTools{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .svcTools{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* ===== Blueprint Rows: clean like screenshot ===== */
.svcFlowRow{
  display:grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items:start;
  padding: 14px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(10,16,26,.10);
  box-shadow: 0 10px 26px rgba(10,16,26,.06);
}

/* ===== Dot: single gradient dot for ALL rows (like screenshot) ===== */
.svcDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;

  /* the dot itself */
  background: linear-gradient(135deg, #35ff7a 0%, #7c7cff 100%);

  /* subtle outer ring */
  box-shadow:
    0 0 0 4px rgba(53,255,122,.16),
    0 0 0 8px rgba(124,124,255,.06);

  /* keep it crisp */
  flex: 0 0 auto;
}

/* IMPORTANT: remove per-row color overrides (delete these if you had them)
.svcFlowRow:nth-child(2) .svcDot{...}
.svcFlowRow:nth-child(3) .svcDot{...}
.svcFlowRow:nth-child(4) .svcDot{...}
*/
/* ===== HERO: Blueprint Aside (match Webdev page) ===== */
    .svcHero__inner{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items: start;
    }
    @media (max-width: 980px){
      .svcHero__inner{ grid-template-columns: 1fr; }
    }

    .svcHero__copy{ min-width: 0; }
    .svcHero__showcase{ display:block; }

    .svcAsideBox--blueprint{
      border-radius: 22px;
      padding: 16px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(10,16,26,.12);
      box-shadow: 0 18px 45px rgba(10,16,26,.10);
    }

    .svcAsideTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .svcAsideBadge{
      font-weight: 950;
      letter-spacing: .02em;
      font-size: 12px;
      text-transform: uppercase;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(14,17,22,.06);
      border: 1px solid rgba(10,16,26,.10);
    }
    .svcAsideTag{
      font-weight: 900;
      font-size: 12px;
      color: rgba(14,17,22,.68);
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(14,17,22,.04);
      border: 1px solid rgba(10,16,26,.08);
      white-space: nowrap;
    }

    .svcFlow{
      display:grid;
      gap: 10px;
      margin: 12px 0 14px;
    }

    .svcFlowRow{
      display:grid;
      grid-template-columns: 14px 1fr;
      gap: 10px;
      align-items:start;
      padding: 10px 10px;
      border-radius: 16px;
      background: rgba(14,17,22,.03);
      border: 1px solid rgba(10,16,26,.08);
    }

    .svcDot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 4px;
      background: #35ff7a;
      box-shadow: 0 0 0 4px rgba(53,255,122,.18);
    }

    .svcFlowH{
      font-weight: 950;
      letter-spacing: -.01em;
      margin-bottom: 4px;
    }
    .svcFlowP{
      color: rgba(14,17,22,.72);
      line-height: 1.35;
      font-size: 13px;
    }

    .svcMiniStats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .svcMiniStat{
      border-radius: 16px;
      padding: 10px 10px;
      background: rgba(14,17,22,.03);
      border: 1px solid rgba(10,16,26,.08);
      text-align:center;
    }
    .svcMiniStatN{
      font-weight: 1000;
      font-size: 18px;
      letter-spacing: -.02em;
      margin-bottom: 2px;
    }
    .svcMiniStatL{
      font-size: 12px;
      font-weight: 850;
      color: rgba(14,17,22,.68);
    }

    /* ===== Tools we use (logo grid + tooltip) ===== */
    .svcTools{
      margin-top: 14px;
      display:grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }
    @media (max-width: 980px){
      .svcTools{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 620px){
      .svcTools{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    .svcTool{
      position:relative;
      border-radius:18px;
      padding:14px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(10,16,26,.12);
      box-shadow:0 18px 45px rgba(10,16,26,.06);
      display:grid;
      place-items:center;
      cursor:default;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .svcTool:hover,
    .svcTool:focus{
      transform: translateY(-2px);
      border-color: rgba(10,16,26,.18);
      box-shadow:0 26px 70px rgba(10,16,26,.10);
      outline:none;
    }

    .svcToolLogo{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:rgba(14,17,22,.04);
      border:1px solid rgba(10,16,26,.10);
      overflow:hidden;
    }
    .svcToolLogo img{
      width:28px;
      height:28px;
      display:block;
    }

    .svcTip{
      position:absolute;
      left:50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(6px);
      width:min(340px, 86vw);
      border-radius:16px;
      padding:12px 12px 10px;
      background:rgba(22,24,28,.96);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 22px 60px rgba(0,0,0,.30);
      color:rgba(255,255,255,.92);
      opacity:0;
      pointer-events:none;
      transition: opacity .14s ease, transform .14s ease;
      z-index:50;
    }
    .svcTip::after{
      content:"";
      position:absolute;
      left:50%;
      top:100%;
      transform: translateX(-50%);
      border:8px solid transparent;
      border-top-color: rgba(22,24,28,.96);
    }
    .svcTool:hover .svcTip,
    .svcTool:focus .svcTip{
      opacity:1;
      transform: translateX(-50%) translateY(0);
    }

    .svcTipTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight:950;
      letter-spacing:-.01em;
      margin-bottom:6px;
    }
    .svcTipKicker{
      font-size:11px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(255,255,255,.70);
      padding:6px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      white-space: nowrap;
    }
    .svcTipText{
      margin:0;
      color:rgba(255,255,255,.75);
      line-height:1.5;
      font-size:13px;
    }

    /* ===== Accounts: same look as Website refs (svcRefRow style) ===== */
    .svcRefs{
      display:grid;
      gap: 12px;
    }
    .svcRefRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(10,16,26,.12);
      box-shadow: 0 18px 45px rgba(10,16,26,.06);
      text-decoration:none;
      color: inherit;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .svcRefRow:hover{
      transform: translateY(-2px);
      border-color: rgba(10,16,26,.18);
      box-shadow: 0 26px 70px rgba(10,16,26,.10);
    }

    .svcRefTop{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .svcRefTitle{
      font-weight: 1000;
      letter-spacing: -.01em;
    }
    .svcRefTag{
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(14,17,22,.05);
      border: 1px solid rgba(10,16,26,.10);
      color: rgba(14,17,22,.75);
    }
    .svcRefGo{
      font-size: 18px;
      font-weight: 900;
      opacity: .65;
    }

    .svcExampleGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.svcExampleFigure{
  margin:0;
}

.svcExampleImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(10,16,26,.10);
  box-shadow:0 12px 30px rgba(10,16,26,.08);
}

.svcExampleCap{
  margin-top:8px;
  font-size:12px;
  font-weight:850;
  color:rgba(14,17,22,.62);
  letter-spacing:.02em;
}

@media (max-width: 980px){
  .svcExampleGrid{ grid-template-columns: 1fr; }
}

/* Management: Dots im Blueprint -> grün wie Webdev */
.svcFlow__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:5px;
  background:#35ff7a;
  box-shadow: 0 0 0 4px rgba(53,255,122,.18);
  flex:0 0 auto;
}