*, *::before, *::after{box-sizing:border-box;}

:root{
  /* Brand */
  --accent:#2563EB;

  /* Light premium */
  --bg0:#F3F6FF;
  --bg1:#FFFFFF;
  --card:rgba(255,255,255,.82);
  --card2:rgba(255,255,255,.92);
  --stroke:rgba(15,23,42,.12);
  --stroke2:rgba(15,23,42,.18);
  --text:#0B1220;
  --muted:rgba(11,18,32,.68);
  --muted2:rgba(11,18,32,.52);

  /* Layout */
  --radius:18px;
  --radius2:24px;
  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow2: 0 10px 28px rgba(2,6,23,.08);
  --container: 1200px;
}

/* Sticky footer layout */
html,body{height:100%;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background: radial-gradient(900px 520px at 15% -10%, rgba(37,99,235,.18), transparent 58%),
              radial-gradient(760px 520px at 85% 0%, rgba(37,99,235,.10), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
overflow-x:hidden;
}

/* Subtle film grain */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.411), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.411), transparent 38%);
  opacity:.12;
  filter: blur(18px);
  transform: translateZ(0);
  z-index:-1;
}

h1,h2,h3,h4,h5,h6{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}

a{color:inherit;}

/* ---------- Layout Basics ---------- */
.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.site-main{flex:1;}

.page{
  padding: 40px 0 56px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.70);
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}

.brand{display:inline-flex;align-items:center;text-decoration:none;}

.brand__logo{height:44px;width:auto;display:block;filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));}

/* Desktop Nav */
.nav{display:flex;align-items:center;gap:10px;}

.nav__link{
  color: var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.nav__link:hover{
  color: var(--text);
  background: rgba(15,23,42,.04);
  border-color: var(--stroke);
}

.nav__cta{
  color: var(--text);
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(37,99,235,.78));
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 14px 40px rgba(37,99,235,.22);
}

.nav__cta:hover{transform: translateY(-1px); filter: brightness(1.02);}

/* Mobile Toggle Button */
.nav-toggle{
  display:none;
  background: rgba(15,23,42,.03);
  border: 1px solid var(--stroke2);
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
}

.nav-toggle__bar{
  display:block;
  width:20px;
  height:2px;
  background: var(--text);
  margin:4px 0;
  border-radius: 2px;
  opacity:.9;
}

/* Mobile Menu */
.nav-mobile{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  padding: 10px 16px 16px;
}

.nav-mobile__link{
  display:block;
  text-decoration:none;
  color: var(--muted);
  font-weight:700;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.nav-mobile__link:hover{background: rgba(15,23,42,.04); border-color: var(--stroke); color: var(--text);}

.nav-mobile__cta{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(37,99,235,.78));
  border-color: rgba(37,99,235,.35);
  color: var(--text);
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 860px){
  .nav{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .brand__logo{height:40px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  line-height:1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .10s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  letter-spacing: .2px;
}

.btn:active{transform: translateY(1px);}

.btn--primary{
  color: var(--text);
  background: linear-gradient(180deg, rgba(37,99,235,.98), rgba(37,99,235,.74));
  border-color: rgba(37,99,235,.40);
  box-shadow: 0 18px 55px rgba(37,99,235,.20);
}

.btn--primary:hover{filter: brightness(1.05); transform: translateY(-1px);}

.btn--secondary{
  background: rgba(15,23,42,.04);
  color: var(--text);
  border-color: rgba(255,255,255,.14);
}

.btn--secondary:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20);}

.btn--ghost{
  background: transparent;
  color: var(--muted);
  border-color: rgba(255,255,255,.12);
}

.btn--ghost:hover{color: var(--text); background: rgba(15,23,42,.04);}

.btn--full{width:100%;}

/* ---------- Cinematic Hero ---------- */
.hero{
  padding: 70px 0 24px;
}

.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:start;
}

.hero__content{position:relative;}

.hero__eyebrow{
  margin:0 0 14px;
  font-weight:800;
  color: var(--muted);
  letter-spacing:.35px;
  text-transform: uppercase;
  font-size: 12px;
}

.hero__title{
  margin:0 0 16px;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.03;
  letter-spacing: -1.1px;
}

.hero__subtitle{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 58ch;
}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom: 18px;}

.hero__trust{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.trust-item{
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--stroke);
}

.trust-item__title{display:block;font-weight:900;font-size: 13px; margin-bottom: 2px;}
.trust-item__text{display:block;color: var(--muted2); font-weight:600; font-size: 13px;}

/* Side card becomes “Live Proof” */
.hero__card{position:relative;}

.hero-card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--stroke2);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.hero-card__top{
  padding: 18px 18px 0;
}

.hero-card__title{
  margin:0 0 10px;
  font-size: 13px;
  letter-spacing:.28px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
}

.hero-card__hint{margin: 10px 0 0; color: var(--muted2); line-height: 1.6; font-weight: 600;}

.hero-card__cta{margin-top: 14px;}

.hero-card__divider{height:1px;background: rgba(255,255,255,.10); margin: 14px 0;}

/* Browser mock */
.browser{
  margin: 0 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke2);
  background: rgba(7,10,18,.45);
  overflow:hidden;
}

.browser__bar{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.03);
}

.dot{width:10px;height:10px;border-radius:999px;background: rgba(255,255,255,.22);}
.dot--a{background: rgba(255,255,255,.22);} 
.dot--b{background: rgba(255,255,255,.18);} 
.dot--c{background: rgba(255,255,255,.14);} 

.browser__url{
  margin-left: 6px;
  height: 10px;
  flex:1;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.browser__body{padding: 16px 14px 16px;}

.preview{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(500px 260px at 20% 10%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 14px;
}

.preview__kpi{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}

.kpi{
  flex: 1 1 120px;
  border-radius: 16px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--stroke);
  padding: 10px 12px;
}

.kpi__value{display:block;font-weight: 950; letter-spacing: -.3px; font-size: 16px;}
.kpi__label{display:block;color: var(--muted2); font-weight: 700; font-size: 12px; margin-top: 2px;}

.preview__lines{display:grid;gap:10px;}
.line{height:10px;border-radius:999px;background: rgba(255,255,255,.10);}
.line.w60{width:60%;}
.line.w80{width:80%;}
.line.w90{width:90%;}

@media (max-width: 760px){
  .hero__inner{grid-template-columns: 1fr;}
  .hero{padding-top: 56px;}
}

/* ---------- Sections ---------- */
.section{
  padding: 48px 0;
}

.section--tight{padding: 34px 0;}

.section__title{
  margin:0 0 12px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.7px;
}

.section__text{
  margin:0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 600;
  max-width: 70ch;
}

/* Proof bar */
.proofbar{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.pill__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(37,99,235,.9);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* The Shift */
.shift{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.panel{
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 18px;
}

.panel__kicker{
  margin:0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.35px;
  color: var(--muted2);
  font-weight: 900;
}

.panel__title{margin:0 0 10px; font-size: 18px; letter-spacing: -.4px;}

.list{margin:0; padding-left: 18px; color: var(--muted); line-height: 1.8; font-weight: 650;}

.steps{display:grid; gap: 10px;}
.step{display:flex; gap: 12px; align-items:flex-start;}
.step__num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.35);
  font-weight: 950;
}
.step__body{color: var(--muted); font-weight: 650; line-height: 1.6;}
.step__body strong{color: var(--text);}

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

/* Services cards (cinematic) */
.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.card{
  grid-column: span 6;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  padding: 18px;
  box-shadow: var(--shadow2);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(600px 240px at 10% 0%, rgba(37,99,235,.18), transparent 55%);
  opacity:.8;
  pointer-events:none;
}

.card:hover{transform: translateY(-3px); border-color: var(--stroke2);}

.card__title{margin:0 0 6px; font-size: 18px; letter-spacing: -.5px; position:relative; z-index:1;}
.card__text{margin:0 0 12px; color: var(--muted); line-height: 1.6; font-weight:650; position:relative; z-index:1;}

.badges{display:flex; gap: 8px; flex-wrap:wrap; position:relative; z-index:1;}
.badge{font-size: 12px; font-weight: 800; color: var(--muted); background: var(--card); border: 1px solid var(--stroke); padding: 7px 10px; border-radius: 999px;}

.card__meta{margin-top: 12px; color: var(--muted2); font-weight: 750; font-size: 12px; position:relative; z-index:1;}

@media (max-width: 760px){
  .card{grid-column: span 12;}
}

/* Work gallery */
.gallery{
  margin-top: 18px;
  display:flex;
  gap: 14px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.gallery::-webkit-scrollbar{height: 10px;}
.gallery::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14); border-radius: 999px;}

.case{
  min-width: 340px;
  scroll-snap-align: start;
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 16px;
}

.case__kicker{margin:0 0 6px; color: var(--muted2); text-transform: uppercase; letter-spacing:.35px; font-size: 12px; font-weight: 900;}
.case__title{margin:0 0 10px; font-size: 18px; letter-spacing: -.45px;}
.case__text{margin:0; color: var(--muted); line-height: 1.7; font-weight:650;}
.case__result{margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); color: var(--text); font-weight: 900;}

/* Plans */
.plans{
  display:grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}
.plan{
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 22px;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.plan:hover{
  border-color: var(--stroke2);
  box-shadow: var(--shadow);
}
.plan__head{
  text-align:center;
}
.plan__t, .plan__name{
  margin:0 0 8px;
  font-size: 20px;
  letter-spacing: -.4px;
}
.plan__s, .plan__tag{
  margin:0 0 14px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}
.plan__list{
  margin: 0 auto;
  padding-left: 0;
  list-style:none;
  color: var(--muted);
  font-weight:650;
  line-height: 1.9;
  text-align:left;
  max-width: 34ch;
  width:100%;
}
.plan__list li{
  position:relative;
  padding-left: 18px;
  margin: 6px 0;
}
.plan__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(37,99,235,.22);
  border: 1px solid rgba(37,99,235,.25);
}
.plan__badge{
  align-self:flex-start;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius:999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.22);
  color: rgba(11,18,32,.78);
}
.plan--featured{
  background: radial-gradient(900px 260px at 50% -30%, rgba(37,99,235,.18), transparent 55%),
              var(--card2);
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 22px 70px rgba(37,99,235,.16);
  transform: translateY(-10px);
}
.plan .btn{
  margin-top:auto;
}
@media (max-width: 980px){
  .plans{grid-template-columns: 1fr;}
  .plan--featured{transform:none;}
}


/* Final CTA */
.cta{
  border-radius: 32px;
  border: 1px solid var(--stroke);
  background: radial-gradient(800px 260px at 15% 10%, rgba(37,99,235,.26), transparent 58%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  padding: 22px;
  box-shadow: var(--shadow);
}

.cta__title{margin:0 0 8px; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.7px;}
.cta__text{margin:0 0 14px; color: var(--muted); line-height: 1.7; font-weight: 650; max-width: 72ch;}
.cta__actions{display:flex; gap: 12px; flex-wrap:wrap;}
.cta__meta{margin-top: 12px; color: var(--muted2); font-weight: 750; font-size: 12px;}

/* ---------- Page Hero (subpages) ---------- */
.page-hero{
  padding: 46px 0 18px;
}

.breadcrumbs{color: var(--muted2); font-weight: 750; font-size: 12px; letter-spacing:.2px;}

.page-hero__title{margin: 10px 0 12px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -1px; line-height: 1.05;}
.page-hero__text{margin:0; color: var(--muted); font-weight: 650; line-height: 1.75; max-width: 75ch;}

.content{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}

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

/* ---------- Footer ---------- */
.site-footer{
  margin-top: 36px;
  border-top: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.13);
}

.footer__inner{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 18px;
  padding: 34px 0;
}

.footer__logo{height:40px;width:auto;display:block;margin-bottom: 10px;}
.footer__tagline{margin:0 0 10px;font-weight: 950;}
.footer__text{margin:0;color: var(--muted);line-height: 1.7;font-weight: 650;}

.footer__title{margin:0 0 10px;font-size: 14px; font-weight: 950; color: var(--text);}
.footer__link{display:block;color: var(--muted);text-decoration:none;padding: 7px 0;font-weight: 700;}
.footer__link:hover{color: var(--text);}

.footer__bottom{border-top: 1px solid rgba(255, 255, 255, 0.048);}
.footer__bottom-inner{display:flex;justify-content:space-between;gap: 12px; padding: 14px 0; color: var(--muted2); font-weight: 750;}

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

@media (max-width: 560px){
  .footer__inner{grid-template-columns: 1fr;}
  .footer__bottom-inner{flex-direction: column; align-items:flex-start;}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* =====================================================================
   NT Digitalwerk – Cinematic v2 fixes
   Align CSS with current HTML classes and remove section seams.
   ===================================================================== */

/* ---------- Prevent “design breaks” between sections ---------- */
.hero,
.proof,
.section,
.final{
  position: relative;
  overflow: hidden;
}

/* soft overlay per section to blend transitions */
.hero::before,
.proof::before,
.section::before,
.final::before{
  content:"";
  position:absolute;
  inset: -2px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(255,255,255,.05), transparent 60%);
  /* Keep this very subtle to avoid visible “bands” between sections */
  opacity: .22;
}

.section--dark{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

/* ---------- Section head: centered + cinematic rhythm ---------- */
.section__head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 22px;
}

.section__head .section__text{
  margin-top: 10px;
}

/* ---------- Proof bar (current HTML: .proof__bar/.proof__item) ---------- */
.proof{padding: 18px 0 6px;}

.proof__bar{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.proof__item{
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
}

.proof__k{font-weight: 900; font-size: 12px; color: var(--text); letter-spacing: -.2px;}
.proof__v{font-weight: 750; font-size: 12px; color: var(--muted);}

@media (max-width: 640px){
  .proof__bar{justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom: 8px;}
  .proof__bar::-webkit-scrollbar{height:8px;}
  .proof__item{flex:0 0 auto;}
}

/* ---------- Split layout (current HTML: .split) ---------- */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.split__col{
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 18px;
  box-shadow: var(--shadow2);
}

.section__kicker{
  margin:0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.35px;
  color: var(--muted2);
  font-weight: 950;
}

.bullets{
  margin: 12px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
}

.bullets li{
  position:relative;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}

.bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(37,99,235,.9);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

.steps{display:grid; gap: 10px; margin-top: 10px;}
.step{display:flex; gap: 12px; align-items:flex-start;}
.step__n{
  width: 30px; height: 30px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.35);
  font-weight: 950;
}
.step__b{color: var(--muted); font-weight: 700; line-height: 1.55;}
.step__t{color: var(--text); font-weight: 950; letter-spacing:-.35px;}
.step__d{color: var(--muted); font-weight: 650; margin-top: 2px;}

.mini-cta{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px;}

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

/* ---------- Services grid (current HTML: .service-grid/.svc-card) ---------- */
.service-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.svc-card{
  grid-column: span 4;
  border-radius: var(--radius2);
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  padding: 18px;
  box-shadow: var(--shadow2);
  position: relative;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
  transition: transform .14s ease, border-color .14s ease;
}

/* slim signature edge – makes cards feel designed, not “hingeklatscht” */
.svc-card::before{
  content:"";
  position:absolute;
  inset: 10px auto 10px 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37,99,235,.9), rgba(255,255,255,.16));
  opacity: .55;
}

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

.svc-card:hover{transform: translateY(-3px); border-color: var(--stroke2);}

.svc-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;}
.svc-card__t{margin:0; font-size: 18px; letter-spacing: -.5px; font-weight: 950;}
.svc-card__tag{
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
  background: rgba(15,23,42,.04);
  border: 1px solid var(--stroke);
  padding: 7px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.svc-card__d{margin:0; color: var(--muted); line-height: 1.6; font-weight: 650;}

.svc-card__list{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
}

.svc-card__list li{
  position:relative;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}

.svc-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.svc-card__foot{
  margin-top:auto;
  padding-top: 12px;
  color: var(--muted2);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .2px;
}

@media (max-width: 760px){
  .svc-card{grid-column: span 12;}
  .svc-card__tag{white-space:normal;}
}

/* ---------- Case strip (current HTML: .case-strip/.case-card) ---------- */
.case-strip{
  margin-top: 18px;
  display:grid;
  /* Premium desktop: 2 große Cases nebeneinander */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: stretch;
}

.case-strip::-webkit-scrollbar{height: 10px;}

.case-card{
  scroll-snap-align: start;
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 18px;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  height:100%;
}

.case-card__kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: var(--muted2);
  font-weight: 950;
  margin-top: 4px;
}

.case-card__line{color: var(--muted); font-weight: 700; line-height: 1.55; margin-top: 6px;}

.case-card__result{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(37,99,235,.28);
margin-top:auto;}

.case-card__result span{color: var(--muted); font-weight: 850;}
.case-card__result strong{color: var(--text); font-weight: 950;}

/* ---------- Plans: fix button placement + consistent heights ---------- */
.plans{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
  align-items: stretch;
}

.plan{
  grid-column: span 4;
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 18px;
  box-shadow: var(--shadow2);
  position: relative;
  display:flex;
  flex-direction:column;
  min-height: 320px;
}

.plan::before{
  content:"";
  position:absolute;
  inset: 12px auto 12px 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(37,99,235,.85));
  opacity: .45;
}

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

.plan__head{margin-bottom: 12px;}
.plan__t{margin:0; font-size: 18px; letter-spacing: -.5px; font-weight: 950;}
.plan__s{margin:8px 0 0; color: var(--muted); line-height: 1.6; font-weight: 650;}

.plan__list{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
  flex: 1;
}

.plan__list li{
  position:relative;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}

.plan__list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.plan a.btn{margin-top: 14px;}

.plan--featured{
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(37,99,235,.22), transparent 60%),
    rgba(255,255,255,.06);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 18px 60px rgba(37,99,235,.16);
}

.plan__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.35);
  font-weight: 950;
  font-size: 12px;
  width: fit-content;
  margin-bottom: 12px;
}

@media (max-width: 760px){
  .plan{grid-column: span 12; min-height: unset;}
}

/* ---------- Hero mock (current HTML: .mock...) ---------- */
.mock{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(15,23,42,.03);
  overflow:hidden;
}

.mock__top{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,10,18,.45);
}

.mock__dot{width:10px;height:10px;border-radius:999px;background: rgba(255,255,255,.16);}
.mock__url{margin-left: 4px; font-size: 12px; color: var(--muted2); font-weight: 800;}

.mock__body{padding: 14px;}
.mock__badge{font-size: 12px; font-weight: 900; color: var(--muted2); text-transform: uppercase; letter-spacing:.35px;}
.mock__title{margin-top: 8px; font-weight: 950; letter-spacing: -.4px;}
.mock__lines{display:grid;gap:10px;margin: 12px 0;}
.mock__lines span{height:10px;border-radius:999px;background: rgba(255,255,255,.10);}
.mock__lines span:nth-child(1){width: 88%;}
.mock__lines span:nth-child(2){width: 70%;}
.mock__lines span:nth-child(3){width: 92%;}
.mock__lines span:nth-child(4){width: 60%;}

.mock__kpis{display:grid;gap:10px;}
.mock__kpis .kpi{border-radius: 16px; background: rgba(15,23,42,.04); border: 1px solid var(--stroke); padding: 10px 12px;}
.kpi__n{font-weight: 950; letter-spacing: -.3px; font-size: 16px;}
.kpi__l{color: var(--muted2); font-weight: 800; font-size: 12px; margin-top: 2px;}

/* Hero side-card layout polish (button placement + spacing) */
.hero-card--cinematic{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.hero-card--cinematic .mock{margin:0;}
.hero-card--cinematic .hero-card__divider{margin: 0;}
.hero-card--cinematic .hero-card__hint{margin: 0;}
.hero-card--cinematic a.btn{margin-top: auto;}



/* --- High-end: Selected Work scroll on mobile --- */
@media (max-width: 760px){
  .case-strip{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding-bottom:10px;
    scroll-snap-type:x mandatory;
  }
  .case-card{flex:0 0 360px; scroll-snap-align:start;}
}

/* --- High-end: Retainer cards consistent (featured bigger, sides smaller) --- */
.plans{
  display:grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(0, .92fr);
  gap: 18px;
  align-items: stretch;
}
.plan{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.plan__head{ text-align:center; }
.plan__t{ margin-left:auto; margin-right:auto; }
.plan__s{ text-align:center; margin-left:auto; margin-right:auto; max-width: 38ch; }
.plan__list{
  margin: 14px auto 0;
  width: fit-content;
  text-align:left;
}
.plan a.btn{
  margin-top:auto;
  width:100%;
}

/* Make featured plan feel more important */
.plan--featured{
  transform: translateY(-6px);
}
.plans .plan:not(.plan--featured){
  transform: translateY(6px);
  opacity: .96;
}

@media (max-width: 760px){
  .plans{grid-template-columns:1fr;}
  .plan--featured,
  .plans .plan:not(.plan--featured){
    transform:none;
    opacity:1;
  }
}

/* =========================================================
   FORCE: Retainer cards side-by-side (bulletproof override)
   Reason: different older grid rules / breakpoints can stack plans.
========================================================= */
.plans{
  display:flex !important;
  gap:22px;
  align-items:stretch;
  flex-wrap:nowrap;
}
.plans .plan{
  flex:1 1 0;
  min-width:0;
}
.plans .plan.plan--featured{
  flex:1.25 1 0;
  transform: translateY(-10px);
}
.plans .plan:not(.plan--featured){
  transform: translateY(10px);
  opacity:.96;
}

@media (max-width: 980px){
  .plans{flex-wrap:wrap;}
  .plans .plan,
  .plans .plan.plan--featured{
    flex:1 1 100%;
    transform:none;
  }
}

/* Form notices (server feedback) */
.form__notice{padding:12px 14px;border-radius:14px;margin:0 0 14px;border:1px solid var(--stroke);background:var(--card-strong);} 
.form__notice--success{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10);} 
.form__notice--error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);}