/* Service landing layouts + CSS mockups */

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% auto auto;
  width: min(48vw, 520px);
  height: min(48vw, 520px);
  background: radial-gradient(circle, color-mix(in srgb, var(--lc-accent) 22%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1 }
.hero-copy .lead { margin-bottom: 1.6em }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-block: 40px 56px }
  .hero-visual { max-width: 520px; margin-inline: auto }
}

.section-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 56ch }
.section-head .lead { margin-bottom: 0 }

.card .tag {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--lc-font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lc-accent-deep);
}
.card p { margin: 0; color: var(--lc-ink-soft); font-size: .95rem }

.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--lc-ease), transform .5s var(--lc-ease);
}
.reveal.is-in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none }
}

/* ---- Mock stage ---- */
.mock-stage {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
}

/* Dashboard */
.mock-dash {
  width: 100%;
  background: var(--lc-card);
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  box-shadow: var(--lc-shadow-lift);
  overflow: hidden;
}
.mock-dash__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.mock-dash__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc-line) }
.mock-dash__dot:nth-child(1) { background: #D98A7A }
.mock-dash__dot:nth-child(2) { background: var(--lc-accent) }
.mock-dash__dot:nth-child(3) { background: var(--lc-success) }
.mock-dash__body { display: grid; grid-template-columns: 72px 1fr; min-height: 240px }
.mock-dash__side {
  border-right: 1px solid var(--lc-line); padding: 14px 10px;
  display: grid; gap: 8px; align-content: start;
}
.mock-dash__nav {
  height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--lc-line) 80%, transparent);
}
.mock-dash__nav.is-on { background: var(--lc-accent); width: 70% }
.mock-dash__main { padding: 16px; display: grid; gap: 12px }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.mock-kpi {
  border: 1px solid var(--lc-line); border-radius: 10px; padding: 10px;
  background: var(--lc-bg);
}
.mock-kpi__v {
  font-family: var(--lc-font-display); font-weight: 800; font-size: 1.15rem; line-height: 1;
}
.mock-kpi__l {
  margin-top: 4px; font-size: .65rem; color: var(--lc-ink-soft);
  font-family: var(--lc-font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.mock-chart {
  height: 96px; border-radius: 10px; border: 1px solid var(--lc-line);
  background:
    linear-gradient(180deg, transparent 0 20%, color-mix(in srgb, var(--lc-line) 45%, transparent) 20% 21%, transparent 21%),
    linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--lc-line) 45%, transparent) 40% 41%, transparent 41%),
    linear-gradient(180deg, transparent 0 60%, color-mix(in srgb, var(--lc-line) 45%, transparent) 60% 61%, transparent 61%),
    linear-gradient(180deg, transparent 0 80%, color-mix(in srgb, var(--lc-line) 45%, transparent) 80% 81%, transparent 81%),
    var(--lc-bg);
  position: relative; overflow: hidden;
}
.mock-chart__line {
  position: absolute; inset: 18px 12px 14px;
  background:
    linear-gradient(135deg, transparent 42%, color-mix(in srgb, var(--lc-accent) 55%, transparent) 42% 58%, transparent 58%),
    radial-gradient(circle at 18% 70%, var(--lc-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 38%, var(--lc-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 52%, var(--lc-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 28%, var(--lc-accent) 0 3px, transparent 4px);
  opacity: .9;
}
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding-top: 8px }
.mock-bars span {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--lc-accent) 70%, var(--lc-surface-3));
}
.mock-bars span:nth-child(1) { height: 35% }
.mock-bars span:nth-child(2) { height: 58% }
.mock-bars span:nth-child(3) { height: 44% }
.mock-bars span:nth-child(4) { height: 78% }
.mock-bars span:nth-child(5) { height: 62% }
.mock-bars span:nth-child(6) { height: 90% }
.mock-bars span:nth-child(7) { height: 70% }

/* Phones */
.mock-phones {
  width: 100%; height: 360px; position: relative;
  display: grid; place-items: center;
}
.phone {
  width: 148px; height: 300px; border-radius: 28px;
  border: 2px solid var(--lc-ink); background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift); position: absolute;
  overflow: hidden;
}
.phone::before {
  content: ""; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%); width: 48px; height: 6px;
  border-radius: 4px; background: var(--lc-ink); z-index: 2;
}
.phone__screen { position: absolute; inset: 0; padding: 36px 14px 16px; display: grid; gap: 8px }
.phone--back { transform: translate(-72px, 18px) rotate(-8deg); opacity: .92; z-index: 1 }
.phone--front { transform: translate(56px, -8px) rotate(6deg); z-index: 2 }
.phone--dark { background: var(--lc-canvas); border-color: var(--lc-canvas-2); color: var(--lc-glow-light) }
.phone--dark .phone-line { background: var(--lc-canvas-line) }
.phone--dark .phone-card { background: var(--lc-canvas-2); border-color: var(--lc-canvas-line) }
.phone-line { height: 8px; border-radius: 4px; background: var(--lc-line) }
.phone-line.w60 { width: 60% }
.phone-line.w40 { width: 40% }
.phone-card {
  border: 1px solid var(--lc-line); border-radius: 12px; padding: 10px;
  background: var(--lc-bg); display: grid; gap: 6px;
}
.phone-pill {
  height: 28px; border-radius: 999px; margin-top: auto;
  background: var(--lc-accent); opacity: .9;
}

/* Neural / AI */
.mock-neural {
  width: 100%; aspect-ratio: 1.15;
  border-radius: 16px; border: 1px solid var(--lc-line);
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--lc-accent) 28%, transparent), transparent 42%),
    radial-gradient(circle at 70% 55%, color-mix(in srgb, var(--lc-accent-deep) 16%, transparent), transparent 40%),
    var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
  position: relative; overflow: hidden;
}
.mock-neural__node {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--lc-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lc-accent) 18%, transparent);
}
.mock-neural__node:nth-child(1) { left: 18%; top: 28% }
.mock-neural__node:nth-child(2) { left: 48%; top: 18% }
.mock-neural__node:nth-child(3) { left: 72%; top: 36% }
.mock-neural__node:nth-child(4) { left: 34%; top: 58% }
.mock-neural__node:nth-child(5) { left: 62%; top: 68% }
.mock-neural__node:nth-child(6) { left: 80%; top: 58% }
.mock-neural__glass {
  position: absolute; right: 10%; bottom: 12%; width: 46%;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--lc-line) 80%, white);
  background: color-mix(in srgb, var(--lc-card) 72%, transparent);
  backdrop-filter: blur(8px); padding: 12px; display: grid; gap: 6px;
}
.mock-neural svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45 }

/* Shop */
.mock-shop .mock-dash__main { grid-template-columns: 1.2fr .8fr; display: grid }
.mock-product {
  border-radius: 12px; border: 1px solid var(--lc-line);
  background: linear-gradient(160deg, var(--lc-surface-2), var(--lc-card));
  min-height: 140px; display: grid; place-items: end start; padding: 14px;
}
.mock-product span {
  font-family: var(--lc-font-display); font-weight: 800; font-size: 1.4rem;
}
.mock-cart { display: grid; gap: 8px }
.mock-cart__row {
  height: 28px; border-radius: 8px; background: var(--lc-bg); border: 1px solid var(--lc-line);
}

/* Artboards */
.mock-artboards {
  width: 100%; height: 340px; position: relative;
}
.artboard {
  position: absolute; background: var(--lc-card); border: 1px solid var(--lc-line);
  border-radius: 12px; box-shadow: var(--lc-shadow-lift); padding: 14px; display: grid; gap: 8px;
}
.artboard--a { width: 58%; height: 58%; left: 0; top: 8%; transform: rotate(-3deg) }
.artboard--b { width: 42%; height: 48%; right: 4%; top: 0; transform: rotate(4deg); z-index: 2 }
.artboard--c { width: 48%; height: 40%; right: 10%; bottom: 4%; transform: rotate(-2deg) }
.swatches { display: flex; gap: 6px }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--lc-line) }
.swatch:nth-child(1) { background: var(--lc-ink) }
.swatch:nth-child(2) { background: var(--lc-accent) }
.swatch:nth-child(3) { background: var(--lc-accent-tint) }
.swatch:nth-child(4) { background: var(--lc-surface-3) }
.type-scale { display: grid; gap: 4px }
.type-scale span:nth-child(1) { font-family: var(--lc-font-display); font-weight: 800; font-size: 1.3rem }
.type-scale span:nth-child(2) { font-size: .85rem; color: var(--lc-ink-soft) }
.type-scale span:nth-child(3) { font-size: .7rem; color: var(--lc-ink-soft-2) }

/* Roadmap / Kanban */
.mock-kanban {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: 16px;
  padding: 14px; box-shadow: var(--lc-shadow-lift);
}
.kanban-col { display: grid; gap: 8px; align-content: start }
.kanban-col__h {
  font-family: var(--lc-font-mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lc-ink-soft); padding: 4px 2px;
}
.kanban-card {
  border: 1px solid var(--lc-line); border-radius: 10px; padding: 10px;
  background: var(--lc-bg); font-size: .78rem; font-weight: 600;
}
.kanban-card em {
  display: block; margin-top: 6px; font-style: normal; font-weight: 500;
  color: var(--lc-ink-soft); font-size: .7rem;
}

/* API */
.mock-api {
  width: 100%; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--lc-line); box-shadow: var(--lc-shadow-lift);
  background: var(--lc-canvas); color: var(--lc-glow-light);
  font-family: var(--lc-font-mono); font-size: .78rem; line-height: 1.55;
}
.mock-api__bar {
  display: flex; gap: 8px; padding: 10px 12px; background: var(--lc-canvas-2);
  border-bottom: 1px solid var(--lc-canvas-line);
}
.mock-api__body { padding: 16px 18px }
.mock-api .kw { color: var(--lc-accent) }
.mock-api .str { color: #C8D4A8 }
.mock-api .muted { color: var(--lc-canvas-muted) }
.mock-api-flow {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.mock-api-flow span {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--lc-canvas-line);
  background: var(--lc-canvas-2); font-size: .7rem;
}
.mock-api-flow i {
  font-style: normal; color: var(--lc-accent); font-size: .8rem;
}

/* Shield / security */
.mock-shield {
  width: 100%; min-height: 320px; border-radius: 16px;
  border: 1px solid var(--lc-line); background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.mock-shield::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lc-accent) 20%, transparent), transparent 55%),
    linear-gradient(var(--lc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lc-line) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  opacity: .35;
}
.shield {
  position: relative; z-index: 1; width: 120px; height: 140px;
  background: linear-gradient(160deg, var(--lc-accent-tint), var(--lc-card));
  border: 2px solid var(--lc-accent);
  clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
  display: grid; place-items: center;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--lc-accent) 12%, transparent);
}
.shield strong {
  font-family: var(--lc-font-display); font-size: 1.6rem; color: var(--lc-accent-deep);
}
.sec-pills {
  position: absolute; z-index: 1; inset: auto 16px 16px 16px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.sec-pills span {
  padding: 6px 10px; border-radius: 999px; background: var(--lc-bg);
  border: 1px solid var(--lc-line); font-size: .72rem; font-weight: 600;
}

/* Monitoring */
.mock-monitor .mock-dash__main { gap: 10px }
.status-row { display: grid; gap: 8px }
.status-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lc-line); background: var(--lc-bg);
}
.status-item i {
  width: 10px; height: 10px; border-radius: 50%; background: var(--lc-success); display: block;
}
.status-item i.warn { background: var(--lc-accent) }
.status-item strong { font-size: .85rem }
.status-item span { font-size: .75rem; color: var(--lc-ink-soft); font-family: var(--lc-font-mono) }

/* Architecture blocks */
.arch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;
}
.arch-block {
  border: 1px solid var(--lc-line); border-radius: 12px; padding: 14px;
  background: color-mix(in srgb, var(--lc-card) 85%, var(--lc-accent-tint));
  font-size: .85rem; font-weight: 700; text-align: center;
}
@media (max-width: 640px) {
  .arch, .mock-kanban { grid-template-columns: 1fr }
  .phone { width: 128px; height: 260px }
  .mock-phones { height: 300px }
}

/* Narrative enhancements from bigpromt */
.story-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.story-nav a {
  text-decoration: none;
  color: var(--lc-ink);
  border: 1px solid var(--lc-line);
  background: color-mix(in srgb, var(--lc-card) 82%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: .86rem;
  display: grid;
  gap: 6px;
  transition: transform var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease);
}
.story-nav a span {
  font-family: var(--lc-font-mono);
  letter-spacing: .08em;
  font-size: .66rem;
  color: var(--lc-ink-soft);
}
.story-nav a:hover,
.story-nav a.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--lc-accent) 55%, var(--lc-line));
  box-shadow: var(--lc-shadow-soft);
}

.section--rhythm-a .section-head { max-width: 62ch; }
.section--rhythm-b .section-head { max-width: 52ch; }
.section--rhythm-c .section-head { max-width: 58ch; }
.section--rhythm-b .display { letter-spacing: -.015em; }

.cards-grid .card--feature {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lc-accent-tint) 70%, white), var(--lc-card));
  border-color: color-mix(in srgb, var(--lc-accent) 45%, var(--lc-line));
}
.cards-grid.grid--3 .card--feature {
  grid-column: span 2;
}
.cards-grid.grid--3 .card--feature h3 {
  font-size: clamp(1.26rem, 2vw, 1.6rem);
  font-family: var(--lc-font-display);
  line-height: 1.04;
}

.pills--editorial .pill {
  padding: 12px 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc-line) 85%, transparent);
}

.steps--editorial .step h4 {
  font-family: var(--lc-font-display);
  letter-spacing: -.01em;
}

.service-page .hero-copy .display {
  max-width: 12ch;
  text-wrap: pretty;
}

.service-page--mobile-app-development .hero::before,
.service-page--ai-solutions-automation .hero::before,
.service-page--cybersecurity .hero::before {
  opacity: .85;
}

/* Service-specific layout variants */
.section--spotlight .cards-grid.grid--3 {
  grid-template-columns: 1.25fr .75fr .75fr;
}
.section--spotlight .cards-grid.grid--3 .card--feature {
  grid-row: span 2;
}
.section--dense-cards .cards-grid {
  gap: 14px;
}
.section--dense-cards .card {
  padding: 22px;
}
.section--studio-cards .cards-grid {
  gap: 26px;
}
.section--studio-cards .card {
  border-style: dashed;
  background: color-mix(in srgb, var(--lc-card) 88%, var(--lc-surface-2));
}
.section--guard-cards .card {
  border-width: 1.5px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--lc-accent-tint) 48%, transparent), transparent 32%),
    var(--lc-card);
}

.section--pill-strip .pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.section--pill-strip .pill {
  justify-content: center;
  min-height: 46px;
}
.section--pill-roadmap .pill {
  position: relative;
  padding-left: 32px;
}
.section--pill-roadmap .pill::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--lc-accent);
}

.section--process-ladder .step:nth-child(2) { margin-top: 14px; }
.section--process-ladder .step:nth-child(3) { margin-top: 28px; }
.section--process-ladder .step:nth-child(4) { margin-top: 42px; }
.section--process-orbit .step .dot {
  border-color: color-mix(in srgb, var(--lc-accent) 58%, var(--lc-line));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--lc-accent) 12%, transparent);
}

.section--tech-engineering .tech-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section--tech-engineering .tech-item {
  min-height: 94px;
  display: grid;
  align-content: center;
}
.section--tech-mobile .tech-item {
  border-radius: 16px;
}

.section--faq-wide .faq details {
  border-width: 1.5px;
  padding-inline: 20px;
}

/* More unique hero dynamics per service */
.service-page--website-development .hero::before {
  width: min(58vw, 620px);
  height: min(58vw, 620px);
  inset: -18% -14% auto auto;
}
.service-page--web-application-development .mock-dash,
.service-page--saas-development .mock-dash,
.service-page--maintenance-technical-support .mock-dash {
  transform: perspective(1200px) rotateX(3deg) rotateY(-3deg);
  transform-origin: 60% 30%;
}
.service-page--mobile-app-development .phone--front {
  transform: translate(44px, -6px) rotate(5deg);
}
.service-page--mobile-app-development .phone--back {
  transform: translate(-40px, 28px) rotate(-8deg) scale(0.96);
}
.service-page--ai-solutions-automation .mock-neural svg {
  opacity: .62;
}
.service-page--ecommerce-development .mock-product {
  min-height: 170px;
}
.service-page--ui-ux-design .artboard {
  border-style: dashed;
}
.service-page--api-development-integrations .mock-api {
  border-color: var(--lc-canvas-line);
}
.service-page--cybersecurity .shield {
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--lc-accent) 14%, transparent),
    0 0 28px color-mix(in srgb, var(--lc-accent) 30%, transparent);
}

@media (max-width: 900px) {
  .cards-grid.grid--3 .card--feature { grid-column: auto; }
  .story-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section--spotlight .cards-grid.grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section--spotlight .cards-grid.grid--3 .card--feature {
    grid-row: auto;
    grid-column: span 2;
  }
  .section--pill-strip .pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section--process-ladder .step:nth-child(n) { margin-top: 0; }
}
@media (max-width: 560px) {
  .story-nav { grid-template-columns: 1fr; }
  .section--pill-strip .pills {
    grid-template-columns: 1fr;
  }
  .section--tech-engineering .tech-grid {
    grid-template-columns: 1fr;
  }
}

/* Signature + hero DNA + motion polish */
.section--signature {
  padding-block: clamp(40px, 6vw, 88px);
}
.signature-panel {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lc-accent-tint) 55%, transparent), transparent 42%),
    var(--lc-card);
  box-shadow: var(--lc-shadow-soft);
}
.signature-copy .lead { margin-bottom: 0; }
.signature-rows {
  display: grid;
  gap: 10px;
}
.signature-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lc-line);
  background: color-mix(in srgb, var(--lc-bg) 70%, white);
}
.signature-row__label {
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.signature-row__value {
  font-size: .95rem;
  font-weight: 700;
}

.hero--editorial { min-height: min(78vh, 760px); }
.hero--editorial .hero-copy .display { max-width: 11ch; font-size: clamp(2.8rem, 6vw, 4.6rem); }
.hero--product .hero-visual { transform: translateY(8px); }
/* signature classes sit on .hero-plane ? column ratios belong on > .hero only */
.hero.hero--immersive { grid-template-columns: .9fr 1.1fr; }
.hero--data .hero-copy .lead { max-width: 42ch; }
.hero--split { align-items: stretch; }
.hero--studio { gap: clamp(40px, 6vw, 80px); }
.hero--story .kicker { margin-bottom: 22px; }
.hero--engineering .hero-visual { filter: saturate(1.05); }
.hero--guard .hero::before,
.hero--guard::before { opacity: .95; }
.hero--ops .mock-dash { border-width: 1.5px; }

.card.is-hot,
.tech-item.is-hot,
.story-nav a.is-hot {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-lift);
}
.pill.is-hot {
  border-color: color-mix(in srgb, var(--lc-accent) 50%, var(--lc-line));
}

.reveal {
  transition:
    opacity .55s var(--lc-ease),
    transform .55s var(--lc-ease);
}

.service-page--website-development .signature-panel {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lc-accent-tint) 70%, transparent), transparent 50%),
    var(--lc-card);
}
.service-page--mobile-app-development .signature-panel {
  border-radius: 24px;
}
.service-page--ai-solutions-automation .signature-row {
  background: color-mix(in srgb, var(--lc-canvas) 4%, var(--lc-card));
}
.service-page--cybersecurity .signature-panel {
  border-color: color-mix(in srgb, var(--lc-accent) 35%, var(--lc-line));
}
.service-page--api-development-integrations .signature-row__label {
  color: var(--lc-accent-deep);
}
.service-page--ui-ux-design .signature-panel {
  border-style: dashed;
}
.service-page--mvp-development .signature-rows {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .signature-panel,
  .hero--immersive {
    grid-template-columns: 1fr;
  }
  .signature-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Chapter 13 DNA section architecture */
.hero--stacked {
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  min-height: min(88vh, 860px);
  align-items: end;
}
.hero--stacked .hero-copy .display {
  max-width: 14ch;
  font-size: clamp(2.9rem, 7vw, 5.2rem);
  line-height: .92;
}
.hero--stacked .hero-visual { max-width: 920px; width: 100%; margin-inline: 0; }
.hero--stacked-soft { grid-template-columns: 1fr; }
.hero.hero--device-stage { grid-template-columns: .85fr 1.15fr; }
.hero--workspace .hero-copy .lead { max-width: 44ch; }
.hero--commerce { align-items: center; }

.mock-layers {
  width: 100%;
  min-height: 320px;
  position: relative;
}
.layer-card {
  position: absolute;
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
  padding: 18px;
  width: 72%;
}
.layer-card--back { left: 0; top: 18%; opacity: .72; transform: rotate(-2deg); }
.layer-card--mid { left: 14%; top: 8%; width: 76%; z-index: 2; }
.layer-card--front { right: 0; bottom: 0; width: 70%; z-index: 3; transform: rotate(1.5deg); }

.journey-mini { display: flex; gap: 8px; margin: 10px 0; }
.journey-mini span {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .65rem; font-family: var(--lc-font-mono);
  background: var(--lc-canvas-2); color: var(--lc-glow-light);
}
.phone-pill--pulse { animation: lc-pulse 1.8s ease-in-out infinite; }
@keyframes lc-pulse { 50% { opacity: .55; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .phone-pill--pulse { animation: none; } }

.workspace-flow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--lc-font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.workspace-flow span {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lc-line); background: var(--lc-bg);
}
.workspace-flow i { font-style: normal; color: var(--lc-accent-deep); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.compare-col {
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  padding: 22px;
  background: var(--lc-card);
}
.compare-col--before { opacity: .86; }
.compare-col--after {
  border-color: color-mix(in srgb, var(--lc-accent) 45%, var(--lc-line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--lc-accent-tint) 55%, white), var(--lc-card));
}
.compare-col ul { margin: 12px 0 0; padding-left: 18px; color: var(--lc-ink-soft); }
.compare-arrow {
  align-self: center;
  font-size: 1.4rem;
  color: var(--lc-accent-deep);
  font-weight: 700;
}

.flow-stack {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.flow-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--lc-line);
  font-family: var(--lc-font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.flow-step span {
  font-family: var(--lc-font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--lc-ink-soft);
  font-weight: 500;
}

.showcase-reel { display: grid; gap: clamp(28px, 5vw, 56px); }
.showcase-scene {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 18px;
  border: 1px solid var(--lc-line);
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-soft);
  min-height: 220px;
}
.showcase-scene .display {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin: .2em 0 .45em;
}
.showcase-meta {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.showcase-scene p { margin: 0; color: var(--lc-ink-soft); max-width: 60ch; }

.growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.growth-item {
  border: 1px solid var(--lc-line);
  border-radius: 14px;
  padding: 20px;
  background: var(--lc-card);
}
.growth-item p { margin: 0; color: var(--lc-ink-soft); font-size: .92rem; }

.chaos-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.chaos-item {
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px dashed var(--lc-line);
  background: color-mix(in srgb, var(--lc-surface-2) 80%, white);
  font-weight: 700;
}

.journey-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
}
.journey-step {
  border: 1px solid var(--lc-line);
  border-radius: 14px;
  padding: 18px;
  background: var(--lc-card);
  display: grid; gap: 10px;
}
.journey-step span {
  font-family: var(--lc-font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--lc-accent-deep);
}

.eco-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.eco-node {
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--lc-line);
  background: var(--lc-card);
  font-weight: 700;
}
.eco-link { color: var(--lc-accent-deep); font-style: normal; }

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); justify-self: center; }
  .chaos-list { grid-template-columns: 1fr; }
  .hero--device-stage { grid-template-columns: 1fr; }
}

/* CMS editor mock */
.cms-bar-label {
  margin-left: auto;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.cms-body { grid-template-columns: 120px 1fr !important; }
.cms-rail { display: grid; gap: 6px; align-content: start; }
.cms-rail__item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .72rem;
  font-family: var(--lc-font-mono);
  letter-spacing: .04em;
  border: 1px solid transparent;
  color: var(--lc-ink-soft);
}
.cms-rail__item.is-on {
  border-color: var(--lc-line);
  background: var(--lc-card);
  color: var(--lc-ink);
  font-weight: 700;
}
.cms-canvas { display: grid; gap: 10px; }
.cms-block {
  border: 1px dashed var(--lc-line);
  border-radius: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--lc-canvas-2) 70%, white);
}
.cms-block--hero {
  min-height: 72px;
  border-style: solid;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lc-accent-tint) 40%, white), var(--lc-card));
}
.cms-block--ghost {
  text-align: center;
  color: var(--lc-ink-soft);
  font-size: .85rem;
  font-weight: 600;
}

/* Per-service DNA atmosphere */
.service-page--website-development {
  --dna-glow: color-mix(in srgb, var(--lc-accent) 12%, transparent);
  background:
    radial-gradient(1200px 480px at 12% -10%, var(--dna-glow), transparent 60%),
    var(--lc-bg);
}
.service-page--website-development .showcase-scene:nth-child(odd) { margin-inline-end: 4%; }
.service-page--website-development .showcase-scene:nth-child(even) { margin-inline-start: 4%; }

.service-page--web-application-development .section--modules .growth-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-page--web-application-development .growth-item {
  min-height: 140px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lc-surface-2) 55%, white), var(--lc-card));
}

.service-page--mobile-app-development .hero--device-stage .hero-visual {
  justify-self: end;
}
.service-page--mobile-app-development .journey-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-page--ai-solutions-automation .hero--cms .display { max-width: 16ch; }
.service-page--ai-solutions-automation .section--chaos .chaos-item {
  border-style: solid;
  background: var(--lc-card);
}

.service-page--saas-development .flow-step strong { letter-spacing: -.03em; }
.service-page--saas-development .section--modules .growth-item:first-child {
  border-color: color-mix(in srgb, var(--lc-accent) 40%, var(--lc-line));
}

.service-page--ecommerce-development .chaos-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-page--ecommerce-development .flow-stack .flow-step:last-child { border-bottom: 0; }

.service-page--ui-ux-design {
  background:
    linear-gradient(180deg, #F3EFE7 0%, var(--lc-bg) 42%);
}
.service-page--ui-ux-design .showcase-scene {
  background: transparent;
  box-shadow: none;
  border-left: 3px solid var(--lc-accent);
  border-radius: 0 16px 16px 0;
}

.service-page--mvp-development .journey-track {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.service-page--mvp-development .journey-step {
  border-radius: 10px;
  background: color-mix(in srgb, var(--lc-accent-tint) 28%, white);
}

.service-page--api-development-integrations .eco-row {
  justify-content: flex-start;
  gap: 8px 14px;
  padding: 22px;
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  background: var(--lc-card);
  font-family: var(--lc-font-mono);
}
.service-page--api-development-integrations .eco-node {
  border-radius: 8px;
  font-family: var(--lc-font-mono);
  font-size: .85rem;
}

.service-page--cybersecurity {
  background:
    radial-gradient(900px 420px at 88% 0%, color-mix(in srgb, #2f3b33 8%, transparent), transparent 55%),
    var(--lc-bg);
}
.service-page--cybersecurity .compare-col--after,
.service-page--cybersecurity .growth-item {
  border-color: color-mix(in srgb, #3d4a40 22%, var(--lc-line));
}

.service-page--maintenance-technical-support .section--modules .growth-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-page--maintenance-technical-support .growth-item h3 {
  font-family: var(--lc-font-mono);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* DNA motion states */
.flow-step,
.journey-step,
.showcase-scene,
.chaos-item,
.eco-node,
.growth-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
.flow-step.is-in,
.journey-step.is-in,
.showcase-scene.is-in,
.chaos-item.is-in,
.eco-node.is-in,
.growth-item.is-in {
  opacity: 1;
  transform: none;
}
.layer-card {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
}
.service-page--website-development.is-ready .layer-card--back { transform: rotate(-2deg) translateY(0); }
.service-page--website-development.is-ready .layer-card--mid { transform: translateY(0); }
.service-page--website-development.is-ready .layer-card--front { transform: rotate(1.5deg) translateY(0); }

@media (max-width: 900px) {
  .service-page--ecommerce-development .chaos-list,
  .service-page--mobile-app-development .journey-track,
  .service-page--mvp-development .journey-track,
  .service-page--maintenance-technical-support .section--modules .growth-grid,
  .service-page--web-application-development .section--modules .growth-grid {
    grid-template-columns: 1fr;
  }
  .cms-body { grid-template-columns: 1fr !important; }
  .cms-rail { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .service-page--website-development .showcase-scene:nth-child(odd),
  .service-page--website-development .showcase-scene:nth-child(even) {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-step,
  .journey-step,
  .showcase-scene,
  .chaos-item,
  .eco-node,
  .growth-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========== Design craft pass ? composition > cards ========== */

.hero-plane {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(92vh, 900px);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* signature classes live on plane ? never 2-col the plane itself */
  align-items: stretch;
  border-bottom: 1px solid color-mix(in srgb, var(--lc-line) 80%, transparent);
}
.hero-plane__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--lc-surface-2) 70%, transparent) 0%, transparent 48%),
    radial-gradient(900px 520px at 78% 18%, color-mix(in srgb, var(--lc-accent) 16%, transparent), transparent 62%),
    linear-gradient(180deg, #F9F7F2 0%, transparent 70%);
  pointer-events: none;
}
.hero-plane > .hero {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: inherit;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
  align-items: center;
}
.hero-plane.hero--stacked > .hero,
.hero-plane.hero--stacked-soft > .hero {
  grid-template-columns: 1fr;
  align-content: end;
  gap: clamp(28px, 5vw, 52px);
}
.hero-plane.hero--stacked .hero-copy .display,
.hero-plane.hero--editorial .hero-copy .display {
  max-width: 13ch;
  font-size: clamp(3rem, 7.2vw, 5.4rem);
  line-height: .9;
}
.hero-plane.hero--immersive > .hero,
.hero-plane.hero--device-stage > .hero {
  grid-template-columns: .9fr 1.1fr;
}
.hero-plane.hero--studio > .hero { gap: clamp(36px, 6vw, 72px); }
.hero-plane.hero--commerce > .hero { align-items: center; }

.brand-signal {
  margin: 0 0 18px;
  font-family: var(--lc-font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -.03em;
  color: var(--lc-ink);
  line-height: 1;
}
.brand-signal span { color: var(--lc-accent-deep); }

.hero-copy .lead {
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.hero-copy .cta-row { margin-top: 8px; }

.hero-visual { position: relative; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 12% -6% -8% 8%;
  border-radius: 28px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--lc-accent-tint) 55%, transparent), transparent 55%);
  z-index: -1;
  filter: blur(2px);
}

.section--story {
  padding-block: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--lc-line);
  background: color-mix(in srgb, var(--lc-surface-2) 55%, transparent);
}
.story-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
  background: transparent;
}
.story-nav a {
  flex: 1 0 auto;
  min-width: 140px;
  text-decoration: none;
  color: var(--lc-ink-soft);
  border: 0;
  border-right: 1px solid var(--lc-line);
  background: transparent;
  border-radius: 0;
  padding: 16px 18px;
  font-weight: 600;
  font-size: .84rem;
  display: grid;
  gap: 6px;
  box-shadow: none;
  transition: color var(--lc-dur-fast) var(--lc-ease), background var(--lc-dur-fast) var(--lc-ease);
}
.story-nav a:last-child { border-right: 0; }
.story-nav a span {
  font-family: var(--lc-font-mono);
  letter-spacing: .1em;
  font-size: .62rem;
  color: var(--lc-ink-soft-2);
}
.story-nav a:hover,
.story-nav a.is-active,
.story-nav a.is-hot {
  transform: none;
  box-shadow: none;
  color: var(--lc-ink);
  background: color-mix(in srgb, var(--lc-accent-tint) 45%, transparent);
  border-color: var(--lc-line);
}
.story-nav a.is-active span { color: var(--lc-accent-deep); }

.signature-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(8px, 2vw, 16px) 0;
  background: transparent;
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
}
.signature-copy .display {
  font-size: clamp(2rem, 4vw, 3.1rem);
  max-width: 16ch;
}
.signature-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lc-line);
  border-radius: 0;
  padding: 14px 0;
}
.signature-rows .signature-row:last-child { border-bottom: 0; }

.compare-grid { gap: clamp(20px, 4vw, 40px); }
.compare-col {
  border: 0;
  border-radius: 0;
  padding: 8px 0 0;
  background: transparent;
  box-shadow: none;
}
.compare-col--before { opacity: 1; border-top: 2px solid var(--lc-line); }
.compare-col--after {
  border-top: 2px solid var(--lc-accent);
  background: transparent;
}
.compare-col h3 {
  font-family: var(--lc-font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.02em;
}
.compare-col ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.compare-col li {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lc-line) 75%, transparent);
  color: var(--lc-ink-soft);
  font-size: 1.02rem;
}
.compare-col--after li { color: var(--lc-ink); font-weight: 600; }
.compare-arrow {
  font-family: var(--lc-font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--lc-accent-deep);
}

.flow-step {
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--lc-line);
  grid-template-columns: 72px 1fr;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}
.flow-step:first-child { border-top: 1px solid var(--lc-line); }
.flow-step span { font-size: .72rem; color: var(--lc-accent-deep); }

.showcase-scene {
  padding: clamp(32px, 5vw, 64px) 0;
  border: 0;
  border-top: 1px solid var(--lc-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}
.showcase-reel .showcase-scene:last-child { border-bottom: 1px solid var(--lc-line); }
.showcase-scene .display {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 18ch;
}
.showcase-meta { margin-bottom: 8px; }

.growth-item {
  border: 0;
  border-top: 2px solid var(--lc-line);
  border-radius: 0;
  background: transparent;
  padding: 20px 4px 8px;
  box-shadow: none;
}
.growth-item h3 {
  font-family: var(--lc-font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -.015em;
}
.section--modules .growth-item:hover,
.section--growth .growth-item:hover,
.growth-item.is-hot {
  transform: none;
  box-shadow: none;
  border-top-color: var(--lc-accent);
}

.chaos-item {
  border: 0;
  border-left: 3px solid var(--lc-line);
  border-radius: 0;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--lc-font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -.015em;
}

.journey-step {
  border: 0;
  border-top: 2px solid var(--lc-accent);
  border-radius: 0;
  background: transparent;
  padding: 18px 4px;
}

.eco-node {
  border-radius: 10px;
  background: color-mix(in srgb, var(--lc-surface-2) 70%, white);
}

.service-page .section--alt {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc-surface-2) 92%, white), var(--lc-surface-2));
}

.mock-stage { min-height: 360px; }
.mock-dash, .mock-api, .mock-shield, .mock-kanban { border-radius: 18px; }

.hero-plane.hero--stacked .hero-visual { max-width: 920px; width: 100%; margin-inline: 0; }
.hero-plane.hero--editorial { min-height: min(90vh, 880px); }

.service-page--ui-ux-design .showcase-scene {
  background: transparent;
  box-shadow: none;
  border-left: 0;
  border-radius: 0;
  border-top: 1px solid var(--lc-line);
  padding-left: 0;
}
.service-page--ui-ux-design .showcase-scene .display {
  border-left: 3px solid var(--lc-accent);
  padding-left: 18px;
}
.service-page--mvp-development .journey-step {
  background: transparent;
}
.service-page--web-application-development .growth-item {
  background: transparent;
  min-height: 0;
}
.service-page--api-development-integrations .eco-row {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lc-line);
  border-bottom: 1px solid var(--lc-line);
  border-radius: 0;
  padding: 28px 0;
}

@media (max-width: 960px) {
  .hero-plane { min-height: 0; }
  .hero-plane.hero--immersive > .hero,
  .hero-plane.hero--device-stage > .hero { grid-template-columns: 1fr; }
  .brand-signal { font-size: 1.25rem; }
  .hero-visual::before { display: none; }
}
@media (max-width: 560px) {
  .story-nav a { min-width: 120px; }
}

.hero-enter {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.hero-enter.is-in { opacity: 1; transform: none; }
.hero-plane__wash { will-change: transform; transition: transform .1s linear; }
@media (prefers-reduced-motion: reduce) {
  .hero-enter { opacity: 1; transform: none; transition: none; }
  .hero-plane__wash { transition: none; }
}

/* ========== Mobile / Commerce / API craft ========== */

/* Mobile device stage */
.mock-phones--live {
  height: 420px;
  perspective: 1200px;
}
.device-glow {
  position: absolute;
  width: min(70%, 280px);
  height: min(70%, 280px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lc-accent) 28%, transparent), transparent 68%);
  filter: blur(8px);
  z-index: 0;
}
.phone-status {
  display: flex; gap: 4px; margin-bottom: 6px;
}
.phone-status span {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--lc-glow-light) 55%, transparent);
}
.phone-status--light span { background: var(--lc-line); }
.phone-title {
  margin: 0 0 4px;
  font-family: var(--lc-font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.02em;
  color: var(--lc-ink);
}
.phone-card--accent {
  border-color: color-mix(in srgb, var(--lc-accent) 45%, var(--lc-line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--lc-accent-tint) 55%, white), var(--lc-bg));
}
.phone-metric {
  display: block;
  margin-top: 8px;
  font-family: var(--lc-font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-accent-deep);
}
.phone-feed { display: grid; gap: 5px; }
.phone-feed i {
  display: block; height: 18px; border-radius: 6px;
  background: color-mix(in srgb, var(--lc-canvas-2) 70%, transparent);
}
.phone-pill--pulse {
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: var(--lc-ink);
  letter-spacing: .02em;
}
.device-caption {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.device-caption span {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--lc-line);
  background: color-mix(in srgb, var(--lc-card) 88%, transparent);
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}

.service-page--mobile-app-development .hero-plane {
  min-height: min(100vh, 920px);
}
.service-page--mobile-app-development .hero-plane__wash {
  background:
    radial-gradient(820px 480px at 78% 28%, color-mix(in srgb, var(--lc-accent) 20%, transparent), transparent 62%),
    linear-gradient(180deg, #F8F5EE 0%, transparent 72%);
}
.service-page--mobile-app-development .hero-plane.hero--device-stage > .hero {
  max-width: min(1280px, 100%);
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-block: clamp(56px, 8vh, 96px) clamp(64px, 9vh, 112px);
  overflow: visible;
}
.service-page--mobile-app-development .hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 34rem;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-page--mobile-app-development .hero-copy .brand-signal {
  margin-bottom: 22px;
}
.service-page--mobile-app-development .hero-copy .kicker {
  margin-bottom: 18px;
}
.service-page--mobile-app-development .hero-copy .display {
  max-width: 14ch;
  font-size: clamp(2.7rem, 4.8vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
.service-page--mobile-app-development .hero-copy .display .accent-word {
  white-space: nowrap;
}
.service-page--mobile-app-development .hero-copy .lead {
  max-width: 38ch;
  margin-bottom: 1.75em;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.45;
}
.service-page--mobile-app-development .hero-visual {
  position: relative;
  z-index: 1;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  min-width: 0;
  min-height: 560px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
}
.service-page--mobile-app-development .hero-visual::before {
  inset: 8% 4% 4% 8%;
}
.service-page--mobile-app-development .mock-phones--live {
  position: relative;
  height: 560px;
  width: min(100%, 560px);
  max-width: none;
  margin: 0 auto;
}
.service-page--mobile-app-development .phone {
  width: 236px;
  height: 484px;
  border-radius: 42px;
  border-width: 2.5px;
}
.service-page--mobile-app-development .phone::before {
  width: 72px;
  height: 8px;
  top: 14px;
}
.service-page--mobile-app-development .phone__screen {
  padding: 50px 18px 22px;
  gap: 12px;
}
.service-page--mobile-app-development .phone--front {
  transform: translate(44px, -6px) rotate(5deg);
  box-shadow: var(--lc-shadow-lift), 0 32px 64px rgba(28, 40, 48, 0.16);
}
.service-page--mobile-app-development .phone--back {
  transform: translate(-40px, 28px) rotate(-8deg) scale(0.96);
}
.service-page--mobile-app-development .phone-title {
  font-size: 1.05rem;
}
.service-page--mobile-app-development .phone-title--light {
  color: var(--lc-glow-light);
}
.service-page--mobile-app-development .device-glow {
  width: min(78%, 340px);
  height: min(78%, 340px);
  left: 55%;
  top: 45%;
  transform: translate(-50%, -50%);
}
.service-page--mobile-app-development .section--story { display: none; }
.service-page--mobile-app-development .faq details {
  border-width: 1.5px;
  padding: 4px 18px;
}
.service-page--mobile-app-development .faq summary {
  font-size: 1.05rem;
  padding-block: 16px;
}
.service-page--mobile-app-development .faq details p {
  max-width: 68ch;
  line-height: 1.55;
  padding-bottom: 4px;
}
.service-page--mobile-app-development .steps--editorial {
  gap: 18px;
}
.service-page--mobile-app-development .steps--editorial .step p {
  max-width: 42ch;
}
.service-page--mobile-app-development .journey-track {
  gap: 0;
}
.service-page--mobile-app-development .journey-step {
  position: relative;
  padding-right: 18px;
}
.service-page--mobile-app-development .journey-step:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: 0; top: 22px;
  color: var(--lc-accent-deep);
  font-weight: 700;
}

.mock-phones--live.is-floating .phone--front {
  animation: lc-float-a 4.2s ease-in-out infinite;
}
.mock-phones--live.is-floating .phone--back {
  animation: lc-float-b 4.8s ease-in-out infinite;
}
@keyframes lc-float-a {
  0%, 100% { transform: translate(44px, -6px) rotate(5deg); }
  50% { transform: translate(44px, -16px) rotate(4deg); }
}
@keyframes lc-float-b {
  0%, 100% { transform: translate(-40px, 28px) rotate(-8deg) scale(0.96); }
  50% { transform: translate(-40px, 18px) rotate(-7deg) scale(0.96); }
}

/* E-commerce shop stage */
.shop-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 14px;
  align-items: stretch;
}
.shop-hero-card {
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
  display: grid;
  grid-template-rows: 1.2fr auto;
  min-height: 340px;
}
.shop-hero-card__media {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lc-accent-tint) 70%, white), transparent 55%),
    linear-gradient(20deg, var(--lc-surface-3), var(--lc-surface-2));
  min-height: 200px;
  position: relative;
}
.shop-hero-card__media::after {
  content: "";
  position: absolute;
  inset: auto 18% 18% 18%;
  height: 42%;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lc-ink) 8%, transparent);
}
.shop-hero-card__meta { padding: 18px 20px 20px; }
.shop-tag {
  font-family: var(--lc-font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-accent-deep);
}
.shop-hero-card__meta h3 {
  margin: 8px 0 4px;
  font-family: var(--lc-font-display);
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.shop-hero-card__meta p {
  margin: 0;
  font-family: var(--lc-font-mono);
  font-size: .85rem;
  color: var(--lc-ink-soft);
}
.shop-rail {
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  background: var(--lc-card);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-shadow: var(--lc-shadow-soft);
}
.shop-rail__h {
  font-family: var(--lc-font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.shop-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 6px;
  border-top: 1px solid var(--lc-line);
  font-size: .9rem;
}
.shop-cta {
  display: grid; place-items: center;
  height: 40px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--lc-ink);
}
.shop-path {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.shop-path i { font-style: normal; color: var(--lc-accent-deep); }

.service-page--ecommerce-development .hero-plane__wash {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--lc-accent-tint) 45%, transparent) 0%, transparent 45%),
    radial-gradient(600px 360px at 90% 10%, color-mix(in srgb, var(--lc-surface-3) 90%, transparent), transparent 55%);
}
.service-page--ecommerce-development .hero-copy .display { max-width: 12ch; }
.service-page--ecommerce-development .chaos-item {
  border-left-color: color-mix(in srgb, var(--lc-accent) 55%, var(--lc-line));
}
.service-page--ecommerce-development .section--flow .flow-step strong {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
}

/* API engineering stage */
.mock-api-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr .75fr;
  gap: 12px;
  align-items: stretch;
}
.mock-api-stage .mock-api { margin: 0; }
.api-tab {
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-canvas-muted);
}
.api-tab.is-on {
  background: var(--lc-canvas-2);
  color: var(--lc-glow-light);
}
.api-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.api-chip {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lc-success) 28%, transparent);
  color: #B7D7C4;
  font-size: .65rem;
}
.api-side {
  border-radius: 18px;
  border: 1px solid var(--lc-canvas-line);
  background: var(--lc-canvas-2);
  color: var(--lc-glow-light);
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  font-family: var(--lc-font-mono);
  font-size: .72rem;
}
.api-side__row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lc-canvas-line);
  background: var(--lc-canvas);
}
.api-side__row strong { color: var(--lc-accent); font-weight: 600; }
.api-side__row--warn strong { color: #E2C08D; }

.service-page--api-development-integrations .hero-plane__wash {
  background:
    radial-gradient(700px 400px at 85% 20%, color-mix(in srgb, #1C2830 8%, transparent), transparent 55%),
    linear-gradient(180deg, #F3F0EA 0%, transparent 65%);
}
.service-page--api-development-integrations .hero-copy .display { max-width: 14ch; }
.service-page--api-development-integrations .section--modules .growth-item {
  border-top-width: 2px;
}
.service-page--api-development-integrations .section--modules .growth-item:nth-child(1) { border-top-color: var(--lc-accent); }
.service-page--api-development-integrations .section--modules .growth-item:nth-child(2) { border-top-color: color-mix(in srgb, var(--lc-accent) 70%, var(--lc-line)); }
.service-page--api-development-integrations .section--modules .growth-item:nth-child(3) { border-top-color: color-mix(in srgb, var(--lc-accent) 45%, var(--lc-line)); }

@media (max-width: 900px) {
  .shop-stage,
  .mock-api-stage {
    grid-template-columns: 1fr;
  }
  .mock-phones--live { height: 360px; }
  .service-page--mobile-app-development .hero-plane.hero--device-stage > .hero {
    grid-template-columns: 1fr;
  }
  .service-page--mobile-app-development .journey-step:not(:last-child)::after {
    display: none;
  }
}

/* ========== SaaS / Cyber / UI-UX / MVP craft ========== */

/* SaaS product shell */
.saas-shell {
  width: 100%;
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
}
.saas-shell__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.saas-shell__title {
  margin-left: 6px;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.saas-shell__plan {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lc-accent);
  color: var(--lc-ink);
  font-size: .68rem;
  font-weight: 700;
}
.saas-shell__body {
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 280px;
}
.saas-nav {
  border-right: 1px solid var(--lc-line);
  padding: 14px 12px;
  display: grid; gap: 10px; align-content: start;
}
.saas-nav i {
  display: block; height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--lc-line) 85%, transparent);
}
.saas-nav i.is-on { background: var(--lc-accent); width: 72%; }
.saas-main { padding: 16px; display: grid; gap: 14px; }
.saas-loop {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.saas-loop span {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--lc-line);
  background: var(--lc-bg);
}
.saas-loop span.is-hot {
  border-color: color-mix(in srgb, var(--lc-accent) 55%, var(--lc-line));
  background: color-mix(in srgb, var(--lc-accent-tint) 55%, white);
  color: var(--lc-accent-deep);
  font-weight: 700;
}
.saas-loop i { font-style: normal; color: var(--lc-accent-deep); }
.saas-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.saas-panel {
  border: 1px solid var(--lc-line);
  border-radius: 12px;
  padding: 12px;
  background: var(--lc-bg);
}
.saas-panel strong { display: block; font-size: .88rem; margin-bottom: 4px; }
.saas-panel em {
  font-style: normal;
  font-size: .72rem;
  color: var(--lc-ink-soft);
  font-family: var(--lc-font-mono);
}

.service-page--saas-development .hero-plane__wash {
  background:
    radial-gradient(680px 380px at 88% 18%, color-mix(in srgb, var(--lc-accent) 14%, transparent), transparent 58%),
    linear-gradient(180deg, #F7F4EE 0%, transparent 70%);
}
.service-page--saas-development .hero-copy .display { max-width: 11ch; }
.service-page--saas-development .section--flow .flow-step:nth-child(4) strong {
  color: var(--lc-accent-deep);
}

/* Cyber quiet enterprise */
.mock-shield--quiet {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lc-surface-2) 80%, white), var(--lc-card));
}
.mock-shield--quiet::before { opacity: .18; }
.shield-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--lc-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--lc-line) 55%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .35;
  pointer-events: none;
}
.shield {
  display: grid; place-items: center; gap: 2px;
  z-index: 2;
}
.shield span {
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lc-accent-deep);
}
.sec-layers {
  position: absolute;
  z-index: 2;
  left: 16px; right: 16px; top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sec-layer {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lc-line);
  background: color-mix(in srgb, var(--lc-card) 88%, transparent);
  display: grid; gap: 2px;
}
.sec-layer span {
  font-family: var(--lc-font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--lc-ink-soft);
}
.sec-layer strong { font-size: .78rem; }

.service-page--cybersecurity .hero-plane__wash {
  background:
    radial-gradient(620px 360px at 80% 12%, color-mix(in srgb, #2f3b33 7%, transparent), transparent 55%),
    linear-gradient(180deg, #F4F2EC 0%, transparent 68%);
}
.service-page--cybersecurity .hero-copy .display { max-width: 13ch; }
.service-page--cybersecurity .chaos-item {
  border-left-color: color-mix(in srgb, #3d4a40 40%, var(--lc-line));
}
.service-page--cybersecurity .shield {
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--lc-accent) 10%, transparent),
    var(--lc-shadow-soft);
}

/* UI/UX studio */
.mock-artboards--studio {
  height: 380px;
  border: 1px dashed var(--lc-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lc-surface-2) 55%, white), var(--lc-bg));
  padding: 18px 18px 48px;
}
.studio-rail {
  position: absolute;
  left: 14px; top: 18px; bottom: 56px;
  width: 28px;
  display: grid; gap: 8px; align-content: start;
}
.studio-rail span {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--lc-line);
  background: var(--lc-card);
}
.studio-rail span:nth-child(1) { background: var(--lc-ink); }
.studio-rail span:nth-child(2) { background: var(--lc-accent); }
.studio-rail span:nth-child(3) { background: var(--lc-accent-tint); }
.artboard__label {
  font-family: var(--lc-font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
  margin-bottom: 4px;
}
.studio-flow {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.studio-flow i { font-style: normal; color: var(--lc-accent-deep); }
.mock-artboards--studio .artboard--a { left: 52px; }
.mock-artboards--studio .artboard--b { right: 18px; }
.mock-artboards--studio .artboard--c { right: 28px; bottom: 52px; }

.service-page--ui-ux-design .hero-plane__wash {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--lc-surface-3) 55%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, #F5F1E9 0%, transparent 70%);
}
.service-page--ui-ux-design .hero-copy .display { max-width: 12ch; }
.service-page--ui-ux-design .section--flow .flow-step {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

/* MVP evolution */
.mock-mvp {
  width: 100%;
  display: grid;
  gap: 12px;
}
.mvp-evolve {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mvp-evolve span {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lc-line);
  background: var(--lc-card);
  color: var(--lc-ink-soft);
}
.mvp-evolve span.is-on {
  background: var(--lc-accent);
  border-color: var(--lc-accent);
  color: var(--lc-ink);
  font-weight: 700;
}
.mvp-evolve i { font-style: normal; color: var(--lc-accent-deep); }
.kanban-card--active {
  border-color: color-mix(in srgb, var(--lc-accent) 50%, var(--lc-line));
  background: color-mix(in srgb, var(--lc-accent-tint) 45%, white);
}
.service-page--mvp-development .mock-kanban {
  background: color-mix(in srgb, var(--lc-card) 92%, var(--lc-accent-tint));
}

.service-page--mvp-development .hero-plane__wash {
  background:
    radial-gradient(560px 320px at 18% 20%, color-mix(in srgb, var(--lc-accent) 12%, transparent), transparent 55%),
    linear-gradient(180deg, #F8F5EF 0%, transparent 70%);
}
.service-page--mvp-development .hero-copy .display { max-width: 12ch; }
.service-page--mvp-development .journey-step:nth-child(3) {
  border-top-color: var(--lc-accent-deep);
  background: color-mix(in srgb, var(--lc-accent-tint) 35%, transparent);
}

@media (max-width: 900px) {
  .saas-panels { grid-template-columns: 1fr; }
  .sec-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-artboards--studio { height: 420px; }
}

/* ========== Website / Web App / CMS / Maintenance craft ========== */

/* Website layers */
.mock-layers--site {
  min-height: 380px;
  padding-top: 42px;
}
.site-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--lc-line);
  border-radius: 12px 12px 0 0;
  background: var(--lc-surface-2);
  z-index: 4;
}
.site-chrome__url {
  margin-left: 6px;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--lc-ink-soft);
}
.layer-tag {
  font-family: var(--lc-font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-accent-deep);
  margin-bottom: 8px;
}
.mock-layers--site .layer-card--back { top: 22%; }
.mock-layers--site .layer-card--mid { top: 16%; }
.mock-layers--site .layer-card--front { bottom: 8%; }

.service-page--website-development .hero-plane.hero--stacked > .hero {
  gap: clamp(24px, 4vw, 40px);
}
.service-page--website-development .compare-col--after {
  border-top-width: 3px;
}

/* Web app OS */
.webapp-shell {
  width: 100%;
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
}
.webapp-shell__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.webapp-shell__title {
  margin-left: 6px;
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.webapp-role {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--lc-line);
  font-size: .68rem;
  font-weight: 700;
  color: var(--lc-accent-deep);
}
.webapp-shell__body {
  display: grid;
  grid-template-columns: 120px 1fr;
  min-height: 280px;
}
.webapp-side {
  border-right: 1px solid var(--lc-line);
  padding: 12px;
  display: grid; gap: 6px; align-content: start;
  background: color-mix(in srgb, var(--lc-surface-2) 70%, white);
}
.webapp-side__item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--lc-ink-soft);
}
.webapp-side__item.is-on {
  background: var(--lc-card);
  color: var(--lc-ink);
  border: 1px solid var(--lc-line);
}
.webapp-main { padding: 16px; display: grid; gap: 12px; }
.webapp-banner {
  font-family: var(--lc-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.webapp-table { display: grid; gap: 8px; }
.webapp-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lc-line);
  background: var(--lc-bg);
  font-size: .88rem;
}
.webapp-row strong { color: var(--lc-success); font-size: .78rem; font-family: var(--lc-font-mono); }
.webapp-row--warn strong { color: var(--lc-accent-deep); }

.service-page--web-application-development .hero-plane__wash {
  background:
    radial-gradient(640px 360px at 85% 20%, color-mix(in srgb, var(--lc-accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, #F6F3ED 0%, transparent 70%);
}
.service-page--web-application-development .hero-copy .display { max-width: 12ch; }
.service-page--web-application-development .section--chaos .chaos-item {
  border-left-width: 3px;
  border-left-color: color-mix(in srgb, var(--lc-accent) 40%, var(--lc-line));
}

/* CMS live editor */
.cms-live {
  margin-left: auto;
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-success);
}
.cms-block__handle {
  width: 28px; height: 4px;
  border-radius: 2px;
  background: var(--lc-line);
  margin-bottom: 10px;
}
.cms-block {
  background: color-mix(in srgb, var(--lc-surface-2) 55%, white);
  position: relative;
}
.workspace-flow span.is-hot {
  border-color: color-mix(in srgb, var(--lc-accent) 50%, var(--lc-line));
  background: color-mix(in srgb, var(--lc-accent-tint) 50%, white);
  color: var(--lc-accent-deep);
  font-weight: 700;
}
.mock-cms--live {
  box-shadow: var(--lc-shadow-lift);
  transform: perspective(1200px) rotateX(2deg) rotateY(-2deg);
  transform-origin: 70% 20%;
}

.service-page--ai-solutions-automation .hero-plane__wash {
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--lc-accent-tint) 40%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, #F7F4EE 0%, transparent 68%);
}
.service-page--ai-solutions-automation .hero-copy .display { max-width: 15ch; }

/* Maintenance ops status */
.ops-shell {
  width: 100%;
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--lc-card);
  box-shadow: var(--lc-shadow-lift);
}
.ops-shell__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.ops-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lc-line);
}
.ops-dot.is-ok {
  background: var(--lc-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc-success) 18%, transparent);
}
.ops-shell__title {
  font-family: var(--lc-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-ink);
  font-weight: 600;
}
.ops-shell__ago {
  margin-left: auto;
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  color: var(--lc-ink-soft);
  letter-spacing: .04em;
}
.ops-shell__body { padding: 18px; display: grid; gap: 14px; }
.ops-hero { display: grid; gap: 4px; }
.ops-hero strong {
  font-family: var(--lc-font-display);
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
.ops-hero span { color: var(--lc-ink-soft); font-size: .92rem; }
.ops-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ops-meta span {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lc-line);
  background: var(--lc-bg);
  font-family: var(--lc-font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}

.service-page--maintenance-technical-support .hero-plane__wash {
  background:
    radial-gradient(560px 300px at 78% 18%, color-mix(in srgb, var(--lc-success) 8%, transparent), transparent 55%),
    linear-gradient(180deg, #F5F3ED 0%, transparent 70%);
}
.service-page--maintenance-technical-support .hero-copy .display { max-width: 13ch; }
.service-page--maintenance-technical-support .section--modules .growth-item:nth-child(1) {
  border-top-color: var(--lc-success);
}

@media (max-width: 900px) {
  .webapp-shell__body { grid-template-columns: 1fr; }
  .webapp-side { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--lc-line); }
  .mock-cms--live { transform: none; }
}

/* ========== Ch.11?12: performance + responsive composition ========== */

.mock-phones--live.is-floating .phone--front {
  animation: lc-float-a 4.2s ease-in-out infinite;
}
.mock-phones--live.is-floating .phone--back {
  animation: lc-float-b 4.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mock-phones--live.is-floating .phone--front,
  .mock-phones--live.is-floating .phone--back { animation: none; }
}

/* Mobile = new composition, not shrunk desktop */
@media (max-width: 960px) {
  .hero-plane {
    min-height: 0;
    border-bottom: 0;
  }
  .hero-plane > .hero {
    padding-block: 28px 36px;
    gap: 28px;
  }
  .hero-plane.hero--stacked .hero-copy .display,
  .hero-plane.hero--editorial .hero-copy .display,
  .service-page .hero-copy .display {
    max-width: 11ch;
    font-size: clamp(2.55rem, 11vw, 3.6rem);
    line-height: .92;
  }
  .brand-signal { font-size: 1.2rem; margin-bottom: 12px; }
  .hero-copy .lead {
    max-width: 34ch;
    font-size: 1.05rem;
    margin-bottom: 1.2em;
  }
  .cta-row .btn--lg {
    width: 100%;
    min-height: 52px;
  }
  .cta-row { width: 100%; }
  .hero-visual {
    max-width: none;
    margin-inline: 0;
  }
  .hero-visual::before { display: none; }

  /* Focused mockups on mobile ? one scenario */
  .mock-phones--live {
    height: 320px;
  }
  .device-caption { display: none; }
  .phone--back { opacity: .55; transform: translate(-48px, 28px) scale(.88) rotate(-8deg) !important; }
  .phone--front { transform: translate(36px, -4px) rotate(5deg) !important; }
  .mock-phones--live.is-floating .phone--front,
  .mock-phones--live.is-floating .phone--back { animation: none; }

  .service-page--mobile-app-development .hero-plane.hero--device-stage > .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 36px 48px;
  }
  .service-page--mobile-app-development .hero-copy {
    max-width: none;
  }
  .service-page--mobile-app-development .hero-copy .display {
    max-width: 15ch;
    font-size: clamp(2.45rem, 9.5vw, 3.35rem);
  }
  .service-page--mobile-app-development .hero-copy .lead {
    max-width: 36ch;
  }
  .service-page--mobile-app-development .hero-visual {
    min-height: 420px;
  }
  .service-page--mobile-app-development .mock-phones--live {
    height: 420px;
    width: min(100%, 420px);
  }
  .service-page--mobile-app-development .phone {
    width: 172px;
    height: 356px;
  }
  .service-page--mobile-app-development .phone--back {
    opacity: 0.9;
    transform: translate(-24px, 22px) scale(0.94) rotate(-7deg) !important;
  }
  .service-page--mobile-app-development .phone--front {
    transform: translate(36px, -4px) rotate(5deg) !important;
  }

  .shop-stage { gap: 12px; }
  .shop-hero-card { min-height: 280px; }
  .shop-path { display: none; }

  .mock-api-stage { gap: 10px; }
  .api-side { display: none; }

  .saas-panels { grid-template-columns: 1fr 1fr; }
  .saas-panel:last-child { grid-column: span 2; }

  .webapp-side__item:nth-child(n+3) { display: none; }
  .webapp-banner { font-size: 1rem; }

  .sec-layers { grid-template-columns: repeat(2, 1fr); }
  .sec-pills span:nth-child(n+3) { display: none; }

  .mock-artboards--studio {
    height: 300px;
    padding-bottom: 44px;
  }
  .artboard--c { display: none; }
  .studio-rail { display: none; }

  .mvp-evolve span:nth-child(odd) { display: none; }
  .mvp-evolve span.is-on { display: inline-flex; }
  .kanban-col:first-child .kanban-card:last-child { display: none; }

  .site-chrome { border-radius: 12px; }
  .mock-layers--site { min-height: 300px; padding-top: 48px; }
  .layer-card--back { display: none; }

  .cms-rail__item:nth-child(n+3) { display: none; }
  .mock-cms--live { transform: none; }

  .ops-meta span:nth-child(n+3) { display: none; }

  .section { padding-block: clamp(48px, 10vw, 72px); }
  .section-head { margin-bottom: 22px; }
  .section-head .display { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  .story-nav {
    margin-inline: calc(var(--lc-gutter) * -1);
    padding-inline: var(--lc-gutter);
    border-left: 0; border-right: 0;
  }
  .story-nav a {
    min-width: 132px;
    min-height: 64px;
    padding: 14px 12px;
  }

  .signature-panel {
    gap: 20px;
    padding-block: 8px;
  }
  .signature-copy .display { max-width: 14ch; }

  .compare-grid { gap: 20px; }
  .flow-step {
    grid-template-columns: 52px 1fr;
    font-size: clamp(1.25rem, 5.5vw, 1.65rem);
    padding: 16px 0;
  }

  .showcase-scene { padding: 24px 0; }
  .showcase-scene .display { max-width: 14ch; font-size: clamp(1.5rem, 6vw, 2rem); }

  .growth-grid { gap: 8px; }
  .chaos-list { gap: 8px; }

  .cta-band { padding: 48px 0; }
  .cta-band .display { max-width: 12ch; font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .cta-band__inner { align-items: stretch; }
  .cta-band .cta-row { width: 100%; }
}

@media (max-width: 560px) {
  .saas-panels { grid-template-columns: 1fr; }
  .saas-panel:last-child { grid-column: auto; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .mock-kpis .mock-kpi:nth-child(3) { grid-column: span 2; }
  .btn { min-height: 48px; }
  .lang a { min-height: 40px; min-width: 42px; }
}