/* ==========================================================================
   GeekFriends
   Automatic Irrigation Controller Detail
   GF-WEB-3E
   ========================================================================== */

.ctrl-page {
  --ctrl-purple: #4800B9;
  --ctrl-purple-dark: #300079;
  --ctrl-purple-soft: #F3EEFF;
  --ctrl-ink: #15151A;
  --ctrl-text: #51515C;
  --ctrl-muted: #7D7D88;
  --ctrl-line: #E8E7ED;
  --ctrl-dark: #17151B;
  --ctrl-green: #4B8D6B;
  --ctrl-max: 1240px;

  color: var(--ctrl-ink);
  background: #fff;
}

.ctrl-page *,
.ctrl-page *::before,
.ctrl-page *::after {
  box-sizing: border-box;
}

.ctrl-shell {
  width: min(
    calc(100% - 64px),
    var(--ctrl-max)
  );
  margin-inline: auto;
}

.ctrl-section {
  padding: 136px 0;
}

.ctrl-eyebrow {
  margin: 0 0 24px;
  color: var(--ctrl-purple);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .16em;
}

.ctrl-section-heading {
  max-width: 760px;
}

.ctrl-section-heading--wide {
  max-width: 940px;
}

.ctrl-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.ctrl-section-heading h2 {
  margin: 0;

  font-size:
    clamp(
      42px,
      5vw,
      68px
    );

  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.045em;

  word-break: keep-all;
}

.ctrl-section-heading > p:last-child {
  max-width: 720px;
  margin: 28px 0 0;

  color: var(--ctrl-text);

  font-size: 18px;
  line-height: 1.82;
}

.ctrl-section-heading--center > p:last-child {
  margin-inline: auto;
}

.ctrl-btn {
  display: inline-flex;

  min-height: 54px;

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

  padding: 0 26px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 750;
  line-height: 1;

  text-decoration: none;

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.ctrl-btn:hover {
  transform: translateY(-2px);
}

.ctrl-btn--primary {
  color: #fff;
  background: var(--ctrl-purple);
}

.ctrl-btn--primary:hover {
  color: #fff;
  background: var(--ctrl-purple-dark);
}

.ctrl-btn--ghost {
  color: var(--ctrl-ink);
  border-color: #DADAE2;
  background: rgba(255,255,255,.76);
}

.ctrl-btn--ghost:hover {
  color: var(--ctrl-purple);
  border-color: var(--ctrl-purple);
}

.ctrl-btn--white {
  color: var(--ctrl-purple);
  background: #fff;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.ctrl-hero {
  position: relative;
  overflow: hidden;

  padding:
    110px 0 120px;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(72,0,185,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FAF9FD 100%
    );
}

.ctrl-hero::after {
  position: absolute;
  right: -260px;
  bottom: -360px;

  width: 760px;
  height: 760px;

  border:
    1px solid rgba(72,0,185,.09);

  border-radius: 50%;
  content: "";
}

.ctrl-hero__grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, .96fr)
    minmax(470px, 1.04fr);

  gap: 76px;
  align-items: center;
}

.ctrl-hero__content h1 {
  max-width: 700px;
  margin: 0;

  font-size:
    clamp(
      56px,
      6.5vw,
      88px
    );

  font-weight: 780;
  line-height: .98;
  letter-spacing: -.055em;

  word-break: keep-all;
}

.ctrl-hero__content h1 span {
  display: block;

  margin-top: 20px;

  color: var(--ctrl-purple);

  font-size: .58em;
  line-height: 1.08;
}

.ctrl-hero__lead {
  max-width: 650px;
  margin: 34px 0 0;

  color: var(--ctrl-text);

  font-size: 19px;
  line-height: 1.82;
}

.ctrl-hero__lead strong {
  color: var(--ctrl-ink);
}

.ctrl-hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;
  margin-top: 38px;
}

.ctrl-hero__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;
  margin-top: 38px;
}

.ctrl-hero__meta span {
  padding: 9px 13px;

  border:
    1px solid #E3E0EA;

  border-radius: 999px;

  color: #62616B;

  background:
    rgba(255,255,255,.76);

  font-size: 12px;
  font-weight: 700;
}


/* Hero controller visual */

.ctrl-console {
  position: relative;
  overflow: hidden;

  min-height: 570px;
  padding: 30px;

  border:
    1px solid rgba(72,0,185,.13);

  border-radius: 34px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(246,242,255,.92)
    );

  box-shadow:
    0 32px 80px rgba(40,19,72,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.ctrl-console::before {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(72,0,185,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(72,0,185,.045) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  content: "";

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 76%
    );
}

.ctrl-console__head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-console__head > div span {
  display: block;

  color: #8C8497;

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ctrl-console__head > div strong {
  display: block;

  margin-top: 6px;

  font-size: 17px;
}

.ctrl-status {
  padding: 8px 11px;

  border-radius: 999px;

  color: var(--ctrl-green);

  background:
    rgba(75,141,107,.10);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.ctrl-controller-box {
  position: relative;
  z-index: 2;

  width: min(78%, 360px);

  margin:
    46px auto 34px;

  padding: 22px;

  border:
    1px solid rgba(30,28,35,.14);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #EFEFF2,
      #DCDDE2
    );

  box-shadow:
    0 24px 55px rgba(26,20,33,.15);
}

.ctrl-controller-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 18px;

  border-bottom:
    1px solid rgba(24,24,30,.12);
}

.ctrl-controller-box__header span {
  color: #77747B;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ctrl-controller-box__header strong {
  color: var(--ctrl-purple);

  font-size: 11px;
  letter-spacing: .10em;
}

.ctrl-controller-box__panel {
  display: grid;

  grid-template-columns:
    90px 1fr;

  gap: 20px;
  align-items: center;

  padding-top: 26px;
}

.ctrl-power {
  display: flex;

  min-height: 110px;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(20,20,26,.10);

  border-radius: 16px;

  background:
    rgba(255,255,255,.52);
}

.ctrl-power i {
  width: 15px;
  height: 15px;

  border-radius: 50%;

  background:
    var(--ctrl-green);

  box-shadow:
    0 0 0 7px rgba(75,141,107,.10);
}

.ctrl-power span {
  margin-top: 17px;

  color: #706D76;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
}

.ctrl-terminal-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}

.ctrl-terminal-grid i {
  display: block;

  height: 48px;

  border:
    1px solid rgba(20,20,26,.13);

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      #36343C,
      #242229
    );

  box-shadow:
    inset 0 0 0 7px #E6E6E9;
}

.ctrl-console__outputs {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}

.ctrl-console__outputs > div {
  padding: 17px;

  border:
    1px solid #E7E2EF;

  border-radius: 15px;

  background:
    rgba(255,255,255,.76);
}

.ctrl-console__outputs span {
  display: block;

  color: #958D9F;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-console__outputs strong {
  display: block;

  margin-top: 7px;

  font-size: 13px;
}

.ctrl-console__signal {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 11px;

  margin-top: 12px;
  padding: 17px 19px;

  border-radius: 15px;

  color: #fff;
  background: #18151E;
}

.ctrl-console__signal span,
.ctrl-console__signal strong {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}

.ctrl-console__signal span {
  color: rgba(255,255,255,.48);
}

.ctrl-console__signal strong {
  margin-left: auto;

  color: #BA93F2;
}

.ctrl-console__signal i {
  flex: 1;

  height: 1px;

  background:
    rgba(255,255,255,.16);
}


/* ==========================================================================
   Monitoring to action
   ========================================================================== */

.ctrl-problem {
  background: #fff;
}

.ctrl-problem-flow {
  display: grid;

  grid-template-columns:
    1fr 70px
    1fr 70px
    1fr;

  gap: 16px;
  align-items: center;

  margin-top: 72px;
}

.ctrl-problem-flow article {
  min-height: 260px;
  padding: 30px;

  border:
    1px solid var(--ctrl-line);

  border-radius: 26px;

  background: #FAFAFC;
}

.ctrl-problem-flow article.is-primary {
  border-color:
    rgba(72,0,185,.22);

  color: #fff;

  background:
    linear-gradient(
      150deg,
      #4800B9,
      #310077
    );
}

.ctrl-problem-flow article > span {
  color: var(--ctrl-purple);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ctrl-problem-flow article.is-primary > span {
  color:
    rgba(255,255,255,.52);
}

.ctrl-problem-flow article > strong {
  display: block;

  margin-top: 48px;

  color: #A6A1AD;

  font-size: 11px;
  letter-spacing: .12em;
}

.ctrl-problem-flow article.is-primary > strong {
  color:
    rgba(255,255,255,.56);
}

.ctrl-problem-flow h3 {
  margin: 8px 0 0;

  font-size: 27px;
  letter-spacing: -.03em;
}

.ctrl-problem-flow p {
  margin: 13px 0 0;

  color: var(--ctrl-muted);

  font-size: 14px;
  line-height: 1.65;
}

.ctrl-problem-flow article.is-primary p {
  color:
    rgba(255,255,255,.67);
}

.ctrl-problem-flow > div {
  color: #A29BAE;

  font-size: 28px;
  text-align: center;
}


/* ==========================================================================
   Control target
   ========================================================================== */

.ctrl-targets {
  background: #F8F8FA;
}

.ctrl-target-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  margin-top: 70px;
}

.ctrl-target-card {
  min-height: 370px;
  padding: 30px;

  border:
    1px solid #E5E4E9;

  border-radius: 26px;

  background: #fff;
}

.ctrl-target-icon {
  display: grid;

  width: 90px;
  height: 90px;

  place-items: center;

  border-radius: 24px;

  background:
    var(--ctrl-purple-soft);
}

.ctrl-target-icon span {
  color: var(--ctrl-purple);

  font-size: 24px;
  font-weight: 850;
}

.ctrl-target-icon--main {
  background:
    #F0EFF4;
}

.ctrl-target-icon--main span {
  color: #57535E;
}

.ctrl-target-icon--zone {
  background:
    rgba(75,141,107,.10);
}

.ctrl-target-icon--zone span {
  color: var(--ctrl-green);
}

.ctrl-target-no {
  margin: 38px 0 0;

  color: #96909E;

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ctrl-target-card h3 {
  margin: 10px 0 0;

  font-size: 27px;
  letter-spacing: -.03em;
}

.ctrl-target-card > p:last-child {
  margin: 16px 0 0;

  color: var(--ctrl-muted);

  font-size: 14px;
  line-height: 1.72;
}


/* ==========================================================================
   Control logic
   ========================================================================== */

.ctrl-logic {
  color: #fff;
  background: var(--ctrl-dark);
}

.ctrl-logic .ctrl-eyebrow {
  color: #AD82ED;
}

.ctrl-logic
.ctrl-section-heading > p:last-child {
  color:
    rgba(255,255,255,.60);
}

.ctrl-logic-board {
  margin-top: 70px;
  padding: 32px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 30px;

  background:
    rgba(255,255,255,.035);
}

.ctrl-logic-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-logic-board__head > div span {
  display: block;

  color:
    rgba(255,255,255,.40);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ctrl-logic-board__head > div strong {
  display: block;

  margin-top: 7px;

  font-size: 20px;
}

.ctrl-chip {
  padding: 8px 12px;

  border-radius: 999px;

  color: #BE9AF4;

  background:
    rgba(72,0,185,.30);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.ctrl-logic-map {
  display: grid;

  grid-template-columns:
    220px 110px 1fr;

  gap: 0;
  align-items: center;

  margin-top: 50px;
}

.ctrl-logic-source {
  display: flex;

  min-height: 230px;

  flex-direction: column;
  justify-content: flex-end;

  padding: 27px;

  border:
    1px solid rgba(170,125,239,.48);

  border-radius: 22px;

  background:
    linear-gradient(
      155deg,
      rgba(72,0,185,.56),
      rgba(72,0,185,.20)
    );
}

.ctrl-logic-source span {
  color:
    rgba(255,255,255,.46);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ctrl-logic-source strong {
  margin-top: 7px;

  font-size: 20px;
}

.ctrl-logic-lines {
  position: relative;

  height: 230px;
}

.ctrl-logic-lines::before {
  position: absolute;

  top: 50%;
  left: 0;
  right: 50%;

  height: 1px;

  background:
    rgba(255,255,255,.20);

  content: "";
}

.ctrl-logic-lines::after {
  position: absolute;

  top: 17%;
  right: 50%;

  width: 1px;
  height: 66%;

  background:
    rgba(255,255,255,.20);

  content: "";
}

.ctrl-logic-lines i {
  position: absolute;

  left: 50%;
  right: 0;

  height: 1px;

  background:
    rgba(255,255,255,.20);
}

.ctrl-logic-lines i:nth-child(1) {
  top: 17%;
}

.ctrl-logic-lines i:nth-child(2) {
  top: 50%;
}

.ctrl-logic-lines i:nth-child(3) {
  top: 83%;
}

.ctrl-logic-outputs {
  display: grid;
  gap: 10px;
}

.ctrl-logic-outputs article {
  position: relative;

  padding: 20px 56px 20px 22px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 17px;

  background:
    rgba(255,255,255,.04);
}

.ctrl-logic-outputs article span {
  display: block;

  color:
    rgba(255,255,255,.37);

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-logic-outputs article strong {
  display: block;

  margin-top: 6px;

  font-size: 15px;
}

.ctrl-output-state {
  position: absolute;

  top: 50%;
  right: 22px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #8E5CDC;

  box-shadow:
    0 0 0 6px rgba(142,92,220,.12);

  transform: translateY(-50%);
}

.ctrl-logic-note {
  margin: 34px 0 0;

  color:
    rgba(255,255,255,.44);

  font-size: 13px;
  line-height: 1.75;
}


/* ==========================================================================
   Zone control
   ========================================================================== */

.ctrl-zone {
  background: #fff;
}

.ctrl-zone__grid {
  display: grid;

  grid-template-columns:
    .78fr 1.22fr;

  gap: 82px;
  align-items: center;
}

.ctrl-check-list {
  display: grid;
  gap: 12px;

  margin: 34px 0 0;
  padding: 0;

  list-style: none;
}

.ctrl-check-list li {
  position: relative;

  padding-left: 26px;

  color: #45444D;

  font-size: 14px;
  font-weight: 650;
}

.ctrl-check-list li::before {
  position: absolute;

  top: .5em;
  left: 0;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--ctrl-purple);

  box-shadow:
    0 0 0 5px var(--ctrl-purple-soft);

  content: "";
}

.ctrl-zone-panel {
  padding: 28px;

  border:
    1px solid #E5E3EA;

  border-radius: 28px;

  background: #FAFAFC;

  box-shadow:
    0 26px 74px rgba(28,22,37,.08);
}

.ctrl-zone-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-zone-panel__head > div span {
  display: block;

  color: #98919F;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ctrl-zone-panel__head > div strong {
  display: block;

  margin-top: 7px;

  font-size: 18px;
}

.ctrl-zone-panel__head > span {
  padding: 8px 12px;

  border-radius: 999px;

  color: var(--ctrl-purple);

  background:
    var(--ctrl-purple-soft);

  font-size: 9px;
  font-weight: 850;
}

.ctrl-zone-map {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;

  margin-top: 26px;
}

.ctrl-zone-map article {
  position: relative;

  min-height: 150px;

  padding: 22px;

  overflow: hidden;

  border:
    1px solid #E6E4EA;

  border-radius: 18px;

  background: #fff;
}

.ctrl-zone-map article.active {
  border-color:
    rgba(72,0,185,.30);

  background:
    linear-gradient(
      145deg,
      #F8F4FF,
      #EEE5FF
    );
}

.ctrl-zone-map span {
  display: block;

  color: #9A949F;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-zone-map strong {
  display: block;

  margin-top: 9px;

  font-size: 16px;
}

.ctrl-zone-map article i {
  position: absolute;

  right: 19px;
  bottom: 19px;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background: #CFCDD3;
}

.ctrl-zone-map article.active i {
  background:
    var(--ctrl-purple);

  box-shadow:
    0 0 0 6px rgba(72,0,185,.10);
}

.ctrl-zone-data {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 12px;
}

.ctrl-zone-data > div {
  padding: 17px 18px;

  border-radius: 14px;

  background: #fff;
}

.ctrl-zone-data span {
  display: block;

  color: #9B96A0;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-zone-data strong {
  display: block;

  margin-top: 6px;

  font-size: 12px;
}


/* ==========================================================================
   Closed loop
   ========================================================================== */

.ctrl-loop {
  background:
    linear-gradient(
      180deg,
      #FBFAFE 0%,
      #F2EDFC 100%
    );
}

.ctrl-loop-chain {
  display: grid;

  grid-template-columns:
    1fr 28px
    1fr 28px
    1fr 28px
    1fr 28px
    1fr;

  gap: 8px;
  align-items: center;

  margin-top: 72px;
}

.ctrl-loop-chain article {
  min-height: 260px;
  padding: 22px;

  border:
    1px solid rgba(72,0,185,.10);

  border-radius: 22px;

  background:
    rgba(255,255,255,.86);
}

.ctrl-loop-chain article.is-primary {
  color: #fff;

  border-color:
    transparent;

  background:
    var(--ctrl-purple);
}

.ctrl-loop-no {
  color: var(--ctrl-purple);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ctrl-loop-chain article.is-primary
.ctrl-loop-no {
  color:
    rgba(255,255,255,.55);
}

.ctrl-loop-icon {
  display: grid;

  height: 92px;

  place-items: center;

  margin-top: 27px;

  border-radius: 17px;

  background:
    #F3EFF8;
}

.ctrl-loop-chain article.is-primary
.ctrl-loop-icon {
  background:
    rgba(255,255,255,.11);
}

.ctrl-loop-icon strong {
  color: var(--ctrl-purple);

  font-size: 11px;
  letter-spacing: .09em;
}

.ctrl-loop-chain article.is-primary
.ctrl-loop-icon strong {
  color: #fff;
}

.ctrl-loop-chain h3 {
  margin: 23px 0 0;

  font-size: 17px;

  word-break: keep-all;
}

.ctrl-loop-chain p {
  margin: 8px 0 0;

  color: var(--ctrl-muted);

  font-size: 12px;
  line-height: 1.55;
}

.ctrl-loop-chain article.is-primary p {
  color:
    rgba(255,255,255,.65);
}

.ctrl-loop-arrow {
  color: #9A8CAD;
  text-align: center;
}

.ctrl-loop-message {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-top: 35px;
  padding: 25px 28px;

  border-radius: 20px;

  color: #fff;

  background:
    var(--ctrl-purple);
}

.ctrl-loop-message span {
  color:
    rgba(255,255,255,.52);

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ctrl-loop-message strong {
  font-size: 17px;

  word-break: keep-all;
}


/* ==========================================================================
   Monitoring
   ========================================================================== */

.ctrl-monitor {
  background: #fff;
}

.ctrl-monitor__grid {
  display: grid;

  grid-template-columns:
    .76fr 1.24fr;

  gap: 76px;
  align-items: center;
}

.ctrl-monitor-card {
  padding: 28px;

  border:
    1px solid #E5E3EA;

  border-radius: 28px;

  background: #FAFAFC;

  box-shadow:
    0 26px 74px rgba(28,22,37,.08);
}

.ctrl-monitor-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-monitor-card__head > div span {
  display: block;

  color: #99939F;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ctrl-monitor-card__head > div strong {
  display: block;

  margin-top: 7px;

  font-size: 18px;
}

.ctrl-monitor-status {
  padding: 8px 11px;

  border-radius: 999px;

  color: var(--ctrl-purple);

  background:
    var(--ctrl-purple-soft);

  font-size: 9px;
  font-weight: 850;
}

.ctrl-monitor-flow {
  display: grid;

  grid-template-columns:
    1fr 22px
    1fr 22px
    1fr 22px
    1fr;

  gap: 5px;
  align-items: center;

  margin-top: 30px;
}

.ctrl-monitor-flow article {
  min-height: 145px;
  padding: 17px;

  border:
    1px solid #E7E5EA;

  border-radius: 16px;

  background: #fff;
}

.ctrl-monitor-flow article.active {
  color: #fff;

  border-color: transparent;

  background:
    var(--ctrl-purple);
}

.ctrl-monitor-flow article span {
  color: #A19BA6;

  font-size: 8px;
  font-weight: 850;
}

.ctrl-monitor-flow article.active span {
  color:
    rgba(255,255,255,.54);
}

.ctrl-monitor-flow article strong {
  display: block;

  margin-top: 35px;

  font-size: 13px;
}

.ctrl-monitor-flow article p {
  margin: 7px 0 0;

  color: #99939F;

  font-size: 10px;
  line-height: 1.45;
}

.ctrl-monitor-flow article.active p {
  color:
    rgba(255,255,255,.62);
}

.ctrl-monitor-flow > i {
  color: #A29AAE;

  font-style: normal;
  text-align: center;
}

.ctrl-monitor-response {
  display: grid;

  grid-template-columns:
    220px 1fr;

  gap: 24px;
  align-items: center;

  margin-top: 14px;
  padding: 18px;

  border-radius: 15px;

  background:
    var(--ctrl-purple-soft);
}

.ctrl-monitor-response span {
  display: block;

  color: #8C819D;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-monitor-response strong {
  display: block;

  margin-top: 6px;

  color: var(--ctrl-purple);

  font-size: 12px;
}

.ctrl-response-lines {
  display: flex;
  align-items: center;

  gap: 8px;
}

.ctrl-response-lines i {
  display: block;

  height: 5px;

  border-radius: 999px;

  background:
    rgba(72,0,185,.18);
}

.ctrl-response-lines i:nth-child(1) {
  width: 34%;
}

.ctrl-response-lines i:nth-child(2) {
  width: 44%;

  background:
    rgba(72,0,185,.40);
}

.ctrl-response-lines i:nth-child(3) {
  width: 22%;
}


/* ==========================================================================
   Field configuration
   ========================================================================== */

.ctrl-field {
  background: #F8F8FA;
}

.ctrl-field-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  margin-top: 68px;
}

.ctrl-field-grid article {
  min-height: 270px;
  padding: 30px;

  border:
    1px solid #E6E5EA;

  border-radius: 24px;

  background: #fff;
}

.ctrl-field-grid article > span {
  color: var(--ctrl-purple);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .10em;
}

.ctrl-field-grid h3 {
  margin: 74px 0 0;

  font-size: 25px;
}

.ctrl-field-grid p {
  margin: 14px 0 0;

  color: var(--ctrl-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* ==========================================================================
   Connected system
   ========================================================================== */

.ctrl-system {
  color: #fff;
  background: var(--ctrl-dark);
}

.ctrl-system .ctrl-eyebrow {
  color: #AE82EE;
}

.ctrl-system
.ctrl-section-heading > p:last-child {
  color:
    rgba(255,255,255,.60);
}

.ctrl-system-flow {
  display: grid;

  grid-template-columns:
    1fr 25px
    1fr 25px
    1fr 25px
    1fr 25px
    1fr;

  gap: 8px;
  align-items: center;

  margin-top: 72px;
}

.ctrl-system-flow article {
  min-height: 235px;
  padding: 21px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 21px;

  background:
    rgba(255,255,255,.035);
}

.ctrl-system-flow article.is-primary {
  border-color:
    rgba(170,125,239,.52);

  background:
    linear-gradient(
      155deg,
      rgba(72,0,185,.58),
      rgba(72,0,185,.19)
    );
}

.ctrl-system-flow article > div {
  display: grid;

  width: 70px;
  height: 70px;

  place-items: center;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 18px;

  background:
    rgba(255,255,255,.05);
}

.ctrl-system-flow article > div span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.ctrl-system-flow h3 {
  margin: 43px 0 0;

  font-size: 17px;

  word-break: keep-all;
}

.ctrl-system-flow p {
  margin: 8px 0 0;

  color:
    rgba(255,255,255,.44);

  font-size: 11px;
  line-height: 1.5;
}

.ctrl-system-flow > i {
  color:
    rgba(255,255,255,.30);

  font-style: normal;
  text-align: center;
}

.ctrl-system-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 13px;

  margin-top: 30px;
  padding: 22px 25px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 18px;

  background:
    rgba(255,255,255,.035);
}

.ctrl-system-footer span {
  color:
    rgba(255,255,255,.68);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
}

.ctrl-system-footer i {
  color:
    rgba(255,255,255,.25);

  font-style: normal;
}

.ctrl-system-footer strong {
  margin-left: auto;

  color: #B895EF;

  font-size: 10px;
  letter-spacing: .07em;
}


/* ==========================================================================
   Product summary
   ========================================================================== */

.ctrl-summary {
  background: #F8F8FA;
}

.ctrl-summary__grid {
  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 80px;

  margin-top: 58px;
}

.ctrl-summary__lead {
  padding: 36px;

  border-radius: 28px;

  color: #fff;

  background:
    linear-gradient(
      150deg,
      #4800B9,
      #2F006F
    );
}

.ctrl-summary__lead > span {
  color:
    rgba(255,255,255,.55);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.ctrl-summary__lead h3 {
  margin: 72px 0 0;

  font-size:
    clamp(
      30px,
      3.2vw,
      44px
    );

  line-height: 1.18;
  letter-spacing: -.04em;

  word-break: keep-all;
}

.ctrl-summary__lead p {
  margin: 24px 0 0;

  color:
    rgba(255,255,255,.67);

  font-size: 15px;
  line-height: 1.8;
}

.ctrl-spec-list {
  margin: 0;

  border-top:
    1px solid #DCDCE2;
}

.ctrl-spec-list > div {
  display: grid;

  grid-template-columns:
    150px 1fr;

  gap: 30px;

  padding: 23px 4px;

  border-bottom:
    1px solid #DCDCE2;
}

.ctrl-spec-list dt {
  color: #85818B;

  font-size: 13px;
  font-weight: 700;
}

.ctrl-spec-list dd {
  margin: 0;

  color: #2C2B31;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.ctrl-cta {
  padding: 110px 0;

  color: #fff;

  background:
    var(--ctrl-purple);
}

.ctrl-cta .ctrl-eyebrow {
  color:
    rgba(255,255,255,.57);
}

.ctrl-cta__grid {
  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 100px;
  align-items: end;
}

.ctrl-cta h2 {
  margin: 0;

  font-size:
    clamp(
      44px,
      5.5vw,
      72px
    );

  line-height: 1.06;
  letter-spacing: -.05em;

  word-break: keep-all;
}

.ctrl-cta__grid > div:last-child p {
  max-width: 510px;
  margin: 0 0 30px;

  color:
    rgba(255,255,255,.72);

  font-size: 17px;
  line-height: 1.8;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1120px) {

  .ctrl-hero__grid {
    grid-template-columns:
      1fr 1fr;

    gap: 48px;
  }

  .ctrl-loop-chain,
  .ctrl-system-flow {
    grid-template-columns:
      repeat(
        5,
        minmax(0,1fr)
      );
  }

  .ctrl-loop-arrow,
  .ctrl-system-flow > i {
    display: none;
  }

}


@media (max-width: 900px) {

  .ctrl-shell {
    width:
      min(
        calc(100% - 40px),
        var(--ctrl-max)
      );
  }

  .ctrl-section {
    padding: 104px 0;
  }

  .ctrl-hero {
    padding: 78px 0 94px;
  }

  .ctrl-hero__grid,
  .ctrl-zone__grid,
  .ctrl-monitor__grid,
  .ctrl-summary__grid,
  .ctrl-cta__grid {
    grid-template-columns: 1fr;
  }

  .ctrl-hero__grid,
  .ctrl-zone__grid,
  .ctrl-monitor__grid,
  .ctrl-summary__grid,
  .ctrl-cta__grid {
    gap: 48px;
  }

  .ctrl-hero__visual {
    max-width: 680px;
  }

  .ctrl-problem-flow {
    grid-template-columns:
      1fr 30px
      1fr 30px
      1fr;
  }

  .ctrl-target-grid,
  .ctrl-field-grid {
    grid-template-columns: 1fr;
  }

  .ctrl-target-card,
  .ctrl-field-grid article {
    min-height: 240px;
  }

  .ctrl-target-card h3,
  .ctrl-field-grid h3 {
    margin-top: 30px;
  }

  .ctrl-logic-map {
    grid-template-columns:
      180px 80px 1fr;
  }

  .ctrl-loop-chain,
  .ctrl-system-flow {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 14px;
  }

  .ctrl-loop-chain article,
  .ctrl-system-flow article {
    min-height: 220px;
  }

  .ctrl-loop-message {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .ctrl-system-footer strong {
    width: 100%;
    margin-left: 0;
  }

}


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

@media (max-width: 680px) {

  .ctrl-shell {
    width:
      min(
        calc(100% - 32px),
        var(--ctrl-max)
      );
  }

  .ctrl-section {
    padding: 82px 0;
  }

  .ctrl-eyebrow {
    margin-bottom: 18px;
    font-size: 11px;
  }

  .ctrl-section-heading h2 {
    font-size:
      clamp(
        36px,
        11vw,
        52px
      );
  }

  .ctrl-section-heading > p:last-child {
    margin-top: 22px;

    font-size: 16px;
    line-height: 1.72;
  }

  .ctrl-hero {
    padding: 60px 0 76px;
  }

  .ctrl-hero__content h1 {
    font-size:
      clamp(
        48px,
        14vw,
        66px
      );
  }

  .ctrl-hero__content h1 span {
    margin-top: 16px;
  }

  .ctrl-hero__lead {
    margin-top: 26px;

    font-size: 16px;
    line-height: 1.75;
  }

  .ctrl-btn {
    flex: 1 1 auto;
  }

  .ctrl-console {
    min-height: auto;
    padding: 22px;

    border-radius: 25px;
  }

  .ctrl-controller-box {
    width: 92%;

    margin-top: 35px;
  }

  .ctrl-console__outputs {
    grid-template-columns: 1fr;
  }

  .ctrl-problem-flow {
    grid-template-columns: 1fr;
    gap: 13px;

    margin-top: 48px;
  }

  .ctrl-problem-flow > div {
    transform: rotate(90deg);
  }

  .ctrl-problem-flow article {
    min-height: 220px;
  }

  .ctrl-target-grid {
    margin-top: 48px;
  }

  .ctrl-target-card {
    min-height: 250px;
  }

  .ctrl-logic-board {
    padding: 22px;

    border-radius: 22px;
  }

  .ctrl-logic-board__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .ctrl-logic-map {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ctrl-logic-source {
    min-height: 170px;
  }

  .ctrl-logic-lines {
    display: none;
  }

  .ctrl-zone-map {
    grid-template-columns: 1fr;
  }

  .ctrl-zone-data {
    grid-template-columns: 1fr;
  }

  .ctrl-loop-chain,
  .ctrl-system-flow {
    grid-template-columns: 1fr;
    gap: 12px;

    margin-top: 48px;
  }

  .ctrl-loop-chain article,
  .ctrl-system-flow article {
    min-height: 195px;
  }

  .ctrl-loop-arrow,
  .ctrl-system-flow > i {
    display: block;

    transform:
      rotate(90deg);
  }

  .ctrl-monitor-card {
    padding: 20px;

    border-radius: 22px;
  }

  .ctrl-monitor-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ctrl-monitor-flow > i {
    transform:
      rotate(90deg);
  }

  .ctrl-monitor-flow article {
    min-height: 120px;
  }

  .ctrl-monitor-flow article strong {
    margin-top: 23px;
  }

  .ctrl-monitor-response {
    grid-template-columns: 1fr;
  }

  .ctrl-field-grid {
    margin-top: 48px;
  }

  .ctrl-field-grid article {
    min-height: 220px;
  }

  .ctrl-summary__lead {
    padding: 30px;
  }

  .ctrl-summary__lead h3 {
    margin-top: 50px;
  }

  .ctrl-spec-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ctrl-cta {
    padding: 84px 0;
  }

}


@media (prefers-reduced-motion: reduce) {

  .ctrl-btn {
    transition: none;
  }

}

/* GF-WEB-3E-1 POLISH START */

/* ==========================================================================
   PC visual balance
   - reduce excessive headline wrapping
   - improve panel/text proportions
   - reduce unnecessary card vertical whitespace
   ========================================================================== */


/* CONTROL TARGET */

.ctrl-target-card {
  min-height: 330px;
}

.ctrl-target-card h3 {
  margin-top: 8px;
}


/* ZONE CONTROL */

.ctrl-zone__grid {
  grid-template-columns:
    minmax(420px, .92fr)
    minmax(0, 1.08fr);

  gap: 64px;
}

.ctrl-zone .ctrl-section-heading {
  max-width: 560px;
}

.ctrl-zone .ctrl-section-heading h2 {
  max-width: 560px;

  font-size:
    clamp(
      44px,
      4.55vw,
      60px
    );

  line-height: 1.08;

  word-break: keep-all;
}

.ctrl-zone
.ctrl-section-heading > p:last-child {
  max-width: 530px;
}


/* WEB MONITORING */

.ctrl-monitor__grid {
  grid-template-columns:
    minmax(420px, .90fr)
    minmax(0, 1.10fr);

  gap: 64px;
}

.ctrl-monitor .ctrl-section-heading {
  max-width: 560px;
}

.ctrl-monitor .ctrl-section-heading h2 {
  max-width: 550px;

  font-size:
    clamp(
      44px,
      4.55vw,
      60px
    );

  line-height: 1.08;

  word-break: keep-all;
}

.ctrl-monitor
.ctrl-section-heading > p:last-child {
  max-width: 520px;
}


/* FIELD CONFIGURATION */

.ctrl-field-grid article {
  min-height: 235px;
}

.ctrl-field-grid h3 {
  margin-top: 54px;
}


/* ==========================================================================
   Small desktop / notebook
   ========================================================================== */

@media
  (min-width: 901px)
  and
  (max-width: 1180px) {

  .ctrl-zone__grid {
    grid-template-columns:
      minmax(390px, .92fr)
      minmax(0, 1.08fr);

    gap: 48px;
  }

  .ctrl-zone .ctrl-section-heading h2 {
    max-width: 500px;

    font-size:
      clamp(
        42px,
        4.65vw,
        52px
      );
  }

  .ctrl-monitor__grid {
    grid-template-columns:
      minmax(390px, .90fr)
      minmax(0, 1.10fr);

    gap: 48px;
  }

  .ctrl-monitor .ctrl-section-heading h2 {
    max-width: 500px;

    font-size:
      clamp(
        42px,
        4.65vw,
        52px
      );
  }

}


/* ==========================================================================
   Existing tablet/mobile one-column behavior must override PC polish
   ========================================================================== */

@media (max-width: 900px) {

  .ctrl-zone__grid,
  .ctrl-monitor__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ctrl-zone .ctrl-section-heading,
  .ctrl-monitor .ctrl-section-heading {
    max-width: 700px;
  }

  .ctrl-zone .ctrl-section-heading h2,
  .ctrl-monitor .ctrl-section-heading h2 {
    max-width: 700px;

    font-size:
      clamp(
        40px,
        7vw,
        56px
      );
  }

  .ctrl-target-card,
  .ctrl-field-grid article {
    min-height: 240px;
  }

  .ctrl-target-card h3,
  .ctrl-field-grid h3 {
    margin-top: 30px;
  }

}


@media (max-width: 680px) {

  .ctrl-zone .ctrl-section-heading h2,
  .ctrl-monitor .ctrl-section-heading h2 {
    font-size:
      clamp(
        36px,
        11vw,
        52px
      );

    word-break: keep-all;
  }

  .ctrl-target-card {
    min-height: 250px;
  }

  .ctrl-field-grid article {
    min-height: 220px;
  }

}

/* GF-WEB-3E-1 POLISH END */