/* ==========================================================================
   web-application-development — dark command deck, graphite theme aligned 1:1
   with the main site (home v4) and cms-development. Loaded after tokens.css /
   shell.css / dark-shell.css: dark --lc-* tokens come from dark-shell.css.
   ========================================================================== */

.service-page--web-application-development.service-page--custom {
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(255, 94, 46, 0.1), transparent 55%),
    var(--lc-bg);
  color: var(--lc-ink);
}

.wa {
  --wa-pad: clamp(14px, 2.8vw, 28px);
  --wa-line: var(--lc-line, #232733);
  --wa-line2: var(--lc-line2, #333947);
  --wa-panel: var(--lc-panel, #14161c);
  --wa-panel-2: var(--lc-panel2, #181b22);
  --wa-text: var(--lc-ink);
  --wa-muted: var(--lc-ink-soft);
  font-family: var(--lc-font-text);
  color: var(--wa-text);
}

.wa-mono {
  margin: 0 0 12px;
  font-family: var(--lc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-accent);
}

/* —— Full-bleed command deck —— */
.wa-deck {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px var(--wa-pad) 24px;
  display: grid;
  gap: 10px;
}

.wa-deck__chrome {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--wa-line);
  border-radius: 12px;
  background: var(--wa-panel);
}

.wa-deck__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wa-deck__mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lc-accent);
  box-shadow: 0 0 0 4px rgba(255, 94, 46, 0.18);
}
.wa-deck__brand strong {
  font-family: var(--lc-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.wa-deck__brand em {
  font-style: normal;
  font-family: var(--lc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-roles {
  display: inline-flex;
  border: 1px solid var(--wa-line2);
  border-radius: 999px;
  overflow: hidden;
  background: var(--lc-bg);
}
.wa-role {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wa-muted);
  font-family: var(--lc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.wa-role:hover { color: var(--wa-text); }
.wa-role.is-on {
  background: var(--lc-accent);
  color: #0a0b0e;
}

.wa-deck__cta {
  font-family: var(--lc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0b0e;
  background: var(--lc-accent);
  border-radius: 999px;
  padding: 9px 14px;
  white-space: nowrap;
  transition: background 0.25s;
}
.wa-deck__cta:hover { background: #ff7a52; }

.wa-deck__intro {
  display: grid;
  gap: 10px;
  max-width: 56ch;
  padding: 0 2px 2px;
}
.wa-deck__intro h1 {
  margin: 0;
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.wa-deck__intro p {
  margin: 0;
  color: var(--wa-muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.wa-deck__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.wa-deck__hint {
  margin: 4px 2px 0;
  max-width: 72ch;
  color: var(--wa-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  padding-left: 12px;
  border-left: 2px solid var(--lc-accent);
}

.wa-deck__shell {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: min(62vh, 580px);
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wa-panel);
  box-shadow: var(--lc-shadow-lift);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--lc-ease), transform 0.55s var(--lc-ease);
}
.wa.is-ready .wa-deck__shell {
  opacity: 1;
  transform: none;
}

.wa-rail {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 8px;
  border-right: 1px solid var(--wa-line);
  background: var(--lc-surface-3, #0d0f14);
}
.wa-mod {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wa-muted);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border-radius: 10px;
  font-family: var(--lc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.wa-mod span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wa-line2);
}
.wa-mod:hover {
  background: var(--wa-panel-2);
  color: var(--wa-text);
}
.wa-mod.is-on {
  background: var(--lc-accent);
  color: #0a0b0e;
}
.wa-mod.is-on span {
  background: #0a0b0e;
  box-shadow: none;
}

.wa-stage {
  position: relative;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 94, 46, 0.06), transparent 30%),
    var(--wa-panel-2);
}

.wa-workspace {
  display: none;
  grid-template-columns: 1fr 220px;
  min-height: 100%;
  animation: wa-in 0.32s var(--lc-ease);
}
.wa-workspace.is-on { display: grid; }

.wa-workspace__main {
  padding: 14px 14px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
  border-right: 1px solid var(--wa-line);
}

.wa-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wa-kpi {
  padding: 10px 12px;
  border: 1px solid var(--wa-line2);
  border-radius: 10px;
  background: var(--wa-panel);
  display: grid;
  gap: 2px;
}
.wa-kpi b {
  font-family: var(--lc-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--wa-text);
}
.wa-kpi span {
  font-family: var(--lc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wa-muted);
}

.wa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wa-filter {
  appearance: none;
  border: 1px solid var(--wa-line2);
  background: transparent;
  color: var(--wa-muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--lc-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.wa-filter:hover { color: var(--wa-text); }
.wa-filter.is-on {
  border-color: var(--lc-accent);
  color: #0a0b0e;
  background: var(--lc-accent);
}

.wa-table {
  display: grid;
  gap: 6px;
}
.wa-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--wa-line);
  background: var(--wa-panel);
  font-size: 0.86rem;
}
.wa-row span:first-child {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wa-text);
}
.wa-row span:nth-child(2),
.wa-row span:nth-child(3),
.wa-row span:nth-child(4) {
  color: var(--wa-muted);
  font-family: var(--lc-font-mono);
  font-size: 0.72rem;
}

.wa-feed {
  padding: 14px 12px;
  background: var(--wa-panel);
  border-left: 1px solid var(--wa-line);
}
.wa-feed__h {
  margin: 0 0 10px;
  font-family: var(--lc-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lc-accent);
}
.wa-feed ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.wa-feed li {
  padding: 10px 10px;
  border-left: 2px solid var(--lc-accent);
  background: rgba(255, 94, 46, 0.08);
  color: var(--wa-text);
  font-size: 0.84rem;
  line-height: 1.35;
}

@keyframes wa-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Role tint — teal for role 1, blue for role 2 (dark-friendly) */
.wa[data-role='1'] .wa-mod.is-on { background: var(--lc-teal, #38e1c0); color: #0a0b0e; }
.wa[data-role='1'] .wa-filter.is-on { border-color: var(--lc-teal, #38e1c0); color: #0a0b0e; background: var(--lc-teal, #38e1c0); }
.wa[data-role='1'] .wa-feed__h { color: var(--lc-teal, #38e1c0); }
.wa[data-role='1'] .wa-feed li { border-left-color: var(--lc-teal, #38e1c0); background: rgba(56, 225, 192, 0.08); }

.wa[data-role='2'] .wa-mod.is-on { background: #7fb2ff; color: #0a0b0e; }
.wa[data-role='2'] .wa-filter.is-on { border-color: #7fb2ff; color: #0a0b0e; background: #7fb2ff; }
.wa[data-role='2'] .wa-feed__h { color: #7fb2ff; }
.wa[data-role='2'] .wa-feed li { border-left-color: #7fb2ff; background: rgba(127, 178, 255, 0.08); }

.wa-strip,
.wa-stack,
.wa-fit,
.wa-ask,
.wa-end {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) var(--wa-pad);
  border-top: 1px solid var(--wa-line);
}

.wa-h2 {
  margin: 0 0 18px;
  font-family: var(--lc-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.wa-strip__line {
  margin: 0;
  font-family: var(--lc-font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 24ch;
}
.wa-strip__sub {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--wa-muted);
  line-height: 1.5;
}

.wa-stack ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.wa-stack li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--wa-line);
}
.wa-stack li:last-child { border-bottom: 1px solid var(--wa-line); }
.wa-stack strong {
  font-family: var(--lc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lc-accent);
  padding-top: 3px;
}
.wa-stack span {
  font-family: var(--lc-font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* —— Fit: for whom / included / not included —— */
.wa-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wa-fit__col {
  border: 1px solid var(--wa-line);
  border-radius: 12px;
  background: var(--wa-panel);
  padding: 16px 16px 18px;
}
.wa-fit__col h3 {
  margin: 0 0 10px;
  font-family: var(--lc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lc-accent);
}
.wa-fit__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.wa-fit__col li {
  position: relative;
  padding-left: 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--wa-text);
}
.wa-fit__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-accent);
}
.wa-fit__col--not {
  background: transparent;
  border-style: dashed;
  border-color: var(--wa-line2);
}
.wa-fit__col--not li {
  color: var(--wa-muted);
}
.wa-fit__col--not li::before {
  background: var(--wa-line2);
}
.wa-fit__col a,
.wa-faq p a {
  color: var(--lc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wa-fit__price {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--wa-line2);
  border-radius: 10px;
  max-width: 64ch;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--wa-text);
}

.wa-faq {
  border-top: 1px solid var(--wa-line);
}
.wa-faq:last-child { border-bottom: 1px solid var(--wa-line); }
.wa-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 24px 14px 0;
  font-family: var(--lc-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  position: relative;
}
.wa-faq summary::-webkit-details-marker { display: none; }
.wa-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-family: var(--lc-font-mono);
  color: var(--lc-accent);
}
.wa-faq[open] summary::after { content: '–'; }
.wa-faq p {
  margin: 0 0 16px;
  max-width: 56ch;
  color: var(--wa-muted);
  line-height: 1.5;
}

/* —— Final (dark canvas like cms-end) —— */
.wa-end {
  background:
    radial-gradient(760px 320px at 82% 18%, rgba(255, 94, 46, 0.14), transparent 62%),
    var(--lc-surface-3, #0d0f14);
  color: var(--lc-ink);
  max-width: none;
  padding: clamp(40px, 7vw, 72px) var(--wa-pad);
  border-top: 1px solid var(--wa-line);
}
.wa-end h2 {
  margin: 0 0 10px;
  max-width: 12ch;
  font-family: var(--lc-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.wa-end p {
  margin: 0 0 18px;
  color: var(--lc-ink-soft);
  max-width: 36ch;
}
.wa-end__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wa-end .btn--ghost {
  color: var(--lc-ink);
  border-color: var(--wa-line2);
}

/* —— See also —— */
.wa-more {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px dashed var(--wa-line2);
  padding-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.wa-more__label {
  font-family: var(--lc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}
.wa-more__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wa-more__link {
  font-family: var(--lc-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lc-ink-soft);
  border: 1px solid var(--wa-line2);
  border-radius: 100px;
  padding: 7px 13px;
  text-decoration: none;
  transition: 0.25s;
}
.wa-more__link:hover {
  border-color: var(--lc-accent);
  color: var(--lc-accent);
}

@media (prefers-reduced-motion: reduce) {
  .wa-deck__shell,
  .wa-workspace {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

@media (max-width: 900px) {
  .wa-deck__chrome {
    grid-template-columns: 1fr;
  }
  .wa-deck__shell {
    grid-template-columns: 1fr;
    min-height: 520px;
  }
  .wa-rail {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wa-line);
  }
  .wa-workspace {
    grid-template-columns: 1fr;
  }
  .wa-workspace__main { border-right: 0; border-bottom: 1px solid var(--wa-line); }
  .wa-feed { border-left: 0; }
  .wa-row {
    grid-template-columns: 1fr 1fr;
  }
  .wa-fit__grid {
    grid-template-columns: 1fr;
  }
}