/* Manufacturing Copilot — interactive product tour */

.tour-page {
  background: #F6F9FC;
}

.active-link {
  color: var(--steel-700)!important;
}

.tour-hero {
  position: relative;
  overflow: hidden;
  min-height: 860px;
  padding: 160px 0 100px;
  color: white;
  background:
    radial-gradient(circle at 76% 28%, rgba(77,158,216,.18), transparent 30%),
    linear-gradient(145deg, #050D18, #0A2038 48%, #0C2E4F);
}

.tour-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139,201,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,201,241,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.tour-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .88fr 1.2fr;
  gap: 65px;
  align-items: center;
}

.tour-hero-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 5.2vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.tour-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: #B5C5D4;
  font-size: 1.1rem;
}

.tour-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
  border-top: 1px solid rgba(139,201,241,.16);
}

.tour-hero-stats div {
  padding: 20px 18px 0 0;
}

.tour-hero-stats strong,
.tour-hero-stats span {
  display: block;
}

.tour-hero-stats strong {
  font-size: 1rem;
}

.tour-hero-stats span {
  color: #8299AD;
  font-size: .72rem;
}

.tour-command-visual {
  position: relative;
}

.command-shell {
  overflow: hidden;
  border: 1px solid rgba(139,201,241,.26);
  border-radius: 20px;
  background: #EDF2F6;
  box-shadow: 0 36px 100px rgba(0,0,0,.42);
  transform: perspective(1300px) rotateY(-4deg) rotateX(1.5deg);
}

.command-topbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  background: #071526;
}

.command-topbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 850;
}

.command-topbar img {
  width: 25px;
}

.command-body {
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 430px;
}

.command-body aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  padding-top: 24px;
  background: #0B1E36;
}

.command-body aside span {
  width: 19px;
  height: 19px;
  border: 1px solid #31516F;
  border-radius: 6px;
}

.command-body aside .active {
  border-color: transparent;
  background: linear-gradient(145deg, var(--steel-700), var(--blue-500));
  box-shadow: 0 0 17px rgba(77,158,216,.4);
}

.command-body > section {
  padding: 20px;
  color: var(--navy-900);
}

.command-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.command-heading small,
.command-heading strong {
  display: block;
}

.command-heading small {
  color: var(--silver-700);
  font-size: .53rem;
  letter-spacing: .12em;
}

.command-heading b {
  color: var(--silver-700);
  font-size: .6rem;
}

.command-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 16px;
}

.command-kpis article {
  padding: 13px;
  border: 1px solid #DDE5EC;
  border-radius: 11px;
  background: white;
}

.command-kpis span,
.command-kpis strong,
.command-kpis small {
  display: block;
}

.command-kpis span,
.command-kpis small {
  color: var(--silver-700);
  font-size: .52rem;
}

.command-kpis strong {
  margin: 4px 0;
  font-size: 1rem;
}

.command-lower {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.command-chart,
.command-status {
  padding: 13px;
  border: 1px solid #DDE5EC;
  border-radius: 11px;
  background: white;
}

.command-chart header,
.command-status header {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
}

.command-chart header span,
.command-status header span {
  color: var(--silver-700);
  font-size: .5rem;
}

.line-chart {
  margin-top: 16px;
}

.line-chart svg {
  width: 100%;
  height: 150px;
}

.line-path {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: drawLine 2.2s ease forwards;
}

.area-path {
  fill: url(#tourArea);
  opacity: 0;
  animation: fadeArea .8s ease 1.3s forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fadeArea {
  to { opacity: 1; }
}

.command-status > div {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 3px 7px;
  padding: 10px 0;
  border-bottom: 1px solid #E3E9EE;
  font-size: .56rem;
}

.command-status > div:last-child {
  border-bottom: 0;
}

.command-status small {
  grid-column: 2;
  color: var(--silver-700);
}

.command-status i {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
}

.tour-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(7,21,38,.86);
  box-shadow: 0 18px 48px rgba(0,0,0,.3);
  backdrop-filter: blur(15px);
}

.tour-float-card > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  color: var(--blue-300);
  background: rgba(77,158,216,.14);
}

.tour-float-card small,
.tour-float-card strong {
  display: block;
}

.tour-float-card small {
  color: #859DB1;
  font-size: .55rem;
}

.tour-float-card strong {
  font-size: .74rem;
}

.float-a {
  right: -28px;
  top: 52px;
  animation: float 4.4s ease-in-out infinite;
}

.float-b {
  left: -30px;
  bottom: 52px;
  animation: float 5.1s ease-in-out infinite reverse;
}

.guided-tour-section {
  padding: 105px 0;
}

.guided-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}

.guided-header h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.tour-progress-wrap {
  min-width: 260px;
}

.tour-progress-wrap > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.tour-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--silver-200);
}

.tour-progress i {
  display: block;
  width: 11.111%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel-700), var(--blue-500));
  transition: width .3s ease;
}

.guided-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: 0 30px 80px rgba(11,30,54,.1);
}

.tour-step-nav {
  padding: 12px;
  border-right: 1px solid var(--line);
  background: #F8FAFC;
}

.tour-step {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0 11px;
  padding: 13px;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.tour-step span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--steel-700);
  background: rgba(77,158,216,.1);
  font-size: .64rem;
  font-weight: 900;
}

.tour-step b {
  color: var(--navy-900);
  font-size: .82rem;
}

.tour-step small {
  font-size: .62rem;
}

.tour-step:hover,
.tour-step.active {
  background: white;
  box-shadow: 0 10px 25px rgba(11,30,54,.08);
}

.tour-step.active span {
  color: white;
  background: linear-gradient(145deg, var(--steel-700), var(--blue-500));
}

.tour-stage {
  min-width: 0;
}

.tour-panel {
  display: none;
  grid-template-columns: .9fr 1.1fr;
  min-height: 540px;
}

.tour-panel.active {
  display: grid;
  animation: panelIn .35s ease both;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-panel-copy {
  padding: 52px;
}

.tour-panel-copy h3 {
  margin: 20px 0 14px;
  color: var(--navy-900);
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.tour-panel-copy p {
  color: var(--muted);
}

.tour-panel-visual {
  display: grid;
  place-items: center;
  padding: 40px;
  background: linear-gradient(145deg, #E7EDF3, #F7FAFC);
}

.dark-visual {
  background: linear-gradient(145deg, #08182A, #123654);
}

.login-demo,
.production-demo,
.admin-demo,
.ai-demo {
  width: min(100%, 440px);
  padding: 26px;
  border: 1px solid rgba(139,201,241,.18);
  border-radius: 18px;
  color: white;
  background: rgba(7,22,38,.84);
  box-shadow: 0 28px 75px rgba(0,0,0,.24);
}

.login-demo img {
  width: 280px;
  margin: 0 auto 22px;
}

.login-demo label {
  display: block;
  margin-bottom: 12px;
  color: #91A7BA;
  font-size: .68rem;
  font-weight: 800;
}

.login-demo input,
.login-demo select {
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  border: 1px solid #2C4B66;
  border-radius: 9px;
  color: white;
  background: #0B2037;
}

.login-demo button,
.production-demo button {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, var(--steel-700), var(--blue-500));
  font-weight: 850;
}

.dashboard-demo {
  width: min(100%, 510px);
}

.demo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 11px;
}

.demo-kpi-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
  box-shadow: 0 12px 28px rgba(11,30,54,.07);
}

.demo-kpi-grid span,
.demo-kpi-grid strong,
.demo-kpi-grid small {
  display: block;
}

.demo-kpi-grid span,
.demo-kpi-grid small {
  color: var(--muted);
  font-size: .68rem;
}

.demo-kpi-grid strong {
  margin: 5px 0;
  color: var(--navy-900);
  font-size: 1.5rem;
}

.demo-chart {
  height: 180px;
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 13px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
}

.demo-chart span {
  flex: 1;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(to top, var(--steel-700), var(--blue-500));
  transform-origin: bottom;
  animation: barGrow .7s ease both;
}

@keyframes barGrow {
  from { transform: scaleY(.05); }
  to { transform: scaleY(1); }
}

.production-demo header {
  display: flex;
  justify-content: space-between;
  color: #9AB0C3;
  font-size: .75rem;
}

.production-demo header strong {
  color: white;
}

.production-meta {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.production-meta span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #9DB1C4;
  background: rgba(255,255,255,.06);
  font-size: .62rem;
}

.production-fields {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px;
  margin-top: 20px;
}

.production-fields label {
  padding: 12px;
  border: 1px solid rgba(139,201,241,.14);
  border-radius: 10px;
  color: #7F98AD;
  font-size: .62rem;
}

.production-fields b {
  display: block;
  margin-top: 4px;
  color: white;
  font-size: .95rem;
}

#production-save-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #7EE2A9;
  font-size: .7rem;
}

.supervisor-board {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.supervisor-board article {
  padding: 20px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 12px 28px rgba(11,30,54,.06);
}

.supervisor-board span,
.supervisor-board strong,
.supervisor-board small {
  display: block;
}

.supervisor-board span,
.supervisor-board small {
  color: var(--muted);
  font-size: .67rem;
}

.supervisor-board strong {
  margin: 5px 0;
  color: var(--navy-900);
}

.state-running { border-left-color: var(--green)!important; }
.state-warning { border-left-color: var(--amber)!important; }
.state-stopped { border-left-color: var(--red)!important; }

.quality-demo {
  width: min(100%, 500px);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 26px;
  align-items: center;
}

.quality-gauge {
  display: grid;
  place-items: center;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--navy-900);
  background:
    radial-gradient(circle at center, white 58%, transparent 59%),
    conic-gradient(var(--blue-500) 0 98.2%, var(--silver-200) 98.2%);
}

.quality-gauge span,
.quality-gauge small {
  grid-area: 1/1;
}

.quality-gauge span {
  font-size: 2rem;
  font-weight: 900;
}

.quality-gauge small {
  margin-top: 58px;
  color: var(--muted);
  font-size: .62rem;
}

.pareto {
  display: grid;
  gap: 14px;
}

.pareto > div {
  display: grid;
  grid-template-columns: 86px 1fr 28px;
  gap: 8px;
  align-items: center;
  font-size: .65rem;
}

.pareto i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--silver-200);
}

.pareto b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel-700), var(--blue-500));
}

.report-visual {
  background: linear-gradient(145deg, #DCE5ED, #F8FAFC);
}

.report-stack {
  width: min(100%, 500px);
  display: grid;
  gap: 13px;
}

.report-stack article {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 15px 35px rgba(11,30,54,.08);
}

.report-stack article > span {
  display: grid;
  place-items: center;
  width: 45px;
  height: 55px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(145deg, var(--steel-700), var(--blue-500));
  font-size: .65rem;
  font-weight: 900;
}

.report-stack strong,
.report-stack small {
  display: block;
}

.report-stack small {
  color: var(--muted);
}

.admin-demo {
  display: grid;
  gap: 10px;
}

.admin-demo div {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid rgba(139,201,241,.14);
  border-radius: 10px;
  color: #94A9BC;
}

.admin-demo strong {
  color: white;
}

.admin-demo .healthy {
  color: #7EE2A9;
}

.engineering-demo {
  position: relative;
  width: min(100%, 500px);
}

.simulation-card {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 20px 55px rgba(11,30,54,.1);
}

.simulation-card > span,
.simulation-card > strong,
.simulation-card > small {
  display: block;
}

.simulation-card > span,
.simulation-card > small {
  color: var(--muted);
}

.simulation-card > strong {
  margin-top: 5px;
  color: var(--navy-900);
  font-size: 1.7rem;
}

.simulation-bars {
  height: 170px;
  display: flex;
  align-items: end;
  gap: 7px;
  margin: 25px 0 15px;
}

.simulation-bars i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, var(--steel-700), var(--blue-500));
}

.coming-soon {
  position: absolute;
  top: -12px;
  right: -10px;
  padding: 8px 12px;
  border-radius: 999px;
  color: white;
  background: var(--amber);
  font-size: .68rem;
  font-weight: 900;
}

.ai-question {
  padding: 14px;
  border: 1px solid rgba(139,201,241,.14);
  border-radius: 11px;
  color: white;
  background: rgba(255,255,255,.04);
}

.ai-answer {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  margin-top: 13px;
  padding: 15px;
  border-radius: 11px;
  background: rgba(77,158,216,.09);
}

.ai-answer p {
  margin: 0;
  color: #B7C8D6;
  font-size: .8rem;
}

.ai-spark {
  color: var(--blue-300);
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.ai-actions span {
  padding: 7px 9px;
  border: 1px solid rgba(139,201,241,.14);
  border-radius: 999px;
  color: #98AFC2;
  font-size: .62rem;
}

.future-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #17233A;
  background: var(--blue-300);
  font-size: .63rem;
}

.tour-controls {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: #FAFBFC;
}

.tour-control {
  min-height: 44px;
  padding: 0 17px;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, var(--steel-700), var(--blue-500));
  font-weight: 850;
  cursor: pointer;
}

.secondary-control {
  color: var(--navy-900);
  background: white;
  border: 1px solid var(--line);
}

.tour-explorer-section {
  padding: 105px 0;
  background: white;
}

.explorer-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #F8FAFC;
  box-shadow: 0 25px 65px rgba(11,30,54,.08);
}

.explorer-buttons {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  border-bottom: 1px solid var(--line);
}

.explorer-button {
  padding: 18px;
  color: var(--muted);
  background: transparent;
  border-bottom: 3px solid transparent;
  font-weight: 850;
  cursor: pointer;
}

.explorer-button.active {
  color: var(--steel-700);
  background: white;
  border-bottom-color: var(--blue-500);
}

.explorer-content {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: center;
  padding: 55px;
  background: white;
}

.explorer-content h3 {
  margin: 18px 0 12px;
  color: var(--navy-900);
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.08;
}

.explorer-content p {
  color: var(--muted);
}

.explorer-metric {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, #EEF3F7, #FBFCFD);
}

.explorer-metric span,
.explorer-metric strong,
.explorer-metric small {
  display: block;
}

.explorer-metric span,
.explorer-metric small {
  color: var(--muted);
  font-size: .68rem;
}

.explorer-metric strong {
  margin: 8px 0;
  color: var(--navy-900);
  font-size: 1.55rem;
}

.tour-flow-section {
  padding: 105px 0;
  color: white;
  background: linear-gradient(145deg, #06101E, #0C2A49);
}

.tour-flow-section h2 {
  color: white;
}

.flow-diagram {
  display: grid;
  grid-template-columns: repeat(9, auto);
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.flow-diagram > div {
  width: 170px;
  min-height: 145px;
  padding: 20px;
  border: 1px solid rgba(139,201,241,.16);
  border-radius: 15px;
  background: rgba(7,22,38,.7);
}

.flow-diagram > div > span,
.flow-diagram strong,
.flow-diagram small {
  display: block;
}

.flow-diagram > div > span {
  color: var(--blue-300);
  font-size: .66rem;
  font-weight: 900;
}

.flow-diagram strong {
  margin: 15px 0 7px;
}

.flow-diagram small {
  color: #96A9BA;
}

.flow-diagram > i {
  color: var(--blue-300);
  font-style: normal;
}

.tour-cta-section {
  padding: 85px 0;
  background: linear-gradient(135deg, #E7EEF4, #F8FAFC);
}

.tour-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.tour-cta h2 {
  max-width: 760px;
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  line-height: 1.05;
}

.tour-cta p:not(.eyebrow) {
  max-width: 800px;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .tour-hero-grid,
  .tour-panel,
  .explorer-content {
    grid-template-columns: 1fr;
  }

  .guided-shell {
    grid-template-columns: 1fr;
  }

  .tour-step-nav {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .flow-diagram {
    grid-template-columns: repeat(5,1fr);
  }

  .flow-diagram > div {
    width: auto;
  }

  .flow-diagram > i {
    display: none;
  }
}

@media (max-width: 820px) {
  .tour-hero-stats,
  .command-kpis,
  .command-lower,
  .explorer-buttons {
    grid-template-columns: repeat(2,1fr);
  }

  .tour-step-nav {
    grid-template-columns: repeat(2,1fr);
  }

  .guided-header,
  .tour-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .quality-demo {
    grid-template-columns: 1fr;
  }

  .quality-gauge {
    margin: auto;
  }

  .flow-diagram {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 620px) {
  .tour-hero {
    padding-top: 125px;
  }

  .tour-hero-copy h1 {
    font-size: 3rem;
  }

  .command-shell {
    transform: none;
  }

  .tour-float-card {
    display: none;
  }

  .command-body {
    grid-template-columns: 36px 1fr;
  }

  .command-kpis,
  .command-lower,
  .tour-hero-stats,
  .tour-step-nav,
  .demo-kpi-grid,
  .production-fields,
  .supervisor-board,
  .explorer-buttons,
  .flow-diagram {
    grid-template-columns: 1fr;
  }

  .tour-panel-copy,
  .tour-panel-visual,
  .explorer-content {
    padding: 28px 22px;
  }

  .tour-progress-wrap {
    min-width: 0;
  }
}