/* =========================================================
       SECTION
    ========================================================== */

.svx-section {
  --svx-navy: #102f57;
  --svx-text: #203c55;
  --svx-muted: #667e91;

  --svx-blue: #2788d7;
  --svx-teal: #10a8b5;

  --svx-green: #15aa82;
  --svx-red: #eb514d;

  padding: 80px 18px;

  background: radial-gradient(circle at 50% 10%, #ededed, #f9f9f9 55%);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.svx-container {
  width: min(1500px, 100%);

  margin: 0 auto;
}

/* =========================================================
       HEADER
    ========================================================== */

.svx-heading {
  max-width: 820px;

  margin: 0 auto 40px;

  text-align: center;
}

.svx-eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--svx-teal);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.svx-heading h2 sub {
  font-size: 0.55em;
}

.svx-heading p {
  max-width: 760px;

  margin: 15px auto 0;

  color: var(--svx-muted);

  font-size: 17px;

  line-height: 1.65;
}

/* =========================================================
       CARD
    ========================================================== */

.svx-card {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #deeaee;

  border-radius: 28px;

  box-shadow: 0 26px 70px rgba(20, 56, 82, 0.08);
  padding: 40px 70px;
}

.svx-svg-scroll {
  width: 100%;

  overflow-x: auto;
}

.svx-diagram {
  display: block;

  width: 100%;

  min-width: 1080px;

  height: auto;

  background: #ffffff;
}

/* =========================================================
       TYPOGRAPHY
    ========================================================== */

.svx-step-title {
  fill: var(--svx-navy);

  font-size: 21px;

  font-weight: 800;
}

.svx-step-copy {
  fill: #647d92;

  font-size: 14px;

  font-weight: 500;
}

.svx-step-no {
  fill: #ffffff;

  font-size: 24px;

  font-weight: 800;
}

.svx-step-badge {
  fill: url(#svxBlueGradient);
}

/* =========================================================
       STEP CARDS
    ========================================================== */

.svx-step-card {
  fill: #f7fbfc;

  stroke: #dce9ee;

  stroke-width: 1.5;

  transition:
    fill 0.45s ease,
    stroke 0.45s ease,
    filter 0.45s ease;
}

.svx-step.active .svx-step-card {
  fill: #f0fafb;

  stroke: #12a7b4;

  stroke-width: 2.5;

  filter: drop-shadow(0 0 15px rgba(16, 168, 181, 0.2));
}

/* =========================================================
       LIVE PANEL
    ========================================================== */

.svx-live-bg {
  fill: #eaf2f4;
}

.svx-mini-label {
  fill: #698294;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.07em;
}

.svx-live-number {
  fill: #112f39;

  font-size: 31px;

  font-weight: 800;
}

.svx-live-unit {
  fill: #607b8a;

  font-size: 15px;

  font-weight: 700;
}

.svx-threshold-text {
  fill: #173e53;

  font-size: 24px;

  font-weight: 800;
}

/* =========================================================
       SYSTEM STATE
    ========================================================== */

.svx-state-pill {
  fill: #e7f6f2;

  transition: fill 0.5s ease;
}

.svx-state-title {
  fill: #118665;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.04em;

  transition: fill 0.5s ease;
}

.svx-state-sub {
  fill: #70858f;

  font-size: 10px;
}

.svx-diagram[data-fan='on'] .svx-state-pill {
  fill: #fde9dc;
}

.svx-diagram[data-fan='on'] .svx-state-title {
  fill: #d15e1c;
}

/* =========================================================
       BLE
    ========================================================== */

.svx-ble-icon circle {
  fill: #2788df;
}

.svx-ble-icon path {
  fill: none;

  stroke: #ffffff;

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.svx-ble-icon text {
  fill: #2584d4;

  font-size: 14px;

  font-weight: 800;
}

/* =========================================================
       DATA FLOW
    ========================================================== */

.svx-flow {
  fill: none;

  stroke: #2788d7;

  stroke-width: 4;

  stroke-linecap: round;

  stroke-dasharray: 3 12;

  opacity: 0.7;

  animation: svxDataFlow 1.1s linear infinite;
}

.svx-flow-live {
  animation-duration: 0.85s;
}

@keyframes svxDataFlow {
  to {
    stroke-dashoffset: -30;
  }
}

/* =========================================================
       PHONE
    ========================================================== */

.svx-phone-head {
  fill: #ffffff;

  font-size: 12px;

  font-weight: 700;
}

.svx-phone-label {
  fill: #728597;

  font-size: 10px;
}

.svx-phone-value {
  fill: #203a51;

  font-size: 17px;

  font-weight: 800;
}

.svx-phone-status {
  fill: #168d72;

  font-size: 11px;

  font-weight: 700;
}

/* =========================================================
       LED
    ========================================================== */

.svx-controller-led,
.svx-sensor-led {
  transition: filter 0.3s ease;
}

.svx-controller-led {
  animation: svxLedPulse 1.3s ease-in-out infinite;
}

.svx-sensor-led {
  animation: svxLedPulse 1.5s ease-in-out infinite;
}

@keyframes svxLedPulse {
  0%,
  100% {
    opacity: 0.55;

    filter: none;
  }

  50% {
    opacity: 1;

    filter: drop-shadow(0 0 6px #54d276);
  }
}

/* =========================================================
       RELAY
    ========================================================== */

.svx-relay-line {
  fill: none;

  stroke: #98aeb8;

  stroke-width: 4;

  transition:
    stroke 0.4s ease,
    filter 0.4s ease;
}

.svx-relay-label-bg {
  fill: #eef5f7;

  stroke: #d7e5e9;

  transition: fill 0.4s ease;
}

.svx-relay-title {
  fill: #356783;

  font-size: 10px;

  font-weight: 800;
}

.svx-relay-state {
  fill: #82949e;

  font-size: 10px;

  font-weight: 800;
}

.svx-diagram[data-fan='on'] .svx-relay-line {
  stroke: #2788d7;

  stroke-dasharray: 5 9;

  animation: svxRelayFlow 0.65s linear infinite;

  filter: drop-shadow(0 0 4px rgba(39, 136, 215, 0.5));
}

@keyframes svxRelayFlow {
  to {
    stroke-dashoffset: -28;
  }
}

.svx-diagram[data-fan='on'] .svx-relay-label-bg {
  fill: #e9f4fd;
}

/* =========================================================
       FAN
    ========================================================== */

.svx-fan-blades {
  transform-box: fill-box;

  transform-origin: center;
}

.svx-diagram[data-fan='on'] .svx-fan-blades {
  animation: svxFanRotate 0.65s linear infinite;
}

@keyframes svxFanRotate {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
       FAN STATES
    ========================================================== */

.svx-fan-state {
  stroke-width: 2;

  transition:
    fill 0.4s ease,
    stroke 0.4s ease,
    filter 0.4s ease,
    opacity 0.4s ease;
}

.svx-fan-on-box {
  fill: #fff4f3;

  stroke: transparent;

  opacity: 0.45;
}

.svx-fan-off-box {
  fill: #edf9f5;

  stroke: #15aa82;

  filter: drop-shadow(0 0 7px rgba(21, 170, 130, 0.22));
}

.svx-diagram[data-fan='on'] .svx-fan-on-box {
  opacity: 1;

  fill: #fff0ee;

  stroke: #eb514d;

  filter: drop-shadow(0 0 9px rgba(235, 81, 77, 0.25));
}

.svx-diagram[data-fan='on'] .svx-fan-off-box {
  opacity: 0.35;

  stroke: transparent;

  filter: none;
}

.svx-fan-state-title {
  font-size: 11px;

  font-weight: 800;
}

.svx-fan-state-copy {
  fill: #728590;

  font-size: 9px;
}

.svx-red {
  fill: #dc4542;
}

.svx-green {
  fill: #129b77;
}

/* =========================================================
       AIRFLOW
    ========================================================== */

.svx-airflow-path,
.svx-display-flow {
  fill: none;

  stroke: #b7ced4;

  stroke-width: 4;

  stroke-dasharray: 5 10;

  transition:
    stroke 0.4s ease,
    opacity 0.4s ease;
}

.svx-air-arrow {
  fill: none;

  stroke: #19a8c9;

  stroke-width: 6;

  stroke-linecap: round;

  marker-end: url(#svxArrowTeal);
}

.svx-air-arrows {
  opacity: 0.18;
}

.svx-diagram[data-fan='on'] .svx-airflow-path {
  stroke: #11a8b5;

  animation: svxAirFlow 0.65s linear infinite;
}

.svx-diagram[data-fan='on'] .svx-air-arrows {
  opacity: 1;

  animation: svxAirArrows 0.8s ease-in-out infinite alternate;
}

@keyframes svxAirFlow {
  to {
    stroke-dashoffset: -30;
  }
}

@keyframes svxAirArrows {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(11px);
  }
}

/* =========================================================
       DISPLAY
    ========================================================== */

.svx-display-flow {
  stroke: #2788d7;

  animation: svxDataFlow 1.1s linear infinite;
}

.svx-display-label {
  fill: #c3e2ff;

  font-size: 9px;
}

.svx-display-value {
  fill: #ffffff;

  font-size: 28px;

  font-weight: 800;
}

.svx-display-unit {
  fill: #c5e1ff;

  font-size: 8px;
}

.svx-display-small {
  fill: #b9d8f7;

  font-size: 7px;
}

.svx-display-small-value {
  fill: #ffffff;

  font-size: 11px;

  font-weight: 800;
}

/* =========================================================
       BOTTOM EXPLANATION
    ========================================================== */

.svx-bottom {
  padding: 0 30px 27px;
}

.svx-progress {
  height: 4px;

  margin-bottom: 25px;

  overflow: hidden;

  border-radius: 10px;

  background: #e5eef1;
}

.svx-progress span {
  display: block;

  width: 16.666%;

  height: 100%;

  background: linear-gradient(90deg, #10a8b5, #2788d7);

  transition: width 0.45s ease;
}

.svx-bottom-row {
  display: grid;

  grid-template-columns: auto 1fr auto;

  gap: 22px;

  align-items: center;
}

.svx-current-step {
  display: flex;

  width: 68px;
  height: 68px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  background: #eef7fa;

  border-radius: 17px;

  color: var(--svx-blue);
}

.svx-current-step span {
  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

.svx-current-step strong {
  font-size: 29px;
}

.svx-description h3 {
  margin: 0 0 5px;

  color: var(--svx-navy);

  font-size: 21px;
}

.svx-description p {
  max-width: 820px;

  margin: 0;

  color: var(--svx-muted);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
       CONTROLS
    ========================================================== */

.svx-controls {
  display: flex;

  gap: 8px;
}

.svx-controls button {
  width: 42px;
  height: 42px;

  padding: 0;

  cursor: pointer;

  border: 1px solid #dae7eb;

  border-radius: 50%;

  background: #ffffff;

  color: var(--svx-navy);

  font-size: 17px;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.svx-controls button:hover {
  transform: translateY(-2px);

  background: #edf7f9;
}

/* =========================================================
       MOBILE
    ========================================================== */

@media (max-width: 900px) {
  .svx-section {
    padding: 55px 12px;
  }

  .svx-heading {
    text-align: left;
  }

  .svx-heading p {
    margin-left: 0;
  }

  .svx-diagram {
    width: 1100px;

    max-width: none;
  }

  .svx-bottom {
    padding: 0 18px 22px;
  }

  .svx-bottom-row {
    grid-template-columns: auto 1fr;
  }

  .svx-controls {
    grid-column: 1 / -1;

    justify-content: center;
  }
}

/* =========================================================
       REDUCED MOTION
    ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .svx-flow,
  .svx-relay-line,
  .svx-airflow-path,
  .svx-display-flow,
  .svx-fan-blades,
  .svx-air-arrows,
  .svx-controller-led,
  .svx-sensor-led {
    animation: none !important;
  }
}