/* IranNet Contact Company Hub V1 */

.contact-company-page {
  --ich-ink: #0d1730;
  --ich-muted: #66728b;
  --ich-line: #e4e9f2;
  --ich-blue: #3f66f3;
  --ich-cyan: #26b9d5;
  --ich-violet: #7257ed;
  --ich-emerald: #1eb98a;
  --ich-dark: #081326;
  --ich-dark-2: #0c1932;
  --ich-surface: #fff;
  --ich-soft: #f5f7fb;
  --ich-radius-lg: 30px;
  --ich-radius-md: 20px;
  --ich-shadow: 0 24px 70px rgb(19 38 78 / 10%);
  background: #fff;
}

.ich-page,
.ich-page * {
  box-sizing: border-box;
}

.ich-page {
  overflow: hidden;
  color: var(--ich-ink);
  background: #fff;
}

.ich-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ich-container {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.ich-page svg {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ich-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #84eac2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
}

.ich-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #68e6ae;
  box-shadow: 0 0 0 6px rgb(104 230 174 / 10%), 0 0 22px rgb(104 230 174 / 65%);
}

/* Hero */

.ich-hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  overflow: hidden;
  padding: 90px 0 84px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgb(62 94 255 / 22%), transparent 30%),
    radial-gradient(circle at 86% 78%, rgb(40 200 172 / 11%), transparent 25%),
    linear-gradient(145deg, #071126 0%, #0b1731 52%, #071327 100%);
}

.ich-hero::before,
.ich-hero::after {
  position: absolute;
  border: 1px solid rgb(111 137 215 / 10%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ich-hero::before {
  top: -310px;
  right: -130px;
  width: 600px;
  height: 600px;
}

.ich-hero::after {
  bottom: -340px;
  left: -150px;
  width: 650px;
  height: 650px;
}

.ich-hero__network {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .6;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, #000 74%, transparent 100%);
}

.ich-hero__network svg {
  width: 100%;
  height: 100%;
}

.ich-hero__network path {
  fill: none;
  stroke: url("#ichHeroLine");
  stroke-width: 1.2;
  stroke-dasharray: 8 22;
  animation: ich-network-flow 24s linear infinite;
  vector-effect: non-scaling-stroke;
}

.ich-hero__network path:nth-of-type(2) {
  animation-duration: 31s;
  animation-direction: reverse;
}

.ich-hero__network path:nth-of-type(3) {
  opacity: .65;
  animation-duration: 27s;
}

.ich-hero__network path:nth-of-type(4) {
  opacity: .5;
  animation-direction: reverse;
}

.ich-hero__network circle {
  fill: #69b7ff;
  stroke: none;
  filter: drop-shadow(0 0 8px rgb(71 152 255 / 80%));
  animation: ich-node-pulse 4.2s ease-in-out infinite;
}

.ich-hero__network circle:nth-of-type(2n) {
  animation-delay: -1.6s;
}

.ich-hero__network circle:nth-of-type(3n) {
  animation-delay: -2.8s;
}

.ich-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .8fr);
  gap: 70px;
  align-items: center;
}

.ich-hero__content h1 {
  max-width: 760px;
  margin: 24px 0 0;
  color: #fff;
  font-size: clamp(43px, 5.2vw, 76px);
  line-height: 1.22;
  letter-spacing: -.055em;
  font-weight: 950;
}

.ich-hero__content h1 em {
  color: #73e6bb;
  font-style: normal;
}

.ich-hero__content > p {
  max-width: 720px;
  margin: 26px 0 0;
  color: #aebbd3;
  font-size: 15px;
  line-height: 2.05;
}

.ich-hero__actions,
.ich-office__actions,
.ich-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.ich-hero__actions {
  margin-top: 34px;
}

.ich-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 13px 19px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

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

.ich-btn svg {
  width: 18px;
  height: 18px;
}

.ich-btn--primary {
  color: #071d18;
  background: linear-gradient(135deg, #78ecb8, #4bd3c1);
  box-shadow: 0 16px 35px rgb(55 202 160 / 22%);
}

.ich-btn--primary:hover {
  color: #071d18;
  box-shadow: 0 21px 42px rgb(55 202 160 / 30%);
}

.ich-btn--ghost {
  border-color: rgb(157 177 222 / 20%);
  color: #e6ecf9;
  background: rgb(255 255 255 / 4%);
  backdrop-filter: blur(12px);
}

.ich-btn--ghost:hover {
  border-color: rgb(115 151 255 / 55%);
  color: #fff;
  background: rgb(78 104 193 / 12%);
}

.ich-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

.ich-hero__signals span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(154 174 219 / 14%);
  border-radius: 999px;
  padding: 7px 12px;
  color: #8f9cb6;
  background: rgb(255 255 255 / 3%);
  font-size: 9px;
  font-weight: 850;
}

.ich-hero__signals b {
  color: #70e5b7;
  font-size: 11px;
}

.ich-hero__control {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(142 166 224 / 16%);
  border-radius: 28px;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0, rgb(66 93 232 / 22%), transparent 36%),
    linear-gradient(160deg, rgb(17 32 70 / 92%), rgb(6 16 37 / 94%));
  box-shadow: 0 42px 100px rgb(0 0 0 / 32%);
  backdrop-filter: blur(18px);
}

.ich-control__top {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgb(148 169 216 / 12%);
  padding-bottom: 18px;
}

.ich-control__pulse {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #68e7ae;
  box-shadow: 0 0 0 0 rgb(104 231 174 / 40%);
  animation: ich-live-pulse 2s infinite;
}

.ich-control__top > div {
  display: grid;
  flex: 1;
  gap: 4px;
}

.ich-control__top small {
  color: #687896;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ich-control__top strong {
  color: #e8eefb;
  font-size: 10px;
  font-weight: 950;
}

.ich-control__status {
  border: 1px solid rgb(104 231 174 / 25%);
  border-radius: 999px;
  padding: 6px 9px;
  color: #70e7b0;
  background: rgb(73 206 149 / 6%);
  font-size: 7px;
  font-weight: 950;
}

.ich-control__diagram {
  position: relative;
  min-height: 360px;
}

.ich-control__core,
.ich-control__node {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.ich-control__core {
  top: 50%;
  left: 50%;
  width: 112px;
  height: 112px;
  border: 1px solid rgb(103 132 255 / 45%);
  color: #fff;
  background:
    radial-gradient(circle at 35% 25%, rgb(105 126 255 / 42%), transparent 55%),
    #14245a;
  box-shadow: 0 0 0 15px rgb(74 95 187 / 7%), 0 0 55px rgb(63 93 237 / 26%);
  transform: translate(-50%, -50%);
}

.ich-control__core::before {
  position: absolute;
  inset: -26px;
  border: 1px dashed rgb(119 143 221 / 20%);
  border-radius: 50%;
  content: "";
  animation: ich-orbit 24s linear infinite;
}

.ich-control__core span {
  color: #92a1c3;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ich-control__core b {
  margin-top: -20px;
  color: #fff;
  font-size: 23px;
  font-weight: 950;
}

.ich-control__node {
  z-index: 2;
  width: 61px;
  height: 61px;
  border: 1px solid rgb(121 150 220 / 25%);
  color: #aab7d3;
  background: #111f43;
  box-shadow: 0 12px 30px rgb(0 0 0 / 30%);
  font-size: 7px;
  font-weight: 950;
}

.ich-control__node--1 { top: 32px; left: 50%; transform: translateX(-50%); }
.ich-control__node--2 { top: 50%; right: 18px; transform: translateY(-50%); }
.ich-control__node--3 { bottom: 28px; left: 50%; transform: translateX(-50%); }
.ich-control__node--4 { top: 50%; left: 18px; transform: translateY(-50%); }

.ich-control__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(91 124 255 / 65%), rgb(91 199 210 / 10%));
  transform-origin: left center;
}

.ich-control__line::after {
  position: absolute;
  top: -1px;
  left: -20px;
  width: 20px;
  height: 3px;
  border-radius: 99px;
  background: #67b8ff;
  box-shadow: 0 0 12px #67b8ff;
  content: "";
  animation: ich-packet 2.6s linear infinite;
}

.ich-control__line--1 { transform: rotate(-90deg); }
.ich-control__line--2 { transform: rotate(0); }
.ich-control__line--3 { transform: rotate(90deg); }
.ich-control__line--4 { transform: rotate(180deg); }

.ich-control__line--2::after { animation-delay: -.6s; }
.ich-control__line--3::after { animation-delay: -1.2s; }
.ich-control__line--4::after { animation-delay: -1.8s; }

.ich-control__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgb(148 169 216 / 12%);
  padding-top: 17px;
}

.ich-control__footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7786a5;
  font-size: 7px;
  font-weight: 850;
}

.ich-control__footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #637df8;
}

/* Shared headings */

.ich-routing,
.ich-protocol,
.ich-channels,
.ich-office,
.ich-final {
  padding: 100px 0;
}

.ich-section-heading {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.ich-section-heading > span,
.ich-protocol__intro > span {
  color: var(--ich-blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ich-section-heading h2,
.ich-protocol__intro h2,
.ich-office__information h2,
.ich-final__card h2 {
  margin: 13px 0 0;
  color: var(--ich-ink);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.35;
  letter-spacing: -.045em;
  font-weight: 950;
}

.ich-section-heading p,
.ich-protocol__intro p {
  max-width: 700px;
  margin: 16px auto 0;
  color: var(--ich-muted);
  font-size: 12px;
  line-height: 2;
}

/* Organization Hub */

.ich-routing {
  background:
    radial-gradient(circle at 90% 16%, rgb(64 104 243 / 7%), transparent 22%),
    linear-gradient(#fff, #f8fafe);
}

.ich-hub {
  overflow: hidden;
  border: 1px solid var(--ich-line);
  border-radius: var(--ich-radius-lg);
  background: #fff;
  box-shadow: var(--ich-shadow);
}

.ich-hub__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ich-line);
  background: #fafbfe;
}

.ich-hub-tab {
  position: relative;
  display: flex;
  min-height: 96px;
  align-items: center;
  gap: 13px;
  border: 0;
  border-left: 1px solid var(--ich-line);
  padding: 18px 20px;
  color: var(--ich-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: right;
  transition: color .22s ease, background .22s ease;
}

.ich-hub-tab:last-child {
  border-left: 0;
}

.ich-hub-tab::after {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 3px;
  border-radius: 99px 99px 0 0;
  background: var(--ich-blue);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .22s ease, transform .22s ease;
}

.ich-hub-tab:hover,
.ich-hub-tab.is-active {
  color: var(--ich-ink);
  background: #fff;
}

.ich-hub-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.ich-hub-tab__index {
  display: grid;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  place-items: center;
  border: 1px solid #dce3ef;
  border-radius: 10px;
  color: #8996ad;
  background: #fff;
  font-size: 9px;
  font-weight: 950;
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}

.ich-hub-tab.is-active .ich-hub-tab__index {
  border-color: var(--ich-blue);
  color: #fff;
  background: var(--ich-blue);
  box-shadow: 0 10px 22px rgb(63 102 243 / 20%);
}

.ich-hub-tab > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.ich-hub-tab small {
  color: #a0aabe;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ich-hub-tab strong {
  color: inherit;
  font-size: 10px;
  font-weight: 950;
}

.ich-hub-tab > i {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccd4e2;
}

.ich-hub-tab.is-active > i {
  background: #59dbb0;
  box-shadow: 0 0 0 5px rgb(89 219 176 / 10%);
}

.ich-hub__workspace {
  display: grid;
  grid-template-columns: minmax(340px, .8fr) minmax(0, 1.5fr);
  min-height: 670px;
}

.ich-hub__map {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--ich-line);
  background:
    radial-gradient(circle at 50% 50%, rgb(71 105 245 / 10%), transparent 37%),
    #0b1730;
}

.ich-hub__map-grid {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgb(112 137 199 / 10%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(112 137 199 / 10%) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

.ich-hub__map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ich-hub__map-base,
.ich-hub__map-live {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ich-hub__map-base {
  stroke: rgb(129 151 205 / 20%);
  stroke-width: 2;
  stroke-dasharray: 5 10;
}

.ich-hub__map-live {
  stroke: url("#unused");
  stroke: #5b82ff;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgb(73 111 255 / 70%));
  transition: d .42s ease;
}

.ich-hub__core,
.ich-hub__map-node {
  position: absolute;
  z-index: 2;
  border: 1px solid rgb(124 148 211 / 25%);
  color: #8e9dba;
  background: rgb(13 27 58 / 94%);
  box-shadow: 0 16px 34px rgb(0 0 0 / 28%);
}

.ich-hub__core {
  top: 50%;
  left: 50%;
  display: grid;
  width: 145px;
  height: 145px;
  place-content: center;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.ich-hub__core::before {
  position: absolute;
  inset: -15px;
  border: 1px dashed rgb(110 138 215 / 22%);
  border-radius: 50%;
  content: "";
  animation: ich-orbit 28s linear infinite;
}

.ich-hub__core small,
.ich-hub__core span {
  color: #647592;
  font-size: 7px;
  font-weight: 850;
}

.ich-hub__core strong {
  margin: 5px 0;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.ich-hub__map-node {
  display: grid;
  width: 140px;
  min-height: 62px;
  gap: 4px;
  border-radius: 15px;
  padding: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .22s ease, color .22s ease, background .22s ease, transform .22s ease;
}

.ich-hub__map-node small {
  overflow: hidden;
  color: #647592;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ich-hub__map-node strong {
  color: inherit;
  font-size: 9px;
  font-weight: 950;
}

.ich-hub__map-node--1 { top: 12%; right: 8%; }
.ich-hub__map-node--2 { top: 12%; left: 8%; }
.ich-hub__map-node--3 { bottom: 12%; right: 8%; }
.ich-hub__map-node--4 { bottom: 12%; left: 8%; }

.ich-hub__map-node:hover,
.ich-hub__map-node.is-active {
  border-color: rgb(103 136 255 / 65%);
  color: #fff;
  background: #172a5d;
  box-shadow: 0 18px 45px rgb(29 69 184 / 25%);
  transform: translateY(-3px);
}

.ich-hub__map-node.is-active small {
  color: #72e8b6;
}

.ich-hub__panels {
  padding: 34px;
}

.ich-hub-panel[hidden] {
  display: none !important;
}

.ich-hub-panel.is-active {
  animation: ich-panel-in .38s ease both;
}

.ich-hub-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  border-bottom: 1px solid var(--ich-line);
  padding-bottom: 24px;
}

.ich-hub-panel__head > div {
  max-width: 660px;
}

.ich-hub-panel__head small {
  color: var(--ich-blue);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ich-hub-panel__head h3 {
  margin: 9px 0 0;
  color: var(--ich-ink);
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -.035em;
  font-weight: 950;
}

.ich-hub-panel__head p {
  margin: 10px 0 0;
  color: var(--ich-muted);
  font-size: 10px;
  line-height: 1.95;
}

.ich-hub-panel__count {
  flex: 0 0 auto;
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  padding: 8px 11px;
  color: #748097;
  background: #f8fafe;
  font-size: 8px;
  font-weight: 900;
}

.ich-department-grid {
  display: grid;
  gap: 13px;
  margin-top: 24px;
}

.ich-department-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-areas:
    "top body action"
    "top status action";
  gap: 8px 18px;
  align-items: center;
  border: 1px solid var(--ich-line);
  border-radius: 19px;
  padding: 18px;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.ich-department-card:hover {
  border-color: #cbd7ff;
  box-shadow: 0 18px 44px rgb(34 65 135 / 10%);
  transform: translateY(-2px);
}

.ich-department-card__top {
  grid-area: top;
}

.ich-department-card__icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid #dfe6f2;
  border-radius: 17px;
  color: var(--ich-blue);
  background: linear-gradient(145deg, #f8faff, #edf2ff);
}

.ich-department-card__icon svg {
  width: 25px;
  height: 25px;
}

.ich-department-card__code {
  display: block;
  margin-top: 7px;
  color: #a0aabd;
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .08em;
  text-align: center;
}

.ich-department-card__body {
  grid-area: body;
}

.ich-department-card__body small {
  color: #8b96aa;
  font-size: 7px;
  font-weight: 850;
}

.ich-department-card__body h4 {
  margin: 5px 0 0;
  color: var(--ich-ink);
  font-size: 15px;
  font-weight: 950;
}

.ich-department-card__body p {
  margin: 7px 0 0;
  color: var(--ich-muted);
  font-size: 9px;
  line-height: 1.8;
}

.ich-department-card__status {
  grid-area: status;
}

.ich-department-card__status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7890;
  font-size: 7px;
  font-weight: 850;
}

.ich-department-card__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43d39c;
  box-shadow: 0 0 0 4px rgb(67 211 156 / 10%);
}

.ich-department-card__action {
  grid-area: action;
  display: inline-flex;
  min-width: 178px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #dce4f2;
  border-radius: 13px;
  padding: 10px 14px;
  color: #3353c7;
  background: #f8faff;
  text-decoration: none;
  font-size: 8px;
  font-weight: 950;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.ich-department-card__action svg {
  width: 16px;
  height: 16px;
}

.ich-department-card__action:hover {
  border-color: var(--ich-blue);
  color: #fff;
  background: var(--ich-blue);
  transform: translateX(-2px);
}

/* Protocol */

.ich-protocol {
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgb(62 96 244 / 19%), transparent 27%),
    linear-gradient(145deg, #081327, #0d1b37);
}

.ich-protocol__intro {
  max-width: 780px;
}

.ich-protocol__intro > span {
  color: #74e4b4;
}

.ich-protocol__intro h2 {
  color: #fff;
}

.ich-protocol__intro p {
  margin-inline: 0;
  color: #9facbf;
}

.ich-protocol__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.ich-protocol__steps::before {
  position: absolute;
  top: 51px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(91 126 255 / 50%), rgb(84 220 176 / 50%), transparent);
  content: "";
}

.ich-protocol__steps article {
  position: relative;
  z-index: 1;
  min-height: 245px;
  border: 1px solid rgb(135 157 208 / 14%);
  border-radius: 20px;
  padding: 22px;
  background: rgb(255 255 255 / 3%);
  backdrop-filter: blur(12px);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

.ich-protocol__steps article:hover {
  border-color: rgb(98 133 255 / 48%);
  background: rgb(75 101 190 / 8%);
  transform: translateY(-5px);
}

.ich-protocol__steps article > span {
  position: absolute;
  top: 15px;
  left: 17px;
  color: rgb(124 146 205 / 22%);
  font-size: 32px;
  font-weight: 950;
}

.ich-protocol__steps svg {
  width: 34px;
  height: 34px;
  color: #72e5b2;
}

.ich-protocol__steps h3 {
  margin: 28px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.ich-protocol__steps p {
  margin: 11px 0 0;
  color: #99a6bd;
  font-size: 9px;
  line-height: 1.9;
}

/* Channels */

.ich-channels {
  background: #f7f9fd;
}

.ich-section-heading--compact {
  margin-bottom: 34px;
}

.ich-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}

.ich-channel-card {
  position: relative;
  display: grid;
  min-height: 180px;
  grid-template-columns: 48px 1fr;
  align-content: start;
  gap: 17px;
  border: 1px solid var(--ich-line);
  border-radius: 20px;
  padding: 21px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 14px 36px rgb(24 49 103 / 6%);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.ich-channel-card:hover {
  border-color: #cad7ff;
  box-shadow: 0 20px 48px rgb(31 66 148 / 12%);
  transform: translateY(-4px);
}

.ich-channel-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: var(--ich-blue);
  background: #edf2ff;
}

.ich-channel-card__icon svg {
  width: 23px;
  height: 23px;
}

.ich-channel-card > span:nth-child(2) {
  display: grid;
  gap: 5px;
}

.ich-channel-card small {
  color: #8d98ac;
  font-size: 8px;
  font-weight: 850;
}

.ich-channel-card strong {
  color: var(--ich-ink);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.ich-channel-card em {
  color: var(--ich-muted);
  font-size: 7px;
  line-height: 1.7;
  font-style: normal;
}

.ich-channel-card__arrow {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 17px;
  height: 17px;
  color: #9da9bd;
  transition: color .2s ease, transform .2s ease;
}

.ich-channel-card:hover .ich-channel-card__arrow {
  color: var(--ich-blue);
  transform: translateX(-3px);
}

/* Office */

.ich-office {
  color: #fff;
  background: #081428;
}

.ich-office__grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 24px;
  align-items: stretch;
}

.ich-office__information,
.ich-office__map {
  min-height: 550px;
  border: 1px solid rgb(139 161 210 / 14%);
  border-radius: 28px;
  background: #0d1b37;
}

.ich-office__information {
  padding: 45px;
  background:
    radial-gradient(circle at 100% 0, rgb(70 101 236 / 21%), transparent 34%),
    linear-gradient(155deg, #102142, #0a1730);
}

.ich-kicker--light {
  color: #75e3b2;
}

.ich-office__information h2 {
  max-width: 610px;
  color: #fff;
}

.ich-office__information > p {
  margin: 20px 0 0;
  color: #a5b1c8;
  font-size: 11px;
  line-height: 2;
}

.ich-office__facts {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.ich-office__facts > div {
  display: grid;
  gap: 5px;
  border: 1px solid rgb(139 161 210 / 12%);
  border-radius: 15px;
  padding: 14px 16px;
  background: rgb(255 255 255 / 3%);
}

.ich-office__facts span {
  color: #71819f;
  font-size: 7px;
  font-weight: 850;
}

.ich-office__facts strong {
  color: #e6edf9;
  font-size: 10px;
  line-height: 1.8;
  font-weight: 900;
}

.ich-office__actions {
  margin-top: 25px;
}

.ich-btn--light {
  color: #061d16;
  background: #72e6b4;
}

.ich-btn--outline {
  border-color: rgb(146 168 216 / 20%);
  color: #dfe7f6;
  background: transparent;
}

.ich-office__map {
  position: relative;
  overflow: hidden;
}

.ich-office__map iframe {
  width: 100%;
  height: 100%;
  min-height: 550px;
  border: 0;
  filter: saturate(.72) contrast(1.05);
}

.ich-office__map::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(91 126 255 / 12%);
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgb(5 15 35 / 18%);
  content: "";
  pointer-events: none;
}

.ich-office__map-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgb(148 169 216 / 18%);
  border-radius: 14px;
  padding: 11px 14px;
  color: #fff;
  background: rgb(8 20 43 / 88%);
  box-shadow: 0 14px 34px rgb(0 0 0 / 25%);
  backdrop-filter: blur(14px);
}

.ich-office__map-badge svg {
  width: 24px;
  height: 24px;
  color: #72e5b3;
}

.ich-office__map-badge span {
  display: grid;
  gap: 3px;
}

.ich-office__map-badge small {
  color: #7787a5;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ich-office__map-badge strong {
  color: #fff;
  font-size: 9px;
  font-weight: 950;
}

/* Final */

.ich-final {
  padding-top: 42px;
  background: #081428;
}

.ich-final__card {
  display: flex;
  min-height: 230px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  border: 1px solid rgb(132 155 210 / 16%);
  border-radius: 28px;
  padding: 38px 42px;
  background:
    radial-gradient(circle at 85% 10%, rgb(85 116 255 / 22%), transparent 32%),
    linear-gradient(145deg, #102247, #0a1831);
}

.ich-final__card > div:first-child {
  max-width: 730px;
}

.ich-final__card > div:first-child > span {
  color: #74e5b4;
  font-size: 9px;
  font-weight: 950;
}

.ich-final__card h2 {
  color: #fff;
  font-size: clamp(27px, 3.5vw, 44px);
}

.ich-final__actions {
  flex: 0 0 auto;
}

/* Interaction accent states */

.ich-hub[data-active-accent="cyan"] {
  --ich-active: var(--ich-cyan);
}

.ich-hub[data-active-accent="violet"] {
  --ich-active: var(--ich-violet);
}

.ich-hub[data-active-accent="emerald"] {
  --ich-active: var(--ich-emerald);
}

.ich-hub:not([data-active-accent]),
.ich-hub[data-active-accent="blue"] {
  --ich-active: var(--ich-blue);
}

.ich-hub[data-active-accent] .ich-hub-tab.is-active::after,
.ich-hub[data-active-accent] .ich-hub-tab.is-active .ich-hub-tab__index {
  border-color: var(--ich-active);
  background: var(--ich-active);
}

.ich-hub[data-active-accent] .ich-hub__map-live {
  stroke: var(--ich-active);
}

.ich-hub[data-active-accent] .ich-hub__map-node.is-active {
  border-color: color-mix(in srgb, var(--ich-active) 70%, white);
}

.ich-hub[data-active-accent] .ich-hub__map-node.is-active small,
.ich-hub[data-active-accent] .ich-hub-panel__head small {
  color: var(--ich-active);
}

/* Motion */

@keyframes ich-network-flow {
  to { stroke-dashoffset: -260; }
}

@keyframes ich-node-pulse {
  0%, 100% { opacity: .25; transform: scale(.72); }
  50% { opacity: .85; transform: scale(1.25); }
}

@keyframes ich-live-pulse {
  0% { box-shadow: 0 0 0 0 rgb(104 231 174 / 45%); }
  70% { box-shadow: 0 0 0 10px rgb(104 231 174 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(104 231 174 / 0%); }
}

@keyframes ich-orbit {
  to { transform: rotate(360deg); }
}

@keyframes ich-packet {
  from { left: -20px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { left: calc(100% + 20px); opacity: 0; }
}

@keyframes ich-panel-in {
  from { opacity: .2; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

@media (max-width: 1080px) {
  .ich-hero__grid,
  .ich-office__grid {
    grid-template-columns: 1fr;
  }

  .ich-hero__control {
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
  }

  .ich-hub__workspace {
    grid-template-columns: 1fr;
  }

  .ich-hub__map {
    min-height: 510px;
    border-left: 0;
    border-bottom: 1px solid var(--ich-line);
  }

  .ich-protocol__steps,
  .ich-channel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ich-office__information,
  .ich-office__map,
  .ich-office__map iframe {
    min-height: 500px;
  }

  .ich-final__card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .ich-hero {
    min-height: 0;
    padding: 70px 0;
  }

  .ich-hero__grid {
    gap: 42px;
  }

  .ich-hub__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ich-hub__tabs::-webkit-scrollbar {
    display: none;
  }

  .ich-hub-tab {
    min-width: 235px;
    flex: 0 0 235px;
    border-left: 1px solid var(--ich-line);
    scroll-snap-align: start;
  }

  .ich-hub__map {
    min-height: 470px;
  }

  .ich-hub__panels {
    padding: 24px;
  }

  .ich-department-card {
    grid-template-columns: 55px minmax(0, 1fr);
    grid-template-areas:
      "top body"
      "status status"
      "action action";
  }

  .ich-department-card__action {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .ich-container {
    width: min(100% - 20px, 1180px);
  }

  .ich-routing,
  .ich-protocol,
  .ich-channels,
  .ich-office {
    padding: 72px 0;
  }

  .ich-hero__content h1 {
    font-size: 42px;
  }

  .ich-hero__content > p {
    font-size: 12px;
  }

  .ich-hero__actions,
  .ich-office__actions,
  .ich-final__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ich-btn {
    width: 100%;
  }

  .ich-hero__control {
    padding: 18px;
  }

  .ich-control__diagram {
    min-height: 320px;
    transform: scale(.93);
  }

  .ich-hub__map {
    min-height: 560px;
  }

  .ich-hub__core {
    width: 118px;
    height: 118px;
  }

  .ich-hub__map-node {
    width: 132px;
  }

  .ich-hub__map-node--1 { top: 8%; right: 4%; }
  .ich-hub__map-node--2 { top: 8%; left: 4%; }
  .ich-hub__map-node--3 { bottom: 8%; right: 4%; }
  .ich-hub__map-node--4 { bottom: 8%; left: 4%; }

  .ich-hub-panel__head {
    flex-direction: column;
  }

  .ich-hub-panel__head h3 {
    font-size: 24px;
  }

  .ich-protocol__steps,
  .ich-channel-grid {
    grid-template-columns: 1fr;
  }

  .ich-protocol__steps::before {
    display: none;
  }

  .ich-office__information {
    min-height: 0;
    padding: 28px 22px;
  }

  .ich-office__map,
  .ich-office__map iframe {
    min-height: 420px;
  }

  .ich-final {
    padding-top: 20px;
  }

  .ich-final__card {
    min-height: 0;
    padding: 28px 22px;
  }
}

@media (max-width: 420px) {
  .ich-hero__content h1 {
    font-size: 36px;
  }

  .ich-hero__signals {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ich-control__node {
    width: 54px;
    height: 54px;
  }

  .ich-hub__map {
    min-height: 610px;
  }

  .ich-hub__map-node {
    width: 124px;
  }

  .ich-department-card {
    padding: 15px;
  }

  .ich-channel-card {
    min-height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ich-page *,
  .ich-page *::before,
  .ich-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* End IranNet Contact Company Hub V1 */