:root {
  --bg: #05080e;
  --panel: rgba(11, 18, 31, 0.84);
  --panel-strong: rgba(13, 24, 42, 0.95);
  --line: rgba(113, 180, 255, 0.13);
  --line-strong: rgba(79, 190, 255, 0.35);
  --text: #f3f8ff;
  --muted: #7f91a9;
  --cyan: #57d9ff;
  --blue: #5c8cff;
  --green: #65f2b1;
  --amber: #ffc765;
  --red: #ff6b78;
  --purple: #9177ff;
  --shadow: 0 22px 80px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family:
    Inter,
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;
  background:
    radial-gradient(
      circle at 72% 10%,
      rgba(55, 117, 255, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 32% 78%,
      rgba(76, 217, 255, 0.06),
      transparent 28%
    ),
    var(--bg);
  overflow-x: hidden;
}

button,
textarea,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.15;
  pointer-events: none;
}

.ambient-a {
  top: -260px;
  right: -100px;
  background: #195dff;
}

.ambient-b {
  bottom: -300px;
  left: 10%;
  background: #00d7ff;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(
      180deg,
      rgba(9, 15, 27, 0.98),
      rgba(5, 9, 16, 0.94)
    );
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #051018;
  background:
    linear-gradient(
      135deg,
      #7ce7ff,
      #5d91ff
    );
  box-shadow:
    0 0 30px rgba(69, 191, 255, 0.25);
}

.brand-name {
  font-size: 15px;
  font-weight: 750;
}

.brand-product {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.demo-badge {
  margin-top: 28px;
  padding: 10px 12px;
  border: 1px solid rgba(82, 220, 255, 0.14);
  border-radius: 10px;
  color: #b7dbea;
  font-size: 12px;
  background: rgba(24, 74, 99, 0.12);
}

.pulse-dot,
.runtime-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 5px rgba(101, 242, 177, 0.08);
}

.nav {
  margin-top: 32px;
  display: grid;
  gap: 7px;
}

.nav-item {
  border: 0;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  gap: 11px;
  align-items: center;
  color: #8192aa;
  background: transparent;
  text-align: left;
  cursor: default;
}

.nav-item.active {
  color: #e8f8ff;
  border: 1px solid rgba(88, 197, 255, 0.13);
  background:
    linear-gradient(
      90deg,
      rgba(43, 145, 255, 0.16),
      rgba(58, 199, 255, 0.05)
    );
}

.side-note {
  margin-top: auto;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.side-note strong {
  color: #cfefff;
  font-size: 12px;
}

.side-note p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.side-footer {
  margin-top: 18px;
  color: #53647b;
  font-size: 11px;
}

.side-footer span {
  display: block;
  margin-top: 4px;
}

.main {
  width: min(1480px, 100%);
  padding: 42px 48px 60px;
}

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

.eyebrow,
.section-label {
  color: #5ca9d2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.topbar h1 {
  margin: 9px 0 0;
  max-width: 760px;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.topbar h1 span {
  color: var(--cyan);
}

.runtime-pill {
  margin-top: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  color: #b8c7d9;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.notice {
  margin-top: 28px;
  padding: 14px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid rgba(93, 184, 255, 0.15);
  border-radius: 13px;
  background: rgba(29, 84, 119, 0.09);
}

.notice-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #6be5ff;
  border: 1px solid rgba(82, 218, 255, 0.28);
  font-size: 12px;
  font-weight: 800;
}

.notice strong {
  display: block;
  font-size: 12px;
  color: #dff8ff;
}

.notice p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(
      160deg,
      rgba(15, 24, 40, 0.92),
      rgba(7, 13, 23, 0.88)
    );
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.hero-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.task-console,
.live-card,
.timeline-panel,
.control-panel,
.architecture-section,
.value-card,
.lead-card {
  padding: 22px;
}

.card-head,
.live-head,
.section-heading {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
}

.card-head h2,
.live-head h2,
.section-heading h2,
.control-panel h2,
.architecture-section h2,
.value-card h2,
.lead-card h2 {
  margin: 6px 0 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.card-head.compact {
  align-items: center;
}

.status-chip {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--line);
}

.status-chip.idle {
  color: var(--muted);
}

.status-chip.running {
  color: var(--cyan);
  border-color: rgba(87, 217, 255, 0.28);
  background: rgba(87, 217, 255, 0.06);
}

.status-chip.paused {
  color: var(--amber);
  border-color: rgba(255, 199, 101, 0.26);
  background: rgba(255, 199, 101, 0.06);
}

.status-chip.done {
  color: var(--green);
  border-color: rgba(101, 242, 177, 0.25);
  background: rgba(101, 242, 177, 0.06);
}

.status-chip.stopped {
  color: var(--red);
}

#taskInput {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  margin-top: 18px;
  padding: 18px;
  color: #edf8ff;
  border: 1px solid rgba(93, 174, 255, 0.15);
  border-radius: 14px;
  outline: none;
  background: rgba(2, 8, 16, 0.6);
  line-height: 1.7;
}

#taskInput:focus {
  border-color: rgba(87, 217, 255, 0.42);
  box-shadow:
    0 0 0 3px rgba(87, 217, 255, 0.05);
}

#taskInput::placeholder,
input::placeholder,
textarea::placeholder {
  color: #4e6076;
}

.command-footer {
  margin-top: 14px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.command-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #72869f;
  font-size: 10px;
}

.primary-btn,
.secondary-btn,
.lead-submit {
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition:
    transform .16s ease,
    opacity .16s ease,
    box-shadow .16s ease;
}

.primary-btn,
.lead-submit {
  padding: 12px 17px;
  color: #04101b;
  font-weight: 760;
  background:
    linear-gradient(
      135deg,
      #6ae6ff,
      #5b8dff
    );
  box-shadow:
    0 10px 30px rgba(51, 158, 255, 0.17);
}

.primary-btn:hover,
.lead-submit:hover {
  transform: translateY(-1px);
}

.primary-btn:disabled,
.lead-submit:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.btn-icon {
  margin-right: 6px;
}

.live-clock {
  color: #657b93;
  font-family: Consolas, monospace;
  font-size: 11px;
}

.progress-wrap {
  margin-top: 25px;
}

.progress-line {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--cyan)
    );
  box-shadow:
    0 0 20px rgba(87, 217, 255, .32);
  transition: width .35s ease;
}

.progress-labels {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.metric-grid {
  margin-top: 22px;
  display: grid;
  gap: 9px;
}

.metric {
  min-height: 51px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(113, 180, 255, 0.08);
  background: rgba(255, 255, 255, .018);
}

.metric span {
  color: var(--muted);
  font-size: 10px;
}

.metric strong {
  color: #d9ecf7;
  font-size: 11px;
  font-weight: 700;
}

.workspace-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .55fr);
  gap: 18px;
}

.task-id {
  color: #637890;
  font-size: 10px;
  font-family: Consolas, monospace;
}

.timeline {
  min-height: 294px;
  margin-top: 18px;
}

.timeline.empty {
  display: grid;
  place-items: center;
}

.empty-state {
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  display: block;
  margin-top: 10px;
  color: #9fb1c7;
  font-size: 12px;
}

.empty-state p {
  max-width: 330px;
  margin: 6px auto 0;
  font-size: 11px;
  line-height: 1.6;
}

.empty-orbit {
  width: 48px;
  height: 48px;
  margin: auto;
  border: 1px solid rgba(87, 217, 255, .17);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.empty-orbit span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(87, 217, 255, .55);
  box-shadow:
    0 0 20px rgba(87, 217, 255, .28);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 7px 0;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 37px;
  width: 1px;
  height: 22px;
  background: rgba(114, 166, 215, .13);
}

.step-dot {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #5c6e84;
  border: 1px solid rgba(113, 180, 255, .13);
  background: #08111e;
  font-size: 9px;
}

.step strong {
  display: block;
  color: #adbdcf;
  font-size: 11px;
}

.step small {
  display: block;
  margin-top: 3px;
  color: #52677f;
  font-size: 9px;
}

.step-state {
  color: #53667b;
  font-size: 9px;
}

.step.running .step-dot {
  color: var(--cyan);
  border-color: rgba(87, 217, 255, .45);
  box-shadow:
    0 0 20px rgba(87, 217, 255, .14);
}

.step.running strong {
  color: #dcf9ff;
}

.step.running .step-state {
  color: var(--cyan);
}

.step.done .step-dot {
  color: var(--green);
  border-color: rgba(101, 242, 177, .35);
}

.step.done strong {
  color: #c5d6e5;
}

.step.done .step-state {
  color: var(--green);
}

.control-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.control-btn {
  min-height: 70px;
  border: 1px solid rgba(113, 180, 255, .11);
  border-radius: 12px;
  color: #a8bad0;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
}

.control-btn span {
  display: block;
  margin-top: 7px;
  font-size: 10px;
}

.control-btn:hover:not(:disabled) {
  border-color: rgba(87, 217, 255, .29);
  color: #e4f8ff;
}

.control-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.control-btn.danger:not(:disabled):hover {
  border-color: rgba(255, 107, 120, .35);
  color: var(--red);
}

.control-info {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(113, 180, 255, .08);
  display: grid;
  gap: 9px;
  color: #697d94;
  font-size: 10px;
  line-height: 1.5;
}

.info-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
}

.info-dot.safe {
  background: var(--green);
}

.scenes-section {
  margin-top: 42px;
}

.section-heading {
  align-items: end;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.scene-grid {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.scene-card {
  position: relative;
  min-height: 182px;
  padding: 21px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(
      155deg,
      rgba(14, 24, 42, .88),
      rgba(7, 13, 23, .88)
    );
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.scene-card:hover {
  transform: translateY(-2px);
  border-color: rgba(87, 217, 255, .3);
}

.scene-index {
  position: absolute;
  right: 17px;
  top: 15px;
  color: rgba(104, 174, 224, .2);
  font-family: Consolas, monospace;
  font-size: 25px;
  font-weight: 800;
}

.scene-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(87, 217, 255, .15);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(87, 217, 255, .04);
}

.scene-card h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.scene-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.architecture-section {
  margin-top: 32px;
}

.flow {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.flow > i {
  color: #39536f;
  font-style: normal;
}

.flow-node {
  min-width: 0;
  flex: 1;
  padding: 15px;
  border: 1px solid rgba(113, 180, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
}

.flow-node span {
  display: block;
  color: #48779c;
  font-size: 9px;
  font-family: Consolas, monospace;
}

.flow-node strong {
  display: block;
  margin-top: 8px;
  font-size: 11px;
}

.flow-node small {
  display: block;
  margin-top: 4px;
  color: #596f86;
  font-size: 8px;
}

.principles {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.principles span {
  padding: 6px 9px;
  color: #7fa9c7;
  border: 1px solid rgba(87, 217, 255, .1);
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: .06em;
}

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

.value-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.value-list div {
  padding: 12px;
  display: flex;
  gap: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}

.value-list b {
  color: #4b9cca;
  font-family: Consolas, monospace;
  font-size: 9px;
}

.value-list span {
  color: #879bb2;
  font-size: 10px;
  line-height: 1.6;
}

.lead-intro {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

#leadForm {
  margin-top: 17px;
  display: grid;
  gap: 9px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

#leadForm input,
#leadForm select,
#leadForm textarea {
  width: 100%;
  border: 1px solid rgba(113, 180, 255, .11);
  border-radius: 10px;
  padding: 11px 12px;
  color: #dcebf7;
  outline: none;
  background: rgba(2, 8, 16, .58);
}

#leadForm select {
  color: #a9bed0;
}

#leadForm textarea {
  min-height: 82px;
  resize: vertical;
}

#leadForm input:focus,
#leadForm select:focus,
#leadForm textarea:focus {
  border-color: rgba(87, 217, 255, .35);
}

.lead-submit {
  min-height: 43px;
}

.lead-message {
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
}

.lead-message.success {
  color: var(--green);
}

.lead-message.error {
  color: var(--red);
}

footer {
  margin-top: 30px;
  padding: 22px 2px 0;
  border-top: 1px solid rgba(113, 180, 255, .08);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: #51657b;
  font-size: 9px;
}

footer strong {
  color: #7c91a8;
  font-size: 10px;
}

footer span {
  margin-left: 8px;
}

footer p {
  margin: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(0, 4, 10, .72);
  backdrop-filter: blur(10px);
}

.modal.hidden {
  display: none;
}

.modal-box {
  width: min(450px, 100%);
  padding: 27px;
  border: 1px solid rgba(255, 199, 101, .18);
  border-radius: 18px;
  background:
    linear-gradient(
      155deg,
      #101a2b,
      #080e18
    );
  box-shadow: 0 25px 90px rgba(0, 0, 0, .55);
}

.modal-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--amber);
  border: 1px solid rgba(255, 199, 101, .25);
  background: rgba(255, 199, 101, .06);
}

.modal-box h2 {
  margin: 8px 0 8px;
  font-size: 18px;
}

.modal-box > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.approval-summary {
  margin-top: 17px;
  padding: 13px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.approval-summary span {
  color: #61768e;
  font-size: 9px;
}

.approval-summary strong {
  color: #b8cadc;
  font-size: 10px;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.secondary-btn {
  padding: 11px 15px;
  color: #93a8be;
  border: 1px solid rgba(113, 180, 255, .12);
  background: rgba(255, 255, 255, .02);
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .sidebar {
    padding: 24px 14px;
  }

  .brand > div:not(.brand-mark),
  .demo-badge,
  .nav-item:not(.active) span + *,
  .nav-item {
    font-size: 0;
  }

  .nav-item {
    justify-content: center;
  }

  .nav-item span {
    font-size: 16px;
  }

  .side-note,
  .side-footer {
    display: none;
  }

  .main {
    padding: 32px 28px 50px;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 15px 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .nav,
  .side-note,
  .side-footer,
  .demo-badge {
    display: none;
  }

  .brand > div:not(.brand-mark) {
    display: block;
  }

  .main {
    padding: 24px 16px 42px;
  }

  .topbar,
  .command-footer,
  footer {
    flex-direction: column;
  }

  .runtime-pill {
    margin-top: 0;
  }

  .hero-grid,
  .workspace-grid,
  .commercial-grid {
    grid-template-columns: 1fr;
  }

  .scene-grid {
    grid-template-columns: 1fr 1fr;
  }

  .flow {
    display: grid;
  }

  .flow > i {
    display: none;
  }
}

@media (max-width: 560px) {
  .scene-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .topbar h1 {
    font-size: 31px;
  }

  .command-footer {
    align-items: stretch;
  }

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


/* =====================================================
   WORKPILOT-COMMERCIAL-V11-BEGIN
   Commercial Showcase V1.1
   ===================================================== */

section {
  scroll-margin-top: 24px;
}

.nav-item {
  text-decoration: none;
  cursor: pointer;
}

.top-actions {
  margin-top: 10px;
  display: flex;
  gap: 9px;
  align-items: center;
}

.top-actions .runtime-pill {
  margin-top: 0;
}

.header-consult-btn {
  padding: 10px 15px;
  border-radius: 999px;
  color: #07121e;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  background:
    linear-gradient(
      135deg,
      #68e5ff,
      #6a8eff
    );
  box-shadow:
    0 9px 28px
    rgba(71, 168, 255, .18);
  transition:
    transform .17s ease,
    box-shadow .17s ease;
}

.header-consult-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px
    rgba(71, 168, 255, .27);
}


/* ===== Capabilities ===== */

.capability-section {
  margin-top: 42px;
}

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

.capability-card {
  position: relative;
  min-height: 218px;
  padding: 21px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(
      150deg,
      rgba(15, 27, 47, .93),
      rgba(7, 13, 23, .90)
    );
}

.capability-card::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -58px;
  top: -70px;
  border-radius: 50%;
  background:
    rgba(70, 183, 255, .10);
  filter: blur(10px);
}

.capability-card.featured {
  border-color:
    rgba(87, 217, 255, .27);
  background:
    linear-gradient(
      150deg,
      rgba(13, 46, 68, .78),
      rgba(8, 16, 30, .94)
    );
}

.capability-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid
    rgba(87, 217, 255, .18);
  border-radius: 10px;
  color: var(--cyan);
  background:
    rgba(87, 217, 255, .045);
  font-size: 16px;
}

.capability-number {
  position: absolute;
  top: 17px;
  right: 18px;
  color:
    rgba(92, 163, 212, .24);
  font-family: Consolas, monospace;
  font-size: 23px;
  font-weight: 800;
}

.capability-card h3 {
  margin: 18px 0 7px;
  font-size: 14px;
}

.capability-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.75;
}

.capability-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capability-tags span {
  padding: 5px 7px;
  border-radius: 999px;
  color: #699bbb;
  border: 1px solid
    rgba(87, 217, 255, .10);
  background:
    rgba(87, 217, 255, .025);
  font-size: 8px;
}

.capability-note {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.capability-note > div {
  padding: 15px 17px;
  display: flex;
  gap: 12px;
  border-radius: 13px;
  border: 1px solid
    rgba(101, 242, 177, .11);
  background:
    rgba(101, 242, 177, .025);
}

.capability-check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  border: 1px solid
    rgba(101, 242, 177, .22);
  font-size: 10px;
}

.capability-note strong {
  display: block;
  color: #cae0ea;
  font-size: 10px;
}

.capability-note p {
  margin: 5px 0 0;
  color: #667d93;
  font-size: 9px;
  line-height: 1.65;
}


/* ===== Difference ===== */

.difference-section {
  margin-top: 32px;
  padding: 25px;
}

.difference-badge {
  padding: 7px 10px;
  border-radius: 999px;
  color: #76b9df;
  border: 1px solid
    rgba(87, 217, 255, .12);
  font-size: 8px;
  letter-spacing: .08em;
}

.difference-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns:
    .72fr 54px 1.45fr;
  gap: 15px;
  align-items: stretch;
}

.assistant-side,
.workpilot-side {
  padding: 20px;
  border-radius: 14px;
}

.assistant-side {
  border: 1px solid
    rgba(128, 145, 166, .10);
  background:
    rgba(255, 255, 255, .018);
}

.workpilot-side {
  border: 1px solid
    rgba(87, 217, 255, .18);
  background:
    linear-gradient(
      145deg,
      rgba(31, 100, 133, .09),
      rgba(15, 25, 43, .35)
    );
}

.difference-title {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
}

.difference-title.muted {
  color: #8797aa;
}

.assistant-flow {
  margin-top: 17px;
  display: grid;
  gap: 6px;
  text-align: center;
}

.assistant-flow div {
  padding: 9px 10px;
  border-radius: 9px;
  color: #8b9eb3;
  border: 1px solid
    rgba(113, 180, 255, .07);
  background:
    rgba(255, 255, 255, .018);
  font-size: 9px;
}

.assistant-flow i {
  color: #3f5268;
  font-style: normal;
  font-size: 9px;
}

.assistant-side > p {
  margin: 16px 0 0;
  color: #566b81;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
}

.vs-divider {
  display: grid;
  place-items: center;
  color: rgba(87, 217, 255, .42);
  font-size: 15px;
  font-weight: 900;
}

.execution-chain {
  margin-top: 18px;
  display: flex;
  gap: 7px;
  align-items: center;
}

.execution-chain span {
  min-width: 0;
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  color: #d6e9f4;
  border: 1px solid
    rgba(87, 217, 255, .10);
  background:
    rgba(87, 217, 255, .025);
  text-align: center;
  font-size: 9px;
}

.execution-chain b {
  display: block;
  margin-bottom: 5px;
  color: #477fa1;
  font-family: Consolas, monospace;
  font-size: 8px;
}

.execution-chain i {
  color: #31526b;
  font-style: normal;
}

.workpilot-advantages {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.workpilot-advantages div {
  padding: 12px;
  border-radius: 10px;
  background:
    rgba(255, 255, 255, .018);
}

.workpilot-advantages strong {
  color: #bcd8e7;
  font-size: 9px;
}

.workpilot-advantages p {
  margin: 5px 0 0;
  color: #647a90;
  font-size: 8px;
  line-height: 1.6;
}


/* ===== Pricing ===== */

.pricing-section {
  margin-top: 42px;
}

.pricing-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.price-card {
  position: relative;
  min-height: 345px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 17px;
  background:
    linear-gradient(
      155deg,
      rgba(15, 25, 43, .94),
      rgba(7, 13, 23, .94)
    );
  overflow: hidden;
}

.price-card.recommended {
  border-color:
    rgba(87, 217, 255, .40);
  box-shadow:
    0 0 45px
    rgba(44, 171, 255, .08);
}

.price-card.enterprise {
  border-color:
    rgba(145, 119, 255, .24);
}

.recommended-label {
  position: absolute;
  top: 14px;
  right: -29px;
  width: 110px;
  padding: 5px 0;
  transform: rotate(38deg);
  color: #04101a;
  background:
    linear-gradient(
      90deg,
      #70e6ff,
      #6793ff
    );
  text-align: center;
  font-size: 8px;
  font-weight: 850;
}

.price-plan {
  color: #dbeaf5;
  font-size: 13px;
  font-weight: 780;
}

.price {
  margin-top: 19px;
  display: flex;
  align-items: baseline;
}

.price small {
  color: #86abc2;
  font-size: 11px;
}

.price strong {
  margin-left: 3px;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.05em;
}

.price span {
  margin-left: 5px;
  color: #637c93;
  font-size: 9px;
}

.price-desc {
  min-height: 34px;
  margin: 13px 0 0;
  color: #6e849a;
  font-size: 9px;
  line-height: 1.6;
}

.price-card ul {
  margin: 19px 0;
  padding: 15px 0 0;
  list-style: none;
  border-top: 1px solid
    rgba(113, 180, 255, .08);
  display: grid;
  gap: 10px;
}

.price-card li {
  position: relative;
  padding-left: 17px;
  color: #8499ae;
  font-size: 9px;
  line-height: 1.45;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
}

.price-card > a {
  margin-top: auto;
  padding: 10px 12px;
  display: block;
  border-radius: 10px;
  color: #9ec6dd;
  border: 1px solid
    rgba(87, 217, 255, .13);
  background:
    rgba(87, 217, 255, .025);
  text-decoration: none;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}

.price-card.recommended > a {
  color: #05111c;
  border: 0;
  background:
    linear-gradient(
      135deg,
      #70e6ff,
      #658eff
    );
}

.price-card > a:hover {
  border-color:
    rgba(87, 217, 255, .32);
}

.pricing-note {
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 11px;
  color: #61768c;
  border: 1px solid
    rgba(113, 180, 255, .08);
  background:
    rgba(255, 255, 255, .014);
  font-size: 9px;
  line-height: 1.65;
}

.pricing-note strong {
  color: #8ca8bb;
}


/* ===== Mobile ===== */

@media (max-width: 1100px) {

  .capability-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .pricing-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .difference-grid {
    grid-template-columns: 1fr;
  }

  .vs-divider {
    min-height: 30px;
  }

}

@media (max-width: 820px) {

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .capability-note {
    grid-template-columns: 1fr;
  }

  .execution-chain {
    display: grid;
    grid-template-columns: 1fr;
  }

  .execution-chain i {
    display: none;
  }

}

@media (max-width: 560px) {

  .capability-grid,
  .pricing-grid,
  .workpilot-advantages {
    grid-template-columns: 1fr;
  }

  .price-card {
    min-height: auto;
  }

}

/* WORKPILOT-COMMERCIAL-V11-END */


/* =====================================================
   WORKPILOT-DIAGNOSIS-V12-BEGIN
   ===================================================== */

.diagnosis-section {
  margin-top: 32px;
  padding: 25px;
}

.diagnosis-layout {
  margin-top: 22px;
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, .65fr);
  gap: 16px;
}

.diagnosis-form {
  padding: 18px;
  border: 1px solid
    rgba(113, 180, 255, .09);
  border-radius: 14px;
  background:
    rgba(255, 255, 255, .018);
}

.diag-group > strong {
  font-size: 11px;
  color: #c4d9e6;
}

.diag-check-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.diag-check-grid label {
  padding: 11px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid
    rgba(113, 180, 255, .09);
  border-radius: 10px;
  color: #8fa5ba;
  background:
    rgba(2, 8, 16, .38);
  font-size: 10px;
  cursor: pointer;
}

.diag-check-grid input,
.external-write-check input {
  accent-color: #57d9ff;
}

.diag-fields {
  margin-top: 15px;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.diag-fields label {
  display: grid;
  gap: 6px;
}

.diag-fields span {
  color: #647b91;
  font-size: 9px;
}

.diag-fields select {
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid
    rgba(113, 180, 255, .10);
  color: #a9bfd0;
  background: #07101c;
  outline: none;
  font-size: 9px;
}

.external-write-check {
  margin-top: 13px;
  padding: 11px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-radius: 10px;
  color: #71879c;
  background:
    rgba(255, 199, 101, .025);
  border: 1px solid
    rgba(255, 199, 101, .09);
  font-size: 9px;
  line-height: 1.55;
}

.diagnose-btn {
  width: 100%;
  margin-top: 14px;
  min-height: 43px;
  border: 0;
  border-radius: 10px;
  color: #04101a;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  background:
    linear-gradient(
      135deg,
      #68e4ff,
      #628dff
    );
}

.diagnosis-result {
  min-height: 100%;
  padding: 20px;
  border: 1px solid
    rgba(87, 217, 255, .14);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(20, 61, 86, .09),
      rgba(5, 12, 22, .56)
    );
}

.diag-empty {
  height: 100%;
  min-height: 230px;
  display: grid;
  place-content: center;
  text-align: center;
}

.diag-empty > span {
  color: var(--cyan);
  font-size: 27px;
}

.diag-empty strong {
  margin-top: 12px;
  color: #a9c0d1;
  font-size: 11px;
}

.diag-empty p {
  max-width: 270px;
  margin: 7px auto 0;
  color: #5f748a;
  font-size: 9px;
  line-height: 1.65;
}

.diag-result-label {
  color: #5d89a6;
  font-size: 8px;
  letter-spacing: .12em;
}

.diag-result-level {
  margin-top: 8px;
  color: var(--cyan);
  font-size: 22px;
  font-weight: 850;
}

.diag-score {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.diag-score strong {
  font-size: 38px;
}

.diag-score span {
  color: #647c91;
  font-size: 9px;
}

.diag-result-summary,
.diag-result-mode,
.diag-result-recommendation {
  margin-top: 13px;
  padding: 11px;
  border-radius: 10px;
  color: #8299ad;
  background:
    rgba(255, 255, 255, .02);
  font-size: 9px;
  line-height: 1.65;
}

.diag-result-mode strong {
  color: #b9d1df;
}

.diag-apply-btn {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 9px;
  color: #c9e4ef;
  border: 1px solid
    rgba(87, 217, 255, .16);
  background:
    rgba(87, 217, 255, .035);
  cursor: pointer;
  font-size: 9px;
}

.implementation-flow {
  margin-top: 17px;
  padding: 18px;
  border-top: 1px solid
    rgba(113, 180, 255, .08);
}

.implementation-flow h3 {
  margin: 7px 0 0;
  font-size: 14px;
}

.implementation-steps {
  margin-top: 16px;
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.implementation-steps span {
  flex: 1;
  min-width: 0;
  padding: 11px 7px;
  border-radius: 9px;
  text-align: center;
  color: #90a7ba;
  border: 1px solid
    rgba(113, 180, 255, .08);
  background:
    rgba(255, 255, 255, .015);
  font-size: 8px;
}

.implementation-steps b {
  display: block;
  margin-bottom: 5px;
  color: #42799c;
  font-size: 8px;
}

.implementation-steps i {
  align-self: center;
  color: #38536a;
  font-style: normal;
}

@media (max-width: 900px) {

  .diagnosis-layout {
    grid-template-columns: 1fr;
  }

  .implementation-steps {
    display: grid;
    grid-template-columns:
      1fr 1fr;
  }

  .implementation-steps i {
    display: none;
  }

}

@media (max-width: 560px) {

  .diag-check-grid,
  .diag-fields,
  .implementation-steps {
    grid-template-columns: 1fr;
  }

}

/* WORKPILOT-DIAGNOSIS-V12-END */

/* WORKPILOT METABRAIN V2.0 PANEL */
.mb2-section { margin:32px 0; padding:clamp(18px,3vw,30px); border:1px solid rgba(72,207,255,.22); border-radius:19px; background:linear-gradient(150deg,rgba(9,25,47,.98),rgba(5,12,24,.95)); color:#e8f7ff; box-shadow:0 20px 80px rgba(0,0,0,.18); }
.mb2-topline {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mb2-tag {color:#65dfff;letter-spacing:.17em;font-weight:750;font-size:10px}
.mb2-status {color:#7fe1bb;font-size:10px}
.mb2-section h2 {font-size:clamp(20px,2.5vw,30px);margin:13px 0 9px}
.mb2-desc {color:#aec8da;line-height:1.75;max-width:800px;font-size:13px}
.mb2-disclaimer {font-size:11px;line-height:1.7;color:#8097ac}
.mb2-input-area {margin-top:21px;padding:18px;border:1px solid rgba(93,188,255,.12);border-radius:13px;background:rgba(2,10,22,.5);display:grid;gap:10px}
.mb2-input-area>label{color:#b8d2e2;font-size:12px}
#mb2-task {box-sizing:border-box;resize:vertical;min-height:88px;width:100%;padding:14px;border-radius:11px;border:1px solid rgba(100,197,255,.2);background:#060f1e;color:#e3f6ff;font-family:inherit;font-size:13px;line-height:1.7}
.mb2-controls {display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mb2-controls label{font-size:11px;color:#92afc2;display:flex;gap:7px;align-items:center}
.mb2-controls input{accent-color:#5ce5ff}
#mb2-run{margin-left:auto;padding:12px 18px;background:linear-gradient(120deg,#57e3ff,#7199ff);border:0;border-radius:10px;color:#04101c;font-weight:800;cursor:pointer}
#mb2-run:disabled{opacity:.55;cursor:wait}
#mb2-message{color:#8bd2ef;font-size:11px;min-height:15px}
.mb2-results[hidden]{display:none!important}
.mb2-results{margin-top:15px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mb2-card{min-width:0;background:rgba(4,11,22,.66);border:1px solid rgba(103,187,248,.12);border-radius:12px;padding:17px}
.mb2-card h3{margin:0 0 9px;color:#76dfff;font-size:13px;letter-spacing:.03em}
.mb2-card small{color:#668ba2;font-size:10px}
.mb2-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.85 ui-monospace,Consolas,monospace;color:#b1c9d9}
.mb2-full{grid-column:1/-1}
.mb2-activation{margin:10px 0;color:#b1c9d9;font-size:11px}
.mb2-activation-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}
.mb2-bar{height:5px;background:rgba(98,168,210,.12);border-radius:10px;overflow:hidden}
.mb2-bar span{display:block;height:100%;background:linear-gradient(90deg,#3287ff,#59e8ff);border-radius:10px}
.mb2-step{padding:11px 12px;border-left:2px solid rgba(83,227,255,.5);background:rgba(56,122,174,.045);border-radius:7px;margin:9px 0}
.mb2-step strong{color:#d7f0ff;font-size:12px}.mb2-step span{display:block;margin-top:5px;color:#7d9cb2;font-size:10px;line-height:1.5}
@media(max-width:760px){.mb2-results{grid-template-columns:1fr}.mb2-full{grid-column:auto}.mb2-section{padding:16px}#mb2-run{width:100%;margin-left:0}}

/* WORKPILOT-METABRAIN-SIMULATION-PHASE3 */
.mb3-section{margin:20px 0 34px;padding:clamp(16px,2.5vw,26px);border:1px solid rgba(90,221,255,.22);border-radius:18px;background:linear-gradient(140deg,#071625,#0a1122);color:#dfefff}
.mb3-kicker{color:#69e1ff;letter-spacing:.12em;font-size:10px;font-weight:800}
.mb3-section h2{margin:8px 0 9px;font-size:clamp(19px,2.3vw,28px)}
.mb3-desc{font-size:12px;color:#90aabd;line-height:1.7}
.mb3-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:17px 0}
.mb3-controls label{color:#a4c3d6;font-size:11px}
.mb3-controls select{border:1px solid rgba(115,192,255,.2);border-radius:8px;color:#c2e1f1;background:#071423;padding:10px}
.mb3-controls button,.mb3-actions button{border:1px solid rgba(81,213,252,.25);border-radius:9px;padding:11px 13px;color:#d5efff;background:rgba(23,90,128,.25);cursor:pointer;font-size:11px}
.mb3-controls #mb3-start{background:linear-gradient(110deg,#66dfff,#7b9bff);color:#05121c;font-weight:800}
.mb3-actions{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}
.mb3-actions button:disabled{opacity:.4;cursor:default}
.mb3-actions button[hidden]{display:none}
.mb3-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.mb3-stats>div,.mb3-card{border:1px solid rgba(94,193,255,.13);border-radius:12px;padding:13px;background:rgba(4,13,24,.75);min-width:0}
.mb3-stats span{display:block;color:#749ab2;font-size:10px}
.mb3-stats strong{display:block;margin-top:7px;overflow-wrap:anywhere;font-size:12px;color:#a8eeff}
.mb3-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mb3-card h3{font-size:12px;color:#86dfff;margin:0 0 11px}
.mb3-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.85 ui-monospace,Consolas,monospace;color:#b1cad9;max-height:325px;overflow:auto}
.mb3-wide{grid-column:1/-1}
.mb3-foot,.mb3-message{font-size:11px;color:#91adc0;line-height:1.7}
.mb3-message{min-height:18px}
#mb3-panel[hidden]{display:none!important}
@media(max-width:760px){.mb3-grid,.mb3-stats{grid-template-columns:1fr}.mb3-wide{grid-column:auto}}