/* ============================================================
   WD COOPERATION — Pillar Page CSS
   Geteilte Stile für alle 4 Pillar-Detail-Seiten.
   ============================================================ */

/* BREADCRUMB */
.breadcrumb {
  padding: 20px 0; background: var(--wd-bg-alt);
  border-bottom: 1px solid var(--wd-border);
  font-size: 13.5px; color: var(--wd-muted);
}
.breadcrumb a { color: var(--wd-muted); text-decoration: none; transition: color 200ms ease; }
.breadcrumb a:hover { color: var(--wd-magenta); }
.breadcrumb .sep { margin: 0 10px; color: var(--wd-border); }
.breadcrumb .current { color: var(--wd-magenta); font-weight: 600; }

/* NAV ACTIVE STATE */
.nav-item.is-active { color: var(--wd-magenta); font-weight: 600; }
.nav-item.is-active::after { width: 100%; }

/* PILLAR HERO */
.pillar-hero {
  position: relative; overflow: hidden;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, var(--wd-lavender) 0%, #fff 100%);
}
.pillar-hero__polygons {
  position: absolute; top: 0; right: 0;
  width: 520px; height: 380px; pointer-events: none; z-index: 0; opacity: 0.65;
}
.pillar-hero__polygons svg { width: 100%; height: 100%; }
/* Kein max-width auf dem Container: Zusammen mit dem geerbten margin: 0 auto
   von .container zentriert sich der Block sonst über der ganzen Seite und
   steht weiter innen als Kopfzeile, Breadcrumb und alle folgenden Abschnitte.
   Begrenzt wird deshalb der Inhalt, nicht der Rahmen. */
.pillar-hero__container { position: relative; z-index: 1; }
.pillar-hero:not(.pillar-hero--split) .pillar-hero__container > * { max-width: 820px; }
.pillar-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(146, 39, 143, 0.08);
  padding: 8px 18px; border-radius: 99px;
  font-size: 13px; margin-bottom: 32px;
}
.pillar-hero .eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wd-gradient); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
.pillar-hero h1 {
  font-size: clamp(48px, 6vw, 80px); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.03em;
  margin-bottom: 28px; color: var(--wd-text);
}
.pillar-hero h1 .accent {
  background: var(--wd-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pillar-hero .lead {
  font-size: 20px; line-height: 1.55; color: var(--wd-muted);
  max-width: 640px; margin-bottom: 40px;
}
.pillar-hero .ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* SUB-SERVICES */
.subservices { padding: 100px 0; background: #fff; }
.subservice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 60px;
}
/* Ungerade Anzahl Bausteine: Der letzte spannt über beide Spalten, sonst
   stünde er allein in der Reihe. Fließtext bleibt auf Lesebreite begrenzt. */
.subservice--wide { grid-column: 1 / -1; }
.subservice--wide > p { max-width: 72ch; }

.subservice {
  padding: 40px 36px; background: #fff;
  border: 1px solid var(--wd-border); border-radius: 20px;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease, border-color 300ms ease;
  position: relative; overflow: hidden;
}
.subservice::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--wd-gradient-h); transform: scaleX(0); transform-origin: left;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.subservice:hover { transform: translateY(-6px); box-shadow: var(--wd-shadow-md); border-color: transparent; }
.subservice:hover::before { transform: scaleX(1); }
.subservice .num {
  font-size: 12px; color: var(--wd-muted); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px;
}
.subservice h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 14px; line-height: 1.2; }
.subservice p { font-size: 15.5px; color: var(--wd-muted); line-height: 1.6; margin-bottom: 20px; }
.subservice .deliverables { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.subservice .deliverables li {
  background: var(--wd-lavender); color: var(--wd-magenta-deep);
  padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500;
}

/* USE CASES */
.usecases {
  padding: 100px 0;
  background: linear-gradient(180deg, transparent 0%, var(--wd-lavender) 100%);
}
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.usecase {
  background: #fff; border-radius: 20px;
  padding: 32px 28px; border: 1px solid var(--wd-border);
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.usecase::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: var(--wd-gradient-h);
  opacity: 0; transition: opacity 300ms ease;
}
.usecase:hover::after { opacity: 1; }
.usecase .signal {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 600; color: var(--wd-magenta);
}
.usecase .signal::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wd-gradient);
}
.usecase h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--wd-text); }
.usecase p { font-size: 14.5px; color: var(--wd-muted); line-height: 1.6; }
.usecase .outcome {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--wd-border);
  font-size: 13px; color: var(--wd-text-soft);
}
.usecase .outcome strong { color: var(--wd-magenta); }

/* PROCESS */
.pillar-process { padding: 100px 0; background: #fff; }
.process-steps {
  margin-top: 60px;
  display: flex; flex-direction: column;
  padding-left: 0;
  position: relative;
}
/* Die durchgehende Linie ist kein border mehr, sondern zwei Schichten:
   ein blasser Track über die volle Höhe und darüber ein farbiger Fortschritt,
   dessen Höhe site.js beim Scrollen setzt (--timeline-fortschritt). */
.process-steps::before,
.process-steps::after {
  content: ""; position: absolute;
  left: -2px; top: 0; width: 2px;
  z-index: 0;
}
.process-steps::before { height: 100%; background: var(--wd-border); }
.process-steps::after {
  height: var(--timeline-fortschritt, 0%);
  background: var(--wd-gradient);
  transition: height 140ms linear;
}
.process-step-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 32px; padding: 32px 0 32px 32px;
  position: relative;
  border-bottom: 1px solid var(--wd-border);
}
.process-step-row:last-child { border-bottom: none; }
.process-step-row::before {
  content: ""; position: absolute; left: -8px; top: 44px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--wd-gradient); box-shadow: 0 0 0 4px #fff;
  z-index: 1;
  transform: scale(0);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms;
}
.process-step-row.in-view::before { transform: scale(1); }

/* Die Zeile selbst bleibt stehen — sonst würde der Punkt beim Einfaden
   von der Linie wegwandern. Stattdessen faden die Inhalte gestaffelt ein. */
.process-step-row.reveal { opacity: 1; transform: none; transition: none; }
.process-step-row.reveal > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.process-step-row.reveal.in-view > * { opacity: 1; transform: translateY(0); }
.process-step-row.reveal.in-view > *:nth-child(2) { transition-delay: 110ms; }

@media (prefers-reduced-motion: reduce) {
  .process-steps::after { transition: none; height: 100%; }
  .process-step-row::before { transform: scale(1); transition: none; }
  .process-step-row.reveal > * { opacity: 1; transform: none; transition: none; }
}
.process-step-row .duration {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--wd-muted); font-weight: 600; padding-top: 4px;
}
.process-step-row .duration strong {
  display: block; color: var(--wd-magenta); font-size: 22px;
  letter-spacing: -0.015em; margin-top: 4px; text-transform: none;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.process-step-row h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.process-step-row p { font-size: 15px; color: var(--wd-muted); line-height: 1.6; }
.process-step-row ul { margin-top: 14px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.process-step-row ul li {
  background: var(--wd-bg-alt); color: var(--wd-text-soft);
  padding: 5px 11px; border-radius: 6px; font-size: 12.5px;
}

/* CASES */
.pillar-cases { padding: 100px 0; background: var(--wd-bg-alt); }
.pillar-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.pillar-case {
  background: #fff; border-radius: 20px;
  padding: 32px 28px; border: 1px solid var(--wd-border);
  display: flex; flex-direction: column;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.pillar-case:hover { transform: translateY(-6px); box-shadow: var(--wd-shadow-md); }
.pillar-case .tag {
  display: inline-block; align-self: flex-start;
  background: var(--wd-lavender); color: var(--wd-magenta);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  padding: 6px 12px; border-radius: 99px; font-weight: 600; margin-bottom: 20px;
}
.pillar-case h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; }
.pillar-case p { font-size: 14.5px; color: var(--wd-muted); line-height: 1.6; margin-bottom: 22px; flex-grow: 1; }
.pillar-case .result { border-top: 1px solid var(--wd-border); padding-top: 18px; }
.pillar-case .result strong {
  display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--wd-gradient-h); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; margin-bottom: 4px;
}
.pillar-case .result span { color: var(--wd-muted); font-size: 13.5px; }

/* FAQ */
.faq { padding: 100px 0; background: #fff; }
.faq-list { margin-top: 60px; max-width: 880px; margin-left: auto; margin-right: auto; }
.faq-item { border-bottom: 1px solid var(--wd-border); padding: 24px 0; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 600; color: var(--wd-text);
  padding: 4px 0; transition: color 200ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--wd-magenta); }
.faq-item summary::after {
  content: "+"; font-size: 28px; font-weight: 300;
  color: var(--wd-magenta); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: 16px; font-size: 15.5px; color: var(--wd-muted);
  line-height: 1.7; padding-right: 40px;
}

/* PRICING — Premium Dark Section with Magenta Glow */
.pricing {
  padding: 140px 0 120px;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
  color: #fff;
}
/* Grid pattern with mask */
.pricing::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 70px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #fff 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #fff 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
/* Magenta-pink glow behind header */
.pricing::after {
  content: "";
  position: absolute;
  top: -260px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 800px;
  background:
    radial-gradient(ellipse at center, rgba(146, 39, 143, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(255, 39, 89, 0.2) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
}
.pricing > .container { position: relative; z-index: 1; }

.pricing .section-header h2 { color: #fff; }
.pricing .section-header .eyebrow { color: var(--wd-pink-soft); }
.pricing .section-header .lead { color: rgba(255,255,255,0.7); }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1080px; margin: 60px auto 0;
}

.pricing-card {
  background: linear-gradient(180deg, #1c1c1c 0%, #0e0e0e 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 32px;
  color: #fff;
  text-align: left;
  position: relative;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
  display: flex; flex-direction: column;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* Featured (popular) card — magenta glow + tinted background */
.pricing-card.featured {
  background: linear-gradient(180deg, #25132A 0%, #12081A 100%);
  border-color: rgba(184, 90, 179, 0.35);
  box-shadow:
    0 -13px 200px 0 rgba(146, 39, 143, 0.55),
    0 12px 60px rgba(0,0,0,0.6);
  z-index: 10;
}

.pricing-card .ribbon {
  display: inline-block;
  background: var(--wd-gradient-h);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
  align-self: flex-start;
}

.pricing-card h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
  /* Lange Komposita wie "Geschäftsausstattung" passen nicht in die Kartenbreite.
     Das globale overflow-wrap: break-word trennt sie mitten im Wort und ohne
     Strich ("Geschäftsausstattun/g"). hyphens allein genügt nicht: Solange
     break-word einen Bruch an jeder Stelle erlaubt, trennt der Browser lieber
     willkürlich, als die Silbentrennung zu bemühen. Deshalb hier zurück auf
     normal — dann bleibt nur der saubere Weg über die Silben (lang="de"). */
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* PRICE block */
.pricing-card .price {
  display: flex; align-items: baseline; gap: 5px;
  /* Notausgang: Passt die Zeile nicht, rutscht der Zusatz komplett in die
     nächste Zeile — statt dass jedes Wort einzeln zerlegt wird. */
  flex-wrap: wrap;
  margin: 18px 0 14px;
}
/* brand.css setzt global min-width:0. Ohne die folgenden Regeln schrumpfen die
   Spans unter ihre Textbreite und "ab" bricht zu "a"/"b", das € fällt um. */
.pricing-card .price .prefix,
.pricing-card .price .amount,
.pricing-card .price .period {
  white-space: nowrap;
}
.pricing-card .price .prefix,
.pricing-card .price .amount {
  flex-shrink: 0;
}
.pricing-card .price .prefix {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.pricing-card .price .amount {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
.pricing-card.featured .price .amount {
  background: var(--wd-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-card .price .period {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.pricing-card .target {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Button — at top, above features (matches reference design) */
/* Preis-Buttons folgen dem globalen Button-Standard: Pill-Form, gleiche Rundung
   und gleiches Hover-Verhalten wie "LET'S TALK". Sekundär = Outline, die
   hervorgehobene "Beliebt"-Karte bekommt den Verlauf als Primär-Aktion. */
.pricing-card .btn-card,
.pricing-card .pricing-cta {
  display: block; width: 100%; text-align: center;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 600; font-size: 16px; font-family: inherit;
  text-decoration: none; letter-spacing: 0.01em;
  margin-bottom: 28px; cursor: pointer;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 250ms ease, border-color 250ms ease;
}
.pricing-card .btn-card:hover,
.pricing-card .pricing-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: var(--wd-shadow-md);
}
.pricing-card.featured .pricing-cta {
  background: linear-gradient(90deg, #700877 0%, #FF2759 50%, #700877 100%);
  background-size: 220% 100%;
  animation: gradientShift 6s ease-in-out infinite;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(146, 39, 143, 0.45);
}
.pricing-card.featured .pricing-cta:hover {
  background: linear-gradient(90deg, #700877 0%, #FF2759 50%, #700877 100%);
  background-size: 220% 100%;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(146, 39, 143, 0.65);
}
.pricing-card.featured .pricing-cta::after { display: none; }

/* Features block */
.pricing-card .features {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  margin-top: auto;
}
.pricing-card .features h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 14px;
  color: #fff;
}
.pricing-card .features ul {
  list-style: none;
  margin: 0; padding: 0;
}
.pricing-card .features ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.pricing-card .features ul li::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.pricing-card.featured .features ul li {
  color: rgba(255,255,255,0.85);
}
.pricing-card.featured .features ul li::before {
  background: var(--wd-gradient-h);
}

/* Karten-Zeilen über alle drei Spalten ausrichten, damit Buttons und
   Feature-Listen auf einer Linie liegen — auch wenn ein Titel oder Preis
   zweizeilig umbricht. Nur im dreispaltigen Layout sinnvoll. */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .pricing-grid {
      /* Ribbon · Titel · Preis · Beschreibung · Button · Features */
      grid-template-rows: auto auto auto auto auto auto;
      column-gap: 16px;
      row-gap: 0;
    }
    .pricing-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
      row-gap: 0;
    }
    /* Im Flex-Layout schob margin-top:auto die Liste nach unten.
       Im Grid übernimmt das die Zeilenspur, sonst entsteht doppelter Abstand. */
    .pricing-card .features { margin-top: 0; }
    /* Ribbon soll nicht auf volle Spaltenbreite wachsen */
    .pricing-card .ribbon { justify-self: start; }
  }
}

/* Vierspaltige Variante (Software-Seite: Discovery · MVP · Integration · ERP/CRM).
   Schmalere Spalten brauchen etwas kleinere Typo, sonst bricht die Preiszeile. */
@media (min-width: 1001px) {
  .pricing-grid--four {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
  }
  .pricing-grid--four .pricing-card { padding: 30px 24px; }
  .pricing-grid--four .pricing-card h3 { font-size: 23px; }
  .pricing-grid--four .pricing-card .price .amount { font-size: 34px; }
  /* Zusatz ("· je Projekt") immer in die zweite Zeile: In den schmalen Spalten
     würde er sonst mal passen, mal nicht — das sähe nach Zufall aus. */
  .pricing-grid--four .pricing-card .price .period { flex-basis: 100%; }
  .pricing-grid--four .pricing-card .btn-card,
  .pricing-grid--four .pricing-card .pricing-cta {
    font-size: 15.5px; padding: 14px 16px;
  }
  .pricing-grid--four .pricing-card .features ul li { font-size: 14px; }
}
/* Tablet: lieber 2×2 als vier gestapelte Karten.
   Doppelte Klasse, weil die allgemeine Regel ".pricing-grid { 1fr }" weiter
   unten steht und bei gleicher Spezifität sonst gewinnt. */
@media (min-width: 701px) and (max-width: 1000px) {
  .pricing-grid.pricing-grid--four { grid-template-columns: 1fr 1fr; }
}

/* Regie-Hinweis: eigener Block statt Fußnote, weil „ohne Vertrag" ein
   gleichwertiger Einstieg ist und nicht wie eine Randbemerkung wirken soll. */
.pricing-regie {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 30px 34px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--wd-pink);
}
.pricing-regie h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 12px;
}
.pricing-regie p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.pricing-regie strong {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 680px) {
  .pricing-regie { padding: 24px 22px; margin-top: 40px; }
  .pricing-regie h3 { font-size: 18px; }
}

.pricing-note {
  text-align: center;
  margin-top: 28px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .subservice-grid { grid-template-columns: 1fr 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .pillar-case-grid { grid-template-columns: 1fr 1fr; }
  .pillar-case-grid .pillar-case:nth-child(3) { grid-column: span 2; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pillar-hero { padding: 60px 0 80px; }
  .pillar-hero h1 { font-size: 40px; }
  .pillar-hero .lead { font-size: 17px; }
  .subservices, .usecases, .pillar-process, .pillar-cases, .faq, .pricing { padding: 70px 0; }
  .subservice-grid { grid-template-columns: 1fr; }
  .pillar-case-grid { grid-template-columns: 1fr; }
  .pillar-case-grid .pillar-case:nth-child(3) { grid-column: span 1; }
  .subservice { padding: 28px 24px; }
  .subservice h3 { font-size: 20px; }
  .process-step-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 24px 24px; }
  .process-step-row .duration strong { font-size: 18px; }
  .faq-item summary { font-size: 16px; }
  .pricing-card { padding: 28px 24px; }
  .pricing-card .price strong { font-size: 40px; }
}