:root{
  --ieb-red: #e10600;
  --ieb-eco: #21f38a;
  --text: rgba(0,0,0,.86);
  --muted: rgba(0,0,0,.62);
  --line: rgba(0,0,0,.10);
  --card: rgba(255,255,255,.92);
  --shadow: 0 28px 90px rgba(0,0,0,.10);
}

.link-muted{ color: rgba(0,0,0,.65); text-decoration: none; }
.link-muted:hover{ color: rgba(0,0,0,.86); text-decoration: underline; }
.nav-link.active{
    color: black;
    border-bottom:2px solid #E40134;
    opacity:1;
}




.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.88);
  font-weight: 900;
  color: rgba(0,0,0,.68);
  justify-content: sp
}

.dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--ieb-red);
  box-shadow: 0 0 0 6px rgba(225,6,0,.10);
}
.dot--eco{
  background: var(--ieb-eco);
  box-shadow: 0 0 0 6px rgba(33,243,138,.10);
}

.hero{
  position: relative;
  overflow:hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.video-wrapper{
  position:absolute;
  inset:0;
  z-index:0;
}

.video-wrapper video{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03);
}

.hero:after{
  content:"";
  position:absolute; inset:0;
  background: #0000009c;
  z-index: 1;
  pointer-events:none;
}

.hero-pad{
  padding-top: 140px;
  padding-bottom: 140px;
  position: relative;
  z-index: 2;
}

.hero-title .accent{ color: #ff3d4f; }
.hero-title .eco{ color: rgba(12,122,72,.95); }

.hero-socials{
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 14px;
  z-index: 3;
  margin-bottom: 10px
}

.hero-socials a{
  width: 5vh;
  height: 5vh;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 20px;
  transition: transform .2s ease, background .2s ease;
}

.hero-socials a:hover{
  transform: translateX(4px);
  background: rgba(225,6,0,.85); 
}
.ba{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  aspect-ratio: 16/9;
  user-select: none;
  touch-action: pan-y;
}

.ba__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.03) saturate(1.02);
}

.ba__after{
  position:absolute;
  inset:0;
  clip-path: inset(0 50% 0 0);
}

.ba__divider{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width: 0;
  pointer-events:none;
}

.ba__line{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width: 2px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    0 0 20px rgba(0,0,0,.12);
}

.ba__handle{
  position:absolute;
  top:50%;
  left:0;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}

.ba__chev{
  font-weight: 950;
  color: rgba(0,0,0,.65);
  font-size: 18px;
  line-height: 1;
}

.ba__label{
  position:absolute;
  left:50%;
  top:14px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
}

.ba__badge{
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.68);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(225,6,0,.22);
  background: rgba(225,6,0,.06);
}

.ba__badge--eco{
  border-color: rgba(33,243,138,.30);
  background: rgba(33,243,138,.08);
}

.ba__mid{
  font-weight: 950;
  color: rgba(0,0,0,.55);
}

.waveSep{ width:100%; line-height:0; overflow:hidden; }
.waveSep svg{ display:block; width:100%; height:120px; }
.waveSep path{ fill: #f8f8f8; }
.waveSep--in{ margin-top: 60px; }
.waveSep--out{ margin-bottom: 40px; }

.process{
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 44px;
}

.processLine{
  position:absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: visible;
}

.processLine__fill{
  position:absolute;
  left:0; right:0;
  top:0;
  height:0%;
  border-radius: 999px;
  background: #e40135;
  box-shadow: 0 0 26px rgba(33,243,138,.22);
  transition: height .18s linear;
}

.processLine__fill::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width: 22px;
  height: 100%;
  opacity: .9;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,.55) 7px,
      rgba(255,255,255,0) 10px
    );
  filter: blur(.3px) drop-shadow(0 0 10px rgba(33,243,138,.25));
  mix-blend-mode: screen;
  animation: electricNoise .55s steps(2) infinite;
}

@keyframes electricNoise{
  0%   { opacity:.35; transform: translateX(-50%) skewX(6deg); }
  35%  { opacity:.80; transform: translateX(-50%) skewX(-8deg); }
  70%  { opacity:.55; transform: translateX(-50%) skewX(10deg); }
  100% { opacity:.40; transform: translateX(-50%) skewX(-6deg); }
}

.processLine__spark{
  position:absolute;
  left:50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(222 17 14) 0%, rgb(187 224 250 / 0%) 45%, rgba(33, 243, 138, 0) 70%);
  filter: drop-shadow(0 0 10px rgba(33,243,138,.65)) drop-shadow(0 0 22px rgba(225,6,0,.22));
  opacity: 0;
}

.processLine__spark::before,
.processLine__spark::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(225,6,0,0) 0 20%,
      rgba(225,6,0,.55) 22% 24%,
      rgba(33,243,138,0) 24% 48%,
      rgba(33,243,138,.55) 50% 52%,
      rgba(225,6,0,0) 52% 100%
    );
  filter: blur(1.2px);
  opacity:.55;
  animation: sparkSpin .6s linear infinite;
}
.processLine__spark::after{
  inset:-16px;
  opacity:.28;
  animation-duration: .95s;
}
@keyframes sparkSpin{ to { transform: rotate(360deg); } }

.pStep{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items:start;
}

.pStep__dot{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(225,6,0,.08);
  border: 1px solid rgba(225,6,0,.18);
  display:grid;
  place-items:center;
  margin-top: 6px;
}
.pStep__dot--eco{
  background: rgba(33,243,138,.10);
  border-color: rgba(33,243,138,.25);
}

.pStep__n{ font-weight: 950; color: rgba(0,0,0,.70); font-size: 13px; }

.pStep__card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.90);
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
}

.pStep__card h3{ margin:0 0 6px; font-size: 18px; }
.pStep__card p{ margin:0 0 10px; color: var(--muted); }

.pTags{ display:flex; gap:8px; flex-wrap:wrap; }
.pTag{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.62);
}
.pTag--eco{
  border-color: rgba(33,243,138,.35);
  color: rgba(12,122,72,.95);
}
.pStep__toggle{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.pStep__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.pStep__title{
  margin: 0;
  font-size: 18px;
}

.pStep__chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(0,0,0,.65);
  transition: transform .18s ease;
}

.pStep__content{
  margin-top: 10px;
  color: rgba(0,0,0,.62);
  font-size: 14px;
  overflow: hidden;
}

.pStep.is-open .pStep__chev{
  transform: rotate(180deg);
}

.pStep__dot{
  position: relative;
}

.pStep__dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 18px;
  border: 2px solid rgba(0,0,0,.08);
  opacity: .65;
  transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pStep.is-done .pStep__dot::after{
  opacity: 1;
  border-color: rgb(76 148 247 / 36%);
  box-shadow: 0 0 0 6px rgb(149 199 246 / 38%);
  transform: scale(1.03);
}

.pStep.is-current .pStep__dot::after{
  border-color: rgba(225,6,0,.45);
  box-shadow: 0 0 0 6px rgba(225,6,0,.10);
}

.pStep.is-done .pStep__card{
  border-color: rgba(33,243,138,.22);
  box-shadow:
    0 18px 60px rgba(0,0,0,.06),
    0 0 0 1px rgba(33,243,138,.10) inset;
}
.pStep.is-current .pStep__card{
  border-color: rgba(225,6,0,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.06),
    0 0 0 1px rgba(225,6,0,.08) inset;
}

.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}


.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (max-width: 980px){
  .hero-pad{ padding-top: 120px; padding-bottom: 120px; }
}

.techshot__frame{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 90px rgba(0,0,0,.10);
  overflow: hidden;
}

.techshot__img{
  width: 100%;
  height: auto;
  display: block;
}

.techshot__frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}

.tPin{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.94);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  outline: none;
}

.tPin__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ieb-red, #e10600);
  box-shadow: 0 0 0 7px rgba(225,6,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}

.tPin--eco .tPin__dot{
  background: var(--ieb-eco, #21f38a);
  box-shadow: 0 0 0 7px rgba(33,243,138,.12);
}

.tPin:hover{
  transform: translate(-50%, -50%) scale(1.05);
  border-color: rgba(225,6,0,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.tPin::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 2px solid transparent;
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity .18s ease,
    transform .18s ease,
    border-color .18s ease;
}

.tPin::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(225,6,0,.22) 0%,
    rgba(225,6,0,.10) 35%,
    rgba(225,6,0,0) 68%
  );
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.tPin.is-active{
  transform: translate(-50%, -50%) scale(1.12);
  border-color: rgba(0,0,0,.65);
  z-index: 7;
  box-shadow:
    0 18px 60px rgba(0,0,0,.18),
    0 0 0 3px rgba(0,0,0,.10);
}

.tPin.is-active::before{
  opacity: 1;
  transform: scale(1);
  border-color: rgba(225,6,0,.55);
}


.tPin.is-active::after{
  opacity: 1;
  transform: scale(1);
  animation: pinPulse 1.25s ease-in-out infinite;
}


.tPin.is-active .tPin__dot{
  transform: scale(1.2);
  box-shadow: 0 0 0 9px rgba(225,6,0,.18);
}


.tPin--eco.is-active::before{
  border-color: rgba(33,243,138,.60);
}
.tPin--eco.is-active::after{
  background: radial-gradient(
    circle,
    rgba(33,243,138,.20) 0%,
    rgba(33,243,138,.10) 35%,
    rgba(33,243,138,0) 68%
  );
}
.tPin--eco.is-active .tPin__dot{
  box-shadow: 0 0 0 9px rgba(33,243,138,.18);
}

@keyframes pinPulse{
  0%   { transform: scale(1); opacity:.55; }
  50%  { transform: scale(1.06); opacity:.75; }
  100% { transform: scale(1); opacity:.55; }
}

.tPin:focus-visible{
  box-shadow: 0 0 0 4px rgba(33,243,138,.22);
}

.tInspect{
  position:absolute;
  z-index: 6;
  width: min(420px, calc(100% - 24px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 120px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.tInspect.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


.tInspect__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px 0;
}

.tInspect__kicker{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.tInspect__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-weight: 900;
}

.tInspect__title{
  margin: 8px 12px 6px;
  font-size: 18px;
}
.tInspect__desc{
  margin: 0 12px 10px;
  color: rgba(0,0,0,.62);
  font-size: 14px;
}
.tInspect__list{
  margin: 0 12px 12px;
  padding-left: 18px;
  color: rgba(0,0,0,.65);
}
.tInspect__list li{ margin: 6px 0; }

.tInspect__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.tInspect__pulse{
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  pointer-events:none;
  opacity: 0;
  background:
    radial-gradient(260px 160px at 20% 10%, rgba(225,6,0,.10), transparent 60%),
    radial-gradient(260px 160px at 85% 80%, rgba(33,243,138,.10), transparent 60%);
  transition: opacity .2s ease;
}
.tInspect.is-open .tInspect__pulse{
  opacity: 1;
}
.ieb-footer{
      color:black;
      background:rgb(248 248 248);
      padding:56px 24px 20px;
      position:relative;
      overflow:hidden;
    }
    .ieb-wrap{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      gap:28px;
      grid-template-columns: 1.2fr .9fr .7fr 1.2fr 1fr;
    }
    .nav ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
    .nav a{color:#000; text-decoration:none; font:500 16px/1.2 system-ui,Segoe UI,Roboto,Arial; opacity:.95}
    .nav a:hover{opacity:1; text-decoration:underline}
    .hq h4{margin:0 0 8px; font:700 18px/1.2 system-ui,Segoe UI,Roboto,Arial}
    .hq p{margin:0 0 10px; color: rgb(62 62 62 / 70%)}
    .hq a{color:#000; text-underline-offset:3px}
    .icons{display:flex; gap:12px; list-style:none; padding:0; margin:0 0 14px}
    .btn-ico{
      display:inline-grid; place-items:center;
      width:44px; height:44px; border-radius:12px;
      background:rgba(0,0,0,.05); color:#000; text-decoration:none;
      transition:.2s transform ease, .2s background ease, .2s box-shadow ease;
      outline:0;
      font-size:20px; 
    }
    .btn-ico:hover{background:rgba(0,0,0,.08); transform:translateY(-2px)}
    .btn-ico:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.25)}
    .inboxes p{margin:6px 0; color:rgba(0,0,0,.6)}
    .inboxes a{color:#000; text-underline-offset:3px}
    .ieb-legal{
      max-width:1200px; margin:28px auto 0; padding-top:16px;
      border-top:1px solid rgba(0,0,0,.08); text-align:center; color:rgba(0,0,0,.6);
      font:400 14px/1.4 system-ui,Segoe UI,Roboto,Arial;
    }
    @media (max-width:1100px){
      .ieb-wrap{grid-template-columns: 1.3fr 1fr 1fr}
      .socials{grid-column: span 3}
    }
    @media (max-width:720px){
      .ieb-wrap{
        display:flex;
        flex-direction:column;  
        gap:16px;
      }
    }
   
.ieb-step{
  padding: 8px 0;
}

.ieb-node{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  border: 10px solid rgba(0,0,0,.06);
  display: grid;
  place-items: center;
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
}
.ieb-node i{
  font-size: 50px;
  color: white;
}

.ieb-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(0,0,0,.55);
}
.ieb-title{
  margin: 6px 0 8px;
  font-size: 26px;
  font-weight: 900;
  color: rgba(0,0,0,.70);
  line-height: 1.05;
}
.ieb-desc{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,0,0,.55);
}

.ring--green{  border-color: rgba(50,200,130,.55); }
.ring--orange{ border-color: rgba(255,160,120,.60); }
.ring--yellow{ border-color: rgba(245,200,85,.65); }
.ring--blue{   border-color: rgba(120,190,245,.65); }
.ring--purple{ border-color: rgba(155,135,255,.65); }

@media (max-width: 992px){
  .ieb-node{
    width: 84px;
    height: 84px;
    border-width: 8px;
  }
  .ieb-node i{ font-size: 26px; }
  .ieb-title{ font-size: 20px; }
}
.ieb-step{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.ieb-step.is-in{
  opacity: 1;
  transform: none;
}

.ieb-node{
  position: relative;
  border-color: rgba(0,0,0,.08) !important; 
  transition: border-color .55s ease, box-shadow .55s ease, transform .55s ease;
}

.ieb-node::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,0,0,.08), transparent 68%);
  opacity: .0;
  transform: scale(.92);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events:none;
}

.ieb-step.is-painted .ieb-node{
    background-color: var(--ring, rgba(225,6,0,.55)) !important;
  border-color: var(--ring, rgba(225,6,0,.55)) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.12),
    0 0 0 6px rgba(255,255,255,.35) inset;
  transform: translateZ(0);
}

.ieb-step.is-painted .ieb-node::after{
  opacity: 1;
  transform: scale(1);
  animation: ringPop .65s ease both;
}

@keyframes ringPop{
  0%   { opacity: 0; transform: scale(.90); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1.00); }
}
.ieb-steps{
  position: relative;
}

.ieb-step{
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}

@media (max-width: 992px){
  .ieb-step{
    transform: none !important;
  }
}