:root {
  --iiie-teal: #0aa596;
  --iiie-teal-d: #07857a;
  --iiie-teal-dd: #0b4f52;
  --iiie-top: #148f8b;
  --iiie-ink: #0f2a2e;
  --iiie-muted: #5b7276;
  --iiie-line: #dcebe9;
  --iiie-soft: #f3faf9;
  --iiie-red: #e5484d;
  --iiie-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.iiie-scope,
.iiie-scope *,
.iiie-scope *::before,
.iiie-scope *::after {
  box-sizing: border-box
}

.iiie-scope {
  font-family: var(--iiie-font);
  color: var(--iiie-ink);
  -webkit-font-smoothing: antialiased
}

.iiie-scope ul {
  list-style: none
}

.iiie-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px
}

.iiie-ic {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  display: block
}

html.iiie-lock {
  overflow: hidden
}

/* ---------- buttons ---------- */
.iiie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px var(--iiie-font);
  padding: 14px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease
}

.iiie-btn .iiie-ic {
  font-size: 17px;
  transition: transform .2s ease
}

.iiie-btn:hover .iiie-ic {
  transform: translateX(3px)
}

.iiie-btn--primary {
  background: #ffffff;
  color: #222222;
  box-shadow: 0 10px 22px -10px rgba(10, 165, 150, .8)
}

.iiie-btn--primary:hover {
  background: #ffffff;
  transform: translateY(-1px)
}

.iiie-btn--ghost {
  background: #fff;
  color: #222222;
  border: 2px solid #222222;
}

.iiie-btn--ghost:hover {
  border-color: var(--iiie-teal);
  color: var(--iiie-teal-d);
  transform: translateY(-1px)
}

.iiie-btn--ghost:hover .iiie-ic {
  transform: translateY(3px)
}

.iiie-btn--sm {
  padding: 11px 20px;
  font-size: 14px;
  margin-left: 10px
}

/* ---------- top bar ---------- */
.iiie-topbar {
  background: #ffffff;
  color: #fff;
  font-size: 13.5px
}

.iiie-topbar .iiie-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 9px;
  padding-bottom: 9px
}

.iiie-topbar a {
  color: #222222;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.iiie-topbar a:hover {
  text-decoration: underline
}

.iiie-topbar .iiie-ic {
  font-size: 16px
}

/* ---------- header ---------- */
.iiie-header {
  position: relative;
  z-index: 60;
  background: #14908a;
  border-bottom: 1px solid var(--iiie-line)
}

.iiie-header-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px
}

.iiie-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff
}

.iiie-logo svg {
  width: 42px;
  height: 42px;
  flex: none
}

.iiie-logo b {
  display: block;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em
}

.iiie-logo b span {
  color: #b8f2ec
}

.iiie-logo small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: 4px
}

.iiie-nav {
  display: flex;
  align-items: center;
  gap: 4px
}

.iiie-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s, color .2s
}

.iiie-nav-link:hover {
  color: #ffffff;
}

.iiie-nav-link .iiie-ic {
  font-size: 14px;
  transition: transform .2s
}

.iiie-dd {
  position: relative
}

.iiie-dd:hover .iiie-nav-link .iiie-ic {
  transform: rotate(180deg)
}

.iiie-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  min-width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s
}

.iiie-dd:hover .iiie-dd-menu,
.iiie-dd:focus-within .iiie-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s
}

.iiie-dd-box {
  background: #fff;
  border: 1px solid var(--iiie-line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 24px 40px -18px rgba(8, 60, 60, .3)
}

.iiie-dd-box a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  color: #24393d;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s
}

.iiie-dd-box a:hover {
  background: var(--iiie-soft);
  color: var(--iiie-teal-d)
}

.iiie-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--iiie-line);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  color: var(--iiie-ink);
  font-size: 22px;
  align-items: center;
  justify-content: center;
  padding: 0
}

/* ---------- fixed header (scroll par top par chipka rahe) ---------- */
.iiie-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  will-change: transform;
  transition: transform .3s ease
}

.iiie-top.is-stuck {
  transform: translateY(calc(var(--iiie-tb, 0px) * -1))
}

.iiie-top.is-stuck .iiie-header {
  box-shadow: 0 10px 24px -14px rgba(7, 70, 66, .55)
}

@media (prefers-reduced-motion:reduce) {
  .iiie-top {
    transition: none
  }
}

/* ---------- hero ---------- */
.iiie-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 68px 0 76px;
  margin-top: 35px;
}

.iiie-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px 400px at 90% 18%, rgba(10, 165, 150, .11), transparent 70%), radial-gradient(440px 340px at 4% 92%, rgba(10, 165, 150, .08), transparent 70%)
}

.iiie-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(10, 165, 150, .18) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 78% 45%, #000 10%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 78% 45%, #000 10%, transparent 75%)
}

.iiie-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 44px;
  align-items: center
}

.iiie-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #e8f7f5;
  border: 1px solid #bfe6e1;
  color: var(--iiie-teal-d);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase
}

.iiie-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iiie-teal);
  box-shadow: 0 0 0 4px rgba(10, 165, 150, .18)
}

.iiie-h1 {
  font-size: clamp(33.6px, 3.9vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.028em;
  margin: 22px 0 20px
}

.iiie-lead {
font-size: 16px;
    line-height: 1.8;
    color: #222222;
    text-align: justify;
    margin-bottom: 32px;
    font-family: 'DM Sans', sans-serif;
}

.iiie-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 25px;
}

/* ---------- visual: tilted dashboard + hover strips ---------- */
.iiie-visual {
  position: relative;
  padding: 30px 0 34px;margin-top: 64px;
}

.iiie-visual::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 165, 150, .18), transparent);
  pointer-events: none
}

.iiie-device {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  perspective: 1600px
}

.iiie-tilt {
  transform: rotateX(9deg) rotateY(-17deg) rotateZ(3.5deg);
  transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform
}

.iiie-visual:hover .iiie-tilt {
  transform: rotateX(9deg) rotateY(-17deg) rotateZ(3.5deg)
}

.iiie-tablet {
  background: linear-gradient(145deg, #2d3238, #0c0e11);
  border-radius: 28px;
  padding: 3.2%;
  box-shadow: inset 0 0 0 1.5px #3c434b, 0 46px 60px -34px rgba(7, 70, 66, .6), 0 20px 30px -20px rgba(0, 0, 0, .4)
}

.iiie-screen {
  position: relative;
  aspect-ratio: 1.36;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f6fc;
  container-type: inline-size
}

.iiie-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 30%, transparent 45%)
}

.iiie-strips {
  display: contents
}

.iiie-strip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border: 1px solid var(--iiie-line);
  border-radius: 15px;
  box-shadow: 0 18px 32px -16px rgba(8, 60, 60, .38);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--iiie-ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .65s cubic-bezier(.16, 1, .3, 1)
}

.iiie-strip small {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--iiie-muted);
  margin-top: 2px
}

.iiie-strip-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  flex: none;
  background: var(--c)
}

.iiie-strip--1 {
  --c: #14908a;
  left: -5%;
  top: 0;
  transform: translateX(46px)
}

.iiie-strip--2 {
  --c: #0f7a75;
  right: -18%;
  top: 19%;
  transform: translateX(-46px)
}

.iiie-strip--3 {
  --c: #0b5f5c;
  left: -13%;
    bottom: 25%;;
  transform: translateX(46px)
}

.iiie-strip--4 {
  --c: #2bb3aa;
  right: -3%;
  bottom: 6%;
  transform: translateX(-46px)
}

.iiie-visual:hover .iiie-strip {
  opacity: 1;
  transform: none
}

.iiie-visual:hover .iiie-strip--2 {
  transition-delay: .07s
}

.iiie-visual:hover .iiie-strip--3 {
  transition-delay: .14s
}

.iiie-visual:hover .iiie-strip--4 {
  transition-delay: .21s
}

.iiie-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--iiie-muted);
  transition: opacity .3s
}

.iiie-hint .iiie-ic {
  font-size: 15px;
  color: var(--iiie-teal)
}

.iiie-visual:hover .iiie-hint {
  opacity: 0
}

/* ---------- dashboard UI inside tablet (teal, minimal) ---------- */
.iiie-ui {
  font-size: 1.75cqw;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f4f9f8;
  color: #12302f;
  line-height: 1.2;
  font-family: var(--iiie-font)
}

.iiie-ui * {
  margin: 0
}

.iiie-ui-bar {
  flex: none;
  height: 4.4em;
  padding: 0 1.3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #14908a;
  color: #fff
}

.iiie-ui-ttl {
  display: flex;
  align-items: center;
  gap: .7em;
  font-weight: 700;
  font-size: 1.3em
}

.iiie-ui-logo {
  width: 1.9em;
  height: 1.9em;
  border-radius: .45em;
  background: #fff;
  color: #14908a;
  display: grid;
  place-items: center
}

.iiie-ui-act {
  display: flex;
  align-items: center;
  gap: 1.1em
}

.iiie-ui-ib {
  position: relative;
  font-size: 1.5em;
  display: grid;
  place-items: center
}

.iiie-ui-ib i {
  position: absolute;
  top: -.4em;
  right: -.5em;
  min-width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #ffb020;
  color: #3d2a00;
  font-size: .5em;
  font-style: normal;
  font-weight: 800;
  display: grid;
  place-items: center
}

.iiie-ui-adm {
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 600
}

.iiie-ui-adm i {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  display: grid;
  place-items: center
}

.iiie-ui-body {
  flex: 1;
  min-height: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: .9em
}

.iiie-ui-kpis {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8em
}

.iiie-ui-kpi {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .75em .8em;
  background: #fff;
  border: 1px solid #e0eceb;
  border-radius: .8em
}

.iiie-ui-ki {
  width: 2.8em;
  height: 2.8em;
  border-radius: .7em;
  background: #e3f3f1;
  color: #14908a;
  display: grid;
  place-items: center;
  font-size: 1.2em;
  flex: none
}

.iiie-ui-kpi b {
  display: block;
  font-size: 1.75em;
  font-weight: 800;
  line-height: 1;
  color: #0b4f52
}

.iiie-ui-kpi em {
  display: block;
  font-style: normal;
  font-size: .7em;
  font-weight: 600;
  color: #5f7b79;
  margin-top: .3em
}

.iiie-ui-card {
  background: #fff;
  border: 1px solid #e0eceb;
  border-radius: .8em;
  padding: .8em .9em;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.iiie-ui-ch {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .95em;
  margin-bottom: .6em;
  color: #0b4f52
}

.iiie-ui-ch span {
  font-size: .72em;
  font-weight: 600;
  color: #14908a
}

.iiie-ui-mods {
  flex: 1.75
}

.iiie-ui-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: .6em
}

.iiie-ui-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .4em .35em;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  color: #2b4745;
  background: #f6fbfa;
  border: 1px solid #e3eeed;
  border-radius: .9em
}

.iiie-ui-mod i {
  width: 3.1em;
  height: 3.1em;
  border-radius: .9em;
  background: #14908a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1em;
  flex: none
}

.iiie-ui-mod i .iiie-ic {
  font-size: 1.55em
}

.iiie-ui-mod:nth-child(even) i {
  background: #0f7a75
}

.iiie-ui-low {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .9em
}

.iiie-ui-chart {
  flex: 1;
  min-height: 0
}

.iiie-ui-chart svg {
  display: block;
  width: 100%;
  height: 100%
}

.iiie-ui-log {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .68em;
  padding: .38em 0;
  border-bottom: 1px solid #eef5f4;
  color: #33504e
}

.iiie-ui-log:last-child {
  border: 0
}

.iiie-ui-log i {
  width: .8em;
  height: .8em;
  border-radius: 50%;
  background: #14908a;
  flex: none;
  box-shadow: 0 0 0 .3em #e3f3f1
}

.iiie-ui-log span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.iiie-ui-log small {
  color: #8aa3a1;
  font-size: .9em
}


/* ---------- continuous product animation (transform/opacity only) ---------- */
.iiie-screen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-120%);
  animation: iiieSweep 6s ease-in-out infinite
}

@keyframes iiieSweep {

  0%,
  55% {
    transform: translateX(-120%)
  }

  100% {
    transform: translateX(380%)
  }
}

.iiie-ui-kpi {
  animation: iiieKpi 5s ease-in-out infinite
}

.iiie-ui-kpi:nth-child(2) {
  animation-delay: .5s
}

.iiie-ui-kpi:nth-child(3) {
  animation-delay: 1s
}

.iiie-ui-kpi:nth-child(4) {
  animation-delay: 1.5s
}

@keyframes iiieKpi {

  0%,
  100% {
    transform: none
  }

  50% {
    transform: translateY(-.35em)
  }
}

.iiie-ui-ki {
  animation: iiiePop 5s ease-in-out infinite
}

@keyframes iiiePop {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.12)
  }
}

.iiie-ui-mod {
  animation: iiieMod 10s ease-in-out infinite
}

.iiie-ui-mod:nth-child(2) {
  animation-delay: 1s
}

.iiie-ui-mod:nth-child(3) {
  animation-delay: 2s
}

.iiie-ui-mod:nth-child(4) {
  animation-delay: 3s
}

.iiie-ui-mod:nth-child(5) {
  animation-delay: 4s
}

.iiie-ui-mod:nth-child(6) {
  animation-delay: 5s
}

.iiie-ui-mod:nth-child(7) {
  animation-delay: 6s
}

.iiie-ui-mod:nth-child(8) {
  animation-delay: 7s
}

.iiie-ui-mod:nth-child(9) {
  animation-delay: 8s
}

.iiie-ui-mod:nth-child(10) {
  animation-delay: 9s
}

@keyframes iiieMod {

  0%,
  12%,
  100% {
    transform: none;
    background: #f6fbfa;
    border-color: #e3eeed;
    box-shadow: none
  }

  5% {
    transform: scale(1.07);
    background: #e3f3f1;
    border-color: #14908a;
    box-shadow: 0 .6em 1em -.5em rgba(20, 144, 138, .6)
  }
}

.iiie-ui-chart rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: iiieBar 5s ease-in-out infinite
}

.iiie-ui-chart rect:nth-of-type(2) {
  animation-delay: .15s
}

.iiie-ui-chart rect:nth-of-type(3) {
  animation-delay: .3s
}

.iiie-ui-chart rect:nth-of-type(4) {
  animation-delay: .45s
}

.iiie-ui-chart rect:nth-of-type(5) {
  animation-delay: .6s
}

.iiie-ui-chart rect:nth-of-type(6) {
  animation-delay: .75s
}

.iiie-ui-chart rect:nth-of-type(7) {
  animation-delay: .9s
}

@keyframes iiieBar {
  0% {
    transform: scaleY(.15)
  }

  25%,
  80% {
    transform: scaleY(1)
  }

  100% {
    transform: scaleY(.15)
  }
}

.iiie-ui-log {
  animation: iiieLog 6s ease-in-out infinite
}

.iiie-ui-log:nth-of-type(3) {
  animation-delay: .6s
}

.iiie-ui-log:nth-of-type(4) {
  animation-delay: 1.2s
}

@keyframes iiieLog {
  0% {
    opacity: 0;
    transform: translateY(.9em)
  }

  10%,
  82% {
    opacity: 1;
    transform: none
  }

  95%,
  100% {
    opacity: 0;
    transform: translateY(-.5em)
  }
}

.iiie-ui-log i {
  animation: iiieDot 1.6s ease-in-out infinite
}

@keyframes iiieDot {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.5)
  }
}

.iiie-ui-ib i {
  animation: iiieDot 1.6s ease-in-out infinite
}


/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .iiie-nav-link {
    padding: 10px 10px
  }
}

@media (max-width:991px) {
  .iiie-topbar .iiie-wrap {
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap
  }

  .iiie-burger {
    display: inline-flex
  }

  .iiie-nav {
    position: absolute;
    left: -24px;
    right: -24px;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--iiie-line);
    box-shadow: 0 24px 30px -20px rgba(8, 60, 60, .25)
  }

  .iiie-nav.is-open {
    display: flex
  }

  .iiie-btn--sm {
    margin: 8px 0 0
  }

  .iiie-dd-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 0 12px;
    min-width: 0
  }

  .iiie-dd-box {
    border: 0;
    box-shadow: none;
    padding: 0
  }

  .iiie-dd:hover .iiie-nav-link .iiie-ic {
    transform: none
  }

  .iiie-hero {
    padding: 44px 0 56px
  }

  .iiie-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .iiie-tilt,
  .iiie-visual:hover .iiie-tilt {
    transform: rotateX(5deg) rotateY(-9deg) rotateZ(2deg)
  }

  .iiie-strips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px
  }

  .iiie-strips .iiie-strip {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    white-space: normal
  }

  .iiie-hint {
    display: none
  }
}

@media (hover:none) {
  .iiie-strips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px
  }

  .iiie-strips .iiie-strip {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    white-space: normal
  }

  .iiie-hint {
    display: none
  }
}

@media (max-width:820px) {
  .iiie-dialog {
    grid-template-columns: 1fr;
    max-width: 520px
  }

  .iiie-side {
    display: none
  }

  .iiie-formwrap {
    padding: 34px 22px 26px
  }
}

@media (max-width:560px) {
  .iiie-grid {
    grid-template-columns: 1fr
  }

  .iiie-wrap {
    padding: 0 18px
  }

  .iiie-cta .iiie-btn {
    flex: 1 1 100%
  }

  .iiie-strip {
    font-size: 12.5px
  }
}

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

  .iiie-scope *,
  .iiie-scope *::before,
  .iiie-scope *::after {
    transition: none !important;
    animation: none !important
  }
}

.add-color {
  background-color: #14908a;
  color: #ffffff;
}
.add-color:hover{background-color: #14908a;}

.logo-box {
  width: 27%;
}

.home-logo img {
  width: 40%;
  background: #ffffff;
  border-radius: 9px;
  padding: 7px 16px;
}
.iiie-side h3{color: #ffffff;}



 .iiie-modal{
    --iiie-teal:#0aa596;--iiie-teal-d:#07857a;--iiie-ink:#0f2a2e;--iiie-muted:#5b7276;
    --iiie-line:#dcebe9;--iiie-soft:#f3faf9;
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s
  }
  .iiie-modal,.iiie-modal *,.iiie-modal *::before,.iiie-modal *::after{box-sizing:border-box}
  .iiie-modal.is-open{opacity:1;visibility:visible;transition-delay:0s}
  .iiie-modal-bg{position:absolute;inset:0;background:rgba(7,38,41,.62)}

  .iiie-modal .iiie-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

  .iiie-dialog{
    position:relative;width:100%;max-width:980px;max-height:calc(100vh - 32px);overflow:auto;
    overscroll-behavior:contain;display:grid;grid-template-columns:.92fr 1.08fr;background:#fff;
    border-radius:24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
    transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)
  }
  .iiie-modal.is-open .iiie-dialog{transform:none}

  .iiie-x{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--iiie-line);background:#fff;color:var(--iiie-ink);display:grid;place-items:center;cursor:pointer;font-size:18px;padding:0;transition:background .2s,transform .2s}
  .iiie-x:hover{background:var(--iiie-soft);transform:rotate(90deg)}

  /* ---- left side design ---- */
  .iiie-side{position:relative;overflow:hidden;color:#fff;padding:40px 34px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(160deg,#0b4f52 0%,#0a8a82 62%,#0aa596 100%)}
  .iiie-side::before,.iiie-side::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.07)}
  .iiie-side::before{width:300px;height:300px;right:-110px;top:-90px}
  .iiie-side::after{width:240px;height:240px;left:-90px;bottom:-80px}
  .iiie-side>*{position:relative;z-index:1}
  .iiie-side-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.02em}
  .iiie-side-logo span{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:18px}
  .iiie-side h3{margin:0;font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.2;font-weight:800;letter-spacing:-.02em}
  .iiie-side p{margin:0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.85)}
  .iiie-side-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:12px}
  .iiie-side-list li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500}
  .iiie-side-list li i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:13px;flex:none}
  .iiie-side-card{margin-top:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
  .iiie-side-card i{width:38px;height:38px;border-radius:50%;background:#12b76a;display:grid;place-items:center;font-size:18px;flex:none}
  .iiie-side-card b{display:block;font-size:14px}
  .iiie-side-card small{display:block;font-size:12px;color:rgba(255,255,255,.78);margin-top:2px}

  /* ---- right side (form wala hissa) ---- */
  .iiie-formwrap{padding:40px 40px 34px;position:relative}
  .iiie-form-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--iiie-teal-d);background:#e8f7f5;border-radius:999px;padding:6px 13px;letter-spacing:.02em}
  .iiie-form-tag i{width:7px;height:7px;border-radius:50%;background:var(--iiie-teal)}
  .iiie-form-title{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:14px 0 4px;color:var(--iiie-ink)}
  .iiie-form-sub{font-size:14px;color:var(--iiie-muted);margin:0 0 24px}

  @media (max-width:820px){
    .iiie-dialog{grid-template-columns:1fr;max-width:520px}
    .iiie-side{display:none}
    .iiie-formwrap{padding:34px 22px 26px}
  }
  @media (prefers-reduced-motion:reduce){
    .iiie-modal,.iiie-dialog,.iiie-x{transition:none !important}
  }