/* Pulso Studio V1.0.10 — scoped refinements: one stable dark visual identity,
   better mobile hierarchy and a richer, responsive automation concept.
   Loaded after every previous stylesheet to avoid changing established components. */

/* Chrome Android Auto Dark can recolor even a fully designed dark website.
   'only light' opts out of automatic recoloring; the site's explicit CSS palette
   remains dark. Form elements retain their dark native control appearance. */
:root { color-scheme: only light; }
html, body { background-color: #080e1b; }
.project-form, .project-form input, .project-form textarea { color-scheme: dark; }

/* Automation preview: advanced but illustrative, not a live system. */
.flow-concept {
  height: 340px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 47%, #22549c5c 0, transparent 73%),
    linear-gradient(155deg, #182a45 0%, #101a2c 74%, #0e1929 100%);
}
.flow-concept::before {
  content: "";
  position: absolute;
  inset: 35px 0 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #86b7ff 0.75px, transparent 1px);
  background-size: 17px 17px;
  opacity: .13;
  mask-image: radial-gradient(ellipse at center, black 8%, transparent 78%);
}
.flow-concept > * { position: relative; z-index: 1; }
.flow-concept .concept-bar {
  flex: 0 0 auto;
  height: 37px;
  margin-bottom: 15px;
  border-bottom-color: #8ab6ec24;
}
.flow-concept .concept-name {
  color: #c5dbfa;
  letter-spacing: .08em;
  line-height: 1.35;
}
.flow-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #88bfff;
}
.flow-topline > span { display: inline-flex; align-items: center; gap: 7px; }
.flow-topline > small { font-size: 9px; color: #a8bedb; font-weight: 600; letter-spacing: .07em; }
.flow-live-dot {
  display: inline-block;
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #6ddbbf;
  box-shadow: 0 0 0 3px #6ddbbf1c;
}
.flow-concept .flow-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  width: 100%;
  gap: 5px;
  min-width: 0;
  margin-top: 14px;
}
.flow-concept .flow-map > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  height: 102px;
  gap: 4px;
  padding: 8px 3px;
  border: 1px solid #6b95ce65;
  border-radius: 12px;
  background: linear-gradient(150deg, #263e5d, #1a2a44);
  box-shadow: inset 0 1px 0 #ffffff12, 0 10px 20px #050b1952;
  color: #f0f6ff;
  line-height: 1.25;
}
.flow-concept .flow-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #4d88e42b;
  border: 1px solid #82b5ff35;
  margin-bottom: 3px;
}
.flow-concept .flow-map .icon { width: 20px; height: 20px; color: #a7d2ff; }
.flow-concept .flow-map strong { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.flow-concept .flow-map small { font-size: 9px; color: #a9c1df; }
.flow-concept .flow-map > i {
  display: block;
  width: 100%;
  min-width: 0;
  height: 2px;
  background: linear-gradient(90deg, #70b6ff, #5293f0);
  box-shadow: 0 0 7px #5299ff60;
}
.flow-concept .flow-map > i::after {
  width: 5px;
  height: 5px;
  top: -1.5px;
  right: 0;
  border-color: #a4d0ff;
}
.flow-footer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 15px;
  padding: 12px 13px;
  border: 1px solid #6b91c84d;
  border-radius: 10px;
  background: #0b192ab8;
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.flow-footer-label {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.flow-footer-label .icon { flex: 0 0 auto; width: 15px; height: 15px; color: #75d8c4; }
.flow-footer-label strong {
  color: #e3f0ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.flow-footer-label small {
  color: #90b0d5;
  font-size: 9px;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}
.flow-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.flow-progress > i {
  display: block;
  height: 5px;
  border-radius: 6px;
  background: linear-gradient(90deg, #2563c2, #6fa9ff);
  box-shadow: 0 0 10px #326fdc30;
}
.flow-progress > i:last-child { background: linear-gradient(90deg, #397bd0, #6ddbbf); }

/* Mobile only: fewer repeated messages and a form that never squeezes inputs. */
@media (max-width: 760px) {
  .hero-advantages, .hero-footnote { display: none; }
  .hero-layout { gap: 38px; padding-top: 45px; padding-bottom: 51px; }
  .hero-intro { margin-top: 19px; line-height: 1.72; }
  .hero-actions { margin-top: 25px; gap: 16px; }
  .section { padding-block: 61px; }
  .section-head { margin-bottom: 26px; }
  .section-head > p { margin-top: 14px; line-height: 1.65; }
  .examples-grid { gap: 28px; }
  .example-meta { margin-top: 15px; }
  .example-description { margin-top: 5px; }
  .example-label { display: none; }
  .contact-benefits { display: none; }
  .contact-hint { margin-top: 19px; }
  .project-form .form-heading { padding-bottom: 20px; margin-bottom: 22px; }
  .project-form .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 19px;
    align-items: stretch;
    margin-bottom: 23px;
  }
  .project-form .form-row > label { min-width: 0; width: 100%; }
  .project-form .form-row input { width: 100%; min-width: 0; }
  .project-form fieldset { margin-bottom: 22px; }
  .project-form .service-choice > span { min-height: 122px; }
  .flow-concept { height: 314px; }
  .flow-concept .concept-bar { height: 34px; margin-bottom: 12px; }
  .flow-concept .flow-map { margin-top: 12px; }
  .flow-concept .flow-map > span { height: 93px; }
  .flow-concept .flow-map .icon { width: 19px; height: 19px; }
  .flow-concept .flow-node-icon { width: 29px; height: 29px; }
  .flow-footer { margin-top: 13px; }
}
@media (max-width: 500px) {
  .hero-layout { gap: 32px; padding-top: 38px; padding-bottom: 43px; }
  .section { padding-block: 54px; }
  .flow-concept { height: 300px; }
  .flow-concept .concept-name { font-size: 12px; }
  .flow-concept .flow-map {
    grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr) 11px minmax(0, 1fr);
    gap: 4px;
    margin-top: 11px;
  }
  .flow-concept .flow-map > span { height: 90px; padding: 7px 2px; }
  .flow-concept .flow-map strong { font-size: 11px; }
  .flow-concept .flow-map small { font-size: 9px; }
  .flow-concept .flow-topline { margin-top: 11px; }
  .flow-footer { padding: 11px; gap: 9px; margin-top: 12px; }
  .flow-footer-label strong { font-size: 10px; }
  .flow-footer-label small { font-size: 8px; }
}
@media (max-width: 380px) {
  .flow-concept { padding-inline: 18px; }
  .flow-concept .concept-bar { margin-inline: -18px; }
  .flow-concept .flow-node-icon { width: 27px; height: 27px; }
  .flow-concept .flow-map > span { height: 86px; }
  .flow-footer-label { gap: 5px; }
  .flow-footer-label small { font-size: 8px; }
  .project-form .service-choice > span { min-height: 0; }
}